@CHARSET "UTF-8";
@media screen, projection {
	
	div.defaultBg { 
    	width: 100%;
    	min-height: 200px;
    	padding: 30px 0;
    	display: inline-block;
    	background: url(../img/promoBg.png) repeat;
    }
    
    	div.defaultBg div.photo a img {
    		margin: 0 20px 20px 0;
    		max-width: 100%;
			height: 100%;
    	}
    	
    	div.defaultBg div.photo {
    		float: left;
    		text-align: center;
    	}
    	
    	div.defaultBg + div.defaultBg div.photo { 
    		float: right;
    	}
    	
    	div.defaultBg + div.defaultBg div.photo a img {
    		margin: 0 0 20px 20px;
    	}
    	
    	div.defaultBg div.txt {
    		font-size: 24px;
    		line-height: 28px;
    		text-align: justify;
    	}
    	
    		div.defaultBg p a.button {
    			font-size: 18px;
    			line-height: 30px;
    			padding: 5px 15px 5px 15px;
    			text-align: center;
    		}
    	
    	div.defaultBg ul {
    		display: inline-block;
    		margin-top: 25px;
    	}
    	
    	div.defaultBg ul li {
			font-size: 18px;
			text-align: justify;
			line-height: 28px;
			position: relative;
			display: block;
		}
	
		div.defaultBg ul li {
			padding-left: 25px;
			margin-bottom: 10px;
			text-align: left;
		}
	
		div.defaultBg ul li:before {
			content: '•';
			font-size: 25px;
			color: #ec2a32;
			position: absolute;
			top: 0;
			left: 0;
		}
		
	div.boxes {
		margin: 140px auto 50px auto;
		display: flex;
		flex-wrap: wrap;
	}
	
		div.boxes div.box {
			max-width: 30%;
			position: relative;
			width: 100%;
			height: 270px;
			margin: auto auto;
			text-align: center;
			box-sizing: border-box;
		}
	
		div.boxes div.box::after {
			bottom: 0;
			right: 0;
			border-right: 1px solid #4d4e50;
			border-bottom: 1px solid #4d4e50;
		}
		
		div.boxes div.box::before,
		div.boxes div.box::after {
			content: '';
			position: absolute;
			width: calc(100% - 50px);
			height: calc(100% - 50px);
			transition: .33s all ease;
			box-sizing: border-box;
		}
		
		div.boxes div.box::before {
			top: 0;
			left: 0;
			border-left: 1px solid #4d4e50;
			border-top: 1px solid #4d4e50;
		}
		
		div.boxes div.box:hover::before, 
		div.boxes div.box:hover::after {
   			width: 100%;
    		height: 100%;
   		 	border-color: #e11414;
		}
		
		div.boxes a {
			color: #4d4e50;
			display: block;
			width: 100%;
			height: 100%;
			transition: .33s all ease;
		}

			div.boxes a:hover span {
				padding: 115px 0 0 0;
				transition: .33s all ease;
			}
		
			div.boxes a span {
				padding: 120px 0 0 0;
				display: block;
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				z-index: 100;
				font-size: 24px;
				font-weight: 700;
				box-sizing: border-box;
				transition: .33s all ease;
			}
		
		div.boxes a:hover span {
			background-position: center 40px !important;
			transition: .33s all ease;
		}
		
		div.boxes a span::after {
			position: absolute;
			content: '';
			border: 1px solid #e11414;
			width: 60px;
			left: calc(50% - 30px);
			bottom: 105px;
			transition: .33s all ease;
		}
		
		div.boxes a:hover span::after {
			width: 100px;
			transition: .33s all ease;
			left: calc(50% - 50px);
		}
		
		div.boxes a p {
			font-weight: 300;
			font-size: 18px;
			max-width: 220px;
			text-align: center;
			position: absolute;
			bottom: 40px;
			left: calc(50% - 110px);
			line-height: 22px;
			transition: .33s all ease;
		}
		
		div.boxes a:hover p { 
			bottom: 35px;
			transition: .33s all ease;
		}
		
		div.whyus ul {
			display: flex;
			flex-wrap: wrap;
		}
		
		div.whyus ul li {
			width: 50%;
			max-width: 50%;
			min-height: 140px;
			padding: 0 15px 0 120px;
			position: relative;
			box-sizing: border-box;
			display: inline-block;
			margin-top: 30px;
		}
		
			div.whyus ul li::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				background: url(../img/spritesMP.png) no-repeat 0 0;
				width: 106px;
				height: 100px;
			}
			
			div.whyus ul li.whyus2::before {
				background-position: 5px -127px;
			}
			
			div.whyus ul li.whyus3::before {
				background-position: 0 -247px;
			}
			
			div.whyus ul li.whyus4::before {
				background-position: 10px -374px;
			}
		
		div.whyus ul li strong {
			font-size: 30px;
			font-weight: 400;
			line-height: 40px;
			transition: .33s all ease;
		}
			div.whyus ul li:hover strong {
				color: #e11414;
				transition: .33s all ease;
			}
		
		div.whyus ul li:hover::before {
			animation: shake 0.2s;
			filter: blur(1px);
		}
		
		div.whyus ul li:hover {
			transition: .33s all ease;
			cursor: default;
		}
		
		div.whyus ul li:hover::after {
			content: '';
			position: absolute;
			right: 65px;
			top: -30px;
			background: url(../img/sprites.png) no-repeat 0 -381px;
			width: 112px;
			height: 74px;
			transition: .33s all ease;
		}
		
		div.whyus ul li p {
			font-weight: 300;
			font-size: 18px;
			margin-top: 10px;
			line-height: 25px;
			max-width: 80%;
		}
		
	div.testimonials {
		background: url(../img/testimonialsBg.jpg) no-repeat center left;
		width: 100%;
		height: 496px;
	}	
	
		div.testimonials h2 {
			color: #fff;
		}
		
		div.testimonials div.wrapper {
			padding-top: 30px;
		}
	
	div.testimonials ul.slides {
		margin: 50px 0 0 60px;
		box-sizing: border-box;
	}
		
	div.testimonials ul.slides li {
		width: 450px;
		min-height: 350px;
		height: 100%;
		background: none;
	}	
		div.testimonials ul.slides li div.testimonial {
			border: 1px solid #fff;
			min-height: 185px;
			padding: 20px 20px;
			box-sizing: border-box;
			width: 80%;
			position: relative;
			transition: .33s all ease;
		}
			div.testimonials ul.slides li div.testimonial::before {
				content:'';
				background: url(../img/sprites.png) no-repeat -190px -1px;
				width: 40px;
				height: 32px;
				position: absolute;
				top: -11px;
				left: 20px;
			}
			
			div.testimonials ul.slides li div.testimonial::after {
				content:'';
				background: url(../img/sprites.png) no-repeat -54px -158px;
				width: 20px;
				height: 12px;
				position: absolute;
				bottom: -12px;
				left: 50px;
				transition: .1s all cubic-bezier(.68,-0.55,.27,1.55);
			}
		
			div.testimonials ul.slides li div.testimonial p {
				font-weight: 300;
				font-size: 18px;
				line-height: 25px;
				color: #fff;
				margin-top: 10px;
			}
			
			div.testimonials ul.slides li div.testimonial p strong {
				font-weight: 400;
				font-size: 24px;
			}
			
			div.testimonials ul.slides li div.author {
				position: relative;
				bottom: -20px;
				left: 25px;
				color: #fff;
				font-weight: 400;
				font-size: 18px;
				padding: 15px 0 0 80px;
			}
			
				div.testimonials ul.slides li div.author p {
					font-weight: 300;
					font-size: 14px;
				}
			
			div.testimonials ul.slides li div.author::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 70px;
				height: 70px;
				background: #fff url(../img/sprites.png) no-repeat -176px -35px;
				border-radius: 50%;
			}
			
			div.testimonials ul.slides li div.author.female::before {
				background-position: -176px -102px;
			}
			
			div.testimonials ul.slides li div.testimonial:hover {
				transition: .33s all ease;
				border: 1px solid #e11414;			
			}
			
			div.testimonials ul.slides li div.testimonial:hover::before {
				animation: shake 0.2s;
			} 
			
			div.testimonials ul.slides li div.testimonial:hover::after {
				background-position: -82px -158px;
				transition: .1s all cubic-bezier(.68,-0.55,.27,1.55);
			} 
			
	section.promo {
		margin-top: 50px;
	}
		
	section.promo h5 {
		font-size: 36px;
	}	
	
	section.promo h5::after {
		top: 45px;
		width: 70px;
	}
	
	section.promo ul.slides {
		margin: 40px auto 0 auto;
		box-sizing: border-box;
		display: block;
	}
	
	section.promo ul.slides li {
		margin: 0 42px 0 0;
		width: 262px !important;
	}
	
	section.promo ul.slides li:last {
		margin-right: 0;
	}
	
	div.boxesMP {
		margin: 40px auto 50px auto;
		display: flex;
		flex-wrap: wrap;
	}
	
		div.productMP {
			position: relative;
			width: 262px;
			height: 320px;
			border: 1px solid #4D4E50;
			box-sizing: border-box;
			margin: 30px auto 20px auto;
			padding: 0;
			transition: .33s all ease;
			overflow: hidden;
			background-color: #fff;
			z-index: 101;
			text-align: center;
		}
			div.productMP span.promo {
				position: absolute;
				top: 10px;
				right: 0;
				width: 100px;
				background: #e11414 url(../img/sprites.png) no-repeat 105px -527px;
				opacity: 0.8;
				font-size: 14px;
				font-weight: 700;
				color: #fff;
				padding: 5px 25px 5px 10px;
				z-index: 102;
			}
			
			div.productMP span.price {
				position: absolute;
				bottom: 0px;
				right: 0;
				width: 100%;
				background-color: #4D4E50;
				opacity: 0.8;
				font-size: 16px;
				font-weight: 700;
				color: #fff;
				padding: 5px 0;
				z-index: 102;
				text-align: center;
			}
			
				div.productMP span.price span {
					text-decoration: line-through;
				}
			
				div.productMP:hover span.price {
					background-color: #e11414;
				}
			
				div.productMP span.price small {
					font-size: 12px;
					font-weight: 300;
					display: block;
				}
		
			div.productMP:hover {
				transition: .33s all ease;
				background-color: #f6f6f6;
			}
		
			div.productMP a {
				display: block;
				width: 100%;
				height: 100%;
			}
			
			div.productMP img {
				transition: .33s all ease;
				margin-top: 0;
			}
			
			div.productMP:hover img {
				transition: .33s all ease;
				transform: scale(1.1);
				margin-top: -8px;
			}
			
			div.productMP strong {
				font-weight: 400;
				font-size: 18px;
				padding: 0 10px;
				margin-top: 5px;
				display: inline-block;
				transition: .33s all ease;
			}
			
				div.productMP:hover strong {
					transition: .33s all ease;
					color: #e11414;
					margin-top: 13px;
				}
			
			div.productMP p {
				font-weight: 300;
				font-size: 15px;
				margin: 10px 0 0 0;
				padding: 0 10px;
				line-height: 19px;
			}
			
	div.teaser {
		margin-top: 140px;
	}
		div.teaser p {
			line-height: 26px;
			text-align: justify;
			font-size: 18px;
		}
		
		div.teaser + div.boxes {
			margin-top: 50px;
		}	
			
}

@media all and (max-width: 1250px) {
	div.whyus ul li:hover::after {
		display: none;
	}
}

@media all and (max-width: 1000px) {
	div.testimonials ul.slides {
		margin-left: 45px; 
	}
}

@media all and (max-width: 900px) {
	div.boxes {
		margin-top: 120px;
	}
	
	div.boxes div.box {
		max-width: 300px;
		margin-top: 50px;
	}
	
	div.whyus ul li {
		width: 100%;
		max-width: 100%;
	}
	
	div.defaultBg div.photo {
   		float: none;
   	}
   	
   	div.defaultBg div.photo a img {
   		margin: 0 0 20px 0;
   	}
   	
   	div.defaultBg + div.defaultBg div.photo { 
   		float: none;
   	}
    	
   	div.defaultBg + div.defaultBg div.photo a img {
   		margin: 0 0 20px 0;
   	}
   	
   	div.defaultBg h2 {
   		font-size: 25px;
   	}
   	
   	div.defaultBg h2:after {
   		top: 35px;
   		width: 50px;
   	}
}

@media all and (max-width: 700px) {
	div#jssor_1 {
		display: none;
	}
	
	div#sliderReplacement {
		display: block !important;
		overflow: hidden;
		position: relative;
		top: 100px;
		width: 100%;
		max-height: 600px;
	}

	div#sliderReplacement img {
		height: auto;
		max-width: 100%;
		display: block;
	}
	
	div#sliderReplacement div {
		position: absolute;
		top: 40px;
		left: 0;
		font-weight: 400;
		font-size: 21px;
		text-transform: uppercase;
		background-color: #4d4e50;
 		color: #fff;
 		padding: 6px 8px;
 		opacity: 0.9;
 		text-align: center;
 		width: 100%;
 		display: inline-block;
 		min-width: 400px;
	}
	
	div.boxes div.box {
		max-width: 250px;
	}
	
	section.promo h5 {
		font-size: 24px;
	}
	
		section.promo h5::after {
			width: 50px;
			top: 30px;
		}
		
	div.defaultBg div.txt {
   		font-size: 18px;
   		line-height: 21px;
   	}	
}

@media all and (max-width: 550px) {
	div.boxes div.box {
		max-width: 300px;
		margin-top: 20px;
	}
	
	div.testimonials ul.slides {
		margin-left: 25px;
	}
	
	div.testimonials ul.slides li div.testimonial p strong { 
		font-size: 18px;
	}
	
	div.testimonials ul.slides li div.testimonial p {
		font-size: 14px;
		line-height: 20px;
	}
}

@media all and (max-width: 500px) {
	div#sliderReplacement div {
		font-size: 18px;
	}
	
	h1 {
		font-size: 21px;
	}
	
		h1::after {
			width: 50px;
			top: 35px;
		}
}

@media all and (max-width: 400px) {
	div#sliderReplacement div {
		font-size: 14px;
	}
	
	div.whyus ul li strong {
		font-size: 18px;
		line-height: 20px;
	}
	
	div.whyus ul li p {
		font-size: 14px;
	}
	
	div.whyus ul li::before {
		background-size: 70%;
		height: 70px;
	}
	
		div.whyus ul li.whyus2::before {
			background-position: 5px -87px;
		}
		
		div.whyus ul li.whyus3::before {
			background-position: 0 -174px;
		}
		
		div.whyus ul li.whyus4::before {
			background-position: 10px -260px;
		}
		
	div.whyus ul li {
		padding-left: 85px;
	}
}

@media all and (max-width: 350px) {
	div#sliderReplacement div {
		font-size: 11px;
	}
	
	div.testimonials ul.slides li div.author {
		padding-left: 0;
	}
	
	div.testimonials ul.slides li div.author::before {
		display: none;
	}
}