body{

    margin: 0px;
   font-family: 'Raleway', sans-serif;


}

html, body{
    height: 100%;
    margin: 0px;
   font-family: 'Raleway', sans-serif;
   min-height: 100vh;
}

* {
  box-sizing: border-box;
}
.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: inherit;
}
.h1, h1 {
    font-size: 30px;

    font-weight: 700;

}

.h2, h2 {
    font-size: 16px;
    color: #ffffff;
    display: block;
}

.h3, h3 {
    text-align: center;
    
    color: #ffffff;
    font-size: 25px;
}

.h4, h4 {
    font-size: 18px;
    color: #ffffff;
    font-family: inherit;
}
.modal-body {
    
    padding: 15px!important;
}

/* ==========================================================
}


/* =========================================================
                     PRINCIPAL
============================================================ */


/*    __________menu1.1___________   */

.logo-delfin{
    width: 68%;
    margin-top: -10px;
}

.lot-delfin{
    margin-left: 3px !important;
    float: left;
    height: 15px;
    padding: 10px 3px;
}

.fon-delfin{
    color: #296a89!important;
    margin-top: 11px !important;
}


.barra-der {
    float: right;
    margin-right: 90px;
        padding-top: 10px;
}

.barra1{
  overflow: hidden;
  background-color: #e6edf0;

}

.ico-arriba{
    color: #296a89;
        display: inline-flex;
}
.ico-arriba:hover{
    color: #6298e2;
}

.entrar{
        font-size: 14px;
    margin: 1px;
}


.cuadroBote {
    border-color: #034066;
    background-color: #e6edf0;
}



/*    __________menu1.2___________   */
/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #040403; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 7px 8px 7px 12px;
    /*text-decoration: none;*/
    font-size: 12px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: -8px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 0px;
    background-color: #90debc;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 13px;}
}


.click{
    color:#296a89;
    float: right;
    margin-top: -50px;
    font-size: 34px;
    margin-right: 70px;
}

.click:hover {
    color: #6298e2;
}
.menu{
     margin-top: -9px;
     font-size: 14px;
}

.accordion {
    background-color: #040403;
    color: #ffffff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    padding: 8px 8px 8px 20px;
}


.active, .accordion:hover {
    /*background-color: #6399e1;*/
}

.enlace{
    background-color: #040403;
    color: #ffffff;
    border: none;
    margin-left: -5px;
}
.enlace:hover{
    background-color: #6399e1;
    color: #ffffff;

}

.texe{
    font-size: 14px !important;
    padding: 7px 8px 7px 20px !important;
     color: #ffffff;
}

.texe:hover{

     color: #ffffff !important;
}

.panel {
    padding: 0 18px;
    background-color: #040403;
    display: none;
    overflow: hidden;
    border-bottom: solid 2px #13b7ff78;
}


/*    __________fondo___________   */

.hero-image {
  background-image: url(/RecursosIQ/img/img_inicio_modales/bg4.png);
  background-color: #cccccc;
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.hero-image {
       background-size: 2000px auto;
        width: 6750px;
    }

 .hero-image  {
        -moz-animation: fondo 700s linear infinite;
        -webkit-animation: fondo 700s linear infinite;
        -ms-animation: fondo 700s linear infinite;
        animation: fondo 700s linear infinite;
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        /* Set your background with this */

        background-repeat: repeat-x;
        height: 100%;
        left: 0;
        opacity: 1;
        position: fixed;
        top: 0;

   
    }



    @-webkit-keyframes fondo {
        0% {
            -moz-transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }

        100% {
            -moz-transform: translate3d(-2250px,0,0);
            -webkit-transform: translate3d(-2250px,0,0);
            -ms-transform: translate3d(-2250px,0,0);
            transform: translate3d(-2250px,0,0);
        }
    }



/*  __________texto_principal___________  */


.texto {
    position: absolute;
    top: 79px;
    text-align: center;
    color: #f1f1f1;
    width: 100%;
    margin-top: 30px;

}

.h1, h1 {
    font-size: 30px;
}


a {
    color: white;
    text-decoration: none;
        text-decoration: none !important;
}


/* Style the button that is used to open and close the collapsible content */
.txt-principal {
    background-color: rgba(0,0,0,.5);
    color: #f9f9f9;
    cursor: pointer;
    padding: 18px;
    width: 50%;
    margin-left: 25%;
   /* margin-right: 25%*/
    border: none;
    text-align: center;
    outline: none;
    font-size: 20px;
    font-family: 'Source Sans Pro', sans-serif;
}
.modal-title {
    width: 95%;
    font-size: 16px;
    color: #ffffff;
    display: block;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.txt-principal:hover {
    background-color: rgba(0,0,0,.5);
    border-bottom: solid 2px #ffffff70;
}

/* Style the collapsible content. Note: hidden by default */
.txt-sub {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: rgba(0,0,0,.5);
    margin-left: 25%;
    margin-right: 25%;
    border: 1px solid rgba(0,0,0,.5);
    height: 39px;
    font-size: 17px;
}
.list-inline > li:first-child {
    padding-left: 0;
    margin-top: 5px;
}

.txt-principal:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 20px;
    color: white !important;
    float: right;

}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
    color: #ffffff !important;
    margin-left: -11px !important;

}

.caret {

    margin-top: 3px;

}



/*_____________segunda_iconos_____________*/
#iconitos{
    font-size: 39px;
    color: #fff;
    padding-top: 15px;
}

@media (min-width: 992px){
.iconitos {
    width: 970px;
}
}

.dos{
  padding-top: 0px;
}

.uno {
    padding-top: 110px;
    padding-top: 180px;
}

.btnos {
    border: none;
    background: none;
    padding-top:30px;
    color: #f8f0a9;
}


.iconos {
    color: black;
    text-align: center;
    width: 55px;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.iconos:hover {

     opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}


.bote-menu {
    color: white;
    font-size: 25px;
    font-weight: 700;
    margin-top: -8px;
    font-family: inherit;
}

.contenido {
    margin: 150px 0px 0px 0px;
    /* background-color: #0d0f37; */
    background-color: #034066;
}

.encabezado {
    padding: 10px;
    border-bottom: 1px solid #034066;
    background-color: #034066;
    color: white;
}


.fade.in {
    opacity: 1;
}

.modal-backdrop {

    background-color: #0d0f37;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: unset;
    
}

.bolas{
    width: 70px;
    padding-top: 10px;

}

.bolas:hover{
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */

}


/*_____________tercer_iconos_____________*/

.cuadros {
    color: #fff;
    background-color:  rgba(0, 0, 0, 0);
    border-color:  rgba(0, 0, 0, 0);
    margin-top: 11px;
    width: 100%
}
.cuadros:hover {
    color: #fff0 !important;
    background-color:  rgba(0, 0, 0, 0);
    border-color:  rgba(0, 0, 0, 0);
}

.cuadros:focus {
    color: #fff0 !important; 
    background-color: #ffffff00 !important;
    border-color: #ffffff00 !important;
}

#img_uno {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}


#img_uno:hover {
 opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.txt {
    font-size: 21px;
    white-space: normal;
    color: #ffffff;
    background-color: #034066;
    border-bottom: solid 2px #f5f5dc00;
    line-height: 35px;
    font-weight: 600;
}

.subtxt {
    font-size: 76%;
    font-weight: 500;
}


.parte_tres{
    position: relative;
    padding: 0px;
}

#ico{
font-size: 25px;
    color: white;
    margin-left: 190px;
    padding-top: 15px;
}

.icotxt{
    font-size: 14px;
    color: white;
    text-align: center;
    margin-top: -20px;
}

hr {
    margin-top: 20px;
    margin-bottom: 0px;
    opacity: 0.6;
     margin-left: 40px;
    margin-right: 40px;
}

.parte_tres:hover {
    position: relative;
    padding: 0px;
    background-color: #6399e1;
    text-decoration: none;
}



.delfin{
    width: 35px;
    margin-left: 194px;
    margin-top: 7px;

}

/*_____________pregunta_____________*/


/*preguntas*/



.sub-pie {
    background-color: #e6edf0;
    text-align: center;
    background-repeat: no-repeat;
    top: 0px;
    position: relative;
    background-position-x: 90%;
}

.img-tarjetas1{
    margin-top: 10px;
    width: 60px;
}

.img-tarjetas2{
    margin-top: -3px;
    width: 45%;
}

.img-tarjetas3{
    margin-top: 10px;
    width: 55px;
}


/*_____________footer_____________*/
.footer{

   left: 0;
   bottom: 0;
   width: 100%;
    background-color: #13384a; 
   text-align: center;
   padding: 10px;
   font-family: Oswald;
   position: relative;
}

.link-informacion{
    color: #fff;
    font-size: 15px;
}

.link-informacion:hover{
    color: #8ab7f3;
    font-size: 15px;
}



.li-info{
    margin-top: 30px;
    color: white;
}
.logoabajo {
    display: inline-block;
    margin-top: -25px;
}

.btn-jugartodos {
    background: #034066;
}

.btn-jugarbote {
    background: #034066;
}

.juegobote {
    border-color: #034066 ;
}
.btn-jugartodos:hover {
    border-color: #034066 ;
}

/*_____________medi@s principal_____________*/
    /*____Iphad____*/
@media (max-width: 1024px) {
    .hero-image {
        background-size: 3800px auto;
        width: 6750px;
    }

    /* .texto {
        top: 160px;
    }*/ 
    .uno {
        padding-top: 260px;
        width: fit-content;
    }
    .dos {
        padding-top: 30px;
        width: fit-content;
    }


}
   /*____Iphad_horizontal____*/
@media only screen and (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
    .texto {
        top: 80px;
    }

    .uno {
        padding-top: 185px;
        width: max-content;
    }
    .dos {

        width: max-content;
    }
}




    /*____IphoneX____*/

    @media (max-width: 414px) {
        .txt-principal {
            width: 85%!important;
            margin-left: 8%!important;
            font-size: 16px!important;
        }
        .txt-sub {
            width: 85% !important;
            margin-left: 8% !important;
            font-size: 16px !important;
        }
        /*  .texto {
            top: 160px;
        }*/ 

        .uno {
            margin-left: 0px;
            padding-top: 135px;
            width: auto;
        }

        .dos {
            margin-left: 0px;
            width: auto;
        }
    }

    @media (max-width: 414px) {
        .txt-sub {
            margin-left: 25%;
            margin-right: 15%;
        }

        /* .texto {
            top: 200px;
        }*/ 
    }

    @media (max-width: 414px) {
        .iconos {
            width: 50px;
        }
    }

    @media (max-width: 414px) {
        .h2, h2 {
            font-size: 12px;
        }
    }

    @media (max-width: 414px) {
        .bote-menu {
            font-size: 10px;
        }
    }

    @media (max-width: 414px) {
        #ico {
            margin-left: 80px;
        }
    }


    @media (max-width: 414px) {
        .barra-der {
            float: none !important;
            padding-left: 175px;
            margin-top: -35px;
            display: -webkit-inline-box;
            margin-left: 30px;
        }
    }

    @media (max-width: 414px) {
        .ico-arriba {
            font-size: 20px;
        }
    }

    @media (max-width: 414px) {
        .click {
            margin-top: -55px;
            margin-right: 26px;
        }
    }

    @media (max-width: 414px) {

        .h3, h3 {
            font-size: 20px;
        }
        .barra-botes {
            margin-top: 0px;
        }
    }

@media (max-width: 414px) {
    .txt {
        font-size: 13px;
        line-height: 23px;
    }
}

/*____Iphone_horizontal____*/
@media only screen and (max-width: 812px) and (min-width: 375px) and (orientation: landscape) {
    .texto {
        top: 188px;
    }

    .uno {
        padding-top: 260px;

    }

    .dos {
        padding-top: 30px;

    }

    .bote-menu {
        font-size: 25px !important;
    }
}

@media only screen and (max-width: 667px) and (min-width: 375px) and (orientation: landscape) {

    .bote-menu {
        font-size: 20px;
    }
}

    /*____IphoneX____*/

    @media (max-width: 1024px) {
        .footer {
            margin-top: 0px;
        }
    }

    @media (max-width: 375px) {
        .hero-image {
            background-size: 2800px auto;
        }
    }

    @media (max-width: 375px) {
        .txt-principal {
            width: 90%!important;
            margin-left: 5%!important;
        }
    }

    @media (max-width: 375px) {
        .txt-sub {
            height: auto;
            width: 90% !important;
            margin-left: 5% !important;
        }
    }

    @media (max-width: 375px) {
        .iconos {
            width: 50px;
      
        }
    }

    @media (max-width: 375px) {
        .h2, h2 {
            font-size: 11px;
        }
    }


    @media (max-width: 375px) {
        .bote-menu {
            font-size: 10px;
        }
    }

    @media (max-width: 375px) {
        #ico {
            margin-left: 80px;
        }
    }

    @media (max-width: 375px) {
        .barra-der {
            float: none !important;
            padding-left: 175px;
            margin-top: -35px;
            display: -webkit-inline-box;
            margin-left: 30px;
        }
    }

    @media (max-width: 375px) {
        .ico-arriba {
            font-size: 20px;
        }
    }

    @media (max-width: 375px) {
        .click {
            margin-top: -55px;
            margin-right: 26px;
        }
    }

    @media (max-width: 375px) {
        .dos {
            margin-left: 0px;
        }

        .uno {
            margin-left: 0px;
            margin-top: -10px;
        }

        .barra-botes {
            margin-top: 0px;
        }
        .h3, h3 {
            font-size: 18px;
        }
    }

    /*____Iphone5____*/


@media (max-width: 320px) {
    .txt-principal {
        width: 75%;
    }

    .txt-sub {
        margin-left: 15%;
        margin-right: 10%;
    }

    .txt {
        font-size: 10px!important;
    }
}
    @media (max-width: 375px) {
        .txt {
            font-size: 12px;
            line-height: 20px;
        }
    }

    @media (max-width: 320px) {
        #ico {
            margin-left: 55px;
        }

        .barra-botes {
            margin-top: 0px;
        }
    }
    @media (max-width: 375px){
        .h3, h3 {
        font-size: 14px;
        }
}

    /* =========================================================
                     EUROMILLONES
============================================================ */


    /* _____________IMAGENEN SUPERIOR_____________ */
    .fondo {
        background-image: url(../img/fondo.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: auto;
        opacity: 0.9;
    }

    .superior {
        height: 15em;
        width: 100%;
        position: absolute;
        z-index: -1;
    }

    .superior {
        background: transparent url('../img/bg4-2.png') no-repeat top;
        top: 0px;
        border-bottom: solid 2px white;
    }



    /* _____________TEXTO_PRINCIPAL_____________*/

    /*____ Header ____  */
    #header {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
        -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
        background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
        background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
        max-width: 100%;
        text-align: center;
    }

        #header > * {
            -moz-transition: opacity 0.325s ease-in-out;
            -webkit-transition: opacity 0.325s ease-in-out;
            -ms-transition: opacity 0.325s ease-in-out;
            transition: opacity 0.325s ease-in-out;
            position: relative;
            margin-top: -0.5rem;
            /*margin-top: 0.9rem;*/
        }




        #header .principal-euro {
            border-style: solid;
            border-color: #ffffff;
            border-top-width: 1px;
            border-bottom-width: 6px;
            background-color: rgba(0, 0, 0, 0.5);
            margin-top: 95px;
            width: 50%;
            height: 100px;
            margin-left: 300px;
        }

            #header .principal-euro .txt-euro-prin {
                -moz-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
                /* -webkit-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; */
                -ms-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
                /* transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; */
                -moz-transition-delay: 0.25s;
                /* -webkit-transition-delay: 0.25s; */
                -ms-transition-delay: 0.25s;
                /* transition-delay: 0.25s; */
                padding: 1rem 2rem;
                ;
                max-height: 40rem;
                overflow: hidden;
            }

                #header .principal-euro .txt-euro-prin > :last-child {
                    margin-bottom: 0;
                    color: white;
                }

    .euromil {
        font-size: 20px;
        color: white;
        margin: -2px;
        text-transform: uppercase;
        letter-spacing: 0.2rem;
        font-weight: 500;
        padding-top: 10px;
    }

    .imgeuro {
        margin: 1px;
    }

    .bote-euro {
        color: white;
        font-weight: 700;
        font-size: 18px;
        padding-top: 5px;
        margin-left: 36px;
    }

    .fecha {
        font-size: 18px;
        text-align: center;
        color: white;
        margin: -2px;
        padding-top: 10px;
    }

    .retroceder {
        text-align: center;
        font-size: 18px;
        margin: -2px;
        letter-spacing: 0.2rem;
        padding-top: 10px;
    }

    #retro {
        font-size: 18px;
        color: white;
    }


    /* _____________SECCION_UNO_____________ */

    .services-list {
        text-align: center;
        margin-top: 25px;
        margin-top: 30px;
    }

    .btn-cuatro {
        color: #ffffff;
        background-color: #6399e1;
        width: 100%;
        border: 1px solid #dbeaf6;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        letter-spacing: 0.2rem;
        font-size: 0.9rem;
        line-height: 2.75rem;
        padding: 3px 12px;
    }

        .btn-cuatro:hover {
            color: #6298e2;
            background-color: #fff;
            border-bottom: solid 1px #6298e2;
        }

    /* _____________SECCION_DOS_____________ */

    .celda {
        width: 100%;
        height: auto;
        margin-top: 30px;
    }

    /* _____________SECCION_TRES_____________ */



    .contenedor-paginador, .contenedor-paginador2 {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border: 1px solid #6399e1;
        background-color: #dae5f5;
        color: #337ab7;
    }

        .contenedor-paginador .btnFlecha, .contenedor-paginador2 .btnFlecha {
            margin-right: 0px !important;
            min-height: 30px;
            line-height: 2.75rem;
            padding: 1px 12px;
            background-color: #6298e2;
            color: white;
        }

        .contenedor-paginador p, .contenedor-paginador2 p {
            margin-bottom: 0 !important;
            min-height: 30px;
            line-height: 21px;
            width: 100%;
            letter-spacing: 0.2rem;
            font-size: 0.9rem;
            line-height: 2.75rem;
            padding: 3px 12px;
        }

    .dentro-modal {
        color: white;
        padding: 40px;
    }


    .btn-cuatro-dentro {
        margin-bottom: 10px;
    }


        .btn-cuatro-dentro:hover {
            color: #6298e2;
            background-color: #fff;
            border-bottom: solid 1px #6298e2;
        }



    .btnos-cuatro {
        left: 310px;
        background-color: #6298e2;
    }



    .btns-cuatro {
        min-width: 7.5rem;
        height: 2.75rem;
        line-height: 2.75rem;
        padding: 0px 4.25rem 0 1.80rem;
        text-transform: uppercase;
        letter-spacing: 0.2rem;
        font-size: 0.8rem;
        color: white;
        border-left: solid 1px #ffffff;
        border-bottom: 0;
    }

        .btns-cuatro:hover {
            color: #6298e2;
            background-color: #fff;
            border-bottom: solid 2px #6298e2;
        }

    /* _____________SECCION_CUATRO_____________ */
    .doscuadros {
        margin-top: 30px;
    }
    /*____ izquierda ____  */


    .panel-izq {
        border: 1px solid #999;
        border-radius: 0;
        transition: box-shadow 0.5s;
        display: list-item;
        background-color: white;
        padding: 0 0px;
    }

    .titulo-panel-izq {
        color: #fff !important;
        background-color: #6399e1 !important;
        padding: 10px;
        border-bottom: 1px solid transparent;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .txt-semana {
        text-align: left;
        margin-top: 0;
        line-height: 2;
        /* text-transform: none; */
        /* letter-spacing: 0; */
        font-size: 15px;
    }

    .btn-izq {
        background-color: #6399e1;
        border: 1px solid #dbeaf6;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size: 0.9rem;
        line-height: 2.75rem;
        padding: 3px 12px;
        width: 35%;
        text-transform: uppercase;
        letter-spacing: 0.3rem;
    }

        .btn-izq:hover {
            color: #6298e2;
            background-color: #fff;
            border-bottom: solid 1px #6298e2;
        }

    .circulos {
        margin-top: 10px;
        padding: 10px;
    }

    .txt-dias {
        text-align: center;
        font-size: 12px;
        margin-top: 5px;
        line-height: 2.75rem;
    }

    .semana {
        display: inline;
    }

    #dias {
        border-radius: 100px;
        padding: 9px 13px;
        color: #ffffff;
        margin-top: 8px;
        background-color: #6399e1;
        line-height: 2.75rem;
    }

        #dias:hover {
            background-color: red;
        }


    /*____ derecha ____  */

    .panel-der {
        border: 1px solid #999;
        border-radius: 0;
        transition: box-shadow 0.5s;
        display: list-item;
        background-color: white;
        padding: 0 0px;
    }

    .titulo-panel-der {
        color: #fff !important;
        background-color: #6399e1 !important;
        padding: 12px;
        border-bottom: 1px solid transparent;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .text-center-euro:hover {
        box-shadow: 5px 0px 40px rgba(0,0,0, .2);
    }

    .importe {
        text-align: center;
        margin-top: 0;
        line-height: 2;
        font-size: 15px;
    }

    .txt-dias-der {
        font-size: 12px;
        padding: 18px;
        padding-top: 8px;
    }

    .ceros {
        font-size: 26px;
        line-height: 3.07rem;
    }

    .btn-der {
        color: #ffffff;
        -moz-border-radius: 3px;
        margin: 40px 0px 0px 0px;
        background-color: #6399e1;
        border: 1px solid #dbeaf6;
        -moz-border-radius: 3px;
        border-radius: 3px;
        font-size: 0.9rem;
        line-height: 2.75rem;
        padding: 3px 12px;
        width: 35%;
        text-transform: uppercase;
        letter-spacing: 0.3rem;
    }

        .btn-der:hover {
            color: #6298e2;
            background-color: #fff;
            border-bottom: solid 1px #6298e2;
        }



    /* _____________SECCION_CINCO_____________ */
    /*____Banda____*/


    /*_____________banda_____________*/


    .banda {
        /*background: transparent url(../img/bg4-2.png) no-repeat top;*/
        padding: 10px;
        background-color: #6399e1;
        margin-top: 30px;
    }

    #banda-icon {
        color: white;
        text-align: center;
    }

    #ico-ban {
        font-size: 30px;
    }

    /* _____________SECCION_CUATRO_____________ */
    .tresbotones {
        margin-top: 30px;
    }
    /* ___banda_producto___ */

    .banda-producto {
        /* background: transparent url(../img/bg4-2.png) no-repeat top;*/
        padding: 10px;
        background: #6298e2;
        margin-top: 30px;
    }

    .txt-producto {
        color: white;
        font-size: 30px;
        text-align: center;
    }

    .sub-producto {
        color: white;
        font-size: 20px;
        text-align: center;
    }

    .moneda {
        width: 40%;
        text-align: center;
        margin-left: 130px;
    }


    #mo-solid {
        color: white;
        font-size: 61px;
        margin-left: 220px;
    }




    /*_____________medi@s_Euro_____________*/


    /*____Iphad____*/


    @media (max-width: 1024px) {
        #header .principal-euro {
            width: 60%;
            margin-left: 159px;
        }
    }

    @media (max-width: 1024px) {
        .euromil {
            font-size: 14px;
        }
    }

    @media (max-width: 1024px) {
        .fecha {
            font-size: 12px;
            padding-top: 16px;
        }
    }

    @media (max-width: 1024px) {
        .retroceder {
            font-size: 12px;
        }
    }

    @media (max-width: 1024px) {
        .btn-cuatro {
            font-size: 0.7rem;
        }
    }

    @media (max-width: 1024px) {
        .contenedor-paginador .btnFlecha, .contenedor-paginador2 .btnFlecha {
            padding: 1px 10px;
        }
    }

    @media (max-width: 1024px) {
        .txt-semana {
            text-align: left;
            margin-top: -5px;
            font-size: 12px;
        }
    }

    @media (max-width: 1024px) {
        .btn-izq {
            width: 50%;
        }
    }

    @media (max-width: 1024px) {
        .btn-der {
            width: 48%;
        }
    }

    @media (max-width: 1024px) {
        .importe {
            font-size: 12px;
        }
    }

    @media (max-width: 1024px) {
        .txt-dias-der {
            padding: 14px;
        }
    }

    @media (max-width: 1024px) {
        .txt-dias {
            margin-top: -6px;
        }
    }
@media (max-width: 1024px) {
    .txt-principal {
        width: 75%;
        margin-left: 10%;
    }

    .txt-sub {
        margin-left: 10%;
        margin-right: 15%;
        height: auto;
    }
}
        /*____Iphone6____*/
        @media (max-width: 414px) {
            #header .principal-euro {
                width: 90% !important;
                margin-left: 15px !important;
            }
        }


        @media (max-width: 414px) {
            .euromil {
                font-size: 12px;
                letter-spacing: normal;
            }
        }

        @media (max-width: 414px) {
            .imgeuro {
                margin: 1px;
                width: 19px;
            }
        }

        @media (max-width: 414px) {
            .bote-euro {
                font-size: 15px;
                padding-top: 5px;
                margin-left: 15px;
            }
        }

        @media (max-width: 414px) {
            .fecha {
                font-size: 11px;
                padding-top: 9px;
                letter-spacing: normal;
            }
        }

        @media (max-width: 414px) {
            .retroceder {
                font-size: 12px;
                letter-spacing: normal;
            }
        }

        @media (max-width: 414px) {
            #retro {
                font-size: 15px;
                color: white;
            }
        }
        /*____IphoneX____*/
        @media (max-width: 375px) {
            #header .principal-euro {
                width: 90% !important;
                margin-left: 15px !important;
            }
        }

        @media (max-width: 375px) {
            .euromil {
                font-size: 12px;
                letter-spacing: normal;
            }
        }

        @media (max-width: 375px) {
            .imgeuro {
                margin: 1px;
                width: 19px;
            }
        }

        @media (max-width: 375px) {
            .bote-euro {
                font-size: 15px;
                padding-top: 5px;
                margin-left: 15px;
            }
        }

        @media (max-width: 375px) {
            .fecha {
                font-size: 11px;
                padding-top: 9px;
                letter-spacing: normal;
            }
        }

        @media (max-width: 375px) {
            .retroceder {
                font-size: 12px;
                letter-spacing: normal;
            }
        }

        @media (max-width: 375px) {
            #retro {
                font-size: 15px;
                color: white;
            }
        }

        @media (max-width: 375px) {
            .circulos {
                margin-top: 0px;
                padding: 10px;
            }
        }
        /*____Iphone5____*/
        @media (max-width: 320px) {
            .euromil {
                font-size: 9px;
                letter-spacing: normal;
            }
        }

        @media (max-width: 320px) {
            .imgeuro {
                margin: 1px;
                width: 15px;
            }
        }

        @media (max-width: 320px) {
            .bote-euro {
                font-size: 12px;
                padding-top: 5px;
                margin-left: 9px;
            }
        }

        @media (max-width: 320px) {
            .fecha {
                font-size: 10px;
            }
        }

        @media (max-width: 320px) {
            .retroceder {
                font-size: 11px;
                letter-spacing: normal;
            }
        }

        @media (max-width: 320px) {
            #retro {
                font-size: 12px;
                color: white;
            }
        }

        @media (max-width: 320px) {
            .btn-cuatro {
                font-size: 0.6rem;
            }
        }

        @media (max-width: 320px) {
            .contenedor-paginador .btnFlecha, .contenedor-paginador2 .btnFlecha {
                padding: 0px 6px;
            }
        }


        @media (max-width: 320px) {
            .contenedor-paginador p, .contenedor-paginador2 p {
                letter-spacing: normal;
            }
        }

        .barra-botes {
    padding: 0px 0px;
    background: #ffffff;
    padding: 120px 0px;
}