@import url('https://fonts.googleapis.com/css?family=Arvo|Pacifico|Quicksand&display=swap');

@import url(menu.css);
@import url(slider.css);
@import url(slider-auto.css);
@import url(p_flexslider.css);
@import url(banner.css);

*{
    padding: 0;
    margin: 0;
}

body{
    font-family: 'Arvo', serif;
}


#slider-index{
    display: block;
    background: #fff;
}

#slider-index img{
    width: 100%;
    min-width: 100%;
}


.flexslider{
    display: none;
}

#pie{
    width: 100%;
    background: teal;
    text-align: center;
}

#pie i{
    font-size: 40px;
    padding: 20px;
    color: black;
}

#pie i:hover{
       color: rgba(51,51,51,0.9);
}

#pie a{
    font-size:20px;
    color: #000;
}

h1{
    border-bottom: 1px solid #000;
}

h1,p,h3{
    padding: 20px;
}

p{
    text-align: justify;
}


#s1 img{
    width: 100%;
}
#s2{
    background: #A6C2BB  ;
    width: 100%;
}

#s3{
    background: teal;
    width: 100%;
}


#car img{
    border-radius: 0;
    padding: 70px;
}
#s2 img, #s3 img{
    border-radius: 1000px;
}

#des img{
    width: 200px;
}

#car article{
    text-align: center;
}

.upi{
  display: block;
  z-index: 100;
  padding: 20px;
  font-size: 60px;
  cursor: pointer;
  position: fixed;
  bottom: 40px;
  right: 0;
 
  }

   form{
        width: 50%;
        margin-bottom: 20%;
        margin-left: 25%;
    }


form{
    
    border:  1px solid #000;
    max-width: 100%;
    box-sizing: border-box;
    border:none;
}
form i{
    font-size: 25px;
}

form h1{
    color: #000;
    text-align: center;
    margin: 0;
    font-size: 40px;
    margin-bottom: 20px;
}

input, textarea{
 
    width: 100%;
    margin-bottom: 20px;
    padding: 7px;
    box-sizing: border-box;
    font-size: 17px;
}

textarea{
    min-height: 100px;
    max-height: 200px;
    max-width: 100%;
}
#boton{
    color: #fff;
    background: #000  ;
    border-radius: 10px;
}

#boton:hover{
    cursor: pointer;
    background: rgba(51,51,51,0.9);
}

@media (max-width:576px){
#des img{
    width: 120px;
}
    
    #slider-index{
    display: none;
}
    

    .flexslider{
        display: block;
    }
}

@media (max-width: 970px){
    #des img{
    width: 130px;
}
}

@media (min-width:1024px){
#car img{
    border-radius: 0;
    padding-top: 150px;
}
}

@media (min-width: 1200px){
    .slider-index img{
        width: 80%;
        height: 190px;
    }
}

