/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Raleway|Zilla+Slab');
body, html {    height: 100%;}
body{font-family: 'Raleway', sans-serif;}
h1,h2,h3,h4,h5,h6{font-family: 'Zilla Slab', serif;}
img{max-width: 100%; height: auto;}

svg{max-width: 100%;}


@media  (max-width: 768px) {	
	.display-3 {    font-size: 3rem;    font-weight: 300;    line-height: 1;    text-align: center;    margin-bottom: 40px;}
	.display-4 {    font-size: 2.5rem;    font-weight: 300;    line-height: 1;}
	.h3, h3 {    font-size: 1.5rem;}
}
@media  (min-width: 992px) {
.display-3 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2;
}
}
@media  (min-width: 1200px) {
.display-3 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2;
}
}



#logo1 path{fill:#fff;}
#logo2 path{fill:rgba(255, 255, 255, .8);}
#logo3 path{fill:rgba(255, 255, 255, .8);}

h1#homeh1{ color:#fff; margin-top:20px; margin-left:0; text-align: left; max-width: 940px;}


.home-header { 
    /* The image used */
	background-color: rgba(54, 95, 99, 1);
    background-image: url("../images/home-header.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position:center;
    background-repeat: no-repeat;
    background-size:cover;
	
    background-attachment: fixed;
}
@media  (max-width: 768px) {	.home-header {     background-size:contain !important;background-position:top left;}}
.overlay {
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(54, 95, 99, 0.90);
    overflow-x: hidden;
    transition: 0.5s;
	opacity: 0;
}


.menu{margin:o;padding:0;list-style: none;}
.overlay .menu a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #fff;
	text-align: center;
    display: block;
    transition: 0.3s;background-color: rgba(34, 73, 76, 0.77);
	margin-bottom: 10px;
	font-family: 'Zilla Slab', serif;
}
@media  (max-width: 768px) {
.overlay .menu a {
    font-size: 18px;
}
}
.overlay .menu a:hover, .overlay .menu a:focus {
    background-color: #f1f1f1;
	color: rgb(16,39,81);
}


.menu-spand{width: 100%; opacity: 100;}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
.boton-menu {
    font-size: 30px;
    cursor: pointer;
    position: fixed;
    top: 20px;
    left: 20px;
    color: #fff;
    z-index: 999;
    background: rgba(0,0,0,0.2);
    padding: 0 8px;
    border-radius: 9px;
}
section{padding:100px 0;}

.boton-menu .line {
    background: #fff;
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 4px;
	-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.boton-menu  .menu-icon {
    display: inline-block;
    width: 20px;
}
.boton-menu.closed .line2 {display: none;
}
.boton-menu.closed .line3 {
	-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
	    margin-top: -2px;
}
.boton-menu.closed .line1 {
	
	-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
	    margin-top: -9px;
}

.js-ticker{overflow:hidden}.js-ticker-track{white-space:nowrap}.js-ticker-item{white-space:normal;height:100%;vertical-align:top;display:inline-block;position:relative}@supports ((display: -webkit-box) or (display: flex)){.js-ticker-track{position:relative;white-space:normal;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.js-ticker-item{height:auto;display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.js-ticker.active .js-ticker-track{display:-webkit-box;display:-ms-flexbox;display:flex}.js-ticker.active .js-ticker-item{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}}
footer{padding-bottom: 30px}
footer .menu {text-align: center}
footer .menu li{display: inline-block;}
footer::before{content:" "; display: block;  height: 2px; border-top: 2px dotted #ccc; margin: 0 auto 20px;}
footer .menu a{color:#999}
footer .menu li::before{content:"-"; color: #ccc; margin: 0 10px;}
footer .menu li:first-child::before{content:""; color: #ccc; margin: 0px;}

.servicios{background-color: #efefef; padding-bottom: 50px}
.servicios.servicios-page{background-color: #fff;}
.servicios p{margin-bottom: 50px}
.servicios h3, .servicios p{ text-align: center;}
.servicios h3::after{ display: block;background: #ccc;height: 2px; width:50%; margin: 10px auto 10px; content: " "}
.servicios .icon {
    font-size: 3em;
    display: block;
    margin: 0 auto 5px;
    width: auto;
    text-align: center;
	color:#ccc
}
#contacto-home { 
	padding: 50px 0;
    /* The image used */
	background-color: rgba(54, 95, 99, 1);
    background-image: url("../images/home-header.jpg");
	
	background-size: cover;


    /* Center and scale the image nicely */
    background-position:center;
    background-repeat: no-repeat;
	
    background-attachment: fixed;
}
#contacto-pages { 
	padding: 60px 0;
    /* The image used */
	background-color: #efefef;
}

#contacto-home .contenedor{background-color:#fff !important;padding: 15px;}
@media  (min-width: 992px) {
#contacto-home .contenedor{padding: 60px;}
}

@media  (min-width: 992px) {
	.texto-bienvenida{-moz-column-count: 3;
-moz-column-gap: 50px;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
column-count: 3;
column-gap: 50px;
text-align:justify;

margin-bottom:100px}

	.texto-int{-moz-column-count: 2;
-moz-column-gap: 50px;
-webkit-column-count: 2;
-webkit-column-gap: 50px;
column-count: 2;
column-gap: 50px;
text-align:justify;

margin-bottom:100px}
}
.jumbotron {
    background-color: #81bbad;
    color: #fff;
}
.logo-s360{content: url(../images/logo-solucion-360.svg); max-width:100%}
.display-3 .logo-s360 {
    width: 310px;
    top: 3px;
    position: relative;
    left: 5px;
}
.carousel-caption {    color: #000;    top: 5%;}
.carousel-caption h5{    font-size:300%}
.carousel-caption p{    font-size:150%}
.carousel-indicators li {    background-color: #ccc;}
.carousel-indicators .active {    background-color: #ddd;}