@import 'classes.css';
@import '../fonts/stylesheet.css';

body{font-family: 'Circular Std';}

html, body{height:100%;}

a{color:inherit;}

header{
	height:100%;
	background-position:top center;
	background-repeat:no-repeat;
	background-size:cover;
}


blockquote {
	font-style: italic;
}

header > .container{
	position:relative;
	top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

section{
	position:relative;
}

.slick-arrow{
	position:absolute;
	top:50%;
	font-size: 40px;
    background: transparent;
    border: 0;
    z-index: 9;
    color: #d6d1b7;
	outline:none;
}

.slick-prev{
	left: 0;
	-webkit-transform: translateX(-150%);
	-ms-transform: translateX(-150%);
	transform: translateX(-150%);
}

.slick-next{
	right: 0;
	-webkit-transform: translateX(150%);
	-ms-transform: translateX(150%);
	transform: translateX(150%);
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

	.slick-prev{
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.slick-next{
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
	}
}

.navbar{
	background: transparent;
    border: 0;
    border-radius: 0;
	position:absolute;
	top:40px;
	left:0;
	width:100%;
	z-index:99;
	animation-direction: alternate;
	-webkit-animation-direction: alternate;
}


.navbar .navbar-brand{
	position:relative;
	display:inline-block;
	height:auto;
}

.navbar .navbar-brand svg{
	width:120px;
	height:39px;
	margin-top:-7px;
}

.navbar .navbar-brand:before{
    content: '';
    display: block;
    width: 35px;
    height: 4px;
    background-color: white;
    position: absolute;
    top: -10px;
    left: 2px;
}

.navbar .navbar-nav{
	font-size: 0;
	font-size: 12px;
	float: right;
	margin-top: 6px;
}

.navbar-default .navbar-nav>li>a{
	font-size:18px;
	display:inline-block;
	margin-left:25px;
	color:white;
}

.navbar-default .navbar-nav>li>a.active,
.navbar-default .navbar-nav>li>a:hover{
	text-decoration:none;
}

.navbar-default .navbar-collapse{
	border:0;
	box-shadow:none;
}

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
	background: transparent;
    border: 0;
}

.navbar-default .navbar-toggle .icon-bar{
	background-color:white;
	height: 4px;
    width: 30px;
}

.navbar.nav-fixed{
	position:fixed;
	top:0px;

	-webkit-animation: navAnim  0.3s linear;
	animation: navAnim  0.3s linear;
}

.navbar.nav-fixed .container,
.navbar.nav-fixed .row{height:100%;}

.navbar.nav-fixed .navbar-brand:before{display:none;}

.navbar.nav-fixed .navbar-nav{
	margin-top: 12px;
}

@keyframes navAnim {
  from {top:-80px}
  to {top:0px;}
}

@-webkit-keyframes navAnim {
  from {top:-80px}
  to {top:0px;}
}

.goDown{
    position: absolute;
    font-size: 40px;
    display: block;
    width: 60px;
    margin: 40px auto 0;
    text-align: center;
    text-decoration: none!important;
    bottom: 40px;
    left: 0;
    right: 0;
}

.goDownRelative{
	position:relative;
	bottom:auto;
	left:auto;
	right:auto;
}

/*
===================================
>>> FOOTER
===================================
*/

footer{
	width:100%;
	height:52px;
	line-height:52px;
}

.home footer{
	position:absolute;
	bottom:0;
}

/*
===================================
>>> CLIENTES
===================================
*/

.logos-clientes{
	position:relative;
}

.logos-clientes > div{
	margin-right:33px;
}

.logos-clientes > div:before{
	content:'';
	display:inline-block;
	height:75px;
	width:1px;
	background-color:white;
	position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.logos-clientes > div > a{margin-left:33px;}

.logos-clientes > div:first-child:before{display:none;}

.logos-clientes > div:first-child > a{margin-left:0px;}

.contenedor-logo{
	height:105px;
	line-height:105px;
}

.contenedor-logo > img{vertical-align:bottom; max-height:90px;}

.clientes-col .h4{
	width:85%;
	margin-left:auto;
	margin-right:auto;
}

/*
===================================
>>> COLORES
===================================
*/

.colors-home header{
	background-color:#00b1dc;
	background-image:url(../images/bg-body1.jpg);
}

.colors-home .navbar-default .navbar-nav>li>a.active,
.colors-home .navbar-default .navbar-nav>li>a:hover,
.colors-home .color-destacado{
	color:#ee1f6d;
}

.colors-home .btn-default{
	border-color:#ee1f6d;
	color:#ee1f6d;
}

.colors-home .btn-default:hover,
.colors-home .btn-default:focus,
.colors-home .btn-default:active:focus,
.colors-home .btn-default:active:hover{
	background-color:#ee1f6d;
}

.colors-magenta header{
	background-color:#ee1f6d;
	background-image:url(../images/bg-body2.jpg);
}

.colors-magenta .navbar-default .navbar-nav>li>a.active,
.colors-magenta .navbar-default .navbar-nav>li>a:hover,
.colors-magenta .color-destacado{
	color:#c868ff;
}

.colors-magenta .btn-default{
	border-color:#c868ff;
	color:#c868ff;
}

.colors-magenta .btn-default:hover,
.colors-magenta .btn-default:focus,
.colors-magenta .btn-default:active:focus,
.colors-magenta .btn-default:active:hover{
	background-color:#c868ff;
}

.colors-magenta .navbar.nav-fixed{
	background-color:#ee1f6d;
}

.colors-naranja header{
	background-color:#f18137;
	background-image:url(../images/bg-body3.jpg);
}

.colors-naranja .navbar-default .navbar-nav>li>a.active,
.colors-naranja .navbar-default .navbar-nav>li>a:hover,
.colors-naranja .color-destacado{
	color:#4e75f8;
}

.colors-naranja .btn-default{
	border-color:#f18137;
	color:#f18137;
}

.colors-naranja .btn-default:hover,
.colors-naranja .btn-default:focus,
.colors-naranja .btn-default:active:focus,
.colors-naranja .btn-default:active:hover{
	background-color:#f18137;
}

.colors-naranja .navbar.nav-fixed{
	background-color:#f18137;
}

.colors-cyan header{
	background-color:#0ab0da;
	background-image:url(../images/bg-body4.jpg);
}

.colors-cyan .navbar-default .navbar-nav>li>a.active,
.colors-cyan .navbar-default .navbar-nav>li>a:hover,
.colors-cyan .color-destacado{
	color:#ffd131;
}

.colors-cyan .btn-default{
	border-color:#ffd131;
	color:#ffd131;
}

.colors-cyan .btn-default:hover,
.colors-cyan .btn-default:focus,
.colors-cyan .btn-default:active:focus,
.colors-cyan .btn-default:active:hover{
	background-color:#ffd131;
}

.colors-cyan .navbar.nav-fixed{
	background-color:#0ab0da;
}

.colors-cyan .btn-secondary{
	color:#0ab0da;
}

.colors-cyan .btn-secondary:hover{
	background-color:#ffd131;
}

/*
===================================
>>> BROWSER THINGY
===================================
*/


.browser{
	position:relative;
}

.browser > img{
	position:relative;
	z-index:1;
	width:100%;
}

.browser > .screen{
	position:absolute;
	top:3%;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	width:90%;
	height:83%;
	background-position:top center;
	background-repeat:no-repeat;
	background-size:cover;
}



/*
===================================
>>> QUOTE
===================================
*/

.quote{
	text-align:center;
}

.quote > blockquote{
	border:0;
	color:#f0eee4;
}

.quote .pic{
	width:80px;
	height:80px;
	border-radius:50%;
	overflow:hidden;
	margin: 20px auto 0;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}

.productos h2 {
	margin-top: 8px;
}


.form-group{
	position:relative;
}

.form-group .filled{
	position:absolute;
	bottom:0;
	color:rgba(255, 255, 255, 0.6);
}

.messi-titlebox{
	background-color: #f18137;
    background-image: none;
    font-family: 'Circular Std';
    border-radius: 0;
}

.messi-content{
    font-family: 'Circular Std';
	border-radius: 0;
}

.messi-wrapper,
.messi-box{
	border-radius: 0;	
}

.messi-closebtn::before{top:0;}

/*
===================================
>>> MOBILE
===================================
*/

@media (max-width: 768px) {

	.navbar,
	.navbar.nav-fixed{
		position:relative;
		top:0;
		margin-bottom:0;
	}

	.navbar .navbar-brand{
		float:right;
	}

	.navbar .navbar-nav{
		float: none;
		text-align: center;
		border-top:1px solid #f0eee4;
		border-bottom:1px solid #f0eee4;
		padding-top:15px;
		padding-bottom:15px;
		margin-top:8px;

	}

	.navbar-default .navbar-nav>li>a{margin-left:0;}

	header{
		padding-top:30px;
		padding-bottom:30px;
		height:80%;
	}

	.colors-home .navbar{background-color:#00b1dc;}
	.colors-magenta .navbar{background-color:#ee1f6d;}
	.colors-naranja .navbar{background-color:#f18137;}
	.colors-cyan .navbar{background-color:#0ab0da;}

	.home footer{
		position:relative;
	}

	footer div[class^='col-']{
		margin:10px 0;
		text-align:center!important;
		font-size: 12px;
		line-height: 1.2em;
	}

	.fsize-72 {
		font-size: 32px;
	}

	.logos-clientes{display:none;}

	.nav-anclas{
		white-space: normal!important;
	}

	.logos-clientes > div{
		margin-top:20px;
		padding-bottom:20px;
		display:block;
		text-align: center;
		margin-right:0;
	}

	.logos-clientes > div:before{display:none;}
	.logos-clientes > div > a{margin-left:0;}

	.goDown{
		position: relative;
		bottom: auto;
	}

	.clientes-col{margin-top:50px;}

	.contenedor-logo{height:auto; line-height:normal; margin-bottom:20px;}

	.nav-anclas{
		text-align:center;
		font-size: 0;
	}

	.nav-anclas > div{margin-right:0!important;}

	.nav-anclas > div.width50{width:48%; margin-bottom:30px;}
	.nav-anclas > div.width100{width:100%;}

	.nav-anclas > div.width50{margin-left:2%;}
	.nav-anclas > div.width50:first-child{margin-right:2%; margin-left:0;}

	.nav-anclas a{width:100%;}

	.fsize-mob-30{font-size:30px; line-height:normal;}
}

@media (max-width: 500px) {

	.messi-modal{
		width:100%!important;
	}
	
	.messi{
		width: 100%!important;
		left:0!important;
	}
	
	.messi-box{
		width: 90%!important;
		margin-left: 5%!important;
	}

	header{
		height:auto;
	}

	.home header{
		min-height:90%;
	}

	header > .container{
		top:auto;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}

	.btn-secondary{min-width:auto;}
}