/*@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;300i;400;600;700;800&display=swap');*/
/* font-family: 'Lato', sans-serif; */

/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&display=swap');*/
/* font-family: 'Open Sans Condensed', sans-serif; */


@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,200;0,300;0,400;0,600;1,300;1,400&display=swap');
/*font-family: 'Barlow Semi Condensed', sans-serif;*/

*,
::after,
::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/*
* {
    transition: all .27s linear;
    -moz-transition: all .27s linear;
    -webkit-transition: all .27s linear;
    -o-transition: all .27s linear
}
*/
 
body {
    margin: 0;
    padding: 0;
    color:#666666;
    background: #fff;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 18px; font-weight:300; position:relative; height:100%;
	
}


a,
a:hover,
a:active,
a:visited,
a:focus {
    text-decoration: none;
    color: inherit;
    outline: none;
    outline: 0;
    border: none;
    -moz-outline-style: none; cursor:pointer
}
a:hover{ opacity:0.75}
.nopadding{ padding:0px}

p{ margin:0; 
 -ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

}

/*bg app*/
.bg_app{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1;
/*
transition: all 6.27s linear;
 -webkit-animation: zoomin 180s linear infinite;
 animation: zoomin 180s linear infinite; 
 -moz-transition: all 6.27s linear;
 -webkit-transition: all 6.27s linear;
 -o-transition: all 6.27s linear}

  @-webkit-keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.7);}
  100% {transform: scale(1);}
  */
}
  
.nologin{ padding: 25px; text-align: center; max-width: 350px; margin: 0 auto; border: 1px solid #eee; border-radius: 10px; margin-top: 25px;}

.app_content{    position: fixed; top:52px; bottom:52px; left:0; right:0; overflow:hidden;   width:100%; max-width:700px; margin:0 auto}
.app_scroll{overflow:inherit; position:relative; height:100%;}


.btn_vermas{ max-width:85px; text-align:center; color:rgba(1,73,151,0.61); font-size:14px; font-weight:700; margin:10px 0; cursor: pointer} 
.btn_vermas.btn_center{ margin:20px auto}
.btn_vermas:hover{ opacity:0.7}
 
/* header */
header h1{   color: #fff; text-shadow: 1px 1px 3px rgba(107, 107, 107, 1);
    font-size: 20px;
    font-weight: 700;
    padding-top: 12px;
    line-height: 24px;
    margin-bottom: 0;
    padding-bottom: 0;}
header .logotipo{ margin-right:15px}

header .icon_user{ height:30px;  margin:12px 8px 0px 0px}
header .icon_menu{height:30px;  margin:12px 5px 0px 0px}
header .container{ position:relative}


 h2 { 
    font-weight: 300; 
    margin-bottom: 0;
    font-size: 25px;
    color: #2e5b89;
} 


header{position:fixed; z-index:8888; top:0px; left:0; right:0; background-color:rgba(1,73,151,0.28);}
header .container{max-width: 701px;} 
.pblue{color:#10356B; margin:0 }
.pdorado{ color:#BC8015; font-size:15px}

.borderb{border-bottom:3px solid #fff;}
.header_content{ padding-bottom:7px; line-height: 1.2; }
.image_right_header{
width: 111px;
position: absolute; 
right: 0;
bottom: 0;
opacity: 0.5; 
}

/*footer*/
footer{ display:none;position:fixed; bottom:0px; left:0; right:0; padding:6px 0; border-top:1px solid rgba(84,121,175,0.7);  background-color:rgba(255,255,255,0.80); text-align:center;  font-size:13px; color:#146caf}

footer .container{max-width: 729px; position:relative}
footer .col{ cursor:pointer; font-weight:600; padding-left:0 !important; padding-right:0 !important}

footer img{ max-height:21px;}
/* stage 1 */
 .wrap_actos{   padding:80px 0 0 0; padding-top:0px; overflow:auto }
#stage1{padding:4vh 0 0vh 0;   margin:0 ; height: calc(100vh - 60px); overflow:auto ;  }
#stage1 .content_section{background-color: transparent !important}

.enmemoria { background-color:rgba(255,255,255,0.69); border-top:10px solid rgba(0,113,188,0.12);border-bottom:10px solid rgba(0,113,188,0.12); margin-top:4vh; padding:15px 0}
.enmemoria p{ margin:1px}
.enmemoria .pdorado{ color:#BC8015; font-size:17px}
.enmemoria .pbold{ font-weight:400; font-size:16px}
.enmemoria .pblue{ font-weight:600; color:#10356B; font-size:22px}
.texto_principal{ background-color:rgba(255,255,255,0.69);  }

.texto_principal{ padding: 20px; font-size: 18px; font-weight: 300; color: #10356B; padding-bottom:30px;min-height: 40vh;}	
.btn_blue{ color:#ffffff; background-color:#4775AD; border-radius:8px; border:4px solid rgba(255,255,255,1); font-size:18px; padding:8px; cursor:pointer;max-width: 354px;
margin: 0 auto;}
.btn_blue img{ margin-top: 6px;}
.btn_blue:hover{ opacity:0.7}
.texto_principal p{ padding-bottom:170px;max-width: 457px; 
margin: 0 auto; }

 
#stage1 .btn_blue{ margin-top:5px; margin-bottom:40px; ;}
#stage1 .texto_principal{ padding-bottom:25px}
/* actos funebres*/
section{ width:100%}
.section{ position:fixed; top:52px; bottom:52px; left:0; right:0;  width: 100vw;  opacity:1; overflow:auto;   transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease; 
}

.wrap_actos{ height:calc(100% - 100px); overflow:auto;}
	 
.section.hidden{left:100%; opacity:0 }
#stage2{ transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease; }
.section .content_section{ background-color:rgba(255,255,255,0.69); width:100%; max-width:700px; margin:0 auto; padding-bottom:15px; min-height: 100%     }	
.section .content_section .container{ padding-top:10px;}
.imagen_principal_min {
    width: 100%;
    max-width: 52px;
    margin-right: 12px;
    margin-top: 6px;
}
.section h2{ font-weight:300; margin-bottom:0;font-size: 23px; color:#2e5b89;}

.colspace2{ height: 100px; clear: both;}
.colspace4{ height: 200px; clear: both;}


.wrap_item_actos { padding:15px 2vw}
.item_actos{ display: none;}
.item_actos .titulo{ color:#BC8015; font-size:20px}
.item_actos .detalles{ background-color:#fff; padding:7px 15px; color:#4d4d4d; border-top:10px solid rgba(1,73,151,0.17); margin-top:4px}
.item_actos .detalles span{ display:inline-block; color: #10356B;min-width: 93px; display: inline-block !important; text-align:right}
.item_actos .btn_loc{ background-color:rgba(1,73,151,0.09); color:#8c6b19; padding:1px 17px 3px 17px; text-align:center; float:right; cursor:pointer}
.item_actos .btn_loc img{width:13px; margin-right:8px;}
.btn_loc:hover{ opacity:0.7}	

.observaciones_actos{ font-size: 14px;}

.leyenda{ font-size: 13px;}
	
/* ofrendas */
.total_pesames{color:#10356B; font-weight:700; text-align:center; padding:12px 0 6px 0; font-size: 18px;}
.total_ofrendas{color:#10356B; font-weight:700; text-align:center; padding:12px 0 6px 0 }

.item_ofrenda{ text-align:center;color:#10356B;    -ms-flex-item-align: end !important;
    align-self: flex-end !important; min-width:100px; padding:0; margin:5px 3px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 10px;
}
.item_ofrenda img{  max-height: 71px; margin-bottom:1px;}	
.item_ofrenda .sender_name{ font-size: 13px; max-width: 100%;  max-height: 40px;   min-height: 40px;   overflow: hidden;   }	

.fechapub{font-size: 12px; color: #af8425; }

.wrap_btn_ofrenda{padding: 7px 25px 0px 25px}

.btn_ofrenda{ background-color:rgba(0,73,150,0.81); border-radius:3px; border:2px solid #5586ba; color:#fff; padding:0; overflow:hidden; margin:6px}
.btn_ofrenda .icono{ background-color:rgba(255,255,255,0.2); width:30px; height:30px; text-align:center; padding: 2px 4px 4px 4px; margin-right:5px}
.btn_ofrenda .icono img{ height:26px}
.btn_ofrenda div{   font-size:15px; line-height:15px; padding-top:1px; font-weight:400}
.btn_ofrenda div span{ display:block; font-size:13px; opacity:0.6 }
.btn_ofrenda:hover{ opacity:0.7}

/* pesames */
.wrap_item_pesames{ padding:15px 15px}
.item_pesame{ background-color:#fff; border-radius:10px; border:1px solid #bdccd4; margin-bottom:15px; color:#15536b; font-size:14px; padding:8px 15px}
.firma_pesame{ text-align:right; font-style:italic; color:#666666;font-size:13px; margin-top:5px;}

 

.btn_pesame{ background-color:rgba(0,73,150,0.81); border-radius:3px; border:2px solid #5586ba; color:#fff; padding:0; overflow:hidden; width:100%; max-width:273px; margin:0 auto; margin-top:15px; cursor:pointer}
.btn_pesame .icono{ background-color:rgba(255,255,255,0.2); width:26px; height:34px; text-align:center; padding: 2px 4px 4px 4px; margin-right:7px}
.btn_pesame .icono img{ height:22px}
.btn_pesame div{   font-size:15px; line-height:28px; padding-top:1px; font-weight:400}
.btn_pesame div span{ display:block; font-size:13px; opacity:0.6 }
.btn_pesame:hover{ opacity:0.7}

.wrap_btn_ofrenda .btn_pesame div span{ display: inline-block; font-size: inherit; opacity:1 }
/* recuerdos */
.wrap_recuerdos .image_right_header {
    width: 164px;
    position: absolute;
    right: 0;
    bottom: 0;
}



.sender_name{ width: 99%;   overflow: hidden;   }

.wrap_recuerdos .btn_pesame{ margin:5px}


.wrap_recuerdos .marco_recuerdos{ max-width:100%; width:360px; margin:0 auto; position: relative; max-width: 100%; }

.wrap_recuerdos .marco{ position: relative; z-index: 99; width: 100%; top: 0; left:0; }

.wrap_recuerdos .recuerdo{ 
    width:320px; margin:26px;  position: absolute; z-index: 88; top: 15px; height: 220px; 
    max-width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size:contain;
    /*image-orientation: none;*/
    image-orientation: from-image; 
    box-sizing: border-box;
}



.wrap_recuerdos .bgmarco{ 
    width:310px; margin:23px; position: absolute; z-index: 1; top: 15px; height: 220px; 
    max-width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.8;
}


.wrap_recuerdos #player{ 
    display: none; 
    left: 31px; top: 47px;
    width:292px;
    max-width: 100%;  
    position: absolute; 
    z-index: 88; 
    height: 210px;
    z-index: 100; 
    box-sizing: border-box;
    outline: none;
 }

 
.wrap_recuerdos #explayer{ 
    display: none; 
    left: 31px; top: 47px;
    width:292px;
    max-width: 100%;  
    position: absolute; 
    z-index: 88; 
    height: 210px;
    z-index: 100; 
    box-sizing: border-box;
 }


.wrap_recuerdos .textorecuerdo{ 
    width:300px; margin:20px; margin-bottom: 1px; position: absolute; z-index: 100; top: 234px; height: 135px; 
    font-size: 17px; color: #7c6718; overflow-y: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.wrap_recuerdos .senderrecuerdo{ 
    margin-top: -38px;
    font-size: 15px;
    text-align: center;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #f8f9f9;
    border-radius: 1px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    z-index: 777;
    background-image: url('../images/bgmarco.png');
    border: 1px solid #f8f9f9;

}


.btnlight{ 
    margin-top: -15px;
    font-size: 15px;
    text-align: center;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #f8f9f9;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #eee ;
}

.wrap_recuerdos .count_images {
    width:360px; position: absolute; z-index: 100; top: 16px; height: 260px; text-align: center; 
    font-size: 18px; font-weight: 400; color: #7c6718;
    max-width: 100%;
    box-sizing: border-box;
}

.wrap_recuerdos .left-arrow{
    position: absolute;
    top: 32vh;
    left: -29px;
    transform: rotate(90deg);
    width: 70px;
    cursor: pointer;
    z-index: 110;
}

.wrap_recuerdos .right-arrow{
    position: absolute;
    top: 32vh;
    right: -29px;
    transform: rotate(-90deg);
    width: 70px;
    cursor: pointer;
    z-index: 110;
}

#remove_recuerdo{ padding: 4px; color: brown;}

.wrap_recuerdos .comentar{ position: absolute; right: -15px; top: 20px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; z-index: 888; box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);}
#total_comentarios{ font-size: 14px; font-weight: 600; color: #124890; }

@media screen and (max-width: 375px) {

    .wrap_recuerdos .recuerdo {
        width: 80%;
        height: 190px;
    }

    .wrap_recuerdos #player {
        width: 80%;
        height: 170px;
    }
    
    .wrap_recuerdos #explayer {
        width: 80%;
        height: 170px;
    }

    .wrap_recuerdos .textorecuerdo {
        width: 80%;
    }
}


#list_comentarios{}
#list_comentarios .comentario{ 
    padding: 4px; font-size: 13px; text-align: left; padding-left: 30px; background-color:rgba(255,255,255,0.5); margin: 2px; border-radius: 3px; margin-bottom: 22px;
    background-image: url('../images/comment-black.svg');
    background-repeat: no-repeat; 
    background-position-x: 3px;
    background-position-y: 3px;
    position: relative;
    
}

#list_comentarios .comentario cite{line-height: 1; position: absolute; border-bottom-left-radius: 6px;  border-bottom-right-radius: 6px;   right: 0; top: 100%; padding-top: 0px; background-color: rgba(255,255,255,0.5); padding-left: 15px; padding-right: 15px;}


.wrap_galeria{ position:relative}

.overlay{ display: none; position: fixed; background-color: rgba(255,255,255,0.9); top:0; left:0; bottom: 0; right: 0; width: 100%; height: 100%; text-align: center; z-index: 888;}

.overlay .inner{ margin: 0 auto; width: 300px; height: 350px; background-color: white; border:1px solid #eee; border-radius: 4px; position: relative; top: 90px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);}

.overlay .boxheader{ margin: 0px; background-color: #146caf; color: white; }

.overlay .title{ display: inline-block; padding: 10px; font-weight: 300; font-size: 16px;  }
.overlay .closeoverlay{ float: right; background-color: rgba(255,255,255,0.1); padding: 10px; width: 62px; cursor: pointer;  }
.overlay textarea{ width: 250px; height: 100px; box-sizing: border-box; margin: 10px;}
.overlay #sender_name{ width: 250px; box-sizing: border-box; margin: 10px;}
.overlay .addupload{ padding: 4px; text-align: center; background-color: #124890; color: white; margin: 15px;} 
.overlay .reload{ padding: 4px; text-align: center; background-color:#6c9e20; color: white; margin: 15px; display: none;} 
.overlay .btn_pesame{ margin-top: 2px; width: 150px;}


.vpage{ display: none; position: fixed; background-color: rgba(255,255,255,0.9); top:0; left:0; bottom: 0; right: 0; width: 100%; height: 100%; text-align: center; z-index: 99999;}
.vpage .inner{ margin: 0 auto; max-width: 800px;  background-color: white; border:1px solid #eee; border-radius: 4px; position: relative; top: 0px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);}
.vpage .boxheader{ margin: 0px; background-color: #146caf; color: white; }
.vpage .title{ display: inline-block; padding: 10px; font-weight: 300; font-size: 16px;  }
.vpage .closeoverlay{ float: right; background-color: rgba(255,255,255,0.1); padding: 10px; width: 62px; cursor: pointer;  }
.vpage .pagecontent{height: 80vh; overflow-y: scroll; text-align: justify; width: 100%; padding: 20px;;}


#stage6 .content_section{   background-color:rgba(18,72,144,0.7);}
.wrap_btn_compartir .row{ height: calc(100vh - 139px);}
.btn_compartir{ background-color:rgba(255,255,255,0.2); text-align:center; border-radius:10px; padding:15px; margin:20px; color:#fff; font-size:18px; cursor:pointer}

.overlay input[type="text"]::placeholder {
    color:#999;
    font-size: 13px;
    font-style: italic;
}

.overlay textarea::placeholder {
    color:#999;
    font-size: 13px;
    font-style: italic;
}


.avatar{ box-shadow: 0 15px 20px 0 rgba(0,0,0, 0.3);}

.btn_compartir img{ width:120px; margin-bottom:15px}
.btn_compartir:hover{ opacity:0.7}
@media screen and (min-width: 800px) {
 .content_section{ min-height:100%;}
 #stage6 .content_section{   background-color:rgba(18,72,144,0.95);}
 footer .col:hover{ letter-spacing:1px}
 .btn_compartir{   font-size:26px; }
}
@media screen and (max-width: 800px) {
  .menu{ left:0}
  .item_actos .detalles .col{ padding-right:8px}
  .col.minlabel{ margin:0; padding:0; font-size:14px; max-width:85px}
  .item_actos .detalles{ font-size:14px }
}

.menu{ position:absolute; top:80px;  right:0; max-width:520px; z-index:9999; background-color:#124890;  opacity:0; visibility:hidden;transition: all 0.65s ease;
    -moz-transition: all 0.65s ease;
    -webkit-transition: all 0.65s ease;
    -o-transition: all 0.65s ease}
.menu.show{ visibility:visible;  opacity:1;top:52px; }
.menu ul{ list-style:none; margin:0; padding:0}
.menu ul li{ padding:15px; color:#fff; font-size:18px; font-weight:400; cursor:pointer}
.menu ul li:hover{ opacity:0.6}
.menu ul li:nth-child(odd) {
  background-color:#124890
}

.menu ul li:nth-child(even) {
  background-color:rgba(255,255,255,0.05);
}

.menu .pic_menu{ margin-top: -7px;
float: right;
margin-right: 13px;}

.popup_compartir{ visibility:hidden; opacity:0; position:absolute}
.menu{ position:absolute; top:80px;  right:0; max-width:520px; z-index:9999; background-color:#124890;  opacity:0; visibility:hidden;transition: all 0.65s ease;
    -moz-transition: all 0.65s ease;
    -webkit-transition: all 0.65s ease;
    -o-transition: all 0.65s ease}

@media screen and (max-width: 400px) {
	
.wrap_btn_ofrenda {
    padding: 5px 5px 0px 5px;
}
.item_ofrenda { 
    margin: 1px 3px;
}
.btn_ofrenda {
    background-color: rgba(0,73,150,0.81);
    border-radius: 3px;
    border: 1px solid #5586ba;}.item_ofrenda img {
    max-height: 60px;
    margin-bottom: 5px;
}
.wrap_item_pesames{ padding:15px 22px}
.hiddenxs{ display:none !important}
.btn_pesame .icono { 
    width: 26px; 
    height: 29px; 
    padding: 2px 4px 2px 4px;
    margin-right: 7px;
}
.btn_pesame div {
    font-size: 14px;
    line-height: 27px;
    padding-top: 0; 
}
.btn_pesame .icono img {
    height: 19px;
    margin-top: 2px;
}
header h1 {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(107, 107, 107, 1);
    font-size: 18px;
    font-weight: 700;
    padding-top: 16px;
    line-height: 19px;
    margin-bottom: 0;
    padding-bottom: 0;
}
}
@media screen and (max-width: 330px) {
 header h1 {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(107, 107, 107, 1);
    font-size: 17px;
    font-weight: 700;
    padding-top: 7px;
    line-height: 19px;
    margin-bottom: 0;
    padding-bottom: 0;
}
.wrap_btn_ofrenda {
    padding: 5px 3px 0px 3px;
}
.item_ofrenda { 
    margin: 1px 1px;
}
.btn_ofrenda {
    background-color: rgba(0,73,150,0.81);
    border-radius: 3px;
    border: 1px solid #5586ba;
    color: #fff;
    padding: 0;
    overflow: hidden;
    margin: 6px 3px;
}
.btn_ofrenda .icono img {
    height: 22px;
}
.btn_ofrenda .icono { 
    width: 26px; 
    padding: 3px 4px 3px 4px;
    margin-right: 6px;
}
.item_actos .detalles .col{ padding-right:10px}
  .col.minlabel{ margin:0; padding:0; font-size:14px; max-width:90px}
 
}

.loader_wrap {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 99999;
    text-align: center;
    display: none
}

.loader_wrap .icon {
    position: relative;
    top: 40%;
    font-weight: bold;
}