@font-face {
    font-family: LE_SILENCE_DES_CAFARDS;
    src: url('../fonts/LE_SILENCE_DES_CAFARDS.ttf');
}

@font-face {
    font-family: cabin-regular;
    src: url('../fonts/Cabin-Regular.ttf');
}

@font-face {
    font-family: cabin-italic;
    src: url('../fonts/Cabin-Italic.ttf');
}

@font-face {
    font-family: cabin-bold;
    src: url('../fonts/Cabin-Bold.ttf');
}

@font-face {
    font-family: cabin-bold-italic;
    src: url('../fonts/Cabin-BoldItalic.ttf');
}

@keyframes colorFade {
    from {background-color: #06364B;}
    to {background-color: #0E7DAD;}
}

@keyframes colorOriginal {
    from {background-color: #0E7DAD;}
    to {background-color: #06364B;}    
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar:hover{
    cursor:pointer;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(76, 75, 73, 1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(76, 75, 73, 1);
}


.tab{
    position:absolute;
    width:97%;
    height:83%;
    border-radius:15px;
    display:none;
    overflow:hidden;
}

#tab_1{
	display:block;
	background:url("../img/bg_1.png");
	background-size:cover;
}

#tab_2, #tab_4{
    background:url("../img/bg_2.png"), url('../img/bg_1.png');
   	background-position:50% 50%;
   	background-repeat:no-repeat;
   	background-size:90%, cover;
}

#tab_3, #tab_5{
	background:url("../img/bg_1.png");
	background-size:cover;
}

.tab_nav{
	position:absolute;
	bottom:0;
	width:16%;
	height:9.5%;
	left: 42%;
	z-index:1;
}

.tab_nav div{
	display:inline-block;
	float:left;
	height:100%;
}

.custom_btn{
    width:33%;
    height:100%;
    background: #64b238;
    color:#FFF;
    font-size:3em;
    text-align:center;
    border-bottom:solid 6px #006633;
    bottom:0;
    position:absolute;
}

.custom_btn:hover{
    cursor:pointer;
    background:#79C84F;
}

.custom_btn:active{
    transform:scaleY(0.8);
    background:#006633;
}

.popup{
	width:97%;
	height:83%;
	border-radius:15px;
	position:absolute;
	background-color:rgba(255, 255, 255, 0.6);
	z-index:30;
	display:none;
}

.btn_close{
	position:absolute;
	width: 4%;
	top: 1%;
	right: 1%;
	z-index:7;
}

.btn_close:hover{
	cursor:pointer;
	transform:scale(1.1);
	opacity:0.85;
}

.btn_close:active{
	transform:scale(0.95);
	opacity:1;
}

.btn_previous{
	border-radius:10px 0 0 0;
	left:1%;
}

.btn_home{
	border-radius:0;
	right:33%;
}

.btn_next{
	border-radius:0px 10px 0 0;
	right:0;
}


.btn_play{
	position:absolute;
	width:15%;
	left:42.5%;
	top:50%;
	transform:translateY(-50%);
}

.btn_play:hover{
	transform:translateY(-50%) scale(1.1);
	cursor:pointer;
	opacity:0.85;	
}

.btn_play:active{
	transform:translateY(-50%) scale(0.95);
	opacity:1;
}

.info{
	position:absolute;
	width:60%;
	height:87%;
	background:url("../img/illustration_1.png");
	background-size:100%;
	background-repeat:no-repeat;
	background-position:50% 50%;
	left:20%;
	top:1%;
}

.info > div{
	position:absolute;
	width:100%;
	height:44%;
	bottom:0;
}

.info > div > p{
	margin:0;
	font-family:'cabin-regular';
	font-size:3em;
	color:white;
	text-align:justify;
	padding:0 3%;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.info > div > p > b{
	color:#0986B2;
}

.video_info{
	position:absolute;
	width:64%;
	background:url("../img/video_info_bg.png");
	background-size:80% 72%;
	background-position: 50% 0;
	background-repeat:no-repeat;
	left:18%;
	height: 55%;
	z-index:4;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
}

.video_info > div{
	position:absolute;
	width:100%;
	height:31%;
	bottom:0;
	background:url("../img/video_info.png");
	background-size:100%;
	background-position:100% 100%;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
}

.video_info > div:hover{
	cursor:pointer;
	transform:scale(1.05);
}

.video_info > div:active{
	transition:none;
	-webkit-transition:none;
	-moz-transition:none;
	-ms-transition:none;
	transform:scale(1);

}

.video_info > div > p{
	margin:0;
	color:white;
	font-family:'cabin-regular';
	font-size:1.7em;
	text-align:center;
	padding:0 2.2%;
	position:relative;
	top:25%;
}

.video video{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	display:none;
	border:none;
}

.video{
	position:absolute;
	width:59.3%;
	height:73.3%;
	left:20.7%;
	top:8.2%;
	background:#000000;
}

.header{
	width: 80%;
	height: 7%;
	background:#69359B;
	margin: 1% 0 0 10%;
	border-radius:10px;
}

.header p{
	margin:0;
	color:white;
	font-family:'cabin-regular';
	font-size:2em;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.notepad{
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGQA\
    gMAAAASNuJIAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpg\
    AAA6mAAAF3CculE8AAAADFBMVEX///8tQV0tQV3////Lf7vBAAAAAnRSTlMAwO33D4gAAAABYkt\
    HRACIBR1IAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFElEQVQoz2NgGAWjYMQCB4YG/BAAi2AIQX\
    Wxvm8AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMDQtMjhUMTc6MDU6MjUrMDI6MDDD9mZeAAAAJ\
    XRFWHRkYXRlOm1vZGlmeQAyMDE1LTA0LTI4VDE3OjA1OjI1KzAyOjAwsqve4gAAABl0RVh0U29m\
    dHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=');
    background-size:100% 15%;
     background-color:#FFFFFF;
     background-position:0% 17%;
     border:none;    
     padding: 2px 10px;
     border:none;
     resize:none;
     width:93%;     
	height: 35%;
     margin-left:3%;     
     margin-top:0.8%;
     font-family:'cabin-regular';
     font-size:1.56em;
     line-height:1.4em;
     overflow:hidden;
     text-align:justify;
}

#tab_1 .btn_next{
	border-radius:10px 10px 0 0;
}

#tab_5 .btn_home{
	border-radius:0 10px 0 0;
}

#tab_2 .info, #tab_3 .info{
	z-index:20;
	left:1%;
	width: 21%;
	top: 38%;
}

#tab_2 .info div, #tab_3 .info div{
	height: 81%;
}

#tab_2 .info:hover, #tab_3 .info:hover{
	cursor:pointer;
	opacity:0.85;
	transform:scale(1.05);
}

#tab_2 .info:active, #tab_3 .info:active{
	opacity:1;
	transform:scale(1);
}

#tab_2 .info p, #tab_3 .info p{
	text-align:center;
}