@font-face {
    font-family: 'cabin-regular';
    /*a name to be used later*/
    
    src: url('../fonts/Cabin-Regular.ttf');
    /*URL to font*/
}
@font-face {
    font-family: 'cabin-italic';
    /*a name to be used later*/
    
    src: url('../fonts/Cabin-Italic.ttf');
    /*URL to font*/
}
@font-face {
    font-family: 'cabin-bold-italic';
    /*a name to be used later*/
    
    src: url('../fonts/Cabin-BoldItalic.ttf');
    /*URL to font*/
}
@font-face {
    font-family: 'big-noodle';
    /*a name to be used later*/
    
    src: url('../fonts/big_noodle_titling.ttf');
    /*URL to font*/
}
p {
    font-family: 'cabin-regular';
}
* {
    margin: 0;
    padding: 0;
}
.ggb_contenidoInterno {
    background: none;
}
.popup {
    position: absolute;
    z-index: 40;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 15px;
    background-size: 64% !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    display: none;
}
.btn_close {
    width: 5%;
    position: absolute;
}
.btn_close:hover {
    cursor: pointer;
    opacity: 0.85;
    transform: scale(1.1);
}
.btn_close:active {
    transform: scale(0.95);
    opacity: 1;
}
.tab {
    position: absolute;
    width: 97%;
    height: 83%;
    border-radius: 15px;
    overflow: hidden;
    display: none;
}
#tab_1 {
    background: url("../img/bg_4_1.png");
    background-size: cover;
    display: block;
}
.item {
    position: absolute;
    width: 13.4%;
}
.item:nth-of-type(1) {
    left: 1.4%;
    top: 24%;
}
.item:nth-of-type(2) {
    left: 16.5%;
    top: 23%;
}
.item:nth-of-type(3) {
    left: 1.4%;
    top: 44%;
}
.item:nth-of-type(4) {
    left: 16.5%;
    top: 44%;
}
.item:nth-of-type(5) {
    left: 1.4%;
    top: 65%;
}
.item:nth-of-type(6){
    left: 16.5%;
    top: 65%;
}

.item:nth-of-type(7) {
    left: 31.8%;
    top: 44%;
}
.item:hover {
    cursor: pointer;
    transform: scale(1.02);
}
.item:active {
    transform: scale(0.98);
}
.column,
.row {
    position: absolute;
    z-index: 20;
}
.column {
    z-index: 20;
}
.column > div,
.row > div {
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    border: solid 1px #000000;
    vertical-align: middle;
}
.number {
    background: #FFED00;
}
.number p {
    font-family: 'cabin-regular';
    font-size: 2em;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-family: 'cabin-regular';
    font-size: 1.5em;
    text-align: center;
    padding: 0;
    margin: 0;
    display: table;
    vertical-align: middle;
}
.row > div {
    display: inline-block;
    float: left;
}
.row[data-row-1] {
    left: 54.9%;
    top: 30%;
}
.row[data-row-4] {
    left: 54.8%;
    top: 50.5%;
}

.row[data-row-7] {
    left: 56.8%;
    top: 75.1%;
}

.column[data-column-6] {
    left: 62.65%;
    top: 38.5%;
}

.column[data-column-3] {
    left: 58.8%;
    top: 22%;
}
.column[data-column-2] {
    left: 76.5%;
    top: 22%;
}
.column[data-column-5] {
    left: 82.3%;
    top: 54.7%;
}
.popup > div {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
    box-sizing: border-box;
    border-radius: 30px;
    border: solid 11px #56006A;
    background: #DDCCE1;
}
.popup p {
    font-family: 'cabin-regular';
    font-size: 1.8em;
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 2%;
}
.popup .btn_close {
    left: 76%;
    top: 18%;
    z-index: 10;
}
.incorrect {
    background: red !important;
    color: white !important;
}
.correct {
    background: green !important;
    color: white !important;
}
.background {
    position: absolute;
    width: 50%;
    height: 76%;
    left: 48%;
    top: 20%;
    border-radius:10px;
    background: rgba(255, 38, 31, 1);
    background: -moz-linear-gradient(-45deg, rgba(255, 38, 31, 1) 0%, rgba(255, 38, 31, 1) 50%, rgba(255, 87, 82, 1) 50%, rgba(255, 87, 82, 1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255, 38, 31, 1)), color-stop(50%, rgba(255, 38, 31, 1)), color-stop(50%, rgba(255, 87, 82, 1)), color-stop(100%, rgba(255, 87, 82, 1)));
    background: -webkit-linear-gradient(-45deg, rgba(255, 38, 31, 1) 0%, rgba(255, 38, 31, 1) 50%, rgba(255, 87, 82, 1) 50%, rgba(255, 87, 82, 1) 100%);
    background: -o-linear-gradient(-45deg, rgba(255, 38, 31, 1) 0%, rgba(255, 38, 31, 1) 50%, rgba(255, 87, 82, 1) 50%, rgba(255, 87, 82, 1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(255, 38, 31, 1) 0%, rgba(255, 38, 31, 1) 50%, rgba(255, 87, 82, 1) 50%, rgba(255, 87, 82, 1) 100%);
    background: linear-gradient(144deg, rgba(255, 38, 31, 1) 0%, rgba(255, 38, 31, 1) 50%, rgba(255, 87, 82, 1) 50%, rgba(255, 87, 82, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff261f', endColorstr='#ff5752', GradientType=1);
}