@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Macondo&family=Montez&family=Oleo+Script&family=Roboto+Mono:wght@700&family=Sriracha&display=swap');

 *{padding:0; margin:0; text-decoration: none;}

#banner1{position:absolute; top:10px; left:   0; width:20%; height:60px; }
#banner2{position:absolute; top: 4px; left:0; width:20%; height:60px; z-index:2000;  animation: GIROS1 1s infinite; opacity:0.3;}
@keyframes GIROS1{from{transform:rotateY(0deg)} to {transform:rotateY(360deg);}}

#back{
    position:absolute;
    top:30px;
    left:16%;
    width:30px;
    height:20px;
    font-size:40px;
    color:blue;
    animation-name: autoback;
    animation-duration:3s;
    animation-iteration-count: infinite;
}

@keyframes autoback{
      1%{transform: translate3d( 0%, 0, 0);}
    100%{transform: translate3d(100%, 0, 0);}
}

@keyframes transfAgenc{
      1%{transform: scaleY(1);}
    100%{transform: scaleY(0.8);}
}

.agenc_esp{ position:absolute; top:30px; left:32%; width:70%; height:30px; font-size:20px; color:#4E94A0; font-family: 'Macondo', cursive;     animation-name: transfAgenc;
    animation-duration:3s;
    animation-iteration-count: infinite;

}


.cuerpo{position:absolute; top:100px; left:3%; width:94%; height:200px; background:yellow;}
    #foto{position:absolute; top:0; left:0; width:35%; height:100%; z-index:500;}
 #paisaje{position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.7; }

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

#text0{color:#4B5981; font-size:30px; font-family: 'Montez', cursive; background:pink;}
#text1{color:#351F80; font-size:16px; font-family: 'Roboto Mono', monospace;}
#text2{color:#4B5981; font-size:20px; font-family: 'Roboto Mono', monospace;} 
#text3{color:black;   font-size:18px; font-family: 'Fredericka the Great'}
#text4{color:white; font-size:24px; font-family: 'Montez', cursive; background:#39B4AE;}
#text5{color:#39B4AE; font-size:18px; font-family: 'Macondo', cursive;}
#text6{color:#0B8B85; font-size:18px; font-family: 'Oleo Script', cursive;}
#text7{color:#FA3D26; font-size:18px; font-family: 'Sriracha', cursive;}

.socialite{margin-left:10%; width:80%; height:auto;}
.circle {
  width: 50px;
  height: 50px;
  background: green;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
}

.circle::before, .circle::after {
  content:"";
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  width: 30px;
  height: 30px;
  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; }
  100% { width:100px; height:100px; border:10px solid transparent; }
}

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

#button-0 { top:480px; left: 160px; } 

#telf{font-size:30px;}
 
 
 
 
 
 
 
 
 
 
 
    
 @media screen and (min-width: 450px) {
#banner1{position:absolute; top:10px; left:10px; width:50px; height:40px; }
#banner2{position:absolute; top:4px; left:10px; width:50px; height:40px; z-index:2000;  animation: GIROS1 1s infinite; opacity:0.3;}
.agenc_esp{position:absolute; top:15px; left:18%; width:70%; height:20px; font-size:20px; color:#4E94A0; }

 .cuerpo{position:absolute; top:60px; left:1%; width:98%; height:200px; background:yellow;}
#paisaje{position:absolute; top:0;    left:0; width:100%; height:100%; opacity:0.7; }
  #foto{position:absolute; top:0; left:0; width:30%; height:100%; z-index:500;}

.cubous{position:absolute; left:15%; width:70%; display: flex;  flex-direction:column;}
.cubos{text-align:center; color:#FA3D26; font-size:40px; font-family: 'Roboto Mono', monospace;}

 .contac{width:40px; height:40px;} .contac:hover{width:45px; height:45px;}
}
 
@media screen and (min-width: 820px) {

#banner1{position:absolute; top:10px; left:0; width:120px; height:80px; }
#banner2{position:absolute; top:4px; left:10px; width:100px; height:80px; z-index:2000;  animation: GIROS1 1s infinite; opacity:0.3;}

#back{
    position:absolute;
    top:30px;
    left:14%;
    width:30px;
    height:20px;
    font-size:40px;
    color:blue;
    animation-name: autoback;
    animation-duration:3s;
    animation-iteration-count: infinite;
}



.agenc_esp{ position:absolute; top:20px; left:18%; width:70%; height:30px; font-size:70px; color:#4E94A0; font-family: 'Macondo', cursive;     animation-name: transfAgenc;
    animation-duration:3s;
    animation-iteration-count: infinite;

}







 .cuerpo{position:absolute; top:120px; left:10%; width:80%; height:400px; background:yellow;}
#paisaje{position:absolute; top:0;    left:0; width:100%; height:100%; opacity:0.7; }
   #foto{position:absolute; top:0; left:0; width:30%; height:100%; z-index:500;}

.cubous{position:absolute; top:550px; left:15%; width:70%; display: flex; flex-direction:column;}

 .contac{width:60px; height:60px;} .contac:hover{width:55px; height:55px;}

#text0{color:#4B5981; font-size:50px; font-family: 'Montez', cursive; background:pink;}
#text1{color:#351F80; font-size:20px; font-family: 'Roboto Mono', monospace;}
#text2{color:#4B5981; font-size:25px; font-family: 'Roboto Mono', monospace;} #text2:hover{font-size:30px;}
#text3{color:black;   font-size:25px; font-family: 'Fredericka the Great'}
#text4{color:white; font-size:30px; font-family: 'Montez', cursive; background:#39B4AE;}
#text5{color:#39B4AE; font-size:18px; font-family: 'Macondo', cursive;}
#text6{color:#0B8B85; font-size:18px; font-family: 'Oleo Script', cursive;}
#text7{color:#FA3D26; font-size:18px; font-family: 'Sriracha', cursive;}

.cubos{text-align:center; margin-bottom:5%;}
#button-0 { top:460px; left: 47%; } 

}