@charset "utf-8";
/* CSS Document */

/* **** HOJA DE ESTILOS PERSONALIZADA **** */

/* Reseteos y estilos generales */
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: MontserratRegular, Arial, Helvetica, sans-serif;
	-webkit-text-stroke: 0.5px;
}

/* Tipografías */
@font-face {
	font-family: MontserratRegular;
	src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
}

@font-face {
	font-family: MontserratBold;
	src: url(../fonts/Montserrat/Montserrat-Bold.ttf);
}

/* Cabecera principal */
.jumbotron {
	width: 100%;
	/* height: 500px; */
	/* background: url(../images/imagen_grande.png) center center no-repeat; */
	background-size: cover;
	margin-bottom: 0;
	margin-top: 35px;
	padding: 0;
}

/* Estilo de los títulos y textos */
.jumbotron h1,.jumbotron h2,.jumbotron h3 {
	font-weight: lighter;
	color: #FFF;
}

.jumbotron h1 {
	font-size: 42px;
	margin-bottom: 5px;
}

.jumbotron h2 {
	font-size: 38px;
	margin: 0;
	padding: 0 0 24px 0;
	border-bottom: 1px solid #FFF;
}

.jumbotron h3 {
	font-size: 29px;
	line-height: 45px;
	margin-top: 0;
	margin-bottom: 15px;
	padding: 24px 0 0 0;
}

.jumbotron span {
	font-weight: 400;
}

.textoBanner {
	float: left;
	text-align: center;
	padding: 10px 70px;
	margin-top: 0px;
}

/* Menú de navegación principal */
#navMenu {
	margin: 16px;
}

.navbar-default .navbar-collapse,.navbar-default .navbar-form {
	border: none;
}

.navbar-toggle {
	margin-top: 7px;
	margin-right: -6px;
	padding: 5px 5px;
}

.navbar-brand {
	padding: 6px 0 0 15px;
}

.navbar-brand img {
	padding: 0;
	height: 60px;
}

.navColor {
	background: #FFF;
}

.margenTopMenu {
	margin: 5px 25px 0 25px;
	height: 80px;
}

.navbar-default .navbar-nav>li>a {
	padding: 8px 16px;
	color: #243f72;
	height: 38px;
}

.navbar-default .navbar-nav>li>a:hover {
	color: #FC0;
}

.seleccionado {
	color: #FC0 !important;
	/* Importante para dejar marcado el elemento del menú en función de la página actual */
}

.homeIcon,.hoverIcon,.colIcon {
	background-color: #FFF;
}

.homeIcon {
	background: url(../images/iconoHome.png) -6px 0 no-repeat;
	height: 36px;
	width: 34px;
}

.homeHref {
	height: 36px;
	width: 34px;
}

.inicioIcon {
	background: #FC0;
	border: 1px solid #FC0;
}

.inicioIcon:hover {
	background: #FFF;
	border: 1px solid #243f72;
}

.homeIcon a:hover:after,.colIcon a:hover:after,.hoverIcon a:hover:after
	{
	content: url("../images/flechasHover.png");
	position: absolute;
	top: 40px;
}

.homeIcon a:hover:after {
	right: 8px;
}

.hoverIcon a:hover:after {
	right: 32px;
}

.colIcon a:hover:after {
	right: 55px;
}

/* Menú de creación de nueva tienda */
.navbarNuevatienda {
	float: left;
	width: 100%;
	background: #fC0;
	/* margin-top: 70px; */
}

.navbarNuevatienda .navbar {
	padding: 10px;
	margin-bottom: 0;
}

.navbar-form {
	margin: 5px 60px;
}

.form-group {
	margin: 0 20px;
}

.navbar-form .form-group {
	width: 100%;
}

.navbar-form .form-control {
	float: left;
	margin-right: 40px;
	width: 25%;
}

.form-group ::-webkit-input-placeholder {
	font-size: 16px;
}

#btnSetup {
	background: #243f72;
	color: #FFF;
	border: 1px solid #243f72;
	width: 300px;
	float: right;
}

#btnSetup:hover {
	background: #FFF;
	color: #243f72;
}

/* Contenido central y Footer */
.wrapper {
	width: 100%;
}

/* Elementos principales del contenido del index */
.description,.expVideo,.slider,.footer {
	float: left;
}

/* Descipción de servicios */
.description {
	padding-top: 50px;
	padding-bottom: 50px;
	float: left;
	margin-left: 10%;
	margin-right: 10%;
}

.thumbnail,.img-thumbnail {
	box-shadow: none;
	background-color: transparent;
	border: none;
	margin: auto;
}

.description .col-lg-4 {
	width: 33.333333%;
	float: left;
}

.description .caption {
	text-align: center;
}

.description .caption {
	font-size: 20px;
}

.description .caption h3 {
	font-size: 22px;
	font-weight: bold;
}

/* Apartado para el vídeo explicativo */
.expVideo {
	background: #FFF;
	padding-top: 50px;
	padding-bottom: 50px;
	width: 100%;
	padding-left: 10%;
	padding-right: 10%;
}

.expVideo #size {
	font-size: 38px;
	text-align: center;
}

/* Slider con las opiniones de algunos clientes */
.slider {
	padding-top: 50px;
	padding-bottom: 50px;
	height: 350px;
	margin-left: 10%;
	margin-right: 10%;
}

.examplesSlider {
	margin: 0 auto 0 auto;
	width: 90%;
	text-align: center;
}

.examplesSlider div img {
	margin: 0 auto 10px auto;
}

.examplesSlider div p {
	padding: 0 10px;
	font-size: 16px;
}
/* Footer principal */
.footer {
	background-color: #243f72;
	padding: 60px;
}

/* Estilos generales del footer */
.footer .col-lg-3 {
	width: 25%;
	float: left;
	border-right: 1px solid #FFF;
}

.footer ul {
	list-style: none;
	text-align: center;
}

.footer ul li p {
	color: #FFF;
	line-height: 26px;
}

.footer ul li a {
	color: #FFF;
	line-height: 26px;
}

.footer ul li a:hover {
	text-decoration: none;
	color: #f3d231;
}

/* Apartados del footer */
.mainFooter,.legal {
	overflow: hidden;
}

.mainFooter .col-lg-3 {
	height: 200px;
}

.mainFooter .bordeUltimo {
	border: none;
}

.mainFooter .footerTitle {
	display: inline-block;
	width: 100px;
	border-bottom: 1px solid #FFF;
	line-height: 26px;
}

.legal .col-lg-6 img {
	float: right;
	height: 33px;
	width: 120px;
	margin-top: 30px;
}

.legal .legalInfo {
	list-style: none;
	float: left;
	margin-top: 30px;
	overflow: hidden;
}

.legal .legalInfo li {
	float: left;
	margin-right: 20px;
}

.btn-default {
	background: #FC0;
	border: 1px solid #FC0;
	color: #000;
}

.btn-default:hover {
	background: #FFF;
}

/* Estilo página ejemplos.php */
.examplesGrid {
	margin: 100px auto 50px auto;
	width: 80%;
	overflow: hidden;
}

#pageTitle {
	overflow: hidden;
	margin: 0 0 25px 0;
	text-align: center;
}

#firstRow,#secondRow {
	overflow: hidden;
	margin: 0 0 20px 0;
}

#secondRow {
	overflow: hidden;
}

#firstRow .col-lg-4 a,#secondRow .col-lg-4 a {
	display: block;
	text-align: center;
}

#firstRow .col-lg-4 h3,#secondRow .col-lg-4 h3 {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 25px;
}

#firstRow .col-lg-4 img,#secondRow .col-lg-4 img {
	width: 300px;
	height: 200px;
}

#firstRow .col-lg-4 #proceed img:hover {
	content: url("../images/proceedtrans.png");
}

#firstRow .col-lg-4 #miro img:hover {
	content: url("../images/mirotrans.png");
}

#firstRow .col-lg-4 #joooyas img:hover {
	content: url("../images/joooyastrans.png");
}

#secondRow .col-lg-4 #casiof91 img:hover {
	content: url("../images/casiof91trans.png");
}

#secondRow .col-lg-4 #amenosdecinco img:hover {
	content: url("../images/amenosdecincotrans.png");
}

#secondRow .col-lg-4 #ktuin img:hover {
	content: url("../images/ktuintrans.png");
}

/* *** MEDIA QUERIES PARA DISEÑO ADAPTATIVO *** */

/* Móvil */
@media screen and (max-width: 399px) {
	.jumbotron h1 {
		font-size: 24px;
		margin-bottom: 2px;
	}
	.jumbotron h2 {
		font-size: 22px;
		margin: 5px 0 5px 0;
	}
	.jumbotron h3 {
		font-size: 16px;
		line-height: 20px;
		margin-bottom: 3px;
		padding: 5px 5px 5px 0;
	}
	.textoBanner {
		float: none;
	}
	.navbar-form {
		margin: 5px 0;
	}
	.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand
		{
		margin-top: 0px;
		margin-left: -25px;
	}
	.navColor {
		height: 52px;
	}
	.navbar-brand img {
		height: 33px;
		width: 120px;
	}
	.navbarNuevatienda {
		padding: 5px 0;
		margin-top: 90px;
	}
	.form-group .col-lg-3 {
		margin-bottom: 5px;
	}
	.description .col-lg-4 {
		width: 100%;
	}
	.examplesSlider div p {
		font-size: 10px;
	}
	.footer ul li p,.footer ul li a {
		font-size: 10px;
		line-height: 16px;
	}
	.mainFooter .col-lg-3 {
		width: 100%;
		border: none;
		font-size: 10px;
	}
	.examplesGrid h2 {
		font-size: 20px;
	}
	.examplesGrid h3 {
		font-size: 16px;
	}
	#firstRow .col-lg-4 img,#secondRow .col-lg-4 img {
		width: 180px;
		height: 120px;
	}
	#firstRow .col-lg-4 a,#secondRow .col-lg-4 a {
		display: block;
		text-align: center;
	}
}

/* Resoluciones intermedias */
@media screen and (min-width: 400px) and (max-width: 600px) {
	.jumbotron h1 {
		font-size: 32px;
		margin-bottom: 2px;
	}
	.jumbotron h2 {
		font-size: 28px;
		margin: 5px 0 15px 0;
	}
	.jumbotron h3 {
		font-size: 19px;
		line-height: 35px;
		margin-bottom: 7px;
		padding: 5px 5px 5px 0;
	}
	.navbar-toggle {
		margin-top: 18px;
	}
	.navbar-brand img {
		margin-left: -30px;
	}
	.textoBanner {
		float: none;
	}
	.navbarNuevatienda {
		padding: 5px 0;
		margin-top: 40px;
	}
	.form-group .col-lg-3 {
		margin-bottom: 5px;
	}
	.mainFooter .col-lg-3 {
		border: none;
	}
	#firstRow .col-lg-4 img,#secondRow .col-lg-4 img {
		width: 296px;
		height: 190px;
	}
	#firstRow .col-lg-4 a,#secondRow .col-lg-4 a {
		display: block;
		text-align: center;
	}
}

@media screen and (max-width: 768px) {
	.homeIcon {
		background: #FFF url(../images/iconoHome.png) 10px 0 no-repeat;
		width: 100%;
	}
	.legalInfo {
		font-size: 10px;
		text-align: center;
	}
	.separador {
		visibility: hidden;
	}
	.legal .col-lg-6 {
		width: 200px;
		clear: both;
	}
	.legal .col-lg-6 img {
		float: left;
		margin-top: 0;
	}
}

/* Resoluciones mayores */
@media ( min-width : 768px) {
	.navbar-nav.navbar-right:last-child {
		margin-right: 6px;
	}
	.textoBanner {
		width: 670px;
	}
}

@media screen and (min-width: 768px) and (max-width: 920px) {
	.navbar-default .navbar-nav>li>a {
		font-size: 11px;
		padding: 8px 10px;
	}
	.homeIcon a:hover:after {
		right: 6px;
	}
	.hoverIcon a:hover:after {
		right: 20px;
	}
	.colIcon a:hover:after {
		right: 37px;
	}
}

@media screen and (max-width: 1199px) {
	.textoBanner {
		float: none;
	}
	.navbar-form .form-control {
		display: block;
		width: 100%;
	}
	#btnSetup {
		display: block;
		width: 100%;
	}
	.form-group .col-lg-3 {
		margin-bottom: 5px;
	}
	.footer .mainFooter .col-lg-3 {
		border: none;
	}
	#firstRow .col-lg-4 a,#secondRow .col-lg-4 a {
		display: block;
		text-align: center;
	}
}

@media screen and (min-width: 1200px) and (max-width: 1470px) {
	.navbar-form .form-control {
		margin-right: 40px;
		width: 220px;
	}
}