body {
   margin: 0;
   padding: 0;
   border: none;
}

body {
   background-color: #D7E1E1;
} 
/**/
@font-face {
   font-family: 'Open Sans', Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 400;
   src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
/***Caso não tiver Javascript ativado***/
#semjsalert {
	position: absolute;
	top: 20em;
	font-size: 1.2em;
	text-align: left;
}

#semjsalert noscript a {
	color: #E0D6D5;
}

#semjsalert noscript a:visited {
	color: #ADA6A5;
}

#semjsalert noscript a:hover {
	color: #A86A1A;
}
/**/

h1 {
   font-weight: 300;
}

h2 {
	font-size: 1.5em;
	font-weight: normal;
	padding: 1em 0 1.5em 0;
}

.wireframe .menu {
   display: none;	
}

img#appname {
   display: none;
}

section#header {
   display: none;
}

form {
   display: block;
   margin-top: 0em;
}

.wireframe section, .wireframe nav, .wireframe .menu, #footer {
   background-color: #191D20;
   font: small sans-serif;
   text-align: center;
   color: grey;
   width: 100%;
   border: none;
}

div#buttons-group-2 {
   display: none;
}

.wireframe #header {
   height: 3em;
   position: relative;
   top: -1em; /*-100*/ 
   background-color: #30373D;
}

/***INPUT BOXES***/
#actual-level {
   width: 30%;
   padding: 0;
   margin-left: auto;
   margin-right: auto;
   margin-top: -4em
}


p#tanque {
   position: relative;
   text-align: center;
   top: -3em;
}

[title="unidades"] {
   position: relative;
   top: 1em;
}

div#simulator-wrapper p {
   text-align: center;
   position: relative;
}

input {
   border: 1px solid #000;
}

input:focus {
   border: 1px solid #90160B;
}


input[type="tel"]:hover {
	background-color: #ffffff; 
}

input[type="tel"]#getlevel {
   position: relative;
   width: 80%;
   z-index: 2;
   margin-left: auto;
   margin-right: auto;
   top: .4em;
}

input[type="tel"] {
   position: relative;
   font-weight: 500;
   text-align: center;
   width: 12%;
   height: 30px;
   margin-left: 1%;
   margin-right: 1%;
   outline: none;
   background-color: #D3DCE4;
   /*border: 1px solid #E68800;*/
   -webkit-box-shadow: inset 2px 2px 2px 2px #b0b0b0;
   -moz-box-shadow: inset 2px 2px 2px 2px #b0b0b0;
   -o-box-shadow: inset 2px 2px 2px 2px #b0b0b0;
   -ms-box-shadow: inset 2px 2px 2px 2px #b0b0b0;
   box-shadow: inset 2px 2px 2px 2px #b0b0b0;   
   font-family: tahoma;
   font-size: 24px; 
   z-index: 1;
}

input[type="tel"].boxesproduction {
   margin-top: 10px;
}
/**/

/***LEVEL OPTIONS***/
select.level-options {
   position: relative;
   width: 18%;
   height: 1.5em;
   background: lightgray;
}

form#min-max {
   position: relative;
   bottom: 20px;
   top: -1.4em;
}

select#min {
   position: relative;
   right: 15%;
}

select#max {
   position: relative;
   left: 15%;
}
/**/

h1#sim {
   margin-top: 60px;
}

/**/

#principal {
   position: fixed;
   top: -4.3em;
   background: #00141A;
   width: 100%; 
   display: none;
}

/*MENU*/
#page nav#menu2 {
   position: fixed;   
   top: 0em;
   width: 100%;
   height: 3.5em;
   background-color: #191D20;
   border-bottom: 1px solid #79BDCC;
   z-index: 3;
}


@media (min-width: 600px)  and (max-width: 1023px){
   #page nav#menu2 {
   background: url(../images/nome-p.png);
   background-repeat: no-repeat;
   background-position: right;
   background-color: #191D20;  
   width: 100%;
   }
}

@media (min-width: 1024px) and (max-width: 1365px) {
   #page nav#menu2 {
   background: url(../images/nome-l-6.png);
   background-repeat: no-repeat;
   background-position: right;
   background-color: #191D20; 
   width: 100%;
   }
}

@media (min-width: 1366px) {
   #page nav#menu2 {
   background: url(../images/nome-l-6.png);
   background-repeat: no-repeat;
   background-position: right ;
   background-color: #191D20; 
   width: 80%;
   }
}

nav#menu2 ul {
   list-style-type:none;
   margin: 0;
   padding: 0;
   overflow: hidden;
}

nav#menu2 ul li {
	float: left;
   display: inline;
   /*font: bold 12px Arial;*/
   font-family: 'Open Sans Condensed', sans-serif;
   text-decoration: none;
   letter-spacing: 2px;
}

a {
	 display: block;
   width: 140px;
   font-size: 1.2em;
   font-weight: normal; 
   padding: 9px 0px 13px 0px;
   text-transform: uppercase;
   color: #74838B;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   border-top: 2px solid #ffffff;
   outline: none;
}

a#acerca, a#como {
	width: 80px;
}

a:link, a:visited {
    background-color: #191D20;
    text-align: center;  
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #262C30;
    color: #ffffff;
}
/*End Menu*/

#grouptext #img {
   position: relative;
   display: none;
}

/***BOMBAS***/
#nova {
   position: relative;
   float: right;
   margin-left: 15em;
}

form div{ position: absolute;} 

input[type="checkbox"] {
   position: absolute;
   z-index: 1;
   top: 0; 
   left: 0;
   width: 100%;
   height: 100%;
   min-height: 2em; 
   opacity:0;
   cursor: pointer;
}

.pump-section {
   margin-top: -2px;
   height: 0;
   overflow: hidden;
   max-height: 0;  
}

input[type="checkbox"]:checked ~ .pump-section {
   height: auto;
   max-height: 21em;
}

.selection {
   position: relative;
   padding: 0;
   margin: 0;
   width: 100%
}

input[type="checkbox"]:checked + label {
   background: #1D1D1D;
   color: #DBE9F2;
}

input[type="checkbox"]:checked + label:after {
   position: absolute;
   right: .4em;
   top: .25em;
   content: '✓';
}

/***STYLES THE PUMPS STATIONS***/
form#check-box {
   font-weight: 300;
   font-size: 18px;
}

/***WRAPES ALL PUMP STATION AND PUMPS***/
form#check-box {
   position: relative;
   top: 4em;
   height: 35px;
   z-index: 1;
}

#check-box {
   position: relative;
   top: -70px;
}

label {
   display: block;
   background: #1A2424; 
   color: #191D20;
   text-align: left;
   font-size: 1.2em;
   line-height: 1.1em;
   padding: 0 .2em;
   border-radius: 5px;
   border: 1px solid #3A434A;
   border-radius: 8px;
   width: 8.5em;
   height: 1.2em;
}

label.principal {
   color: grey;
}

label:after { 
   font-size: 1.25em
}

.selection label {
   display: block;
   font-size: .875em;
   line-height: 1em;
   padding: .25em 1.4em;
   margin: 0;
   text-align: left;
   background: #ccc;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -o-border-radius: 0;
   -ms-border-radius: 0;
   border-radius: 0;
   border: 1px solid #D1D1E0;
}

.selection:last-child label {
   border-radius: 0 0 5px 5px;
}

label:hover, 
label:active, 
input:hover+label, 
input:active+label {
    background: #151C1C;
    color: #9099A3;
}
/**/
/***BUTTONS***/
div#buttons-group-2 {
   position: relative;
   float: right;
   display: none;
}

div#buttons-group {
   position: relative;
   padding: 0px;
   position: relative;
   height: 40px;
   top: -1.3em;
}

button {
   display: inline-block;
   outline: none;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   font: 18px/100% Arial, Helvetica, sans-serif;
   color: grey;
   background-color: #191D20 /*#A0A1A1*/;
   -webkit-text-shadow: 0 1px 1px rgba(0,0,0,.3);
   -moz-text-shadow: 0 1px 1px rgba(0,0,0,.3);
   -o-text-shadow: 0 1px 1px rgba(0,0,0,.3);
   -ms-text-shadow: 0 1px 1px rgba(0,0,0,.3);
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   -webkit-border-radius: .5em; 
   -moz-border-radius: .5em;
   -o-border-radius: .5em;
   -ms-border-radius: .5em;
   border-radius: .5em;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -o-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -ms-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

button {
   height: 2em;
   width: 90px;
   position: relative;
}

#button1 {
   position: relative;
   right: 27%;
}

#resetbutton {
   position: relative;
   left: 27%;
}

button:hover {
   background: #202A2A;
   color: #AEA8A5;
}

button:hover {
   text-decoration: none;
}

.button:active {
   position: relative;
   top: 1px;
}

.button-reset {
    background-color: #4e1702; 
}

.button-reset:hover {
    background-color: #5e301e; 
}

.wireframe #page {
   position: relative;
   background-color: #121417;
   width: 100%;
   height: 100%;
}

section#simulator,
section#out-text  {
   position: relative;
   width: 92%;
   background-color: #202A2A;
   margin-left: auto;
   margin-right: auto;
}

section#simulator {
   height: 26em; 
   top: 3em;
   border-radius: 25px;
}

section#simulator {
   margin-top: 3em;
}

section#out-text {
   height: 100vh;
   top: 4em;
   -webkit-border-top-left-radius: 25px;
   -moz-border-top-left-radius: 25px;
   -o-border-top-left-radius: 25px;
   -ms-border-top-left-radius: 25px;
   border-top-left-radius: 25px;
   -webkit-border-top-right-radius: 25px;
   -moz-border-top-right-radius: 25px;
   -o-border-top-right-radius: 25px;
   -ms-border-top-right-radius: 25px;
   border-top-right-radius: 25px;
}

.general #displayText {
   font-family: sans-serif, Verdana;
   background: #171715;
   color: #999999;
   -webkit-border-top-left-radius: 0.6em;
   -moz-border-top-left-radius: 0.6em;
   -o-border-top-left-radius: 0.6em;
   -ms-border-top-left-radius: 0.6em;
   border-top-left-radius: 0.6em;
   -webkit-border-top-right-radius: 0.6em;
   -moz-border-top-right-radius: 0.6em;
   -o-border-top-right-radius: 0.6em;
   -ms-border-top-right-radius: 0.6em;
   border-top-right-radius: 0.6em;
   font-size: 1em;
   font-weight: 300;
}

.general #displayText5 {
   font-family: sans-serif, Verdana;
   background: #171715;
   color: #999999;
  -webkit-border-bottom-left-radius: 0.6em;
   -moz-border-bottom-left-radius: 0.6em;
   -o-border-bottom-left-radius: 0.6em;
   -ms-border-bottom-left-radius: 0.6em;
   border-bottom-left-radius: 0.6em;
   -webkit-border-bottom-right-radius: 0.6em;
   -moz-border-bottom-right-radius: 0.6em;
   -o-border-bottom-right-radius: 0.6em;
   -ms-border-bottom-right-radius: 0.6em;
   border-bottom-right-radius: 0.6em;
   font-size: 1em;
   font-weight: 300;
}

#grouptext #novo,
#grouptext #novo2,
#grouptext #novo3{
   position: relative;
   font-family: sans-serif, Verdana;
   font-weight: 300;
   padding-left: 0.3em;
   line-height: 125%;
}

#displayText5 {
   position: relative;
}

#displayText {
   position: relative;
}

#displayText2 {
   position: relative;
   font-weight: 300;
}

div#grouptext {
   font-family: 'Open Sans', sans-serif !important;
   font-size: 1.3em;
   text-align: left;
   position: relative;
   width: 90%;
   height: auto;
   background-color: #16191C;
   -webkit-border-radius: 15px; 
   -moz-border-radius: 15px;
   -o-border-radius: 15px;
   -ms-border-radius: 15px;
   border-radius: 15px;
   border: 1px solid #3A434A;
   top: 1em; 
   margin-left: auto;
   margin-right: auto;
   padding: .5em;
   line-height: 80%;
}

#grouptext #imge {
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

#imge img {
   width: 100%;
}

::-webkit-input-placeholder {
   color: #A1A1A1;
}

:-moz-placeholder { 
   color: #8A8A8A;  
}

::-moz-placeholder { 
   color: #8A8A8A;  
}

:-ms-input-placeholder {  
   color: #A1A1A1;  
}
/**/

/***THIS WRAPPES ALL INPUTS AND CHECK BOXES***/
div#simulator-wrapper {
   position: relative;
   width: 95%;
   margin-left: auto;
   margin-right: auto;
   top: 80px;
}
/**/

#footer p {
   color: #434957;
}

#footer {
   position: relative;
   margin-top: 20px;
   bottom:-2em;
   width: 100%;
   height: 35px;
   border-top: 1px solid #000000;
}


@media only screen and (min-width: 600px) and (max-width: 650px) and (orientation: portrait) {
    
   section#simulator {
      margin-top: 3em;
   }
   
   input[type="tel"]#getlevel {
        width: 75%;
      }
   
   select.level-options {
      width: 20%;
   }
    
   form#check-box {   
      top: 4.3em;   
   }
   
   #button1 {
   right: 28.5%;
   }

   #resetbutton {
   left: 28.5%;
   }
}

@media only screen and (min-width: 600px) and (max-width: 750px) and (orientation: landscape) {
 
   section#simulator {
      margin-top: 3em;
   }
   
    section#out-text {
      height: 100%;
      padding-bottom: 5%;
   } 
   
    div#grouptext { 
      width: 91%;
      height: 80%;
    }
   
   input[type="tel"]#getlevel {
        width: 75%;
      }
   
   select.level-options {
      width: 20%;
   }
      
   #button1 {
   right: 28.5%;
   }

   #resetbutton {
   left: 28.5%;
   }
   
   #footer {
      margin-top: 15%
   }   
}

@media only screen and (min-width: 751px) and (max-width: 850px) and (orientation: landscape) {
   
   section#simulator {
      margin-top: 3em;
   }
   
    section#out-text {
      height: 100%;
      padding-bottom: 5%;
   } 
   
    div#grouptext { 
      width: 91%;
      height: 80%;
    }
   
   input[type="tel"]#getlevel {
        width: 75%;
      }
   
   select.level-options {
      width: 20%;
   }
      
   #button1 {
   right: 31.5%;
   }

   #resetbutton {
   left: 31.5%;
   }
   
   #footer {
      margin-top: 15%
   }   
}

@media only screen and (min-width: 851px) and (max-width: 949px) and (orientation: landscape) {
   
   section#simulator {
      margin-top: 3em;
   }
   
    section#out-text {
      height: 100%;
      padding-bottom: 5%;
   } 
   
    div#grouptext { 
      width: 91%;
      height: 80%;
    }
   
   input[type="tel"]#getlevel {
        width: 75%;
      }
   
   select.level-options {
      width: 20%;
   }
      
   #button1 {
   right: 32%;
   }

   #resetbutton {
   left: 32%;
   }
   
   #footer {
      margin-top: 15%
   }   
}


@media only screen and (min-width: 950px) and (max-width: 1023px) and (orientation: landscape) {
   
   section#simulator {
      margin-top: 2em;
  
   }
   
   select.level-options {
      width: 27%;
   }
   
   select#min {
      position: relative;
      right: 18%;
   }

   select#max {
      position: relative;
      left: 18%;
   }
   
   [title="unidades"] {
     position: relative;
     top: -1.5em;
   }

   input[type="tel"].boxesproduction {
      top: -1.5em;
   }
   
   input[type="tel"]#getlevel {
      width: 100%;
   }
   
   input[type="tel"].boxesproduction {
      width: 13%;
      margin-left: .7%;
      margin-right: .7%;
   }
   
    section#out-text {
      margin-top: 1em;
   } 
       
   section#simulator,
   section#out-text {
      margin-bottom: 1em;      
   }
   
	.wireframe #simulator {
     width: 44%;
     height: 42.5em;
     float: left;
     left: 1em;  
  }
  
   div#simulator-wrapper {
      position: relative;
      margin-top: -30px;
   }
   
   div#buttons-group {
      top: -3.5em;
   }

   form#check-box {   
      top: 2.5em;   
   }
   
  section#out-text {
     width: 52%;
     height: 42.5em;
     float: right; 
     right: 1em;
  }
    
  #footer {
     height: 4em;
     clear: both;
     top: 4.1em; 
  }

}


@media only screen and (min-width: 651px) and (max-width: 700px) and (orientation: portrait) {
   
   #button1 {
      right: 27%;
      }

   #resetbutton {
      left: 27%;
   }

   select#min {
      position: relative;
      right: 14.5%;
   }

   select#max {
      position: relative;
      left: 14.5%;
   }

   input[type="tel"]#getlevel {
      width: 77%;
   }

   input[type="tel"] {
      width: 11%;
   }

   label {  width: 8em;}

   div#grouptext {  width: 91%;}
}


@media only screen and (min-width: 701px) and (max-width: 750px) and (orientation: portrait) { 
   
   #button1 {
      right: 28%;
      }

   #resetbutton {
      left: 28%;
      }

    select#min {
   position: relative;
   right: 13%;
   }

   select#max {
   position: relative;
   left: 13%;
   }
   
   input[type="tel"]#getlevel {
        width: 72%;
      }

   input[type="tel"] {
      width: 10%;
      }

   label {  width: 8em}
   
   div#grouptext {  width: 92%;}
}


@media only screen and (min-width: 751px) and (max-width: 800px) and (orientation: portrait) {
   
   section#simulator, section#out-text {
      width: 95%
   }
   
   section#simulator {
      margin-top: 35px;
   }
   
   #button1 {
      right: 28%;
      }

   #resetbutton {
      left: 28%;
      }
   
  select.level-options {
      width: 15%;
   }
   
   select#min {
   position: relative;
   right: 13%;
   }

   select#max {
   position: relative;
   left: 13%;
   }
   
    input[type="tel"]#getlevel {
        width: 67%;
      }

   input[type="tel"] {
      width: 10%;
      }
   
   label {  width: 8em}
   
   div#grouptext {  width: 92%;}
}

@media only screen and (min-width: 801px) and (max-width: 850px) and (orientation: portrait) {
   
   section#simulator, section#out-text {
      width: 95%
   }
   
   section#simulator {
      margin-top: 35px;
   }
   
   #button1 {
      right: 28%;
      }

   #resetbutton {
      left: 28%;
      }

   select#min {
   position: relative;
   right: 12.5%;
   }

   select#max {
      position: relative;
      left: 12.5%;
   }

   input[type="tel"]#getlevel {
      width: 67%;
   }

   input[type="tel"] {
      width: 10%;
   }

   label {  width: 8em}

   div#grouptext {  width: 93%;}
}


@media only screen and (min-width: 851px) and (max-width: 901px) and (orientation: portrait) {
   
   section#simulator, 
   section#out-text {
      width: 95%
   }
   
   section#simulator {
      margin-top: 35px;
   }
   
   #button1 {
      right: 28%;
      }

   #resetbutton {
      left: 28%;
      }
   
   select.level-options {
      width: 14%
   }
   
   select#min {
   position: relative;
   right: 13%;
   }

   select#max {
      position: relative;
      left: 13%;
   }

   input[type="tel"]#getlevel {
      width: 65%;
   }

   input[type="tel"] {
      width: 10%;
   }

   label {  width: 8em}

   div#grouptext {  width: 93%;}
}


@media only screen and (min-width: 902px) and (max-width: 950px) and (orientation: portrait) {
   #page nav#menu2 {
     width: 100%;
   }
   
   section#simulator, 
   section#out-text {
      width: 95%
   }
   
   section#simulator {
      margin-top: 35px;
   }
   
   #button1 {
      right: 28%;
      }

   #resetbutton {
      left: 28%;
      }
   
   select.level-options {
      width: 13%;
   }

   form#min-max {
      top: -1.2em;
   }
   
   select#min {
      position: relative;
      right: 11%;
   }

   select#max {
      position: relative;
      left: 11%;
   }
   
   input[type="tel"]#getlevel {
      width: 61%;
   }

   input[type="tel"] {
      width: 10%;
      }
   
   label {  width: 8em}
   
   div#grouptext {  width: 93%;}
}


@media only screen and (min-width: 951px) and (max-width: 1023px) and (orientation: portrait) {
   #page nav#menu2 {
     width: 100%;      
   }
  
   section#simulator, 
   section#out-text {
      width: 95%
   }
   
   section#simulator {
      margin-top: 35px;
   }
   
   #button1 {
      right: 28%;
      }

   #resetbutton {
      left: 28%;
      }
   
   select.level-options {
      width: 13%;
   }

   form#min-max {
      top: -1.2em;
   }
   
   select#min {
      position: relative;
      right: 11%;
   }

   select#max {
      position: relative;
      left: 11%;
   }
   
   input[type="tel"]#getlevel {
      width: 58%;
   }

   input[type="tel"] {
      width: 10%;
   }

   label {  width: 8em}

   div#grouptext {  width: 93%;}
}

@media only screen and (min-width: 1024px) and (max-width:1365px) {	
   
   section#simulator {
      margin-top: 3em;
  
   }
  
   select.level-options {
      width: 5.5em;
   }
   
    section#out-text {
      margin-top: 2em;
   } 
       
   section#simulator,
   section#out-text {
      margin-bottom: 1em;      
   }
   
	.wireframe #simulator {
     width: 43%;
     height: 46em;
     float: left;
     left: 1em;  
  }
      
  section#out-text {
     width: 53.5%;
     height: 46em;
     float: right; 
     right: 1em;
  }
   
  #footer {
     height: 4em;
     clear: both;
     top: 4.1em; 
  }

}

@media only screen and (min-width:1366px) and (max-width: 1368px){
   .wireframe  #page {
      width: 80%;
      height: 678px;
      margin-left: auto;
      margin-right: auto;
      border-top-left-radius: 1em;
      border-top-right-radius: 1em;
      box-shadow: 5px 0px 15px #000010, -5px 0px 15px #000010;
   }

   section#simulator {
      margin-top: 3em;
   }

   #button1 {
      right: 31%;
   }

   #resetbutton {
      left: 31%;
   }

   section#out-text {
      margin-top: 2em;
   } 

   section#simulator,
   section#out-text {
      margin-bottom: 3em;      
   }

   section#simulator,
   section#out-text {
      height: 40em;      
   }

   .wireframe #simulator {
      width: 52%;
      float: left;
      left: 1em;
   }

   section#out-text {
      width: 45%;
      float: right;
      right: 1em;
   }

   div#grouptext {
      width: 87%;;
   }

   #footer {
      height: 4em;
      clear: both;
      top: 2em;     
   }
}

@media only screen and (min-width:1369px) and (max-width: 1482px){
       
   .wireframe  #page {
      width: 80%;
      height: 770px;
      margin-left: auto;
      margin-right: auto;
      border-top-left-radius: 1em;
      border-top-right-radius: 1em;
      box-shadow: 5px 0px 15px #000010, -5px 0px 15px #000010;
   }

   section#simulator {
      margin-top: 5em;
   }

   #button1 {
      right: 31%;
   }

   #resetbutton {
      left: 31%;
   }

   section#out-text {
      margin-top: 4em;
   } 

   section#simulator,
   section#out-text {
      margin-bottom: 3em;      
   }

   section#simulator,
   section#out-text {
      height: 45em;      
   }

   .wireframe #simulator {
      width: 52%;
      float: left;
      left: 1em;
   }

   section#out-text {
      width: 45%;
      float: right;
      right: 1em;
   }

   div#grouptext {
      width: 87%;
   }

   #footer {
      height: 4em;
      clear: both;
      top: 2em;     
   }
}


@media only screen and (min-width:1483px) and (max-width: 1599px){       
   .wireframe  #page {
      width: 80%;
      height: 680px;
      margin-left: auto;
      margin-right: auto;
      border-top-left-radius: 1em;
      border-top-right-radius: 1em;
      box-shadow: 5px 0px 15px #000010, -5px 0px 15px #000010;
   }
    
  section#simulator {
      margin-top: 5em;
  
   }
  
   #button1 {
      right: 30%;
      }

   #resetbutton {
      left: 30%;
   }

   section#out-text {
      margin-top: 4em;
   } 
       
   section#simulator,
   section#out-text {
      margin-bottom: 3em;      
   }
     
	.wireframe #simulator {
     width: 52%;
     height: 37em;
     float: left;
     left: 1em;
  }
   
   section#out-text {
      width: 45%;
      height: 37em;
      float: right;
      right: 1em;
   }
     
   div#grouptext {
      width: 87%;
   }
   
   #footer {
      height: 4em;
      clear: both;
      top: 3em;     
   }
}


 @media only screen and (min-width:1600px) and (max-width: 1919px){   
   .wireframe #page {          
      width: 80%;         
      height: 820px;
      margin-left: auto;
      margin-right: auto;
      top: 0;
      border-top-left-radius: 1em;
      border-top-right-radius: 1em;
      box-shadow: 5px 0px 15px #000010, -5px 0px 15px #000010;
   }
   
    section#simulator,
    section#out-text   {
       height: 50em;
    }

    section#simulator {
       width: 54%;    
       float: left;
       left: 2em;     
    }

    section#out-text {
      width: 41%;     
      float: right;
      right: 2em;          
   }
   
   div#grouptext {     
      width: 89%;               
   }
    
   section#simulator {
      margin-top: 4em;  
   }
  
   section#out-text {
      margin-top: 3em;
   } 
       
   section#simulator,
   section#out-text {
      margin-bottom: 3em;      
   }
    
   #button1 {
      right: 32%;
      }

   #resetbutton {
      left: 32%;
      }

   #footer {      
      height: 4em;
      clear: both;
      top: 2em;     
   }  
}



@media only screen and (min-width: 1920px) {
   .wireframe #page {
      width: 80%;         
      height: 820px;
      margin-left: auto;
      margin-right: auto;
      top: 0;
      border-top-left-radius: 1em;
      border-top-right-radius: 1em;
      box-shadow: 5px 0px 15px #000010, -5px 0px 15px #000010;
   }

	.wireframe #simulator {
     width: 54%;
     height: 50em;     
     float: left;
     left: 2em;            
  }
 
   section#out-text {
      width: 41%;
      height: 50em;     
      float: right;     
      right: 2em;
  }
   
   div#grouptext {     
      width: 91%;                  
   }
   
    section#simulator {
      margin-top: 4em;  
   }
  
   section#out-text {
      margin-top: 3em;
   } 
       
   section#simulator,
   section#out-text {
      margin-bottom: 3em;      
   }
    
   #button1 {
      right: 32%;
      }

   #resetbutton {
      left: 32%;
      }
   
   #footer {     
      height: 4em;
      clear: both;
      top: 2em;
   }
}