body{
    font-family:"Open Sans", Arial, Helvetica, sans-serif;  
    padding: 0 0 5px 5px;
    min-height: 100%;
    height: 100%;
    max-width: 100%;
    font-size: 20px;
    line-height: 1.5;
    margin: auto;
    background-color: #edeff2;
    font-weight:300;
	font-size: 12px;
	line-height:30px;
    color:#777;
        

    
}

@font-face{
    font-family: "Questrial";
    src: url("fonts/Questrial-Regular.eot"),
        url("fonts/Questrial-Regular.svg"),
        url("fonts/Questrial-Regular.ttf"),
        url("fonts/Questrial-Regular.woff"),
        url("fonts/Questrial-Regular.woff2");
    }
/* This css code is for the landing page */
.Statement{
    font-family: serif;
    font-style: italic;
    text-align: center;
    display: block;
    margin: auto;
    height: 50px;
    padding-top: 12.5px;
    width: 100%;
    overflow: hidden;
    font-size: 20px;
    color: #ededed;
    background-color: #214a87;
    box-shadow: 2px 20px 2px;
    
}

.fold{
    width:85%;
    margin: auto;
}
.fold_high img{
    display: block;
    
    
}
#light{ 
    position: absolute;
    height: 320px;
    display: inline-block;
    float: left;
    margin: 202px 0 0 0;
    width: 0%;
    z-index: -1;
    background-color: linear-gradient(to right,#87c5ff, #edeff2);
    box-shadow: 0px 0px 50px #87c5ff;
    opacity: 1;
    
    
}

#light.flash{
    position: absolute;
    height: 320px;
    display: inline-block;
    float: left;
    margin: 202px 0 0 0;
    width: 90%;
    z-index: -1;
    background: linear-gradient(to right,#87c5ff, #edeff2);
    opacity: 0;
    box-shadow: 0px 0px 50px #87c5ff;
    
    -webkit-transition: width 1.0s, opacity 2.0s;
    -moz-transition: width 1.0s,opacity 2.0s;
    transition: width 1.0s, opacity 2.0s;
    
    
}
#Logo{
    display: inline-block;
    position: relative;
    margin: auto;
    padding-top: 10%;
    width:45%;
    padding-left:50px;
    z-index: 1;
}
.fold_pics{
    position: static;
    margin: 0 0 0 180px;
    display: inline-block;
    width:40%;
}

.fold_pics img{
    display: inline-block;
    
    
    
}
#pic1{
    top: -20px;
    position: relative;
    right: 100%;
    width: 33%;
    float: left;
    opacity: .3;
    z-index: 1;
    
  
}
#pic1.trans1{
    top: -20px;
    position: relative;
    right: 50%;
    width: 33%;
    float: left;
    opacity: 1.0;
    z-index: 1;
    
    -webkit-transition: right 2.0s, opacity 2.0s;
    -moz-transition: right 2.0s,opacity 2.0s;
    transition: right 2.0s, opacity 2.0s;
        
    
}
#pic2{
    top: -20px;
    position: relative;
    right: 114%;
    width: 33%;
    opacity: .2;
    z-index: 1;
}

#pic2.trans2{
    top: -20px;
    position: relative;
    right: 64%;
    width: 33%;
    opacity: .89;
    z-index: 1;
    
     -webkit-transition: right 1.0s, opacity 3.0s;
    -moz-transition: right 1.0s,opacity 3.0s;
    transition: right 1.0s, opacity 3.0s;
    
}
#pic3{
    top: -20px;
    position: relative;
    left:-86%;
    width: 33%;
    float: left;
    opacity: .1;
    z-index: 1;
}

#pic3.trans3{
    top: -20px;
    position: relative;
    left:20%;
    width: 33%;
    float: left;
    opacity: .90;
    z-index: 1;
    
     -webkit-transition: left 2.5s, opacity 2.5s;
    -moz-transition: left 2.5s,opacity 2.5s;
    transition: left 2.5s, opacity 2.5s;
    -o-transition: left 2.5s, opacity 2.5s;
}

.fold h4{
    color: #ededed;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin: 100px auto;
    text-shadow: 5px 5px 6px #214a87;
}
.fold h3{
    font-size: 20px;
    font-weight: 700;
    color: #ededed;
    text-align: center;
    margin: 185px auto;
    background-color: #214a87;
    width: 20%;
    text-shadow: 1px 0.2px 1px
}
ul{
    padding: 20px 0;
    list-style: none;
    text-align: center;
    margin:-40px auto;
    font-size: 30px;
    font-weight: 400;
    width: 75%;
    
}
#arrow{
    position: relative;
    left: -46%;
    height: 240px;
    display: inline-block;
    margin: auto;
    overflow: hidden;
     z-index: 1;
    
    
    
    
}

#hide_Arrow{
    height: 0;
    padding-left: 50px;
    left: 47%;
    position: absolute;
    margin: -220px 0 0 0; 
    overflow: hidden;
    z-index: 1;

    -moz-transition: height 2.5s;
    -webkit-transition: height 2.5s ;
    -o-transition:height 2.5s;
    transition: 2.5s;
    
    
}
#hide_Arrow.show{ 
    height: 250px;


    
}


.Under_fold{
    width: 85%;
    display: block;
    margin: 0px auto;
    z-index: 0;
}




/* This csss is for the landing page */

#wrapper{ 
    
    min-height: 100%;
    height: auto;
    margin-bottom: -25px;
    

    
}
#wrapper:after{
    content: "Fiber Optic Engineering Solutions LLC  ©2017" ;
    display: inline-block;
    float:left;
    width: 100%;
    height: 30px;
    margin: auto;
    font-size: 14px;
    
    
    
}

#content{
    height:100%;
    
}





@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* This css is for the contact form */
.error{
    color: red;
    
}

.success {
    color:green;
    font-size: 14px;
    
}



}

.emailcontainer {
    position: sticky;
	max-width:400px;
	width:100%;
	margin:0 auto;
	position:relative;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] {    
    font:400 14px/16px "Open Sans", Helvetica, Arial, sans-serif; 
}


#contact {
    position: sticky;
	background:#edeff2;
	padding:25px;
	margin:10px auto;
}

#contact h3 {
	color: #F96;
	display: block;
	font-size: 30px;
	font-weight: 400;
}

#contact h4 {
    color:#777;
    text-shadow: none;
    text-align: center;
	margin:20px 0 20px;
	display:block;
	font-size:25px;
}

fieldset {
	border: medium none !important;
	margin: 0 0 10px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:80%;
	border:1px solid #CCC;
	background:#f7f7f7;
	margin:auto 90px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:85%;
	border:none;
	background: #214a87;
	color:#FFF;
	margin:0 70px 5px;
	padding:10px;
	font-size:25px;
    font-family: serif;
}

#contact button[type="submit"]:hover {
	background:#09C;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}

/*landing page stuff */
@media screen and (max-width:1460px){
    #light{
        height: 200px ;
        margin: 115px 0 0 0; ;
        
    }
    
    #light.flash{
        height:200px;
        margin: 115px 0 0 0;
        
    }
    
    
    .fold_pics{
    width:35%;
}
    
}
    @media screen and (max-width:1100px){

        #Logo{
            top: 80px;
            left: 80px;
            width:40%
        }
        
        .fold_pics{
            position:relative;
            top: 80px;
            
        }

    }
    
    /*landing page stuff */


@media screen and (min-width: 956px){
    
    
    
    /*css for home page */
    #branding2{
        display:none;
    }
        #showcase_small{
        display:none;
    }
    .iconsmall_one{
        display:none;
    }
    .iconsmall_two{
        display:none;
    }
    .iconsmall_three{
        display:none;
    }
    .iconsmall_four{
        display:none;
    }
    .iconsmall1_p{
        display:none;
    }
    .iconsmall2_p{
        display:none;
    }
    .iconsmall3_p{
        display:none
    }
    .iconsmall4_p{
        display:none
    }
    .container{ 
    width: 800px;
    margin:auto;
    overflow: hidden;   
}

header{ 
    background-image: url(../media/banner.svg);
    background-size: 2500px ;
    background-repeat: no-repeat;
    background-position: center;
    max-height:255px;
    border-bottom: #ffffff 15px solid;
    margin: auto;
    width: 95%;
    
}
header nav{
    position: absolute;
    margin: 70px 60%;
    background: #ffffff;
    display: inline-block;
    min-width: 700px;
    max-height: 50px;
    border-radius: 6px;
    box-shadow: 10px 10px 10px  #2b2b2b ;
}
header a{
    font-family: Questrial;
    display: inline-block;
    color: #0c0c0c;
    margin: 10px auto 10px auto;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #50a9e5;
}
    
    header a:hover{
    color: #50a9e5;
}
header ul{
    margin: auto;;
    padding: 0;
}

header li{
    float: left;
    margin: 0 20px;
    display: inline-block;
    padding: 1px;
    border-radius: 15px;
    
}

    

 header .current a{
    color: #50a9e5;
    font-weight: bold;
}

header #branding{
    left: 600px;
    width: 500px;
    height: 190px;
    overflow: hidden;
    display: block; 
    
}
#showcase{
    position: relative;
    background-color: black;
    margin: auto;
    margin-left: 300px;
    display:block;
    height: 780px;
    min-width: 1160px;
    width: 45%;
    z-index: 2;
    
}
    .cap{
        position: absolute;
        display: block;
        padding-left: 61%;
        z-index: 1;
        
    }
    #showcase img{
        margin: 65px auto;
        display: block;
        height: 650px;
        z-index: 10;
        
        
    }
   
article{
    margin-top: 20px;
    max-width:95%;
    margin-bottom: 20px;
}

article h1{
    text-align: center;
    color:#ffffff;
    display: inline-block;
    font-size: 300%;
    margin: auto;
    width: 100%;
    text-shadow: 2px 2px 2px #214a87;
}
    
article p{
    text-align: center;
    margin: auto;
    width: 100%;
    font-size: 25px;
    text-align-last: auto;
    font-weight: 400;
    display: inline;
    float: left;
        
}



    .main_icons{
        margin:230px auto;
        height: 750px;
        background: #214a87;
        max-width: 100%;
    
        
    }
    .icon_one{
        padding: 10px;
        display:block;
        float:center;
        min-width:60%;
        margin:auto;

        
        
    }
.icon_one img{
    float:none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    opacity: .85;

}
    
    .icon_two{
        padding: 10px;
        display:block;
        margin-top:10px;
         max-width: 60%;
        margin:auto;
        
    
    }
.icon_two img{
    float:none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    opacity: .85;
}
    .icon_three{
        padding: 10px;
        display:block;
         min-width: 100%;
        margin:auto;
        
        
    }
.icon_three img{
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    opacity: .85;
}
    .icon_four{
        padding: 10px;
        min-width:100%;;
        margin:auto;
        
    }
.icon_four img{
    display: block;
    float:none;
    margin-left: auto;
    margin-right: auto;
    opacity: .85;
}
    
    .icon_one h4{
         width:200px;
        height:50px;
        text-align: center;
        font-weight: 800;
        font-size: 20px;
        margin: auto;
        line-height: 100%;
        color:#ffffff;
    
}    
    .icon_two h4{
        width:200px;
        height:50px;
        text-align: center;
        font-weight: 800;
        font-size: 20px;
        margin: auto;
        line-height: 100%;
        color:#ffffff;
    
}   
    .icon_three h4{
         width:200px;
        height:50px;
        text-align: center;
        font-weight: 800;
        font-size: 25px;
        margin: auto;
        line-height: 100%;
        color:#ffffff;
    
}   
    .icon_four h4{
         width:200px;
        height:50px;
        text-align: center;
        font-weight: 800;
        font-size: 25px;
        margin:auto;
        line-height: 100%;
        color:#ffffff;
    
}

.icon1_p{
    font-size: 16px;
    position: absolute;
    padding-top:  250px;
    margin: 0 0 40px 0; 
    text-align: center;
    display: inline-block;
    max-width:375px;
    height: 625px;
    min-width:250px;
    color: #ffffff;
    left: 2%;
}

    .icon2_p{ 
    margin: 70px 0 0 0;
    text-align: center;
    display:block;
    float: left;
        
}
    .icon3_p{
    margin: 50px 0 0 0;
    text-align: center;
    display:block;
    float: right;
          
    
}
.icon4_p{
    margin: 40px 0 0 0;
    text-align: center;
    display:inline-block;
      
}
    
    
.icon1_p2{
    font-size: 16px;
    position: absolute;
    padding-top: 240px;
    margin: auto; 
    text-align: center;
    display:block;
    float:right;
    width: 30%;
    max-width:375px;
    height: 625px;
    min-width:350px;
    color: #ffffff;
    right: 2%;
}

    .icon2_p2{ 
    margin: 80px 0 0 0;
    text-align: center;
    display:block;
    float: left;
      
}
    .icon3_p2{
    margin: 50px 0 0 0;
    text-align: center;
    display:block;
    float: right;
            
    
}
.icon4_p2{
    margin: 50px 0 0 0;
    text-align: center;
    display:inline-block;
      
    
}
/* end of css for home page */
    
/*css for Engineering page */
  
#Title{
    text-align: center;
    color:#ffffff;
    display: inline-block;
    font-size: 300%;
    margin: 20px auto;
    width: 100%;
    text-shadow: 2px 2px 2px #214a87;
    padding: 25px;
        
    }    

    
#buildingGif{
    background: url("../media/Engineering_pic_cover.png");
    background-size: 100% 100%;
    width: 400px;
    position: absolute;
    height: 400px;
    right: 41.4%;
    top: 0px;
    opacity: 0;
    box-shadow: 20px 20px 5px black; 
    z-index: 1;
        
        -webkit-transition: opacity 2.0s 
        -o-transition: opacity 2.0s 
        -moz-transition: opacity 2.0s 
        transition: opacity 2.0s 
        
    }  
    
#buildingGif.incoming{
    opacity: .7;
        top: 570px;
        
    -webkit-transition: opacity 2.0s, top 1.0s;
        -o-transition: opacity 2.0s, top 1.0s;
        -moz-transition: opacity 2.0s, top 1.0s;
        transition: opacity 2.0s top, 1.0s;
        
        
    }
    
    #buildingGif.picswitch{
        background: url("../media/Building.gif");
        opacity: .7;
        top: 570px;
         background-size: 100% 100%;
    width: 400px;
    }
.landscape_pic{
    margin: auto;
    display:block;
    max-width:60%;
    height: 750px;
    background-color: #d8d8d8;
    
    }
    
    .landscape_pic img{
        position: absolute;
        left: 0%;
        right: 0%;
        display: block;
        margin: auto;
        height: 750px;
        z-index: 0;
        
    }
    
    #sliderOne{
        position: absolute;
        font-size: 24px;
        display: block;
        width: 300px;
        background-color:#ffffff;
        text-align: center;
        padding: 0px;
        top: 370px;
        right: 25%;
        opacity: .85;
        color: black;
        border-radius: 2px;
        box-shadow: 5px 5px 2px #e0310e;
        height: 0px;
        overflow: hidden;
    }
    
    #sliderOne.show1{
        padding: 15px;
        height: 390px;
        transition: height 1s, padding 1s;
        -moz-transition: height 1s, padding 1s;
        -o-transition:height 1s, padding 1s;
        -webkit-transition: height 1s, padding 1s;
    }
    
    
    
    #sliderTwo{
       position: absolute;
        font-size: 24px;
        display: block;
        width: 300px;
        background-color:#ffffff;
        text-align: center;
        padding: 0px;
        top: 770px;
        right: 28%;
        opacity: .85;
        color: black;
        border-radius: 2px;
        box-shadow: 5px 5px 2px #0fbc20;
        height: 0px;
        overflow: hidden;
        
        
    }
    
    
    #sliderTwo.show2{
        padding: 15px;
        height: 180px;
        transition: height 1s, padding 1s;
        -moz-transition: height 1s, padding 1s;
        -o-transition:height 1s, padding 1s;
        -webkit-transition: height 1s, padding 1s; 
        
    }
    
#turnkey_header{
        padding-top: 30px;
        width: 100%;
        text-align: center;
        margin: 60px auto;
        display: inline-block;
        font-size: 30px;
        font-weight: 1000;
        color:#ffffff;
        text-shadow: 2px 2px 2px #214a87;
        
        
        
    }

    .paragraph{
        text-align: center;
        font-size: 38px;
        width:60%;
        margin: auto;
        line-height: 130%;
        font-weight: 600;
        padding-bottom: 80px
        
        
        
    }
    

/* Footer css */
.nav2{
    float:none;
    margin: auto;
    display:block;
    min-width: 690px;
    
    
}
.nav2 a{
    padding-top; 20px;
    margin: auto;
    text-align: center;
    text-decoration: none;
    display: block;
    color: black;
}

.nav2 ul{
    text-align: center;
    align-content: center;
    padding: 0 0 0 0;
    width: 45%;
    margin:auto;
    display: block;
    
    
}
.nav2 li{
    font-size: 12px;
    font-weight: 500;
    width: 75px;
    display: inline-block;
    margin: 0 0 0 0;
}
.left_gradient{
     background: linear-gradient(to left,#214a87, #ffffff);
    display:block;
    float:left;
   margin:auto;
    width: 19%;
    height:25px;
}
.right_gradient{
    background: linear-gradient(to right,#214a87, #ffffff);
    display:block;
    float:right;
    margin:auto;
    width: 19%;
    height:25px;

}
.underline{
    display:inline-block;
    width: 100%;
    height:2px;
    border-bottom: 2px solid;
}
}
@media screen and (min-width:1300px){
    .main_icons{
        width: 80%;
    }
    
    .icon1_p{
        left: 12%;
    
    }
    
    .icon1_p2{
        left: 50%;
    }
    
}

@media screen and (max-width: 956px){
    /*css for Engineering page */
  
#Title{
    text-align: center;
    color:#ffffff;
    display: inline-block;
    font-size: 170%;
    margin: 20px auto;
    width: 100%;
    text-shadow: 2px 2px 2px #214a87;
    padding: 25px;
        
    }    

    
#buildingGif{
    background: url("../media/Engineering_pic_cover.png");
    background-size: 100% 100%;
    width: 280px;
    position: absolute;
    height: 280px;
    right: 34%;
    top: 0px;
    opacity: 0;
    box-shadow: 20px 20px 5px black; 
    z-index: 1;
        
        -webkit-transition: opacity 2.0s 
        -o-transition: opacity 2.0s 
        -moz-transition: opacity 2.0s 
        transition: opacity 2.0s 
        
    }  
    
#buildingGif.incoming{
    opacity: .7;
        top: 480px;
        
    -webkit-transition: opacity 2.0s, top 1.0s;
        -o-transition: opacity 2.0s, top 1.0s;
        -moz-transition: opacity 2.0s, top 1.0s;
        transition: opacity 2.0s top, 1.0s;
        
        
    }
    
    #buildingGif.picswitch{
        background: url("../media/Building.gif");
        opacity: .7;
        top: 480px;
         background-size: 100% 100%;
    width: 280px;
    }
.landscape_pic{
    margin: auto;
    display:block;
    max-width:60%;
    height: 500px;
    background-color: #d8d8d8;
    
    }
    
    .landscape_pic img{
        position: absolute;
        left: 0%;
        right: 0%;
        display: block;
        margin: auto;
        height: 500px;
        z-index: 0;
        
    }
    
    #sliderOne{
        position: absolute;
        font-size: 18px;
        display: block;
        width: 270px;
        background-color:#ffffff;
        text-align: center;
        padding: 0px;
        top: 370px;
        right: 2%;
        opacity: .85;
        color: black;
        border-radius: 2px;
        box-shadow: 5px 5px 2px #e0310e;
        height: 0px;
        overflow: hidden;
        z-index: 2;
    }
    
    #sliderOne.show1{
        padding: 15px;
        height: 290px;
        transition: height 1s, padding 1s;
        -moz-transition: height 1s, padding 1s;
        -o-transition:height 1s, padding 1s;
        -webkit-transition: height 1s, padding 1s;
    }
    
    
    
    #sliderTwo{
       position: absolute;
        font-size: 18px;
        display: block;
        width: 270px;
        background-color:#ffffff;
        text-align: center;
        padding: 0px;
        top: 670px;
        right: 4%;
        opacity: .85;
        color: black;
        border-radius: 2px;
        box-shadow: 5px 5px 2px #0fbc20;
        height: 0px;
        overflow: hidden;
        z-index: 2;
        
        
    }
    
    
    #sliderTwo.show2{
        padding: 15px;
        height: 120px;
        transition: height 1s, padding 1s;
        -moz-transition: height 1s, padding 1s;
        -o-transition:height 1s, padding 1s;
        -webkit-transition: height 1s, padding 1s; 
        
    }
    
#turnkey_header{
        padding-top: 30px;
        width: 100%;
        text-align: center;
        margin: 60px auto;
        display: inline-block;
        font-size: 30px;
        font-weight: 1000;
        color:#ffffff;
        text-shadow: 2px 2px 2px #214a87;
        
        
        
    }

    .paragraph{
        text-align: center;
        font-size: 38px;
        width:60%;
        margin: auto;
        line-height: 130%;
        font-weight: 600;
        padding-bottom: 80px
        
        
        
    }
    
    
    
    .cap{
        display: none;
        
    }
    #light{
        height:120px;
        margin: 145px 0 0 0;
        
    }
    
    #light.flash{
        height:120px;
        margin: 145px 0 0 0;
        
    }
    
    
    #branding2{
        display:none;
    }
    #showcase_small{
        display:none;
    }
    .iconsmall_one{
        display:none;
    }
    .iconsmall_two{
        display:none;
    }
    .iconsmall_three{
        display:none;
    }
    .iconsmall_four{
        display:none;
    }
    body{
    font-family: Arial, Helvetica; 
    padding: 10px 0 0 0;
    min-height: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 650px;
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
    background-color: #edeff2
        
    }      
    

    
    
    header{ 
    background-image: url(../media/small_banner.svg);
    background-size: 956px 300px ;
    background-repeat: no-repeat;
    background-position: center;
    max-height:170px;
    border-bottom: #214a87 20px solid;
    
}

header a{
    font-family: Questrial;
    display: inline-block;
    color:#0c0c0c;
    margin-top: 5px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #50a9e5
    
    }
        header a:hover{
    color: #50a9e5;
}
    
header ul{
    margin: auto;
    padding: 0;
}

header li{
    font-feature-settings: Rokkett;
    float: left;
    margin-left: 30px;
    display: inline;
    padding: 0 5px 5px 0;
     }

 #branding{
    height: 160px;
     width:400px;
    overflow: hidden;
    display: block;
    
}
header nav{
    margin: -10px 0 0 0;
    box-shadow: 2px 2px  #2b2b2b;
    background-color: #ffffff;
    display: inline-block;
    min-width: 100%;
    border-radius: 7px

}
 header .current a{
    color: #50a9e5;
    font-weight: bold;
}
    #showcase{
    display:block;
    margin-top: 30px;
    height: 400px;
    min-width: 600px;
    width: 100%;
    background-color: #dddddd;
    position: center;
    overflow:auto;
}
    #showcase img{
        
    display: block;
    margin: auto;
    height: 400px;
        
        
    }
    

article h1{
    max-width: 100%;
    font-size: 100%;
    width:100%;
    text-align: center;
    display: block;
    margin: 0 0 0 0;
    color: #303030;
}
    
article p{
    font-size: 16px;
    width:100%;
    overflow: visible;
    text-align: center;
    text-align-last: auto;
    display: block;
    float: left;
    margin: 10px 0 40px 0;
    
        
}
    .main_icons{ 
        
        width: 100%;
       display:block;
        float: right;
        margin:auto;
        
    }
    
    .icon_one{
        display: block;
        float: left;
        width:25%;
        height: 150px;
        background: #214a87
    }
    .icon_two{
        display: block;
        float: left;
        width:25%;
        height: 150px;
        background: #214a87
    } 
    .icon_three{
        display: block;
        float: left;
        width:25%;
        height: 150px;
        background: #214a87
    } 
    .icon_four{
        display: block;
        float: left;
        width:25%;
        height: 150px;
        background: #214a87
    } 
    .icon_one img{
        display:block;
        margin:auto;
    }
    .icon_two img{
        display:block;
        margin:auto;
    }
    
    .icon_three img{
        display:block;
        margin:auto;
    }
     .icon_four img{
        display:block;
        margin:auto;
    }
    
    .icon1_p{
        display:none;
        
    }
    .main_icons h4{
        font-size:15px;
        text-align: center;
        margin: auto;
        display: block;
        color: white;
        
    }
     .icon2_p{
     display:none;
        
        
    }
    
    .icon1_p2{
        display: none;
    }
    .icon2_p2{
        
        text-align: center;
        float:right;
        display:block;
        width:400px;
        margin:auto;
        
    }
     .icon3_p2{
        
        text-align: center;
        float:right;
        display:block;
        width:400px;
        margin:auto;
        
    }
    .icon4_p2{
        
        text-align: center;
        float:right;
        display:block;
        width:400px;
        margin:auto;
        
    }
    .nav2{
    padding-top: 10px;
    text-align: center;
    margin: auto;
    display:inline-block;
    float:none;
    width: 100%;
    
    
    
}
.nav2 a{
    min-width: 30px;
    padding-top; 10px;
    margin: auto;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    color: black;
    font-weight: 600;
}

.nav2 ul{
    text-align: center;
    align-content: center;
    margin:auto;
    display: inline;
    
    
}
.nav2 li{
    font-size: 12px;
    font-weight: 500;
    width: 75px;
    display: inline-block;
    margin: auto;
}
    .iconsmall1_p{
        margin:auto 10px;
        text-align: center;
        font-size: 13px;
        width:23%;
        display:block;
        float: left;
    }
     .iconsmall2_p{
         margin:auto 10px;
         text-align: center;
         margin: auto;
         font-size: 13px;
        width:22%;
        display:block;
         float: left;
    }
    .iconsmall3_p{
        margin:auto 10px;
        text-align: center;
        font-size: 13px;
        width:22%;
        display:block;
        float: right;
    }
    .iconsmall4_p{
        margin:auto 10px;
        text-align: center;
        font-size: 13px;
        width:22%;
        display:block;
        float: right;
    }
.left_gradient{
     background: linear-gradient(to left,#214a87, #ffffff);
    display:block;
    float:left;
   margin: 0 0 0 0;
    width: 19%;
    height:25px;
}
.right_gradient{
    background: linear-gradient(to right,#214a87, #ffffff);
    display:block;
    float:right;
    width: 19%;
    height:25px;

}
.underline{
    display:inline-block;
    width: 100%;
    height:2px;
    border-bottom: 2px solid;
}
}

@media screen and (max-width:902px){
      #light{
    
        height:130px;
        margin: 155px 0 0 0;
        
    }
    
    #light.flash{
        height:130px;
        margin: 155px 0 0 0;
        
    }
    
    
    
    
    .fold{
        min-width: 900px;
        overflow: scroll;
    }
    #arrow{
        left: 0px;
        
    }
    #hide_Arrow{
        left: 275px;
    }
    
    #hide_Arrow.show{
        left: 275px;
        
        
    }
    
}

@media screen and (max-width: 600px) {

  #light{ 
    position: absolute;
    height: 150px;
    display: inline-block;
    margin: 150px 130px 0 0;
    width: 0%;
    z-index: -1;
    background-color: linear-gradient(to right,#87c5ff, #edeff2);
    box-shadow: 0px 0px 50px #87c5ff;
    opacity: 1;
    
    
}

#light.flash{
    position: absolute;
    height: 150px;
    display: inline-block;
    margin: 150px 130px 0;
    width: 170%;
    z-index: -1;
    background: linear-gradient(to right,#87c5ff, #edeff2);
    opacity: 0;
    box-shadow: 0px 0px 50px #87c5ff;
    
    -webkit-transition: width 1.0s, opacity 2.0s;
    -moz-transition: width 1.0s,opacity 2.0s;
    transition: width 1.0s, opacity 2.0s;
    
    
}
  
  .Statement{
    width: 100%;
    text-align: center;
    font-size: 18px;

  }

    #Title{
    text-align: center;
    color:#ffffff;
    display: inline-block;
    font-size: 100%;
    margin: 150px auto;
    width: 100%;
    text-shadow: 2px 2px 2px #214a87;
    padding: 5px;
        
    }    

    
#buildingGif{
    background: url("../media/Engineering_pic_cover.png");
    background-size: 100% 100%;
    width: 170px;
    position: absolute;
    height: 170px;
    right: 35.2%;
    top: 0px;
    opacity: 0;
    box-shadow: 20px 20px 5px black; 
    z-index: 1;
        
        -webkit-transition: opacity 2.0s 
        -o-transition: opacity 2.0s 
        -moz-transition: opacity 2.0s 
        transition: opacity 2.0s 
        
    }  
    
#buildingGif.incoming{
    opacity: .7;
        top: 310px;
        
    -webkit-transition: opacity 2.0s, top 1.0s;
        -o-transition: opacity 2.0s, top 1.0s;
        -moz-transition: opacity 2.0s, top 1.0s;
        transition: opacity 2.0s top, 1.0s;
        
        
    }
    
    #buildingGif.picswitch{
        background: url("../media/Building.gif");
        opacity: .7;
        top: 310px;
         background-size: 100% 100%;
        width: 170px;
    }
.landscape_pic{
    margin:-120px auto;
    display:block;
    max-width:60%;
    height: 300px;
    background-color: #d8d8d8;
    
    }
    
    .landscape_pic img{
        position: absolute;
        left: 0%;
        right: 0%;
        display: block;
        margin: auto;
        height: 300px;
        z-index: 0;
        
    }
    
    #sliderOne{
        position: absolute;
        font-size: 12px;
        display: block;
        width: 180px;
        background-color:#ffffff;
        text-align: center;
        padding: 0px;
        top: 220px;
        right: 2%;
        opacity: .85;
        color: black;
        border-radius: 2px;
        box-shadow: 5px 5px 2px #e0310e;
        height: 0px;
        overflow: hidden;
        z-index: 2;
    }
    
    #sliderOne.show1{
        padding: 15px;
        height: 220px;
        transition: height 1s, padding 1s;
        -moz-transition: height 1s, padding 1s;
        -o-transition:height 1s, padding 1s;
        -webkit-transition: height 1s, padding 1s;
    }
    
    
    
    #sliderTwo{
       position: absolute;
        font-size: 12px;
        display: block;
        width: 180px;
        background-color:#ffffff;
        text-align: center;
        padding: 0px;
        top: 480px;
        right: 4%;
        opacity: .85;
        color: black;
        border-radius: 2px;
        box-shadow: 5px 5px 2px #0fbc20;
        height: 0px;
        overflow: hidden;
        z-index: 2;
        
        
    }
    
    
    #sliderTwo.show2{
        
        padding: 15px;
        height: 90px;
        transition: height 1s, padding 1s;
        -moz-transition: height 1s, padding 1s;
        -o-transition:height 1s, padding 1s;
        -webkit-transition: height 1s, padding 1s; 
        
    }
    
#turnkey_header{
        padding-top: 120px;
        width: 100%;
        text-align: center;
        margin: 60px auto;
        display: inline-block;
        font-size: 20px;
        font-weight: 1000;
        color:#ffffff;
        text-shadow: 2px 2px 2px #214a87;
        
        
        
    }

    .paragraph{
        text-align: center;
        font-size: 20px;
        width:60%;
        margin: -40px auto;
        line-height: 130%;
        font-weight: 600;
        padding-bottom: 80px
        
        
        
    }
    
    body{
    font-family: Arial, Helvetica; 
    padding: 0 0 0 0;
    min-height: 100%;
    height: 100%;
    min-width: 900px;
    font-size: 20px;
    line-height: 1.5;
    margin: auto;
    background-color: #edeff2;
    overflow: scroll;
    }
    
      header{
    background-image: none;
    width: 100%;
    border-bottom: none;
    position: fixed;
    background: #ffffff;
    min-width: 475px;
    
    
}
    header nav{
    max-height: 50px;
    margin: auto 0 0 0;
    box-shadow: 0px 4px #214a87;
    background-color: white;
    width: 600px;
    }
    
    header a{
    margin: auto; 
    font-family: Questrial;
    display: block;
    color: #0c0c0c;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    }
    
header ul{
    margin: 10px auto;
    width: 
}

header li{
     }
    
    #branding{
        display: none;
    }
    #branding2 {
        min-width:550px; 
        width:100%;
        height: 100px;
        display:block;
        margin:auto;
    }
    #branding2 img{
        margin: auto;
        display: block;
        width:50%;
        height: 100px;
    }
    
    #showcase{
    display:none;
    
}
    #showcase_small{
        background:#d6d6d6;
        display:inline-block;
        margin-top:145px;
        height: 300px;
        width:100%;
        
        
    }
    #showcase_small img{
        display: block;
        margin: auto;
        height: 300px;
    }
   
    header .current a{
    color: #50a9e5;
    font-weight: bold;
}
    
    header a:hover{
    color: #50a9e5;
}
article h1{
    max-width: 100%;
    font-size: 85%;
    width:100%;
    text-align: center;
    display: block;
    margin: 0 0 0 0;
}
    
article p{
    color: black;
    font-size:85%;
    width:100%;
    overflow: visible;
    text-align: center;
    text-align-last: left;
    display: block;
    float: left;
    margin: 10px 0 10px;
    
        
}
    .main_icons{
        display:none;
    }
    
    
    .iconsmall_one{
        display:inline-block;
        float:left;
        
    }
    .iconsmall1_p{
        display: block;
        height: 100px;
        margin-top: 19px;
        width:65%;
        
    }
    
    .iconsmall_one img{
        background: #214a87;
        margin: auto;
        display: block;
    }
    
    .iconsmall_one h4{
        color: black;
        font-weight: 700;
        text-align: center;
        font-size: 60%;
        
    }
    .iconsmall2_p{
        margin-top: 50px;
        width:65%;
        height: 90px;
    }
    
    .iconsmall_two{
    
        margin: auto;
        display: inline-block;
        float: left;
        
        
    }
    
    .iconsmall_two h4{
        margin:auto;
        width: 110px;
        color: black;
        font-weight: 700;
        font-size:60%;
        display: inline;
        
        
    }
    
    
    .iconsmall_two img{
        margin: auto;
        display: block;
        background: #214a87;
    }
       .iconsmall4_p{
        margin-top: 25px;
        width:65%;
        height: 90px;
    }
    
   .iconsmall3_p{
        margin-top: 40px;
        width:65%;
        height: 90px;
    }
    
    .iconsmall_three{
    
        margin: auto 4px;
        display: inline-block;
        float: left;
        
        
    }
    
    .iconsmall_three h4{
        margin:auto;
        width: 110px;
        color: black;
        font-weight: 700;
        font-size:60%;
        display: inline;
        
        
    }
    
    
    .iconsmall_three img{
        margin: auto;
        display: block;
        background: #214a87;
    }
    
    
    .iconsmall_four{
    
        margin: auto 15px;
        display: inline-block;
        float: left;
        
        
    }
    
    .iconsmall_four h4{
        margin:auto;
        width: 110px;
        color: black;
        font-weight: 700;
        font-size:60%;
        display: inline;
        
        
    }
    
    
    .iconsmall_four img{
        margin: auto;
        display: block;
        background: #214a87;
    }
        
    }
       .nav2{
    text-align: center;
    float:none;
    margin: auto;
    display:inline-block;
    float:none;
    width: 100%;
    
    
    
}
  
    .nav2 a{
    font-size: 12px;
    min-width: 35px;
    padding-top; 10px;
    margin: auto;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    color: black;
    font-weight: 600;
}

.nav2 ul{
    width: 35%;
    text-align: center;
    align-content: center;
    margin:auto;
    display: block;
    
    
}
.nav2 li{
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    width: 30%;
    display: inline-block;
    margin: auto;
}
    
   .left_gradient{
     background: linear-gradient(to left,#214a87, #ffffff);
    display:block;
    float:left;
   margin: auto;
    width: 50%;
    height:25px;
}
.right_gradient{
    background: linear-gradient(to right,#214a87, #ffffff);
    display:block;
    float:right;
    margin:auto;
    width: 50%;
    height:25px;

} 
@media screen and (max-width:460px){
    body{
        overflow: scroll;
        
    }
    
    
}