/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Pontano+Sans);
@import url(https://fonts.googleapis.com/css?family=Oswald:300);

.fade2 span {font-size:2em; color:#fff; position:absolute; top:60%;
width:400px; left:7%; text-transform:uppercase; line-height:1em; font-family:"Oswald"; font-weight:300; color:#f5f5f5}

.mpopup {z-index:99999999}

.color1 {
    background: #F5F5F5
}
.color2 {
    background: none
}
.color3 {
    background: #337585
}
.color4 {
    color: #5cc6d0
}
.opaconegro {background:url(../img/opaco-negro.png)}
.transparencia {
    background: url(../img/opaco-blanco.png);
    width: 100%;
    height:110px;
    margin: 0;
    z-index: 9;
    position:fixed;
    transition:.5s all;
}
.cambiar {background:#f5f5f5; opacity:1}

.logo {
    display: inline-block;
    margin: 2% 10%;
    font-size: 2.5em;
    position: absolute;
    top:-30px;
}
.telefonos {
    background: #999999;
    height: 51px;
    color: #f5f5f5;
    display: inline-block;
    float: right;
    clear: both;
    width: 100%;
    text-align: right;
    position: relative
}
#bolitas .media {
    margin: 20px 0
}
.icos {
    display: inline-block;
    position: absolute;
    left: 70%;
    top: 20px
}
.icos2 {
    display: inline-block;
    position: absolute;
    left: 75%;
    top: 20px
}
.icos3 {
    display: inline-block;
    position: absolute;
    left: 65%;
    top: 20px
}
.icos5 {
    display: inline-block;
    position: absolute;
    top: 20px
}
.icos {
    transition: .2s all;
    transform: rotate(0deg)
}
.icos2, .icos3 {
    transition: .2s all;
    transform: rotate(0deg)
}
.icos2:hover {
    transform: rotate(-30deg)
}
.icos:hover, .icos3:hover {
    transform: rotate(33deg)
}
.sinH {
    height: auto !important
}
.clienteBox {
    width: 100%;
    text-align: center;
    height: 130px;
    margin: 0 0 10px 0
}
.label-clientes {
    background: #5cc7d1;
    border: 0;
}
.label-clientes-border {
    border-bottom: 1px solid #000
}
.border1 {
    border-left: 8px solid #cc5858
}
.border2 {
    border-left: 8px solid #ccc
}
.border1 img,
.border2 img {
    margin-left: 20px
}
.intro {
    font-size: 2em;
    line-height: 1em;
    margin: 20px
}
.intro2 {
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 20px
}

			p.bajada {font-size:2em;
			line-height:1em;
			margin:20px;
			}
			
			.your-class, .frases {border-top:1px solid #5cc7d1;
			margin-top:54px}

.slider {
    height: 600px;
    width: 100%;
    position: absolute;
    /*background: url(../img/NY.jpg);
    background-size: 100% 100%;*/
}

.navi > li {
    border-left: 5px solid #ccc;
    padding: 10px 0
}
.footer {
    border-top: 20px solid #5cc6d0;
    padding: 60px 0
}
.footer h2 {
    color: #f5f5f5;
    font-size: 1em;
    margin: 0
}
.footer h3 {
    margin: 0;
    font-size: 1.5em
}
.footer media {} .obra-principal .media-left {
    width: 65%
}
.obra-principal img {
    width: 100%
}
.obra-principal h2 { 
    font-size: 1.5em
}
.obra-principal p span {
    color: #27afe8
}
.col-obra {
    margin-top: 20px;
    margin-bottom: 20px
}
.col-obra img {
    width: 100%
}
.col-obra h2 {
    font-size: 1.5em;
    /*height: 90px*/
}
.col-obra p span {
    color: #4bbdec;
    font-size: 1.4em
}

.celeste {background:#E7E7E7}

.col-obra {background:#f5f5f5; border-left:2px solid #fff; border-right:1px solid #ccc; height:280px}

.fade2 div img {width:100%; height:600px; display:block}
.fade2 div {width:100%; height:600px}

.telefonos {position:fixed; z-index:9999; top:0}
.transparencia {margin-top:20px}

h4 a:hover {text-decoration:none}

.frases {list-style:none; marging:0; padding:20px}
.frases li {text-align:center; font-size:2em}
.frases li a {}
.frases li a:hover {text-decoration:none}
h3 {display:none}
.frases p {color:#000; font-size:.7em; font-style:italic}

/**** MENU ****/

.navi {
    list-style: none;
    margin: 0;
    float: right;
    margin: 34px 60px 60px 60px;
    z-index: 999999
}
.navi > li {
    float: left;
    margin: 20px
}
.navi {
    float: right
}
.navi a {transition:.5s all}
.navi a:hover {
    text-decoration: none
}
.navi > li {
    position: relative;
    margin: 0
}
.navi li a {
    padding: 20px 35px;
    margin: 0;
    color: #000
}
.navi li > ul > li {
    width: 200px
}
.navi ul li a {
    padding: 10px;
    background: url(../img/opaco-negro.png);
    display: block;
    color: #fff
}
.navi li ul {
    list-style: none;
    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: .5s all;
    top: 80px;
    z-index: 999
}
.navi li:hover ul {
    visibility: visible;
    opacity: 1;
    top: 37px
}
.navi > li > ul {
    border-bottom: 15px solid #cc5858
}
.navi > li:hover {
    border-color: #cc5858
}
.navi > li > ul {
    left: -5px
}
.navi li ul li:hover {
    background: #000
}
.navi > li > a:hover {
    color: #cc5858
}
* {
    font-family: "Pontano Sans";
    font-weight: 400
}

.clienteBox {
    margin: 20px 0 10px
}
.clienteBox img {
    width: 100%;
}
.medianil {
    border-left: 1px solid #ccc;
    height: 300px
}

/******************/
.icos4 {
    display: inline-block;
    position: absolute;
    top: 20px
}

.icos  {left: 45%;} /* HOME */
.icos2 {left: 50%;} /* CONTACTO  */
.icos5 {left: 65%;} /* INSTAGRAM  */
.icos3 {left: 70%;} /* F  */
.icos4 {left: 75%;} /* RRHH  */
.icos4 {transition: .2s all;transform: rotate(0deg)}
.icos4:hover {transform: rotate(-30deg)}
.icos5 {transition: .2s all;transform: rotate(0deg)}
.icos5:hover {transform: rotate(-30deg)}

.icosMob {display:none}

@media (max-width: 768px) {
	.media-left {
	  width: 20%
	}
	.media {
	    width: 100%;
	    margin-bottom: 20px
	}
	.navi {
	    margin: 120px 50px
	}
	.logo {
	    left: 10%;
	    top: 10%
	}
	.icos {
	    left: 0
	}
	.icos2 {
	    left: 15%
	}
	
.obra-principal .media-left {width:40%}
.obra-principal .media-left img {width:100%}
.media {width:100%}
.media-body {width:50%}


	
	}
	
.intro2 {font-size:1.2em; line-height:1.5em}
.border1 h4 {transition:.426s all ease-out; color:#666; border-bottom:1px solid #fff; font-size:1.6em}
.border1:hover h4 {color:#cc5858; border-bottom:1px solid #ccc}
.border1 p {font-size:1.2em}
.col-obra img {transition:.5s all;transform:scale(1.0)}
.col-obra:hover img {transform:scale(1.09)}

/**********************************/

.equipos {height:400px; border-top:1px solid #ccc; padding-top:20px}
.equipos ul {list-style:none}
.equi {list-style:none; margin:0; padding:0}
.equi li {border-bottom:1px solid #ccc; border-right:1px solid #ccc; margin:0; position:relative}
.equi li i {float:right; transition:.5s all; transform:scale(1)}
.equi li:hover i {float:right; transform:scale(1.3)}
.equi li p {padding:20px 10px 10px}
.equi li:hover {border-right:1px solid #fff; cursor:pointer}

.equi2 > li {display:none}
.equi2 > li:first-child {display:block}
.equi2 ul li {padding:6px; background:#f5f5f5; margin-bottom:1px; border-bottom:1px solid #ccc; border-radius:4px}
.equi2 ul {padding:0; margin:0; list-style:none}

.clienteBox {border:1px solid #f5f5f5; height:200px; padding:0}

/**** FOTONOTA - NOTA*******/

.bajadaNota {font-size:1.5em; padding:10px; border-left:1px solid #ccc; border-bottom:1px solid #ccc}
.text {padding-left:20px; margin-bottom:120px; border-left:4px solid #ccc}
.fotonota {wdith:30%}
figcaption {background:#000; color:#fff; padding:10px; margin-bottom:20px}
.bajadaNota {line-height:26px}
.text p {text-indent: 50px;}
.text p:first-line {font-weight:bold}

/* MENU MOVIL */

@media (max-width:768px) {
    iframe (width: 100% !important)
    .videosbox {width: 100%; height:auto !important}
    .col-obra {background:#f5f5f5; border-left:2px solid #fff; 
        border-right:1px solid #ccc; width: 100% !important; height:auto !important}
.logo {top:-0px; left:15%}
.logo img {width:80%}
.navi {list-style:none; margin:0; padding:0; font-size:2em; overflow:auto; top:100px}
.navi li {float:none; border:1px solid; margin:0; padding:0}
.navi li a {margin:0; padding:0; background:#000; color:#fff !important}
.navi li ul {visibility:visible; position:relative; opacity:1; top:0; left:0; border:0; background:#666}
.navi a {color:#000 !important}
.navi li ul li a {background:none; margin:0; padding:0; color:#fff}
.navi {position:relative; left:0; float:left;
width:100%}
.navi li ul li {width:100%; padding-left:20px}
.navi li:hover ul {top:0; transition:none}
.navi li ul li:hover {background:none}
.navi li a {padding:4px 20px; display:block}
.navi li ul li a {padding:4px 20px; display:block; color:#fff !important}

/* mmov */

.transparencia {margin:60px 0 0 0}
.telefonos {display:none}
#mmov {padding:20px; background:#000; display:block; color:#fff; position:fixed; z-index:999999; width:100%}
.navi {display:none}
.icosMob {float:right; display:block}
#zonaMovil {height:auto !important; padding-bottom:60px}
.equipos {height:auto}
.equi2 {width:100%; padding:0}
}

.equi2 li {border:0}
.fotoBots li {border:0; float:left}

.videosbox {width: 50%; height:400px}