
@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Roboto:wght@300&display=swap');
/*font-family: 'Roboto', sans-serif;*/


@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');
/*font-family: 'Barlow', sans-serif;*/


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body{
    font-family: 'News Cycle', sans-serif;
    background:white;
    width: 100%;
    height: auto;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:flex-start;
    align-items:center;
   
}



.padre {
   
background-image: url(img/fondo3.png);
    
width: 100%;
height:auto;
padding-bottom: 5%;
   
    
background-size: cover;
background-attachment: fixed;
background-repeat:repeat;
    
    
display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;

}


/*barra*/
.barra{
    width: 100% !important;
    height: 150px !important;
    
    position: fixed;
z-index: 5;
    
}

@media (max-width:600px) { .barra{
    width: 100% !important;
   
    
}}

/*barra*/





/*banner*/
.banner{
/*background: black;*/
background: white;
background-position: center;
width: 1450;
height: 800px;
max-width: 1450px;
margin-top: 160px;
 
margin-bottom: 20px;
overflow: hidden;
    
/*https://animate.style/*//*son animaciones preestablecidas*/
animation: flipInY; 
animation-duration: 2s;

display: flex;
flex-flow: column nowrap;
justify-content:space-between;
align-items: center;
    
}

@media (max-width:600px) { .banner{
width: 400px;
height: auto;
    
display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;
    
}}

.present{
    background: white;
    width: 1450px;
    height: 700px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items: center;
}

@media (max-width:600px) { .present{
width: 400px;
height: auto;
    
display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;
    
}}

.nost{
    background: white;
    width: 530px;
    height: 700px;
    padding: 30px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
   
}

@media (max-width:600px) { .nost{
width: 390px;
height: auto;
    
display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;
    
}}

.logo{
    width: 364px;
    height: 184px;
}

.p1{
   background: white;
   width: 450px;
   font-size: 19px;
   font-family: 'Barlow', sans-serif;
   text-align: justify;
   margin: 20px 0px 20px 0px;
}

@media (max-width:600px) { .p1{
width: 350px;
height: auto;
text-align: center;
    

    
}}

.a1{
    background: red;
    margin-left: 7px;
    width: 100px;
    height: 20px;
    border-radius: 8px;
    text-align: center;
    color: white;
    font-family: 'Barlow', sans-serif;
    align-self: flex-start;
}

@media (max-width:600px) { .a1{
 align-self: center;
   
}}

.a1:hover { 
   background: orange;
}


.car1{
   
    background: url(img/car1.png); 
    width: 900px;
    height: 700px;
   
}

@media (max-width:600px) { .car1{
 background: url(img/car1%20mini.png); 
    width: 250px;
    height: 186px;
   
}}

h1{
    /*background: yellow;*/
    width: auto;
    height: auto;
    margin-bottom: 20px;
}

@media (max-width:600px) { h1{
 font-size: 20px;
   
}}
/*banner*/



/*enfoque*/
.enfoque{
background: white;
width: 1450px;
height: auto;
max-width: 1920px;
margin-top: 10px;
 
margin-bottom: 20px;
overflow: hidden;
    
display: flex;
flex-flow: column nowrap;
justify-content:space-between;
align-items: center;

    
/*https://animate.style/*//*son animaciones preestablecidas*/
animation: zoomInLeft; 
animation-duration: 2s;
animation-delay:  0.5s;
animation-fill-mode:backwards;

}

@media (max-width:600px) { .enfoque{
width: 400px;

display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;
   
}}


h2{
    /*background: yellow;*/
    width: auto;
    height: auto;
    margin-bottom: 20px;
    margin-top: 50px;
    margin-left: 30px;
    
    align-self: flex-start;
}

.cuerpo1{
    background: white;
    width: 1420px;
    height: 850px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items: center;
   
}

@media (max-width:600px) { .cuerpo1{

    width: 400px;
    height: auto;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:flex-start;
    align-items: center;

   
}}

.enf{
    /*background: red;*/
    width: 700px;
    height: 850px;
    
     display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
   
}

@media (max-width:600px) { .enf{

    width: 380px;
    height: auto;
  
}}

.circulos{
    /*background: gray;*/
    width: 700px;
    height: 850px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items:center;

   
}

@media (max-width:600px) { .circulos{

    width: 380px;
    height: auto;
  
}}

.cir{
    /*background: purple;*/
    background:url(img/4%20puntos.png);
    width: 700;
    height: 700px;

}

@media (max-width:600px) { .cir{

    background:url(img/4%20puntos%20mini.png);
    width: 350;
    height: 1170px;
  
}}

.car2
    {
    background: url(img/car2.png);
    background-position: center;
    width: 600px;
    height: 216px;
   
}

@media (max-width:600px) { .car2{
     background: url(img/car2%20mini.png);
    background-position: center;
    width: 250px;
    height: 90px;
  
}}

.p2{
    /*background: gray;*/
    text-align:justify;
    
   width: 650px;
   font-size: 19px;
   font-family: 'Barlow', sans-serif;
   text-align: justify;
   margin: 20px 0px 20px 0px;
    
}

@media (max-width:600px) { .p2{
  width: 300px;
   font-size: 20px;
   font-family: 'Barlow', sans-serif;
  
  
}}

.a2{
    background: red;
    margin-left: 7px;
    width: 100px;
    height: 20px;
    border-radius: 8px;
    text-align: center;
    color: white;
    font-family: 'Barlow', sans-serif;
    align-self: flex-start;
}

.a1:hover { 
   background: orange;
}


/*enfoque*/




/*alquiler*/
.alquiler{
background: #fdfda2;
background-position: center;
width: 1450px;
height: auto;
max-width: 1920px;
margin-top: 10px;
 
margin-bottom: 20px;
overflow: hidden;
    
display: flex;
flex-flow: column nowrap;
justify-content:space-between;
align-items: center;

    
/*https://animate.style/*//*son animaciones preestablecidas*/
animation: zoomInLeft; 
animation-duration: 2s;
animation-delay:  0.5s;
animation-fill-mode:backwards;

}

@media (max-width:600px) { .alquiler{
width: 400px;

display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;
   
}}

.alq  {
    /*background: green;*/
    width: 1400px;
    height: 700px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items: center;
   
}

@media (max-width:600px) { .alq{
width: 400px;

display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;
   
}}

.puntos  {
    background: url(img/alquilers.png);
    width: 680px;
    height: 700px;
   
}

@media (max-width:600px) { .puntos{
background: url(img/alquilers%20mini.png);
width: 400px;
height: 800px;

}}

.car3 {
    background: url(img/car3.png);
    width: 680px;
    height: 700px;
   
}


@media (max-width:600px) { .car3{
background: url(img/car3%20mini.png);
width: 300px;
height: 700px;

}}
/*alquiler*/






/*flota*/
.flota{
background: white;
background-position: center;
width: 1450px;
height: auto;
max-width: 1920px;
margin-top: 10px;
 
margin-bottom: 20px;
overflow: hidden;
    
display: flex;
flex-flow: column nowrap;
justify-content:space-between;
align-items: center;

    
/*https://animate.style/*//*son animaciones preestablecidas*/
animation: zoomInLeft; 
animation-duration: 2s;
animation-delay:  0.5s;
animation-fill-mode:backwards;

}

@media (max-width:600px) { .flota{

width: 400px;
height: auto;
    
display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;

}}

.cars  {
    /*background: green;*/
    width: 1400px;
    height: 900px;
    
display: flex;
flex-flow: row wrap;
justify-content:center;
align-items: center;
   
}

@media (max-width:600px) { .cars{
width: 1400px;
height: auto;
    
display: flex;
flex-flow: column nowrap;
justify-content:flex-start;
align-items: center;

}}

.caja {
    background: yellow;
    width: 300px;
    height: 300px;
    margin: 30px 30px;
   
}

.c1  {
    background: url(img/c1.png);
    width: 300px;
    height: 300px;
}

.c2  {
    background: url(img/c2.png);
    width: 300px;
    height: 300px;
}

.c3  {
    background: url(img/c3.png);
    width: 300px;
    height: 300px;
}

.c4  {
    background: url(img/c4.png);
    width: 300px;
    height: 300px;
}

.c5 {
    background: url(img/c5.png);
    width: 300px;
    height: 300px;
}

/*flota*/










/*formulario*/
.form{
    width: 100% !important;
    height: 550px !important;
    
}

@media (max-width:600px) { .form{
    width: 100% !important;
    height: auto !important;
    
}}
/*formulario*/



/*-----------------------------------------*/








    
    
    
    
    
/*-----------------------------------------*/







