/**
* Main styles for Artico
* The Spring Labs
*/
@font-face {
	font-family:'CalvertMTStd-Regular';
	src: url('../fonts/CalvertMTStd_gdi.eot');
	src: url('../fonts/CalvertMTStd_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fonts/CalvertMTStd_gdi.woff') format('woff'),
		url('../fonts/CalvertMTStd_gdi.ttf') format('truetype'),
		url('../fonts/CalvertMTStd_gdi.otf') format('opentype'),
		url('../fonts/CalvertMTStd_gdi.svg#CalvertMTStd-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}

@font-face {
	font-family:'CalvertMTStd-Bold';
	src: url('../fonts/CalvertMTStd-Bold_gdi.eot');
	src: url('../fonts/CalvertMTStd-Bold_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fonts/CalvertMTStd-Bold_gdi.woff') format('woff'),
		url('../fonts/CalvertMTStd-Bold_gdi.ttf') format('truetype'),
		url('../fonts/CalvertMTStd-Bold_gdi.otf') format('opentype'),
		url('../fonts/CalvertMTStd-Bold_gdi.svg#CalvertMTStd-Bold') format('svg');
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}

@font-face {
	font-family:'CalvertMTStd-Light';
	src: url('../fonts/CalvertMTStd-Light_gdi.eot');
	src: url('../fonts/CalvertMTStd-Light_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fonts/CalvertMTStd-Light_gdi.woff') format('woff'),
		url('../fonts/CalvertMTStd-Light_gdi.ttf') format('truetype'),
		url('../fonts/CalvertMTStd-Light_gdi.otf') format('opentype'),
		url('../fonts/CalvertMTStd-Light_gdi.svg#CalvertMTStd-Light') format('svg');
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-25CA;
}
@font-face {
	font-family:'HelveticaNeue-Thin';
	src: url('../fonts/HelveticaNeue-Thin_gdi.eot');
	src: url('../fonts/HelveticaNeue-Thin_gdi.eot?#iefix') format('embedded-opentype'),
		url('../fonts/HelveticaNeue-Thin_gdi.woff') format('woff'),
		url('../fonts/HelveticaNeue-Thin_gdi.ttf') format('truetype'),
		url('../fonts/HelveticaNeue-Thin_gdi.otf') format('opentype'),
		url('../fonts/HelveticaNeue-Thin_gdi.svg#HelveticaNeue-Thin') format('svg');
	font-weight: 100;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+0020-2212;
}

html, body {
	font-family: Helvetica, sans-serif;
}

/*
	Containers
*/
#content-wrapper, #cleaning-process {
	height: 100%;
}
.scrollContainer {
/* 	overflow-y: scroll; */
	overflow-x: hidden;
	width: 100%
}
.scrollContainer {
	height: 100%;
	margin: auto;
}
#cleaning-process .scrollContent {
	height: 100%;
}

.horizontal.scrollContainer {
	overflow-y: hidden;
	overflow-x: scroll;
}
#cleaning-process.scrollContainer .scrollContent {
	width: 100%;
	height: auto;
}
#cleaning-process.scrollContainer.horizontal .scrollContent {
	width: auto;
	height: 100%;
}
#cleaning-process.horizontal {
	white-space: nowrap;
	font-size: 0;  /* fix for spaces between inline block divs */
}

.sections {
	position: relative;
	width: 100%;
/* 	overflow: hidden; */
}

.scene {
	width: 100%;
	height: 768px;
	position: relative;
/* 	background: transparent url("../images/scene1.png") repeat-x scroll 50% */
/* 		0px/auto 768px; */
		
/* 		background:transparent url("../images/svg/scene1.svg") repeat-x scroll 50% */
/* 		0px/auto 768px; */
}

#scene1 {
	background-size: 1920px auto;
	background-position: 50% 0px;
	height: 1200px;
/* 	background-color: #F5F5F5; */
	background:#F5F5F5 url("../images/svg/scene1.svg") repeat-x scroll 50%
		0px/auto 1200px;
}

#scene2 {
	background-size: 1920px auto;
	background-position: 50% 0px;
/* 	background-image: url("../images/scene2.png"); */
	background-image:url("../images/svg/mesa_2_fondo.svg");
	height: 1662px;
}

#scene3 {
	background-size: 1920px auto;
	background-position: 50% 0px;
	background-image: url("../images/svg/mesa_3_fondo-01.svg");
	height: 1050px;
	z-index: 20;
	top: -231px;
}

#scene4 {
	background-size: 1920px auto;
	background-position: 50% 0px;
	background-image: url("../images/svg/scene4.svg");
	height: 430px;
	z-index: 20;
	top: 0px;
	
}

.dirty-shirt {
	left: 50%;
    margin-left: -77px;
	width: 155px;
	height: 179px;
    position: absolute;
    z-index: 18;
    background: transparent url("../images/svg/dirty-shirt.svg") no-repeat scroll 0px 0px / 100% auto;
    top: 382px;
}

.washing-machine {
	left: 50%;
	bottom: -790px;
	margin-left: -845px;
	position: absolute;
	z-index: 20;
	background: transparent url("../images/svg/washing-machine.svg") no-repeat scroll 0px 0px / 100% auto;
	width: 1801px;
	height: 623px;
}

.whasing-machine-door{
	left: 50%;
	bottom: -976px;
	margin-left: -338px;
	width: 675px;
	height: 675px;
	position: absolute;
	z-index: 21;
	background: transparent url("../images/svg/whasing-machine-door.svg") no-repeat
		scroll 0px 0px/100% auto;
}

.whasing-machine-oppener{
	left: 50%;
	bottom: -962px;
	margin-left: -225px;
	width: 650px;
	height: 650px;
	position: absolute;
	z-index: 21;
	background: transparent url("../images/svg/whasing-machine-oppener.svg") no-repeat
		scroll 0px 0px/100% auto;
}

.whasing-machine-led{
	left: 50%;
	bottom: -447px;
	margin-left: 95px;
	width: 62px;
	height: 62px;
	position: absolute;
	z-index: 21;
	background: transparent url("../images/svg/led-orange.svg") no-repeat
		scroll 0px 0px/100% auto;
}

.whasing-machine-led-green{
	left: 50%;
	bottom: -447px;
	margin-left: 95px;
	width: 62px;
	height: 62px;
	position: absolute;
	z-index: 21;
	background: transparent url("../images/svg/led-blue.svg") no-repeat
		scroll 0px 0px/100% auto;
/* 	opacity: 0; */
}

.dirty-clothes {
  	left: 50%;
	bottom: -736px;
	margin-left: -210px;
	width: 419px;
	height: 404px;
	position: absolute;
	z-index: 20;
	background: transparent url("../images/dirty-clothes.png") no-repeat
		scroll 0px 0px/100% auto;
}

.wrinkled-shirt {
  	left: 50%;
	bottom: -675px;
	margin-left: -77px;
	width: 155px;
	height: 181px;
	position: absolute;
	z-index: 18;
	background: transparent url("../images/svg/wrinkled-shirt.svg") no-repeat
		scroll 0px 0px/100% auto;
}

.ironing-table-first-segment{
	left: 50%;
	bottom: 0px;
	margin-left: -149px;
	height: 543px;
	width: 298px;
	position: absolute;
	z-index: 17;
	background: transparent url("../images/svg/ironing-table-first.svg") no-repeat scroll 0px 0px / 100% auto;
}

.ironing-table-second-segment{
	left: 50%;
	bottom: -489px;
	margin-left: -149px;
	height: 490px;
	width: 298px;
	position: absolute;
	z-index: 21;
	background: transparent url("../images/svg/ironing-table-second.svg") no-repeat scroll 0px 0px / 100% auto;
}

.ironing-machine{
	left: 50%;
	bottom: -472px;
	margin-left: -151px;
	width: 958px;
	height: 695px;
	position: absolute;
	z-index: 22;
	background: transparent url("../images/svg/ironing-machine.svg") no-repeat
		scroll 0px 0px/100% auto;
	-ms-transform: rotate(7deg); /*IE 9*/
	-webkit-transform: rotate(7deg); /*Chrome, Safari, Opera*/
	transform: rotate(-18deg);
}

.ironed-shirt {
  	left: 50%;
	top: -235px;
	margin-left: -91px;
	width: 184px;
	height: 179px;
	position: absolute;
	z-index: 21;
	background: transparent url("../images/svg/ironed-shirt.svg") no-repeat
		scroll 0px 0px/100% auto;
}

.artico-bag{
	left: 50%;
	top: 0px;
	margin-left: -115px;
	width: 232px;
	height: 310px;
	position: absolute;
	z-index: 23;
	transform: translateY(1470px);
	-webkit-transform: translateY(1470px);
	background: transparent url("../images/svg/artico-plastic-bag.svg") no-repeat
		scroll 0px 0px/100% auto;
}

.scroll-indicator{
	left: 50%;
	bottom: 1em;
	margin-left: -14px;
	width: 28px;
	height: 47px;
	position: fixed;
	z-index: 23;
	background: transparent url("../images/svg/scroll.svg");
		
	-webkit-animation: play .8s steps(3) infinite;
       -moz-animation: play .8s steps(3) infinite;
        -ms-animation: play .8s steps(3) infinite;
         -o-animation: play .8s steps(3) infinite;
            animation: play .8s steps(3) infinite;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -84px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -84px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -84px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -84px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -84px; }
}



/* .pin { */
/* 	background: blue; */
/* 	color: white; */
/* } */

/* .tween { */
/* 	outline: 1px dashed rgba(0, 0, 0, 0.2); */
/* } */

/* Footer styles*/

.footer{
	width: 100%;
	height: 270px;
	background-color: #FFF;
	z-index: 24;
	bottom: 0;
	position: relative;
}



.copyright{
	font-family: 'HelveticaNeue-Thin';
	-ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    color: #717171;
    position: absolute;
	bottom: 14em;
	left: -130px;
	font-size: 10pt;
	z-index: 27;
	width: 316px;
}

.footer_info{
	position: absolute;
	z-index: 999;
	bottom: 10px;
	height: 368px;
}

.footer_info_right{
	position: absolute;
	z-index: 999;
	bottom: 58px;
	right: 0px;
}

.bottom{
	height: 36px;
	width: 100%;
	bottom: -3678px;
	position: absolute;
	background-color: #FFFFFF;
	z-index: 28;
}


.menu{
	text-align: center;
}
.menu nav{
	padding: 0;
	margin-top: 3em;
}

.menu nav ul{
	padding: 0;
	list-style: none;
	
}
.menu nav li{
	margin: 1em;
}
.menu nav li span{
	font-family: 'CalvertMTStd-Bold';
	cursor: pointer;
	font-size: 12pt;
}

.menu nav li span > span{
	line-height: 10px;

	}

/* .menu nav li span:hover{ */
/* 	background-color: #2af2f1; */
/* } */


.menu nav li span:hover{
	background-color: #2af2f1;

}

.artico-logo{
	text-align: right;
/* 	margin-top: 250px; */
	margin-right: 5em;
}

.artico-logo img{
	width: 320px;
}

.share_div{
	font-family: "HelveticaNeue-Thin";
	transform: rotate(-90deg);
	color: #717171;
	position: fixed;
	bottom: 3em;
	left: 5px;
	font-size: 10pt;
	z-index: 27;
}

.vilivers{
	margin-left: 3em;
}

.vilivers a{
	text-decoration: underline;
}

.vilivers a:hover{
	text-decoration: none;
/* 	color: #030303; */
}
.vilivers a:visited{
	color: black;
}

.go-to-top{
	position: absolute;
	bottom: 49px;
	left: 3em;
	width: 23px;
	height: 50px;
	background: transparent url("../images/up.png") no-repeat;
	background-size: 23px 50px;
	cursor:pointer;
}
.go-to-top:hover{
	background: transparent url("../images/up-hover.png") no-repeat;
	background-size: 23px 50px;
}



.share{
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
	width: 64px;
	height: 64px;
	background: transparent url("../images/share.png") no-repeat;
	background-size: 64px 64px;
	position: absolute;
	top: -8px;
	left: 337px;
	border: medium none;
}

.share:hover{
	background: transparent url("../images/share-hover.png") no-repeat;
	background-size: 64px 64px;
}

.share-hover{
	background: transparent url("../images/share.png") no-repeat;
	background-size: 64px 64px;
}

.share:active,
.share:focus,
.share.active {
/*   background-image: none; */
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.share-grid{
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
	width: 110px;
/* 	height: 30px; */
/* 	background: transparent url("../images/share-grid.png") no-repeat scroll 0% 0% / 110px 30px; */
	position: absolute;
	top: 89px;
	left: 354px;
	display: none;
}

.share:hover + .share-grid{
	display: block;
}

.share-grid:hover{
	display: block;
}

/* jQuery enabled behavior for mobile */
.touch .share.no-hover .details {
	display: none !important;	
}

.twitter{
	width: 35px;
	height: 35px;
	background: transparent url("../images/share_twitter_gris.png") no-repeat;
	background-size: 35px 35px;
	position: absolute;
	left: 96px;
}

.facebook{
	width: 35px;
	height: 35px;
	background: transparent url("../images/share_facebook_gris.png") no-repeat;
	background-size: 35px 35px;
	position: absolute;
	left: 0;
}

.pinterest{
	width: 35px;
	height: 35px;
	background: transparent url("../images/share_pinterest_gris.png") no-repeat;
	background-size: 35px 35px;
	position: absolute;
	left: 32px;
}

.google-plus{
	width: 35px;
	height: 35px;
	background: transparent url("../images/share_google_gris.png") no-repeat;
	background-size: 35px 35px;
	position: absolute;
	left: 64px;
}


.twitter:hover{
	background: transparent url("../images/share_twitter_azul.png") no-repeat;
	background-size: 35px 35px;
}

.facebook:hover{
	background: transparent url("../images/share_facebook_azul.png") no-repeat;
	background-size: 35px 35px;
}

.pinterest:hover{
	
	background: transparent url("../images/share_pinterest_azul.png") no-repeat;
	background-size: 35px 35px;
}

.google-plus:hover{
	background: transparent url("../images/share_google_azul.png") no-repeat;
	background-size: 35px 35px;
}


/* Prices grid */
.row{
	width: 100%;
	text-align: center;
	margin: 2em 0;
}

.col{
	vertical-align:top;
	position: relative;
	display: inline-block;
	top: 0px;
	width: 28%;
/* 	clear: none; */
	margin-left: 0;
	text-align: left;
	font-size: 10pt;
	margin-bottom: 4em;
}

.col > p{
	font-family:'CalvertMTStd-Regular';
	line-height: 1.6em;
	margin-bottom: 3em;
	
}

.col > p > span{
	font-family:'CalvertMTStd-Light';
}

.img-basico{
	height: 34px;
}

.img-alfombras{
	height: 35px;
}

.img-ropa-hogar{
	height: 30px;
}
.img-pieles{
	height: 46px;
}
.img-vestidos-especiales{
	height: 35px;
}
.img-servicio-lavanderia{
	height: 43px;
}

.fix-top{
	margin-top: 3px;
}

.artico-logo-popup{
	text-align: right;
	margin-right: 5em;

}

.artico-logo-popup img{
	width: 217px;
	margin-top: 66px;
}

.contact{
	top: 7em;	
}

.contact .col p{
	font-family:'CalvertMTStd-Regular';
	line-height: 1.6em;
	margin-bottom: 2em;
	
}

.newsletter label{
	margin-bottom: 1em;
	font-family: "CalvertMTStd-Regular";
	display: block;
}

.newsletter input[type=email]{
	border: 3px solid #2AF2F1;
	background-color: transparent;
	font-family: "CalvertMTStd-Regular";
	height: 40px;
	width: 100%;
	max-width: 223px;
	padding: 0 75px 0 7px;
	display: block;
}

.newsletter button{
	position: relative;
	top: -31px;
	left: 240px;
	font-family: "CalvertMTStd-Regular";
	background: transparent;
	border: none;
	color: #B3B3B3;
	line-height: 9px
}

.newsletter button:hover{
	color: #2AF2F1;
}

.newsletter .span-button{
	position: relative;
	top: -27px;
	left: 240px;
	font-weight: 800;
	font-size: 18pt;
	color: #2AF2F1;
	line-height: 0px
}

.mail{
	text-decoration: underline;
	color: #000;
}

.tel{
	font-family:'CalvertMTStd-Bold';
	color: #000;
}

.map{
	font-family:'CalvertMTStd-Bold';
	text-decoration: underline;
	color: #000;
	margin-bottom: 3em;
}

.mail:hover{
	text-decoration: none;
	color: #2af2f1;
}

.tel:hover{
	
	color: #2af2f1;
}

.map:hover{
	text-decoration: none;
	color: #2af2f1;
}

.map-div{
	margin: 2em 0 5em;
}

.mail-div{
	margin: 2em 0 5em;
}


/* .go-to-top img{ */
/* 	width: 23px; */
/* 	height: 50px; */
/* } */

.block-content{
	display: none;
}


.share:hover, .share:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none;
}


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #000;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #000;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #000;
}

form input:focus{
	outline-width: 0;
}

form:invalid input {
    border: 3px solid #B3B3B3 !important;
    box-shadow: none;
} 

@media screen and (max-width: 870px) {
	
	html, body {
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
	}

	body > div {
	    height: 100%;
	    overflow: scroll;
	    -webkit-overflow-scrolling: touch;
	}
	
	.row{
		margin: 0em;
	}
	.col{
		width: 100%;
		margin: 0em;
		padding: 0 0 0 2em;
	}
	
	.col:last-child{
		margin-bottom: 8em;
	}
	
	
	.artico-logo-popup{
		text-align: right;
		margin-right: 0 auto;
	}
	
	.go-to-top{
		display: none;
	}
	
	
/* 	.footer_info_right { */
/* 		width: 100%; */
/* 		position: relative; */
/* 	} */
	
	.artico-logo {
    	text-align: center;
    	width: 100%;
	}
	
	.newsletter input[type=email]{
		max-width: 190px;
		padding: 0 75px 0 7px;
	}
	.newsletter button{
		left: 210px;
	}
	.newsletter .span-button{
		left: 210px;
	}
	
	.copyright{
		left:-145px;
	}
	.share{
		top:-22px;
	}
	.share-grid{
		top: 74px;
	}
	
	.overlay .overlay-close {
    	left: 2px !important;
		top: 3px !important;
	}
}