---------------- For sticky header: class="float-panel"  ------------------
.float-panel {
    width:100%;
    background:black;
    z-index:300;padding:30px 0;
    transform: translateZ(0);
    transition:all 0.5s; 
    
}
.float-panel .content-area {
	margin:10px auto;
}

.float-panel a {
	font-size:16px;
	text-decoration:none;
	color:white;
	display:inline-block;
	padding:10px 20px;
	font-family: Cinzel, serif;
}

.float-panel .fa-gg {
	color:transparent;
	font-size:30px;
	vertical-align:middle;
	transition:all 1s;
	margin-top: -10px;
}


.fixed {

	padding:4px 0;
	animation:slide-down 0.7s ease-out;
	opacity:0.9;
}
.fixed .fa-gg {
	transform: rotate(360deg); 
}


@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: .9;
        transform: translateY(0);
    } 
}



/* ---------------- For Animation on Scroll ---------------- */
.slideanim {
    visibility:hidden;
    visibility:visible\9;/*For old IE browsers IE6-8 */

}
.slideanim.slide {visibility: visible; animation:slide 1s;}
.slideanim::after {
    /* useful when its child elements are float:left; */
    content: "";
    display: table;
    clear: both;

}

@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(50%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0);
    } 
}














@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

.pwindow {
	display: block;
    min-height: 55vh;
    width: 100vw;
    height: auto;
    margin:auto;
    z-index: 1;
    background-attachment: scroll;


   

}

.parallax-window {
	width: 100vw;
	margin: top;
	height: 100vh;

	
    background-attachment: scroll;
 

    
    min-height: 100vh;
    
  	

   
    
}






@media(max-width: 786px){
.pwindow {
	background-attachment: scroll;
	
	
	
	
	

	
}
}


@media(max-width: 786px){
.parallax-window {
	width: 100vw;
	margin:auto;
}
}


@media(max-width: 786px){
.parallax-window data-image-src {
	
	
}
}




.info{
	z-index: 2;
	position: relative;
	background-color: black;
	width: 100%;
	text-align: center;


}


 @media only screen and (max-width: 768px) {
    .slider figure img {
	width: 100%;
	float: left;
  }
}



@media(min-width:768px){
.container1 {
	display: flex;
	margin-top: 0px
 }
}


/*@media(min-width: 786px){
.pimg1, .pimg2, .pimg3, .pimg4, .pimg5 {
	width: 100%;
	float: left;


}
}*/





.textsection {
	
background-color: transparent;
z-index: 1000;
padding-bottom: 0vh;
padding-top: 0vh;
width: 100vw;
overflow: hidden;	

}

.textsection-work {
	
background-color: transparent;
z-index: 1000;

padding-top: 1vh;
width: 100vw;
overflow: hidden;	

}


.textsection-work p{
	


padding-top: 3vh;

color: black;


}








.textsection2 {
	
background-color: transparent;
z-index: 1000;
padding-top: 10vh;
width: 100vw;
overflow: hidden;


}



.textsection3 {
	
background-color: transparent;
z-index: 1000;
margin: 10%;
width: 100vw;
overflow: hidden;


}




h3, p{

	display: block;
	color: grey;
	margin:auto;
	padding-left: 10vw;
	padding-right: 10vw;
	text-align: center;

	
}



 @media only screen and (max-width: 768px) {
    h3 {
	text-align: center;
  }

  	h3, p {
  		text-align: center;
  		padding-left: 3vw;
	    padding-right: 3vw;
  	}


}




h4 {

	display: block;
	color: grey;
padding: 10vw;


	
}



 @media only screen and (max-width: 768px) {
    h4 {
	text-align: center;
  }

  	h4  {
  		text-align: center;
  	
  	}


}





h1 {margin:0;
   color:white;
   font-size: 45px;
   padding-top: 5vh;
   padding-bottom: 10px;
   background-color: black;
   text-align: center;
   z-index: -1000;
   
   }



h2 {
	
   color:orange;
   font-size: 50px;
  
   z-index: -1000;
   
   
   display: block;

  
   }


 @media only screen and (max-width: 768px) {
    h2 {
	margin-top: -28vh;
    }
}


/* slider */

@-webkit-keyframes slider {
	0% {
		left:0%;
	}
	20% {
		left:0%;
	}
	25% {
		left:-100%;
	}
	45% {
		left:-100%;
	}
	50% {
		left:-200%;
	}
	70% {
		left:-200%;
	}
	75% {
		left:-300%;
	}
	95% {
		left:-300%;
	}
	100% {
		left:-400%;
	}
}
@keyframes slider {
	0% {
		left:0%;
	}
	20% {
		left:0%;
	}
	25% {
		left:-100%;
	}
	45% {
		left:-100%;
	}
	50% {
		left:-200%;
	}
	70% {
		left:-200%;
	}
	75% {
		left:-300%;
	}
	95% {
		left:-300%;
	}
	100% {
		left:-400%;
	}
}


.slider {
	width: 100;
	height: 100%;

}

.slider figure img {
	width: 15%;
	float: left;
	width: 100;
	height: 100%;
	overflow: hidden;
	object-fit: cover;
    display: block; 
}
}

.slider figure {
	position: relative;
	width: 700%;

	margin: 0;
	left: 0;
	text-align: left;
	font-size: 0;
	-webkit-animation: 20s slider infinite;
	        animation: 20s slider infinite;
	        width: 100;
	height: 100%;
	overflow: hidden;
	object-fit: cover;
    display: block; 
}
}










.container2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}


.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}




.boximage {
	width: 25%

}


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















.zink:hover{


}

/* menu */
 @media only screen and (max-width: 768px) {
    .zink {
	margin-left: 10px;
    }
}


.subtext{
	background-color: black;
	text-align: center;
	color: white;
	width: 200px;
	
	font-weight: 300;
	font-size: 18px;

}





	/* align-items: stretch;
	flex-basis:40%;
	*/
}

.container1 div, .container2 div{
	border: 1px #fff solid;
	padding: 0px;
	width: 100%;
	height:300px;
	object-fit: cover;
    display: block; 

}

.container1 div img , .container2 div img {
	width: 100%;
	height:100%;
	display: -webkit-box;
	display: -ms-flexbox;
	
    object-fit: cover;
    display: block; 


}




/*.carousel1 {
	align-items: center;
	margin:auto;
	margin:0;
	flex-basis:40%;
	flex:1;

}


.carousel2 {
	align-items: center;
	margin:auto;
	margin:0;
	flex-basis:40%;
	flex:1;
}

*/







    
    
    
.textalign {

	position:absolute;
	
	font-weight: 30;
	font-size: 30px;
	top: 40%;
	left: 40%;
}  
    


/*menu 
*/
    
  @-webkit-keyframes slideInFromLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideInFromLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}





header { 
	display: flex; 
	 background: #000000;
     padding: 30px;
 	 
 	 font-weight: 300;
 	 font-size: 18px;
 	 z-index: -2;h
     margin-top: 233;






  /* This section calls the slideInFromLeft animation we defined above */
 
  
}

header:hover{

}



/*
.container div img{
	width: 100%;
	height:200px;
}

*/



/* 
body {

	} 

	a {
		text-decoration: none; 
		display: inline-block; 
		margin-right:0px; 
		
	}

/* PORTFOLIO */
/*
portfolio-main {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    margin-left: auto;
    margin-right: auto;
}




body, html{
  height:100%;
  margin:0;
  font-size:16px;
  font-family:"Lato", sans-serif;
  font-weight:400;
  line-height:1.8em;
  color:grey;
  
}

 */

.similar_projects {
	
	display: flex;
	flex-direction:  ;
	flex-wrap: nowrap;
	justify-content:center;
    
    background-color: black;
}

@media screen and (max-width:768px) {
	.similar_projects{
		
		max-width:70vw;	
		display: block;
    	margin-left: auto;
    	margin-right: auto;
		
	}

	}



.imagestrip {
	
	display: flex;
	flex-direction:  ;
	flex-wrap: nowrap;
	justify-content:center;
    
  /*  padding-left: 15vh; */
  /*  padding-right: 15vh; */
    
   
}



@media screen and (max-width:768px) {
	.imagestrip{
		display:flex;
		flex-direction:column;
		max-width: auto;
		
	}

	}


.pimgxx {
	width: 100%;
	background-color: transparent;
}

.pimgxx img{
	height: auto;
	width: 100%; 

  
}

.pimgxx_single {

	
}



.pimgxx_single img {
max-width: 100%;
height: auto;

}

.gif img{
max-width: 18vw;

}










@media screen and (max-width:768px) {
	.gif img{

		
		max-width:70vw;	
		display: block;
    	margin-left: auto;
    	margin-right: auto;

		
	}


	}






.imgadj {
	
	
	
}

.pimg0, .pimg1, .pimg2, .pimg3, .pimg4, .pimg5{
 
  position:relative;
  opacity:1;
  margin-top: -20vh;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment:scroll;

 
    /*
    fixed = parallax
    scroll = normal
  */
 
}





.pimg0{
  background-image:url('../img/&flix/&flix_02.jpg');
  min-height:80%;
}

.pimg1{
	
  background-image:url('../img/&flix/&flix_03.jpg');
  min-height: 100vh;
  
 
 
}

.pimg2{
  background-image:url('../img/&flix/&flix_10.jpg');
    min-height: 50vh;

  
  
}

.pimg3{
  background-image:url('../img/&flix/&flix_07.jpg');
  min-height: 100vh;
}

.pimg4{
  background-image:url('../img/&flix/&flix_19.jpg');
  min-height: 100vh;
  margin-top: -40vh;

 
 
  
}


.pimg5{
  background-image:url('../img/&flix/&flix_08.jpg');
  min-height: 100vh;

}




@media screen and (max-width:768px) {
	.pimg2 img{ 

			
	}
	.pimg4 img {
		margin-bottom: -80vh;
		background-color: pink;
		opacity: .5;
	}

	}


 .image3 {
 	display: block;
 	width: 100%;
 	height: auto;
 	

 }


.image3 img {
	width: 100vw;
}



.section{
  text-align:center;

 
  
}

.section.section-light{
	
  background-color:green;
  color:pink;

}

.section.section-dark{
  background-color:purple;
  color:transparent;
  padding-top: 20vh;
  
}

.ptext{
 
  top:50%;
  width:10%;
  
  text-align:center;
  color:green;
  font-size:12px;
  letter-spacing:8px;
  text-transform:uppercase;

}

.ptext .border{
  background-color:purple;
  color:#fff;
  padding:20px;
}

.ptext .border.trans{
  background-color:green;
}

@media(max-width:568px){
  .pimg0, .pimg1, .pimg2, .pimg3, .pimg4, .pimg5 {

    background-attachment:scroll;


   

  }
}

/* VIDEO */
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    background-color: transparent;
    padding-top: 5vh;
}
.video-responsive iframe{
    
    height:80%;
    width:80%;
    margin-left: 10vw;
    margin-right: auto;
    position:absolute;

   
}


@media screen and (max-width:768px) {
	.video-responsive iframe {
		height:100%;
		width:100%;
		margin:auto;

	}
	}




.footer {
	background-color: blue;
}




.footer-bottom {
		width: 100%;
		max-width:100vw;
		margin: 0 auto;
		color:red;
		background-color: black;
		display: block;
		
	
	
}

/*menu base styles*/

nav {
	
	

	
		
}

nav ul{ list-style-type: none;
	padding: 0px;
	margin-left: 55px;


	
	
 }


nav a{
	text-decoration: none;
	text-align: right;
	color:grey;
	display:block;
	
	
	font-size: 18px;
	
	
}

nav a:hover{
	color: white;
	
}



/* social menu base styler*/
a.ig{
	background:url('../img/ig1.png') no-repeat center;
	background-size: 80%;
	font-size:24px;
	color:pink;
}

a.fb {
	background:url('../img/fb.jpg') no-repeat center;
	background-size: 80%;
}

.social a {
	text-indent: -10px;

}

.social {
	max-width: 70px;
	margin: 0 auto;
}


/* flex styles */
nav ul.social {
	flex:1 1 0;
	display: flex;
	
}

nav ul.social li{
	flex: 1 1 0;

}

/*

@media screen and (min-width:768px) {
	nav ul{
		display:flex;
		padding: 63px;
		
	}

	nav li {
		
	}



    nav {
	
	display: flex;
    }


   .social {
   	margin-left: 2vw;

	
    }

}

*/



 .socialstyle{
 		    list-style: none;
        	
        	font-size: .8em;
        	margin-top: 5vh;
        	margin-bottom: 5vh;
        	background-color: transparent;
        
        	color:white;
        	
        	
        	
        
        	
        }


 .socialstyle i a{
 			justify-content: space-around;
 			color:transparent;
 			margin-right: -21px;
 }   

 .socialstyle ul i a{
 			color:white;
 			opacity: .5;
 			margin-right: -10vw;
 			
 }

}





.flexgrid {
	display: grid;
	margin: 15em;
	grid-template-columns: 1fr 1fr;
	
	grid-gap: 1em;
	grid-template-areas: "pix pix" "pix pix" "pix pix" "wtitle wtitle";


}


@media screen and (max-width:768px) {
	.flexgrid{
	grid-template-columns: 1fr;
	grid-template-rows: auto;
		
	}

	}



.gridnest {
	position: relative;
	display: grid;
	
	grid-template-columns: 1fr 1fr;
	grid-template-rows:1fr;
	grid-gap: 1em;
	
}	


.gridnest img {
	
	width:100%;
	

	
}




.con_img img {
	background-color: pink;
	grid-area: pix;
	display: flex;
	
}




.flexgrid3 {
	display: grid;
	
	
	margin-right: 15vh;
	margin-left: 15vh;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 2fr 1fr 1fr;
	grid-gap: 1em;
	



}


@media screen and (max-width:768px) {
	.flexgrid3{
	grid-template-columns: 1fr;
	grid-template-rows: auto;

		
	}

	}



.gridnest3 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows:240px 135px;
	grid-gap: 1em;
}	


.gridnest3 img {
	width:100%;
	height:100%;
	display: flex;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}




.con_img img {
	background-color: pink;
	grid-area: pix;
	display: flex;
	grid-template-rows:240px 135px;
	grid-template-columns: 1fr;
	
}






.flexgrid1 {
	display: grid;

	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-gap: 1em;



}


@media screen and (max-width:768px) {
	.flexgrid{
	grid-template-columns: 1fr;
	grid-template-rows: auto;
		
	}

	}



.gridnest {
	position: relative;
	display: grid;

	grid-template-columns: 1fr 1fr;
	grid-template-rows:1fr;
	grid-gap: 1em;
	
}	


.gridnest img {
	
	width:100%;
	

	
}

.flexgrid1, .flexgrid2, .flexgrid3, .flexgrid4, .flexgrid, .flexgrid5, .flexgrid6, .flexgrid7, .flexgrid8 {
	margin: 2% 10% 2% 10%;
}


.con_img img {
	background-color: pink;
	grid-area: pix;
	display: flex;
	
}
       




.flexgrid2 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-gap: 1em;


}


@media screen and (max-width:768px) {
	.flexgrid{
	grid-template-columns: 1fr;
	grid-template-rows: auto;
		
	}

	}



.gridnest {
	position: relative;
	display: grid;
	
	grid-template-columns: 1fr 1fr;
	grid-template-rows:1fr;
	grid-gap: 1em;
	
}	


.gridnest img {
	
	width:100%;
	

	
}




.con_img img {
	background-color: pink;
	grid-area: pix;
	display: flex;
	
}





.flexgrid4 {
	display: grid;
	
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	grid-gap: 1em;



}


@media screen and (max-width:768px) {
	.flexgrid{
	grid-template-columns: 1fr;
	grid-template-rows: auto;
		
	}

	}



.gridnest {
	position: relative;
	display: grid;
	
	grid-template-columns: 1fr 1fr;
	grid-template-rows:1fr;
	grid-gap: 1em;
	
}	


.gridnest img {
	
	width:100%;
	

	
}




.con_img img {
	background-color: pink;
	grid-area: pix;
	display: flex;
	
}
       


.flexgrid5 {
	display: grid;
	
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-gap: 1em;



}




.flexgrid6 {
	display: grid;
	
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-gap: 1em;



}



.flexgrid7 {
	display: grid;
	
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 2fr;
	grid-gap: 1em;



}


.flexgrid8 {
	display: grid;
	
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-gap: 1em;



}





// Without these next 2 rules, a-frame will hide the rest of the page and disable scrolling
body.a-body {
    height: auto;
    overflow: auto;
}
html.a-html {
    height: auto;
    overflow: auto;
    position: static;
}
// Hides the extra width taken by the canvas
.vr-background {
    overflow: hidden;
}
// Set a height for the container – this is important.
// The value of the height is your design choice. I used a full-page height
.vr-container {
    height: 100vh;
}


// for the html element inside which you are adding the a-frame embed code
.vr-container {
  height: 100vh; // I want the embed to be full-height. You can give any value you want here.
  .vr-overlay-content {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 200px;
    pointer-events: none; // this is important as it enables your interactions on the overlay to be detected by a-frame
  }
  .action {
    pointer-events: initial; // enables click on the button
  }
}



.contact_section{
	background-color: red;

}