@charset "utf-8";




@import url('https://fonts.googleapis.com/css?family=Poppins:600,700|Roboto');
	
/* FONTS */
 
@font-face {
    font-family: "PublicSans-BoldItalic";
    src: url("/f/loterias/estaticos/fonts_sass/PublicSans-BoldItalic.woff2") format("woff");
}
@font-face {
    font-family: "PublicSans-Regular";
    src: url("/f/loterias/estaticos/fonts_sass/PublicSans-Regular.woff2") format("woff");
}
@font-face {
    font-family: "PublicSans-Light";
        src: url("/f/loterias/estaticos/fonts_sass/PublicSans-Light.woff2") format("woff");
}
 
@font-face {
    font-family: "PublicSans-Thin";
        src: url("/f/loterias/estaticos/fonts_sass/PublicSans-Thin.woff2") format("woff");
}
 
@font-face {
    font-family: "PublicSans-Bold";
        src: url("/f/loterias/estaticos/fonts_sass/PublicSans-Bold.woff2") format("woff");
}
@font-face {
    font-family: "PublicSans-SemiBoldItalic";
        src: url("/f/loterias/estaticos/fonts_sass/PublicSans-SemiBoldItalic.woff2") format("woff");
}
@font-face {
    font-family: "PublicSans-SemiBold";
        src: url("/f/loterias/estaticos/fonts_sass/PublicSans-SemiBold.woff2") format("woff");
 
}
*{
	padding: 0;
	margin: 0;
}
body{
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 23px;
    color: #777;
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Poppins', sans-serif !Important; 
	color: #444 !Important;
}

h2{
    font-size: 28px;
    margin: 0 0 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing:0.07em;
}
h3,h4{
    margin: 0 0 14px;
    font-weight: 700;
    line-height: 1.6;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}
h3{
    font-size: 17px;
}
h4{
    font-size: 18px;
}
h5,h6{
    font-size: 14px;
    margin: 0 0 10px;
}
img{
    border: none;
    outline:none;
}
ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
p, li, a, span{}
p{
    font-size: 16px;
    margin-bottom: 15px;
}
a, a:hover{
    text-decoration: none;
}
a:focus{
    outline: 0;
    text-decoration: none;
}

/* Helper Class */
.padding{
    padding: 80px 0;
}
.no-padding{
    padding: 0;
}

.text-black{
    color: #282828;
}
.text-white{
    color: #ffffff;
}
.align-left{
    text-align: left;
}
.align-right{
    text-align: right;
}
.align-center{
    text-align: center;
}
.fl-right{
    float: right;
}
.fl-left{
    float: left;
}
.display-table{
    width: 100%;
    height: 100%;
    /*! display: table; */
}
.table-cell{
    /*! display: table-cell; */
    /*! vertical-align: middle; */
}

.overlay{
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.bt-ld {text-align: center;
margin-top:4%;}

.hero_btn {
 display: inline-table;
  border: 1px solid white;
  font-size: 16px;
  font-weight: 500;
  min-width: 250px;
  background: rgba(255, 255, 255, 0.74);
  outline: 1px solid white;
    outline-color: white;
  outline-color: rgba(255, 255, 255, 0.9);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  letter-spacing: 1.8px;
  padding: 14px 0;
  margin: 12px 17px 20px 17px;
  color: black;
}
.hero_btn-2, 
.hero_btn-1 {display: inline-table;
  border: 1px solid white;
  font-size: 16px;
  font-weight: 500;
  min-width: 250px;
  background: rgba(255, 255, 255, 0.74);
  outline: 1px solid white;
  outline-color: rgba(255, 255, 255, 0.9);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  letter-spacing: 1.8px;
  padding: 14px 0;
  margin: 12px 17px 20px 17px;
color: black;
}
 

.hero_btn:hover { background-color: orange;
    outline-color: rgba(21, 63, 105, 0);
    outline-offset: 80px;
    color: white;}

.hero_btn-1:hover {background-color: #7a8634;}
.hero_btn-2:hover {background-color: #008547;}

.hero_btn-1:hover,.hero_btn-2:hover {
    outline-color: rgba(21, 63, 105, 0);
    outline-offset: 80px;
    color: white;
}

.precio {text-align: center;
  margin-top: 4%;}

/* Transition Effect */
a,a:hover, .overlay, img, .form-control,  .form-control:hover, button{
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
/* ==========================================================================
   carrusel-slider
   ========================================================================== */
.slider1 {
	width: 100%;
	margin: auto;
	overflow: hidden;
    color: white;
	margin-top: 20px;
	/*! padding: 5%; */
	text-align: center;
}

.slider1 ul {
	display: flex;
	padding: 0;
	width: 400%;
	
	animation: cambio 15s infinite normal linear;
	/*! color: white !important; */
}

.slider1 li {
	width: 100%;
	list-style: none;
	font-size:1.6em;
	line-height: 41px;
	padding-top: 107px;
	color: white !important;
	
}
.slider1 li span{
    color: white;
}

.slider1 img {
	width: 100%;
}

@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}






/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero_section_lapr{
    background-image: url('https://www.loteriasyapuestas.es/f/loterias/Landing/img/primitiva/fondo-lapr-.jpg');}
.hero_section_bono {
    background-image: url('https://www.loteriasyapuestas.es/f/loterias/Landing/img-genericas/hero-2.jpg');}
    
    .hero_section_bono, .hero_section_lapr{  
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    min-height: 840px;
    position: relative;
    z-index: 1;
    width: 100%;
}
#bubble-canvas{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}


.hero_content h1{color: white !important;font-size: 36px;line-height: 1.2;font-weight: 700;letter-spacing: -0.04em;/*! margin: auto; *//*! max-width: 800px; */padding: 3%;text-align: center;}
.hero_content p {
    color: #fff;
    text-align: left;
    
}

.animation-target {
    transform: scaleX(0);
    /*! transform: scaleY(0); */}

/*BOTES*/

#valor_bote_ed,
#valor_bote_lapr, 
#valor_bote_emil, 
#valor_bote_laqu, 
#valor_bote_elgr, 
#valor_bote_bono, 
#valor_bote_lotu,
#valor_bote_qgol, 
#valor_bote_lnac {
    font-weight: 700;
    color: #ffffff;-webkit-
    background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    font-size:70px;
    line-height: 22px;

    letter-spacing: -3px;
    text-shadow: 2px 5px 5px rgba(0,0,0,0.4);
}


#valor_bote_ed:hover,
#valor_bote_lapr:hover, 
#valor_bote_emil:hover, 
#valor_bote_laqu:hover, 
#valor_bote_elgr:hover, 
#valor_bote_bono:hover, 
#valor_bote_lotu:hover,
#valor_bote_qgol:hover, 
#valor_bote_lnac:hover {
    font-weight: 700;
    color: orange;-webkit-
    background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    font-size:70px;
    line-height:22px;

    letter-spacing: -3px;
text-shadow: 2px 5px 5px rgba(0,0,0,0.4);}

#fechaBote_ed, #fechaBote_lapr, #fechaBote_emil,  #fechaBote_elgr, #fechaBote_laqu, #fechaBote_bono,  #fechaBote_lotu,  #fechaBote_qgol, #fechaBote_lnac {font-size:20px;letter-spacing:1px;color:#ffffff;font-weight: lighter; line-height: 43px; margin-bottom: 3%;}


/*FIN BOTES*/
/* ==========================================================================
   Promo Section
   ========================================================================== */
.promo_section{
    background-color: #f7f7f7;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}
.promo_items{
    text-align: center;
    margin-top: -18px;
}
.promo_item{
        padding: 41px 33px;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    min-height: 254px;
    margin-top: 4%;
    background-color: white;
}
.promo_item:hover{
    background-color: #fff;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.24);
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.promo_items .promo_item i{
    font-size: 28px;
    color: #f77030;
    margin-bottom: 10px;
    transition: all 0.2s ease-in-out;
}

.promo_items .promo_item h3{
    margin: 10px 0 5px;
}
.promo_items .promo_item p{
    margin: 0;
}



/* ==========================================================================
   Feature Section
   ========================================================================== */
.feature_section{
    background: #f98f1c;
    background: rgba(122,134,52,0.1);
    content: '';
}
.feature_section .section_heading h2{
    color: #fff;
}
.feature_section .section_heading p{
    color: #505050;
    margin-top: 3%;
    margin-bottom: 3%;
}
.feature_lists .col-sm-4{
    padding: 15px;
}
.feature_lists .feature_list{
    border: 1px solid #fff;
    padding: 25px;
    transition: all 0.3s ease-in-out;
    background-color: rgba(122,134,52,0.7);
    height: 209px;
    margin-top: 5%;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: 6%;
}
.feature_section .feature_list:hover{
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.24);
    transition: all 0.3s ease-in-out;
}
.feature_section .feature_list .feature_content{
    display: block;
    text-align: center;
    letter-spacing: 1px;
}
.feature_section .feature_list .feature_content i {
    display: inline-block;
    font-size: 40px;
    color: #fff;
}
.feature_section .feature_list .feature_content h4{
    color:  white !important;
    margin: 10px 0 14px;
}
.feature_section .feature_list .feature_content p{
    color: rgba(255,255,255,1);
    margin: 0;
}



/* ==========================================================================
   Video Section
   ========================================================================== */

.video_section_lapr{
    background-image: url("https://www.loteriasyapuestas.es/f/loterias/Landing/img/primitiva/video-lapr.jpg");}
.video_section{
    background-image: url("https://www.loteriasyapuestas.es/f/loterias/Landing/img/primitiva/video-bg.jpg");}
 .video_section_lapr, .video_section{   
	
	background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    padding: 180px 0;
    z-index: 1;
}

.video_section:before{
    
   
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
    z-index: -1;
}
.video_content{
    color: #fff;
}
/*.video_content a{
    background-color: #fff;
    display: inline-block;
    font-size: 24px;
    border-radius: 50%;
    color: #7a8634;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    margin-right: 15px;
}
.video_content a:hover{
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.24);
}*/
.video_content span{
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
    text-align: left;
}

/* Botón para abrir
.open-btn {
  /*! display: inline-block; */
  /*! padding: 10px 15px; */
  /*! background: #007ac0; */
  /*! color: #fff; */
  /*! border-radius: 4px; */
  /*! margin: 20px;
}

/* Modal */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Contenedor del contenido */
.modal-content {
  position: relative;
  width: 80%;
  max-width: 800px;
}

.modal-content video {
  width: 100%;
  border: 3px solid #fff;
  border-radius: 8px;
}

/* Botón de cierre */
.close {
  position: absolute;
  top: -35px;
  right: -35px;
  background: #fff;
  color: #000;
  font-size: 28px;
  font-weight: bold;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.close:hover {
  background: #ff0000;
  color: #fff;
}

/* ==========================================================================
   Scroll To Top
   ========================================================================== */
#scroll-to-top{
    
    
    content: '';
    display: none;
    width: 34px;
    height: 34px;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    line-height: 35px;
    color: #fff;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 999;
    box-shadow: -1px 6px 23px -5px rgba(0,0,0,0.6) !important;
    /*! -webkit-box-shadow: !; */
}
#scroll-to-top:hover{
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.25);
    color: #fff;
}

/* ==========================================================================
  Responsive
   ========================================================================== */





@media (max-width: 450px) 
{
    .hero_section_lapr{
    background-image: url('https://www.loteriasyapuestas.es/f/loterias/Landing/img/primitiva/fondo-lapr-movil.jpg');}
    .hero_section_bono{
    background-image: url('https://www.loteriasyapuestas.es/f/loterias/Landing/img/primitiva/fondo-bono-movi.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    min-height: 700px;
    position: relative;
    z-index: 1;
    width: 100%;
}
    
    .feature_lists .feature_list  {min-height:261px;}
    
    
    .hero_content_h1 
    {font-size:50px; text-align: center; /*! margin-left: 0px; */max-width: 100%;}
    .hero_section {min-height: 700px;}
    h1 {font-size:80px;}
    .doc_content {padding: 0;}
    
  #valor_bote_ed,#valor_bote_lapr, #valor_bote_emil, #valor_bote_laqu, #valor_bote_elgr, #valor_bote_bono, #valor_bote_lotu,#valor_bote_qgol, #valor_bote_lnac 
   {font-size:50px;
    letter-spacing:-3px; 
    color:white;}

    
    
    #valor_bote_ed:hover,
#valor_bote_lapr:hover, 
#valor_bote_emil:hover, 
#valor_bote_laqu:hover, 
#valor_bote_elgr:hover, 
#valor_bote_bono:hover, 
#valor_bote_lotu:hover,
#valor_bote_qgol:hover, 
#valor_bote_lnac:hover {font-size:50px;letter-spacing:-3px; color:orange;}
    
    #fechaBote_bono {margin-top:3px;}   
    
    
   
    .col-sm-4, col-sm-6, col-sm-8 {
    width: 100%;
}
    .hero_content h1 {font-size: 23px; text-align:center; color:white !important;}
    
    .slider1 {text-align: center;}
.slider1 li {
  width: 100%;
  list-style: none;
  font-size: ;
  line-height: 50px;
  padding-top: 0px;
  color: white !important;
}
    
    .hero_content{text-align:center;margin-top: 108px;}

.hero_content p {
    color: #fff;text-align: center;
}
 .promo_item, .feature_list {
    flex: 1 1 100%;
  }
  .slider1 li {
    font-size: 1.5em;
  }
  .precio {text-align: center;
  margin-top:8%;} 
 .hero_btn {
  
  font-size: 17px;
  font-weight: 700;
  min-width:250px;
  
  padding: 16px 0;
     margin: 10px 0 0px 0px;}
 

.hero_btn-1, .hero_btn-2 {font-size: 17px;
  font-weight: 700;
  min-width:250px;
 padding: 16px 0;
 margin: 10px 0 0px 0px;
min-width: 250px;
}   
 .hero_btn-1:active,.hero_btn-1:focus, .hero_btn-2:active, .hero_btn-2:focus 
 {font-size: 17px;
  font-weight: 700;
  min-width:250px;
  padding: 16px 0;
  margin: 10px 0 0px 0px;
  min-width: 250px;
  color:white;opacity:1;} 
    
 .hero_btn-1:active, .hero_btn-1:focus {background-color:#7a8634;}   
 .hero_btn-2:active, .hero_btn-2:focus {background-color:#008547;}   
}




/* CSS Document */