.oacontext {
    box-shadow: 0 0 3px #666;
}
.css-elementHead {
    display: inline-block;
}
.css-btn-menuSup.css-creditos {
    background-color: #534897;
    border: medium none;
    border-radius: 100%;
    color: #e9ce00;
    float: right;
    height: 44px;
    margin: 17px;
    text-indent: -9999px;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
    vertical-align: top;
    width: 44px;
    z-index: 1;
    text-decoration: none;
}
.css-btn-menuSup.css-creditos::before {
    color: #e9ce00;
    content: "C";
    display: block;
    font-family: "AndikaNewBasic-Regular", Arial, Helvetica, sans-serif;
    font-size: 32px;
    height: 44px;
    line-height: 40px;
    position: absolute;
    text-align: center;
    text-indent: 0;
    text-shadow: 2px 2px 1px #2a2068;
    width: 44px;
}
body {
    background: #d1feff url("../img/general/") repeat scroll 0 0;
    color: #ffe5b8;
    font-family: "AndikaNewBasic-Regular", Arial, Helvetica, sans-serif;
    font-size: 20px;
}
.header {
    background-color: #3B124A;
    height: auto;
    /*    margin-bottom: 20px;*/
    max-width: 1280px;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}
.css-vntn-inst {
    background-color: #09ccbe;
    border: 1px solid #3b124a;
    border-radius: 27px;
    box-shadow: 0 0 0 2px #09ccbe, 0 0 0 5px white;
    color: #541b1a;
    height: auto;
    margin-top: 153px;
    max-width: 45%;
    transform: translateZ(3px);
    width: 45%;
    z-index: 5;
}
.overlay {
    background-color: rgba(1, 153, 147, 0.5);
    -webkit-transform: translateZ(3px);
    transform: translateZ(3px);
    z-index: 5;
}
.css-txt-ins {
    margin-top: 14px;
    text-align: left;
    -webkit-transform: translateZ(3px);
    transform: translateZ(3px);
    z-index: 5;
}
.vntn.vntn-creditos {
    -webkit-transform: translateZ(3px);
    transform: translateZ(3px);
    z-index: 5;
}
.vntn-creditos--contenido {
    -webkit-transform: translateZ(3px);
    transform: translateZ(3px);
    z-index: 5;
}
.overlay {
    z-index: 5;
}
.vntn-creditos .vntn--btn-cerrar {
    -webkit-transform: translateZ(2px);
    transform: translateZ(2px);
    z-index: 5;
}
.pantallas.fases .css-vntn-def.vntn {
    background-color: #09ccbe;
    border: 1px solid #3b124a;
    border-radius: 28px;
    box-shadow: 0 0 0 3px #09ccbe, 0 0 0 5px white;
    left: 0;
    margin: 0 auto;
    max-width: 50%;
    position: absolute;
    transform: translateZ(2px);
    width: 30%;
    z-index: 51;
    top: 185px;
    ;
}
.css-vntn-def .Css-vtnImgLibro span {
    font-size: 30px;
    font-weight: bold;
    left: 7px;
    position: relative;
    text-shadow: 2px 2px 0px #004d54;
    top: -24px;
}

/* --------------------------
 *   ESTILOS GENERALES DEL PROGRAMA
 * ------------------------- */


/* --------------------------
 *   FUENTES
 * ------------------------- */

@font-face {
    font-family: 'cloudy_with_a_chance_of_lovRg';
    src: url('../fonts/cloudy/cloudy_with_a_chance_of_love-webfont.eot');
    src: url('../fonts/cloudy/cloudy_with_a_chance_of_love-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/cloudy/cloudy_with_a_chance_of_love-webfont.woff2') format('woff2'), url('../fonts/cloudy/cloudy_with_a_chance_of_love-webfont.woff') format('woff'), url('../fonts/cloudy/cloudy_with_a_chance_of_love-webfont.ttf') format('truetype'), url('../fonts/cloudy/cloudy_with_a_chance_of_love-webfont.svg#cloudy_with_a_chance_of_lovRg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AndikaNewBasic-Regular';
    src: url('../fonts/andika/AndikaNewBasic-Regular_gdi.eot');
    src: url('../fonts/andika/AndikaNewBasic-Regular_gdi.eot?#iefix') format('embedded-opentype'), url('../fonts/andika/AndikaNewBasic-Regular_gdi.woff') format('woff'), url('../fonts/andika/AndikaNewBasic-Regular_gdi.ttf') format('truetype'), url('../fonts/andika/AndikaNewBasic-Regular_gdi.svg#AndikaNewBasic-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-25CA;
}
@font-face {
    font-family: 'AndikaNewBasic-Italic';
    src: url('../fonts/andika/AndikaNewBasic-Italic_gdi.eot');
    src: url('../fonts/andika/AndikaNewBasic-Italic_gdi.eot?#iefix') format('embedded-opentype'), url('../fonts/andika/AndikaNewBasic-Italic_gdi.woff') format('woff'), url('../fonts/andika/AndikaNewBasic-Italic_gdi.ttf') format('truetype'), url('../fonts/andika/AndikaNewBasic-Italic_gdi.svg#AndikaNewBasic-Italic') format('svg');
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    unicode-range: U+0020-25CA;
}
@font-face {
    font-family: 'AndikaNewBasic-Bold';
    src: url('../fonts/andika/AndikaNewBasic-Bold_gdi.eot');
    src: url('../fonts/andika/AndikaNewBasic-Bold_gdi.eot?#iefix') format('embedded-opentype'), url('../fonts/andika/AndikaNewBasic-Bold_gdi.woff') format('woff'), url('../fonts/andika/AndikaNewBasic-Bold_gdi.ttf') format('truetype'), url('../fonts/andika/AndikaNewBasic-Bold_gdi.svg#AndikaNewBasic-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-25CA;
}
@font-face {
    font-family: 'amaranthregular';
    src: url('../fonts/amaranth/amaranth-regular-webfont.eot');
    src: url('../fonts/amaranth/amaranth-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/amaranth/amaranth-regular-webfont.woff2') format('woff2'), url('../fonts/amaranth/amaranth-regular-webfont.woff') format('woff'), url('../fonts/amaranth/amaranth-regular-webfont.ttf') format('truetype'), url('../fonts/amaranth/amaranth-regular-webfont.svg#amaranthregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* --------------------------
 *    TERMINA FUENTES
 * ------------------------- */


/*____________HEADER GRAL*__________*/

.css-btn-menuSup.ccs-tituloSeccion span {
    background-image: none;
    height: 0;
    width: 0;
}
.css-btn-menuSup.css-btn-inst {
    color: #311c25;
    float: right;
    height: 75px;
    line-height: 75px;
    text-align: center;
    text-decoration: none;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
    z-index: 1;
    font-size: 20px;
}
.css-btn-menuSup.css-btn-inst::before {
    background: #2d2d2d url("../img/general/icons_header.png") no-repeat scroll -0px -0px;
    border: 1px none;
    border-radius: 100%;
    content: "";
    display: block;
    height: 44px;
    left: -53px;
    position: absolute;
    top: 16px;
    width: 44px;
}
.css-btn-menuSup.ccs-tituloSeccion span {
    display: none;
}
.css-btn-menuSup.css-inicio.btn-inicio {
    color: #311c25;
    float: left;
    height: 75px;
    line-height: 75px;
    margin-left: 75px;
    text-decoration: none;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
    z-index: 1;
    font-size: 20px;
}
.css-btn-menuSup.css-inicio.btn-inicio::before {
    background: white url("../img/general/icons_header.png") no-repeat scroll -2px -49px;
    border: 1px none;
    border-radius: 100%;
    content: "";
    display: block;
    height: 44px;
    left: -53px;
    position: absolute;
    top: 16px;
    width: 44px;
}
.css-btn-menuSup.ccs-tituloSeccion {
    font-family: cloudy_with_a_chance_of_lovRg;
    font-size: 25px;
    height: 100%;
    letter-spacing: 1px;
    line-height: 75px;
    width: 35%;
    margin-left: 34px;
}
.css-btn-menuSup.ccs-tituloSeccion.js-tituloSeccion > h4 {
    margin: 0;
}

/*____________HEADER GRAL*__________*/


/* --------------------------
 *     PORTADA
 * ------------------------- */

.ccs-txt-Intro p:nth-child(1) {
    color: #310c19;
    font-family: cloudy_with_a_chance_of_lovRg;
    font-size: 38px;
    line-height: 37px;
    margin: 58px 0 0 31px;
    text-transform: uppercase;
    width: 240px;
}
.ccs-txt-Intro p:nth-child(2) {
    color: #301b24;
    float: right;
    margin-right: 9px;
    margin-top: 76px;
    text-align: justify;
    transform: translateZ(2px);
    width: 50%;
    z-index: 1;
}
.tituloPrincipal {
    background: rgba(0, 0, 0, 0) url("../img/fosiles/monolito.png") repeat scroll 0 0;
    float: left;
    height: 276px;
    left: 9%;
    position: relative;
/*    top: 27px;*/
    top: 109px;
    -webkit-transform: translateZ(2px);
    transform: translateZ(2px);
    width: 271px;
    z-index: 1;
}
.historia {
    font-size: 48px;
}
.escrita {
    font-size: 45px;
    text-transform: uppercase;
}
.pantalla {
    max-width: 1280px;
    position: absolute;
    top: 0;
    min-height: 683px;
    padding: 0;
    width: 100%;
    background: #3B124A url("../img/general/back.png") repeat scroll 0 0;
}
.pantalla.portada {
/*
background: rgba(246,225,122,1);
background: -moz-linear-gradient(top, rgba(246,225,122,1) 0%, rgba(246,225,122,1) 30%, rgba(224,201,101,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(246,225,122,1)), color-stop(30%, rgba(246,225,122,1)), color-stop(100%, rgba(224,201,101,1)));
background: -webkit-linear-gradient(top, rgba(246,225,122,1) 0%, rgba(246,225,122,1) 30%, rgba(224,201,101,1) 100%);
background: -o-linear-gradient(top, rgba(246,225,122,1) 0%, rgba(246,225,122,1) 30%, rgba(224,201,101,1) 100%);
background: -ms-linear-gradient(top, rgba(246,225,122,1) 0%, rgba(246,225,122,1) 30%, rgba(224,201,101,1) 100%);
background: linear-gradient(to bottom, rgba(246,225,122,1) 0%, rgba(246,225,122,1) 30%, rgba(224,201,101,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e17a', endColorstr='#e0c965', GradientType=0 );
*/
/*
background: rgba(109,214,200,1);
background: -moz-linear-gradient(top, rgba(109,214,200,1) 0%, rgba(109,214,200,1) 19%, rgba(246,225,122,1) 78%, rgba(246,225,122,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(109,214,200,1)), color-stop(19%, rgba(109,214,200,1)), color-stop(78%, rgba(246,225,122,1)), color-stop(100%, rgba(246,225,122,1)));
background: -webkit-linear-gradient(top, rgba(109,214,200,1) 0%, rgba(109,214,200,1) 19%, rgba(246,225,122,1) 78%, rgba(246,225,122,1) 100%);
background: -o-linear-gradient(top, rgba(109,214,200,1) 0%, rgba(109,214,200,1) 19%, rgba(246,225,122,1) 78%, rgba(246,225,122,1) 100%);
background: -ms-linear-gradient(top, rgba(109,214,200,1) 0%, rgba(109,214,200,1) 19%, rgba(246,225,122,1) 78%, rgba(246,225,122,1) 100%);
background: linear-gradient(to bottom, rgba(109,214,200,1) 0%, rgba(109,214,200,1) 19%, rgba(246,225,122,1) 78%, rgba(246,225,122,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dd6c8', endColorstr='#f6e17a', GradientType=0 );
*/
    background: rgba(109,214,200,1);
background: -moz-linear-gradient(left, rgba(109,214,200,1) 0%, rgba(246,225,122,1) 49%, rgba(246,225,122,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(109,214,200,1)), color-stop(49%, rgba(246,225,122,1)), color-stop(100%, rgba(246,225,122,1)));
background: -webkit-linear-gradient(left, rgba(109,214,200,1) 0%, rgba(246,225,122,1) 49%, rgba(246,225,122,1) 100%);
background: -o-linear-gradient(left, rgba(109,214,200,1) 0%, rgba(246,225,122,1) 49%, rgba(246,225,122,1) 100%);
background: -ms-linear-gradient(left, rgba(109,214,200,1) 0%, rgba(246,225,122,1) 49%, rgba(246,225,122,1) 100%);
background: linear-gradient(to right, rgba(109,214,200,1) 0%, rgba(246,225,122,1) 49%, rgba(246,225,122,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6dd6c8', endColorstr='#f6e17a', GradientType=1 );
    z-index: 0;
}

/*
.ccs-menu-principal {
    float: left;
    margin: 10% 0 0;
    padding: 0;
    text-align: center;
    -webkit-transform: translateZ(2px);
    transform: translateZ(2px);
    width: 100%;
    z-index: 1;
}
*/

.ccs-menu-principal {
    bottom: 0;
    float: left;
    padding: 0;
    position: absolute;
    text-align: center;
    transform: translateZ(2px);
    width: 100%;
    z-index: 1;
}
.ccs-menu-principal a {
    color: #311c25;
    text-decoration: none;
    -webkit-transform: translateZ(2px);
    transform: translateZ(2px);
    z-index: 3;
}
.ccs-li-menu-p {
    display: inline-block;
    margin-right: 47px;
    width: 153px;
}
.ccs-li-menu-p h4 {
    font-family: 'amaranthregular', Arial, Helvetica, sans-serif;
    font-size: 19px;
    font-weight: normal;
    margin: 0;
    letter-spacing: 0    .5px;
}
.circle {
    border: 1px solid white;
    border-radius: 100%;
    display: inline-block;
    height: 83px;
    margin-bottom: 12px;
    text-align: center;
    width: 83px;
    box-shadow: 0 1px 2px 0 #3f1615;
}
.icon1 {
    background: #ea5d55 url("../img/general/icons_nav.png") repeat scroll -83px 0;
}
.icon2 {
    background: #ea5d55 url("../img/general/icons_nav.png") repeat scroll -2px 2px;
}
.icon3 {
    background: #ea5d55 url("../img/general/icons_nav.png") repeat scroll -3px -87px;
}
.icon4 {
    background: #ea5d55 url("../img/general/icons_nav.png") repeat scroll -176px -88px;
}
.icon5 {
    background: #ea5d55 url("../img/general/icons_nav.png") repeat scroll -84px -84px;
}
.fondo > img {
    bottom: 0;
    left: 0;
    max-width: 100%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

/* --------------------------
 *    TERMINA PORTADA
 * ------------------------- */


/*************ESTILO LINKS***************/

.css-btn-def.js-btn-def {
    color: #01727c;
    font-weight: bold;
}
.pantalla1 .css-btn-def.js-btn-def {
    color: #09ccbe;
    font-weight: bold;
}
.pantalla2 .css-btn-def.js-btn-def {
    color: #09ccbe;
    font-weight: bold;
}

/* --------------------------
 *    SECCION ¿QUÉ SON LOS FÓSILES?
 * ------------------------- */

.pantalla1 .textorv .parrafo2 > p {
    margin: 0 auto;
    text-align: center;
}
.css-btn-carrusel1-ant::before {
    background: rgba(0, 0, 0, 0) url("../img/general/flechita.svg") repeat scroll 0 0;
    content: "";
    display: block;
    height: 27px;
    left: 12px;
    position: absolute;
    top: 9px;
    width: 15px;
}
.css-btn-carrusel1-sig::after {
    background: rgba(0, 0, 0, 0) url("../img/general/flechita.svg") repeat scroll 0 0;
    content: "";
    display: block;
    height: 27px;
    right: 12px;
    position: absolute;
    top: 9px;
    width: 15px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.seccion-12 .textorv {
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 30px;
    width: 90%;
}
.textorv > h2 {
    margin: 0;
    color: #ea5d55;
    font-size: 25px;
    text-transform: uppercase;
    visibility: hidden;
}
.ccs-areaHeaderMenu {
    /*
    background-color: white;
    border: 1px solid red;
*/
    height: 75px;
    max-width: 1280px;
    position: absolute;
    width: 100%;
    /*    background-color: #3b124a;*/
}
.ccs-areaHeaderMenu::before {
    background: rgba(0, 0, 0, 0) url("../img/general/banner.svg") repeat scroll 0 0;
    content: "";
    display: block;
    height: 75px;
    position: absolute;
    width: 315px;
}
.ccs-areaHeaderMenu::after {
    background: rgba(0, 0, 0, 0) url("../img/general/banner.svg") repeat scroll 0 0;
    content: "";
    display: block;
    height: 75px;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    width: 315px;
    z-index: -1;
}
.css-seccion {
    margin-top: 50px;
    max-width: 1280px;
}
.css-seccion.seccion-0.item > h1 {
    font-size: 29px;
    margin: 0;
    padding-left: 35px;
    padding-top: 121px;
}
.css-bloqueitem.css-bloqueIzq h3 {
    color: #fdbb2f;
    font-weight: normal;
    margin: 0;
    text-transform: uppercase;
}
.css-bloqueitem.css-bloqueIzq > h2 {
    color: #ea5d55;
    font-size: 24px;
    margin: 0;
    text-transform: uppercase;
    visibility: hidden;
}
.csss-textorv.css-txt1 > p {
    border-top: 1px solid #fdbb2e;
    margin-top: 0;
}
.css-textorv.css-txt2 > p {
    border-top: 1px solid #fdbb2e;
    margin-top: 0;
    z-index: 10;
}
.css-seccion-activa::before {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 19px solid #ea5d55;
    content: "";
    display: flex;
    float: left;
    height: 0;
    left: 45%;
    position: absolute;
    text-align: center;
    top: 64px;
    width: 0;
}
.css-txt-def {
    color: #3b124a;
}

/* --------------------------
 *   TERMINA  SECCION ¿QUÉ SON LOS FÓSILES?
 * ------------------------- */

.css-btn-tip {
    background: rgba(0, 0, 0, 0) url("../img/complementos/tip.svg") no-repeat scroll 0 0;
    bottom: 0;
    display: block;
    height: 66px;
    line-height: 44px;
    margin: 10px 18px;
    position: absolute;
    right: 0;
    text-indent: -9999px;
    width: 55px;
}
.css-tip-mapa {
    bottom: 0;
    float: right;
    position: absolute;
    right: 0;
}

/* --------------------------
 *   MENU SECUNDARIO ¿QUÉ SON LOS FÓSILES?
 * ------------------------- */

.ccs-menu-pantalla1 {
    /*    border: 1px solid;*/
    height: 65px;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    top: 75px;
    z-index: 2;
}
.ccs-li-menu-btn-f {
    /*    background-color: white;*/
    display: inline-block;
    float: left;
    list-style: outside none none;
    padding: 0;
    width: 25%;
}
.css-btn-seccion {
    background-color: #feda7e;
    box-sizing: border-box;
    color: #8d2242;
    display: inline-block;
    font-size: 17px;
    font-weight: bold;
    height: 65px;
    line-height: 65px;
    margin: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 99%;
}
.css-seccion-activa {
    background-color: #ffc655;
    border-bottom: 9px solid #ea5d55;
}

/* --------------------------
 *   TERMINA MENU SECUNDARIO ¿QUÉ SON LOS FÓSILES?
 * ------------------------- */


/* --------------------------
 * SECCION  ¿CÓMO SE FORMAN?
 * ------------------------- */

.textorv {
    margin: 0 auto;
    position: relative;
    text-align: justify;
    top: 30px;
    width: 90%;
}
.css-ul-fosil-tip {
    list-style: none;
}
li.css-lis-fosil-tip:before {
    content: "• ";
    color: #FFFFFF;
}
.ccs-blanco {
    color: white;
}
.pantalla2 .textorv {
    margin: 92px auto 46px;
    text-align: justify;
    width: 90%;
}

/* --------------------------
 *   TERMINA SECCION ¿CÓMO SE FORMAN?
 * ------------------------- */


/*ventana instrucciones*/

.css-vntn-inst .Css-vtnImgLibro span {
    font-size: 30px;
    font-weight: bold;
    left: 7px;
    position: relative;
    text-shadow: 2px 2px 0px #004d54;
    /*estaba mal cerrado css w3c*/
    top: -24px;
}
.Css-vtnImgLibro::before {
    background: rgba(0, 0, 0, 0) url("../img/general/icons_navegacion.png") repeat scroll -87px -151px;
    content: "";
    display: inline-flex;
    height: 60px;
    position: relative;
    width: 73px;
}
.Css-vtnImgDefinicion::before {
    background: rgba(0, 0, 0, 0) url("../img/general/icon_glosario.svg") no-repeat scroll 0 0 / 65px auto;
    content: "";
    display: inline-flex;
    height: 76px;
    position: relative;
    width: 65px;
}
.Css-vtnImgLibro {
    border-bottom: 1px solid;
    color: white;
    margin-left: 3px;
    margin-top: 43px;
    top: 23px;
}

/*
.ccs-areaHeaderMenu{ 
    background-color: #b0a4ff;
    height: 100%;
    position: relative;
    width: 100%;
	
	}
*/

.css-btn-menuSup {
    display: inline-block;
}

/* --------------------------
 *   COMPLEMENTO SLIDER IMAGENES FOSILES 
 * ------------------------- */


/*slider medida general*/

.css-mascara-slider {
    height: 292px;
    /*    max-width: 45%;*/
    top: 128px;
    width: 478px;
}

/*
.css-mascara-slider {
    height: 214px;
    right: 130px;
    top: 90px;
    width: 300px;
}
*/


/*Checar UI  de creditos  y de slider huesos*/


/*centro drag slider mapeo*/

.css-mascara-slider .ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background-color: #da5653;
    border: 1px solid white;
    border-radius: 100%;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2), 0 0 10px rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    height: 47px;
    margin-left: -23px;
    position: absolute;
    top: 92%;
    width: 47px;
}
.ui-slider-handle.ui-state-default.ui-corner-all::before {
    border-bottom: 8px solid transparent;
    border-right: 9px solid white;
    border-top: 8px solid transparent;
    content: "";
    display: block;
    float: left;
    height: 0;
    left: 1px;
    margin-left: 8px;
    margin-right: 10px;
    position: absolute;
    top: 15px;
    width: 0;
}
.ui-slider-handle.ui-state-default.ui-corner-all::after {
    border-bottom: 8px solid transparent;
    border-left: 9px solid white;
    border-top: 8px solid transparent;
    content: "";
    display: block;
    float: left;
    height: 0;
    left: 16px;
    margin-left: 8px;
    margin-right: 10px;
    position: absolute;
    top: 15px;
    width: 0;
}
.ui-slider-handle.ui-state-default.ui-corner-all {
    background: #DA5653;
    width: 44px;
    height: 44px;
}

/*FOSIL 1 Fosiles corporales*/


/*capa superior hueso*/

.js-fosil-1 .ui-widget-header {
    background: rgba(0, 0, 0, 0) url("../img/fosiles/paki_esqueleto.png") no-repeat scroll 0 0;
    border-radius: 0;
    border-right: 2px solid #3b124a;
    overflow: hidden;
    position: absolute;
}

/*capa inferior carne*/

.js-fosil-1.ui-widget-content {
    background-image: url("../img/fosiles/paki_carne.png");
    background-repeat: no-repeat;
    position: absolute;
    background-color: #ececec;
}

/*FOSIL 2 Fosiles corporales eurip*/


/*capa superior hueso*/

.js-fosil-2 .ui-widget-header {
    border-right: solid 2px #A4A4A4;
    /*border: 1px solid #878787;*/
    background: url("../img/fosiles/eurip_esqueleto.png") no-repeat scroll 0px 0px;
    overflow: hidden;
    position: absolute;
}

/*capa inferior carne*/

.js-fosil-2.ui-widget-content {
    background-image: url("../img/fosiles/eurip_carne.png");
    background-repeat: no-repeat;
    position: absolute;
}

/*FOSIL 3 Fosiles corporales amonita*/


/*capa superior hueso*/

.js-fosil-3 .ui-widget-header {
    border-right: solid 2px #A4A4A4;
    /*border: 1px solid #878787;*/
    background: url("../img/fosiles/amonita_esqueleto.png") no-repeat scroll 0px 0px;
    overflow: hidden;
    position: absolute;
}

/*capa inferior carne*/

.js-fosil-3.ui-widget-content {
    background-image: url("../img/fosiles/amonita_carne.png");
    background-repeat: no-repeat;
    position: absolute;
}

/*FOSIL 4 Fosiles corporales Tribolito*/


/*capa superior hueso*/

.js-fosil-4 .ui-widget-header {
    border-right: solid 2px #A4A4A4;
    /*border: 1px solid #878787;*/
    background: url("../img/fosiles/tribolito_esqueleto.png") no-repeat scroll 0px 0px;
    overflow: hidden;
    position: absolute;
}

/*capa inferior carne*/

.js-fosil-4.ui-widget-content {
    background-image: url("../img/fosiles/tribolito_carne.png");
    background-repeat: no-repeat;
    position: absolute;
}

/*Fósiles de traza*/


/*FOSIL 5 Fósiles de traza */


/*capa superior hueso*/

.js-fosil-5 .ui-widget-header {
    border-right: solid 2px #A4A4A4;
    background: url("../img/fosiles/tribolito_esqueleto.png") no-repeat scroll 0px 0px;
    overflow: hidden;
    position: absolute;
}

/*capa inferior carne*/

.js-fosil-5.ui-widget-content {
    background-image: url("../img/fosiles/tribolito_carne.png");
    background-repeat: no-repeat;
    position: absolute;
}

/* --------------------------
 *   FIN COMPLEMENTO SLIDER IMAGENES FOSILES 
 * ------------------------- */


/* --------------------------
 *   IMAGENES FIJAS PANTALLA 1
 * ------------------------- */


/*Fosiles corporales*/

.css-img-fosil-intro {
    background-image: url("../img/fosiles/intro1.png");
    background-repeat: no-repeat;
    height: 214px;
    margin: 0 auto;
    width: 237px;
}
.css-img-fosil-arbol {
    background-image: url("../img/fosiles/arbol_piedra.png");
    background-repeat: no-repeat;
    position: absolute;
}
.css-img-fosil-hoja {
    background-image: url("../img/fosiles/hoja_piedra.png");
    background-repeat: no-repeat;
    position: absolute;
}
.css-img-amonita {
    background-image: url("../img/fosiles/amonita.png");
    background-repeat: no-repeat;
    position: absolute;
}
.css-img-mamut {
    background-image: url("../img/fosiles/mamut.png");
    background-repeat: no-repeat;
    position: absolute;
}

/*Fósiles de traza*/

.css-img-dinosaurios {
    background-image: url("../img/fosiles/dinosaurios.png");
    background-repeat: no-repeat;
    position: absolute;
}
.css-img-desconocido1 {
    background-image: url("../img/fosiles/desconocido1.png");
    background-repeat: no-repeat;
    position: absolute;
}
.css-img-desconocido2 {
    background-image: url("../img/fosiles/desconocido2.png");
    background-repeat: no-repeat;
    position: absolute;
}
.css-img-fin {
    height: 230px;
    margin: 21px auto;
    position: relative;
    width: 375px;
}
.css-img-fosil-actual {
    background-image: url("../img/fosiles/actual.png");
    background-repeat: no-repeat;
}
.css-img-fosil-anterior {
    background-image: url("../img/fosiles/anterior.png");
    background-repeat: no-repeat;
}
.css-masfosil-img {
    display: inline-block;
    margin: 0 67px;
    padding-top: 23px;
    text-align: left;
    width: 390px;
}

/* --------------------------
 *   COMPLEMENTO owlCarousel 
 * ------------------------- */


/*
.css-seccion {
    background: #3B124A;
}
*/

#owl .item {
    display: block;
    /* height: 530px;*/
    height: 100%;
    width: 100%;
}
.owl-buttons {
    position: absolute;
    right: 24%;
    top: 540px;
}
.owl-next {
    left: 20px;
}
.owl-prev {
    left: 60px;
}
.css-owl-carousel2 img {
    display: block;
    /*    margin: auto;*/
    max-width: 100%;
    border: 1px solid white;
}
.css-btn-carrusel1 {
    background-color: #3e9fa2;
    border-radius: 22px;
    bottom: 25px;
    box-shadow: 2px 5px 0 #17546c;
    color: white;
    height: 44px;
    line-height: 44px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 160px;
    z-index: 1;
}
.css-btn-carrusel1-sig {
    left: 910px;
    top: 553px;
}
.css-btn-carrusel1-ant {
    left: 722px;
    top: 553px;
}
.css-btn-carrusel1-continuar {
    left: 552px;
    padding-right: 14px;
    top: 602px;
}
.pos2BotAnt {
    left: 552px;
    top: 602px;
}

/* --------------------------
 *  FIN  COMPLEMENTO owlCarousel 
 * ------------------------- */


/*Estilo de bloques de informacion Pantalla 1 */

.css-bloqueitem {
    display: inline-block;
    height: 100%;
    margin-left: 36px;
    text-align: justify;
    vertical-align: middle;
    width: 45%;
}

/* --------------------------
 *  ESTILO PANTALLA 2
 * ------------------------- */

.pantalla2 .owl-carousel {
    height: 324px;
}
.css-posi {
    display: block;
    margin: 0 auto;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 878px;
}
.css-posi.css-txt-item {
    color: #301b24;
    left: 20px;
    position: absolute;
    text-align: justify;
    top: 50px;
    width: 43%;
}
.css-btn-carrusel2-sig {
    background-color: #3e9fa2;
    border-radius: 22px;
    bottom: -9px;
    box-shadow: 2px 5px 0 #17546c;
    color: white;
    display: block;
    height: 39px;
    line-height: 39px;
    margin: 9px auto;
    text-align: center;
    text-decoration: none;
    width: 230px;
}
.css-ilustra-pregunta {
    background-image: url("../img/seccion3/capas.png");
    background-repeat: no-repeat;
    height: 427px;
    position: absolute;
    right: -300px;
    top: 0;
    width: 372px;
}
.css-ul-fosil {
    list-style: none;
}
.css-li-fondo {
    background-color: #09ccbe;
    border: 1px solid;
    border-radius: 7px;
    color: #3f184e;
    font-size: 16px;
    font-weight: bold;
    height: auto;
    list-style: outside none none;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 79px;
    z-index: 2;
}
.css-li-clic {
    font-size: 10px;
    font-weight: bold;
    height: 0;
    position: absolute;
    text-align: center;
    width: 60px;
    text-decoration: none;
    padding-bottom: 57px;
    z-index: 1;
    text-indent: -999999px;
}
.css-li-f1 {
    left: 24%;
    top: 12%;
    width: 90px;
}
.css-li-f2 {
    left: 48%;
    top: 12%;
}
.css-li-f3 {
    left: 66%;
    top: 12%;
    width: 90px;
}
.css-li-f4 {
    font-size: 16px;
    font-weight: bold;
    left: 23%;
    top: 29%;
    width: 200px;
}
.css-li-f4-base {
    font-size: 16px;
    font-weight: bold;
    left: 23%;
    top: 27%;
    width: 254px;
}
.css-li-f5 {
    left: 26%;
    top: 42%;
}
.css-li-f6 {
    left: 49%;
    top: 42%;
    width: 86px;
}
.css-li-f7 {
    left: 76%;
    top: 42%;
}

/*AREA C*/

.css-li-f8 {
    left: 14%;
    top: 57%;
}
.css-li-f9 {
    left: 33%;
    top: 57%;
}
.css-li-f10 {
    left: 53%;
    top: 57%;
    width: 76px;
}
.css-li-f11 {
    left: 77%;
    top: 57%;
    width: 81px;
}

/*AREA B*/

.css-li-f12 {
    left: 27%;
    top: 72%;
}
.css-li-f13 {
    left: 46%;
    top: 72%;
}
.css-li-f14 {
    left: 67%;
    top: 72%;
}
.css-ilustra-pregunta::after {
    background: rgba(255, 0, 0, 0) url("../img/seccion3/linea.png") repeat scroll 0 0;
    content: "";
    height: 470px;
    position: absolute;
    right: 390px;
    top: 0;
    width: 22px;
}
.css--botones-respuesta {
    height: 170px;
    left: -65px;
    position: relative;
    right: -55px;
    top: -12px;
    width: 690px;
}
.circulopreg {
    background-color: #339999;
    border-radius: 44px;
    color: white;
    display: inline-block;
    height: 44px;
    text-align: center;
    text-decoration: none;
    width: 44px;
    line-height: 44px;
    text-shadow: 1px 1px 1px black;
}
.c-resp {
    color: white;
    display: inline-block;
    margin-top: -38px;
    padding-left: 60px;
    vertical-align: top;
    width: 450px;
}
.css-li-respuesta {
    height: 40px;
    padding-bottom: 20px;
    width: 40px;
}
.owl-carousel {
    height: 554px;
}
.pantalla2 .css-owl-carousel2.owl-theme .owl-controls .owl-page span.owl-numbers {
    background-color: #3e9fa2;
    border-radius: 130px;
    font-size: 24px;
    height: 44px;
    padding: 0;
    text-shadow: 1px 1px 1px black;
    width: 44px;
    margin: 5px 26px;
}
.css-preg-mod {
    left: -23px;
    position: relative;
    width: 564px;
}

/* --------------------------
 *  ESTILO PANTALLA 3
 * ------------------------- */

.vtn-tip .vntn--btn-cerrar {
    background-color: #dfaa55;
    border: medium none;
    border-radius: 100%;
    color: white;
    font-size: 25px;
    font-weight: bold;
    height: 44px;
    line-height: 26px;
    position: absolute;
    right: 10px;
    text-align: center;
    text-decoration: none;
    top: 10px;
    width: 44px;
    z-index: 1;
}
.vntn.vtn-tip {
    background-color: #da5653;
    border: 1px solid;
    border-radius: 26px;
    box-shadow: 0 0 0 2px #fcc380, 0 0 0 4px #3b124a, 0 0 0 5px #fcc380;
    max-width: 90%;
    padding: 25px;
    -webkit-transform: translateZ(2px);
    transform: translateZ(2px);
    width: 90%;
    z-index: 5;
    margin-top: 177px;
}
.css-btn-sigPreg {
    background-color: #3e9fa2;
    border-radius: 22px;
    box-shadow: -1px 4px 0 #000000;
    color: white;
    height: 44px;
    left: 204px;
    line-height: 44px;
    position: absolute;
    right: auto;
    text-align: center;
    text-decoration: none;
    top: 470px;
    width: 160px;
    z-index: 10;
}
.css-iconpos {
    display: inline-block;
    font-size: 29px;
    height: 43px;
    margin-left: 20%;
    padding-left: 80px;
}
.css-icon-respVnt::before {
    content: "";
    height: 43px;
    position: absolute;
    text-indent: -999999px;
    width: 48px;
    z-index: 10;
}
.css-icon-correcto {
    background-image: url("../img/seccion3/icon_correcto.png");
    background-repeat: no-repeat;
    color: #42D10E;
}
.css-icon-incorrecto {
    background-image: url("../img/seccion3/icon_incorrecto.png");
    background-repeat: no-repeat;
    color: red;
}
.Css-vtn-respPreg {
    left: -30px;
    position: absolute;
    text-align: justify;
    top: 230px;
    width: 620px;
    margin-top: 15px;
}
.css-li-indicadores-preg {
    height: 32px;
    left: 125px;
    position: absolute;
    top: 478px;
    width: 320px;
}
.css-li-paso {
    background: #cc9966 none repeat scroll 0 0;
    display: inline-block;
    height: 18px;
    margin-right: 18px;
    text-indent: -9999px;
    transform: rotate(45deg);
    width: 18px;
}
.li-respuesta {
    list-style: none;
}
.css-lisTipo {
    text-decoration: none;
}
.e-actual {
    background-color: #cc6600;
}
.css-resumen-resp-final {
    left: 23px;
    text-align: justify;
    top: 54px;
    width: 653px;
}
.css-confirmaResp {
    width: 490px;
}
.css-preguntas-area {
    position: absolute;
    top: 150px;
    left: 50px;
    width: 720px;
}
.css-pregConteo {
    background-color: #ffc655;
    border-radius: 7px;
    color: #9b2241;
    font-weight: bold;
    height: auto;
    left: 242px;
    padding: 5px;
    position: absolute;
    text-align: center;
    top: 102px;
    width: 176px;
}
.css-pregConteo::before {
    background-color: white;
    border: 2px solid white;
    border-radius: 2px;
    content: "";
    display: block;
    height: 5px;
    left: -4px;
    position: absolute;
    top: 43%;
    width: 1px;
}
.css-pregConteo::after {
    background-color: white;
    border: 2px solid white;
    border-radius: 2px;
    content: "";
    display: block;
    height: 5px;
    position: absolute;
    right: -4px;
    top: 43%;
    width: 1px;
}

/* --------------------------
 *  ESTILO PANTALLA 4 MEMORIA
 * ------------------------- */

.memorama {
    display: block;
    font-size: 0;
    margin: 92px auto 0;
    max-width: 1150px;
    min-width: 768px;
    text-align: center;
    width: 100%;
}
.memorama .carta {
    border: 6px solid #00ffff;
    border-radius: 10px;
    height: auto;
    margin: 10px;
    max-width: 212px;
    min-width: 212px;
    width: 50%;
}
.pantalla4 .vntn--contenido {
    text-align: center;
}

/*ventana final memoria*/


/*
.css-bien-memo{ 
  left: 22%;
    position: absolute;
    top: 40%;
	
	}
*/

.css-bien {
    color: #6f2eba;
    font-size: 27px;
    font-weight: bold;
}
.carta img {
    max-width: 100%;
    display: block;
}
.vntn.vntn-feedback {
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    /*	width: 100%;*/
    height: 100%;
    max-width: 100%;
}
.vntn-feedback > vntn--contenido {
    text-align: center;
}
.feedback--img1.e-oculto,
.feedback--img2.e-oculto {
    display: none;
}
.feedback--img1,
.feedback--img2 {
    display: inline-block;
    width: 440px;
    margin: 6.5% 1.5% 0;
}
.feedback--img1 img,
.feedback--img2 img {
    display: block;
    margin: auto;
    max-width: 100%;
    box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.25);
}
.feedback--name {
    border-bottom: 1px dashed;
    color: #6f2eba;
    font-weight: bold;
    margin: 17px auto;
    text-align: center;
    width: 50%;
    font-size: 24px;
}
.feedback--text {
    color: #59042c;
    display: block;
    margin: 0 auto;
    /*    padding: 0 8%;*/
    text-align: justify;
    width: 88%;
}
.final-feedback {
    margin: 150px auto 1%;
    padding: 0;
    text-align: center;
    width: 60%;
}
.css-bien-memo > p {
    text-align: justify;
}
.pantalla4 .vntn.vntn-feedback {
    background-color: #dfaa55;
    bottom: auto;
    color: #300818;
    height: 100%;
    left: 0;
    max-width: 100%;
    position: absolute;
    right: auto;
    top: 0;
    /*    width:100%;*/
    -webkit-transform: translateZ(2px);
    transform: translateZ(2px);
    padding: 0;
    box-shadow: none;
}
.memorama--reset.e-oculto {
    display: none;
}
.memorama--reset {
    background: #da5653 url("../img/general/restar_icon.svg") no-repeat scroll 6px 4px / 32px auto;
    border: 1px solid #f9efe8;
    border-radius: 80px;
    color: white;
    cursor: pointer;
    display: block;
    font-size: 19px;
    height: 52px;
    line-height: 52px;
    margin: auto;
    outline: 0 none;
    text-align: right;
    width: 145px;
}
.css-bien::before {
    background: rgba(0, 0, 0, 0) url("../img/general/icon_bien.svg") no-repeat scroll 0 0;
    content: "";
    display: block;
    height: 216px;
    margin: 0 auto;
    text-align: center;
    width: 200px;
}

/* --------------------------
 *  ESTILO PANTALLA 5 MAPA
 * ------------------------- */

.pantalla5 .js-mapaImg-3.ui-widget-content {
    background-image: url("../img/seccion5/coahuila_b.jpg");
    background-repeat: no-repeat;
    border-color: black;
    border-radius: 0;
    margin-bottom: 31px;
    position: relative;
    top: 0;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.29);
}
.pantalla5 .js-mapaImg-4.ui-widget-content {
    background-image: url("../img/seccion5/puebla_b.jpg");
    background-repeat: no-repeat;
    border: 1px solid black;
    border-radius: 0;
    margin-bottom: 32px;
    position: relative;
    top: 0;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.29);
}
.pantalla5 .css-mascara-slider {
    height: 300px;
    margin: 0 auto;
    width: 700px;
}
.vntn--btn-cerrar {
    background-color: #da5653;
    border: medium none;
    border-radius: 100%;
    color: white;
    font-size: 21px;
    font-weight: bold;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 10px;
    text-align: center;
    text-decoration: none;
    top: 10px;
    width: 44px;
    z-index: 1;
    padding: 0;
}

/*ANIM*/

.ccs-menu-mapa span {
    -webkit-animation: radar 2s infinite linear;
    -ms-animation: radar 2s infinite linear;
    -moz-animation: radar 2s infinite linear;
    animation: radar 2s infinite linear;
    background-color: white;
    border: 1px solid white;
    border-radius: 999px;
    height: 40px;
    opacity: 0;
    position: absolute;
    width: 40px;
}
.ccs-menu-mapa span:nth-child(1) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}
.ccs-menu-mapa span:nth-child(2) {
    -webkit-animation-delay: 0.66s;
    -moz-animation-delay: 0.66s;
    animation-delay: 0.66s;
}
.ccs-menu-mapa span:nth-child(3) {
    -webkit-animation-delay: 1.33s;
    -moz-animation-delay: 1.33s;
    animation-delay: 1.33s;
}
.ccs-menu-mapa span:nth-child(4) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}
.ccs-menu-mapa span:nth-child(5) {
    -webkit-animation-delay: 0.66s;
    -moz-animation-delay: 0.66s;
    animation-delay: 0.66s;
}
.ccs-menu-mapa span:nth-child(6) {
    -webkit-animation-delay: 1.33s;
    -moz-animation-delay: 1.33s;
    animation-delay: 1.33s;
}

/*@-webkit-keyframes radar { w3c css3 no se implemanta webkiy frame
	0% {-webkit-transform: scale(0); opacity: 0;}
	25% {-webkit-transform: scale(0); opacity: 0.5;}
	50% {-webkit-transform: scale(1); opacity: 1;}
	75% {-webkit-transform: scale(1.5); opacity: 0.5;}
	100% {-webkit-transform: scale(2); opacity: 0;}
}*/


/*@-moz-keyframes radar {
	0% {-moz-transform: scale(0); opacity: 0;}
	25% {-moz-transform: scale(0); opacity: 0.5;}
	50% {-moz-transform: scale(1); opacity: 1;}
	75% {-moz-transform: scale(1.5); opacity: 0.5;}
	100% {-moz-transform: scale(2); opacity: 0;}
}*/

@keyframes radar {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    25% {
        transform: scale(0);
        opacity: 0.5;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    75% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
.css-posi-map {
    float: left;
    left: 70px;
    margin-top: 10%;
    position: relative;
    width: 560px;
    height: 0;
}
.css-txt-map {
    float: right;
    height: 170px;
    margin: 190px 85px 0 0;
    text-align: justify;
    width: 40%;
}
.css-btn-map {
    background-image: url("../img/seccion5/pala.svg");
    background-repeat: no-repeat;
    height: 72px;
    position: absolute;
    text-indent: -999999px;
    width: 50px;
    z-index: 4;
}
.css-btn-map4 {
    background-image: url("../img/seccion5/pala2.svg");
}
.ccs-li-menu-map {
    position: absolute;
    list-style: none;
}
.ccs-menu-mapa .anim1 {
    left: 134px;
    top: 34px;
}
.ccs-menu-mapa .anim2 {
    left: 217px;
    top: 84.5px;
}
.ccs-menu-mapa .anim3 {
    left: 309px;
    top: 118px;
}
.ccs-menu-mapa .anim4 {
    left: 437px;
    top: 314px;
}
.ccs-menu-mapa .anim5 {
    left: 376.5px;
    top: 286.5px;
}
.ccs-menu-mapa .anim6 {
    left: 534px;
    top: 354px;
}
.css-btn-map-li-1 {
    left: 130px;
    top: 30px;
}
.css-btn-map-li-2 {
    left: 213px;
    top: 80px;
}
.css-btn-map-li-3 {
    left: 305px;
    top: 114px;
}
.css-btn-map-li-4 {
    left: 432px;
    top: 311px;
}
.css-btn-map-li-5 {
    left: 372px;
    top: 283px;
}
.css-btn-map-li-6 {
    left: 530px;
    top: 350px;
}

/*pos general de la imagen en ventana*/

.css-vntn-map {
    background-color: #dfaa55;
    border: medium none;
    color: #59042c;
    height: 83%;
    margin-top: 76px;
    max-width: 100%;
    text-align: justify;
}
.css-vtnimg-map {
    background-repeat: no-repeat;
    /*    border: 1px solid;*/
    height: 315px;
    margin: 0 auto 22px;
    position: relative;
    text-align: center;
    text-indent: -999999px;
    width: 700px;
    z-index: 12;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.29);
}
.css-vtnimg-map-tit {
    font-size: 24px;
    font-weight: bold;
    margin: -14px auto 0;
    text-align: center;
    color: #6F2EBA;
}
.css-vtnimg-map-tit::after {
    content: "\25C8";
    margin: 10px;
}
.css-vtnimg-map-tit::before {
    margin: 10px;
    content: "\25C8";
}

/*sonora*/

.map_1 {
    background-image: url("../img/seccion5/zona1.png");
    background-position: center;
    width: 434px;
}

/*Chihuahua*/

.map_2 {
    background-image: url("../img/seccion5/zona2.png");
    background-position: center;
    width: 421px;
}
.map_5 {
    background-image: url("../img/seccion5/zona5.png");
    background-position: center;
}

/*chiapas*/

.map_6 {
    background-image: url("../img/seccion5/zona6.png");
    background-position: center;
}

/* --------------------------
 *   IMAGENES SLIDER MAPA NORTE Coahuila 3 Y PUEBLA 4
 * ------------------------- */


/*norte Coahuila*/

.js-mapaImg-3 .ui-widget-header {
    border-right: solid 2px #A4A4A4;
    background: url("../img/seccion5/coahuila_a.jpg") no-repeat scroll 0px 0px;
    overflow: hidden;
    position: absolute;
}

/*capa inferior carne*/

.js-mapaImg-3.ui-widget-content {
    background-image: url("../img/seccion5/tribolito_carne.png");
    background-repeat: no-repeat;
    position: absolute;
}

/*puebla*/

.js-mapaImg-4 .ui-widget-header {
    border-right: solid 2px #A4A4A4;
    background: url("../img/seccion5/puebla_a.jpg") no-repeat scroll 0px 0px;
    overflow: hidden;
    position: absolute;
}

/*capa inferior carne*/

.js-mapaImg-4.ui-widget-content {
    background-image: url("../img/fosiles/tribolito_carne.png");
    background-repeat: no-repeat;
    position: absolute;
}
.map_1::before {
    background-color: rgba(0, 0, 0, 0.36);
    bottom: 0;
    color: white;
    content: "Huellas de dinosaurio en Esqueda, Sonora.";
    display: block;
    font-size: 14px;
    padding-left: 3%;
    position: absolute;
    text-align: left;
    text-indent: 0;
    width: 97%;
    z-index: 2;
}
.map_2::after {
    background-color: rgba(0, 0, 0, 0.36);
    bottom: 0;
    color: white;
    content: "Representación artística de un grupo de Quetzalcoatlus alimentándose.";
    display: block;
    font-size: 14px;
    padding-left: 3%;
    position: absolute;
    text-align: left;
    text-indent: 0;
    width: 97%;
    z-index: 2;
}
.map_6::before {
    background-color: rgba(0, 0, 0, 0.36);
    bottom: 0;
    color: white;
    content: "Templo de las Inscripciones.";
    display: block;
    font-size: 14px;
    padding-left: 3%;
    position: absolute;
    text-align: left;
    text-indent: 0;
    width: 97%;
    z-index: 2;
}
.css-verde {
    color: #008B18;
}
.css-naranja {
    color: #FFC126;
}
.css-azul {
    color: #3337FF;
}

/* --------------------------
 *   Responsive 
 * ------------------------- */


/* estilos aplican en width < 1280px  */

@media screen and (max-width: 1280px) {
    /*(windows  landscape)*/
    .pantalla {
        min-height: 683px;
    }
    /*(Android" landscape)*/
    .pantalla.android {
        min-height: 631px;
    }
    /*(windows  landscape) contenido pantallas*/
    #owl .item {
        height: 540px;
    }
    /*(android  landscape) contenido pantallas*/
    #owl .item.android {
        height: 500px;
    }
    .pantalla.android .tituloPrincipal{
        top: 39px;
    }
    
    .pantalla.android .ccs-txt-Intro p:nth-child(2){
        margin-top: 50px;
    }
    .pantalla.android .css-btn-carrusel1-continuar {
        top: 572px;
    }
    .pantalla.android .pos2BotAnt {
        top: 572px;
    }
    .pantalla.android .css-posi-map {
        margin-top: 8%;
    }
    .pantalla.android .css-txt-map {
        margin: 137px 85px 0 0;
    }
    .pantalla.android .css-vntn-map {
        height: 81.4%;
    }
    .pantalla.android .memorama--reset {
        position: absolute;
        bottom: 266px;
        right: 5px;
    }
    .pantalla.android .vntn.vntn-feedback {
        /*        height: 100%;*/
        border: none;
    }
    .pantallas.fases .css-vntn-def.vntn {
        max-width: 50%;
        width: 50%;
    }
    .pantalla.android .css-btn-sigPreg {
        top: 410px;
    }
    .Css-vtn-respPreg {
        margin-top: 0;
    }
    .pantalla.android .css-txt-respVnt > p {
        margin-top: 4px;
    }
    .css-confirmaResp {
        margin-top: -38px;
    }
    /*TERMINA(android  landscape) contenido pantallas*/
    .css-btn-tip {
        bottom: 20px;
    }
    /* --------------------------------
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * -------------------------------- */
}

/* estilos aplican en width < 1024px  (iPad landscape) */

@media screen and (max-width: 1024px) {
    /* --------------------------------
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * -------------------------------- */
    .pantalla {
        min-height: 704px;
        /*        min-height:620px;*/
    }
    /*(Android" horizontal)*/
    .pantalla.ipad {
        min-height: 704px;
    }
    #owl .item.ipad {
        height: 674px;
    }
    /*PANTALLA  Que son los fosiles  */
    .css-btn-tip {
        bottom: 2%;
    }
    .css-btn-carrusel1-ant {
        left: 55%
    }
    .pantalla1 .css-btn-carrusel1.css-btn-carrusel1-sig {
        left: 810px;
    }
    .pantalla1 .css-btn-carrusel1.css-btn-carrusel1-continuar {
        top: 520px;
        left: 65%
    }
    /*pantalla final(que nos dicen los fosiles)	*/
    .css-txt-map {
        float: right;
        height: 170px;
        margin: 131px 41px 0 0;
        text-align: justify;
        width: 40%;
    }
    .css-img-fin {
        margin-left: 0%;
    }
    .css-masfosil {
        text-align: left;
        width: 95%;
        padding-top: 20px;
    }
    .css-masfosil-img {
        margin: 0 14px;
        width: 45%;
    }
    .pantalla1 .pos2BotAnt {
        left: 41%;
    }
    .css-masfosil.ipad {
        text-align: center;
        width: 100%;
    }
    .css-img-fin.ipad {
        margin-left: 0;
    }
    .css-masfosil-img.ipad {
        text-align: left;
        width: 42%;
    }
    /*    ESTILO HEADER*/
    .css-btn-menuSup.ccs-tituloSeccion {
        font-family: cloudy_with_a_chance_of_lovRg;
        font-size: 25px;
        height: 100%;
        letter-spacing: 1px;
        margin: 12px 0 auto 34px;
        text-align: center;
        width: 34%;
        line-height: normal;
    }
    .css-seccion-activa {
        border-bottom: 5px solid #ea5d55;
    }
    /*   TERMINA ESTILO HEADER*/
    .tituloPrincipal {
        left: 6%;
        top: 97px;
    }
    /*   ESTILO MENU QUE SON LOS FOSILES */
    .css-btn-seccion.dicen {
        line-height: normal;
    }
    /*  TERMINA ESTILO MENU QUE SON LOS FOSILES */
    /*preguntas ipad 1024px*/
    .Css-vtn-respPreg.ipad {
        width: 500px;
    }
    .css-ilustra-pregunta.ipad {
        right: -230px;
        top: -42px;
    }
    .css-btn-tip.ipad {
        bottom: 0;
    }
    .css-btn-sigPreg {
        top: 465px;
    }
    .css-ilustra-pregunta.ipad.final {
        right: -230px;
    }
    .pantalla1.ipad .owl-wrapper-outer {
        height: 636px;
    }
}

/* estilos palican width < 768px (iPad, Android portrait)*/

@media screen and (max-width: 800px) {
    /* --------------------------------
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * -------------------------------- */
    /*(windows" vertical)*/
    .pantalla {
        min-height: 1179px;
    }
    #owl .item {
        height: 840px;
    }
    /*(Android" vertical)*/
    .pantalla.android {
        min-height: 1111px;
    }
    #owl .item.android {
        height: 1100px;
    }
    .tituloPrincipal {
        float: none;
        left: 0;
        top: 10px;
        margin: 0 auto;
    }
    .ccs-txt-Intro p:nth-child(1) {
        padding-top: 52px;
    }
  .ccs-txt-Intro p:nth-child(2) {
    float: none;
    margin: 77px auto 0;
    width: 80%;
}
    .fondo > img {
        opacity: .3;
    }
    .ccs-menu-principal {
        bottom: 60px;
    }
    .css-bloqueitem.css-bloqueDer.android {
        left: 20%;
        position: absolute;
        top: 45%;
        height: 470px;
    }
    
     .pantalla.android .ccs-txt-Intro p:nth-child(2){
        margin-top: 93px;
    }
    .ccs-areaHeaderMenu::before {
        background: rgba(0, 0, 0, 0) url("../img/general/banner2.svg") no-repeat scroll 0 0;
        width: 216px;
    }
    .css-btn-menuSup.ccs-tituloSeccion {
        margin: 9px 0 auto -56px;
    }
    .css-btn-tip {
        bottom: 1%;
    }
    a.css-btn-carrusel1.css-btn-carrusel1-sig.css-btn-carrusel1-continuar {
        top: 880px;
        left: 39%;
    }
    .pantalla.android .pos2BotAnt {
        top: 970px;
    }
    .css-masfosil-img {
        /* margin: 0 14px; */
        width: auto;
    }
    .css-img-fin {
        margin: 21px auto;
    }
    .css-ul-fosil-tip {
        margin-bottom: 111px;
    }
    .css-mascara-slider {
        top: 10px;
        /*    left: -47px;*/
    }
    .pantalla1 .css-mascara-slider {
        left: -47px;
    }
    .pantalla2 .textorv {
        margin: 200px auto 46px;
    }
    .css-btn-carrusel2-sig {
        margin: 60px auto;
    }
    .memorama {
        margin: 220px auto 0;
    }
    .pantalla.android .memorama--reset {
        position: static;
        margin: 30px auto;
    }
    .pantalla4 .vntn--contenido {
        margin-top: 42px;
    }
    .feedback--img1,
    .feedback--img2 {
        margin: 3.5% 1.5% 0;
    }
    .pantalla.android .css-posi-map {
        margin-top: 28%;
    }
    .css-posi-map {
        margin-top: 28%;
    }
    .css-txt-map {
        width: 90%;
        margin: 0;
    }
    .css-vntn-map {
        height: 90.2%;
    }
    .pantalla.android .css-vntn-map {
        height: 89.5%;
    }
    .pantalla.android .css-txt-map {
        margin: 597px 45px 0 0;
    }
    .css-txt-map {
        margin: 597px 45px 0 0;
    }
    /* TERMINA (Android" vertical)*/
    .css-vtnimg-map-tit {
        margin: 120px auto 0;
    }
    .css-vtnimg-map-tit {
        margin: 60px auto 20px;
    }
    /*(windows" vertical)*/
    .css-btn-seccion.corporales {
        line-height: 65px;
    }
    .css-bloqueitem {
        width: 90%;
    }
    .css-bloqueitem.css-bloqueDer {
        left: 20%;
        position: absolute;
        top: 55%;
        height: 470px;
    }
    .css-mascara-slider {
        top: 0px;
    }
    /*(ipad" vertical)*/
    .pantalla.ipad {
        min-height: 928px;
    }
    #owl .item.ipad {
        height: 900px;
    }
    .css-bloqueitem.css-bloqueDer.ipad {
        left: 1%;
        position: absolute;
        top: 50%;
        height: 470px;
    }
    .css-btn-carrusel1 {
        bottom: 2%;
    }
    .css-masfosil.ipad {
        text-align: center;
        width: 100%;
    }
    .css-img-fin.ipad {
        margin-left: 9%;
    }
    .css-masfosil-img.ipad {
        margin-left: 10%;
        width: 95%;
    }
    /* PISTAS A VIDAS PASADAS (preguntas) */
    .css-ilustra-pregunta {
        right: 205px;
        top: 235px;
    }
    .css-ilustra-pregunta.final {
        right: 190px;
    }
    .css-ilustra-pregunta.final::after {
        display: none;
    }
    .css-confirmaResp {
        width: 90%;
    }
    .css-btn-sigPreg {
        left: 260px;
        top: 880px;
    }
    .pantalla.android .css-btn-sigPreg {
        left: 260px;
        top: 880px;
    }
    .css-btn-carrusel1-continuar {
        left: 35%;
        top: 980px;
    }
    .css-btn-carrusel1-ant {
        left: 22%;
        top: 920px;
    }
    .pantalla1 .css-btn-carrusel1.css-btn-carrusel1-sig {
        left: 54%;
        top: 920px;
    }
    .pos2BotAnt {
        top: 975px;
    }
    /*PANTALLA3*/
    .css-preg-item {
        margin: 439px auto 0;
        width: 85%;
    }
    .pantalla.android .css-preg-item {
        margin: 460px auto 0;
        width: 85%;
    }
    .css-ilustra-pregunta {
        right: 190px;
        top: 0;
    }
    .css-ilustra-pregunta::after {
        background: none;
        background-size: 300px;
    }
    .css-pregConteo {
        top: 102px;
        left: 302px;
    }
    .Css-vtn-respPreg {
        top: 706px;
        left: 40px;
    }
    .css-resumen-resp-final {
        margin-top: 522px;
    }
}

/* estilos palican width < 768px (iPad, Android portrait)*/

@media screen and (max-width: 768px) {
    /* --------------------------------
	 * Incluir aqui los estilos
	 * a los elementos que cambiaran. 
	 * -------------------------------- */
    .tituloPrincipal {
        float: none;
        left: 0;
        top: 10px;
        margin: 0 auto;
    }
    .ccs-menu-principal {
        bottom: 0;
    }
    .ccs-txt-Intro p:nth-child(1) {
        padding-top: 52px;
    }
    .ccs-txt-Intro p:nth-child(2) {
        float: none;
        margin: 21px auto;
        width: 80%;
    }
    .pantalla.android {
        min-height: 1200px;
    }
    .fondo > img {
        opacity: .3;
    }
    .pantalla.ipad {
        min-height: 960px;
    }
    .pantalla {
        min-height: 960px;
    }
    /*    generales*/
    .ccs-areaHeaderMenu::before {
        background: rgba(0, 0, 0, 0) url("../img/general/banner2.svg") no-repeat scroll 0 0;
    }
    .css-btn-menuSup.ccs-tituloSeccion {
        margin: 9px 0 auto -56px;
    }
    .css-posi-map {
        left: 37px;
        margin-top: 17%;
    }
    .css-btn-tip {
        bottom: 0%;
    }
    .css-vntn-map {
        height: 87.8%;
    }
    .css-vtnimg-map-tit {
        margin: 60px auto 20px;
    }
    .css-masfosil {
        padding-top: 0px;
    }
    /*TERMINA generales*/
    /*    PANTALLA1*/
    .css-btn-seccion.corporales {
        line-height: normal;
    }
    .pantalla1 .css-btn-carrusel1.css-btn-carrusel1-sig.css-btn-carrusel1-continuar {
        top: 880px;
        left: 38%;
    }
    .css-btn-carrusel1.css-btn-carrusel1-ant.pos2BotAnt {
        left: 288px;
        top: 883px;
    }
    .css-btn-carrusel1-ant {
        left: 210px;
        top: 883px;
    }
    .pantalla1 .css-btn-carrusel1.css-btn-carrusel1-sig {
        left: 410px;
        top: 883px;
    }
    .css-masfosil.ipad {
        margin-top: 75px;
        text-align: left;
    }
    .css-masfosil-img.ipad {
        margin: 0px auto;
        width: 100%;
        padding-top: 15px;
    }
    .css-img-fin.ipad {
        height: 230px;
        margin: 5px auto 0px;
    }
    .pantalla2 .textorv {
        margin: 181px auto 46px;
    }
    .pantalla4 .vntn--contenido {
        margin-top: 0px;
    }
    .feedback--img1,
    .feedback--img2 {
        margin: 1.5% 1.5% 0;
    }
    .feedback--img1,
    .feedback--img2 {
        display: inline-block;
        margin: 3.5% 1.5% 0;
    }
    .css-seccion.seccion-0.item .textorv {
        margin-top: 2%;
        width: 90%;
    }
    .textorv {
        margin-top: 70%;
        width: 90%;
    }
    #owl .item {
        display: block;
        height: auto;
        width: 100%;
    }
    .css-bloqueitem.css-bloqueIzq {
        width: 85%;
    }
    .item .css-mascara-slider {
        height: 292px;
        left: 0;
        margin: auto;
        position: relative;
        top: 0;
    }
    .css-bloqueitem {
        display: block;
        height: auto;
        margin: auto;
        position: relative;
        text-align: justify;
        vertical-align: middle;
        width: 100%
    }
    .css-ilustra-pregunta {
        position: relative;
        background-size: 220px auto, 220px auto;
        right: 170px;
        top: 227px;
    }
    .Css-vtn-respPreg {
        top: 500px;
        left: 20px;
        width: 665px;
    }
    .css-btn-sigPreg {
        top: 715px;
    }
    .css-ilustra-pregunta::after {
        background-repeat: no-repeat;
        background-size: 12px auto, 0 auto;
    }
    .css-ilustra-pregunta.ipad.final::after {
        display: none;
    }
    .pantalla.ipad .memorama {
        margin: 140px auto 0;
    }
    .pantalla.ipad .feedback--name {
        margin: 2px auto;
    }
    /* Seccion 3 preguntas Pistas a vidas pasadas*/
    /*PANTALLA3*/
    .pantalla.ipad .css-preguntas-area {
        position: absolute;
        width: 100%;
        top: 0px;
        left: 0;
    }
    .css-ilustra-pregunta.ipad {
        right: -210px;
        top: -550px;
        width: 260px;
        height: 260px
    }
    .css-ilustra-pregunta.ipad.final {
        right: -180px;
        top: -800px;
        width: 400px;
        height: 460px;
        background-size: 300px
    }
    .pantalla.ipad .css-preg-mod {
        width: 100%;
        height: 60px;
    }
    .css-preg-item {
        width: 85%;
        height: 200px;
    }
    .Css-vtn-respPreg.ipad {
        width: 95%;
        top: 690px;
    }
    .css-btn-sigPreg {
        top: 880px;
    }
    .pantalla.ipad .owl-carousel .owl-wrapper-outer {
        min-height: 870px;
        height: 870px;
    }
    .pantalla.ipad .css-owl-carousel2.owl-carousel .owl-wrapper-outer {
        height: 321px;
        min-height: 321px;
    }
    .css-pregConteo {
        top: 102px;
        left: 295px;
    }
}

/*ALTURAS PARA WINDOWS */

@media (max-height: 1185px) {
    .pantalla {
        min-height: 1185px;
        background: #3b124a url("../img/general/back.png") repeat scroll 0 0;
    }
}

/*WINDOWS 8 chrome*/
@media (max-height: 1179px) {
    .pantalla {
        min-height: 1179px;
        background: #3b124a url("../img/general/back.png") repeat scroll 0 0;
    }
}

@media (max-height: 1169px) {
    .pantalla {
        min-height: 1169px;
        background: #3b124a url("../img/general/back.png") repeat scroll 0 0;
    }
}

@media (max-height: 1163px) {
    .pantalla {
        min-height: 1163px;
        background: #3b124a url("../img/general/back.png") repeat scroll 0 0;
    }
}



@media (max-height: 1080px) {
    .pantalla {
        min-height: 683px;
        background: #3b124a url("../img/general/back.png") repeat scroll 0 0;
    }
}


/*WINDOWS 8 INTERNET EXPLORER*/
@media (max-height: 705px) {
    .pantalla {
        min-height: 705px;
        background: #3b124a url("../img/general/back.png") repeat scroll 0 0;
    }
}

@media (max-height: 699px) {
    .pantalla {
        min-height: 699px;
        background: #3b124a url("../img/general/back.png") repeat scroll 0 0;
    }
}
@media (max-height: 683px) {
    .pantalla {
        min-height: 683px;
        background: #3b124a url("../img/general/back.png") repeat scroll 0 0;
    }
}