.footer_text{
	color: black;
}
#homepage-nav{
	width: 100%;
	height: 100%;
	position: relative;
	background: url('../../images/showreel-bg.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
.logo{
	width:286px;
	height:142px;
	position: absolute;
	top: -16px;
	left: 50%;
	margin-left: -116px;
	background: url(../../images/logo_contact_us.png);
}
.white_div{
	width: 90%;
    height: 75%;
    background: rgba(255,255,255,0.7);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    top: 12.5%;
    left: 50%;
    margin-left: -45%;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
.white_div_mobile{
	width: 90%;
    height: 80%;
    background: rgba(255,255,255,0.7);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    top: 12.5%;
    left: 50%;
    margin-left: -45%;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
.container_hidden_scroll{
	width: 100%;
	height: 100%;
	overflow: auto;
    padding-right: 15px;
    position: absolute;
    left: 0;
    top: 0;
}
.left_top_white{
	width: 60px;
	height: 60px;
	position: fixed;
	top:Calc(12.5% + 10px);
	left:Calc(5% + 5px);
	background: url(../../images/left_top_white.png);
	z-index: 50;
}
.right_top_white{
	width: 60px;
	height: 60px;
	position: fixed;
	top:Calc(12.5% + 10px);
	right:Calc(5% + 5px);
	background: url(../../images/right_top_white.png);
	z-index: 50;
}
.left_bottom_white{
	width: 60px;
	height: 60px;
	position: fixed;
	bottom:Calc(12.5% + 10px);
	left:Calc(5% + 5px);
	background: url(../../images/left_bottom_white.png);
	z-index: 50;
}
.right_bottom_white{
	width: 60px;
	height: 60px;
	position: fixed;
	bottom:Calc(12.5% + 10px);
	right:Calc(5% + 5px);
	background: url(../../images/right_bottom_white.png);
	z-index: 50;
}
.content_of_white{
	width: 1090px;
	height: 522px;
	position: absolute;
	right: 86px;
	top: 50%;
	margin-top: -261px;
}
.content_of_white_mobile{
	width: 1090px;
	height: 522px;
	position: absolute;
	right: 86px;
	top: 50%;
	margin-top: -261px;
}
.showreel_container{
	width: 400px;
	height: 225px;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -112.5px;
}
.showreel_words{
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	font: 700 50px 'Oswald', sans-serif;
	color: black;
}
.black_line{
	width: 73px;
	height: 6px;
	background: black;
	position: absolute;
	left: 50%;
	top: 82px;
	margin-left: -36.5px;
}
.show_more_showreel{
	width: 95px;
	height: 45px;
	position: absolute;
	left: 445px;
	bottom: 28px;
	z-index: 20;
    cursor: pointer;
}
.show_more_text{
	font: 700 20px 'Oswald', sans-serif;
	position: absolute;
	width: 100%;
	text-align: center;
	overflow: hidden;
	color: black;
	top: 0;
	left: 0;
}
.show_more_text:hover{
	color: #fac327;
}
.arrow_down_black{
	width: 22px;
	height: 10px;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -11px;
	background: url(../../images/arrow_down_black.png);
	-webkit-transition: transform 0.5s; /* Safari */
	-ms-transition: transform 0.5s; /* Safari */
	-moz-transition: transform 0.5s; /* Safari */
	-o-transition: transform 0.5s; /* Safari */
    transition: transform 0.5s;
}
.rotate_arrow{
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    -moz-transform: rotate(180deg); /* Safari */
    -o-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg); /* Standard syntax */
}
.backTop{
	width: 100%;
	height: 30px;
	margin-bottom: 30px;
	font: 700 22px 'Oswald', sans-serif;
	color: black;
	text-align: center;
	cursor: pointer;
}
.backTop:hover{
	color: #fac327;
}
.video_picture{
	width: 678px;
	height: 522px;
	position: absolute;
	right: 0;
	top: 0;
	background: url(../../images/showre_picture.png);
	background-size: cover;
	z-index: 2;
	cursor: pointer;
	-webkit-box-shadow: 12px -2px 19px -6px rgba(0,0,0,0.75);
	-moz-box-shadow: 12px -2px 19px -6px rgba(0,0,0,0.75);
	box-shadow: 12px -2px 19px -6px rgba(0,0,0,0.75);
}
.video_icon{
	width: 34px;
	height: 34px;
	background: url(../../images/showre_icon.png);
	position: absolute;
	top: 15px;
	left: 20px;
}
.video_picture:hover > .video_icon{
	background: url(../../images/showre_icon_red.png);
}
.video_grey_shadow{
	width: 678px;
	height: 522px;
	background-color: #2e2e2e;
	position: absolute;
	right: -7px;
	bottom: -11px;
	z-index: 1;
}
.video_grey_shadow_mobile{
	width: 678px;
	height: 522px;
	background-color: #2e2e2e;
	position: absolute;
	right: -7px;
	bottom: -11px;
	z-index: 1;
}
.more_videos{
	width: 100%;
/*	height: 100%;*/
	position: absolute;
	top: 100%;
	left: 0;
	margin-top : 50px;
}
.middle_container_videos{
	width: 1630px;
	overflow: hidden;
	margin: auto;
}
.one_video{
	background: transparent;
	cursor: pointer;
	width: 300px;
	height: 237px;
	float: left;
	position: relative;
	margin: 5px 13px 21px 13px;
}
.one_video_image{
	width: 100%;
	height: 200px;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}
.one_video_title{
	left: 0px;
	bottom: 0px;
	position: absolute;
	color: black;
	font: 700 20px 'Oswald', sans-serif;
}
.one_video_icon{
	width: 34px;
	height: 34px;
	background: url(../../images/showre_icon.png);
	position: absolute;
	top: 15px;
	left: 20px;
	z-index: 2;
}
.one_video:hover > .one_video_icon{
	background: url(../../images/showre_icon_red.png);
}


@media screen and (max-width: 1815px){
	.middle_container_videos{
		width: 1305px;
	}
}


@media screen and (max-width: 1485px){
	.middle_container_videos{
		width: 980px;
	}
}



@media screen and (max-width: 1536px) and (max-height: 732px){
	.content_of_white{
		/*height: 450px;
		margin-top: -225px;*/
		height: 420px;
		margin-top: -225px;
	}
	.content_of_white_mobile{
		height: 450px;
		margin-top: -225px;
	}
	.video_picture{
		/*height: 450px;*/
		height: 420px;
	}
	.video_grey_shadow{
		/*height: 450px;*/
		height: 420px;
	}
	.video_grey_shadow_mobile{
		height: 450px;
	}
	.show_more_showreel{
		left: 370px;
	}
}









@media screen and (max-width: 1280px) and (max-height: 800px){
	.content_of_white{
		width: 960px;
		height: 410px;
		margin-top: -205px;
		right: 80px;
	}
	.content_of_white_mobile{
		width: 960px;
		height: 410px;
		margin-top: -205px;
		right: 80px;
	}
	.video_picture {
    	width: 540px;
    	height: 410px;
    }
    .video_grey_shadow {
    	width: 540px;
    	height: 410px;
    }
    .video_grey_shadow_mobile {
    	width: 540px;
    	height: 410px;
    }
    .show_more_showreel{
    	left: 270px;
    }
}




















/*tablet portrait*/
@media screen and (max-width: 1030px) and (max-height: 1030px){
	.content_of_white_mobile{
		width: 100%;
		left: auto;
		right: 50%;
    	margin-right: -50%;
    	height: 400px;
    	margin-top: -200px;
	}
	.content_of_white{
		width: 100%;
		left: auto;
		right: 50%;
    	margin-right: -50%;
    	height: 400px;
    	margin-top: -200px;
	}
	.video_container{
		width: 100%;
	}
	.video_picture {
	    width: 560px;
	    height: 400px;
	    right: 50%;
	    margin-right: -255px;
	}
	.video_grey_shadow {
	    width: 560px;
	    height: 400px;
	    right: 50%;
	    margin-right: -262px;
	}
	.video_grey_shadow_mobile {
	    width: 560px;
	    height: 400px;
	    right: 50%;
	    margin-right: -262px;
	}
	.left_bottom_white{
		bottom:Calc(7.5% + 10px);
	}
	.right_bottom_white{
		bottom:Calc(7.5% + 10px);
	}
	.show_more_showreel {
	    left: 50%;
	    margin-left: -42.5px;
	}
	.showreel_container {
	    width: 400px;
	    height: 225px;
	    left: 50%;
	    margin-left: -200px;
	    top: -143px;
	    margin-top: 0; 
	}
	.middle_container_videos {
    	width: 665px;
	}
	.footer_text{
		bottom: 16px;
		color: white;
	}
}










/*tablet landscape*/
@media screen and (max-width: 1030px) and (max-height: 790px){
	.content_of_white{
		margin-top: -235px;
	}
	.content_of_white_mobile{
		margin-top: -235px;
	}
	.showreel_container{
		width: 220px;
		left: 55px;
	    margin-left: 0px; 
	    top: 157px;
	    margin-top: 0;
	}
	.video_picture{
		right: 50px;
		margin-right: 0px;
	}
	.video_grey_shadow{
		right: 43px;
		margin-right: 0px;
	}
	.video_grey_shadow_mobile{
		right: 43px;
		margin-right: 0px;
	}
	.footer_text{
		bottom: 10px;
		color: black;
	}
}












@media screen and (max-width: 600px) and (max-height: 750px){
	.logo {
	    width: 200px;
	    height: 100px;
	    top: -20px;
	    left: 50%;
	    margin-left: -100px;
	    background: url(../../images/logo_contact_us.png);
	    background-size: 100% 100%;
	}
	.menu_icon{
		width: 62px;
	    height: 62px;
	    background: url(../../images/menu_icon.png);
	    background-size: 200% 100%;
	}
/*.white_div {
	    width: 96%;
	    height: 670px;
	    top: 13.5%;
	    left: 50%;
	    margin-left: -48%;
	}
	.content_of_white{
		height: 670px;
		top: 50%;
    	margin-top: -335px;
    	right: auto;
    	margin-right: 0;
	}
	.white_div_mobile {
	    width: 96%;
	    height: 670px;
	    top: 13.5%;
	    left: 50%;
	    margin-left: -48%;
	}
	.content_of_white_mobile{
		height: 670px;
		top: 50%;
    	margin-top: -335px;
    	right: auto;
    	margin-right: 0;
	}*/
	.content_of_white{
		top: 50%;
		margin-top: -200px;
	}
	.content_of_white_mobile{
		top: 50%;
		margin-top: -200px;
	}
	.menu_icon{
		position: absolute;
	}
	.footer_text{
		color: white;
		text-align: center;
		right: 50%;
	    margin-right: -119px;
	    bottom: 8px;
	}
	.showreel_container{
		height: 60px;
		top: 5px;
		left: 50%;
    	margin-left: -110px;
	}
	.showreel_words{
		font: 700 30px 'Oswald', sans-serif;
	}
	.black_line{
		height: 2px;
		top: 48px;
	}
	.video_picture {
	    width: 300px;
	    height: 250px;
	    right: 50%;
	    margin-right: -143px;
	    top: 50%;
	    margin-top: -125px;
	}
	.video_grey_shadow_mobile {
	    width: 300px;
	    height: 250px;
	    right: 50%;
	    margin-right: -150px;
	    top: 50%;
	    margin-top: -114px;
	    left: auto;
	}
	.video_grey_shadow {
	    width: 300px;
	    height: 250px;
	    right: 50%;
	    margin-right: -150px;
	    top: 50%;
	    margin-top: -114px;
	    left: auto;
	}
	.show_more_showreel{
		bottom: 18px;
	}
	.middle_container_videos{
		width: 343px;
	}
	.white_div{
		top: 15.5%;
	}
	.white_div_mobile{
		top: 11.5%;
	}
	.left_top_white{
		top:Calc(11.5% + 10px);
	}
	.right_top_white{
		top:Calc(11.5% + 10px);
	}
	.left_bottom_white{
		bottom:Calc(8.5% + 10px);
	}
	.right_bottom_white{
		bottom:Calc(8.5% + 10px);
	}
}