@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);


*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

html {
  scroll-behavior: smooth;
}



h2{
   color:#ffffff;
   font-size: 2.5vmin;
  /* font-size: 5vmax; */
  text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;
}

h3{
   font-family: 'Roboto' Arial, Helvetica, sans-serif;
   color:#ffffff;
  font-size: 4.5vmax;
  text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;
}


p{
  color: #ffffff;
  font-size: 3.5vmax;
  text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;   
}

/*ancho barra */
::-webkit-scrollbar {
   width: 10px;
 }
 
 /* color fondo barra */
 ::-webkit-scrollbar-track {
   background: black; 
 }
  
 /* color Handle de la barra */
 ::-webkit-scrollbar-thumb {
   background: rgb(48, 48, 233); 
 }
 
 /* Color Handle  hover */
 ::-webkit-scrollbar-thumb:hover {
   background: blue; 
 }


/* body{  
   background-color: white;
   border:2px solid red;

 } */


/* cabecera */

.offset {
   padding-top: 10px;
   text-align: center;
   transition: 0.6s;
}

.header {
  display: flex;
  font-weight: bold;
  text-align: center;
  background-color: black;
  z-index: 99;

}

.header.small {
  /* height: 95px; */
  border-bottom: 1px solid blue;

  }

.header.small ~ .offset {
   padding-top: 0px;
   border-bottom: 2px solid red;
}


.contador.none{
  display: none;
}

/* barra superior nombre y logo */
.btn-menu{
  position: absolute;
  right: 10px;
  /* top: 5px; */
  background-image: url("/ico/ico-menu-64px.png");
  background-size: cover ;
  background-repeat: no-repeat;
  background-position: center;   
  height: 40px;
  width: 40px;
  background-color: blue;
  cursor: pointer;
}

.menu-idioma { 
  position: relative;   
  /* background-color:  black;  */
  /* background-image: url("../img/blanes-playa.jpg"); */
  background-size: cover ;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}
 
.icono-idioma {
  margin-top: 15px;
  margin-right: 10px;
  border-bottom: 2px solid white;
  border-right: 2px solid white;   
 }
 
.flag {
  max-height: 20px;
  margin-bottom: 2px; 
  cursor: pointer;
 }

.caja-contador{
  background-color: black;
  height: auto;
  z-index:99;
}

.counter-number{
  padding-top: 10px;
  font-size: 8vw;
  /* font-size: 6rem; */
  /* width: 150px; */
  vertical-align: middle;
  align-items: center;
  text-align: center;
  color:white;
  }

.counter-text {
  /* display: table-cell; */
  font-style: italic;
  font-weight: bolder;
  padding-left: 10px;
  padding-top: 10px;
  font-size: 4.5vw;
  vertical-align: middle; 
  color: black;   
  /* z-index: 10; */
  }

  .loader-page {
     position: fixed;
     z-index: 25000;
     background: rgb(255, 255, 255);
     left: 0px;
     top: 0px;
     height: 100%;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition:all .3s ease;
   }

   .loader-page::before {
     content: "";
     position: absolute;
     border: 2px solid rgb(50, 150, 176);
     width: 60px;
     height: 60px;
     border-radius: 50%;
     box-sizing: border-box;
     border-left: 2px solid rgba(50, 150, 176,0);
     border-top: 2px solid rgba(50, 150, 176,0);
     animation: rotarload 1s linear infinite;
     transform: rotate(0deg);
   }



   .loader-page::after {
     content: "";
     position: absolute;
     border: 2px solid rgba(50, 150, 176,.5);
     width: 60px;
     height: 60px;
     border-radius: 50%;
     box-sizing: border-box;
     border-left: 2px solid rgba(50, 150, 176, 0);
     border-top: 2px solid rgba(50, 150, 176, 0);
     animation: rotarload 1s ease-out infinite;
     transform: rotate(0deg);
   }
   @keyframes rotarload {
      0%   {transform: rotate(0deg)}
      100% {transform: rotate(360deg)}
   }





/* caja cookies */

 .estilo-caja-cookies {
   width: 100%;
   position: fixed;
   bottom: 0;
   /* padding: 10px;   */
   border-top: 2px solid black;
   background-color: #ffffff;
   font-size: 2.5vw;
   color: black;
   z-index: 100;
   border: 2px solid red;
   /* text-shadow: 1px 1px 2px gray, 0 0 5px gray, 0 0 5px gray; */
 }
 
 /* .card {
   width: 80%;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
   background-color: transparent;
   background-clip: border-box;
   border: 3px solid black;
   border-radius: 6px;
   -webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250);
   -moz-box-shadow: 0px 0px 5px 0px rgba(212, 182, 212, 1);
   box-shadow: 0px 0px 5px 0px rgb(161, 163, 164);
 } */
 
 /* .card-text {
   overflow: hidden;
   font-size: 2.5vw;
 } */
 


 .cookies a {
   font-size: 3.5vw;
   text-decoration: none;
   color: blue;
 }
 
 .cookies a:hover {
   text-decoration: none;
   color: red;
 }
 
 /* .textoCajaCookie {
   font-size: 3vw;
 } */
 
 
 .btn {
   font-size: 3vw;
 }
 
 .btn:hover {
   background-color: blue;
 }
 

.btn-estilo{
color: black;
font-size: 3.5vw;
font-style:italic;
padding: 15px;
margin-top: 5px;
margin-bottom: 5px;
border-color: blue;
}

.estilo-texto-oferta{
  font-size: 3.5vmin;
  color:#ffffff;
  text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;
}

 #cajaBotonInicio {
   /* position: fixed;   */
   width: 50px;
   height: 50px;
   right: 10px;
   /* top: 75%; */
   z-index: 99;
 }
 
 .ir-arriba {
   display: none;
   /* width: 50px; */
   /* height: auto; */
   /* padding: 5px; */
   background: white;
   /* font-size: 20px; */
   cursor: pointer;
   /* position: fixed; */
   /* bottom: 20px; */
   /* right: 0px; */
   border-bottom: 2px solid black;
   border-right: 4px solid black;
   z-index: 99;
 }

 /* #lateral{
 
   position: absolute;
   width: auto;
   height: auto;
   right: 10px;
   top: 50px;
   cursor: pointer;
   z-index: 90;
   
 } */

 /* redes sociales */
 /* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */

 #cajaBotonInicio {
   /* position: fixed;   */
   width: 50px;
   height: 50px;
   right: 10px;
   /* top: 75%; */
   z-index: 99;
 }
 
 /* .ir-arriba-ico {
   display: none;
  
 } */

.icon-arrow-up{
   display: none;
   position: fixed;
   width: auto;
   height: auto;
   bottom: 50px;
   right: 5px;
   bottom: 40px;
   /* left: 10px; */
   /* -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%); */
   z-index: 10;   
   cursor: pointer;
   /* position: fixed;   */

}

.icon-arrow-up a {
   /* display: block; */
   text-align: center;
   padding: 16px;
   /* margin: 5px; */
   transition: all 0.3s ease;
   color: white;
   font-size: 15px;
   border-radius: 25%;
 }

.icon-bar {
   display: none;
   position: fixed;
   width: auto;
   height: auto;
   bottom: 50px;
   left: 5px;
   bottom: 40px;
   z-index: 10;   
   cursor: pointer;
 }
 
 /* Style the icon bar links */
 .icon-bar a {
   display: block;
   text-align: center;
   padding: 16px;
   /* margin: 5px; */
   transition: all 0.3s ease;
   color: white;
   font-size: 15px;
 }
 
 /* Style the social media icons with color, if you want */
 .icon-bar a:hover {
   background-color: #000;
 }
 
 .whatsapp{
   background: green;
   color: white;
 }

 .facebook {
   background: #3B5998;
   color: white;
 }
 
 .twitter {
   background: #55ACEE;
   color: white;
 }
 
 .google {
   background: #dd4b39;
   color: white;
 }
 
 .linkedin {
   background: #007bb5;
   color: white;
 }
 
 .youtube {
   background: #bb0000;
   color: white;
 }

 .arrow-up{
   background: rgba(0, 0, 255, 0.693);
   color: white;
 }

.fondo-pie { 
   position: relative;   
   background-color:  black; 
   /* background-image: url("../img/blanes-playa.jpg"); */
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   z-index: 2;
}

.barra-final-pie{
   border-top: 2px dotted white;
   margin-top: 5px;
   padding-top: 10px;
}

 ul{
  list-style: none;
}




.container1 {
   background-image: url("../img/split-aire600x401.gif");
   align-items: center;
   display: flex;
   height: 100vh;
   justify-content: center;
}


:root {
   --background: #005;
   --primary: #88d5bf;
   --secondary: #5d6bf8;
   --third: #e27fcb;
}

.shape {
   background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
   animation: morph 8s ease-in-out infinite;
   border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
   height: 30%;
   transition: all 1s ease-in-out;
   width: 100%;
   z-index: 5;
}

.shape1 {
   background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
   animation: morph 8s ease-in-out infinite;
   border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
   height: 60%;
   transition: all 1s ease-in-out;
   width: 60%;
   z-index: 5;
}

@keyframes morph {
   0% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      opacity: 95%;
      background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  }
   50% {
      border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
      opacity: 95%;
      background: linear-gradient(45deg, var(--third) 0%, var(--secondary) 100%);
  }
   100% {
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      opacity: 95%;
      background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 100%);
  }
}

.blur{
   padding: 3px;
   border: 3px solid #fff;
   box-shadow: 0px 0px 25px #222;
   backdrop-filter: blur(1px);   
 }

 .blurs{
   color:black;
   font-style: italic;
   font-weight: bolder;
   backdrop-filter: blur(1px);
 }

.fondo1{  
   background-image: url("../img/winter-forest-400.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: initial;  
}

.fondo2{ 
   background: rgb(0,0,5);
   background: linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(44, 125, 231) 34%, rgba(0,95,255,1) 100%);    
}

.fondo5{
   background-image: url("../img/lineal-nevera-super.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: initial;  
}

.fondo4{
border-radius: 50%;
}

.fondo6{
   background-image: url("../img/furgo-fred-mora-2.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: initial; 
}

.fondo7{
   background-image: url("../img/acondicionador-aire-montado-pared-blanca.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: initial; 
}

.fondo8{
   
   background-image: url("../img/cubito-hielo-640px.jpg"); 
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.fondo9{   
   background-image: url("../img/mapa-maresme-costa-brava.jpg"); 
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.estilo2{
   color: white;
   font-size: 3vmax;
   text-shadow: 2px 1px 2px black, 0 0 5px black, 0 0 5px gray; 
}

.fondo3{  
   background-image: url("../img/Amin.png");
   /* background-image: url("../img/foto-blanes-playa-612x612.jpg"); */
   background-repeat: no-repeat;
   background-size: cover;
}



/* .estilo-contenedor{
   background-color: gray;
} */

.estilo-pie{
   background-color: #000000;
   color: #ffffff;
}


#caja-info{
   background-image: url("../img/foto blanes.jpg");
   background-repeat: no-repeat;
   background-size: cover;  
   color: #ffffff;
}

/* estilo fondo  */
#caja1{ 
   background: rgb(2,0,36);
   background: linear-gradient(135deg, rgba(2,0,36,1) 0%, rgba(202,226,228,1) 34%, rgba(0,95,255,1) 100%);    
   /* border: 2px solid red;    */
}

#caja2{
   background-color: #88d5bf;
   margin-top: 10px;
}

#caja3{
   background-color :gray;
}

.caja_interior{
   /* position: relative; */
  /* display: flex; */
  /* float: right; */
  padding-top:10%;
  padding-bottom: 10%;
  /* justify-content: space-around; */
  /* justify-content: space-between; */
   /* z-index: 10; */
}

@keyframes scroll {
   0% {
      transform: translateX(0);
  }
   100% {
       /*  recordar que 4 mitad de 8 width: calc(250px * 8);  */
      transform: translateX(calc(-250px * 4));
  }
}

.slider {
   background-image: url("../img/split-aire600x401.gif");
   background-repeat: no-repeat;
   background-size:cover;
   background-position: center;
   box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
   height: 150px;
   overflow: hidden;
   position: relative;
   border-top: 5px solid black;
   border-bottom: 5px solid black;
   z-index: 99;
}

.slider2 {
   background: none ;
   /* opacity: 0.8; */
   box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
   height: 200px;
   margin: auto;
   overflow: hidden;
   position: relative;
   width: auto;
}

/* .slider2::before, .slider2::after, */
.slider::before, .slider::after {
   background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
   content: "";
   height: 150px;
   position: absolute;
   width: 10%;
   /* z-index: 2; */
}

.slider::after {
   right: 0;
   top: 0;
   transform: rotateZ(180deg);
}

.slider::before {
   left: 0;
   top: 0;
}


.slider .slide-track {
   animation: scroll 40s linear infinite;
   display: flex;
   align-content: space-between;
   width: calc(250px * 8);
   z-index: 99;
}


.slider2 .slide-track {
   animation: scroll 40s linear infinite;
   display: flex;
   align-content: space-between;
   width: calc(190px * 5);
}


.slider .slide {
   height: auto;
   width: 250px;
   margin-bottom: 20px;
}



.slider2 .slide2 {
   height: auto;
   width: 200px;
}

.clientes{
   width: 100px;
   height: 100px;
   display:none;
}

/* hr.sep1 {
   position: relative;
   background-color: none;
   border: none;
   height: 1px;
   width: 100%;
   margin: 45px auto;
   text-align: center;
 } */
 
 /* hr.sep1:after {
   position: relative;
   top: -0.8em;
   font-size: 4em;
   background: none;
   display: inline-block;
   color: whitesmoke;
   text-shadow: 1px 1px 2px black, 0 0 5px black, 1px 1px 5px blue;
   line-height: 1;
   content: "*****";
 } */


/* ribbon */



.box {
  position: relative;
  max-width: 400px;
  width: 90%;
  max-height: 400px;
  /* height: auto; */
  /* background: #fff; */
  background-color: violet;
  background-size: cover;
  box-shadow: 0 0 15px rgba(0,0,0,.1);
}

.box:hover{
  background-color: rgba(142, 98, 225, 0.674);
}

/* common */
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  z-index: 2;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #3498db;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

/* top left*/
.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}




.box1{
   width: 100px;
   height: 100px;
   background-color: gray;
} 


.box1::after {
   content: '';
   border-top:  25vw solid #008ce6;
   border-right: 25vh solid transparent;
   width: auto;
   position: absolute;
   left: 10px;
   z-index: -1;
   
 }

/* Triángulo Esquina */
.triangulo-esquina{
	width: 0;
	height: 0;
	border-top:  100px solid #63639c;
	border-left:  100px solid transparent;
   background: transparent;
/* Si cambias los valores de border-top y border-left a border-bottom o border-right puedes hacer que el triángulo apunte a las esquinas contrarias*/
}

.shaper1{ 
   background: #639c74;
   margin: 10% auto 0;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {  
   .caja-clientes-1 {display: none;}
   /* .caja-clientes-2 {display: none;} */
 }
 
 .cookies p{
   font-size: 9.5vw;
 }  

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 768px)  {
   .caja-clientes-2 {display: none;}
   .caja-clientes-1 {display: initial;}
   /* #caja-clientes-1 {display: initial;} */
   /* #caja-clientes-2 {display: none;} */
   
   .cookies p{
      font-size: 3vw;
    }
   
    h3{
      font-family: 'Roboto' Arial, Helvetica, sans-serif;
      color:#ffffff;
     font-size: 2vmax;
     text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px black;
   }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 /* @media only screen and (min-width: 768px)  {
   #caja-clientes-1 {display: none;} 
    #caja-clientes-2 {display: hidden;}
 }  */
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 1220px) {
   .caja-clientes-1 {display: none;}
   .caja-clientes-2 {display: initial;}  
  
 } 
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 /* @media only screen and (min-width: 1200px) {
   .example {background: pink;}
 } */