@import url('default.css');

.section-contacto{
    width: 100%;
    height: auto;
    padding: 40px 0px;
  
}

.content-contact{
    width: 95%;
    height: auto;
    margin: auto;
    padding: 5px;
    display: flex;
    flex-direction: column;
}


.item-contact1{
    width: 100%;
    height: auto;
    background-color: #fafafa;
}

.item-contact1__content{
    width: 100%;
    height: auto;
    padding: 15px 0px;

}

.item-contact1__content-img{
    width: 100%;
    height: 140px;
    background-color: var(--colorPrincipal);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.item-contact1__content-img img{
    width: 250px;
    height: auto;
    border-radius: 50%;
    border: 5px solid white;
}

.list-contact{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 60px 0px;
}

.list-contact-li{
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 20px 10px;
    padding: 0%;
}

.list-square{
    width: 60px;
    height: 60px;
    background-color: var(--colorPrincipal);
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-p{
    font-size: 20px;
    color: #2d2d2d;
    margin-left: 10px;
    font-family: var(--fuenteTitle);
    font-weight: 600;
}

.list-icon{
    width: 40px;
    height: 40px;
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(201deg) brightness(104%) contrast(103%);
}

.background-contact{
    width: 100%;
    height: 270px;
    background-image: url('../img/img-gallery-004.jpeg');
    background-size: cover;
    background-position: bottom;
    position: relative;
    z-index: 0;
    padding: 10px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.background-contact::after{
    content: '';
    width: 100%;
    height: 270px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0f0f0f46;
    z-index: 10;
}

.background-contenido{
    width: 100%;
    height: 260px;
    position: relative;
    z-index: 20px;
    border: 1px solid white;

    display: flex;
    justify-content: center;
    align-items: center;
}

.background-contenido-div{
   
    
    position: relative;
    z-index: 20;
}

.background-title{
    color: white; 
    text-align: center;
    padding: 20px 0px;
    font-family: var(--fuenteTitle);
    font-size: 2.3rem;
}

.list-background{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.list-background li {
    list-style: none;
    margin: 8px;
}

.list-background li a{
    display: block;
    width: 50px;
    height: 50px;
    /* background-color: white; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.svg-social{
    width: 50px;
    height: 50px;
    padding: 5px;
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(201deg) brightness(104%) contrast(103%);
}
/* ------------------------------------------ */

.item-contact2{
    width: 100%;
    height: auto;
}

.box-info-contact{
    width: 100%;
    height: auto;
    margin-top: 40px;
}

.box-info-item{
    width: 100%;
    height: auto;
    color: white;
    padding: 20px 15px;
    background-color: var(--colorPrincipal);
}

.box-info-title{
    font-family: var(--fuenteTitle);
    font-size: 2rem;
    text-transform: uppercase;
    padding:5px 0px;
}

.box-info-item p{
    font-size: 18px;
    font-family: var(--fuenteText);
}

.form-contact{
    width: 100%;
    height: auto;
    color: #2d2d2d;
}

.form-content-item{
    width: 100%;
    height: auto;
    padding: 20px 5px;
}

.label-form{
    font-size: 1.5rem;
    color: #2d2d2d;
    font-weight: bold;
    font-family: var(--fuenteTitle);
    /* padding-bottom: 10px; */
    display: block;
}

.input-form{
    width: 100%;
    height: 20px;
    outline: none;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.445);
    font-size: 17px;
    font-family: var(--fuenteText);
    padding: 15px 0px;
    display: block;
}

.textarea-form{
    width: 100%;
    outline: none;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.445);
    font-size: 17px;
    font-family: var(--fuenteText);
    padding: 15px 0px;
    display: block;
}

.form-send{
    width: 90%;
    height: 45px;
    display: block;
    margin: 10px auto;
    border: 1px solid var(--colorPrincipal);
    background: none;
    color: var(--colorPrincipal);
    font-size: 20px;
    font-weight: 600;
    transition: all .4s ease-in;
    cursor: pointer;
    font-family: var(--fuenteTitle);
}

.form-send:hover{
  background-color: var(--colorPrincipal);
  color: white;
}


.modal-successfully{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 100;

    display: none;
    justify-content: center;
    align-items: center;
}

.modal-successfully-active{
    display: flex;
}

.modal{
   width: 90%;
   height: auto;
   background-color: white;
}

.modal-head{
    width: 100%;
    height: auto;
    padding: 15px 15px;
    background-color: var(--colorPrincipal);
    display: flex;
    justify-content: flex-end;
}

.modal-head i {
    font-size: 1.6rem;
    color: white;
    cursor: pointer;
}

.modal-body{
    width: 100%;
    height: auto;
    padding: 30px 0px;
}

.icon-send{
    width: 130px;
    height: 130px;
    display: block;
    margin: 10px auto;
    filter: invert(100%) sepia(18%) saturate(7361%) hue-rotate(304deg) brightness(88%) contrast(63%);
}

.title-modal{
    text-align: center;
    font-family: var(--fuenteTitle);
    font-size: 1.5rem;
    margin-top: 20px;
    color: #2d2d2d;
}


/* Media Querie phone Landscape */
@media screen and (min-width:576px){

}


/* Media Querie Tablet */
@media screen and (min-width:768px){

    .content-contact{
        flex-direction: row;
        justify-content: space-evenly;
    }
   .item-contact1{
    width: 40%;
   }
   .item-contact2{
    width: 60%;
    /* background-color: antiquewhite; */
   }

   .box-info-contact{
    width: 90%;
    height: auto;
    margin: 0px auto;
   }
   /* --------------------- */
   .modal{
    width: 50%;
   }
}

/* Media Querie Tablet-desktop */
@media screen and (min-width:992px){
   .item-contact1{
    width: 40%;
   }

   .item-contact2{
     width: 60%;
   }
}

/* Media Querie desktop */
@media screen and (min-width:1200px){
    .content-contact{
        width: 90%;
    }
    .item-contact1{
        width: 30%;
    }
}

/* Media Querie desktop large*/
@media screen and (min-width:1366px){
   
}

/* Media Querie desktop large*/
@media screen and (min-width:1700px){
   
}