ion-content{
  max-width: 500px;
  margin:auto;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#navbar{
  max-width: 500px;
  margin:auto;
}
ion-tabs{
 max-width: 500px;
  margin:auto; 
}
.popup{
  max-width: 500px !important;
}

.tabs{
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
}

      .stickyfooter {
         position: absolute;
         left: 0;
         bottom: 0;
         width: 100%;
         top:24px;
         z-index: 999;
         color: white;
         height: 24px;
         text-align: center;
     }
      .stickyfooter2 {
         position: absolute;
         left: 0;
         bottom: 94px;
         width: 100%;
        
         z-index: 999;
         color: white;
         height: 24px;
         text-align: center;
     }

.control {
    font-family: arial;
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px;
    padding-top: 3px;
    cursor: pointer;
    font-size: 16px;
}
.leaflet-top{
  display:none;
}

.thenewtitle{
    font-size: 20px;
    padding-top: 6%;
    padding-left: 6%;
  }

  .shady{
    -webkit-box-shadow: 0px 0px 17px -2px rgba(82,82,82,0.75);
    -moz-box-shadow: 0px 0px 17px -2px rgba(82,82,82,0.75);
    box-shadow: 0px 0px 17px -2px rgba(82,82,82,0.75);
  }
    .thenew{
      
      width: 100%;
      margin:39px 0px 0px 0px;
   
      background-color: #f2f2f2;
  }

.bar .button.back-button, .bar button.back-button {
  color:transparent;
}
.bar{
  color:black;
}
  .deezerRow {
          margin-top: 15px;
          margin-bottom: 10px;
          min-height: 20vh;
        }

.mibord{
      /* right: 13px; */
    -webkit-box-shadow: 0px 0px 35px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 35px -3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 35px -3px rgba(0,0,0,0.75);
  border-radius: 20px;
    margin-top: 130px !important;
    background-color: black;
    text-align: center;
    font-size: 18px;
    float: right;
    width: 50%;
    color: white;
}

    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
.control_indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
    border: 0px solid #000000;
    border-radius: 0px;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #cccccc;
}

.control input:checked ~ .control_indicator {
    background: #2aa1c0;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: #0e6647d;
}
.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control_indicator:after {
    display: block;
}
.control-checkbox .control_indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #7b7b7b;
}
.control-checkbox .control_indicator::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 4.5rem;
    height: 4.5rem;
    margin-left: -1.3rem;
    margin-top: -1.3rem;
    background: #2aa1c0;
    border-radius: 3rem;
    opacity: 0.6;
    z-index: 99999;
    transform: scale(0);
}
@keyframes s-ripple {
    0% {
        transform: scale(0);
    }
    20% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
@keyframes s-ripple-dup {
   0% {
       transform: scale(0);
    }
   30% {
        transform: scale(1);
    }
    60% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
.control-checkbox input + .control_indicator::before {
    animation: s-ripple 250ms ease-out;
}
.control-checkbox input:checked + .control_indicator::before {
    animation-name: s-ripple-dup;
}


ion-view{
   /*   background-image: url("../images/bckgcool.png") !important;
     background-position: center;
     background-size: cover; */
}
ion-content{
     background-color: white
}
.nota p{
            margin-top:20px;
        }
        .nota{
            padding:25px;

        }
        .nota span{
             color:black;
        }

       #nge span img{
            width: 100% !important
        }
        .imgdiv{
            height: 50vh;
            background-size: cover;
            position: absolute;
            width:100%;
        }
        .cont{
            position: absolute;
            background-color: #F0F0F0;
            min-height: 60vh;
            margin-top: 45vh;
            width:100%;
            border-radius: 50px 0px 0px 0px;
            -webkit-box-shadow: -7px -16px 23px -1px rgba(0,0,0,0.75);
            -moz-box-shadow: -7px -16px 23px -1px rgba(0,0,0,0.75);
            box-shadow: -7px -16px 23px -1px rgba(0,0,0,0.75);
        }
        .contitle{
            position: absolute;
            background: rgb(223,223,223);
            background: linear-gradient(180deg, rgba(0,0,0,0.13) 0%, rgba(0,0,0,1) 23%, rgba(0,0,0,1) 100%);
            min-height: 60vh;
            margin-top: 30vh;
            width:100%;
        }
        .contitle p{
            color:white;
            font-size: 16px;
            margin:20px;
            border-bottom: 1px solid white;
            font-weight: 700;
        }


         .img-tema{
        width: 100%;
        padding: 15px 0px 0px 0px;
    }
    .descblogs{
        margin-left: 10px;
        padding: 15px !important;
    }
    .whatapplist{
        height: 1px;
        width: 66%;
        margin-left: 33%;
        background-color: lightgray;

    }
    .titleBlg{
        font-weight: 600
    }
    .descblogs span{

        font-weight: 700;
        display:inline-block;
    }
    
    .cut-text{ 
            font-size: 12px !important
        } 
/***************************EDITABLE***************************/

        .maintlte{
          padding-top: 7px;
          padding-bottom: 7px;
          padding-left: 7px;
          font-size: 14px;
          border-bottom:1px solid black;
        }
        .titleserv{
          font-size: 12px;
          border-bottom:1px solid black;
        }
        .descr{
          font-size: 11px;
          margin-top: 4px !important;
        }
        .bt2{
          font-size: 13px;
          text-align: right !important;
          display:block;
        }

/** VARIABLES **/
.cardShadow{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);background-color:white!important
}
:root {
  --primary: #96030A;
  --secondary: #D30712;
  --dark: #740106;
  --darker: #240000;
  --light: rgb(253, 84, 84);
  --controls-color-text: white !important;
  --content-color-text: black;
}
ion-header-bar .icon{
color:black !important
}
.back-text{
  color:black !important;
}
.previous-title{
  color:black !important;
}
.buttonUI{
  color:white !important
} 
ion-header-bar .ion-ios-arrow-back{
  color:black !important;
}
.funnycard{
  border-radius: 15px;
  background-size: cover
}
.funnycardspan{
  font-size: 18px;font-weight: 600;margin-top: 10px;display: block;
}
.funnycardunderline{
  width:100%;height: 3px;
}
.funnyimage{
  width:50%;margin-left: 25%
}
.funnybutton{
  width:100%;height: 40px;
}
.funnytextbutton{
  color:white;line-height: 40px;width: 100%;text-align: center;
}

/** VARIABLES **/
.primary-color{
 background-color: var(--primary) !important; 
}

.secondary-color{
 background-color: var(--secondary) !important; 
}

.dark-color{
 background-color: var(--dark) !important; 
}

.darker-color{
 background-color: var(--darker) !important; 
}

.light-color{
 background-color: var(--light) !important; 
}

.color-button{
  background-color:black !important; 
 }

/** **/
.image-text-cover{
 
  background-size: cover;
  background-position: center;
  color: var(--controls-color-text) !important;
}

.back-button{
  color:white
}

/*Color de Barra*/
.bar.bar-dark {

  background-image: linear-gradient(0deg, #111, #111 50%, transparent 50%);
  color: var(--controls-color-text); 
}
.bar.bar-dark .title {
    color: var(--controls-color-text); 
}
/*Color de Tabs*/
.tabs-dark > .tabs,
.tabs.tabs-dark {
      
      backgroundround-image: linear-gradient(0deg, #111, #111 50%, transparent 50%);
      color: var(--controls-color-text); 
}

.dark-color{
  background-color: var(--dark) !important;
} 

.darker-color{
  background-color: var(--darker) !important;
} 
/*Color de Item en la Lista Plana NO ELIMINAR NI AUNQUE ESTE VACIA*/              
.item {

}
/*Color del Texto*/
.textColor{
color: var(--content-color-text) !important;
}
.brStyleBox{

}


/*Color de una Card*/
.card {
background-color: #FFF;
color:var(--content-color-text);
}
/* Color del Banner*/
.banner{

}
/*Color del texto del Menu*/
.menuColor{
color:white !important;
}
/*Color del texto del contenedor de single image*/
.middletexter{
    /* right: 13px; */
    -moz-box-shadow: 0px 0px 35px -3px rgba(0,0,0,0.75);
    border-radius:20px;
    font-size: 17px;
    color:white;
    text-align: center;
    /* left: 28px; */
    float: right;
    width: 61%;
    margin-right: 5px;
    padding-top: 15%;
    padding-bottom: 15%;
}
.item-input{
background-color : #FFF !important;
}
input, textarea, select {
background-color : var(--controls-color-text) !important;
color:black !important;
}
/***************************EDITABLE***************************/

/***************************NO EDITABLE***************************/
div { margin: 20px; }
.styled-select {
 background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
 height: 29px;
 overflow: hidden;
 width: 100%;
}

.styled-select select {
 background: transparent;
 border: none;
 font-size: 14px;
 height: 29px;
 padding: 5px; /* If you add too much padding here, the options won't show in IE */
 width: 100%;
}

.styled-select.slate {
 background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
 height: 34px;
 width: 100%;
}

.styled-select.slate select {
 border: 1px solid #ccc;
 font-size: 16px;
 height: 34px;
 width: 100%;
}

 .coinWeb{
  width:20%;margin-left:40%;margin-top:10px}

/* -------------------- Rounded Corners */
.rounded {
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
}

.semi-square {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

/* -------------------- Colors: Background */
.slate   { background-color: #ddd; }
.green   { background-color: #779126; }
.blue    { background-color: #3b8ec2; }
.yellow  { background-color: #eec111; }
.black   { background-color: #000; }

/* -------------------- Colors: Text */
.slate select   { color: #000; }
.green select   { color: #fff; }
.blue select    { color: #fff; }
.yellow select  { color: #000; }
.black select   { color: #fff; }


/* -------------------- Select Box Styles: danielneumann.com Method */
/* -------------------- Source: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/ */
#mainselection select {
 border: 0;
 color: #EEE;
 background: transparent;
 font-size: 20px;
 font-weight: bold;
 padding: 2px 10px;
 width: 378px;
 *width: 350px;
 *background: #58B14C;
 -webkit-appearance: none;
}

#mainselection {
 overflow:hidden;
 width:350px;
 -moz-border-radius: 9px 9px 9px 9px;
 -webkit-border-radius: 9px 9px 9px 9px;
 border-radius: 9px 9px 9px 9px;
 box-shadow: 1px 1px 11px #330033;
 background: #58B14C url("http://i62.tinypic.com/15xvbd5.png") no-repeat scroll 319px center;
}


/* -------------------- Select Box Styles: stackoverflow.com Method */
/* -------------------- Source: http://stackoverflow.com/a/5809186 */
select#soflow, select#soflow-color {
 -webkit-appearance: button;
 -webkit-border-radius: 2px;
 -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 -webkit-padding-end: 20px;
 -webkit-padding-start: 2px;
 -webkit-user-select: none;
 background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
 background-position: 97% center;
 background-repeat: no-repeat;
 border: 1px solid #AAA;
 color: #555;
 font-size: inherit;
 margin: 20px;
 overflow: hidden;
 padding: 5px 10px;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 300px;
}

select#soflow-color {
 color: #fff;
 background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#779126, #779126 40%, #779126);
 background-color: #779126;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
 padding-left: 15px;
}

.float-button {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  padding: 30px;
  font-size: 40px;
  background: $warning;
  position: fixed;
  bottom: 20px; /* Adjust to where you want it */
  right: 20px; /* Adjust to where you want it */
  z-index: 9999;
}

.float-button .height_fix {
 margin-top: 100%;
}

.float-button .content {
 position: absolute;
 left: 0;
 top: 50%;
 height: 100%;
 width: 100%;
 text-align: center;
 margin-top: -20px; /* Note, this must be half the font size */
 color: $light;
}

.image-list-thumb {
  padding: 2px 2px 2px 2px;
  height: 150px;
}

.zoom-pane {
	width: 100% !important;
	height: 100% !important;
}

.zoom-pane .scroll {
	min-height: 100% !important;
	 
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-box-align: center;
	-moz-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.zoom-pane img {
	width: 100% !important;
	vertical-align: middle !important;
}

.image-modal {
  width: 100% !important;
  height: 100%;
  top: 0 !important;
  left: 0 !important;
}

.transparent {
  background: rgba(0,0,0,0.7);
}



.brStyleBox{
  height:auto;
  background-size: cover;

  background-position: center;
  font-size:20px
}

.image {
  width: 100%;
  height: 600px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center, center;
}

ion-content {
  background-size:cover;
}


.banner{
  background-position: center;
}

.responsive-list-card {
  max-width: 1000px; 
  margin-top: 20px; 
  margin-left: 10px; 
  margin-right: 10px; 
  margin-bottom: 10px;
  margin: auto; 

}

.respoLogoPosition{
  padding-top: 0px !important;
}

.menuActive{
  text-decoration: underline;
}
.title-category {

  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  /* position: absolute; */
  right: 0;
  left: 0;
  z-index: 9;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
  height: 44px;
  border-width: 0;
  border-style: solid;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #ddd;
  background-size: 0;

  background-image: linear-gradient(0deg, #e42112, #e42112 50%, transparent 50%);
  color: #fff;
  font-size: 19px;
  line-height: 33px;

}

.image-modal{
  margin-top: 150px;max-width:700px;display:block;margin:auto;right:0px !important; 
}

.bannerIMG {
  margin-left: 30%;
  width: 40%;
}