html, body 
{
   margin: 0;
   padding: 0;
   background: #F6F6F6;
}

body 
{
   font-family: play, sans-serif;
   font-size: 16px;
   line-height: 1;
   color: #504C46;
}

*
{
   box-sizing: border-box;
}

table 
{
   border-collapse: collapse;
   border-spacing: 0;
}

ol, ul 
{
   list-style: none;
}

section
{
   margin: 40px 0;
   clear: both;
}

code
{
   padding: 0 6px;
   background: #E6E6E6;
}

.wide
{
   width: 100%;
}

/*---------------- Nav -------------------*/

#main-menu 
{
   width: 100%;
   height: 60px;
   background: #3A3A3A;
   opacity: 0.96;
}

#menu-placeholder
{
   height: 0;
}

#main-menu.fixed 
{
   position: fixed;
   left: 0;
   top: 0;
   z-index: 9999;
}

#main-menu.fixed + #menu-placeholder
{
   height: 60px;
}

nav a 
{
   display: inline-block;
   margin: 0;
   padding: 0;
}

nav a img
{
   display: inline-block;
   height: 40px;
   margin: 10px 35px;
}

nav ul 
{
   float: right;
   margin: 0 35px 0 0;
   padding: 0;
}

nav ul li 
{
   float: left;
}

nav ul a 
{
   padding: 20px;
   font-size: 20px;
   text-decoration: none;
   color: #DCDCDC;
}

nav ul a.active 
{
   color: #f29977;
}

nav ul a:hover 
{
    background-color: rgba(255, 255, 255, 0.15);
}

nav label, nav input  
{
   display: none;
}

nav label:hover  
{
    background-color: rgba(255, 255, 255, 0.15);
}

@media screen and (max-width: 999px) 
{
   nav label 
   {
      display: block;
      float: right;
      padding: 20px;
      font-size: 20px;
      color: #D6D6D6;
      cursor: pointer;
    }

   nav ul 
   {
      display: none;
   }

   nav input:checked ~ ul 
   {
      position: absolute;
      top: 65px;
      right: 0px;
      left: 0px;
      z-index: 9999;
      display: block;
      margin: 0;
   }

   nav ul li 
   {
      display: block;
      float: none;
      width: 100%;
      text-align: center;
      background: #3A3A3A;
   }

   nav ul li a
   {
      width: 100%;
      padding: 20px 0px 20px 0;
   }
}

@media screen and (max-width: 125px) 
{
   nav label 
   {
      color: transparent;
   }
}

/*---------------- Stage -------------------*/

#stage 
{
   margin: 0;
}

.language-selector
{
   position: absolute;
   top: 72px;
   right: 15px;
   width: 125px;
   height: 25px;
   z-index: 1000;
   padding-left: 3px;
   background: #DFDFDF;
   font-family: play, sans-serif;
   font-size: 14px;
}

/*---------------- Portal -------------------*/

section.portal 
{
   margin-top: 620px;
   font-size: 17px;
   line-height: 32px;
   background: url(../images/blueline.png) repeat;
}

#banner 
{
   position: absolute;
   top: 60px;
   left: 0;
   right: 0;
   height: 460px;
   background-image: url(../images/terra.jpg);
   background-position: top left;
   background-size: cover;
   border-bottom: solid 1px #666;
}

.banner-text
{
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   height: 100%;
   padding: 150px 50px;
   color: #FFFFFF;
}

.banner-title
{
   margin-bottom: 50px;
   font-size: 79px;
}

.banner-subtitle
{
   font-size: 32px;
   line-height: 40px;
}

.banner-sample img
{
   position: absolute;
   bottom: -100px;
   right: 30px;
}

section.portal .invocation
{
   margin: 0 20%;
   padding: 0 50px;
   background: #F6F6F6;
}

section.portal p
{
   margin: 50px 0;
}

section.portal p:first-letter
{
   float: left;
   font-size: 50px;
   font-weight: 200;
   color: #4C81B7;
}

@media screen and (max-width: 1200px) 
{
   .banner-sample img
   {
      width: 600px;
      bottom: -50px;
   }
}

@media screen and (max-width: 1100px) 
{
   .banner-text
   {
      width: 100%;
      padding: 100px 50px;
   }
   .banner-sample img
   {
      bottom: -300px;
   }
   section.portal 
   {
      margin-top: 860px;
   }
}

@media screen and (max-width: 800px) 
{
   .banner-sample img
   {
      width: 500px;
      bottom: -250px;
      left: 25px;
      right: auto;
   }
   section.portal 
   {
      margin-top: 800px;
   }
   section.portal .invocation
   {
      margin: 0;
   }
}

/*---------------- Features -------------------*/

section.features
{
   margin-top: 50px;
   font-size: 17px;
   line-height: 30px;
}

.grey-band
{
   margin: 20px 15px;
   background: #EAEAEC;
}

section.features h1 
{
   margin: 0;
   padding: 50px 60px 0 40px;
   font-size: 35px;
   font-weight: lighter;
   line-height: 50px;
   text-align: right;
   color: #4C81B7;
}

section.features .grey-band h1
{
   text-align: left;
}

section.features .half-side 
{
   display: inline-block;
   width: 49.5%;
   padding: 15px 35px;
   vertical-align: middle;
}

section.features p
{
   margin: 20px 0;
}

section.features img.illustration
{
   display: block;
   max-width: 90%;
   max-height: 500px;
   margin: auto;
}

@media screen and (max-width: 999px) 
{
   section.features h1, section.features .grey-band h1
   {
      text-align: center;
   }
   section.features .half-side 
   {
      display: block;
      width: 100%;
      padding: 15px 50px;
   }
   section.features img.illustration
   {
      max-width: 75%;
      margin: 25px auto;
   }
}

/*---------------- Download -------------------*/

section.download
{
   margin: 50px;
   font-size: 17px;
   line-height: 30px;
}

section.download h1 
{
   margin: 50px 0 25px;
   padding: 0;
   font-size: 35px;
   font-weight: lighter;
   line-height: 40px;
   text-align: left;
   color: #4C81B7;
}

section.download h2
{
   margin: 50px 0 30px;
   padding: 0;
   font-size: 24px;
   font-weight: 500;
   line-height: 30px;
   text-align: left;
   color: #4C81B7;
}

section.download h3
{
   margin: 30px 0 10px;
   font-size: 18px;
   font-weight: 700;
}

section.download h4
{
   margin: 50px 0 15px;
   padding: 0;
   font-size: 17px;
   font-weight: 500;
   line-height: 25px;
   text-align: left;
   color: #4C81B7;
}

section.download .notice
{
   font-size: 14px;
}

section.download code
{
   font-size: 15px;
}

section.download span
{
   font-size: 16px;
   white-space: nowrap;
}

table.info
{
   margin: 10px 40px 25px;
}

table.info td
{
   padding: 0 15px;
   font-family: "Segoe UI", "Open Sans", helvetica, sans-serif;
   font-weight: 600;
   font-size: 16px;
   line-height: 25px;
   color: #966;
   white-space: nowrap;
}

.installers
{
   margin: 15px 0 75px;
}

.installers a 
{
   display: inline-block;
   width: 300px;
   margin: 10px 25px 10px 20px;
   padding: 13px 15px;
   border-radius: 200px;
   font-size: 20px;
   line-height: 25px;
   text-align: center;
   text-decoration: none;
	color: #EFEFEF;
   background: #69A53D;
   cursor: pointer;
}

.installers a:hover, .installers a:focus
{
   color: #FF2060;
}

@media screen and (max-width: 699px) 
{
   .installers li span
   {
      display: none;
   }
}

/*---------------- Purchase -------------------*/

section.purchase
{
   margin: 50px;
   font-size: 17px;
   line-height: 30px;
}

section.purchase h1 
{
   margin: 50px 0 20px;
   padding: 0;
   font-size: 38px;
   font-weight: lighter;
   line-height: 50px;
   text-align: center;
   color: #4C81B7;
}

#offer
{
   width: 500px;
   margin: 70px auto;
   text-align: center;
}

#offer .header
{
   margin: 10px 1px 1px 1px;
   padding: 15px;
   color: #FFF;
   background: #4C81B7;
}

#offer h2 
{
	margin: 10px 0 20px;
   font-size: 30px;
	font-weight: 200;
   color: #FFF;
}

#offer .price
{
   font-family: "Segoe UI", "Open Sans", helvetica, sans-serif;
   font-weight: 700;
   font-size: 40px;
}

#offer .units
{
	font-size: 21px;
	vertical-align: top;
   color: #EEE;
}

#offer ul.features
{
   margin: 10px 1px 2px 1px;
   padding: 0;
   color: #FFF;
   background: #EEE;
}

#offer .features li
{
   height: 26px;
   padding-left: 8px;
   border-bottom: 2px solid #FAFAFA;
	font-size: 15px;
   text-align: left;
   color: #777;
   background: #EEE;
   overflow: hidden;
}

#offer .footer a
{
   display: inline-block;
   width: 300px;
   margin: 25px auto;
   padding: 13px 15px;
   border-radius: 200px;
   font-size: 23px;
   text-align: center;
   text-decoration: none;
	color: #FFF;
   background: #D95D5D;
   cursor: pointer;
}

#offer .footer a:hover
{
   background: #C84C4C;
}

#buy-form
{
   margin: 150px 25px 100px;
   font-size: 16px;
}

#buy-form .placeholder 
{
   height: 75px;
}

#buy-form .half-side 
{
   display: inline-block;
   width: 49.5%;
   padding: 15px 35px;
   vertical-align: top;
}

@media screen and (max-width: 999px) 
{
   #buy-form .half-side 
   {
      display: block;
      width: 100%;
      padding: 15px 50px;
   }
}

#buy-form input
{
   display: block;
   width: 90%;
   height: 30px;
   margin: 10px 0 25px;
   padding: 5px 10px;
   border: 1px solid #999;
   border-radius: 8px;
   font-family: "Segoe UI", "Open Sans", helvetica, sans-serif;
   font-weight: 400;
   font-size: 16px;
	color: #212;
}

#buy-form p
{
   margin-top: 65px;
}

/*---------------- Support -------------------*/

section.support 
{
   margin-top: 50px;
   font-size: 16px;
   line-height: 30px;
   color: #3A3A3A;
}

section.support h1
{
   margin: 0 0 20px;
   font-size: 40px;
   font-weight: lighter;
   color: #4C81B7;
}

section.support h2
{
   margin: 70px 0 25px;
   font-size: 42px;
   font-weight: lighter;
   color: #4C81B7;
}

section.support h3
{
   margin: 50px 0 20px;
   font-size: 32px;
   font-weight: lighter;
   color: #4C81B7;
}

section.support h4
{
   margin: 30px 0 -5px;
   font-size: 23px;
   font-weight: lighter;
   color: #4C81B7;
}

section.support h5
{
   margin: 10px 0 -10px;
   font-size: 17px;
   font-weight: 500;
   color: #4C81B7;
}

section.support :link
{
   color: #24E;
}

section.support :visited
{
   color: #94C;
}

section.support code
{
   font-size: 15px;
}

.invitation
{
   text-align: center;
}

.invitation img
{
   height: 100px;
   margin: 25px auto;
}

.invitation p
{
   padding: 0 25px 20px;
}

.directory
{
   margin: 15px 25px 20px;
}

.directory ul
{
   margin: 0;
   padding-left: 40px;
}

.directory ul, .directory ul li ul li ul
{
   list-style: disc;
}

.directory ul li ul, .directory ul li ul li ul li ul 
{
   list-style: square;
}

.reference
{
   margin: 5px 35px 50px;
   font-size: 16px;
   line-height: 25px;
}

.reference ul.platforms
{
   list-style: disc;
}

.reference ul li img
{
   width: 20px;
   margin-right: 10px;
   vertical-align: middle;
}

/*---------------- Contact -------------------*/

section.contact
{
   margin: 50px 100px;
   font-size: 16px;
   line-height: 30px;
}

section.contact h1 
{
   margin: 50px 0 25px;
   padding: 0;
   font-size: 38px;
   font-weight: lighter;
   line-height: 50px;
   text-align: center;
   color: #4C81B7;
}

section.contact img
{
   display: block;
   width: 400px;
   margin: 50px auto 200px;
}

section.contact strong 
{
   text-decoration: underline;
}

section.contact .placeholder 
{
   height: 150px;
}

/*---------------- Forms -------------------*/

.admin-form 
{
   margin: 35px 0 75px;
}

.admin-form  label
{
   padding: 6px 10px 6px 0;
   font-family: "Segoe UI", "Open Sans", helvetica, sans-serif;
   font-weight: 700;
   font-size: 13px;
   vertical-align: middle;
   white-space: nowrap;
}

.admin-form  label.column
{
   display: inline-block;
   width: 120px;
}

.admin-form  .widget
{
   display: inline-block;
   margin: 6px 0 12px;
   padding: 5px 5px;
   border: 1px solid #CFCFCF;
   border-radius: 3px;
   color: #000;
   font-family: "Segoe UI", "Open Sans", helvetica, sans-serif;
   font-weight: 400;
   font-size: 15px;
   vertical-align: middle;
}

.admin-form  .widget,
.admin-form  .widget[disabled],
.admin-form  fieldset[disabled] .widget
{
   background-color: #FFF;
}

.admin-form  .widget:focus
{
   border: 1px solid #a6f492;
   box-shadow: 0px 0px 3px #a6f492;
}

.admin-form  .field-1
{
   width: 100px;
}

.admin-form  .field-2
{
   width: 150px;
}

.admin-form  .field-3
{
   width: 250px;
}

.admin-form  .field-4
{
   width: 375px;
}

.admin-form  .field-5
{
   width: 640px;
}

.admin-form  .wide-field
{
   display: block;
   clear: both;
   width: 99%;
}

.admin-form  .field-chain
{
   display: inline-block;
   margin: 0 5px 0 0;
   padding: 0;
}

.admin-form  input[type="checkbox"].widget,
.admin-form  input[type="radio"].widget
{
   margin-top: 0;
   margin-bottom: 0;
   margin-right: 8px;
   padding: 0;
   border: 0;
   vertical-align: middle;
   background: inherit;
}

.admin-form  div.widget
{
   vertical-align: middle;
}

.admin-form  fieldset
{
   margin-top: 3px;
   margin-bottom: 30px;
   padding: 10px 15px;
   border: 1px solid #CFCFCF;
   border-radius: 3px;
   background: #F9F9F9;
}

.admin-form  fieldset.singular
{
   margin: 0;
}

.admin-form  fieldset.gallery
{
   padding: 3px 5px;
   line-height: 40px;
   text-align: justify;
}

.admin-form  fieldset.subframe
{
   display: inline-block;
   margin: 3px 5px;
   padding: 3px 5px;
   vertical-align: bottom;
   line-height: 40px;
}

.admin-form  fieldset  img
{
   display: block;
   max-width: 500px;
   max-height: 250px;
   margin: auto;
}

.admin-form  textarea.paragraph-1
{
   height: 50px;
   margin-bottom: 5px;
}

.admin-form  textarea.paragraph-2
{
   height: 120px;
   margin-bottom: 30px;
}

.admin-form  textarea.paragraph-3
{
   height: 250px;
   margin-bottom: 30px;
}

.admin-form  td.top-align 
{
   vertical-align: top;
	padding-top: 10px;
}

.admin-form  .form-literal
{
   display: inline-block;
   margin: 6px 0 10px;
   color: #000;
   font-family: "Segoe UI", "Open Sans", helvetica, sans-serif;
   font-weight: 400;
   font-size: 14px;
}

.admin-form  .fieldset-header
{
   margin: 25px 0;
   padding-left: 20px;
   font-weight: bold;
   font-size: 13px;
   line-height: 20px;
   color: #FFF;
   background: #AABFAA;
}

.action-button
{
   margin: 0 10px;
   padding: 5px 20px;
   border-width: 1px;
   border-style: solid;
   border-radius: 3px;
   color: #333;
   background-color: #DDD;
   background-image: linear-gradient(to bottom, #EEE 0%, #CCC 100%);
   border-color: #DDD #CCC #BBB;
   box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
   font-family: "Segoe UI", "Open Sans", helvetica, sans-serif;
   font-weight: 700;
   font-size: 14px;
   text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
   text-align: center;
   cursor: pointer;
}

.action-button.bluish
{
   color: #FFF;
   background-color: #2580B0;
   background-image: linear-gradient(to bottom, #2A95C5 0%, #21759B 100%);
   border-color: #21759B #21759B #1E6A8D;
   box-shadow: 0px 1px 0px rgba(120, 200, 230, 0.5) inset;
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
}

.action-button-set
{
   text-align: right;
	margin-right: -8px;
}

.foot-paragraph
{
	margin-bottom: 25px;
}

.form-box-overlay
{
   display: none;
   position: fixed;
   z-index: 5000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.25);
}

.user-transient-box
{
   width: 600px;
   margin: 250px auto;
   padding: 20px 50px 35px;
   border: 2px solid #555;
   box-shadow: 1px 2px 3px 1px #999;
   background-color: #F9F9F9;
   line-height: 20px;
   white-space: nowrap;
}

.user-transient-box h3
{
   color: #800;
}

/*---------------- Footer -------------------*/

footer 
{
   display: block;
   position: relative;
   z-index: 5;
   padding: 25px 75px;
   font-size: 15px;
   color: #999;
   background: #3A3A3A;
}

.footer-nav 
{
   display: block;
   float: left;
   width: 25%;
   padding-top: 20px;
   line-height: 24px;
   text-decoration: none;
}

.footer-nav header 
{
   display: block;
   margin-bottom: 15px;
   margin-right: 20px;
   border-bottom: 1px solid #444;
   font-weight: bold;
}

.footer-nav header img
{
   height: 20px;
   opacity: 0.65;
}

.footer-nav a 
{
   color: #777;
   display: block;
   text-decoration: none;
   margin-right: 20px;
}

.footer-nav a:hover 
{
   color: #aaa;
   text-decoration: none;
}

.footer-buttons 
{
   display: block;
}

.button 
{
   display: inline-block;
   width: 200px;
   margin-top: 10px;
   padding: 13px 15px;
   border-radius: 200px;
   font-size: 20px;
   line-height: 24px;
   text-align: center;
   text-decoration: none;
   color: #eee;
   cursor: pointer;
   transition: background 0.1s linear, opacity 0.1s linear;
}

.button-green 
{
   background: #82BE56;
}

.button-green:hover, .button-green:focus 
{
    background: #69A53D;
}

.button-red 
{
   background: #D95D5D;
}

.button-red:hover 
{
   background: #C84C4C;
}

.button-dark 
{
   width: 100%;
   min-width: 200px;
   background: #444;
   color: #999;
}

.button-dark:hover 
{
   background: #555;
   color: #fff;
}

.button-info 
{
   background: #ddd;
   font-size: 85%;
   line-height: 17px;
   width: 200px;
   text-align: center;
   display: inline-block;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
}

.button-large 
{
   width: 300px;
}

.copy a 
{
   display: block;
   width: 100%;
   padding-top: 150px;
   text-align: center;
   text-decoration: none;
   color: #777;
}

@media only screen and (max-width: 768px) 
{
   .footer-nav  
   {
      width: 100%;
   }

   .footer-nav header 
   {
      display: initial;
   }

   .footer-nav a 
   {
      display: initial;
   }

   .footer-buttons 
   {
      display: none;
   } 
}

#elevator 
{
   position: fixed;
   right: 20px;
   bottom: 20px;
   z-index: 99999;
   overflow: hidden;
   visibility: hidden;
   opacity: 0;
}

#elevator i 
{
   width: 40px;
   height: 40px;
   margin-right: 5px;
   margin-bottom: 5px;
   border-radius: 50%;
   line-height: 40px;
   text-align: center;
   color: #fff;
   background-color: #0366d6
}

#elevator i:hover 
{
   background-color: #024ea4
}

#elevator.show 
{
   cursor: pointer;
   visibility: visible;
   opacity: 1
}

@media screen and (max-width: 767px) 
{
   #elevator.show 
   {
      display: none
   }
}