@import 'https://fonts.googleapis.com/css?family=VT323';
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{


}

html {
    height:155%;
    background-color: black;
    width:100%
}


body {
    height:155%;
    width:100%;
    margin:0;
}


#container {
    height:100%;
    width:100%;
    min-height: 677px;
    
    
}




p {
    color:green;
}

.burg {
  opacity:0;
}

.slide1 {

    width:100%;
    height:70%;
    background-color:#11171e;
    float:left;
}

.letsgo {
    padding: 0.40rem 1.5rem;
position:relative;
border:2px solid white;
  background-color:#11171e;
color:#fff;
font-size: 1em;
letter-spacing: 0.1em;
margin:0 0 0 12%;
text-decoration: none;
padding:10px 30px;
text-transform: uppercase;
transition:0.5s;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.letsgo:hover {
  border:2px solid #4bf5a2;
    padding: 0.45rem 1.6rem;
 color:#4bf5a2;
    letter-spacing: 0.20em;
    background-color:#11171e;
      font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
    
    
    
   







  
}

.inner_content1 {
width:80%;
height:520px;
background-image: url("../images/david22.jpg");
background-repeat: no-repeat;
  background-size: 255px 300px;
  background-position: 96% 14%;
  background-color:#11171e;

}




h1 {
	margin:13% 0 0 12%;
	
  font-weight: 400;
  font-style: normal;
  font-size: 100px;
  letter-spacing:4px;
  font-family: "Anton", sans-serif;
  color:white;
}


p{
    line-height: 1.6;
	width:50%;
	margin:0 0 40px 12%;
    font-family: "Rozha One", serif;
    font-weight: 400;
    font-style: normal;
  font-size: 18px;
  color: #c5c8cb;
  letter-spacing: 1px;
}

h2 {margin: 5px 0 10px 0;
    color: white;
 font-size:25px;
 }
 
 .typetxt {

    margin:0 0 0 10%;
    font-family: "Archivo Black", sans-serif;
  font-weight: 200;
  font-style: normal;
  letter-spacing:1px;
}

.wrapper {
    
    /*This part is important for centering*/
    display: grid;
    place-items: start;
    margin:43px 0 2% 12%;
  }
  
  .typing-demo {
    width: 25ch;
    animation: typing 4s steps(20), blink .5s step-end infinite alternate;
    
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;
    color:#4bf5a2;

}





@keyframes example {
  0%   {opacity : 0;}

  100% {opacity : 1;}
}


@keyframes flash {
  1%   {opacity : 0;}
  5%   {opacity : 1;}
  10%   {opacity : 0;}
  15%   {opacity : 1;}
  20%   {opacity : 0;}
  25%   {opacity : 1;}
  30%   {opacity : 0;}
  40%   {opacity : 1;}
  50%   {opacity : 0;}
  55%   {opacity : 1;}
  60%   {opacity : 0;}
  65%   {opacity : 1;}
  70%   {opacity : 0;}
  75%   {opacity : 1;}
  80%   {opacity : 0;}
  85%   {opacity : 1;}
  90%   {opacity : 0;}
  95%   {opacity : 1;}
  98%   {opacity : 0;}
  100% {opacity : 1;}
}





  
  @keyframes typing {
    from {
      width: 0
    }
  }
      
  @keyframes blink {
    50% {
      border-color: transparent
    }
  }







  .slide2 {

    width:100%;
    height:100%;
    background-color:#f0ebd0;;
    float:left;
    display:flex;
    align-items: center;
    overflow: hidden;
    background-image: url(../images/forge.png);
 background-repeat: no-repeat;
 background-position: 50% 33%;

}

.forged {
  position:relative;
 
}


.cbox {
 
  position:relative;
 color:green;
  
right:49%;
top:20%;
}




.port-title {
  width: 100%;
  border:1px solid red;
  display:block;
}



.content2 {
  padding-top: 110px;
  max-width:960px;
  margin: 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr ;
  grid-template-rows:150px 150px 150px ;
 grid-gap:20px;
 z-index: 1;
 
  
  }






.point {
  position:relative;
  top:-400px;
  left:150px;
  color:transparent;

}


.words {
  position:relative;
  top:-310px;
  left:59px;
  color:transparent;
  width:500px;

}


.portf {
  position:relative;
  opacity:0;
}


.alter {
  animation: move 2s 1, wiggle 2s, fadein 1.5s forwards;
  transform-origin: 50% 50%;
  width:100%;
  height:100%;
  position:relative;
  max-height: 150px;
  min-height: 150px;
  border-radius: 5px;
}


.portright {
  position:relative;
  opacity:0;
}

.nate {
  animation: mleft 2s 1, wiggle 2s,  fadein 1.5s forwards;
  transform-origin: 50% 50%;
  width:100%;
  height:100%;
  position:relative;
  min-height: 150px;
  max-height: 150px;
  border-radius: 5px;
}



.comein {
  animation: arriveright 3s 1,  fadein 1.5s forwards;
  /* animation: arriveright 2s 1,  fadein 1.5s forwards; */
  margin:168px 0 0 0;
        left:30px;
         height:470px;
         width:55%;
         float:left;
         position:relative;
         bottom:111px;












         
}


@keyframes arriveright {
  0%   {  top:200px;}
 
  100% {  top:0px;}
}



.movein {
  animation: move 2s 1,  fadein 1.5s forwards;
  position:relative;
width:390px;
height:340px;
padding:220px 0 0 0;
float:left;
background-image: url("../images/frame.png");


background-repeat: no-repeat;
background-size: 350px 350px;
background-position: -2px 219px;



}




@keyframes move {
  0%   {  left:-300px;}
 
  100% {  left:0px;}
}





@keyframes mleft {
  0%   {  right:-300px;}
 
  100% {  right:0px;}
}


@keyframes wiggle {
  0% {transform: rotate(0deg);}
 
  100% {transform: rotate(360deg);}
}






  .square1{
    grid-column-start:2;
    grid-column-end:3;
    background-color: transparent;
    border-radius: 5px;
     transition: top ease 0.5s;
      position: relative;
  top: 0;
   

  }


  .square1:hover {
top: -7px;

  }



  .square2{
    
    background-color:#F8F0C6;
border-radius: 5px;
    transition: top ease 0.5s;
      position: relative;
  top: 0;
  }

  .square2:hover {
top: -7px;

  }






  .square3{
    background-color: transparent;
border-radius: 5px;
   transition: top ease 0.5s;
      position: relative;
  top: 0;
  }


    .square3:hover {
top: -7px;

  }

  

  .square5{
    background-color: #F8F0C6;
border-radius: 5px;
 transition: top ease 0.5s;
      position: relative;
  top: 0;

  }


      .square5:hover {
top: -7px;

  }


  .square6{
    background-color: transparent;
border-radius: 5px;
transition: top ease 0.5s;
      position: relative;
  top: 0;
  }


      .square6:hover {
top: -7px;

  }




  .square9{
    background-color: transparent;
border-radius: 5px;
transition: top ease 0.5s;
      position: relative;
  top: 0;
  }


      .square9:hover {
top: -7px;

  }



  .square10{
    background-color: transparent;
border-radius: 5px;
transition: top ease 0.5s;
      position: relative;
  top: 0;
  }

      .square10:hover {
top: -7px;

  }



  .square11{
    background-color: transparent;
border-radius: 5px;
transition: top ease 0.5s;
      position: relative;
  top: 0;
  }


      .square11:hover {
top: -7px;

  }


  .square12{
    display:none;
border-radius: 5px;
  }


 .square13{
    background-color: transparent;
border-radius: 5px;
transition: top ease 0.5s;
      position: relative;
  top: 0;
  }

      .square13:hover {
top: -7px;

  }




  .square15{
    background-color: transparent;
border-radius: 5px;
transition: top ease 0.5s;
      position: relative;
  top: 0;
  }

  
      .square15:hover {
top: -7px;

  }




  .square16{
    background-color:#F8F0C6;
border-radius: 5px;
  }

  .square17{
    background-color: grey;
border-radius: 5px;
  }


  h3 {
    
    width:400px;
	margin: 5px 0 10px 0;
    font-weight: 400;
    font-style: normal;
    font-size: 60px;
    letter-spacing:4px;
    font-family: "Anton", sans-serif;
    color:black;
  
  
  
  }



h4 {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
 margin:0 0 0 0;
  font-family: monospace;
  font-size: 2em;
  color:white
  



}

.good {
 
  
  width:318px;
  height:50px;
  margin: 0 0 0 10%;
}
  

img {
  width:100%;
  height:100%;
}
  

.image {
  padding:8px 16px 0 16px;
 height: 38px;
 width:38px;
}


.image2 {
  padding:8px 16px 0 16px;
 height: 38px;
 width:38px;
}




.tricks {
  margin:auto;
  width:300px;
  height:60px;
  
}
.tricks2 {
  margin:auto;
  width:300px;
  height:60px;
  
}



.slide3 {
display:flex;
    width:100%;
    height:100%;
    background-color:#11171e;
    float:left;
    align-items: center;
}


.slide4 {

  width:100%;
  height:80%;
    background-color:#55cc8a;
    float:left;
 
}

.slide5 {

  width:100%;
  height:100%;
  background-color:#11171e;
  float:left;
  display:flex;
  align-items: center;
}



.misha{

    color:white;
    font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  margin:0 1px 0 3%;
  



animation-fill-mode: forwards;









}



.second {
    color:white;
    font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  margin:0 32% 0 0.2%;
  animation-fill-mode: forwards;










}



.nav {
  height:67px;
    z-index: 100;
    list-style-type: none;
    text-align: left;
    max-height: 67px;
    margin: 0;
    padding: 0;
    width:100%;
    background-color: rgba(0,0,0,0.6);;
    position: fixed;
    
  }
  
  .nav li {
    display: inline-block;
   
    font-size: 12px;
    padding: 20px 15px 20px 15px;
    font-family: 'Montserrat', sans-serif;
    line-height: 2;
   
  }


  a {
    text-decoration: none;
    color: rgb(239, 233, 233);
}










.angels {
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.capsule {
  position:relative;
    display:flex;
    width:270px;
    
    animation: rise 4s infinite alternate;
    transform-origin: 90px 30px;
    padding-bottom: 20px;
}



.capsule2 {
  position:relative;
    display:flex;
    width:270px;
    
    animation: rise 4s  infinite;
    animation-direction:alternate-reverse;
    transform-origin: 90px 30px;
    padding-bottom: 20px;
}

section {
    padding-top: 100px;
    width:98%;
    margin:auto;

    height:50vh;
}



.torso {
  border:13px solid #5dade2;
  height: 90px;
  width:90px;
  border-radius:14px;
  margin:0 -9px 0 -9px;
  z-index: 90;
}


.torso2 {
  border:13px solid #4bf5a2;;
  height: 90px;
  width:90px;
  border-radius:14px;
  margin:0 -9px 0 -9px;
  z-index: 90;
}




.angel-img {
    height: 90px;
    width:90px;
    border-radius:2px;
    

}



.angelleft {
    width:90px;
    height:60px;
    background-image: url(../images/angelleft.png);
    background-size: 90px 60px;
    animation: strutter 1s infinite alternate;
    transform-origin: 90px 30px;
}



.angelright {
    width:90px;
    height:60px;
    background-image: url(../images/angelright.png);
    background-size: 90px 60px;
    animation: flutter 1s infinite alternate;
  transform-origin: 0 30px;
}




@keyframes flutter {
    0% {transform: rotate(-20deg);}
   
    100% {transform: rotate(30deg);}
  }

  @keyframes strutter {
    0% {transform: rotate(20deg);}
   
    100% {transform: rotate(-30deg);}
  }
  


  @keyframes rise {
    0%   {  bottom:-80px;}
   
    100% {  bottom:0px;}
  }



















.inner_content3 {
  width:100%;
  height:520px;
  
  margin: 0 auto;

}



h2 {
  margin:9% 0 1% 0;
	text-align: center;
  font-weight: 400;
  font-style: normal;
  font-size: 27px;
  letter-spacing:4px;
  font-family: "Anton", sans-serif;
color:white;
}


.mapp {
  margin:3% 0 1% 0;
	text-align: left;
  font-weight: 400;
  font-style: normal;
  font-size: 27px;
  letter-spacing:2px;
  font-family: Work Sans;
color:white;

}



.educationp {

  line-height: 1.6;
	width:60%;
	text-align: left;
    font-family: "Rozha One", serif;
    font-weight: 400;
    font-style: normal;
  font-size: 18px;
  color: #c5c8cb;
  letter-spacing: 1px;
  margin-left:0;
}



.secondspan {
   
    color:#4bf5a2;
    
    line-height: 1.6;
    width:45%;
    
      font-family: "Rozha One", serif;
      font-weight: 400;
      font-style: normal;
    font-size: 18px;
    margin:0 0 0 0;
    letter-spacing: 1px;
  }

.point2 {
  position:relative;
  top:-255px;
  left:220px;
  color:#11171e;
}





.scene {
  width:80%;
height:480px;
  border: 1px solid #CCC;
  position:relative;
  top:120px;
  perspective: 100px;
  margin:auto;
}

.card {
  
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
 
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: #52bf84;;
  background-image: url(../images/laurus.png), url(../images/grass.png);
  
  background-repeat: no-repeat, no-repeat;
  
  
    
    background-position: 45% -1%, 1% 115%;
    overflow: hidden;
}

.card__face--back {
  background: blue;
  transform: rotateY(180deg);
}


.on {
  color:green;
}


.off {
  color:red;
}


h3 {
  text-align: left;
	margin:1% 0 0 3%;
  font-weight: 400;
  font-style: normal;
  font-size: 100px;
  letter-spacing:4px;
  font-family: "Anton", sans-serif;
  color:white;

}



.butterfly {
  width:70px;
  height:70px;
  position:relative;
  top:-56px;
  left:-245px;
}

#section4 {
 position:relative;
 top:50px;
 left:200px;
color:#55cc8a;
}

h4 {
  
  text-align: left;
  display:inline;
  float:left;
  margin:0 21% 0% 3%;
  font-size: 26px;
  color:#864242;
  position: relative;
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;
  
}





.nature {
  margin:4% 0 0 3%;
    color: #0f2a1d;
    position:relative;
    
    font-family: "Zilla Slab", serif;
    font-weight: 500;
    font-style: normal;
    text-align: justify;
  }
  



.cricket {
  width:30px;
  height:30px;
  
  position:relative;
  background-image: url(../images/cricket.png);
  background-repeat: no-repeat;
margin:193px 0 0 150px;
  
  animation: spinHorizontal 13s linear infinite;
  position:relative;
  
   
  animation-delay:5s;
}










@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}






@keyframes spinHorizontal {
  0%, 100% { 
    bottom:0; 
  }
  
  
  2% {
    bottom:260px;
  }


  3% {
    bottom:0px;
  }

  100% {
    bottom:0;
  }
}











.flyingsquad {
width:60px;
height:60px;

background-image: url(../images/winglessbee.png);
background-position: 45% -1%;
background-size:70px 70px;
background-repeat:no-repeat;
animation: MoveUpDown 3s linear infinite;

left: 350px;
bottom: 0;
position: relative;
}


.flyingsquadsecond {
  width:60px;
  height:60px;
  
  background-image: url(../images/winglessbee.png);
  background-position: 45% -1%;
  background-size:70px 70px;
  background-repeat:no-repeat;
  animation: MoveUpDown 3s linear infinite;
  animation-delay:1s;
  left: 650px;
  bottom: 0;
  position: relative;
  -moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
  }




.wing {
  width:30px;
  height:30px;
  
  background-image: url(../images/wing.png);
  
  background-size:20px 20px;
  background-repeat:no-repeat;
  position:relative;
  top:10px;
  left:1px;
  animation-fill-mode: forwards;


  opacity:0;






		 animation-name: flash;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  
  }




  @keyframes MoveUpDown {
    0%, 100% {
      bottom: 0;
    }
    50% {
      bottom: 11px;
    }
  }




  





    .beehouse{
      border: #11171e 1px;
      width:70px;
      height:70px;
      




      animation-fill-mode: forwards;


  






		 animation-name: shift;
  animation-duration: 15s;
  animation-iteration-count: infinite;
    }





    .photos {
      width:360px;
      height:210px;
      background-color: red;
      float:right;
      position:relative;
      bottom:293px;
      right:80px;
      background-image: url(../images/caterpillar.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 5px;
      border: 1px solid white;
     
    }




    .machinepic {
      width:360px;
      height:210px;
      background-color: #777d86;
      float:right;
      position:relative;
      bottom: 179px;
      right:78px;
      background-image: url(../images/card.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 5px;
      border: 1px solid rgb(228, 226, 232);
    }















    @keyframes fade {
      0%   {opacity : 1;}
      25%  {opacity : 0.7;}
      50%  {opacity : 0.4;}
      100% {opacity : 0;}
    }
    
    
    @keyframes fadein {
      0%   {opacity : 0;}
      25%  {opacity : 0.4;}
      50%  {opacity : 0.7;}
      100% {opacity : 1;}
    }
    
    


    

    
    
        @-webkit-keyframes example {
      0%   {opacity : 1;}
      25%  {opacity : 0.7;}
      50%  {opacity : 0.4;}
      100% {opacity : 0;}
    }



   


    @keyframes mymove {
      from {width: 0px;}
      to {width: 152px;}
    }







    .card__face--back {

background-color:#767e8a;
background-image: url(../images/wire.png), url(../images/circuit.png);
  
  background-repeat: no-repeat, no-repeat;
  
  
    
    background-position: 39% -4%, 116% 48%;
    overflow: hidden;
     
  }



    .visual {
      float:left;
      width:277px;
      height:180px;
      
      position:relative;
      bottom:-1%;
      left:274px;
      background-image: url(../images/laptop.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-size:250px 180px;
    }


    .zerovisual {
      float:left;
      width:277px;
      height:180px;
      
      position:relative;
      bottom: -3%;
      left:54px;
      background-image: url(../images/laptop.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-size:250px 180px;
    }






.screen {
  position:relative;
  width:174px;
  height:99px;
   border:1px solid black;
   top:17px;
   left:36px;
   background-color: #0827F5;
}






    .tech {
      color:#52bcf1;
      text-align: left;
      display:inline;
      float:left;
      margin:0 21% 0% 3%;
      font-size: 26px;
      
      position: relative;
      font-family: 'Lobster', monospace;
      font-weight: 400;
      font-style: normal;
    }



    .techpara {
      margin:4% 0 0 3%;
      color: #e6f0eb;
      position:relative;
      
      font-family: "Zilla Slab", serif;
      font-weight: 400;
      font-style: normal;
      text-align: justify;

    }



    .slidey {
      width:800px;
      height:400px;
      background-color: pink;
      float:left;
    }




    .bar1 {
      
      width: 100px;
      height:15px;
      background-color: rgb(255, 255, 255);
      margin:0 0 0 10px;
      animation-direction: forwards;
opacity:0.;
bottom:-49px;
     
    
      position: relative;
    
    
    
    
         animation-name: mymove;
      animation-duration: 50s;
      animation-iteration-count: infinite;
      
    }






    .repair {
float:left;
      font-size: 30px;
      padding:5px 2px 2px 33px;
      font-family: 'VT323';
      animation-fill-mode: forwards;
color:rgb(237, 227, 227);

 
      
    }




    .inner_content5 {
      width:85%;
      margin-left: 180px;
      height:640px;
 
      background-repeat: no-repeat;
        background-size: 265px 320px;
        background-position: 96% 3%;
       
      background-color:#11171e;
      background-image: url("../images/=circuit.png");
      }


.call-text{
 width:300px;
 height:10px;
 border:1px solid white;


}


      .frame {
 width:390px;
 height:340px;
padding:220px 0 0 0;
 float:left;
 background-image: url("../images/frame.png");


 background-repeat: no-repeat;
 background-size: 350px 350px;
 background-position: -2px 219px;
 

      }




      
      
    
      
      
      @keyframes flapright {
        from {
          transform: rotatey(0deg);
        }
      
        to {
          transform: rotatey(-45deg);
        }
      }
      
      
      
      
      
      
      @keyframes flapleft {
        from {
          transform: rotatey(0deg);
        }
      
        to {
          transform: rotatey(-45deg);
        }
      }
      


      .point3{
        position:relative;
        color:white;
        left:160px;
        top:-340px;
      }
     

      .rightwing {
        width: 100px;
        height:200px;
        animation-duration: 2s;
         animation-name: flapright; 
        animation-iteration-count: infinite;
        animation-direction: alternate;
        
        
         transform: rotatey(-325deg);
        transform-origin: 0px 100px;
        background-image: url("rightwing.png");
        background-repeat: no-repeat;
      }
      
      .middle {
        width:40px;
        height:160px;
        opacity: 0.9;
        background-image: url("body.png");
        background-size: 100px 96px;
        background-repeat: no-repeat;
        background-position:-27px 11px ;
        margin:0 -17px 0 -20px;
      
        
      }
      
      
      
      
      .leftwing {
        width: 100px;
        height:200px;
          animation-duration: 2s; 
         animation-name: flapleft; 
        animation-iteration-count: infinite;
        animation-direction: alternate;
        background-image: url("leftwing.png");
        
         transform: rotatey(325deg);
         transform-origin: 100px 100px;
         background-repeat: no-repeat;
         z-index:10;
      }
      
      
      
      .box {
       
        display:flex;
        position:relative;
        top:96px;
        left:71px;
        width:208px;
      }


      .contactdiv {
        margin:168px 0 0 0;
        left:30px;
         height:470px;
         width:55%;
         float:left;
         position:relative;
         bottom:111px;
      }




      ul.contact-icons {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        text-align: center;
        
      }



     ul.contact-icons li {
        float: left;
        height:90px;
      }
      
      ul.contact-icons li > span{
        color:white;
        font-family: "Zilla Slab", serif;
  font-weight: 400;
        font-size: 1.2em;
        line-height: 58px;
        margin-right:42px;
      }
      







      
        
        .formspan {
          color: #8e8c8c;
          display: inline-block;
          justify-content: center;
          padding:0;
          
        }
        
        
        input[type=text], select, textarea {
        
          width: 65%;
          padding: 22px;
          border: 2px solid #0d0d0d;
         
          box-sizing: border-box;
          margin-top: 9px;
          margin-bottom: 36px;
          resize: vertical;
          display:block;
          margin:auto;
          height:16px;
          background: #ebe2e2;
          border-radius: 3px;
        }
        



        input.message {
        
          width: 65%;
          padding: 22px;
          border: 2px solid #0d0d0d;
         height:150px;
          box-sizing: border-box;
          margin-top: 9px;
          margin-bottom: 36px;
          resize: vertical;
          display:block;
          margin:auto;
          background-color: #ebe2e2;
          border-radius: 3px;
          
        }



        
        label {
          display: block;
            text-align: left;
            font-family: "Zilla Slab", serif;
            
            font-size: 18px;
            font-weight: 300;
            line-height: 27px;
            color:#0697f8;
            margin-left:125px;
            padding:5px;
        }
        
        
        .formpara {
        margin:20px 0 20px 0;
          font-family: Lato;
          font-size: 1.2rem;
          line-height: 1.8;
        }






        .icons-number {
          display: flex;
  justify-content: center;
        }


        .button-container {
          position:relative;
          ;
          padding:6px;

          padding-left:273px;
        }




        button {

         
          width:155px;
          height:36px;
          display:block;
         font-weight: 500;
        font-family: Zilla slab;
          font-size: 1.2em;
          font-weight:400;
           background-color:#383e43;
            color:#f1f3f8;
          
     
          margin-top:10px;
       
          border-radius: 3px;
        }
        

        button:hover {

        
          width:155px;
          height:36px;
          display:block;
         font-weight: 400;
         font-family: Zilla slab;
          font-size: 1.2em;
          font-weight:300;
        background-color: #082b84;
        
          margin-top:10px;
          color:#f1f3f8;
          border-radius: 3px;
        }


        
     .need {
      font-size: 38px;
      position: relative;
      top: 164px;
      left: -318px;
      font-family: "Lobster", serif;
      color:#077dcb;
     }





    





    @media screen and (max-width: 1024px) {
      label {
        margin:0;
        padding-left:18%;
      }


.inner_content1 {
  width:94%;
}

      .contactdiv{
        width:70%;
        float:left;
        margin-top: 120px;
      }



.scene {
  width:94%;
}


.inner_content5{
  margin:0;
}



      input {
        margin-left:5%;
      }



      .second {

        margin: 0 15% 0 3px;
      }


    }



    @media screen and (max-width: 901px) {
      .popout >a { 
        
        display:none;
  
        color:red;
      }
      
      .burg {
        opacity:1;
      }
      
      
      
      }
   
    






    
  
    @media screen and (max-width: 855px) {
      
      .scene {
        height:700px;
      }
      
      .nature {
        margin:4% 0 0 3%;
          color: #0f2a1d;
          position:relative;
          width:90%;
          font-family: "Zilla Slab", serif;
          font-weight: 400;
          font-style: normal;
          text-align: justify;
        }
        

        .card__face--back {
          background-color: #767e8a;
          background-image: url(../images/wire.png), url(../images/circuit.png);
          background-repeat: no-repeat, no-repeat;
          background-position: 39% -4%, 136% 281%;
          overflow: hidden;
      }



      .machinepic{
        display:none;
      }

        .techpara {
          margin:4% 0 0 3%;
            color: #fafcfb;
            position:relative;
            width:90%;
            font-family: "Zilla Slab", serif;
            font-weight: 400;
            font-style: normal;
            text-align: justify;
          }



          .visual {
            float: left;
            width: 267px;
            height: 180px;
            position: relative;
            bottom: -143px;
            left: 109px;
            background-image: url(../images/laptop.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-size: 250px 180px;
        }
          


      .photos {
        width: 360px;
        height: 210px;
        background-color: red;
        float: right;
        position: relative;
        bottom: 65px;
        right: 16%;
        background-image: url(../images/caterpillar.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 5px;
        border: 1px solid white;
      }
      
      
      label {
        margin:0;
      }




      .contactdiv{
        width:100%;
        float:left;
        margin-top: 120px;
      }


.inner_content5{
  margin:0;
}



      input {
        margin-left:5%;
      }
    }





    @media screen and (max-width: 855px) {
      label {
        margin:0;
      }



     .need {
      left:10px;
     }




      .contactdiv{
        width:100%;
        float:left;
        margin-top: 120px;
        left:10px
      }


.inner_content5{
  margin:0;
}



      input {
        margin-left:5%;
      }

     

      ul.contact-icons li > span {
        font-size: 1em;
        margin:0;
      }



    }

   



    @media only screen
    and (min-device-width : 855px)
    and (max-device-width : 915px)
    and (orientation : landscape) {
    /* Styles */




    .slide1 {
      height:270vh;
    }

.slide2 {
  height:400vh;
}


.cbox {
    position: relative;
    color: green;
    right: 48%;
    top: 22%;
    
}



.need {
    
display:none;
}



    .slide3 {height:1800px;}


    section{
      height:70vh;
    }
    
    .photos {
      right:70px;
    }
    
    
     .slide4 {
      height:177%;
    }
    
    
    .slide5 {
      height:197%;
    }
    
    .need {
        left: -218px;
    }
    
    .contactdiv {
      left:167px;
    }
    
    .frame {
      margin-left:210px;
    }
    

.scene {
    max-height:600px;
    max-width:60%;
}


.visual {
  bottom: -5%;
    left: 120px;
}

    .machinepic {
      right:13px;
    }

    }






    @media screen and (max-width: 855px) {
      label {
        margin:0;
      }



     .need {
      left:10px;
     }




      .contactdiv{
        width:100%;
        float:left;
        margin-top: 120px;
        left:10px
      }


.inner_content5{
  margin:0;
}



      input {
        margin-left:5%;
      }

     

      ul.contact-icons li > span {
        font-size: 1em;
        margin:0;
      }



    }




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

     .angels {
      position: relative;
      top:-320px;
     }





     .capsule {
      position:relative;
        display:flex;
        width:270px;
        
        animation: horise 4s infinite alternate;
        transform-origin: 90px 30px;
        padding-bottom: 20px;
    }
    
    
    
    .capsule2 {
      position:relative;
        display:flex;
        width:270px;
        
        animation: horise 4s  infinite;
        animation-direction:alternate-reverse;
        transform-origin: 90px 30px;
        padding-bottom: 20px;
    }
    
          
    .slide3 {
      height: 131%;
    }



    .educationp {
      width:90%;
    }

        
        }



  



        @keyframes horise {
          0%   {  right:-30px;}
         
          100% {  right:30px;}
        }
      




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

.misha {

  margin: 0 1px 0 7%;
}



      .inner_content1 {
        width:95%;
        height:520px;
        background-image: url("../images/david22.jpg");
        background-repeat: no-repeat;
          background-size: 173px 264px;
          background-position: 100% 79%;
          background-color:#11171e;
          min-width: 380px;
        
        }



       
h1 {
  text-align: center;
 
        margin-top: 23%;
}


.wrapper {
  margin: 10px 0 2% 12%;
}

        .slide1 {
          height:60%
        }


        .letsgo {
          margin: 3% 0 0 3%;
         }


         .cbox {
 display:none;
          position:relative;
         color:green;
          
        right:53%;
        top:22%;
        }
        
        .slide2 {
          height:90%;
                   background-repeat: no-repeat;
 background-position: 50% 30%;
        }

        .content2 {
          padding-top: 110px;
          max-width:98%;
          position:relative;
          left:-20px;
          display:grid;
          grid-template-columns:1fr 1fr 1fr  ;
          grid-template-rows:150px 150px 150px ;
         grid-gap:10px;
         grid-column-end: auto;
 
          
          }



 


          .point2 {
            position:relative;
            top:-560px;
            left:220px;
            color:#11171e;
          }


          .visual {
            float: left;
            width: 267px;
            height: 180px;
            position: relative;
            bottom: -143px;
            left: 90px;
            background-image: url(../images/laptop.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-size: 250px 180px;
        }



h1 {
  margin-left:3%;
}


.wrapper {
  margin-left:2%;
}



p {
  
}





p {
  margin-left:3%;
  width:49%;
}


.square1 {
  grid-column-start: 0;
  grid-column-end: 1;

  
  grid-row-start: 1;

}




.square10 {
  grid-column-start: 2;
  grid-column-start: 3;

  
  grid-row-start: 1;
  grid-row-start: 2;

}



.square11 {
  grid-column-start: 2;
  grid-column-end: 3;

  
  grid-row-start: 1;

}


.square12{
  
  grid-column-start: 2;
  grid-column-end: 3;

  
  grid-row-start: 1;
}


.square3 {
  grid-column-start: 3;
  grid-column-end: 4;

 
  grid-row-start: 1;

}



.square5 {
  grid-column-start: 3;
  grid-column-end: 4;

 
  grid-row-start: 2;

}


.square6 {
  grid-column-start: 2;
  grid-column-end: 3;

 
  grid-row-start: 2;

}



.square9 {
  grid-column-start: 1;
  grid-column-end: 2;

 
  grid-row-start: 2;

}



.square15 {
  grid-column-start: 1;
  grid-column-end: 2;

 
  grid-row-start: 3;

}

.square13 {
  grid-column-start: 1;
  grid-column-start: 2;

 
  grid-row-start: 3;

}


.content2 {
  float:left;
  margin:1px 1px 1px 1px;
}


.scene {
  width:96%;
  min-width: 380px;
}

.photos {
  width: 360px;
  height: 210px;
  background-color: red;
  float: right;
  position: relative;
  bottom: 55px;
  right: 12%;
  background-image: url(../images/caterpillar.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 5px;
  border: 1px solid white;
  
}




.card__face--front {
  background: #52bf84;
  background-image: url(../images/laurus.png), url(../images/grass.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 45% -9%, 1% 115%;
  overflow: hidden;
}

.flyingsquad {
  width: 60px;
  height: 60px;
  background-image: url(../images/winglessbee.png);
  background-position: 45% -1%;
  background-size: 70px 70px;
  background-repeat: no-repeat;
  animation: MoveUpDown 3s linear infinite;
  left: 177px;
  bottom: 0;
  position: relative;
}


      label {
        margin:0;
      }



     .need {
      top:220px;
      left:52px;
     }




      .contactdiv{
        width:100%;
        float:left;
        margin-top: 135px;
        left:5px;
        
      }


.inner_content5{
  margin:0;
}



      input {
        margin-left:5%;
      }

     

      ul.contact-icons li > span {
        font-size: 1em;
        margin:0;
        width:100%;
        display:block;
      }


      .button-container {
        padding-left:45px;
        padding-top: 10px;
      }


      .box {
        display: flex;
        position: relative;
        top: 96px;
        left: 105px;
    }



      .frame {
        width: 370px;
        height: 340px;
        padding: 220px 0 0 0;
        float: left;
        background-image: url(../images/frame.png);
        background-repeat: no-repeat;
        background-size: 350px 350px;
        background-position: 35px 219px;

    }

.slide5{

  height:121%;
}


.icons-number{
 height:65px;
}


label {
  padding-left:43px;
}


input[type=text], select, textarea {
  width:80%;
}



  }



.burg {
  width:30px;
  height:30px;
  position:relative;
  top:9px;
  left:20px;
 
}


  /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 110; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 45px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */



@media screen and (max-width: 415px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;




  }

 .frame { width: 370px;
  height: 340px;
  padding: 220px 0 0 0;
  float: left;
  background-image: url(../images/frame.png);
  background-repeat: no-repeat;
  background-size: 350px 350px;
  background-position: 12px 219px
}




.box {
  display: flex;
  position: relative;
  top: 96px;
  left: 82px;
}

.image {
  width:30px;
  height:30px;
}
.icons-number {
  width:360px;

}

.content2{
padding-top: 110px;
        max-width: 98%;
        position: relative;
        left: -20px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 140px 140px 140px;
        grid-gap: 20px;



}



 .square10 {
  grid-column: start;
 }

.photos {
  right: 5%;
}

.visual {
  left: 56px;
}

input[type=text], select, textarea {
  width: 85%;   }




.button-container {
  padding-left: 27px;
}


label {
  padding-left: 29px;
}


.need {
  left:25px;
}

.second {
margin: 0 0% 0 3px;
}



}