@font-face {
    font-family: Nunito-Bold;
    src: url("../fonts/Nunito-Bold.ttf");
}

#botonera{
    bottom:3%;
}
#info_uno{
    width: 1000px;
    height: 84px;
    position: absolute;
    top: 110px;
    background: url(../img/info_tres.jpg)no-repeat;
}

.pc{
    width:60%;
    left:20%;
    margin-top:6.3%;
    position:absolute;
}

.btn_play{
    position:absolute;
    width:10%;
    margin-top:17%;
    left:45%;
}

.btn_play:hover{
    cursor:pointer;
    opacity:0.85;
    width:10.5%;
    left:44.75%;
}

.btn_play:active{
    transform:scaleY(0.9);
    -webkit-transform:scaleY(0.9);
    -moz-transform:scaleY(0.9);
    -ms-transform:scaleY(0.9);
}

#yt_player{
    position:absolute;
    top:27%;
    left:24.8%;
    width:50.5%;
    height:54%;
    z-index:3;
    display:none;
}

.ggb_contenidoInterno{
    background:url("../img/bg_01.png") no-repeat;
    background-size:cover;
}

.nav_btns{
    position:absolute;
    width: 20%;
    height: 12%;
    right: 3%;
    top: 12.5%;
}

.nav_btns img{
    height:100%;
    display:inline-block;
}

h3{
    font-family:Nunito-Bold;
}

.video_container{
    position:absolute;
    width:89%;
    height:59%;
    background:red;
    left:5.5%;
    top:28%;
}



.video_container img{
    position:absolute;
    width:15%;
    left:42%;
    top:20%;
}

.video_container iframe{
    width:100%;
    height:100%;
}

.custom_bg{
    width:102%;
    margin:-1% 0 0 -1%;
}

#drag_panel{
    position:absolute;
    z-index:4;
    width:96%;
    height:18.3%;
    top:34.5%;
    left:2.1%;
}

.drag_container{
    width:13.7%;
    height:100%;
    margin-right:0.41%;
    display:inline-block;
}

.drag_container:last-of-type{
    margin-right:0;
}

.drag_container img{
    height:100%;
}

.drag_container img{
    margin-left:10%;
}

.drag_container:nth-child(4) img{
    margin:0;
}

.drag_container:nth-child(7) img{
    margin-left:20%;
}

.drag_container:hover{
    cursor:pointer;
    transform:scale(1.05);
}

.droppable_panel{
    position:absolute;
    top:65%;
    height:32%;
    width:46%;
}

#droppable_panel_2{
    left:52.6%;
}

.droppable_panel img{
    height:80%;
}

#droppable_panel_2 img{
    margin-top:4%;
    width:25%;
    height:auto;
}

.popup{
    position:absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:4;
    display:none;
    background:rgba(0, 0, 0, 0.5);
    border-radius:15px 15px 0 0;
}

.popup img{
    position:absolute;
}


.popup img:first-of-type{
    padding:1%;
    height:96%;
    width:auto;  
    margin-left:15%; 
}


.btn_close{
    right: 17.8%;
    top: 2%;
    width:5%;
}

.btn_close:hover{
    cursor:pointer;
    opacity:0.85;
}

.btn_close:active{
    transform:scaleY(0.85);
}