@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i');
body{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
}
body p{
	color: #666;
	font-weight: 300;
}
h1,h2,h3,h4,h5,h6{
	color: #333;
	font-family: 'Ubuntu', sans-serif;
}


/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
	#wrapper-top{
		font-family: 'Ubuntu', sans-serif;
	}
	#contact-top{
		background: #222;
		color: #fff;
		display: none;
	}
	#contact-top a{
		border-left: 1px solid #333333;
		color: #fff;
		font-size: 12px;
		text-align: right;
		padding: 0px 6px;
		margin: 2px 4px;
		display: inline-block;
		text-align: right;
		float: right;
	}
	#contact-top a img{
		display: inline-block;
		margin:  5px;
		max-width: 16px;
	}
	.navbar-static-top{
		background-color: #fff;
		border-bottom: 1px solid #e1e1e1;
	 -webkit-transition: background-color 0.5s ease-in-out;
	    -moz-transition: background-color 0.5s ease-in-out;
	    -ms-transition: background-color 0.5s ease-in-out;
	    -o-transition: background-color 0.5s ease-in-out;
	    transition: background-color 0.5s ease-in-out;
		width: 100%;
	}
	.is-sticky .navbar-static-top {
		background-color: #fff;
		-webkit-transition: background-color 0.5s ease-in-out;
	    -moz-transition: background-color 0.5s ease-in-out;
	    -ms-transition: background-color 0.5s ease-in-out;
	    -o-transition: background-color 0.5s ease-in-out;
	    transition: background-color 0.5s ease-in-out;
		z-index: 50 !important;
	}
	.navbar-brand{
		-webkit-transition: max-width 0.5s ease-in-out;
	    -moz-transition: max-width 0.5s ease-in-out;
	    -ms-transition: max-width 0.5s ease-in-out;
	    -o-transition: max-width 0.5s ease-in-out;
	    transition: max-width 0.5s ease-in-out;
		max-width: 180px;
		height: auto;
	}
	.is-sticky .navbar-brand{
		-webkit-transition: max-width 0.5s ease-in-out;
	    -moz-transition: max-width 0.5s ease-in-out;
	    -ms-transition: max-width 0.5s ease-in-out;
	    -o-transition: max-width 0.5s ease-in-out;
	    transition: max-width 0.5s ease-in-out;

		max-width: 180px;
	}
	.navbar-toggle .icon-bar {
	    background: #333;
	}
	.navbar-nav{
		background: #f2f2f2;
		border-top: 1px solid #e1e1e1;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.navbar-nav>li>a{
		border-bottom: 1px solid #e1e1e1;
		color: #333;
		margin: 0px 15px;
		text-transform: uppercase;
		font-size: 16px;
		font-weight: bold;
		text-shadow: none;
	}
	#intro,#marcas{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	#intro h1,
	#marcas h1{
		font-size: 28px;
		font-weight: bold;
		margin: 0px 20px;
	}
	#intro h1:after,
	#marcas h1:after{
		content: '';
		background: #cc3333;
		height: 3px;
		display: block;
		margin: 10px auto;
		width: 120px;
	}
	#intro p{
		font-size: 16px;
		margin: 15px 10px;
	}
	#home-services img{
		float: left;
	    max-width: 80px;
	    height: auto;
	    margin-right: 20px;
	}
	#home-services h2{
		margin: 15px 0px;
		font-size: 24px;
	}
	#home-services p{
		display: block;
		float: left;
		padding: 15px 10px;
		width: 100%;
	}
	#home-about{
		background: #f6f4f4 url("../images/bg-home-about.jpg") no-repeat -50px top;	
		background-size: 80%;
		background-position: -100%;
		text-align: left;
	}
	#home-about h1{
		font-size: 28px;
		text-align: left;
		margin: 30px 0px;
	}
	#home-about h1:after{
		content: '';
		background: #cc3333;
		height: 3px;
		display: block;
		margin: 15px 0 0 0;
		width: 80px;
	}
	#home-about p{
		font-size: 14px;
		font-weight: 400;
		margin: 15px 0px;
		max-width: 80%;
	}
	#home-address ul{
		display: block;
		list-style: none;
		margin: 30px 0px;
		padding: 0px;
	}
	#home-address ul li{
		display: block;
		font-size: 16px;
		margin: 10px 0px;
		padding: 10px 0px 10px 35px;
		color: #cc3333;
	}
	#home-address ul li.marker{background:url("../images/icon-marker.png") no-repeat left center;  }
	#home-address ul li.phone{background:url("../images/icon-phone.png") no-repeat left center; }
	#home-address ul li.cell{background:url("../images/icon-cell.png") no-repeat left center; }
	#home-address ul li.mail{background:url("../images/icon-mail.png") no-repeat left center; }
	#home-address ul li a{ color: #cc3333;}
	#home-address a.btn{margin: 10px 0px 40px 0px;}
	.btn{
		border-radius: 6px;
		text-align: center;
		padding: 15px 25px;
		font-family: 'Ubuntu', sans-serif;
		font-size: 18px;
		font-weight: bold;
		text-transform: uppercase;
		width: 100%;
	}
	.btn-green{
		background: #04be22;
		color: #fff;
	}
	.btn-yellow{
		background: #E9D70C;
		border:1px solid transparent;
		color: #212121;
	}
	.carousel-caption{
		text-align: left;
		top:0px;
		text-shadow:none;
	}
	.carousel-caption h1{
		font-size: 24px;
		font-weight: bold;
		margin: 10px 0px;
		text-shadow:none;
	}
	.carousel-caption h2{
		font-size: 16px;
		font-weight: 200;
		max-width: 60%;
		margin: 0px 0px 0px 0px;
		text-shadow:none;		
	}
	.carousel-caption h3{
		display: none;
	}
	.carousel-caption a.btn{
		display: block;
		float: left;
		font-size: 14px;
		max-width: 50%;
		text-shadow:none;
	}
	.carousel-caption a.btn-green{display: none;}
	.carousel-caption a.btn-yellow{
		display: block;
		max-width: 50%;
		margin: 15px 0px 5px 0px;
		padding: 10px;
	}
	footer{
		background-color: #C22B38;
		color: #fff;
	}
	footer #contact-footer{
		padding-top: 40px;
		padding-bottom: 40px;
	}
	footer #contact-footer h1{
		color: #fff;
		text-align: center;
		margin-bottom: 30px;
	}
	footer #contact-footer p,
	footer #contact-footer a{
		text-align: center;
		color: #fff;
		font-size: 18px;
		font-weight: 600;
	} 
	footer #contact-footer img{
		opacity: 0.5;
		max-width: 50px;
		margin: 20px auto;
		display: block;
	}
	footer #menu-footer{
		background-color: #AF2733;
		padding-top:30px; 
		padding-bottom:30px; 
	}
	footer #menu-footer img{
		margin: 20px 25%;
		width: 50%;
	}
	footer #menu-footer ul.menu-bottom{
		display: block;
		float: right;
		margin: 0px;
		padding: 0px;
	}
	footer #menu-footer ul.menu-bottom li{
		display: inline-block;
		margin: 0px;
		padding: 0px;
		width: 32%;
	}
	footer #menu-footer ul.menu-bottom li a{
		color: #111;
		display: block;
		font-family: 'Ubuntu', sans-serif;
		font-size: 12px;
		font-weight: bold;
		padding: 10px 5px;;
		text-align: center;
		text-transform: uppercase;
	}

	/************
	Estilos página internas
	************/

	#section{
		background: #333 url("../images/bg-section.jpg") no-repeat 85% center;
		background-size: cover;
		color:#fff;
	}
	#section h1{
		color: #fff;
		font-size: 32px;
		font-weight: bold;
		margin:30px 0px;
	}

	h1.title{
		font-size: 18px;
		font-weight: 700;
		line-height: 1.6;
		margin: 40px 0px;
	}
	h1.title:after{
	    content: '';
		background: #cc3333;
	    height: 5px;
	    display: block;
	    margin-top: 10px;
	    width: 100px;
	}
	#content-nosotros{
		background:url("../images/bg-nosotros.jpg") no-repeat center bottom;
		background-size: 100%;
		padding-bottom: 480px; 
	}
	#myv{
		background:#333; 
		color: #eee;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	#myv h2{color: #fff;}
	#myv p{color: #eee;margin:30px 0px;}
	#myv h2:after{
	    content: '';
		background: #cc3333;
	    height: 4px;
	    display: block;
	    margin-top: 10px;
	    width: 60px;
	}
	
	#contact-page{
		background:#fff;
		color: #fff; 
	}

	#contact-page .mapa{
		line-height: 0px;
		border-right: 1px solid #eee;
		  -webkit-box-shadow: 10px 0 5px -2px #888;
          box-shadow: 5px 0 10px -2px #ccc;
	}
	#contact-page .mapa iframe{
		width: 100%;
		height: 350px;
		line-height: 0;
	}
	#contactForm h1{
		margin:50px 15px; 
	}
	#contactForm label{
		color:#333;
		font-weight: 400;
		display: none;
	}
	#contactForm ::placeholder {
		color: #333;
	}
	#contactForm input[type=text],
    #contactForm input[type=email],
    #contactForm input[type=phone],
    #contactForm  textarea {
        background:transparent;
        border-radius: 0;
        border:transparent ;
        border-bottom: 1px solid #ddd;
        color: #333;
        display: block;
        height: 40px;
        outline: none;
        padding: 10px 0px;
        width: 100%;
        -webkit-box-shadow:none;
		box-shadow:none;
    }
    #contactForm  textarea{
    	background: #f9f9f9;
    	height: 140px;
    }
    #contactForm  textarea::placeholder {
		color: #333;
		padding: 0px 10px;
	}

    #contactForm button{
        background: #212121;
        border-radius: 0;
        color: #fff;
        cursor: pointer;
        display: block;
        float: left;
        float: right;
        margin-bottom: 50px;
        text-transform: uppercase;
        width: 100%;
    }
    #contactForm button:hover{
    	background:#444;
    }

    #contactForm .with-errors ul.list-unstyled{
        background: red;
        color: #fff;
        padding: 5px 10px;
    }

	#servicios-page h3,
	#servicios-page img{
		display: block;
		margin: 30px 0px;
	}

	#servicios-page .row{
		margin-top: 20px;
		margin-bottom: 20px;
	}
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

	.carousel-caption h1{
		font-size: 32px;
		font-weight: bold;
		margin: 5px 0px;
		text-shadow:none;
	}
	.carousel-caption h2{
		font-size:19px;
		font-weight: 200;
		margin: 10px 0px 10px 0px;	
		text-shadow:none;	
	}
	.carousel-caption h3{
		display: block;
		font-size:14px;
		font-weight: 200;
		margin-right: 140px;
		text-shadow:none;
	}
	.carousel-caption a.btn{
		display: block;
		float: left;
		font-size: 16px;
		max-width: 50%;
		text-shadow:none;
	}
	.carousel-caption a.btn-green{display: none;}
	.carousel-caption a.btn-yellow{
		display: block;
		max-width: 50%;
		margin: 10px 0px 10px 0px;
		padding: 10px 0px;
	}

	#proyectos-page .row{
		border-bottom: 1px solid #eee;
		margin-top: 50px;
		margin-bottom: 50px;
		padding-bottom: 20px;
	}
	#proyectos-page .row img{margin-bottom: 30px;}
	#proyectos-page .row span{
		display: block;
		font-size: 24px;
		font-family: 'Ubuntu', sans-serif;
		font-weight: 100;
		margin-bottom: 30px;
		color: #666;
	}
	#proyectos-page .row span strong{
		font-weight: bold;
		color: #000;
	}

}
@media only screen and (min-width : 640px) {
	#content-nosotros{
		background:none;
		background-size: 100%;
		padding-bottom: 50px; 
	}
}
	

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	#wrapper-top{
		position: absolute;
		top: 0px;
		display: block;
		width: 100%;
		z-index: 20;
	}

	#contact-top{
		background: #222;
		color: #fff;
		display: block;
	}
	.navbar-static-top {
		background-color: transparent;
		border-bottom: none;
	}
	.is-sticky .navbar-static-top {
		background-color: #fff;
		border-bottom: 1px solid #e1e1e1;
	}
	.navbar-nav{
		background: transparent;
		border-top: none;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.navbar-nav>li>a{
		border-bottom:none;
		color: #000;
		margin: 10px 10px;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: bold;
		padding: 5px;
	}
	.navbar-nav>li>a:hover,
	.navbar-nav>li>a.active{
		background: none;
		border-bottom: 3px solid #CC3333;
	}
	#intro h1,
	#marcas h1{
		font-size: 32px;
		font-weight: bold;
		margin: 0px 50px;
	}
	
	#intro p{
		font-size: 18px;
		font-weight: 400;
		font-style: italic;
		margin: 10px 40px;
	}
	#intro h1:after{
		content: '';
		background: #cc3333;
		height: 3px;
		display: block;
		margin: 10px auto;
		width: 100px;
	}
	.carousel-caption{
		text-align: left;
		top:80px;
		left: 12%;
		text-shadow:none;
	}
	.carousel-caption h1{
		font-size: 36px;
		font-weight: bold;
		margin: 5px 0px;
		text-shadow:none;
	}
	.carousel-caption h2{
		font-size: 21px;
		font-weight: 600;
		margin: 0px 80px 0px 0px;
		text-shadow:none;		
	}
	.carousel-caption h3{
		display: block;
		font-size: 18px;
		max-width: 80%;
	}
	.carousel-caption a.btn{
		display: block;
		float: left;
		font-size: 14px;
		max-width: 50%;
		text-shadow:none;

	}
	.carousel-caption a.btn-green{
		display: block;
		max-width: 28%;
		margin: 30px 5% 5px 0px;
		padding: 15px 0px;
	}
	.carousel-caption a.btn-yellow{
		display: block;
		max-width: 28%;
		margin: 30px 0px 5px 0px;
		padding: 15px 0px;
	}
	#home-services img{
		float: left;
	    max-width: 50px;
	    height: auto;
	    margin:0px 0px 20px 0px;
	}
	#home-services h2{
		float: left;
		font-size: 21px;
		margin: 15px 0px;
		width: 100%;
	}
	#home-services p{
		display: block;
		float: left;
		padding: 15px 0px;
		width: 100%;
	}
	#home-about{
		background: #f6f4f4 url("../images/bg-home-about.jpg") no-repeat -75% top;	
		background-size: 77%;
	}
	#home-about h1{
		font-size: 26px;
		text-align: left;
		margin: 50px 0px;
	}
	#home-about h1:after{
		content: '';
		background: #cc3333;
		height: 3px;
		display: block;
		margin: 15px 0 0 0;
		width: 80px;
	}
	#home-about p{
		margin: 20px 0px;
		max-width: 80%;
	}
	#home-about ul{
		margin-left: 30px; 
	}
	#home-about a.btn{
		display: block;
		margin: 30px auto;
		width: calc(100% - 40px);
	}
	footer #menu-footer{
		background-color: #AF2733;
		padding-top:30px; 
		padding-bottom:30px; 
	}
	footer #menu-footer img{
		margin: 0;
		width: 50%;
	}
	footer #menu-footer ul.menu-bottom{
		margin: 0px 0px;
	}

	footer #menu-footer ul.menu-bottom li{
		display: inline-block;
		margin: 0px;
		padding: 0px;
		width: auto;
	}
	footer #menu-footer ul.menu-bottom li a{
		color: #111;
		display: block;
		font-family: 'Ubuntu', sans-serif;
		font-size: 16px;
		font-weight: bold;
		padding: 10px 5px;;
		text-align: center;
		text-transform: uppercase;
	}
	/************
	Estilos página internas
	************/

	#section{
		background: #333 url("../images/bg-section.jpg") no-repeat right center;
		background-size: 110%;
		margin-top: 90px;
	}
	#section h1{
		color: #fff;
		font-size: 36px;
		font-weight: bold;
		margin:40px 0px;
	}

	h1.title{
		font-size: 18px;
		font-weight: 700;
		line-height: 1.6;
		margin: 30px 0px;
	}
	h1.title:after{
	    content: '';
		background: #cc3333;
	    height: 5px;
	    display: block;
	    margin-top: 10px;
	    width: 100px;
	}
	#content-nosotros{
		background:url("../images/bg-nosotros.jpg") no-repeat 130% bottom;
		background-size: 60%;
		padding-bottom: 0px; 
	}
	#myv{
		background:#333; 
		color: #eee;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	#myv h2{color: #fff;}
	#myv p{color: #eee;margin:30px 0px;}
	#myv h2:after{
	    content: '';
		background: #cc3333;
	    height: 4px;
	    display: block;
	    margin-top: 10px;
	    width: 60px;
	}
	.left{float: left;}
	.right{float: right;}

	#servicios-page h3,
	#servicios-page img{
		display: block;
		margin: 30px 0px;
	}

	#servicios-page .row{
		margin-top: 50px;
		margin-bottom: 50px;
	}

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.carousel-caption{
		top:120px;
		left: 12%;
	}
	.carousel-caption h1{
		font-size: 42px;
	}
	.carousel-caption h2{
		font-size: 28px;
		font-weight: 600;
		margin: 0px 80px 40px 0px;
	}
	.carousel-caption h3{
		display: block;
		font-size: 26px;
		font-weight: 400;
		max-width: 70%;
	}
	.carousel-caption a.btn{
		font-size: 16px;
	}
	.carousel-caption a.btn-green{
		max-width: 25%;
		margin: 50px 5% 5px 0px;
	}
	.carousel-caption a.btn-yellow{
		max-width: 25%;
		margin: 50px 0px 5px 0px;
	}
	#intro h1,
	#marcas h1{
		font-size: 38px;
		font-weight: bold;
		margin: 0px 50px;
	}
	
	#intro p{
		font-size: 18px;
		font-weight: 400;
		font-style: italic;
		margin: 10px 40px;
	}
	#intro h1:after{
		content: '';
		background: #cc3333;
		height: 3px;
		display: block;
		margin: 10px auto;
		width: 100px;
	}
	#home-services img{
		float: left;
	    max-width: 15%;
	    height: auto;
	    margin: 0px 5% 20px 0px;
	}
	#home-services h2{
		float: left;
		font-size: 21px;
		margin: 0 0px;
		width: 80%;
	}
	#home-services p{
		display: block;
		float: left;
		padding: 15px 0px;
		width: 100%;
	}
	#home-about {
		background-size: 80%;
		background-position: -100%;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	#home-about h1{
		font-size: 32px;
		font-weight: bold;
	}
	#home-about p{
		margin: 30px 0px;
		max-width: 70%;
	}
	#home-about ul{
		margin-left: 50px; 
	}
	#home-about a.btn{
		display: block;
		margin: 30px auto;
		width: calc(100% - 100px);
	}
	h1.title {
	    font-size: 24px;
	    font-weight: 700;
	    line-height: 1.6;
	    margin: 50px 0px;
	}
	#content-nosotros {
	    padding-bottom: 50px;
	}
	#contact-page .mapa iframe{
		height: 700px;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	.carousel-caption{
		top:140px;
		left: 11%;
	}
	.carousel-caption h1{
		font-size: 60px;
	}
	.carousel-caption h2{
		font-size: 32px;
		font-weight: 600;
		margin: 0px 80px 40px 0px;
	}
	.carousel-caption h3{
		display: block;
		font-size: 28px;
		font-weight: 400;
		max-width: 60%;
	}
	.carousel-caption a.btn{
		font-size: 18px;
	}
	.carousel-caption a.btn-green{
		max-width: 25%;
		margin: 50px 5% 5px 0px;
	}
	.carousel-caption a.btn-yellow{
		max-width: 25%;
		margin: 50px 0px 5px 0px;
	}
	#home-about {
		background-size: 80%;
		background-position: -100%;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	#home-about p{
		margin: 20px 0px;
		max-width: 70%;
	}
	#home-about ul{
		margin-left: 50px; 
	}
	#home-about a.btn{
		display: block;
		margin: 30px auto;
		width: calc(100% - 100px);
	}

	#section h1{
		font-size: 54px;
		margin:60px 0px;
	}
}