/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Styles */

html,
body {
    height: 100%;
}

body {
    padding-top: 120px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.img-portfolio {
    margin-bottom: 0px;
}

.img-hover:hover {
    opacity: 0.8;
}

/* Home Page Carousel */

header.carousel {
	height: 60%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
}

header.carousel .fill {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Pricing Page Styles */

.price {
    display: block;
    font-size: 50px;
    line-height: 50px;
}

.price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
}

.period {
    display: block;
    font-style: italic;
}

/* Footer Styles */

footer {
	margin-right: 0;
	margin-left: 0;
	padding: 20px;
	background-color: #626262;
}

#social {
	margin-right: 0;
	margin-left: 0;
	padding: 20px;
	background-color: #fff;
}

#call-to-action {
	margin-right: 0;
	margin-left: 0;
	margin-top:0px;
	padding: 20px;
	background-color: #b7ab8d;
}

#content {
	margin-right: 0;
	margin-left: 0;
	padding: 20px;
	background-color: #1c1c1d;
}

#content p, li {
	color:#ccc;
}

#content h1, h2, h3, h5, h6 {
	color: #b7ab8d;
}

#myCarousel {
	border-bottom:#CFB384 solid 5px;

}

/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.menu-margin{
	margin-top: 30px;
}

.col-sm-6 h5 {
	text-align:center}
	
.marcas li {
	display: block;
	background-color: #C03E40;
	color: #fff;
	padding: 5px;
	float: left;
	margin: 5px;
	font-size: 14px;
	border-radius:5px;
}

.marcas h3 {
	color:#fff;
	font-style:normal;
	font-weight:normal;
	font-size:18px;
}

.poema h3 {
	color:#fff;
	font-style:normal;
	font-weight:normal;
	font-size:18px;
}

.social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	right: 0; /* Establecemos la barra en la izquierda */
	top: 335px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
	.social ul {
		list-style: none;
	}
 
	.social ul li a {
		display: inline-block;
		color:#fff;
		background: #C03E40;
		padding: 15px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-twitter {background: #00abf0;}
	.social ul li .icon-googleplus {background: #d95232;}
	.social ul li .icon-pinterest {background: #ae181f;}
	.social ul li .icon-mail {background: #666666;}
 
	.social ul li a:hover {
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 15px 15px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}

.carousel-caption h2 {
	color:#ffffff;
}

.carousel-fade {
    .carousel-inner {
        .item {
            transition-property: opacity;
        }
        
        .item,
        .active.left,
        .active.right {
            opacity: 0;
        }

        .active,
        .next.left,
        .prev.right {
            opacity: 1;
        }

        .next,
        .prev,
        .active.left,
        .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
        }

    .carousel-control {
        z-index: 2;
    }