/*
Powered by 86code
Reset Css
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Colors
gray menu rgba(179, 179, 179, 1);
orange home button rgba(240, 91, 40, 1);
text invierte rgba(52, 85, 64, 1);
gray contacto info rgba(51, 51, 51, 1);
gray form logo text rgba(153, 153, 153, 1);
gray form input rgba(51, 51, 51, 1);
gray form placeholder rgba(128, 128, 128, 1);
orange form submit rgba(240, 91, 40, 1);

gray blog header rgba(51, 51, 51, 1);
orange blog rgba(240, 91, 40, 1);
*/

/* 01 */

:root{

    --bg-menu: rgba(35, 35, 35, 1);

    --green-bg: rgba(33, 68, 67, 100);
    --primary-color: rgba(99, 99, 99, 0.5);
    --overlay-color: rgba(99, 99,99, 0.85);
    --menu-speed: 0.75s;
}

*{box-sizing: border-box;}

html {
    height: 100%;
}

body {
    height: 100%;
    color: rgba(0, 0, 0, 1);
    background-color: #fff;
    font-family: 'DIN Next LT Pro';
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

.content {
    position: relative;
    width: 100%;
    padding: 0px 0 0 0;
    overflow: hidden;
    min-height: 100%;
    height: auto;
    box-sizing: border-box;
}

.float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
}

.my-float{
    margin-top:16px;
}

/* NEW UPDATE */
.spacer{width: 100%; background: #b52922; padding: 10px 0; overflow: hidden;}

.banner{position: relative; width: 100%; margin: 0 0 0px; overflow: hidden;}
.banner img{width: 100%;}

/* end NEW UPDATE */

.swal2-container {
    z-index: 99999999 !important;
}

.servicios{position: relative; margin: -3px 0 0; padding: 0 0px; display: flex; overflow: hidden;}
.servicios .itm{flex-grow: 1; font-size: 1.2rem; padding: 50px 40px;  overflow: hidden;}
.servicios .itm h1{display: table; color: #b52922; font-weight: bold; width: 100%; margin: 0 0 20px; font-size: 2rem;}
.servicios .itm ul{width: 100%; overflow: hidden;}
.servicios .itm ul li{width: 100%; margin: 5px 0; overflow: hidden;}


.nosotros{position: relative; background: var(--bg-menu); color: white; font-size: 1.2rem; padding: 20px 40px; overflow: hidden;}
.nosotros img.mapa{width: 60%; float: left;}
.nosotros .info{width: 40%; padding: 50px 0 0; line-height: 2rem; text-align: right; float: left; overflow: hidden;}
.nosotros .info h1{display: table; width: 100%; color: #c69000; font-size: 3rem; margin: 50px 0 10px;}
.nosotros .info ul{
    width: 100%;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}


.proyectos{position: relative; width: 100%; padding: 100px 40px;
    background: url('../images/bg-proyectos.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    overflow: hidden;}
.bg-proyectos{background: #dadada !important;}
.proyectos .itm{width: 50%; text-align: center; float: left; overflow: hidden;}
.proyectos .itm .title{width: 100%; text-align: center; margin: 0px 0 50px; overflow: hidden;}
.proyectos .itm .title h1{font-size: 3rem; font-weight: bold; color: white; text-shadow: 2px 2px 2px #333333;}
.proyectos .itm .title h2{font-size: 6rem; font-weight: bold; color: white; text-shadow: 2px 2px 2px #333333;}
.proyectos .itm .proyectos-cta{width: 80%; max-width: 300px;  overflow: hidden;}
.proyectos .itm .h1-proyectos{display: table; width: 100%; margin: 50px 0; text-align: center; font-size: 2rem; color: white;}

.proyectos .itm .proceso{width: 80%; margin: 50px auto 0; padding: 20px; border-radius: 20px; background: rgba(0, 0, 0, 0.6); overflow: hidden;}
.proyectos .itm .proceso h1{display: table; width: 100%; margin: 0 0 20px; text-align: center; font-size: 2rem; color: white;}
.proyectos .itm .fb-page{width: 100%; margin: 0 auto;}



.contacto{position: relative; width: 100%; overflow: hidden;}
.contacto h1{display: table; width: 100%; background: var(--bg-menu); padding: 20px 0; margin: 0 0 50px; font-weight: bold; letter-spacing: 0.5rem; color: white; text-align: center; font-size: 3rem; overflow: hidden;}
.contacto .contacto-container{position: relative; padding: 0 0px; display: flex; overflow: hidden;}
.contacto .contacto-container .info{flex-grow: 1; font-size: 1.2rem; padding: 50px 40px 0;  overflow: hidden;}

.contacto .contacto-container .info form{width: 100%; max-width: 600px; margin: 0 auto; padding: 50px 40px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: #787b7e; overflow: hidden;}
.contacto .contacto-container .info form input[type="text"]{width: 100%; font-family: 'DIN Next LT Pro'; padding: 10px 10px; border-radius: 10px; border: 0; margin: 10px 0; overflow: hidden;}
.contacto .contacto-container .info form textarea{width: 100%; font-family: 'DIN Next LT Pro'; padding: 10px 10px; resize: none; border-radius: 10px; border: 0; margin: 10px 0; overflow: hidden;}
.contacto .contacto-container .info form button{border: 0; padding: 10px 20px; border-radius: 10px; background: #b52922; color: white; }


.contacto .contacto-container .info-contacto{flex-grow: 1; text-align: center; font-size: 1.2rem; padding: 50px 40px 0;  overflow: hidden;}
.contacto .contacto-container .info-contacto h2{font-size: 1.5rem; font-weight: bold; margin: 10px 0;  color: #b52922;}
.contacto .contacto-container .info-contacto h3{font-size: 1rem;font-weight: lighter; letter-spacing: 0.2rem; margin: 10px; color: #b52922;}
.contacto .contacto-container .info-contacto ul{width: 100%; margin: 20px 0; text-align: center;}
.contacto .contacto-container .info-contacto ul li{width: 100%; margin: 10px 0; text-align: center;}
.contacto .contacto-container .info-contacto ul li a{width: 100%; color: black; text-decoration: none;}
.contacto .contacto-container .info-contacto ul li a i{font-size: 1.5rem; margin-right: 10px; color: #b52922;}

@media (max-width:1180px) {
    .content{padding: 30px 0 0;}
    .nosotros img.mapa{width: 100%; float: left;}
    .nosotros .info{width: 100%; padding: 50px 0 0; line-height: 2rem; text-align: right; float: left; overflow: hidden;}
    .servicios{position: relative; padding: 0 0px; display: block; overflow: hidden;}

    .servicios .itm{flex-grow: 1; width: 100%; font-size: 1.2rem; padding: 50px 40px;  overflow: hidden;}
    .proyectos .itm{width: 100%; text-align: center; float: left; overflow: hidden;}
    .proyectos .itm .proceso{width: 100%; margin: 50px auto 0; padding: 20px; border-radius: 20px; background: rgba(0, 0, 0, 0.6); overflow: hidden;}

    .contacto .contacto-container{position: relative; padding: 0 0px; display: block; overflow: hidden;}
    .contacto .contacto-container .info{flex-grow: 1; width: 100%; font-size: 1.2rem; padding: 50px 20px 0;  overflow: hidden;}
    .contacto .contacto-container .info-contacto h3{display: table; width: 100%; font-size: 1rem;font-weight: lighter; letter-spacing: inherit; margin: 10px 0; color: #b52922;}

}

@media (min-width:1180px) {

}