/* STYLE */

div#preload { display: none; }

body{   
    margin: 0;

    background-color:white;
	font-family: aktiv-grotesk, sans-serif;
    font-weight: 800;
    font-style: normal;

	z-index: 77776767679;


	}











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


h1 {
  font-size: 1.2em;
  
}


footer{
	background-color: white;

}


.hero-text{
  
  text-align: center;


  padding-left: 100px;
  padding-right: 100px;
  background-color: white;
  
  padding-bottom: 100px;
  margin-bottom: -50px;
  
}


 @media only screen and (max-width: 800px) {
 	body {
 		background-color: #333333;
 	}

 	

    .hero-text {
	
    	margin-top: -20px;


  }
}

  .title-text{
     
     

}


 @media only screen and (max-width: 800px) {
    .title-text {
	
    	
  }

}







h4 {
	text-align: center;
	font-size: 1em;
	font-family: Oxygen,san-serif;
		
	
}




.parallax-window {
	
    min-height: 400px;
    background: transparent;
    z-index: 1;
  
   
    background-repeat:   no-repeat;
    background-position: center center; 
}


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


}


 @media only screen and (max-width: 800px) {
    .slider figure img {
	width: 100%;
	height:200px;
	float: left;
	display: none;
  }
}



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

}













/* slider */

@-webkit-keyframes slider {
	0% {
		left:0%;
	}
	20% {
		left:0%;
	}
	23% {
		left:-100%;
	}
	40% {
		left:-105%;
	}
	42% {
		left:-250%;
	}
	60% {
		left:-225%;
	}
	65% {
		left:-390%;
	}
	80% {
		left:-400%;
	}
	82% {
		left:-550%;
	}
	98% {
		left:-550%;
	}
	100% {
		left:0%;
	}
}
@keyframes slider {
	0% {
		left:0%;
	}
	20% {
		left:0%;
	}
	23% {
		left:-100%;
	}
	40% {
		left:-105%;
	}
	42% {
		left:-250%;
	}
	60% {
		left:-255%;
	}
	65% {
		left:-390%;
	}
	80% {
		left:-400%;
	}
	82% {
		left:-550%;
	}
	98% {
		left:-550%;
	}
	100% {
		left:0%;
	}
}




.slider {
	width:100vw;
	
	display:block;
    overflow: hidden;
	white-space: nowrap;
	margin-top: -90px;
	
}

.slider figure img {
	width: auto;
	height: 80vh;
	float: left;
	background-color: white;
	
}

.slider figure {
	position: relative;
	width: 1200%;
	height: 400px;

	margin: 0;
	left: 0;
	text-align: left;
	font-size: 0;
	-webkit-animation: 20s slider infinite;
	        animation: 20s slider infinite;
}










.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: 800px) {
    .boximage {
	width:100%;
    }
}












.animated {-webkit-transition-duration: 2s;-o-transition-duration: 2s;transition-duration: 2s;
	}





.title {
	
	-webkit-transition-property: -webkit-transform;
	
	transition-property: -webkit-transform;
	
	-o-transition-property: transform;
	
	transition-property: transform;
	
	transition-property: transform, -webkit-transform;
	-webkit-transform-origin: top left;
	    -ms-transform-origin: top left;
	        transform-origin: top left;
	

	margin-top: -25px;
	padding-bottom: 0px;
	background-color: black;
	text-align: center;
	color: white;
	width: 100px;
	
	
	margin-left: 100px;
}





.title:hover{
	-webkit-transform:scale(1.4);
	    -ms-transform:scale(1.4);
	        transform:scale(1.4);

}

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


.subtext{
	background-color: black;
	text-align: center;
	color: white;
	width: 200px;
	

}



.boximage {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position:relative;
    color: white;


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

.container1 div, .container2 div{
	border: 1px #000000 solid;
	padding: 0px;
}

.container1 div img , .container2 div img {
	width: 100%;
	height:auto;
	display: flex; 
}

/*.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;
	
	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 {  

  
}

.header:hover{


}



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

*/




/* PORTFOLIO */

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



body, html{
  height:100%;

  margin:0;
  
  
}

.pimg1, .pimg2, .pimg3{
  position:relative;
  opacity:1;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment:scroll;
}

.pimg1{
  background-image:url('../img/&flix/&flix_06.jpg');
  min-height:100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.pimg2{
  background-image:url('../img/&flix/&flix_07.jpg');
  min-height:400px;
}

.pimg3{
  background-image:url('../img/&flix/&flix_08.jpg');
  min-height:400px;
}

.section{
  text-align:center;
  padding:50px 80px;
}

.section-light{
  background-color:#f4f4f4;
  color:#666;
}

.section-dark{
  background-color:#282e34;
  color:#ddd;
}

.ptext{
  position:absolute;
  top:50%;
  width:100%;
  text-align:center;
  color:#000;
  font-size:27px;
  letter-spacing:8px;
  text-transform:uppercase;
}

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

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

@media(max-width:800px){
  .pimg1, .pimg2, .pimg3{
    background-attachment:scroll;
  }
}







h5 {
	grid-area: txt;
}











.flexgrid {
	display: grid;
	



	
	grid-template-columns: 50% 50%;
	grid-template-rows:auto;
	grid-row-gap: 2rem;
	grid-column-gap: 1rem;
	
	justify-content: center;
	overflow: hidden;
	background-color: white;
	
}







.gridnest {
	
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 50% 50%;
	grid-gap: 1rem;
	grid-row-gap:1rem;
	height: auto;

}	



@media (max-width: 800px) {
	.flexgrid {
		
		
		grid-template-columns:1fr;
		grid-template-rows: auto;
		margin:40em;
		width: 100%;
		height: auto;
		position:relative;

	}





.gridnest img {

	
	object-fit: cover;
	display: block;
	height:150px;
	width: 100%;

	
	
}




	
	


	.card {
		max-width:100%;
		margin-bottom: 0%;



	}

}

}



.img-top {

}


.con_img img {
	background-color: white;
	grid-area: pix;
	height: 100%;
	width:100%;
	object-fit: cover;
	display: block;
}



.headerx {
	background-color: orange;
	grid-area: hed;

	
}


.jobtitle a {
	font-size: 2em;
	background-color:red;
	color: white;
	margin:10px;
}

.joblist {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	height: 100%
}

.worktitle{
	text-align: center;
	font-size: 1.5em;
	grid-area:wtitle;
	font-style: none;
}

.imgtitle{
	font-size: 2em;
	padding-bottom: 100px;
}





/*. image hover  */

.card {
        
        position: relative;
        display: inline-block;
        width: 100%;
        height: 300px;
        margin-bottom:10px ;
        	opacity: 1;
}


.card img {
	display: inline-block;
}



.card_nest{
        position: relative;
   display: inline-block;
        width: 100%;
      height:120px;   
       
   

   }   
       
        
    .card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 1;  
        max-height: 300px; 
      
    }
    .card:hover .img-top {
        display: inline; 
          
    }


     .card_nest .img-top_nest {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 1;  
        
        max-height: 120px; 
    }
    .card_nest:hover .img-top_nest {
        display: inline; 
         
    }




@media (max-width: 800px) {
	.card {
		
	}


	.card_nest {
	
	}

	.card_nest {
		height: 300px;
	}

	.card_nest .img-top_nest{
		min-height: 300px;
	}

	.con-img a {

	}

}





.other_work{
	text-align: center;
	width: 100vw;
	margin-top:5vh;
	margin-bottom: 7vh;
	background-color: red;

}




 @media only screen and (max-width: 800px) {
    .other_work {
    	visibility: hidden;
    	

	
  }
}


.other_work a{

 	width: 100vw;
  font-family: anisette-petite, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:1em;

  color:black;
  
	background-color: grey;
	
  text-align: center;
  text-decoration: none;




  

}

.other_work a:hover { 
    opacity: .8;
    font-size: .99em;


}







.socialMediaLinks{

	display: grid;

	
	grid-template-columns: 50px 50px auto;
	text-align: left;
	padding:50px;
	background-color: black;
	opacity: .3;

}

.socialMediaLinks a {
    font-size:15px;
    margin: 0 10px 0 0;
    color:white;
    opacity: 1;
    text-decoration: none;

    
}

.socialMediaLink a:class {
	
}




.socialMediaLinks a:hover { 
    opacity:1;
}


.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  color:white;
}


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

}
.slideanim.slide {visibility: visible; animation:slide .5s;}
.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%);
    } 
}


/* ---------------- Slide In Right ---------------- */
.slideanimright {
    visibility:hidden;
    visibility:visible\9;/*For old IE browsers IE6-8 */

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

}

@keyframes slideright {
    0% {
        opacity: 1;
        transform: translateX(50%);
    } 
    100% {
        opacity: 1;
        transform: translateX(0%);
    } 
}












.imagestrip {
	
	display: flex;
	flex-direction:  ;
	flex-wrap: nowrap;
	justify-content:center;
    
    background-color: transparent;
    padding-left: 0vh;
    padding-right: 0vh;
    padding-bottom: 0vh;
   
}








/* VIDEO */
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    background-color: transparent;
    margin-top: 0vh;
    background-color: white;

}
.video-responsive iframe{
    
    height:80%;
    width:80%;
    margin-left: 10vw;
    margin-right: auto;
    position:absolute;
  

   
}


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




	}
	}

.reel{
	text-align: center;
	margin-top: -3vh;
	margin-bottom: -10vh;



}

.reel a{

 
  font-family: anisette-petite, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:2em;

  color:black;
  
	
	height: 100px;
	width:200px;
  text-align: center;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;

  

}


/* STYLE */






















































/* ZDSTYLE */
 ---------------- 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;
	
	height: 50vh;
	padding:auto;


	
    background-attachment: scroll;
 


  	

   
    
}






@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-top: 0vh;
width: 100vw;
overflow: hidden;	

}



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


}



h3 {
  margin-top: 10px;


  text-align: center;
  font-family: Arial black, sans-serif;
   font-weight: 800;
   font-style: normal;
   font-size: 3em;
   letter-spacing: -3px;
}


h3, p{

	display: block;
	color: black;
	margin:auto;
	padding-left: 10vw;
	padding-right: 10vw;
	text-align: center;
	
padding-top: 3vw;
	
}



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

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


}







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;
		padding-bottom: 10vh;

	}
	}




.footer {
	background-color: white;

}




.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, .flexgrid {
	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: 2em;
	
}	


.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;



}








// 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
  }
}

/* ZDSTYLE */


































/* stylewhite */







body {
   margin:0 auto; 
    padding: 0 auto;
    background-color: white;
    
    width: 100vw;
}




a {
  text-decoration: none;



}

@media only screen and (min-width : 800px) {
  
.hamburger {
  display: none;
}

}

.logo{
  font-size: 2em;
  margin-left: 3vw;
   margin-top: 3vh;
  z-index: 10000;
  font-family: anisette-petite, sans-serif;
  font-weight: 800;

  font-style: normal;
 
  color: black;
  }

  .logo a{
    color:black;
    text-decoration: none;
      font-family: anisette-petite, sans-serif;
  }


.logo_work {

font-size: 2em;
  margin-left: 3vw;
   margin-top: 3vh;
  z-index: 10000;
  font-family: anisette-petite, sans-serif;
  font-weight: 800;

  font-style: normal;
 
  color: black;
  }

  .logo_work a{
    color:black;
    text-decoration: none;
      font-family: anisette-petite, sans-serif;
  }



.row_work{
 
  background-color: red;

}


.menuback {
  
  background-color: white;
  width: 100vw;
  opacity: .5;
  margin-top:-40px;
  height: 70px;
  position: fixed;
  z-index:10;
}


@media only screen and (max-width : 800px) {
  
   .menuback {
      display: none;
   }

   .logo {


   padding-left: 40vw;
  
   height: 100px;
   margin-left: 0vw;
   margin-top: 0vh;
     font-family: anisette-petite, sans-serif;

   }

}

.nav {
  width: 100vw;
  background-color: blue;
  text-align: center;
  padding-left: -556px;
}



ul {
 width: 100vw;
}










.container {
  position: absolute;
}

  .navbar-inner {
    position: fixed;
    width: 100vw;
    height: 10vw;
    padding-bottom: 5px;
    padding-top: 5px;
    display: block;
    z-index: 20;


  }



    .navbar .navbar-inner {
      text-align: center;
      position: relative;
      background-color: blue;
      color:red;
      width: 100vw;


      

      
     

      border-radius: 0;
      border: 0;

    }






.brand-a {
  font-size: 50px;
  padding-top: 50px;
  
  margin-left: 0px;
  text-decoration: none;
  position: relative;
  opacity: .5;
  display: block;
  z-index: 10;
  background-color: white;
  width: 100vw;
  text-align: center;



}





















/* navigation controls */

.navbar {
  background-color: transparent;
  color: white;
  padding-right: 50px;
  z-index: 111;
  height: 60px;
  width: 100vw;



  }

  .navbar div {
  display:none;
  height:220vh;
  color: white;



  }

  
  


  .navbar .brand,
  .navbar .toggle
   {
    display: inline-block;
    font-size: 2em;



  }






  .navbar .link {
    display: block;
    text-align: center;
    padding: 1em;
    text-decoration: none;
    
    font-size: 1em;
    padding-top:4vh;
    font-weight: bold;
    color: black;
    opacity: 1;

    

  } 


  .navbar .link:hover,
  .navbar .link:active {
    color: black;
    opacity: .5;
    
  }



  .navbar .brand {
    width: 10em;
    text-align: center;
    padding: 1em;
    color: white;
  }


  .navbar a {
    text-decoration: none;
  }

  .navbar .toggle {
    padding: 1em;
    color: grey;

  }

  @media screen and (min-width: 800px) {
            .navbar { 
              display: flex;
              position: fixed;
              justify-content: flex-end;


            }

            .navbar .left,
            .navbar .right {
              
              


            }

            .navbar div {
              

            }

/* text color etc */
            .navbar .link {
              width:auto;

              
              

            }
/* menu color etc */
            .navbar .right{
              display:flex;
              justify-content: flex-end;
              opacity: 1;
              color:black; 
              height: 50px;
        
            }
              


    



            .navbar .toggle {
              display: none;

            }


     }

      @media screen and (max-width: 800px) {
            .navbar.active .toggle{ 

            color: black;

            } 

            .navbar {
              height:0vh;
              opacity: .8;
              background-color: red;

            }


         







            .navbar .brand {
              text-align: left;

            }

            .navbar.active div {
              display: block;


            }

            .navbar .link {
              width:auto;

              

            }

            .navbar .toggle {
              margin-left: 80vw;
              position: absolute;


              ;

            }

        }


    






















/*


#myBtnContainer.myBtnClass {
  padding-top: 100px;
  position: relative;
  opacity: 1;
  display: block;
  background-color: white;
  opacity: 1;
  padding-left: 3vw;
 
}


#myBtnContainer.myBtnClass .btn{
 
 color:black;
 font-family: Montserrat, sans-serif;
 font-size: 1em;
 opacity: .3;
}

*/




@media(max-width: 800px){
#myBtnContainer.myBtnClass {
  justify-content: space-around;
}
}






a {


}




header nav a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 0;
  -webkit-transition: all .3s ease-in;

}

/* filter background*/
.wrap {

   overflow: hidden;
   padding-top: -20px;
   margin-top: -30px;

   background-color: #f7f7f7;
}
/* .box {
   float: left;
   position: relative;
   width: 25%;
   padding-bottom: 20%;
 }
*/
.column {

 
   float: left;
   position: relative;
   width: 25%;

}


.title {
  margin: 10px;
  color: grey;

}

 h2 {
  
  height:400px;
  width: 100vw;

  color: black;
  background-color: white;
 
  font-weight: 400;
  font-style: normal;
  font-size:1.2em;
  z-index: 999;
  padding-left: 50px;
  padding-top: 10px;
  padding-bottom: 20px;
  margin-top: -5px;
  margin-bottom: 5px;
  transform: translate(0px,-10px);



}






.content img {
   width: 100%;
   height: 100%;
    opacity: 1;
    object-fit: cover;
    display: block; 
    transform: translateY(0px);
    color: #f7f7f7;
    position: 0px;

   
   -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
   transition:         all 600ms cubic-bezier(0.19, 1, 0.22, 1);
   -moz-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
   -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);

}

.content:hover img {
   transform: translateY(180px);
   
  opacity: .3;
  
  background-color: #f7f7f7;

}




  
  .content:hover .titleBox {
    opacity: 1;
    transform: translateY(50px); 
  }


body.no-touch .content:hover .titleBox, body.touch .content.touchFocus .titleBox {
   margin-bottom: 15%;
   opacity: 1;
}










    * {
    box-sizing: border-box;
}



/* Center website */
.main {
    max-width: 1000px;
    margin: auto;
}

h1 {
    font-size: 50px;
    background-color: white;
    color: black;
    width:100vw;
   line-height: 1em;
    z-index: 100;
    
    
}

.row {
    


}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
	   
    
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.3%;
    height: 300px;
    display: none; /* Hide columns by default */

}


img {
  width: 100%;
   height: 100%;
    opacity: 1;
    object-fit: cover;
    display: block; 
}

/* Clear floats after rows */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */


/* The "show" class is added to the filtered elements */
.show {
    display: block;
    
}

/* Style the buttons */
.btn {

  border: none;
  border-radius:0;
  outline: none;
  padding: 12px 16px;
  background-color: white;

  cursor: pointer;
  font-family: Cinzel, serif;

  font-size: 1em;
  color: black;

}

/* Add a grey background color on mouse-over */
.btn:hover {
  
  color:black;
  opacity: .5;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #666;
   color: white;
}









@media only screen and (max-width : 1027px) and (min-width : 634px) {
   /* Tablet view: 2 tiles */
   .column {
      width: 50%;
      padding-bottom: 35%;

   }

   body {margin:0px;
   }

   .column {

}
}

@media only screen and (max-width : 800px) {
   /* Smartphone view: 1 tile */


   body {
    margin:0px;
    width: 100vw;
    height: 100vh;
  }



}



/* footer  */

.info {
  background-color: white;
  
  padding-top: 5vh;
  display:block;
  height: 150px;
  justify-content: flex-end;
  flex-direction: row;
 


}


@media only screen and (max-width: 800){
  footer {
    background-color: white;
  }
}




#backtop {
          position: fixed;
            left:auto;right: 20px;top:auto;bottom: 20px;
            outline: none;
            overflow:hidden;
            color:#fff;
            text-align:center;
            background-color:transparent;
            height:20px;
            width:20px;
            line-height:20px;
            font-size:14px;
            border-radius:0px;
            cursor:pointer;
            transition:all 0.3s linear;
            z-index:9999999;

            opacity:1;
            display:none;
        }
        #backtop:hover {
            background-color:black;

        }
        #backtop.mcOut {
            opacity:0;

        }





.footer_light{
  font-size: 1em;
  font-family: Montserrat, sans-serif;
  display: grid;
  text-decoration: none;

  color: white;
  background-color: red;
  grid-template-columns:20% 20% auto;
  grid-template-rows:25px;
  grid-gap: .5em;
  padding-left:50px;
  background-color: white;
  text-align: right;
  padding-right: 50px;
  padding-top: 100px;
  padding-bottom: 50px;
}







.content img {
   width: 100%;
   height: 100%;
    opacity: 1;
    object-fit: cover;
    display: block; 
    transform: translateY(0px);
    color: #f7f7f7;
    position: 0px;

   
   -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
   transition:         all 600ms cubic-bezier(0.19, 1, 0.22, 1);
   -moz-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
   -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);

}

.content:hover img {
   transform: translateY(180px);
   
  opacity: .3;
  
  background-color: #f7f7f7;

}




  
  .content:hover .titleBox {
    opacity: 1;
    transform: translateY(50px); 
  }


body.no-touch .content:hover .titleBox, body.touch .content.touchFocus .titleBox {
   margin-bottom: 15%;
   opacity: 1;
}










    * {
    box-sizing: border-box;
}





   <style>
         table, th, td {
            border: 700px solid black;
         }
      </style>



.flex-container {
  display: flex;
  justify-content: center;
}




.flextext {
	color: white;
	text-align: left;
	padding: 10vh;
}


.flextext2 {
	color: white;
	text-align: left;
	margin: 5vh;
	
}




.flextext3 {
	color: white;
	font-family: Arial, sans-serif;

margin: 5vh;
}


.fleximage {
	height: auto;
	width: auto; 
	margin: 5vh;
	width: 300vw;
}



.fleximage2 {
display: flex;
width: 500vw;
margin: 5vh;


}

.fleximage3 {
display: flex;
width: 80vw;
margin: 3vh;


}


/* stylewhite */



.christies-grid{
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-rows:auto;
	grid-row-gap: 1rem;
	grid-column-gap: 1rem;
	width:100%;
	height:500px;
	
	justify-content: center;
	overflow: hidden;
	background-color: white;
	
}

@media only screen and (max-width : 3000px) and (min-width : 2000px){
  .christies-grid{
 
 
	padding-left:100px;
	padding-right:100px;
	width: 100%;
	height:80vh;
  }
}


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

.christiescard {
	height: 500px;
}


  .christies-grid{
 
    grid-template-columns: 100%;
	grid-template-rows:auto;
	width: 100%;
	height:200vh;
  }
}

.christies-grid2x{
	display: grid;
	grid-template-columns:50% 50%;
	grid-template-rows:100%;

	
	width:100%;
	height:100vh;
	
	justify-content: center;
	overflow: hidden;
	background-color: white;
	opacity:1;

		
}



@media only screen and (max-width: 800px){
  .christies-grid2x{
 
	padding-left: 0vw;
	padding-right: 0vw;
	grid-template-columns:100%;
	grid-template-rows: 50% 50%;
	width:100vw;
	

	
  }
}




.christies-grid3x{
	display: grid;
		grid-template-columns:25% 25% 25% 25%;
	grid-template-rows:25% 25% 25% 25%;
	
	width:100%;
	
	
	justify-content: center;
	overflow: hidden;
	background-color: white;
	opacity:1;
	overflow: hidden;


		
}



@media only screen and (max-width: 800px){
  .christies-grid3x{
 
	padding-left: 0vw;
	padding-right: 0vw;
	grid-template-columns:100%;
	grid-template-rows: auto;
	
	
  }
}


@media only screen and (max-width : 3000px) and (min-width : 2000px){
  .christies-grid3x{
 
	grid-template-columns:25% 25% 25% 25%;
	grid-template-rows:25% 25% 25% 25%;
	padding-left: 100px;
	padding-right: 100px;
	grid-column-gap: 1em;
	grid-row-gap: 1em;
	
	
  }
}

@media only screen and (max-width : 1300px) and (min-width : 801px){
  .christies-grid3x{
 	
	grid-template-columns:50% 50%;
	grid-template-rows: 20% 20% 20% 20% 20% 20% 20%;
	width: 100%;
	
	
  }
}


.christies-text {
	background-color: white;
	
	position: relative;
	padding-left: 50px;
}

.christiescard{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;

	
	align-items: center;
	justify-content: flex-start;

}

.christiescard a{
	position: absolute;
	
	color:black;
	font-size: 2vw;
	z-index: 1;
	
	height: 100%;
	width:calc(100%/4);
	line-height:.8em;
	padding-left: 50px;
	padding-right: 300px;
	padding-top: 5vh;
	padding-bottom: calc(100% / 50%)
		
}

@media only screen and (max-width : 1300px) and (min-width : 801px){
.christiescard {
	
}


  .christiescard a{

 	width:50%;
	padding-top: 100px;
	font-size: 3vw;
	padding-left: 25px;

  }
}

@media only screen and (max-width : 800px){
  .christiescard a{

 	width:100%;
	padding-top: 100px;
	font-size: 7vw;
	padding-left: 50px;

  }
}



.christiescardb {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;

	
	align-items: center;
	justify-content: flex-start;
}



.christiescardb a{
	position: absolute;
	
	color:black;
	font-size: 1.5vw;
	z-index: 1;
	color:white;
	
	height: 100%;
	width:calc(100%/2);
	line-height:.8em;
	padding-left: 100px;
	padding-right: 200px;
	padding-top:calc(10%/2);
	padding-bottom: calc(100% / 50%)
		
}



@media only screen and (max-width : 3000px) and (min-width : 1300px){

/* koji big */
.gridimage01 {
	grid-column: 1/3;
	grid-row:-5/-4;
}


/* koji big */
.gridimage01A {
	grid-column: 1/3;
	grid-row:-4/-3;
}

/* super white 01 */
.gridimage02 {
	grid-column: 3/4;
	grid-row: -6/-5;
}

.gridimage03 {
	grid-column: 1/2;
	grid-row: -5/1;
}

.gridimage04 {
	grid-column: 4/5;
	grid-row: -6/-4;
}

.gridimage05 {
	grid-column: 2/3;
	grid-row: -6/-5;
}
/* david lewis */
.gridimage05A {
	grid-column: 3/4;
	grid-row: -5/-4;
}


/* super white 02 */
.gridimage06 {
	grid-column: 1/2;
	grid-row: -6/-5;
}

/* michael findlay */
.gridimage07 {
	grid-column: 4/5;
	grid-row: -5/-4;
}

/* thomas kaplan */
.gridimage08 {
	grid-column: 3/4;
	grid-row: -4/-3;
}


/* mark potter */
.gridimage09 {
	grid-column: 4/5;
	grid-row: -4/-=3;
}

.gridimage10 {
	grid-column: 1/2;
	grid-row: -1/0;
}

.gridimage11 {
	grid-column: 2/3;
	grid-row: -1/0;
}
/* jussi */
.gridimage12 {
	grid-column: 3/4;
	grid-row: -3/--2;
}
/* david chau*/
.gridimage13 {
	grid-column: 4/5;
	grid-row: -3/-2;
}


/* jacob */
.gridimage13A {
	grid-column: 1/2;
	grid-row: -3/-2;
}



/* touria */
.gridimage18 {
	grid-column: 2/3;
	grid-row: -3/-2;
}
}



@media only screen and (max-width: 1300px) and (min-width: 801px){
.christies-grid3x {
	grid-template-rows:auto;
}

	.gridimage01 {
		display:none;
	}

	.gridimage01A {
		display:none;
	}

	.gridimage06 {
		display:none;
	}

	.gridimage02 {
		display:none;
	}



}


.christiesimgbak{
	display:none;
}

.christiescard:hover .christiesimgtop{
	display: none;
}

.christiescard:hover .christiesimgbak{
	display: inline;
}


@media only screen and (max-width: 800px){
.christies-grid3x 


	.gridimage01 {
		display:none;
	}

	.gridimage01A {
		display:none;
	}

	.gridimage06 {
		display:none;
	}

	.gridimage02 {
		display:none;
	}


}