@charset "UTF-8";
@charset 'iso-8859-15';

@viewport {
width: device-width;
}

.botones-items{
	display:grid !important;
	align-items: center;
}

/*Clase para alinear el area de botones Doters cuando el usuario esta logueado*/
.align-item{
	transform:translateY(13px);
}

html {
  font-size: 12px;
}

a.link-bloq{
text-decoration: none;
    color: #003a5d;

}

/*== CSS PopUp Message ==*/

#box-ms {
  z-index: 999999;
  background-color: rgba(255, 255, 255, 0.8);
  position: fixed;
  bottom: 100px;
  right: 4px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  border-radius: 7px;
  display: block;
}
.box-ms-message {
  width: 180px;
  height: auto;
  text-align: center;
}
.box-ms-message p {
  margin: 4px;
}

.ms-icon {
  font-size: 36px;
  color: #ffffff;
  margin: 12px 12px 12px 14px;
}
.close {
  position: absolute;
  right: 10px;
  top: 0px;
  font-size: 20px;
  color: #535661;
  font-weight: 700;
  cursor: pointer;
  
}
	@media only screen and (max-width: 767px){
#box-ms {display: none;}
  .box-ms-message, .close {display: none !important;}
		.box-ms-icon {
			position: fixed !important;
			bottom: 70px !important;
			top: inherit !important;
			right: 25px !important;
		}
}


.mensaje{
    display: none;
    border-radius: 12px;
}



img {
  height: auto;
  width: 100%;
}

header.cabecera-etn{
    background: #003a5d;
    position: fixed;
    top: 0;
}

.menu-cabecera{
    margin-top: 10px;
    padding: 15px 0;
}


.logoetn img{
    width: 200px;
}



.menu2{
    position: absolute;
    right: -80px;
    top: 26px;
}

.menu2 li a{
    line-height: 3;
}



.navbar-collapse {
        position: relative;
    display: block;
}


.toggle, [id^=drop] {
 display: none;
}
.bbt-menu{background:#00ACED;width:100%; z-index: 100; position: relative;}
nav {
    width:100%;
    padding:0;
}

nav ul.menu-principal {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    
}
nav ul.menu-principal li {
    margin: 0px;
    display: inline-block;
    float: left;
}


nav ul.menu-principal li a img{
    height: 1em;
    vertical-align: -0.125em;
    fill: currentcolor;
    width: auto;
}



nav ul.menu-principal li ul li{
}
nav a, nav a:hover, nav a:visited {

}
nav ul.menu-principal:hover {
    
}
nav ul.menu-principal li:hover > a {
    
}
nav ul.menu-principal li ul li a:hover {
    
    
}
nav ul.menu-principal ul {
    display: none;
    position: absolute;
    top: 20px; /*** Posisi Down Menu Di Ukur Dari Atas ***/
    
    
}
nav ul li:hover > ul {
    display: inherit;
    
    
    
}
nav ul.menu-principal ul li {
    float: none;
    display: list-item;
    position: relative;
}
nav ul.menu-principal ul ul li {
    position: relative;

}
nav label span{
    float:right;
}
.toggle, [id^=drop] {
    display: none;
}
nav input[type=checkbox]{
    display: none;
}

.dropdown2-menu.show {
    display: block;
    
}


.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: -66px;
    margin-top: var(--bs-dropdown-spacer);
    
}



.menu-secundario{
    position: absolute;
}






.collapse2{
  right: 0;
  margin-right: 0;
  position:absolute;
  display: block;
}

.collapse2 ul{
  position: relative;
}




 .blts {
                display: none;
            }

            @media only screen and (max-width: 576px) {
                .widget {
                    padding-top: 40px;
					padding-bottom: 30px;
                }

                .reservamos-search .title-wrapper {
                    margin-bottom: 25px;
                }

                .reservamos-search.compact-height input[type=text] {
                    height: 60px;
                }

                .reservamos-search .form-field,
                .reservamos-search .form-field-date {
                    margin-bottom: 0px;
                }

                .reservamos-search.compact-height .search-button {
                    height: 80px !important;
                    max-height: 80px !important;
                }

                .blts {
                    display: block;
                }
            }




.reservamos-search .search-button {
    
    color: #003a5d !important;
    font-weight: 700 !important;
    
}










picture.modal-doters{
    padding: 2px 16px;
        align-self: center;
}

.doters-modal {
    height: auto;
    width: 80px;
    cursor: pointer;
    padding: 0 10px;
}

.modal-header-doters {
    background-color: #004951;
    color: #fff;
}



.btn-unete-doters {
    background-color: #2affac;
    color: #000;
    border-radius: 50px;
    font-size: 15px;
    margin: 0 auto;
}


.btn-inicias-doters {
    background-color: #ffffff;
    color: #000;
    border-radius: 50px;
    font-size: 15px;
    border: 1px solid #000;
    margin: 0 auto;
}


p.programa-doters {
    width: 100%;
}


.btn-unete-doters:hover{
    background-color: #2affac;
    color: #000;
    border-radius: 50px;
    font-size: 15px;
    margin: 0 auto;
}

.btn-inicias-doters:hover {
    background-color: #ffffff;
    color: #000;
    border-radius: 50px;
    font-size: 15px;
    border: 1px solid #000;
    margin: 0 auto;
}



/* Doters Modal Login and Logout*/

.doters-info{
    display: none;
    justify-content: center;
    align-items: center;
    padding: 2px 3px;
    height: 50px;
	cursor:pointer;
}

.user-doters-info{
    display: flex;
    height: 100%;
    align-items: center;
}

.user-doters-info img{
    height: 35px;
    margin-right: 10px;
}

.user-doters-info p{
	display:flex;
    font-family: Arial, Helvetica, sans-serif;
    align-items: center;
    margin: 0;
}

.user-doters-info span{
    font-weight: 900;
    margin-left: 3px;
}

.logout-modal-doters{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0 , .5);
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.logout-modal{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  align-items: center;
  padding-bottom:20px ;
}

.logout-modal__header{
  display: flex;
  width: 100%;
  background-color:#f2f2f2;
  padding: 10px 20px;
  justify-content: space-between;
}

.logout-modal__logo-doters{
  width: 70px;
}

.logout-modal__info{
  width: 100%;
  padding: 10px 20px;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.logout-modal__user-name{
  font-size: 18px;
}
.logout-modal__points{
  display: flex;
  width: 100%;
  font-size: 16px;
  padding: 0px 20px;
  color: #2affac;
  justify-content: space-evenly;
}

.logout-modal__avalible-points,
.logout-modal__pending-points{
  color: #000;
  font-weight: 900;
}

.logout-modal__points-content img{
  width: 30px;
}

.logout-modal__points-content span{
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}

.logout-modal__points-content span p{
  display: flex;
  align-items: center;
  font-size: 24px;
  margin: 0;
}

.logout-modal button{
    text-decoration: none;
    background-color: #2affac;
	border: none;
    border-radius: 50px;
    padding: 10px 30px;
    color: #fff !important;
	cursor:pointer;
}

.logout-modal__close-icon{
    cursor: pointer;
}

/* Doters Modal Login and Logout*/







picture.flag-usa{
    padding: 2px 16px;
        align-self: center;
}

picture.flag-usa img{
    height: auto;
    width: 40px;
    cursor: pointer;
}

.distintivo2 {
    padding: 0px;
    background-position: center;
    width: 100px;
    position: absolute;
    z-index: 21;
    opacity: .9;
}

.distintivo {
    padding: 10px;
    background-position: center;
    width: 100px;
    background: rgba(255,255,255,1);
    border-radius: 74px;
    margin: 0 auto;
    margin-bottom: 5px;
    position: fixed;
    z-index: 21;
    height: 100px;
}



.distintivo .texto-distintivo {
    position: absolute;
    width: 160px;
    height: 60px;
    background: rgba(255,255,255,0.8);
    left: 74px;
    border-radius: 15px;
    top: 18px;
    font-size: 16px;
    text-align: right;
    padding: 5px 8px;
    display: flex;
    justify-content: right;
}

.distintivo .texto-distintivo span{
vertical-align: middle;
    align-self: center;
    text-align: right;
}

.distintivo img{
    width: 80px;
    z-index: 200;
    display: block;
    position: relative;
}

.distintivo h2 {
    color: #003a5d;
    font-size: 16px;
    background-image: url(../img-etn/fondo-pleca-distintivo.png);
    padding: 0px;
    background-position: center;
    background-size: contain;
    font-weight: 700;
    text-transform: uppercase;
}


.bloq1 {
    background: #123c5d !important;
    margin-top: 178px;
    display: block;
    position: relative;
}


.widget{
    margin-top: 10px !important;
}


.seccion-hero-etn{
 padding: 0;
}


.card-lateral{
    background: #02474f !important;
    color: #00f6a8;
    border-radius: 18px;
    height: 100%;
}

a.btn-doters1{
    background: #00f6a8;
    border: 0;
    border-radius: 12px;
    font-size: 18px;
    color: #02474f;
}

h5.title-doters{
    font-size: 26px;
    color: #00f6a8;
}

p.text-doters{
    font-size: 22px;
    color: #00f6a8;
    
}


.carousel-item img{
    width: 100%;
    height: auto;
}


.carousel-control-prev-icon {
    background-image: url(../img-etn/arrow-left-circle-fill.svg);
}



.carousel-caption {
    width: 21%;
    bottom: 42px;
    left: -48%;
    margin: 0 auto;
}


.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
}



.barra-destinos{
    margin-top: 10px;
    border-radius: 12px;
}


.accordion-header {
    background: #7BA7AE;
    color: #fff;
    margin-bottom: 0;
    border-radius: 12px;
	cursor: pointer;
}


.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
    border-radius: 12px;
}

.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: #00a5bb;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
    background: transparent;
    color: #fff;
}



.secciones-secundarias{
    background: #fff !important;
    margin-top: 0px;
    padding: 10px;
}


.card-doters-etn{
    background-color: #073c5c !important;
    border-radius: 18px 18px 18px 18px !important;
    margin: 0 20px;
    margin: 0 auto;
    padding: 30px;
    color: #fff;
}

.card-doters-etn h5{
    color: #fff;
    font-size: 28px;
    text-align: justify;
}


img.img-logo-doters{
    width: auto;
}


.btn-doters{
    background: #31fbad;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    border-radius: 12px;
    color: #000;
    font-weight: 700;
}


.contenedor-doters-banner{
        vertical-align: middle;
    position: relative;
    align-items: center;
}

.card-servicios-etn{
    background-color: #7ba4ab !important;
    border-radius: 18px 18px 18px 18px !important;
    margin: 0 20px;
    margin: 0 auto;
    padding: 30px;
}


h4.titulo-secciones{
    color: #fff;
    font-size: 24px;
	font-weight: 700;
}


h1.title-footer{
    color: #000;
    font-size: 18px;
    text-align: center;
}

.card-promociones1, .card-promociones3{
    background: #00a5bc;
    color: #fff;
    border-radius: 18px !important;
}


.card-promociones2{
    background: #003a5d;
    color: #fff;
    border-radius: 18px !important;
}


.footer-blogs{
    color: #fff;
    margin-top: 40px;
}

.columnas-centro, .columnas-izquierda, .columna-derecha{
    width: 100%;
}

.titulos-columnas{
    background: #123c5d;
    border-radius: 8px;
    padding: 10px 0;
    color: #fff;
}



.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #00a5bb;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}





.footer-redes a{
    border-radius: 8px;
    font-size: 20px;
    width: 40px;
}

.footer-redes a img{
    width: 100%;
    height: auto;
}


.phone-lada{
background: transparent !important;
	font-size: 28px;
	padding-left: 20px;
	color: #003a5d;
}



.links-footer .nav-item a {
    color: #003a5d !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}





.spinner{
  display: flex;
  border-radius: 50px;
  border: 3px solid #212529;
  border-bottom-color: transparent;
  width: 20px;
  aspect-ratio: 1/1;
  animation: rotation .3s linear infinite;
}

  @keyframes rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
  } 




/*----  Main Style  ----*/
#cards_landscape_wrap-2{
  text-align: center;
  background: #F7F7F7;
    margin-bottom: 40px;
}
#cards_landscape_wrap-2 .container{
  padding-top: 80px; 
  padding-bottom: 100px;
}
#cards_landscape_wrap-2 a{
  text-decoration: none;
  outline: none;
}
#cards_landscape_wrap-2 .card-flyer {
  border-radius: 5px;
}
#cards_landscape_wrap-2 .card-flyer .image-box{
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0px;
  border-radius: 5px;
}
#cards_landscape_wrap-2 .card-flyer .image-box img {
    -webkit-transition: all .9s ease;
    -moz-transition: all .9s ease;
    -o-transition: all .9s ease;
    -ms-transition: all .9s ease;
    width: auto;
    height: 250px;
    padding: 20px;
}
#cards_landscape_wrap-2 .card-flyer:hover .image-box img{
  opacity: 0.7;
  -webkit-transform:scale(1.15);
  -moz-transform:scale(1.15);
  -ms-transform:scale(1.15);
  -o-transform:scale(1.15);
  transform:scale(1.15);
}
#cards_landscape_wrap-2 .card-flyer .text-box{
  text-align: center;
}
#cards_landscape_wrap-2 .card-flyer .text-box .text-container{
  padding: 30px 18px;
    height: 300px;
}
#cards_landscape_wrap-2 .card-flyer{
  background: #FFFFFF;
  margin-top: 50px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}
#cards_landscape_wrap-2 .card-flyer:hover{
  background: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  margin-top: 50px;
}
#cards_landscape_wrap-2 .card-flyer .text-box p{
  margin-top: 10px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    font-size: 20px;
    letter-spacing: 1px;
    color: #000000;
    text-align: justify;
}
#cards_landscape_wrap-2 .card-flyer .text-box h6{
  margin-top: 0px;
  margin-bottom: 4px; 
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Roboto Black', sans-serif;
  letter-spacing: 1px;
  color: #003a5d;
}

h5.card-title{
    font-size: 18px;
    color: #003a5d;
}



.card-text{
    color: #003a5d;
    font-size: 16px;
    text-align: justify;
	padding: 5px;
}


.card-flyer .text-box .text-container h5{
    font-size: 20px;
    color: #003a5d;
}


.columnas-izquierda nav ul, .columnas-centro nav ul, .columna-derecha nav ul{
        list-style: none;
    
}


.columnas-izquierda nav ul li a, .columnas-centro nav ul li a, .columna-derecha nav ul li a{
        text-decoration: none;
    font-size: 12px;
    color: #003a5d;
    font-weight: 700;
}


.modal-backdrop{
    z-index: 2;
}





.nav-item a{
    color: #003a5d;
    font-weight: 700;
}






/* Media Queries
*******************************************/



@media screen and (min-width: 1200px) {
  html {
    font-size: calc(0.5rem + 0.4vw);
  }
}





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

.bloq1 {
    background: #123c5d !important;
    margin-top: 346px;
    display: block;
    position: relative;
}
}





@media all and (max-width : 768px) {

    .navbar-collapse {
    position: relative;
    display: block;
    margin-top: 20px;
}

nav ul.menu-principal li {
    display: block;
    width: 82px;
    background: #123c5d;
    margin: 6px;
    height: 50px;
    vertical-align: middle;
    position: relative;
    border-radius: 12px;
}
    
    
    nav ul.menu-principal li a img{
    
    width: 100%;
}
    
    
    
    .nav-item a {
    color: #fff !important;
    font-weight: 200;
}
    
    
    
    .nav-link {
            width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    align-items: center;
    display: inline-grid;
    font-size: 10px;
        color: #fff;
        line-height: 1.2;
            text-wrap: wrap;
}
    
    
    .bi {
    width: 100% !important;
    height: auto;
    vertical-align: -0.125em;
    fill: currentcolor;
    width: 100%;
}
    


    nav ul.menu-principal ul li {
    display: block;
    background: #ccc;
}
    nav ul.menu-principal ul ul li {
        position: static;
    }
    
    .menu-secundario{
    position: relative;
}
    
    
.menu-secundario .navbar-nav li {
    display: flex;
    width: 86px;
    background: #123c5d;
    margin: 6px;
    height: 50px;
    vertical-align: middle;
    position: relative;
    border-radius: 12px;
    text-align: center;
    float: left;
}
    
    
    
    .menu-secundario .navbar-nav li ul li{
        background: #ccc;
        float: none;
    }
    
    
    
    .navbar-nav .nav-link.active{
        color: #7BA7AE !important;
        font-weight: 500;
    }
    
    
    

    
    .botones-header{
        display: inline-block;
    }
	

    
    nav ul.menu-principal {
    display: inline-block;
}
    
    
    .dropdown-menu{
            position: absolute !important;
    margin-top: 36px;
    border: 0;
    background: transparent;
    }
    
    
    
    picture.modal-doters {
    padding: 0;
    align-self: center;
}
    
    
    .doters-modal {
    height: auto;
    width: 90%;
    cursor: pointer;
}

}




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

.bloq1 {
    background: #123c5d !important;
    margin-top: 10px;
    display: block;
    position: relative;
}
    
    
    .barra-destinos{
        margin-top: 0;
    }
    
    
}






@media screen and (max-width: 425px) {
	
	
	    .mensaje {
    background: #7ba7ae;
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-top: 5px;
			padding: 8px;
}
	
	
	.menu-cabecera {
    margin-top: 0;
    padding: 8px 0;
}
	
	.reservamos-search .search-button {
    font: normal 500 22px/normal Open Sans,Helvetica Neue,Helvetica,sans-serif !important;
    height: 65px;
}
	
	
.reservamos-search .form-field, .reservamos-search .form-field-date {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    margin-bottom: 32px !important;
}
	
	
	
.logoetn img {
    height: auto;
    width: 230px;
}
    
    header.cabecera-etn {
    background: #003a5d;
    position:relative;
    top: 0;
}
    

    
    
.seccion-hero-etn {
    display: none;
}

    
    .card-servicios-etn{
        display: none;
    }
    
    .seccion-promociones{
        display: none;
    }
	
	.card-doters-etn {
margin: 0 auto !important;
}
    
    .footer-blogs{
        display: none;
    }
	

h1.title-footer {
    color: #000;
    font-size: 20px;
    text-align: center;
    padding: 5px;
}
	
	.card-doters-etn h2 {
    font-size: 20px !important;
    text-align: center;
}
	
.contenedor-doters-banner .col-md-4 {
text-align: center;
	
}
	

img.img-logo-doters {
    width: 60% !important;
    height: auto;
    padding: 10px;
}
	
btn-doters {
    background: #31fbad;
    padding: 10px;
    text-align: center;
    font-size: 34px !important;
    border-radius: 12px;
    color: #000;
    font-weight: 700;
}

}



@media screen and (min-width: 320px) {
  html {
    font-size: calc(0.4rem + 0.35vw);
  }
}


.atencion-clientes-form{
background: #fff !important;
    width: 70%;
    margin: 0 auto;
	top: 300px;

}










/* Coutdown estilos */



#countdown {
  position: relative;
  display: flex;
  pointer-events: none;
  user-select: none;
  color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#countdown > h1 {
  font-size: 1.5em;
  letter-spacing: -0.05em;
  color: #2a2a2a;
}
#countdown > p {
  color: #8a8a8a;
}

#countdown > p {
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 0;
  margin-top: 2em;
}

#countdown > time {
  font-family: Abel;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 0;
  margin-top: 2em;
}

.countdown__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  align-items: center;
  justify-content: center;
}
.countdown__el {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  align-self: flex-start;
  align-items: center;
  position: relative;
}
.countdown__time {
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  height: 42px;
  max-width: 70px;
  width: 100%;
  border-radius: 5px;

  -webkit-perspective: 479px;
  -moz-perspective: 479px;
  -ms-perspective: 479px;
  -o-perspective: 479px;
  perspective: 479px;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.countdown__time .count {
  background: #003a5d;
  color: #fff;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  height: 95px;
  line-height: 1.4em;
  overflow: hidden;
  position: absolute;
  text-align: center;
  width: 100%;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-transform-style: flat;
  -moz-transform-style: flat;
  -ms-transform-style: flat;
  -o-transform-style: flat;
  transform-style: flat;
}

.countdown__time .count.top {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid var(--border-color);
  border-radius: 5px 5px 0 0;
  height: 50%;

  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.countdown__time .count.bottom {
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
  background-image: -webkit-linear-gradient(
    rgba(255, 255, 255, 0.1),
    transparent
  );
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
  background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
  border-top: 1px solid var(--border-color);
  /*border-bottom: 1px solid #000;*/
  border-radius: 0 0 5px 5px;
  line-height: 0;
  height: 50%;
  top: 50%;

  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
}
.countdown__el .countdown__label {
  font-size: normal;
  margin-top: 0px;
  display: flex;
  justify-content: center;
  top: 95px;
  width: 100%;
}

/* Animation start */
.count.curr.top {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  z-index: 3;
}
.count.next.bottom {
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
  z-index: 2;
}
.flip .count.curr.top {
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.flip .count.next.bottom {
  -webkit-transition: all 250ms ease-in-out 250ms;
  -moz-transition: all 250ms ease-in-out 250ms;
  -ms-transition: all 250ms ease-in-out 250ms;
  -o-transition: all 250ms ease-in-out 250ms;
  transition: all 250ms ease-in-out 250ms;

  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

@media screen and (max-width: 600px) {
  .countdown__container {
    grid-template-columns: repeat(2, 1fr);
  }
}