body{
    background-color: #000000;
 }

 nav{
   background-color: #000000;
   opacity: 0;
 }
   nav div #hamburger span{
       position: relative;
       display: block;
       height: 4px;
       width: 30px;
       background-color: rgb(255, 255, 255);
       margin-bottom: 4px;
       transition: 0.3s linear;
       transform-origin: 4px 0px;

transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
         background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
         opacity 0.55s ease;
   }

   nav div #hamburger{
     background-color: transparent;
     border: none;
     transition: 0.3s linear;
z-index: 99;
   } 

   nav div #hamburger:hover{
    background-color: orangered; 
    padding: 10px;
   }

   nav div #hamburger input{

     position: absolute;
     top: 20px;
     height: 30px;
     width: 40px;
     cursor: pointer;
     z-index: 2;
     left:6px;
     opacity: 0;          

   }


nav div #hamburger  span:first-child
{
transform-origin: 0% 0%;
}

nav div #hamburger span:nth-last-child(2)
{
transform-origin: 0% 100%;
}

/* 
* Transform all the slices of hamburger
* into a crossmark.
*/
nav div #hamburger input:checked ~ span
{
opacity: 1;
transform: rotate(-45deg) translate(-5px, -4px);
background: #232323;
}

/*
* But let's hide the middle one.
*/
nav div #hamburger input:checked ~ span:nth-last-child(2)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);

}

/*
* Ohyeah and the last one should go the other direction
*/
nav div #hamburger input:checked ~ span:nth-last-child(3)
{
transform: rotate(45deg) translate(-2px, 2px);
}



div #menu{
background-color: #ffff;
width: 300px;
height:1000px;
position: absolute;
top: 0%;
left: -500px;
transition: 0.3s ease-in-out;
z-index: 3;
}

div #menu a{
text-decoration: none;
margin-bottom: 10px;
margin: 30px;
position: relative;
top: 30px;
left: 30px;
}

div #menu a li{
list-style: none;
font-size: 23px;
color: #000000;
transition: 0.3s linear;
}
div #menu a li:hover{
color: orangered;
}



#headBanner{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: rgb(255, 255, 255);
background-image: url('images/Image1.jpg');
background-repeat: no-repeat;
height: 500px;
background-position: center center;
background-size: contain;
opacity: 0;
}

#headBanner h2{
font-size: 70px;
opacity: 0;
transition: 0.3s linear;
z-index: 99;
}

#headBanner #creativity{
font-size: 70px;
opacity: 0;
transition: 0.8s linear;
color: orangered;
box-shadow: rgb(255, 255, 255) 40px;
z-index: 99;
}

#headBanner a{
border: 1px solid rgb(255, 255, 255);
padding: 0px;
color: rgb(255, 255, 255);
height: 30px;
width: 90px;
transition: 0.1s linear;
opacity: 0;
z-index: 99;
}

#headBanner a:hover{
background-color: orangered;
color: #ffff;
border: none;
}


.experience{
height: 400px;
width: 100%;
opacity: 0 ;
}

.experience h1{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: orangered;
transition: 0.1 linear;
position: absolute;
padding: 50px;
border: 2px solid orangered;
left: 21%;
bottom: -200px;
}


@media screen and (max-width:900px) {
.experience{
width: 50%;
}

.experience h1{
position: relative;
left: 0%;
padding: 10px;
left: 26%;
}

}
.lens{
width: 100%;
opacity: 0 ;
text-align: center;
}

.lens h1{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: orangered;
transition: 0.1 linear;
padding: 10px;

}

.lens h1 span{
color: #ffff;
}


.innovative h1{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: orangered;
transition: 0.1 linear;
padding: 30px;
}

#services .row .card{
border: none;
padding: 0px;
background: transparent;

}

#services .row .card img:hover{
opacity: 0.1;

}


#services .row .card .card-body{
background-color: orangered;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: 0.3s linear;
color: #ffff;
text-align: center;
}



#services .row .card .card-body:hover{
opacity: 0.7;
}


footer .container section a{
transition: 0.3s linear;
}

footer #copyright{
color: #ffff;
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}


footer .container section a:hover{
background-color: orangered;
border-radius: 100%;
}

.container-fluid #images{
height: 800px; 
width: 100%;
}

.container-fluid  h1{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
text-align: center;
}

.vision img{
border-radius: 100%;
height: 300px;
width: 400px;
}

.vision{
width: 100%;
text-align: center;
}

.vision h1{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: orangered;
transition: 0.1 linear;
padding: 10px;
font-size: 40px;

}

.vision h2{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: white;
transition: 0.1 linear;
padding: 10px;
font-size: 40px;

}

.vision h3{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: orangered;
transition: 0.1 linear;
padding: 10px;
font-size: 40px;
}

#gallery .row .col .card{
border: none;

}

#videoediting{
width: 100%;
}
#videoediting img{
opacity: 0.3;
height: 400px;
width: 400px;
}

#videoediting h1{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: rgb(255, 255, 255);
}

#videoediting h1 span{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: orangered;
}

.innovative p a{
text-decoration: none;
transition: 0.3s linear;
border-radius: 5px;
color: #ffff;
padding: 5px;
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}

.innovative p{
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
.innovative p a:hover{
background-color: orangered;
}