@charset "utf-8";
/* CSS Document */

body {  padding: 0; margin: 0; font-family:  "acumin-pro", Helvetica, Arial, "sans-serif"; background: #ddd;box-sizing: border-box; }
ul, li { margin: 0; padding: 0;}
::selection { background:#32959d; color: white; }




header .idioma { 
	position: absolute;
    top: 20px;
    right: 14px;
    z-index: 1;
    
}

header .language:hover {background: #000000; font-size: 15px;} 
header .language { 
	color: #ffffffdb;    
    z-index: 1;
    text-underline-offset: 4px;
    text-decoration: none;       
    border-radius: 20px;
	padding: 8px; 
	margin-right: 0px;
	font-size: 15px;
}

header .language.active { background: #000000e0; font-size: 14px;} 

 .video-responsive {
        position: relative;
        padding-bottom: 50.6%;
        padding-top: 0px;
        height: 0;
        overflow: hidden;
        margin: 5%;
	 	border-radius: 10px;
    }

    .mobile .video-responsive {
        padding-bottom: 56.25%; /* 16/9 ratio */
        padding-top: 0px; /* IE6 workaround*/
        margin: 0;

    }

    .video-responsive iframe,
    .video-responsive object,
    .video-responsive embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.slider { display: flex;} 

.slider .col { max-height: 740px;} 
.slider .col.der  { overflow: hidden; background:  url("img/sliderBG.jpg") no-repeat; background-size: cover;}
.slider .col.izq { width: 48%; text-align: right; position: relative; background: #e0e0e0;} 
.slider .col.izq h1 {right: 10px;} 
.slider .col.izq .logoStarFeet { width: 220px;}
.slider .col.izq h1 { padding-left: 10px; color: #373535; margin: 0;  }

.slider .col.der h1 { color: #00000000; -webkit-text-stroke: 2px white; display: block;  }
.slider .col.der h1 span {
    font-size: 35px;
    font-style: normal;
    display: block;
    text-transform: math-auto;
    letter-spacing: 0;
    font-weight: 700;
    -webkit-text-stroke: 0px;
    color: white;
	
}

.slider .col.izq .productoStarFeet { 
	width: 270px;
	margin-right: -50px; 
}

.slider .col.der h1, 
.slider .col.izq h1 {
    position: absolute;
    font-weight: 900;
    font-style: italic;
    font-family: "acumin-pro";
    letter-spacing: -2px;
    font-size: 95px;
    text-transform: uppercase;
    margin: 0;
    line-height: 60px;
    top: 13%;
}


.slider .col.izq h3 { 
	
    color: #373535;
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    font-family: "acumin-pro-semi-condensed";
    margin-bottom: 0px;
    margin-left: 5px;
	margin-top: 150px;
	margin-right: 20px;
} 


.slider .col.izq button,
.readyButton {
    background: #32959d;
    border: none;
    font-weight: 700;
    border-radius: 25px;
    padding: 13px 30px;
    color: white;
    font-family: "acumin-pro-semi-condensed";
    font-size: 18px;
    text-transform: uppercase;
    position: relative;
    bottom: 40px;
	margin-right: 30px;
}

.readyButton { display: none;}

.slider .col.der { width: 52%; position: relative; font-size: 0;} 
.slider .col.der img { width: 100%; min-height: 740px;} 
.slider .col.der h1 {  left: 10px;} 
.slider .avoidMobile { display: none;} 
.slider {} 
.slider {} 
.slider {} 
.slider {} 




.frase { background: white; padding: 100px 0px; }
.frase h2 {
    color: #32959d;
    font-family: "acumin-pro-semi-condensed";
    font-weight: 700;
    font-size: 37px;
    letter-spacing: -1px;
    width: 770px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.frase h2 span { color:#090909; }





.howToUse { background: red; display: flex;    justify-content: space-around;}

.howToUse .video-responsive { margin-left: 0; margin-top: 3%;}

.howToUse .col { width: 50%;}
.howToUse .col.izq { width:  47%;}
.howToUse .col.der { width: 53%;}

.howToUse .col.der h1 { display: none;}

.howToUse .col.izq { 
	background: url("img/howToUseBG.jpg") #000 bottom center no-repeat; 
	background-size:  contain; 	 
	padding:210px 50px 400px; 
	min-height: 620px;
}
.howToUse .col.der { 
	background: #32959d; 
	padding: 160px 40px 50px 50px; 
}

.howToUse .izq h1,
.howToUse .der h1{ 
	padding-left: 10px; 
	font-size: 100px; 
	color: white; 
	margin: 0; 
	text-transform: uppercase; 
	line-height: 85px; 
	font-weight: 800; 
	font-style: italic;
	font-family: "acumin-pro-semi-condensed"; 
	letter-spacing: -2px;}

.howToUse .izq h1 span,
.howToUse .der h1 span{ 
	color: #000; 
	-webkit-text-stroke: 2px white; 
	display: block; 
	margin-left: -20px; }

.howToUse h5 {
	color: #181614;
    text-transform: inherit;
    font-weight: 800;
	margin: 0;
    font-size: 24px;
	font-family: "acumin-pro-semi-condensed";
    margin-bottom: 10px;
    margin-left: 5px;
	margin-top: 30px;


}
.howToUse .imgVideo {
    width: 520px;
    height: 330px;
    background: white;
    border-radius: 10px;
}
.howToUse h4 {
	color: #fff;
    text-transform: inherit;
    font-weight: 800;
	margin: 0;
    font-size: 30px;
	font-family: "acumin-pro-semi-condensed";
    margin-bottom: 20px;
    margin-left: 5px;
}


.howToUse li {
    list-style: none;
    margin-bottom: 10px;
    color: #e7eff0;
    line-height: 22px;
    font-size: 1em;
    font-weight: 300;
	padding-left: 30px;
	position: relative;
}

.howToUse li b { font-weight: 600;}
.howToUse li::before {
    content: '';
    display: inline-block;
    height: 25px;
    width: 28px;
    background: url(img/listItemOk.png) no-repeat 1px 7px;
    background-size: 20px;
    vertical-align: sub;
	position: absolute;
	left: 0px;
}

.howToUse {}
.howToUse {}
.howToUse {}
.howToUse {}




 .completeRecovery {
    clip-path: polygon(100% 90%, 100% 0%, 0% 0%, 0 90%, 70% 100%);
    background: url(img/completeRecovery02.jpg) no-repeat top center;
    background-size: cover;
    position: relative;
    min-height: 860px;
    padding-bottom: 30px;
    margin-bottom: -120px;
}

.completeRecovery::before {
    content: "";
    position: absolute;
    top: -5px;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color: #ffffff;
    clip-path: polygon(100% 90%, 100% 89%, 70% 99%, 0% 89%, 0% 90%, 70% 100%);
    z-index: -1;
}


.completeRecovery h1 {
    font-family: "acumin-pro";
    font-weight: 700;
    font-size: 59px;
    text-transform: uppercase;
    position: absolute;
    top: 50px;
    left: 50px;
    margin: auto;
    letter-spacing: -1px;
    line-height: 1.1em;
    color: white;
}

.completeRecovery h1 span {
    color: #373535;
    font-weight: 800;
    font-size: 44px;
    display: block;
    position: relative;
    top: -5px;
    left: 10px;
    letter-spacing: 0;
}


.completeRecovery .boxes {
    
    position: absolute;
    bottom: 140px;
    display: flex;
    width: 100%;
    justify-content: space-around;
	padding: 0 70px;
    box-sizing: border-box;
}


.completeRecovery .box h3 {
    font-family: "acumin-pro";
    font-weight: 800;
    font-size: 90px;
    color: white;
    margin: 0;
    line-height: 1em;
}

.completeRecovery .box {
    color: white;
    padding: 30px 20px 0 20px;
    width: 30%;
}

.completeRecovery .box p b { color: #000; font-weight: 800; }
.completeRecovery .box p {
	font-family: "acumin-pro-semi-condensed"; 
	font-weight: 700; 
	font-size: 31px;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.1em;
	text-shadow: 0px 0px 10px #894b42;
}

.completeRecovery {}



.frase01 { 
	background: white; 
	padding: 80px 150px 130px 250px;
 	clip-path: polygon(100% 90%, 100% 0%, 0% 0%, 0 90%, 70% 100%);
	margin-bottom: -70px;
	
}

.frase01 h2 { color: #090909; font-family: "acumin-pro-semi-condensed"; font-weight: 700;  font-size: 48px; letter-spacing: -2px; }
.frase01 h2 span { color:#32959d; }



.readyToBegin { background: url("img/readyToBeginBG.jpg") no-repeat center bottom; padding: 200px 130px 60px 130px; background-size: cover; }
.readyToBegin h1 { font-size: 77px; color: #32959d; margin: 0; text-transform: uppercase; line-height: 85px; font-weight: 800; font-style: italic;font-family: "acumin-pro-semi-condensed"; letter-spacing: -2px; margin-left: 20px;}
.readyToBegin .imgVideo { width: 520px; height: 330px; background: white; border-radius: 10px;}
.readyToBegin h2 { color: #181614; margin: 0;font-size: 37px;font-weight: 800;font-family: "acumin-pro-semi-condensed";margin-left: 20px; margin-bottom: 50px; }
.readyToBegin h3 { color: white; margin: 0;font-size: 36px;font-weight: 700;font-family: "acumin-pro-semi-condensed"; margin-bottom: 40px;text-transform: uppercase;
text-shadow: 0px 0px 5px #000;}

.readyToBegin .video { display: inline-block; margin-top: 20px; margin-right: 0px; margin-bottom: 40px; width: 45%;}

.readyToBegin .video .video-responsive {margin-left: 0; margin-top: 3%;}

.readyToBegin .video.izq {  margin-right: 80px; }
.readyToBegin h4 {  text-transform: uppercase;  color: white; margin: 0;font-size: 27px;font-weight: 600;font-family: "acumin-pro-semi-condensed"; margin-bottom: 10px; margin-left: 5px; }
.readyToBegin .videos h4 { color: #181614; text-transform: inherit;font-weight: 800; }
.readyToBegin .whiteBox { height: 100px; background: none; width: 100%; display: block;}
.readyToBegin p { font-size: 25px; color: white; font-weight: 700;font-family: "acumin-pro-semi-condensed";}

.textBox{ background: #595757; text-align: center; padding: 0 110px; } 
.textBox h2 { color: white; border: 4px solid #fff; padding: 70px 70px; margin: 100px auto; display: inline-block; font-size: 32px;}




.careInstructions { background: url("img/careInstructionsBG.jpg") no-repeat right top; background-size: cover; padding: 60px 90px 50px 0 ; text-align: right;}
.careInstructions h1 { font-size: 70px; color: white; margin: 0; text-transform: uppercase; line-height: 85px; font-weight: 800; font-style: italic;font-family: "acumin-pro-semi-condensed"; letter-spacing: -2px;} 
.careInstructions h2 {
	color: #000; 
	margin: 0;
	font-style: italic;
	font-size: 27px;
	font-weight: 700;
	font-family: "acumin-pro-semi-condensed";  
}

.careInstructions h2 br { display: none;}
.careInstructions ul { margin-top: 30px; width:500px; display: inline-block; }
.careInstructions li { 
	color: white; 
	margin-bottom: 30px; 
	font-family: "acumin-pro", sans-serif;
	font-size: 25px; 
	font-weight: 700; 
	text-align: left; 
	line-height: 34px;
	list-style: none; 
	position: relative;
	padding-left: 30px;
} 

.careInstructions li::before {
    content: '';
    display: inline-block;
    height: 25px;
    width: 28px;
    background: url(img/listItemOknegro.png) no-repeat 1px 10px;
    background-size: 20px;
    vertical-align: sub;
	position: absolute;
	left: 0px;
}




footer {
	background: #32959d;
	border-top: 2px solid #fff;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;

}

footer h1 { color: #fff; font-size: 1.5em;}
footer .logoBlancoStarFeet { width: 460px; display: block; margin: auto }

footer a img { width: 55px; margin: 0 5px;}



/**************************************************************************
***************************************************************************
***************************************************************************
***************************************************************************
***************************************************************************
***************************************************************************
***************************************************************************
***************************************************************************
***************************  Responsive  **********************************
***************************************************************************
***************************************************************************
***************************************************************************
***************************************************************************
***************************************************************************
***************************************************************************
***************************************************************************
**************************************************************************/




@media screen and (max-width: 1200px) {
	
	main { min-width: 1180px;}
	.frase h2 {      	}
	.slider .col.der {    height: 630px;    overflow: hidden;}
	.slider .col.der img { min-height: inherit; height: 100%; width: auto; }
	
	
	
	
	
	
	
	
} /* end max-width 1200 */






@media screen and (min-width: 1600px) {
	
	
	
	.slider .col {    max-height: 820px;}
	
	
	
} /* end min-width 1600 */







/*****************************************************************************************************************************************************
******************************************************************************************************************************************************
******************************************************************************************************************************************************
******************************************************************************************************************************************************
*************************************************************  M  O  B  I  L  E  *********************************************************************
******************************************************************************************************************************************************
******************************************************************************************************************************************************
******************************************************************************************************************************************************
*****************************************************************************************************************************************************/



@media (min-width:320px) and (max-width:961px) {
 
	footer { padding: 20px 0 30px 0;}
	footer .logoBlancoStarFeet {     max-width: 70%; width: 100%;} 
	footer a img { width: 10%; max-width: 70px; }
	footer h1 {    margin: 20px 50px 20px 50px; font-size: 1.2em;}
	footer h1 span {  white-space: nowrap;}
	
	main { min-width:inherit; width: 100%; }
	

	
	
	
	.frase01 { padding: 0;	}
	.frase01 h2 { font-size: 33px; padding: 40px 0 80px 0; margin: 0 50px;}
	.frase01 h2 br { display: none;}
	
.readyButton {
        display: block;
        position: absolute;
        bottom: 30px;
        right: 30px;
        margin: 0;
        text-decoration: none;
        padding: 10px 26px;
        font-size: 15px;
    }
	
	
	
	
	
	.readyToBegin { padding: 90px 30px 30px 30px;}
	.readyToBegin h1 { font-size: 42px; margin-left: 0; line-height: inherit;}
	.readyToBegin h2 { font-size: 22px; margin-left: 0; margin-bottom: 30px;}
	.readyToBegin h4 { font-size: 19px; margin-bottom:5px;}
	
	.readyToBegin .video { display: block; width: 100%;}
	.readyToBegin .video.izq { margin-right: inherit; }
	.readyToBegin .video .video-responsive { margin-top: 2%;}
	
	.readyToBegin .whiteBox {    height: 30px;}
	.readyToBegin h3 { font-size: 22px; color: #000;text-shadow: none; margin-bottom: 30px;  }
	.readyToBegin .pri h4 { color: #000;}
	
	.readyToBegin p {
        font-size: 21px;
        padding: 0 30px 0 15px;
        font-weight: 600;
        text-shadow: 0px 0px 5px #000;
    }
	
	.readyToBegin p span { white-space: nowrap;}
	
	
	
	
	
	.careInstructions { padding: 20px 30px 0 30px;}
	.careInstructions h1 { font-size: 34px; line-height: 25px;  padding-top: 30px; margin-bottom: 10px; letter-spacing: -1px; } 
	.careInstructions ul { width: inherit; margin: 30px 0 30px 20px; padding-left: 20px;}
	.careInstructions ul li { font-size: 18px; line-height: 24px;  }
	.careInstructions h2 { font-size: 19px;}
	.careInstructions h2 br { display: block;}
	.careInstructions {
    	background: url(img/careInstructionsBG.jpg) no-repeat right -490px top;
		background-size: cover;}
	
	
	.completeRecovery .box { width: 100%; padding: 0; margin-bottom: 15px;}
	.completeRecovery .boxes { 
		width: 80%; 
		display: flex;
		flex-direction: column; 
		padding: 0 ;
		bottom: 65px;
	}
	
	
	.completeRecovery .box p { font-size: 20px;}
	
	.completeRecovery .box h3 { 
		
    font-weight: 700;
    font-size: 95px;
    line-height: 0.9em;
    width: 67px;
    text-align: center;
    position: relative;
    bottom: 13px;
		float: left;}
	
	.completeRecovery { padding: 30px; 
		background: url(img/completeRecovery02.jpg) no-repeat bottom center; 
		background-size:  cover;
	
    clip-path: polygon(100% 95%, 100% 0%, 0% 0%, 0 95%, 70% 100%);}
	
	.completeRecovery::before { clip-path: polygon(100% 95%, 100% 94%, 70% 99%, 0% 94%, 0% 95%, 70% 100%);}
	
	
	.completeRecovery h1 {
        position: inherit;
        font-size: 30px;
        left: inherit;
        top: inherit;
    }
	
	.completeRecovery h1 span { font-size: 23px; left: 0; top:0;}
	
	
	
	
	
	
	
	
	
	
	
	
	.howToUse .col.der { width: 100%; padding-right: 30px; padding-left: 30px;}
	.howToUse .col.der h1 { display: block;
	font-size: 70px;
        line-height: 55px; margin-bottom: 30px;
	}
	.howToUse .col.izq { display: none;}
	.howToUse .der h1 span {    margin-left: -10px; -webkit-text-stroke: 1px white;}
	.howToUse h4 { font-size: 22px; margin-bottom: 13px;font-weight: 700;}
	
	.howToUse h5 { font-size: 20px; letter-spacing: -1px;  }
	.howToUse ul { padding-left: 8px;}
	.howToUse li { font-size: 0.9em; padding-right: 20px; line-height: 19px; padding-left: 27px;}
	.howToUse li::before {
		background-size: 17px;}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.textBox {    padding: 0 40px;}
	    .textBox h2 {
        border: 3px solid #fff;
        padding: 60px 50px;
        margin: 60px auto;
        font-size: 25px;
    }
	
	
	.frase { padding: 30px 0;}

	    .frase h2 {
        margin: 0;
        padding: 20px 55px;
        box-sizing: border-box;
        font-size: 26px;
			letter-spacing: -1px;
        width: inherit;
        left: inherit;
        position: inherit;
    }

	.frase h2 br { display: none;}
	
	.slider .col {display: none;}
	.slider { width: 100%; position: relative;}
	.slider .avoidMobile { display: block; width: 100%;} 
	
}