//Archivo Less para Surrey
//Author: Paulo Conde - pauloconde@gmail.com
//Areté Estudio Creativo

/*Media queries*/
@smartphones: ~"only screen and (max-width: 767px)";
@tablets: ~"only screen and (min-width: 768px) and (max-width: 1180px)";
@desktops: ~"only screen and (min-width: 1181px) and (max-width: 2499px)";
@bigscreens: ~"only screen and (min-width: 2500px)";

/*Ondas media queries*/
@small: ~"only screen and (max-width: 991px)";
@medium: ~"only screen and (min-width: 992px) and (max-width: 1180px)";
@big: ~"only screen and (min-width: 1181px)";



/*Colors*/
@gray: #5b5b5e;
@darkgray: #201815;
@lightgray: #86858a;
@lightgreen: #aecfcc;
@green: #5ea099;
@white: #fff;
@orange: #e6b54a;

/*Font sizes*/
.MainTitle() {
	font-size: 35pt;
	@media @smartphones {
		font-size: 28pt;
	}
}
.MediumTitle() {
	font-size: 22pt;
	@media @smartphones {
		font-size: 20pt;
	}
}
.MainSubtitle() {
	font-size: 18pt;
	@media @smartphones {
		font-size: 16pt;
	}
}
.SectionTitle() {
	font-size: 30pt;
	@media @smartphones {
		font-size: 20pt;
	}
}
.Paragraph() {
	font-size: 15pt;
}
.Menu() {
	font-size: 10pt;
}
.Small() {
	font-size: 12pt;
}

/*Tipos*/
.Raleway() {
	font-family: 'Raleway', sans-serif;
}
.OpenSans() {
	font-family: 'Open Sans', sans-serif;
}
.RalewayLight() {
	.Raleway;
	font-weight: 300;
}
.RalewayRegular() {
	.Raleway;
	font-weight: 400;
}
.RalewaySemi() {
	.Raleway;
	font-weight: 600;
}
.RalewayBold() {
	.Raleway;
	font-weight: 700;
}

/*Global*/
body {
	.RalewayRegular;
	.Paragraph;	
	color: @gray;
	background-color: @white;
	min-width: 360px;
}
.verde {
	color: @green;
}
h1 {
	.RalewayLight;
	.MainTitle;
	color: @gray;
	padding-bottom: 2em;
	padding-top: 1.5em;
	text-align: center;
	&.blanco {
		color: @white;
	}
	@media @smartphones {
		padding-bottom: 1em;
	}
}
h2 {
	.RalewayRegular;
	.MainSubtitle;
	color: @white;
	padding-bottom: 2em;
	padding-top: 1.5em;
	text-align: right;
	.verde {
		.RalewayBold;
	}
	@media @smartphones {
		padding-bottom: 1em;
		text-align: center;
	}
}
h3 {
	.RalewayRegular;
	.MainSubtitle;
	color: @green;
}
p {
	.RalewayRegular;
	.Paragraph;	
	padding-top: 25px;
	color: @lightgray;
	.bold {
		.RalewayBold;
	}
}

/*Navbar*/
#top-nav {
	background-color: rgba(255,255,255,.8);
	.navbar-nav {
		li {
			a{
				.RalewayLight;
				.Menu;
				padding-top: 45px;
				color: @darkgray;
				&:hover{
					color: @green;
					text-decoration: none;
				}
			}
			&.menu-icon {
				a {
					padding-top: 40px;
					padding-right: 5px;
					padding-left: 5px;
				}
			}
		}
	}
}
.navbar {
	background-color: rgba(255,255,255,.75);
}

/*Carousel*/
#homecarousel {
	display: none; //para vver animación
	.carousel-inner {
		.item {
			margin-top: -100px;
		}
	}
	.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;
	    }
	}
}

iframe {
	padding-top: 100px !important;
	overflow: hidden !important;
	height: 110vh !important;
	width: 100% !important;
}

/*Smart Ondas*/
#smart {
	padding-bottom: 100px;
	padding-top: 50px;
}
@media @big {
	.ondas {
		zoom: 1;
		-moz-transform: scale(1) !important;	
	}
}
@media @medium {
	.ondas {
		zoom: 0.8;
		-moz-transform: scale(0.8) !important;	
	}
}
@media @small {
	.ondas {
		zoom: 0.8;
		-moz-transform: scale(0.8) !important;	
	}
	#page1 {
		margin-top: 200px;
	}
	#stores {
		margin-top: 240px;
	}
}



/*Dividers*/
.divisor {
	display: block;
	&.gris {
		background-color: @gray;
	}
	&.grisclaro {
		background-color: @lightgray;
	}
	&.grisoscuro {
		background-color: @darkgray;
	}
	&.blanco {
		background-color: @white;	
	}
	&.verde{
		background-color: @green;
	}
}

/*Stores*/
#stores {
	background-color: @gray;
	img {
		padding-top: 1.7em;
		padding-left: 15px;
	}
}

/*Confort*/
#confort, #confort2 {
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100% 50%;
	display: block;
	//min-height: 400px;
	background-image: url("../images/confortback.png");
	background-position: center center;
	padding: 0;
}

.fullwidth {
    height: auto;
    margin: 0 auto;
    width: 100%;
}

/*Funciones*/
#funciones {
	text-align: center;
	padding-top: 50px;
	p {
		padding-bottom: 40px;
		padding-right: 15px;
		padding-left: 15px;
	}
	margin-bottom: 40px;
	.col-md-4:hover {
		background-color: #D9DBD5;
		h3 {
			color:	@lightgray;
		}
	}
	img {
		margin-top: 30px;
	}
}
	
/*App Install*/
#app {
	background-color: @gray;
	padding-top: 50px;
	h1 {
		.SectionTitle;
		color: @white;
		text-align: center;
	}
}
.over {
	position: absolute;
	margin-top: -60px;
	display: inline-block;
	margin-left: -122px;
	&.snow {
		margin-left: -60px;
	}
}
.under{
	padding-top: 100px;
	padding-bottom: 50px;
	h4 a {
		color: @lightgray;
		img {
			margin-top: -7px;
		}
		&:hover {
			color: @green;
			text-decoration: none;
			.RalewayBold;
		}
	}
}
/*Modal Vídeo*/
	.modal-content iframe{
        margin: 0 auto;
        display: block;
    }



/*Especificaciones*/
#specs {
	background-color: @green;
	text-align: center;
	padding: 20px;
	padding-top: 120px;
	h1 {
		color: @white;
		padding: 0;
	}
}

/*Table Specs*/
.specs-header {
	padding-top: 50px;
	h3 {
		.RalewayRegular;
		.MediumTitle;
		color: @lightgray;
		.bold {
			.RalewayBold;
		}
	}
	h4 {
		.RalewayRegular;
		.Paragraph;
		color: @green;
		.bold {
			.RalewayBold;
		}
	}
}
.specs-carousel {
	padding-bottom: 80px;
}
.carousel-control {
    &.left, &.right {
        background-image: none;
        margin-top: 272px;
	}
	&.left {
		margin-left: -120px;
	}
	&.right {
		margin-right: -120px;
	}
}
#equiposcarousel {
    padding-top: 192px;
    margin-top: -192px;
	.carousel-indicators {
		bottom: -70px;
		.active {
			width: 12px;
			height: 12px;
			margin: 0;
			background-color: @gray;
		}
		li {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin: 1px;
			text-indent: -999px;
			cursor: pointer;
			background-color: #edeef0;
			border: 1px solid #edeef0;
			border-radius: 10px;
		}	
	}
	
}
table {
	.OpenSans;
	.Small;
	td {
		padding-left: 10px;
		padding-top: 5px;
		border-bottom: 1px solid @gray;
	}
	.table-header {
		background-color: @lightgreen;
		color: @white;
		td:first-child {
			border: 0px solid @green;
		}
	}
	.last-row td {
		border: 0px solid @green;
	}
}

/*Datos*/
#datos {
	background-color: @green;
	text-align: center;
	padding-bottom: 70px;
	padding-top: 50px;
	p {
		color: @white;
		padding-left: 25px;
		padding-right: 25px;
		a {
			color: @white;
			&:hover {
				color: @gray;
				text-decoration: none;
			}
		}
	}
}
#datos-header {
	background-color: @orange;
	h1 {
		color: @white;
		padding: 0;
	}
}

/*Footer*/
#footer {
	background-color: @gray;
	.Menu;
	padding-top: 50px;
	padding-bottom: 80px;
	.logo {
		text-align: center;
		p {
			color: @green;
		}
	}
	li {
		list-style-type: none;
		color: @white;
		a {
			color: @white;
			.Menu;
			&:hover {
				color: @green;
				text-decoration: none;
			}
		}
		input {
			margin-top: 10px;
			color: @gray;
		}
		input[type="email"]{
			min-width: 200px;
		}
		input[type="submit"]{
			background-color: @lightgray;
			border: 1px solid @white;
			padding: 5px;
			padding-left: 10px;
			padding-right: 10px;
			color: @white;
			&:hover{
				background-color: @green;
			}
		}
	}
}

/*Botón Back to Top*/
a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: @gray url("../images/up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	&:focus, &:active {
		outline: none !important;
		-moz-outline-style: none !important;
	}
	&:hover {
		background-color: @green;
	}
}