@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

body{
	margin: 0;
	padding: 0;	
	width:100%;
	height:100%;
	overflow:hidden;
	font-family: 'Open Sans', sans-serif;
}
a{
	text-decoration:none;	
}
section{
	width: 100vw;
	height:100vh;
	box-sizing:border-box;
	position: relative;

}

/****/
#loading_holder{
	position:absolute;
	width: 75px;
	bottom: 10px;
	left: 0;
	right: 0;
	margin:auto;	
	z-index:5;
	display: none;
}
#loading_holder img{
	width: 100%;
	height:auto;	
}
#hip_blanket{
	position:absolute;
	background-color:rgba(255,255,255,0.25);	
	z-index: 5;
	width:100%;
	height:100%;
}
#hip_wrapper{
	position:absolute;
	box-sizing:border-box;
	border-radius: 5px;
	background-color:white;	
	z-index: 6;
	width:60%;
	max-width: 700px;
	height:auto;
	left:0;
	right:0;
	margin:auto;
	font-size:12px;
	color: black;
	text-align:center;
	top: 50%;
  	transform: translateY(-50%);	
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);	
	padding-bottom: 15px;
}
#hip_wrapper button{
	position:absolute;
	top:5px;
	right:5px;
}
#hip_wrapper img{
	margin-top: 15px;
	width:auto;
	height:200px;
}
.desc_hip{
	text-align:left;
	padding: 15px;
}
.btn_hip{
	box-sizing:border-box;
	border: 2px solid;
	border-radius: 5px;	
	width: 150px;
	margin:auto;
	margin-top:15px;
}
.btn_hip a{
	box-sizing:border-box;
	color: black;
	display:block;
	padding: 10px 0;		
	width: 100%;
}
.btn_hip a:hover{
	background-color:rgba(255,100,0,0.25);
	
}

/**************/

.slot{
	position:absolute;
	width:33.33%;
	height: 100%;
	box-sizing:border-box;
	background-size:cover;
	background-position:center;
	z-index: 2;
}
#dfc_wrapper{
	background-image:url(../img/banner.jpg);	
	margin-top:-100%;
	left:0;
	border-right:1px solid white;
}
#pg_wrapper{
	background-image:url(../img/bnr2.png);
	margin-top:200%;
	left: 33.33%;
	border-right:1px solid white;
	border-left:1px solid white;
}
#mcba_wrapper{
	background-image:url(../img/logo.png);
	margin-top:-100%;
	left: 66.66%;
	border-left:1px solid white;
}
.blanket{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.50);
}
.container{
	color: rgba(255,255,255,0.50);
	box-sizing:border-box;
	border: 2px solid rgba(255,255,255,0.50);
	border-radius: 5px;
	position: relative;
	display:table;
	padding: 25px 50px;
	margin: auto;
	text-align:center;
  	top: 50%;
  	transform: translateY(-50%);	
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);	
	cursor: pointer;
}
.container:hover{
	color: white !important;
	border: 2px solid white !important;
}
.container:active{
	border: 2px solid rgba(255,255,255,0.50) !important;
	background-color: rgba(0,0,15,0.75) !important;
}
.title{
	display:table-cell;
	vertical-align:middle;
	font-size:36px;
	font-weight:bold;
}
.title span{
	font-size:26px;
	font-weight:300;
}
.close_label{
	position:absolute;
	right: 10px;
	bottom: 5px;	
	font-size:12px;
	font-weight:300;
	opacity:0;
}
/********************/
#content{
	box-sizing:border-box;
	background-size:cover;
	background-position:center;
	width:100%;
	height:100%;
	z-index:1;
	position:relative;
}
#content_blanket{
	width:100%;
	height:100%;
	background: -webkit-linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0)); /* Standard syntax */
}
#dfc_content{
	width: 66.66%;
	right: 0;
	opacity:0;	
}
#pg1_content{
	width: 33.33%;
	left:0;
	opacity:0;
}
#pg2_content{
	width: 33.33%;
	right:0;	
	opacity:0;	
}
#mcba_content{
	width: 66.66%;
	left:0;
	opacity:0;
}
.content_container{
	position:absolute;
	box-sizing:border-box;
	height:100%;
}
.chosen_container{
	color: white;
	box-sizing:border-box;
	width: 90%;
	max-height:100%;
	margin: auto;
	text-align:center;
	position: relative;
  	top: 50%;
  	transform: translateY(-50%);	
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);	
	z-index: 2;
	overflow:auto;
}
.chosen_title{
	text-align:left;
	box-sizing:border-box;
	max-height:100%;
}
.btn{
	box-sizing:border-box;
	border: 2px solid white;
	border-radius: 5px;	
	width: 150px;
	margin:auto;
	margin-top: 15px;
}
.btn a{
	box-sizing:border-box;
	color: white;
	display:block;
	padding: 10px 0;		
	width: 100%;
}
.btn a:hover{
	background-color:rgba(255,100,0,0.15);
	
}
/**********/
/* MOBILE*/

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

#hip_wrapper{
	height: 70%;
	max-height: 400px;
	overflow:auto;
}
#hip_wrapper img{
	height:50px;
	margin-top: 5px;
}
.desc_hip{
}
.btn_hip{
	
}

/**************/
.slot{
	position:absolute;
	width:100%;
	height: 33.33%;
	box-sizing:border-box;
	background-size:cover;
	background-position:center;
	z-index: 2;
}
#dfc_wrapper{
	background-image:url(../img/banner.jpg);	
	margin-top:auto;
	margin-left:-100%;
	top:0;
	border-right:none;
	border-bottom:1px solid white;
}
#pg_wrapper{
	background-image:url(../img/bnr2.png);
	margin-top:auto;
	margin-left:200%;
	left:0;
	top: 33.33%;
	border:none;
	border-top:1px solid white;
	border-bottom:1px solid white;
}
#mcba_wrapper{
	background-image:url(../img/logo.png);
	margin-top:auto;
	margin-left:-100%;
	left:0;
	top: 66.66%;
	border-left:none;
	border-top:1px solid white;
}
.container{
	padding: 15px 30px;
	color: white;
}
.title{
	vertical-align:middle;
	font-size:26px;
	font-weight:normal;
}
.close_label{
	right: 8px;
	bottom: 3px;	
	font-size:8px;
}

/***********************************/
.content_container{
	position:absolute;
	box-sizing:border-box;
	height:33.33%;
	font-size:12px;
}
#dfc_content{
	width: 100%;
	right: 0;
	top: 33.33%;
	height: 66.66%;
	opacity:0;	
}
#pg1_content{
	width: 100%;
	left:0;
	top: 0;
	opacity:0;
}
#pg2_content{
	width: 100%;
	right:0;
	top: 66.66%;	
	opacity:0;	
}
#mcba_content{
	width: 100%;
	left:0;
	top: 0;
	opacity:0;
	height: 66.66%;
}
.chosen_container{
	color: white;
	padding:5px 10px;
	width: 90%;
	max-height:90%;
}



}