@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-bold;
    src: url('../fonts/Cabin-Bold.ttf');
}

*{
	margin:0;
	padding:0;
}

p, h3, h2, h1{
	font-family:'cabin-regular';
}

::-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);
}

.ggb_contenidoInterno{
	background-size:cover;
}

.tab{
    position:absolute;
    width:97%;
    height:83%;
    border-radius:15px;
    background-size:cover !important;
    display:none;
}

#tab_1{
	background:url("../img/bg_5_1.png");
	display:block;
}

#tab_2{
	background:url("../img/bg_5_2.png");
}

#tab_3{
	background:url("../img/bg_5_3.png");
}

#tab_4{
	background:url("../img/bg_5_4.png");
}

#tab_5{
	background:url("../img/bg_5_5.png");
}

#tab_6{
	background:url("../img/bg_5_6.png");
}

#tab_7{
	background:url("../img/bg_5_7.png");
}

.btn_tab{
	position:absolute;
	width:5%;
}

.btn_tab:hover{
	cursor:pointer;
	transform:scale(1.1);
	-webkit-filter: drop-shadow(0px 0px 5px black);
}

.btn_tab:active{
	transform:scale(1);
	-webkit-filter: drop-shadow(0px 0px 1px black);
}

#tab_1 .btn_tab:nth-of-type(1){
	left: 37.5%;
	top: 33%;
}

#tab_1 .btn_tab:nth-of-type(2){
	left: 13.1%;
	top: 72%;
}

#tab_1 .btn_tab:nth-of-type(3){
	left: 63%;
	top: 72%;
}

#tab_2 .btn_tab, #tab_3 .btn_tab, #tab_4 .btn_tab{
	width:6%;
	left:90%;
	bottom:12%;
}

.illustration{
	position:absolute;
	background:white;
	background-size:100% !important;
	background-repeat:no-repeat !important;
	border-radius:10px;
	display:none;
}

#tab_2 .illustration:nth-of-type(1){
	width: 53%;
	height: 53%;
	bottom: 11%;
	left: 5%;
}

#tab_2 .illustration:nth-of-type(2){
	width: 30%;
	height: 53%;
	bottom: 11%;
	left: 59%;
}

#tab_2 .illustration:nth-of-type(3){
	width:33%;
	height:31%;
	bottom:45%;
	left:39%;
}

#tab_2 .illustration:nth-of-type(4){
	width:25%;
	height:60%;
	bottom:35%;
	left:73%;
}

#tab_3 .illustration:nth-of-type(1), #tab_4 .illustration:nth-of-type(1){
	width:20%;
	height:40%;
	bottom:18%;
	left: 17%;
}

#tab_3 .illustration:nth-of-type(1){
	background:url("../img/illustration_5.png");
}

#tab_3 .illustration:nth-of-type(2), #tab_4 .illustration:nth-of-type(2){
	width:20%;
	height:40%;
	bottom:10%;
	left: 43%;
}

#tab_3 .illustration:nth-of-type(2){
	background:url("../img/illustration_6.png");	
}

#tab_3 .illustration:nth-of-type(3), #tab_4 .illustration:nth-of-type(3){
	width:17%;
	height:40%;
	bottom:14%;
	left: 67%;
}

#tab_3 .illustration:nth-of-type(3){
	background:url("../img/illustration_7.png");
}

.btn_next{
	position:absolute;
	width:6%;
	bottom:7%;
	right:4%;
}

.btn_previous{
	position:absolute;
	width:6%;
	bottom:7%;
	right:11%;
}

.btn_next:hover, .btn_previous:hover{
	cursor:pointer;
	transform:scale(1.1);
}

.btn_next:active, .btn_previous:active{
	transform:scale(0.95);
}

.btn{
	position:absolute;
	height:13%;
	bottom:10%;
}

.btn:hover{
	cursor:pointer;
	transform:scale(1.1);
}

.btn:active{
	transform:scale(0.95);
}

.btn:nth-of-type(1){
	left:5%;
}

.btn:nth-of-type(2){
	left:35%;
}

.btn:nth-of-type(3){
	left:65%;
}

.btn_audio{
	position:absolute;
	width:5%;
}

.btn_audio:hover, .btn_close:hover{
	cursor:pointer;
	transform:scale(1.1);
}

.btn_audio:active, .btn_close:active{
	transform:scale(0.95);
}

#tab_1 .btn_next{
	right:3%;
}

.video{
  position:absolute;
  width: 58%;
  height: 60%;
  background:#35311E;
  z-index:1;
  left: 21%;
  top: 28%;
  border-radius:15px;
  box-shadow:black 0px 0px 14px;
}

.video > video{
  display:none;
  width:100%;
  height:100%;
}

.btn_play{
  height:30%;
  top:35%;
  left:50%;
  transform:translateX(-50%);
  position:absolute;
}

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

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

.drags{
	position:absolute;
	width:35%;
	height:50%;
	right:5%;
	top:15%;
}

.drags > div, .drop > div{
	display:inline-block;
	float:left;
	width:100%;
	height:17%;
	box-shadow:0px 0px 5px black;
	margin-bottom:6%;
	border-radius:10px;
	background:#3FA9F5;
}

.drag > p, .drop > div > p{
	font-family:'cabin-bold';
	color:white;
	font-size:2em;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.drag:hover{
	cursor:pointer;
}

.drop{
	position:absolute;
	width:34.9%;
	height:9%;
	left:3.7%;
	border-radius:10px;
	box-sizing:border-box;
}

.drop:nth-of-type(1){
	top:42.5%;
}

.drop:nth-of-type(2){
	top:55.4%;
}

.drop:nth-of-type(3){
	top:68.3%;
}

.highlight{
	border:dashed 2px gray;
}

.dragging{
	pointer-events:none;
}

.grabbing{
	cursor:-webkit-grabbing;
	cursor:-moz-grabbing;
}

.drop > div{
	width:100%;
	height:100%;
}

.animation{
	transition:all 0.5s ease;
}

input{
	border:none;
	outline:none;
	position:absolute;
	width:30%;
	height:10%;
	border-radius:10px;
	padding:0 1%;
	font-family:'cabin-regular';
	font-size:2em;
}

input:nth-of-type(1){
	left:4%;
	top:40%;
}

input:nth-of-type(2){
	right:4%;
	top:40%;
}

input:nth-of-type(3){
	left:4%;
	top:60%;
}

input:nth-of-type(4){
	right:4%;
	top:60%;
}

input:nth-of-type(5){
	left:35%;
	top:80%;
}