.display-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

body {
    font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
}

figure {
    margin: 0;
    padding: 0;
}

nav ul a {
    color: #aaa;
}

nav ul a:hover {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.75);
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100%;
}

.site-section {
    padding: 20px 0;
}


.site-section .valign-wrapper {
    flex-direction: column;
}

nav ul li.active {
    background-color: #4db6ac;
}

section.mix-container {
    flex-wrap: wrap;
    justify-content: flex-start;
}

#mixContainer .mix {
    display: none;
}

.exp-box {
    width: 25%;
}

@font-face {
    font-family: "Monserrat-Bold";
    src: url("fonts/Montserrat-Bold.otf");
}

@font-face {
    font-family: "Montserrat-Light";
    src: url("fonts/Montserrat-Light.otf");
}
@font-face {
    font-family: "Cera-Pro-Medium";
    src: url("fonts/Cera Pro Medium.otf");
}
@font-face {
    font-family: "Cera-Pro-Light";
    src: url("fonts/Cera Pro Light.otf");
}
@font-face {
    font-family: "Cera-Pro-Black";
    src: url("fonts/Cera Pro Black.otf");
}


/*-----------------------------------------NEW SITE--------------------------------------------------------------*/
.imgen-header {
    background-image: url("images/new_site/IMAGEN-HEADER.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    text-align: center;
    margin-bottom: -6px;
    margin-top: 20px;
    height: 70vh;
  
}

#bienvenido  p {
    font-family: "Cera-Pro-Medium" !important;
}

#experiencia  img {
    width: 48%;  
}

#proyectos-logo {
    padding-bottom:20px;
    padding-top:20px;
    width: 48%; 
}

#proyectos .proyectos-imgs img{
    vertical-align: middle;
    text-align: center;
    width: 60%;
}

#proyectos .proyectos-imgs {
    line-height: 71px;
}
#proyectos #milnuevedos {
    margin-left: -3px;
    width: 29%;
}

#proyectos .casas {
    margin-top: -24px;
    width: 40%;
}


.barras{
    border-left: 1px solid #fff;
    border-right:1px solid #fff; 
    line-height:63px;
    height: 60px;
}


#contacto  .contacto-image {
    padding-top: 20px;
    width: 20%;
}

#contacto  p {
    font-family: "Cera-Pro-Light" !important;
    text-align: justify;
}

#contacto .right-align{
    text-align: right;
}

.barra-contact {
position: absolute;
margin-top: -36px;
z-index: 1;
}

#contacto-section {

background: url('images/new_site/IMAGEN-CONTACTO.jpg');
background-size: 100% ;
margin-bottom: -36px;
}

#contacto form {
    padding: 60px 10px 50px 100px;

}

#msj {
    height: 80px !important;
    background:#FFF;
    -webkit-border-radius: 20px!important;
    -moz-border-radius: 20px!important;
    border-radius: 15px!important;

}


#formulario{

    margin-left: 100px;

 
}



#contacto .input-field  input{
    font-family: "Cera-Pro-Medium";
    font-size:12pt;
    color: #000000 !important;
    height: 35px;
    width: 233px;
    background:#FFF;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    border-bottom: 0px !important;
    margin-left: -10px !important;

 
}


#contacto  .pad{
    margin-left: 0px;
    padding-left: 12px;
}


#contacto .input-field textarea{
    border-bottom: 0px !important;
 

}










#contacto .input-field label{
   color: black !important;
   font-family: "Cera-Pro-Black" !important;
   margin-top: -4px;
   padding-left: 15px;
  
}


#contacto .social-link {
  padding: 5px;
 
  }

#contacto .social-link img {
  width: 15%;
  vertical-align: middle;
 
}


#contacto .social-link a {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    font-family: "Cera-Pro-Black";
   
}



#contacto .person-data {
    padding: 10px 0 10px;
    border: 5px solid #FD382E;
    border-radius: 25px;
    line-height: 10px;
    text-align: right;
    width: 230px;
    margin-top: 140px;
    
}


#contacto .btn {
    margin-top: 20px;
    
}

 



/****************PHONE********************/

@media only screen and (max-width: 414px) {
    .imgen-header{
        height: 26vh;
        padding-top:52%;
        margin-bottom: -9%;
    }
    

    #experiencia  img {
        width: 90%;
       
    }
    
    #proyectos-logo {
        padding-top:20px ;
        width: 95%;
       
    }
    

    #proyectos .proyectos-imgs {
        line-height: 60px;
        padding-left: 0px;
    }

    #proyectos .proyectos-imgs img{
        vertical-align: middle;
        text-align: center;
        width: 80%;

    }

    #proyectos #milnuevedos {
        padding-left: 5px;
        width: 70%;
    
    }

    .barra-contact {
        position: absolute;
        width: 40%;
        margin-top: -4px;
        margin-left: -39px;
        z-index: 1;
    }
   


    #formulario{

        margin-left: 0px;
    
     
    }


    #contacto .input-field  input{
        font-family: "Cera-Pro-Medium";
        font-size:12pt;
        color: rgba(145, 3, 3, 0) !important;
        width: 105%;
        background:#FFF;
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        border-bottom: 0px !important;
        margin-left: -5px;
    
     
    }

     #contacto  .pad{
        margin-left: 0px;
        padding-left: 12px;
        width: 101% !important;
    }


    #contacto .input-field textarea{
        border-bottom: 0px !important;
  
     
    }
    

    #contacto .input-field label{
        color: black !important;
        font-family: "Cera-Pro-Black" !important;
        margin-top: -3px;
        padding-left: 10px;
       
     }
     

       
     #contacto .social-link {
        padding: 0 0 0 0;
       
        }
      
      #contacto .social-link img {
        width: 23%;
        vertical-align: middle;
       
      }
      
      
      #contacto .social-link a {
          color: #fff;
          font-size: 15px;
          text-transform: uppercase;
          font-family: "Cera-Pro-Black";
         
      }

 
        
        
      #contacto .person-data {
        margin-bottom: 20px;
        margin-left: 16% !important;
        padding: 0px 0 0px;
        border: 5px solid #FD382E;
        border-radius: 25px;
        width: 250px;
        margin-top: 12px;
        
    }


    #contacto form {
        padding: 50px 10px 10px 10px;
    
    }

    #contacto-section .person-data  img {
        width: 20%;
        padding-top: 3px;
    
        } 

        
        #contacto  .contacto-image {
            padding-top: 20px;
            width: 45%;
        }



        #contacto .btn {
            margin-top: 20px;
            
        }
        

  
}




@media only screen and (max-width: 319px)   {
 

    #experiencia  img {
        width: 90%;
       
    }
    
    #proyectos-logo {
        padding-top:20px ;
        width: 100%;
       
    }
    
        
    #proyectos #milnuevedos {
        padding-left: 5px;
        width: 70%;
    
    }

    .barra-contact {
        position: absolute;
        width: 40%;
        margin-top: -5px;
        margin-left: -32px;
        z-index: 1;
    }
        
    #contacto-section .person-data  img {
        width: 60%;
        padding-top: 3px;
    
        } 


    #contacto form {
        padding: 50px 10px 10px 10px;
    
    }
    
    
    .barras{

        border-left: unset;
        border-right:unset;
        height: unset;
    }
    
    
    
    #contacto  .contacto-image {
        padding-top: 20px;
        width: 45%;
    }

  
      

    #contacto .input-field  input{
        font-family: "Cera-Pro-Medium";
        font-size:12pt;
        color: rgba(145, 3, 3, 0) !important;
        height: 35px;
        width:375px !important;
        background:#FFF;
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        border-bottom: 0px !important;
    
     
    }


    
    .pad{
        width: 375px;
    }



    #contacto .input-field textarea{
        border-bottom: 0px !important;

     
    }
    
    #contacto .input-field label{
       color: black !important;
       font-family: "Cera-Pro-Black" !important;
       margin-top: -3px;
       padding-left: 10px;
      
    }

       
    #contacto button{
        color: #FD382E !important;
       
     }
    
    
    #contacto .social-link {
      padding: 0 0 0 0;
     
      }
    
    #contacto .social-link img {
      width: 23%;
      vertical-align: middle;
     
    }
    
    
    #contacto .social-link a {
        color: #fff;
        font-size: 15px;
        text-transform: uppercase;
        font-family: "Cera-Pro-Black";
       
    }
    

    #contacto .person-data {
        margin-bottom: 20px;
        padding-right: 14% !important;
        padding: 0 0 0 0;
        border: 5px solid #FD382E;
        border-radius: 25px;
        width: 250px;
        margin-top: 12px;

    }

    #formulario{

        margin-left: unset;
    
    }



}
      



/*--------------------------------------------------*/


.exp-box img {
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(1);
    /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1);
    /* Microsoft Edge and Firefox 35+ */
    width: 80%;
    max-width: 80%;
    height: auto;
}

blockquote {
    border-left: 0px solid #FD382E;
}




.justify-align {
    text-align: justify;
}

.proyectos-imgs  {
    text-align: center;
    margin-bottom: 40px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.proyectos-imgs :hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.proyectos-imgs  img {
    width: 50%;
    max-width: 50%;
    height: auto;

    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.proyectos-imgs .figure figcaption {
    color: #f5f5f5;
    margin: 5px 0;
    text-align: center;
    text-transform: uppercase;
}

.person-data {
    text-align: center;
}

.alert-panel {
    display: none;
    position: relative;
    cursor: pointer;
}

.alert-panel p {
    margin: 0;
    padding: 0;
}

.alert-panel .fa-times {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
}

.contact-links li .fa {
    font-size: 2em;
    text-align: center;
    display: inline-block;
    width: 30px;
    margin: 0 10px 10px 0;
}

.contact-links a {
    font-size: 1.2em;
    color: #464646;
}

.contact-links a:hover {
    color: #FD382E;
}

form .row {
    margin-bottom: 0;
}

#mapa {
    height: 400px;
}

.footer h4 {
    font-family: "Cera-Pro-Light" !important;
    font-size: 1.2em;
    font-weight: 300;
}

.footer p {
    font-family: "Cera-Pro-Light" !important;

    
}


.footer-social-icons a {
    margin: 0 10px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.btn-floating:hover {
    background-color: #fff;
}

.footer-social-icons a:hover i {
    color: #464646;
}

.footer-social-icons a i {
    color: #333;
}

#btn-btt {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: none;
}

.slideUp {
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }
    50% {
        transform: translateY(-8%);
    }
    65% {
        transform: translateY(4%);
    }
    80% {
        transform: translateY(-4%);
    }
    95% {
        transform: translateY(2%);
    }
    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
    }
    50% {
        -webkit-transform: translateY(-8%);
    }
    65% {
        -webkit-transform: translateY(4%);
    }
    80% {
        -webkit-transform: translateY(-4%);
    }
    95% {
        -webkit-transform: translateY(2%);
    }
    100% {
        -webkit-transform: translateY(0%);
    }
}

.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    60% {
        -webkit-transform: scale(1.1);
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}


/*Media Queries*/

@media (min-width: 600px) {
    .exp-box {
        width: 20%;
    }
}


/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .exp-box {
        width: 12%;
    }
    nav ul a {
        padding: 0 6px;
    }
 
}


/* Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    nav ul a {
        padding: 0 12px;
    }
    .exp-box {
        width: 10%;
    }
}