/*
  =================================================================================
  TABLA DE CONTENIDOS
  =================================================================================

  - SWIPER SLIDER MAIN

	- SWIPER SLIDER HISTORY	

  - HISTORY MODAL

  - BUTTONS

  - MISCELLANY


  e72419 => e72419

*/


/*
	=================================================================================
	SWIPER SLIDER MAIN
	=================================================================================
*/

  .swiper-container.main {
    width: 100%;
    height: calc(90vh - 120px);  
    min-height: 720px;      
  }  
  .swiper-container.main  .swiper-slide {
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .swiper-overlay-options {
  	position: absolute;
		width: 100%;
  	height: 100%;
  	top:0;
  	left: 0;  
  	z-index: 1;	
  	padding: 45px;
  	background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.38) 23%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 100%);
  	pointer-events: none;
  } 
    .swiper-overlay-options a {
    	color: white;
    	text-transform: uppercase;
    	font-size: 30px;    	
    	font-weight: 600;
    	line-height: 1;  	
    	display: inline-block;
    	text-decoration: underline;    	
    	pointer-events: auto;
    }  
    .swiper-overlay-options span {
      color: white;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: 400;
      display: inline-block;
      pointer-events: auto;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.5), 1px 1px 5px rgba(0,0,0,0.5);
    }

  .swiper-pagination-bullet {
    width: 16px;
    height: 16px;    
    background-color: white;
    opacity: .4;
  }
  .swiper-pagination-bullet-active {
    opacity: 1;    
  }


  @media screen and (max-width: 767px) {     
  	.swiper-overlay-options {
      padding: 15px;
      background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0.38) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%);
    }
  	.swiper-overlay-options a { font-size: 20px; text-shadow: 1px 1px 5px rgba(0,0,0,0.25); } 
    .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
    }
  }

  @media screen and (max-width:990px) {
    .swiper-container.main {      
      min-height: initial;
    }
  }

  @media screen and (max-width:480px) {
  	.swiper-container.main  {
      height: 68vw;      
    }  	
    .swiper-overlay-options {
      background: none;
      position: relative;
      height: auto;
      color:black;
      text-align: center;
      line-height: 1;
    }
    .swiper-overlay-options a  {
      font-size: 16px;
      text-shadow:none;
      color: #ce2c21;
      display: block;
      line-height: 1;
    } 
    .swiper-overlay-options span {
      font-size: 12px;
      text-shadow:none;
      color:black;
      display: block;
      line-height: 1;
    } 
    .swiper-overlay-options br { line-height: 1; }
  }



/*
	=================================================================================
	SWIPER SLIDER HISTORY
	=================================================================================
*/
	
	.swiper-container.history {
    width: 100%;
    height: 240px;
  }
  .swiper-container.history .swiper-slide {
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex;
		justify-content: center;
		align-items: flex-end;	
		height: 80%;
		cursor: pointer;	
    filter: brightness(100%) saturate(100%);    
    border-radius: 2px;
    transition-property: initial;
    transition-duration: 0.4s !important;
  }
    .swiper-container.history .swiper-slide:hover {
      filter: brightness(1.1) saturate(1.1);      
      border-radius: 8px;      
    }
  .swiper-container.history .swiper-slide > span.title {
    position: absolute;
    top:170px;
    padding-top:6px;
    font-size: 13px;    
		font-style: italic;		
    text-align: left;    
  }
  .swiper-container.history.categories { 
    height: 268px;
  }
  .swiper-container.history .swiper-slide {
    height:90%;
  }
  .swiper-container.history.categories .swiper-slide > span.title {    
    font-size: 14px; 
    top: 236px;   
    font-style: normal;
    color: #e72419;
    font-weight: 700;
    text-align: left;    
  }   
    .swiper-container.history .swiper-slide > span.title > span {
      margin-left:5px;
      text-decoration: underline;      
      /*display: inline-block;*/
    }

  .swiper-container.history .swiper-slide > span.detail {
    display: none;
  }


  .swiper-button-next {
		right:-10px;
		top:160px;
		width:54px;
		height:88px;
		background-size: 54px 88px;
		background-image: url(/ka/apps/mallorca_com_v2/contents/select/swiperslider/next.svg) !important;
	}
  .swiper-button-prev {
		left:-14px;
  	top:160px;
  	width:54px;
  	height:88px;
  	background-size: 54px 88px;
  	background-image: url(/ka/apps/mallorca_com_v2/contents/select/swiperslider/prev.svg) !important;
  }

  .swiper-button-next.cat {    
    right:20px;
    top:50%;    
    background-size: 25px !important;
    filter: drop-shadow( 0 4px 3px rgba(0,0,0,0.3) );
    background-image: url(/ka/apps/mallorca_com_v2/contents/common/arrow-r.svg) !important;
    transition-duration: 0.2s;
  }
  .swiper-button-prev.cat {    
    left:20px;
    top:50%;
    background-size: 25px !important;
    filter: drop-shadow( 0 4px 3px rgba(0,0,0,0.3) );
    background-image: url(/ka/apps/mallorca_com_v2/contents/common/arrow-l.svg) !important;
    transition-duration: 0.2s;
  }
  .swiper-button-next.cat:hover, .swiper-button-prev.cat:hover {    
    filter: drop-shadow( 0 4px 3px rgba(0,0,0,0.5) );
  }


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

		.swiper-button-next {
			right:40px;
			top:160px;
			background-image: url(/ka/apps/mallorca_com_v2/contents/select/swiperslider/next_w.svg) !important;
		}
	  .swiper-button-prev {
			left:36px;
	  	top:160px;
	  	background-image: url(/ka/apps/mallorca_com_v2/contents/select/swiperslider/prev_w.svg) !important;
	  }
		
	}



/*
  =================================================================================
  HISTORY MODAL
  =================================================================================
*/

.history-modal {
  display: none;
  position: fixed; 
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;  
  background: white; 
  z-index: 1000;
  text-align: center;   
}  
  .history-modal > div {
    overflow-y: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc( 100% - 30px );
    max-height: calc( 100% - 30px );
    background-color: white;
    padding:15px;        
  }
    .history-modal.video > div {
      background-color: initial;
      padding:0;
    }    

  .history-modal img {
    margin: 0 auto;
    max-width:100%;
    max-height: 80%;
  }

  .history-modal span {
    display: block;
    font-size: 13px;
    font-style: italic;
    max-width: 446px;
    margin: 15px auto 0 auto;
  }

  .history-modal button {
    display: block;
    margin-top:15px;
    border: none;
    background: none;
    color:black;
    font-size: 13px;
    text-decoration: underline;
    margin: 4px auto;
  }
  .history-modal.video button {
    color:white;
  }

@media screen and (max-width:768px) {
  .history-modal > div {
    width: calc( 100% - 30px );    
  }
  .history-modal img {  
    max-width:70%;
  }
}



/*
  =================================================================================
  BOTONES
  =================================================================================
*/
  .button {
    display: inline-block;
    margin: 10px 10px 0 10px;
    padding: 5px 20px;
    border: 1px solid black;
    background: none;
    color: #000;
    font-size: 14px;
  }

  .button:hover {
    background: none;
    text-decoration: underline;
  }

  .button-add {
    background: #e72419;
    color: #fff;
  }

  .button-add:hover {
    background: #565656;
    color: #fff;
  }

  .button-warning {
    border-color: #e72419;
    color: #e72419 !important;
  }
  .button-warning:hover {
    background-color: #e72419;
    color: #fff !important;
  }

  .btn-red {    
    border: 2px solid white;
    padding: 0px 10px;;
    font-size:14px;   
    width: 120px;
    margin: 5px 0 5px 5px;
    color: white !important;
  }

  .main-btn-red {
    background-color: #e72419;  
    padding: 10px 30px;
    color: white !important;    
    box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
    margin: 0 15px;
    font-size:26px;
    font-weight: 800;
    width: 24vw; 
    max-width: 100%;
    display: inline-block;
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
    transition-duration: 0.3s;    
  }
    .main-btn-red:hover {
      background-color: black;
      text-decoration: none;
    }

  .main-btn-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;    
    padding-bottom: 80px;
    pointer-events: none;
  }
    .main-btn-div a {
      pointer-events: all;
    }

  .main-btn-description {
    position: absolute;
    display: none;
    background: #e7e7e8dd;
    width: 20vw;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 3px 3px 4px rgba(0,0,0,0.5);
    transform: translateX(-50%);
    font-weight: 600;
    font-size:14px;
  }

  @media screen and ( max-width: 1024px ){
    .main-btn-red {
      font-size:21px;
    }
  }

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

    .main-btn-div {
      position: initial;
      width: 100%;
      margin-top: 15px;
      padding-bottom: 0;
    }

    .button-block {
      display: block;
    }

    .btn-red {      
      font-size:12px;   
      width: auto;
      margin: 2px 0 2px 2px;
    }

    .main-btn-red {
      font-size:18px;
      width: 80%;
      max-width: initial;
      display: block;    
      margin: 0 auto;
      box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
      padding: 10px;      
    }
    .main-btn-description {
      font-size:12px;      
      position: relative;
      top:-5px;
      width: 80%;
      max-width: initial;
      display: block;    
      background: #e7e7e8;
      margin: 0 auto;      
      padding: 15px 8px 8px 8px;
      margin-bottom: 10px;
      border-radius:  0 0 8px 8px;
      line-height: 1;
      z-index: -1;
      transform: none;
      font-weight: 400;
      box-shadow: none;
    }

  }

  .below-menu.new {
    border: none;    
  }

  .below-menu.new a {    
    font-weight: 700;
    margin: 0 15px;
  }



/*
  =================================================================================
  MISCELLANY
  =================================================================================
*/


.hidden-xxs {
  display: block;
}
@media screen and (max-width:480px) {
  .hidden-xxs {
    display: none;
  }
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height:100%;
}

.flex-center-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  height:100%;
}

.flex-right-end {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  height:100%;
}

.pb-15 {
  padding-bottom: 15px;
}

hr.bold {
  display: block;
  height: 12px;
  width: 40px;
  background: black;
  margin: 15px auto;
}

.search-box > span {
  font-size:21px;
  top:0;  
}



/* PROMO */
.promo {
  float:right;
  margin-top: 20px;
  margin-right: 70px;  
}  
  .promo > * {
    color:white;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  }  
  .promo > h3 {
    font-size: 60px;
    font-weight: bold;
    margin-bottom: 0;
  }  
  .promo > p {        
    font-size: 22px;    
    font-weight: 600;
    margin-bottom:0;
  }  
  .promo > span {
    font-size: 14px;      
  }


.search-box.responsive {
  width:21vw; min-width: 226px;
}

.search-box.responsive > span {
  top:0 !important;
}

footer.new a {
  text-transform: uppercase;  
}


@media screen and (min-width: 1200px) {
  .padding-lg-0 {
    padding: 0;
  }
} 

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

  .promo {
    float: initial;
    margin-top: 35%;
    margin-left: 40px;
  }
  .promo h3 {
    font-size:50px;
  }
   
} 

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

  .promo {    
    margin-top: 41%;
    margin-left: 40px;
  }
  .promo h3 {
    font-size:40px;
  }
   
} 

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

  .promo {    
    margin-top: 20px;
    margin-left: 100px; 
    float:right;  
  }
  .promo h3 {
    font-size:36px;
  }
  .promo p {
    font-size:20px;
  }
   
} 

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

  .promo {    
    margin-top: 45%;
    margin-left: 40px; 
    float:initial;  
  }
  .promo h3 {
    font-size:36px;
  }
  .promo p {
    font-size:20px;
  }

  .search-box.responsive {
    width:100%; min-width: initial;
  }

  header > .row {
    height:90px;
    font-size:13px !important;
  }


   
} 

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

  .promo {    
    margin-top: 0;
    margin-left: 15px;    
  }
  .promo h3 {
    font-size:30px;
  }

  .search-box.responsive {    
    width: 50vw !important;
  }

  .search-box.responsive > input {    
    text-align: right;
    position: relative;
    top:3px;
  }

  .search-box.responsive > span {    
    font-size:14px; 
    top: 3px !important;   
  }

  .pb-xs-5 {
    padding-bottom: 5px;
  }

  .shipping-contact {
    font-size: 12px;
  }
   
} 

.header-text {
  z-index: 2;
}

/*
  =================================================================================
  OVERLAY > SPAIN
  =================================================================================
  Configuración de la ventana modal del Spain (ésta muestra un mensaje de
  advertencia al usuario indicándole que va a perder lo que tiene en el carrito)
*/
  .overlay-spain {
    display: none;
    position: fixed; 
    top:0;
    left:0;
    width: 100vw;
    height: 100vh;  
    background: rgba(255,255,255,0.8); 
    z-index: 1000;
    text-align: center; 
    overflow-y: auto;
    overflow-x: hidden; 
  }
    .overlay-spain > div {
      overflow-y: auto;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 50%;
      max-width:600px;
      transform: translate(-50%, -50%);
      max-width: calc( 100% - 30px );
      max-height: calc( 100% - 30px );
      background-color: white;
      padding:15px;
      border: 1px solid black;
    }
    .overlay-spain h2 {
      font-size:16px;
    }
    .overlay-spain h2.h1 {
      font-size:20px;
    }

   @media screen and ( max-width: 767px) {
    .overlay-spain > div {
      width: calc(100% - 30px);
      height: auto;
    }   
  }