@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

* {padding:0; margin:0; text-decoration: none; font-family: 'Roboto', sans-serif; color:#145F77;} 

#banner1{position:absolute; top:10px; left:40%; width:20%; height:40px; }

.agenc_esp{position:absolute; top:60px; left:10%; width:80%; height:30px; font-size:20px; text-align:center;  color:#4E94A0;}
.english{display:none;}


.button {
 left:80%;
  width:60px;
  height:20px;
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  box-sizing: border-box;
  padding: 4px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 2px 1px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  position:absolute; top:5px; 
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.button2 {
 position:absolute; top:30px;
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

a{text-decoration:none;}


/*  ***************************************************************************************** */
.container-all{
    position:absolute;
    top:90px;
    left:10%;
    width:83%;
    border-radius: 6px;
    overflow: hidden;
}

.slide img{
    width:300px;
	height:300px;
}


.slide{
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: all 600ms;
    animation-name: autoplay;
    animation-duration: 30s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.item-slide{
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    max-width: 100%;
}


@keyframes autoplay{
    1%{transform: translate3d(0, 0, 0);}
   25%{transform: translate3d(calc(-100% * 1), 0, 0);}
   50%{transform: translate3d(calc(-100% * 2), 0, 0);}
   75%{transform: translate3d(calc(-100% * 3), 0, 0);}
  100%{transform: translate3d(calc(-100% * 4), 0, 0);}
}

/*  ***************************************************************************************** */

.cubous{position:absolute; top:400px; left:1%; width:98%; display: flex;  flex-direction:column;}
.cubos{text-align:center; margin-bottom:5%;}

#text0{font-size:18px;}
#text1{font-size:22px;}
#text2{font-size:20px;}
#text3{font-size:18px; background:#39B4AE; color:white; text-align:center; border-radius:6px;}
.capsula{display: flex;
  justify-content: space-between;}
.izq{text-align:left;  padding:6px; color:white;}
.der{text-align:right; padding:6px; color:white;}
#text4{font-size:18px;}

.ventas{text-align:center;}
#ventasTit{font-size:16px;}

.telf{font-size:20px; color:red;}

#smart-button-container{ left:1%; width:98%; }

#gracias, #avisoPol{font-size:20px;}


.circle {
  position:absolute;
  left: 42%;
  width: 50px;
  height: 50px;
  text-align:center;
  background: green;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

.circle::before, .circle::after {
  content:"";
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 10px solid gray;
  border-radius:100%;
  animation: latido linear 3s infinite;
}

.circle::after {
  animation-delay: -1.5s;
}

@keyframes latido {
  0% { width:50px; height:50px; border:5px solid green;  box-sizing: border-box;}
  100% { width:100px; height:100px; border:10px solid transparent; box-sizing: border-box; }
}

.icono {
  width: 50px;
  height: 50px;
border-radius:50%;
}



    
@media screen and (min-width: 450px) {
#banner1{position:absolute; top:9px; left:30px; width:70px; height:60px; }

.agenc_esp{position:absolute; top:15px; left:15%; width:70%; height:25px; font-size:30px; color:#4E94A0;}

.button {left:85%;}

.container-all{
    position:absolute;
    top:75px;
    left:15%;
    width:70%;
    border-radius: 10px;
    overflow: hidden;
}

.slide img{
    width:410px;
	height:260px;
}


.cubous{position:absolute; left:12%; width:76%;}
.cubos{text-align:center; font-size:40px;}

 .contac{width:40px; height:40px;} .contac:hover{width:45px; height:45px;}
 
}







 
@media screen and (min-width:900px) {
#banner1{position:absolute; top:10px; left:180px; width:120px; height:80px; }

.agenc_esp{ position:absolute; top:15px; left:20%; width:60%; height:20px; font-size:70px; color:#4E94A0; }

.button {
     left:90%;
  width:120px;
  height:60px;

}

.button2 {
 top:80px;
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

.container-all{
    position:absolute;
    top:110px;
    left:35%;
    width:30%;
    border-radius: 10px;
    overflow: hidden;
}

.slide img{
    width:410px;
	height:400px;
}

.slide{
    display: flex;
    transform: translate3d(0, 0, 0);
    transition: all 600ms;
    animation-name: autoplay;
    animation-duration: 30s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */


.cubous{position:absolute; top:530px; left:1%; width:98%;}
.cubos{text-align:center; margin-bottom:10px; padding:10px;}

#text0{font-size:30px;}
#text1{font-size:26px;}
#text2{font-size:26px;}
#text3{font-size:24px; background:#39B4AE; color:white; text-align:center;}
.capsula{display: flex;
  justify-content: space-between;}
.izq{text-align:left;  padding-left:25%; color:white;}
.der{text-align:right; padding-right:25%; color:white;}
#text4{font-size:22px;}

.ventas{text-align:center;}
#ventasTit{color:#64636A; font-size:20px;}

.circle {left: 48%;}

.telf{font-size:30px; color:red;}


#smart-button-container{left:1%; width:98%; box-sizing: border-box; padding:10px; background:#39B4AE;}

#gracias, #avisoPol{font-size:20px;color:#4B5981}

}