/*
Theme Name: US MCA Investments Corp.
Author: @semiotica_

*/
/*-------------------*/
/*----@fontface------*/
/*-------------------*/
@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Light.eot');
    src: url('../font/Montserrat-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/Montserrat-Light.woff2') format('woff2'),
        url('../font/Montserrat-Light.woff') format('woff'),
        url('../font/Montserrat-Light.ttf') format('truetype'),
        url('../font/Montserrat-Light.svg#Montserrat-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../font/Quicksand-Light.eot');
    src: url('../font/Quicksand-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/Quicksand-Light.woff2') format('woff2'),
        url('../font/Quicksand-Light.woff') format('woff'),
        url('../font/Quicksand-Light.ttf') format('truetype'),
        url('../font/Quicksand-Light.svg#Quicksand-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Regular.eot');
    src: url('../font/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/Montserrat-Regular.woff2') format('woff2'),
        url('../font/Montserrat-Regular.woff') format('woff'),
        url('../font/Montserrat-Regular.ttf') format('truetype'),
        url('../font/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../font/Quicksand-Medium.eot');
    src: url('../font/Quicksand-Medium.eot?#iefix') format('embedded-opentype'),
        url('../font/Quicksand-Medium.woff2') format('woff2'),
        url('../font/Quicksand-Medium.woff') format('woff'),
        url('../font/Quicksand-Medium.ttf') format('truetype'),
        url('../font/Quicksand-Medium.svg#Quicksand-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat-Medium.eot');
    src: url('../font/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),
        url('../font/Montserrat-Medium.woff2') format('woff2'),
        url('../font/Montserrat-Medium.woff') format('woff'),
        url('../font/Montserrat-Medium.ttf') format('truetype'),
        url('../font/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}
/*-------------------*/
/*-PALETA DE COLORES-*/
/*-------------------*/
/*
WHITE = rgba(255,255,255,1) #ffffff
DARKGRAY = rgba (31,31,31,1) #1f1f1f1f
LIGHTGRAY = rgba (165,165,165,1) #a5a5a5
GREEN 1 = rgba(157,181,178,1) #9db5b2
ORANGE = rgba(235,141,79,1) #EB8D4F
SOLO LOGO = rgba (161,100,46,1) #007550
SOLO LOGO = rgba (183,100,27,1) #004346
*/
/*----------------------------------------*/
/*------------ESTILOS GENERALES-----------*/
/*----------------------------------------*/
*{
margin: 0px;
padding:0px;
box-sizing: border-box;
}

body{
width: 100%;
height: auto;
overflow-x: hidden;
background-color: rgba(165,165,165,.25);
}
a{
font-size: 1em;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
}
blockquote{
font-size: 1.5em;
line-height:1.4583em ;
width: 80%;
padding: 10px 0px 20px;
text-align: center;
margin: auto;
color: black;
font-family: 'Quicksand', sans-serif;
font-style: oblique;
}
h1, h2, h3, h4{
font-family: 'Montserrat', sans-serif;
color: #1f1f1f;
}
th, tr, td{
font-family: 'Quicksand', sans-serif;
}
p, ul, li, ol{
font-size: 1em;
line-height: 1.375em;
text-align: justify;
font-family: 'Quicksand', sans-serif;
color: #1f1f1f;
}
ul, ol{
position: relative;
left: 10px;
}
section{
position: relative;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
header{
margin: auto;
}
main{
position: relative;
margin: auto;
background-color: white;
max-width: 1366px;
/*box-shadow: 2px 0px 5px rgba(0,0,0,.25);*/
}
footer{
position: relative;
background-color: white;
margin: auto;
/*box-shadow: 2px 0px 5px rgba(0,0,0,.25);*/
}
/*----------------------------------------*/
/*---------------SCROLL BAR--------------*/
/*----------------------------------------*/
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.3); 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.5);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #EB8D4F;
    box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
}

@media(min-width:320px){
/*----------------------------------------*/
/*------------ESTILOS GENERALES-----------*/
/*----------------------------------------*/
h1{
font-size: 2em;
line-height: 1.25em;
}
h2{
font-size: 1.625em;
line-height: 1.15384615em;

}
h3{
font-size: 1.375em;
line-height: 1.13636364em;

}
h4{
font-size: 1.125em;
line-height: 1.11111111em;

}
/*----------------------------------------*/
/*----------------ANIMATION---------------*/
/*----------------------------------------*/  
.animate_about_us, .animated_title_service, .animated_service, .animated_service_p, .animated_s_li_1, .animated_s_li_2, .animated_s_li_3, .animated_s_li_4, .animated_s_li_5, .animated_s_img, .animated_special, .animated_s_title, .animated_sp_li_1, .animated_sp_li_2, .animated_sp_li_3, .animated_sp_li_4, .animated_sp_li_5, .animated_sp_li_6, .animated_sp_img, .animated_pro_title, .animated_line_color, .animated_item_1, .animated_item_2, .animated_item_3, .animated_item_4, .animated_item_5, .animated_item_6{
opacity: 0;        
}

/*----------animation delay 0.3--------------*/    
.animated_service_p, .animated_s_li_1, .animated_sp_li_1, .animated_item_2{
animation-delay: 0.3s;        
}    
/*----------animation delay 0.6--------------*/
.animated_s_li_2, .animated_special, .animated_sp_li_2, .animated_line_color, .animated_item_3{
animation-delay: 0.6s;        
}     
/*----------animation delay 0.9--------------*/
.animated_s_li_3, .animated_sp_li_3, .animated_item_4{
animation-delay: 0.9s;        
}     
/*----------animation delay 1.2--------------*/
.animated_s_li_4, .animated_sp_li_4, .animated_item_5{
animation-delay: 1.2s;        
}   
/*----------animation delay 1.5--------------*/
.animated_s_li_5, .animated_sp_li_5, .animated_sp_li_6, .animated_sp_img, .animated_item_6, .banner-img-box{
animation-delay: 1.5s;        
} 
/*----------animation delay 1.8--------------*/
 
    
/*---------------------------------*/
/*---------------MENU--------------*/
/*---------------------------------*/
header{
width: 100%;
height:60px;
background-color: white;
box-shadow: 2px 2px 5px rgba(0,0,0,.25);
border-bottom: 3px solid #a2c5ac;
z-index: 100;
position: fixed;
}  
.logotipo{
position: relative;
height: 32px;
width: 245px;
margin-left: 20px;
top: 15px
}
.logotipo img{
width: 100%;
height: 100%;
}
.slogan{
font-size: 24px;
font-weight: 300;
display: none;
}
#btn-menu{
display: none;
}    
.icon-menu{
color: #a5a5a5;
font-size: 2em;
margin: 12px 10px;
cursor: pointer;
position: absolute;
top: 0;
right: 10px;
}
#btn-menu:checked ~ #nav{
transform: translateX(0%);
}    
#nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: rgba(255,255,255, 1);
left: 0;
top: 60px;
transition: all 0.5s;
transform: translateX(-100%);
overflow-y: auto;
padding:  0px 30px 80px 0;

}
/**/
#nav a{
color: #1f1f1f;
position: relative;
display: block;
text-decoration: none;
font-size: 21px;
padding: 10px 0;
}
/*---nivel 1----*/    
#nav ul{
list-style: none;
width: 100%;
}
#nav ul li{
border-bottom: 1px solid #a5a5a5;
background-color: transparent;
padding: 5px ;
}
#nav ul li:focus{
border-bottom: 2px solid #a2c5ac;        
}   
    
#nav ul li:first-child{
padding-top: 20px;
}
#nav ul li:hover ul{
display: block;        
}
/*---nivel 2----*/
#nav ul li ul{
display: none;        
}
#nav ul li ul li{
background-color:slategray;
border-bottom: none;
padding: 10px;
}
#nav ul li ul li:hover ul{
display: block;        
}
/*---nivel 3----*/    
#nav ul li ul li ul{
display: none;        
}
#nav ul li ul li ul li{
background-color:darkgray;
border-bottom: none;
padding: 5px 15px;
} 
    
/*---menu principal----*/    
#menu-principal{
display: none;        
}   
    
/*---contact box----*/      
#contact-box{
position: relative;
padding: 40px 0 0 0; 
width: 100%;

}    
#contact-box h3{
font-weight: 400;
border-bottom: 3px solid #a2c5ac;
margin-bottom: 10px;
padding-bottom: 5px;
}    
#contact-box a{
display: block; 
padding: 5px 0
} 
    

/*---MODAL----*/   
#my-modal-ceo, #my-modal-andy, #my-modal-sales{
position: absolute;
width: 100%;
height: 8vh;
min-height: 600px;
padding: 10px 0 0;
z-index: 100;
display: none;
overflow-y: auto;
top: 0;
}
.modal-box{
position: relative;
width: 93%;
height: 90vh;
background-color: white;
box-shadow: 6px 6px 12px rgba(0,0,0,.3);

padding: 20px 15px 10px; 
margin: auto;

}    
.close{
padding: 3px 9px 2px 8px;
border: none;
background: none;
color: #a5a5a5;
width: 30px;
position: relative;
left: 90%;
font: bold 24px arial sans-serif;
outline: none;
}    
.close:hover{
transition: .2s;
cursor: pointer;
color: #1f1f1f;
}    
.modal-content{
width: 100%;
height: 96%;
position: relative;
top: 0px;
} 
#contact-title{
margin-bottom: 0 ;

}
/*---modal btn----*/    
#modal-btn-ceo, #modal-btn-andy, #modal-btn-sales {
border: none;
padding: 5px;
font-size: 18px;
background: none;
font-family: 'Montserrat', sans-serif;
color: rgba(31,31,31,.5);
outline: none;
font-weight: 600;
}
.icon-mail-alt{
position: relative;
margin-right: 5px
}
#modal-btn-ceo:hover, #modal-btn-andy:hover, #modal-btn-sales:hover{
cursor: pointer;
color: #1f1f1f;
} 
/*---contact form----*/ 
.form{
width: 100%;
height: 95%;
margin: auto;
background-color: rgba (255,255,255,.3);
position: relative;
top: 0px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;

}
#contact-title{
padding-bottom: 10px;
border-bottom: none;

}
 #contact-title h3   {
font-weight: 400;
color: #a2c5ac;
font-size: 18px;

}
.input-box{
padding: 0 0 0 5px ;
width: 100%;
height: 50px;
border-bottom: 1px solid #a5a5a5;
margin-bottom: 10px;

}
.input-box label{
color: #1f1f1f;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
.input-box:focus-within {
border-bottom-color: #a2c5ac;
background-color: rgba (165,165,165,.5);
}
.input-box:focus-within label{
color: #EB8D4F;
}
.input-box input{
width: 100%;
background: none;
border: none;
position: relative;
height: 25px;
top: 5px;
color: #a5a5a5;
outline: none;
}
#input-box-textarea{
width: 100%;
min-height: 120px;
max-height: 120px;
padding: 5px;
border: 1px solid #a5a5a5;
outline: none;
}
#input-box-textarea:focus-within{

border: 1px solid #EB8D4F;

}     
#input-box-textarea textarea {
width: 100%;
height: 99%;
color: #1f1f1f;
border:none;
background-color: transparent;
padding:0;
}    
#btn-sended-andy, #btn-sended-ceo, #btn-sended-sales{
display: block;
width: 100%;
padding: 10px;
background-color: #a5a5a5;
color: white;
box-shadow: none;
border: none;
margin-bottom: 10px;
outline: none;
}
#btn-sended-andy:hover, #btn-sended-ceo:hover, #btn-sended-sales:hover{
transition: .3s;
background-color: #a2c5ac;
cursor: pointer;
box-shadow: 5px 5px 10px rgba(0,0,0,.2);
outline: none;
}
/*---------------------------------*/
/*-------------FOOTER--------------*/
/*---------------------------------*/
.footer{
width: 100%;
padding: 60px 0;
padding-bottom: 0;
background-color: rgba(165,165,165,.2);
display: flex;
flex-flow: wrap;
justify-content: space-between;
}
.address-box{
position: relative;
width: 100%;
padding: 0 20px;
}
.address-box h4{
font-weight: 400;
margin-bottom: 30px;
font-size: 14px;
}
.footer-lineas-box{
width: 100%;
height: 20px;
position: relative;
bottom: 0;
display: flex;
background-color: 
}
.footer-line-color{
height: 20px;
}
#ft-verde{
background-color: #a2c5ac;
width: 20%;

}
#ft-naranja{
background-color: #EB8D4F;
width: 80%;
}
/*-----credito----*/
.semiotica-box{
width: 130px;
height: 30px;
display: flex;
flex-flow: wrap;
justify-content: space-between;
margin-bottom: 30px;
margin-left: 20px;
}
.semiotica-icon-box{
width: 30px;
height: 30px;
}
.semiotica-icon-box img{
width: 100%;
height: 100%;
}
.semiotica-link-box{
width: 90px;
padding-top: 0px;
}
.semiotica-link-box p{
text-align: right;
font: 10px arial, sans-serif;
color: #a5a5a5;
margin-bottom: 3px;
padding-right: 10px;
}
.semiotica-link-box a{
font: 16px arial, sans-serif;
display:block;
text-decoration: none;
color: #a5a5a5;

}
.semiotica-link-box a:hover{
color: #ff7f00;    
}
/*---------------------------------*/
/*-------------SECCIONES-----------*/
/*---------------------------------*/    
/*------BANNER------*/
.banner{
padding: 0;
margin: 0;
}    
.wellcome-box{
width: 100%;
height: auto;
padding: 10px;
background-color: rgba(162,197,172,.5);
animation-delay: .3s;
}    
.wellcome-box p{
font-size: 12px;

}    
.banner-box{
width: 100%;;
height: auto;
background-color: rgba(165,165,165,.5);   
padding: 20px;
padding-bottom: 0;
display: flex;
flex-flow: wrap;
justify-content: space-between;
}  
.banner-textbox{
width: 100%;
height: auto;
display: flex;
flex-flow: wrap;
justify-content: flex-start;
padding-top: 30px;
}   
.txt-steel-box{
width: 100%;
padding: 0;
margin: 0;
height: auto;
}   
.txt-steel-box h1{
padding: 0;
margin: 0;
font-size: 80px;
font-weight: 400;
line-height: .8em;
text-shadow: 5px 5px 5px rgba(0,0,0,.25);
animation-delay: .5s;
}    
.txt-every{
width: 100%;
margin-bottom: 40px
}
.txt-every h1{
padding: 0;
margin: 0;
font-weight: 400;
line-height: .8em;
text-align: right;
text-shadow: 5px 5px 5px rgba(0,0,0,.25);
animation-delay: .7s;
}    
.banner-textbox h4{
font-weight: 100;
margin-bottom: 20px;
font-size: 16px;
animation-delay: .9s;
}
#we-are{
animation-delay: 1.1s;        
}
.linea-color{
width: 80%;;
height: 10px;
background-color: #EB8D4F;
position: relative;
display: none;
}    
.banner-img-box{
width: 100%;
height: auto;
position: relative;
left: 10%;
}    
.banner-img-box img{        
width: 100%;
height: auto;
} 
.slide-up-box{
width: 150px;
height: 150px;
position: absolute;
padding: 7px;
top: 70%;
left: 30%;

}
.slide-up-box img{
width: 100%;
height: auto;

}
.slide-up-box:hover, .slide-up-box:visited, .slide-up-box:link {
opacity: 0;        
}
/*------INTRO------*/    
.intro{
padding: 60px 20px 0;      
}
.texto-intro-box{
width: 100%;
height: auto;
margin: auto;
}
.texto-intro-box p{
margin-bottom: 20px ;
font-size: 14px;

}
/*------SERVICE------*/    
.service{
padding: 30px 0 0;
display: flex;
flex-flow: wrap;
justify-content: space-between;
} 
.service-text-box{
padding: 0 20px;        
}
.service-title-box{
width: 90%;;
border-bottom: 1px solid #a2c5ac;
margin: auto;
margin-bottom: 30px;
}    
.animated_title_service{
margin: 0;
font-weight: 400;
text-align: right;
line-height: 1.1em;
margin-bottom: 5px;
}    
   
.service-text-box p{
margin-bottom: 20px;
font-size: 14px;
}    
.service-text-box ul{
width: 100%;
margin: auto;
padding: 0 30px;
font-size: 14px;
margin-bottom: 40px
}
.service-text-box ul li{
margin-bottom: 10px ;       
}
.serv-line-color{
width: 100%;
height: 5px;
background-color: #EB8D4F;
}
.service-img-box{
width: 100%;
height: auto;
display: none;
}
.service-img-box img{
width: 100%;
height: auto;
}
/*------SERVICE------*/ 
.special{
padding: 30px 0 0;         
}
.special-bigbox{
background-color: #a2c5ac;
padding: 40px 20px
}  
.special-title-box{
 width:100%;
border-bottom: 1px solid white;
margin: auto;
margin-bottom: 30px;       
}
.special-title-box h1{
margin: 0;
font-weight: 400;
line-height: 1.1em;
margin-bottom: 5px;
}    
.special-text-box{
width: 90%;
position: relative;
margin: auto;
margin-bottom: 30px;
}    
.special-text-box ul{
font-size: 14px;
}
.special-text-box ul li{
margin-bottom: 7px;        
}
.special-img-box{
width: 100%;
position: relative;
margin: auto;
display: none;

}    
.special-img-box img{
width: 100%;
height: auto;
}  
/*------PRODUCTOS------*/
.products{
width: 100%;
height: auto;
padding: 30px 20px;
padding-bottom: 60px;
}    
.product-head-box{
width: 100%;
height: auto;
border-bottom: 1px solid #a2c5ac;
margin-bottom: 40px;
position: relative; 
}    
.product-head-box h1{
text-align: right;
font-weight: 400;
opacity: 0;
}    
.head-line-color{
width: 81.66%;
height: 15px;
background-color:#EB8D4F ;
position: absolute;
right: 0px;
top: 46px;

} 
.product-item-box{
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: start;
}
.item-box{
width: 185px;
height: auto;
margin: auto;
margin-bottom: 30px;
}
.pro-img-box{
width: 165px;
height: 165px;
position: relative;
margin: auto;
padding: 10px;
border-radius: 50%;
border: 1px solid #a2c5ac;
box-shadow: 7px 7px 15px rgba(0,0,0,.1);
background-color: white;
margin-bottom: 45px;
}
.pro-img-box:hover{
box-shadow: 7px 7px 15px rgba(0,0,0,.2);        
}
.pro-img-box img{
width: 100%;
height: 100%;
border-radius: 50%
}
.item-box h4{
text-align: center;
font-weight: 400
}
/*---*/     
}
@media(min-width:600px){
/*----------------------------------------*/
/*------------ESTILOS GENERALES-----------*/
/*----------------------------------------*/
 
       
/*------------MODAL-------------*/    
#my-modal-ceo, #my-modal-andy, #my-modal-sales{
height: 100vh;
}
.modal-box{
height: 95vh;
}    
/*---contact form----*/
.form{
top: -10px;        
}
#contact-title{
width: 100%; 
}
.input-box{
width: 49%;
}
#input-box-textarea{
min-height: 100px;
max-height: 100px;
}            
/*---------------------------------*/
/*-------------FOOTER--------------*/
/*---------------------------------*/
.footer{
flex-direction:row-reverse;        
}
.address-box{
width: 70%;
margin: 0;
padding: 0;
padding-right: 20px;
}
#ft-verde{
width: 30%;        
}

/*------BANNER-----------------------*/
.banner{
padding: 60px 0 0;        
}
.wellcome-box{
padding-left: 20px;        
}
.banner-textbox{
padding: 0; 
width: 50%;
}    
.banner-img-box{
width: 45%;        
} 
.txt-steel-box{
margin: 0
}
.txt-steel-box h1{
margin: 0;
}
.txt-every{
margin-bottom: 10px;        
}    
.banner-textbox h4{
margin-bottom: 10px;
font-size: 14px;
} 
.linea-color{
display: block;
top: 7px;
}
.banner-img-box{
height: 260px  ;
left: 0;
}    
.banner-img-box img{
width: auto;
height: 100%
}    
.slide-up-box{
top: 60%;
left: 40%;
}    
/*------INTRO------*/    
.texto-intro-box{
padding: 0 10%
}

/*------SERVICE----*/

.service-text-box{
padding: 0 40px ;     
}    
.service-img-box{
display: none;        
}    
/*------SPECIAL----*/    
.special-title-box, .special-text-box{
width: 90%; 
}
.special-text-box ul{
width: 90%;
margin: auto;
}


 

/*---*/      
}
@media(min-width:1280px){
/*----------------------------------------*/
/*------------ESTILOS GENERALES-----------*/
/*----------------------------------------*/
h1{
font-size: 3em;
line-height: 1.05em;

}
h2{
font-size: 2.25em;
line-height: 1.25em;

}
h3{
font-size: 1.75em;
line-height: 1.25em;

}
h4{
font-size: 1.125em;
line-height: 1.22222222em;

}

/*---------------------------*/
/*------------MENU-----------*/
/*---------------------------*/
header{
position:fixed;
height: 130px;
width: 100%;
padding: 0  ;
border-bottom: none;
background-color: transparent;
box-shadow: none
}
.header-adjust-box{
position: relative;
width: 1366px;
height: auto;
margin: auto;
display: flex;
flex-flow: wrap;
align-content: flex-end;
background-color: white;
box-shadow: 0px 2px 2px rgba(0,0,0,.3);
}
.logotipo{
height: 80px;
width: 380px;
padding: 15px 0 ;
margin: 0;
top: 0;
left: 83px;
} 
.slogan{
display: block;
position: relative;
left: 40%;
top: 20px;
}
.icon-menu{
display: none;        
}
/**/    
#nav{
width: 100%;
transform: translateX(0);
height: 50px;
padding: 0;
margin: 0;
top: 0;
position: relative;
display: flex;
flex-flow: wrap;
justify-content: space-between;
overflow-y: visible;
}   
#nav a{
font-size: 16px;        
}
/*---nivel 1----*/ 
#nav ul {
padding: 0 20px;
border: none;
margin: 0;
left: 0;
display: flex;
flex-flow: wrap;
justify-content: flex-start;
align-content: center
} 
#nav ul li{
padding: 0 20px;
border: none;

} 
#nav ul li:first-child{
padding-top: 0px;
}
/*---nivel 2----*/
#nav ul li ul{
position: absolute;
width: auto;
}
#nav ul li ul li{

}    
/*---nivel 3----*/    
#nav ul li ul li ul{  
position: relative;
}
#nav ul li ul li ul li{



} 
/*---menu principal----*/    
#menu-principal{
display: block;
background-color: #a5a5a5;
margin: 0;
max-width:60%;    

}
#menu-principal li{
transform: translateX(45px)
}
#menu-principal li:hover, #menu-principal li:focus{
box-shadow: 0px -5px 0px rgba(235,141,79,1) inset;
transition: .2s;
} 
#menu-principal li a:hover, #menu-principal li a:focus{
font-weight: 600;
     
}    
     
/*-------contact------*/
#contact-box{
padding: 0; 
max-width: 40%;
background-color: #a2c5ac;
}
#contact-box h3{
font-size: 16px;
padding: 0;
padding-top: 10px;
margin: 0;
top: 0;
margin-right: 10px;
font-weight: 500;
position: relative;
}
#contact-box li{
height: 80%
}
#contact-box li:hover{
box-shadow: 0px -5px 0px rgba(31,31,31,.4) inset;
transition: .2s;
}
/*-------MODAL------*/ 
#my-modal-ceo, #my-modal-andy, #my-modal-sales{
height: 83.3vh;
}    
.modal-box{
width: 35%; 
height: 95%;
}    
.close{
left: 93%;
} 
#contact-title{
font-size: 14px  ;      
}    
#modal-btn-ceo, #modal-btn-andy, #modal-btn-sales{
font-size: 16px;
padding-left: 0;
top: 5px;
position: relative;
} 

 /*-------FORM------*/   
.input-box{
height: 50px;
width: 100%;
}    
.input-box input{
height: 30px;

}       
.credit {
display: flex;
align-items: center;
width: 450px;
}    
.credit p:first-child{
margin-right: 30px        
}

/*------BANNER-----------------------*/    
.banner{
margin: 0;
padding: 130px 0 0;
height: 430px;
}
.wellcome-box{
height: 45px;
padding: 13px 83px;
}
.wellcome-box p{
font-size: 14px;        
}
.banner-box{
height: 385px ;
padding: 0 83px;

}
.banner-textbox{
padding-top: 60px; 
position: relative;
} 
.txt-steel-box{
width: 250px;
height: 90px;
}    
.txt-steel-box h1{
font-size: 100px        
}
.txt-every{
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.txt-every h1{
text-align: left;       
}
.banner-box h4{
height: auto;
margin-bottom: 0;
font-size: 18px;
}
.linea-color{
position: absolute;
top: 97%
}
.banner-img-box{
height: 385px;
padding-top: 23px;
left: 7%;
}
.banner-img-box img{
width: 100%;
height: auto;
}
.slide-up-box{
display: none;        
}
/*------INTRO------*/    
.texto-intro-box{
padding: 140px 0 0;
width: 700px;
}
.texto-intro-box p{
font-size: 16px;
}
/*------SERVICE-----*/
.service{
border-bottom: 3px solid #a2c5ac; 
padding-bottom: 0;
flex-direction: row-reverse;
width: 1200px;
margin: auto;
padding-top: 160px;
}
.service-title-box{
width: 100%;       
}

.service-text-box{
width: 50%;
padding: 0;
}
.service-text-box p, .service-text-box ul {
font-size: 16px        
}
.service-img-box{
display: block;
width: 570px;
height: 415px;

}
.serv-line-color{
position: absolute;
bottom: 0;
width: 600px;
height: 15px;
}    
/*------SPECIAL--------*/
.special{
padding-top: 160px ; 

}
.special-bigbox{
padding: 60px;
padding-left: 250px;
padding-right: 250px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.special-title-box{
width: 1200px;
padding-left: 15px;
}
.special-text-box{
margin: 0;
padding: 0;
width: 360px;
margin: auto;
 
}
.special-text-box ul{
font-size: 18px;
padding: 0;
margin: 0;
}
.special-text-box ul li{
margin-bottom: 20px;        
}
.special-img-box{
display: block;   
width: 340px;
height: 330px;
padding: 10px 50px;
}
.special-img-box img{
width: auto;
height: 100%;
}
/*------PRODUCTS-------*/    

.products{
padding: 0;
width: 1200px ;
margin: auto;
padding-top: 130px   ;
padding-bottom: 120px
}
.product-head-box{
position: relative;        
}
.head-line-color{
top: 67px;  
right: 0;
}    
    
/*--------------------------*/
/*----------FOOTER----------*/
/*--------------------------*/    
.footer{
width: 1366px;
margin: auto;
padding-top: 225px; 
    
}  
.address-box{
width: 80%; 
padding: 0;
padding-right: 83px;
}
.address-box h4{
font-size: 18px; 
text-align: right
}    
.semiotica-box{
margin-left: 83px        
} 
#ft-verde{
width: 289px;        
}
    
    
    
/*---*/    
}