/*
Client: NODOS
Autor: sietedefebrero.com
*/
/**************************************************************************************
Defaults
***************************************************************************************/
body {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	padding-top: 60px;
}
* {
	outline: none !important;
}
p {
	font-size: 16px;
	letter-spacing: .01em;
	margin: 0 0 20px;
	font-weight: 400;
}
a:hover, a:focus {
	text-decoration: none;
}
ol, ul {
	margin: 0;
	padding: 0;
}
li	{
	list-style: none;
}
.h1, h1 {
    font-size: 42px;
    text-transform: uppercase;
    font-family: 'Abel', sans-serif;
	color: #545454;
}
.h2, h2 {
	font-size: 36px;
}
.h3, h3 {
	font-size: 30px;
}
.h4, h4 {
	font-size: 24px;
}
.h5, h5 {
	font-size: 21px;
}
.h6, h6 {
    font-size: 16px;
    text-transform: uppercase;
    color: #e52625;
    font-family: 'Abel', sans-serif;
	letter-spacing: .06em;
}
/**************************************************************************************
Bootstrap Overwrites
***************************************************************************************/
.h1, .h2, .h3, .h4, .h6, h1, h2, h3, h4, h6 {
}
.navbar {
	font-family: 'Abel', sans-serif;
	text-transform: uppercase;
	min-height: 60px;
}
.navbar-default {
    background-color: #1c1c1c;
    border: none;
}
.navbar-brand {
    padding: 15px 15px;
}
.navbar-default .navbar-nav>li>a {
	color: white;
	padding: 0;
	padding-right: 15px;
	padding-left: 20px;
	height: 60px;
	line-height: 60px;
	letter-spacing: 0.09em;
	background: #262626;
	border-left: solid 1px #2d2d2d;
}
.navbar-default .navbar-nav>li>a img {
	display: inline-block;
	margin-right: 10px;
	margin-top: -5px;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: white;
	background: #262626;
}
hr {
    margin-top: 15px;
    margin-bottom: 15px;
    border: 0;
    border-top: 1px solid #444;
	opacity: .5;
}
/**************************************************************************************
Custom Classes
***************************************************************************************/
/* Start of "Micro clearfix" */
.cf { zoom: 1; }
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
/* End of "Micro clearfix" */
.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}
.npl	{
	margin-top: 0 !important;
	margin-bottom: 15px !important;
    padding-left: 0 !important;
}
.npr	{
	margin-top: 0 !important;
	margin-bottom: 15px !important;
    padding-right: 0 !important;
}
.npb	{
	margin-top: 0 !important;
	margin-bottom: 0px !important;
    padding-right: 0 !important;
}
.noleft	{
	padding-left: 0 !important;
}
.noright	{
	padding-right: 0 !important;
}
.vspace	{
	margin-top:15px;
}
.vspace2	{
	margin-top:30px;
}
.vspace3	{
	margin-top:45px;
}
.vspace4	{
	margin-top:60px;
}
.vspace5	{
	margin-top:75px;
}
.vspace6	{
	margin-top:90px;
}
.vspace7	{
	margin-top:105px;
}
.vspace8	{
	margin-top:120px;
}
.vspace10	{
	margin-top:10px;
}
.imgfull	{
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}
.imgfull75	{
	width: 75%;
	min-width: 75%;
	max-width: 75%;
}
.center	{
	text-align: center;
}
.tright {
	text-align: right;
}
.ib {
	display: inline-block;
}
.mrgbtm {
	margin-bottom: 30px;
}
.mrgbtm2 {
	margin-bottom: 60px;
}
.mrgbtm3 {
	margin-bottom: 75px;
}
.mrgbtm4 {
	margin-bottom: 80px;
}
.mrgbtm5 {
	margin-bottom: 90px;
}
.mrgbtm6 {
	margin-bottom: 100px;
}
.white {
	color: white;
}
.btn-principal {
    display: block;
    padding: 17px 0px;
    border: solid 1px #e52625;
    border-radius: 4px;
	background: white;
    font-family: 'Abel', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: .013em;
    text-align: center;
    color: #545454;
	transition: all 0.22s ease;
	-webkit-transition: all 0.22s ease;
	-moz-transition: all 0.22s ease;
	-o-transition: all 0.22s ease;
}
.btn-principal:hover, .btn-principal:focus {
	background: #e52625;
	color: white;
}
.btn-principal-azul {
    display: block;
    padding: 15px 0px;
	border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
	background: #3697dc;
    font-family: 'Abel', sans-serif;
    text-transform: uppercase;
    letter-spacing: .013em;
    text-align: center;
    color: white;
	transition: all 0.22s ease;
	-webkit-transition: all 0.22s ease;
	-moz-transition: all 0.22s ease;
	-o-transition: all 0.22s ease;
}
.btn-principal-azul:hover, .btn-principal-azul:focus {
	background: #2a74a8;
	color: white;
}
/**************************************************************************************
Configuración
***************************************************************************************/
.indicadores-pasos div {
	background: grey;
	border-right: solid 1px white;
	height: 34px;
	line-height: 34px;
    text-transform: uppercase;
    font-size: 12px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
    letter-spacing: .05em;
    color: lightgrey;    
}
.indicadores-pasos div:last-child {
	border-right: none;
}
.indicadores-pasos div span {
	display: none;
}
.indicadores-pasos div.ok {
	background: #96db37;
	color: #54870c;
}
.indicadores-pasos div.ok span {
	display: initial;
}
.box-config {
	background: #f1f1f1;
	padding-bottom: 27px;
	border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	font-family: 'Abel', sans-serif;
	text-transform: uppercase;
	letter-spacing: .025em;
}
.box-config h3 {
    display: block;
	margin-bottom: 0;
    background: #8c8c8c;
    color: white;
    font-size: 21px;
    font-weight: 300;
	text-align: center;
    padding-top: 17px;
    padding-bottom: 18px;
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
}
.inner-box-config {
	margin: 27px auto 0px;
	width: 90%;
}
.box-config ul {
    display: block;
    margin: auto 0;
}
.box-config ul li span {
	display: block;
	width: 100%;
	border: solid 1px #bfbfbf;
	padding: 10px 0px;
	margin-bottom: 12px;
	border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
	font-family: 'Abel', sans-serif;
	text-transform: uppercase;
	letter-spacing: .025em;
	text-align: center;
	transition: all 0.25s ease;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
}
.box-config ul li span:hover {
	cursor: pointer;
	background: white;
}
.box-config ul li span:active {
	border: dashed 1px #808080;
	background: white;
	cursor: move;
}
.box-config form label {
	display: block;
	width: 100%;
	padding: 10px;
	margin-bottom: 12px;
	font-family: 'Abel', sans-serif;
	text-transform: uppercase;
	letter-spacing: .025em;
}

.box-config form input {
	display: block;
	width: 100%;
	border: solid 1px #bfbfbf;
	padding: 10px;
	margin-bottom: 12px;
	border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
	font-family: 'Abel', sans-serif;
	text-transform: uppercase;
	letter-spacing: .025em;
}
.box-config form input:focus {
	border-color: #808080;
}


.box-drag {
	margin-top: 10px;
	border: solid 1px #8c8c8c;
	padding-bottom: 20px;
	border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
	font-family: 'Abel', sans-serif;
	text-transform: uppercase;
	letter-spacing: .025em;
}
.box-drag h4 {
	display: block;
	margin: 0;
	background: #8c8c8c;
	color: white;
	font-size: 16px;
	font-weight: 300;
	text-align: center;
	padding-top: 14px;
	padding-bottom: 14px;
	border-radius: 8px 8px 0px 0px;
	-moz-border-radius: 8px 8px 0px 0px;
	-webkit-border-radius: 8px 8px 0px 0px;
}
.inner-box-drag {
	margin: 27px auto 0px;
	width: 95%;
}
.inner-box-drag ul li span {
	display: inline-block;
	width: 90%;
	background: #97db37;
	border: solid 1px #85c230;
	color: white;
}
.inner-box-drag ul li span:hover {
	display: inline-block;
	width: 90%;
	background: #97db37;
	border: solid 1px #85c230;
	color: white;
}

.inner-box-drag ul li span.delete {
	width: 8% !important;
	background: none;
	border: dashed 1px grey;
	color: grey;
	transition: all 0.15s ease;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
}
.inner-box-drag ul li span.delete:hover, .inner-box-drag ul li span.delete:focus {
	border-color: red;
	color: red;
}

table.pasos {
    border-collapse: collapse;
	width: 100%;
	background: #f1f1f1;
	padding-bottom: 27px;
	border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
	font-family: 'Abel', sans-serif;
	text-transform: uppercase;
	letter-spacing: .025em;
}
table.pasos, td, th {
    border: 1px solid white;
	padding: 10px;
}
table.pasos th {
	margin-bottom: 0;
    background: #8c8c8c;
    color: white;
    font-size: 21px;
    font-weight: 300;
	text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
}
table.pasos th:first-child {
	width: 30%;
	border-radius: 10px 0px 0px 0px;
	-moz-border-radius: 10px 0px 0px 0px;
	-webkit-border-radius: 10px 0px 0px 0px;
}
table.pasos th:last-child {
	width: 50%;
	border-radius: 0px 10px 0px 0px;
	-moz-border-radius: 0px 10px 0px 0px;
	-webkit-border-radius: 0px 10px 0px 0px;
}
table.pasos form {
	display: inline-block;
}
table.pasos form input[type="text"]  {
	display: inline-block;
	padding: 5px 12px;
	margin-right: 3px;
	margin-bottom: 3px;
	width: 120px;
	border: solid 1px #bfbfbf;
	border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
	font-family: 'Abel', sans-serif;
	text-transform: uppercase;
	letter-spacing: .025em;
}
table.pasos form input[type="text"]:focus {
	border-color: #36a3d9;
}
table.pasos form div {
	display: inline-block;
	background: white;
	padding: 8px;
	margin-right: 2px;
	margin-bottom: 2px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
table.pasos form div input {
	margin-left: 3px;
}
table.pasos td span {
	display: inline-block;
	margin-bottom: 3px;
	padding: 5px 12px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background: #36a3d9;
	color: white;
}




/* -------------------- Footer -------------------- */
footer {
	margin-top: 90px;
	background: #1c1c1c;
	text-transform: uppercase;
	padding-top: 45px;
	padding-bottom: 45px;
}

/**************************************************************************************
QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES
QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES
QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES
QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES
QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   QUERIES   
***************************************************************************************/

/**************************************************************************************
MD - Medium devices (desktops, 992px and up)
***************************************************************************************/
/*desktops small*/
@media (max-width: 1200px) {
	.banda-blanca {
	    padding-top: 350px;
		padding-bottom: 450px;
	}
	#Features {
	    padding-top: 30px;
	}
	.intro {
		clip-path: polygon(0 0, 100% 0, 100% 36%, 0% 80%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 36%, 0% 80%);
	}
	.intro-marca {
		padding-top: 30px;
	}
	.google-badge {
	    padding-top: 30px;
	}
	footer {
	    padding-top: 90px;
	    padding-bottom: 30px;
	}
}
/**************************************************************************************
SM - Tablet Portrait 1
***************************************************************************************/
/*tablet*/

@media (max-width: 1050px) {
	.banda-blanca {
	    padding-top: 270px;
		padding-bottom: 300px;
	}
}


/**************************************************************************************
SM - Tablet Portrait 2
***************************************************************************************/
/*tablet*/
@media (max-width: 992px) {
	.banda-blanca {
	    padding-top: 170px;
		padding-bottom: 200px;
	}
	.intro {
		height: 830px;
		background-position: center 0px; 
		clip-path: polygon(0 0, 100% 0, 100% 36%, 0% 60%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 36%, 0% 60%);
	}
	.google-badge {
	    padding-top: 12px;
	    max-width: 160px;
	    opacity: .25;
	}
	
	
}
/**************************************************************************************
XS - Mobile
***************************************************************************************/
/*mobile*/
@media (max-width: 767px) {
	h2 {
	    font-size: 32px;
	}
	.navbar-default .navbar-nav>li>a.ingresar {
	    border-radius: 0px;
	    padding: 10px;
	    margin-top: 1px;
	    margin-left: 0;
	}
	.navbar-nav {
	    margin: 0px -15px;
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
	    border-color: black;
	}
	.navbar-nav>li>a {
	    padding-top: 16px;
	    padding-bottom: 16px;
	    line-height: 20px;
	}
	.navbar-default .navbar-toggle .icon-bar {
	    background-color: white;
	}
	.navbar-default .navbar-toggle {
	    border: none;
	}
	.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
	    background-color: #e52625;
	}
	.intro {
		height: 400px;
		background: url(i/foto-head-xs.jpg) no-repeat center -20px; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: 100%;
		clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 80%);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 80%);		
	}
	.intro-marca h1 {
	    padding-top: 180px;
	    padding-bottom: 20px;
	    font-size: 34px;
	}
	.beneficios {
		background-image: none;
	}
	.banda-blanca {
	    padding-top: 60px;
	    padding-bottom: 60px;
		background-image: none;
		background-color: white;
		margin: 45px 0;
	}
	.divisor {
	    height: 220px;
	}
	.precio {
	    padding-top: 20px;
	}
	
	footer {
		padding-bottom: 0px;
	}
	
}