@import url('https://fonts.googleapis.com/css?family=Muli');

body {font-family: 'Muli', sans-serif; background:#ebebeb; }

a {transition:ease .2s}

nav {background-color:rgba(0,0,0,0.4);}
.navbar-dark .navbar-nav .nav-link {color:#FFF;}
.navbar-dark .navbar-nav .nav-link:hover {color:#FFF;}

.supercontainer {padding:25px 0; margin:25px 0; width:100%; background:#fff; box-sizing:border-box; }

/*.principal*/.container-fluid.servicios {padding:100px 0 25px; border-bottom:1px solid #cecece}

.row.iconos {margin-top:50px}
.row.iconos .col {padding-left:5px; padding-right:5px; padding-bottom:5px; padding-top:5px; text-align:center; text-transform:uppercase; font-size:0.5rem; line-height:1rem; min-width:80px;}

.row.caja div img {width:100%; height:auto; float:left; margin-bottom:30px}

.gris01 {background:#ececec;  padding-top:20px}
.gris02 {background:#d5d5d5; border-bottom:2px solid #fff;  padding-top:100px}
.gris03 {background:#d5d5d5; border-bottom:2px solid #fff;  padding-top:100px}

.txt p { padding:20px 0 }

.border_right {border-right:1px solid #000; min-height:100vh}
.border_left {border-left:1px solid #000; min-height:100vh}

.container-fluid.imagenes {padding:100px 0 25px; min-height:100vh}
.container-fluid.imagenes .col-sm-3 {margin-top:15px; margin-bottom:15px}
.container-fluid.imagenes .col-sm-3 img:hover {box-shadow:1px 1px 5px rgba(0,0,0,0.8)}

#contacto p {text-align:center}
#contacto iframe {width:100%; min-height:350px}
input[type="text"] {border:none; border-bottom:1px solid #ccc; width:80%}

textarea {border:none; border-bottom:1px solid #ccc; width:80%; min-height:200px}

.logo_carousel {background:#fff}

.row.imagenes div {margin-bottom:30px}


@media screen and (min-width: 300px) { 
h1 {text-align:center; font-weight:bold; font-size:3.8rem; line-height:2rem;}
h1 span {font-size:1.4rem}
h2 {text-align:center; font-size:1.4rem; line-height:2rem;}

.principal p {text-align:center; font-size:0.875rem; line-height:1.5rem; text-transform:uppercase}

.txt, .txt.border_right p {font-size:0.875rem; line-height:1.5rem; text-align:justify}

}

@media screen and (min-width: 576px) { 

h1 {text-align:center; font-weight:bold; font-size:5.8rem; line-height:3rem;}
h1 span {font-size:2rem}
h2 {text-align:center; font-size:2rem; line-height:2.5rem;}

.principal p {font-size:1.3rem; line-height:2rem}

.row.iconos .col {font-size:0.625rem;}

/*.txt.border_right p { width:75%; margin-left:25%; text-align:justify}*/

.txt, .txt.border_right p {font-size:1rem; line-height:3rem}
.txt.border_right p { text-align:justify}

#servicios h2 {margin-bottom:0}
#servicios .supercontainer {
    padding:0;
    margin:0;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
}

#servicios .row.iconos {margin-top:20px}

}


@media screen and (min-width: 768px) { 

.fixed-top {padding:10px;}

.navbar-expand-md .navbar-collapse ul {	margin:0 auto;}
.navbar-expand-md .navbar-collapse ul li { margin:0 10px; border-bottom:1px solid transparent; transition:ease .2s}
.navbar-expand-md .navbar-collapse ul li:hover {border-bottom:1px solid #fff;}

.carousel-item {max-height:100vh; overflow:hidden}
.carousel-item img {width:100%; height:auto}
.logo_carousel {position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:99999; background:none;}

 }


@media screen and (min-width: 992px) { 

.row.iconos .col {padding-bottom:0}

 }


@media screen and (min-width: 1200px) { ... }