@charset "UTF-8";

div.slider { height: 411px; user-select: none; position: relative; }
div.slider > div { height: 411px; position: relative; overflow: hidden; width: 100%; }
div.slider > div > div { display: none; }
div.slider > div > div.act { display: block; overflow: visible; }
 
div.slider > div > div > p { color: #706F6F; font-weight: 300;  }
div.slider > div > div > p.caption { color: #3C3C3B; font-weight: 500; }
div.slider > div > div > p.download { }
div.slider > div > div > p.download a { display:inline-block; color: white; background-color: #3CAA36; font-weight: 500; text-decoration: none; vertical-align: middle; }
 
@media only screen and (min-width:660px) {
	@media only screen and (max-width:989px) {
		div.slider > div > div { position: absolute; left: 20px; top: 0; width: 640px; bottom: 0; }
	}
	
	@media only screen and (min-width:990px) {
		div.slider > div > div { position: relative; max-width: 990px; height: 411px; margin: 0 auto; }
	}

	div.slider > div > div > p { font-size: 25px; line-height: 30px; padding: 10px 0 10px 0; }
	div.slider > div > div > p.caption { font-size: 37px; margin: 0; padding: 80px 0 15px 0; }
	div.slider > div > div > p.download { margin: 0; padding: 30px 0 10px 0; }
	div.slider > div > div > p.download a { border-radius: 27px; height: 54px; line-height: 54px; padding: 0 23px 0 23px; font-size: 24px; }

	div.slider > div > div > p.back-left img { position: absolute; right: 640px; bottom: 0; }
	div.slider > div > div > p.back-right img { position: absolute; left: 640px; bottom: 0; }

	@media only screen and (max-width:800px) {
		div.slider > div > div { left: 20px; top: 0; width: 440px; bottom: 0; }
		
		div.slider > div > div > p { font-size: 20px; line-height: 29px; margin: 0; padding: 10px 0 10px 0; }
		div.slider > div > div > p.caption { font-size: 20px; line-height: 24px; margin: 0; padding: 80px 0 15px 0; }
		div.slider > div > div > p.download { margin: 0; padding: 30px 0 10px 0; }
		div.slider > div > div > p.download a { border-radius: 17px; height: 30px; line-height: 30px; padding: 2px 22px; font-size: 17px; }
	
		div.slider > div > div > p.back-left img { right: 440px; }
		div.slider > div > div > p.back-right img { left: 440px; }
	}
	
	div.slider > ul { position: absolute; list-style: none; margin: 0; bottom: 0; padding: 0 0 25px 0; left: 0; right: 0; text-align: center; }
	div.slider > ul li { display: inline-block; width: 10px; height: 10px; margin: 5px; border-radius: 5px; box-shadow: inset 0 0 2px #666666; background-color: #C0C3C6; cursor: pointer; }
	div.slider > ul li.act { background-color: #939393; }
}

@media only screen and (max-width:659px) {
	div.slider > div > div { padding: 0 20px 0 20px; }
	
	div.slider > div > div > p { font-size: 20px; line-height: 29px; margin: 13px 36px 17px 36px; padding: 0; text-align: center; }
	div.slider > div > div > p.caption { font-size: 20px; line-height: 24px; margin: 13px 36px 13px 36px; padding: 0; text-align: center; }
	div.slider > div > div > p.download { margin: 17px 0 10px 0; padding: 0; text-align: center; }
	div.slider > div > div > p.download a { border-radius: 17px; height: 30px; line-height: 30px; padding: 2px 22px; font-size: 17px; }
	
	div.slider > div > div > p.back-left { margin: 0; padding: 0; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 165px; text-align:center; overflow: hidden; }
	div.slider > div > div > p.back-left img { height: 165px; }
	div.slider > div > div > p.back-right { margin: 0; padding: 0; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 165px; text-align:center; overflow: hidden; }
	div.slider > div > div > p.back-right img { height: 165px; }
	
	div.slider > ul { position: absolute; list-style: none; margin: 0; padding: 0; bottom: -40px; left: 0; right: 0; text-align: center; }
	div.slider > ul li { display: inline-block; width: 10px; height: 10px; margin: 10px; border-radius: 5px; box-shadow: inset 0 0 2px #666666; background-color: #C0C3C6; cursor: pointer; }
	div.slider > ul li.act { background-color: #939393; }
}

/* SLIDER-LISTS-TILES */

div.slider-v3 { position: relative; user-select: none; }
div.slider-v3 > h2 { font-weight: 500; color: #3C3C3B; text-align: center; position: relative; }

div.slider-v3 > h2 > a { display: block; position: absolute; background-position: center center; background-repeat: no-repeat; cursor: pointer; }
div.slider-v3 > h2 > a.lists { background-image: url('sort-list.svg'); }
div.slider-v3 > h2 > a.lists.act { background-image: url('sort-list-a.svg'); }
div.slider-v3 > h2 > a.tiles { background-image: url('sort-tiles.svg'); }
div.slider-v3 > h2 > a.tiles.act { background-image: url('sort-tiles-a.svg'); }
div.slider-v3 > a { position: absolute; top: 50%; background-repeat: no-repeat; background-position: center center; cursor: pointer; }

@media only screen and (min-width:990px) {
	div.slider-v3 { width: 990px; margin: 0 auto; }
	div.slider-v3 > h2 { font-size: 25px; margin: 35px 0 35px 0; }

	div.slider-v3 > h2 > a { width: 30px; height: 30px; top: 0; }
	div.slider-v3 > h2 > a.lists { right: 40px; }
	div.slider-v3 > h2 > a.tiles { right: 0; }
	
	div.slider-v3.lists > a { display: none; }
	div.slider-v3.lists > ul { display: none; }	
	div.slider-v3.lists > div > div { display: block; position: relative; width: 425px; height: 690px; padding: 25px 40px 25px 525px; overflow: hidden; background-color: white; border-top: 1px dashed #aaaaaa; }
	div.slider-v3.lists > div > div > h3 { color: #3C3C3B; font-weight: 500; font-size: 25px; margin: 0; padding: 20px 0 10px 0; text-align: center; }
	div.slider-v3.lists > div > div > p { color: #3C3C3B; font-weight: 400; font-size: 16px; margin: 0; padding: 10px 0 10px 0; text-align: justify; }
	div.slider-v3.lists > div > div > ul { padding: 0; list-style:none;  }
	div.slider-v3.lists > div > div > ul li { color: #3C3C3B; font-weight: 400; font-size: 16px; padding: 0 0 0 15px; margin-bottom: 5px; background: url("bullet.png") 0 8px no-repeat; text-align: justify; }
	div.slider-v3.lists > div > div > p.back { position: absolute; left: 5px; top: 5px; width: 490px; height: 690px; padding:0; margin: 0; }
	div.slider-v3.lists > div > div > p.back > img { width: 490px; height: 690px; }
	div.slider-v3.lists > div > div > p.cost { text-align: right; color: #3C3C3B; font-weight: 500; font-size: 20px; line-height: 20px; }
	div.slider-v3.lists > div > div > p.cost > img { margin: 0 5px 0 0; width: 25px; height: 19px; }
	div.slider-v3.lists > div > div:first-child { padding: 5px 40px 25px 525px; border-top: none; }
	div.slider-v3.lists > div > div:first-child img.back { top: 5px; }

	div.slider-v3.tiles > a { width: 24px; height: 48px; margin-top: -24px; background-size: 24px 48px; }
	div.slider-v3.tiles > a.prev { left: -70px; background-image: url('arrow.left.svg'); }
	div.slider-v3.tiles > a.next { right: -70px; background-image: url('arrow.right.svg'); }
	div.slider-v3.tiles > a.prev:hover { background-image: url('arrow.left.h.svg'); }
	div.slider-v3.tiles > a.next:hover { background-image: url('arrow.right.h.svg'); }
	
	div.slider-v3.tiles > div > div { display: none; width: 425px; height: 690px; padding: 5px 40px 5px 525px; box-shadow: 0 0 3px #666666; overflow: hidden; border-radius: 10px; position: relative; background-color: white; }
	div.slider-v3.tiles > div > div.act { display: block; position: relative; }
	div.slider-v3.tiles > div > div > h3 { color: #3C3C3B; font-weight: 500; font-size: 25px; margin: 0; padding: 20px 0 10px 0; text-align: center; }
	div.slider-v3.tiles > div > div > p { color: #3C3C3B; font-weight: 400; font-size: 16px; margin: 0; padding: 10px 0 10px 0; text-align: justify; }
	div.slider-v3.tiles > div > div > ul { padding: 0; list-style:none;  }
	div.slider-v3.tiles > div > div > ul li { color: #3C3C3B; font-weight: 400; font-size: 16px; padding: 0 0 0 15px; margin-bottom: 5px; background: url("bullet.png") 0 8px no-repeat; text-align: justify; }
	div.slider-v3.tiles > div > div > p.back { position: absolute; left: 5px; top: 5px; width: 490px; height: 690px; padding:0; margin: 0;  }
	div.slider-v3.tiles > div > div > p.back > img { width: 490px; height: 690px; }
	div.slider-v3.tiles > div > div > p.cost { text-align: right; color: #3C3C3B; font-weight: 500; font-size: 20px; line-height: 20px; }
	div.slider-v3.tiles > div > div > p.cost > img { margin: 0 5px 0 0; width: 25px; height: 19px; }
	
	div.slider-v3.tiles > ul { position: absolute; list-style: none; margin: 0; padding: 0; bottom: 0; left: 605px; right: 120px; text-align: center; }
	div.slider-v3.tiles > ul li { display: inline-block; width: 10px; height: 10px; margin: 5px; }
	div.slider-v3.tiles > ul li > a { font-size:0; }
	div.slider-v3.tiles > ul li > a:first-child { display: block; width: 10px; height: 10px; border-radius: 5px; box-shadow: inset 0 0 2px #aaaaaa; background-color: #C0C3C6; cursor: pointer; }
	div.slider-v3.tiles > ul li.act > a:first-child { background-color: #939393; box-shadow: inset 0 0 3px #666666; }
}

@media only screen and (max-width:989px) {
	
	div.slider-v3 { margin: 0 10px; }
	div.slider-v3 > h2 { font-size: 20px; line-height: 25px; margin: 22px 0 22px 0; padding: 0; }
	div.slider-v3 > h2 > a { display: none; }
	
	div.slider-v3 > a { display: none; }
	div.slider-v3 > div { display: none; }	
	div.slider-v3 > div > div { display: none; }

	div.slider-v3 > ul { margin: 0 20px 0 20px; padding: 0; list-style: none; }
	div.slider-v3 > ul > li { margin: 5px 0 5px 0; padding: 12px 0 12px 0; border-top: 1px solid #3CAA36; }
	div.slider-v3 > ul > li:last-child { border-bottom: 1px solid #3CAA36; }
	div.slider-v3 > ul > li > a:first-child { display: block; color: black; cursor: pointer; font-size: 20px; font-weight: 500; line-height: 25px; vertical-align: middle; padding: 0 20px 0 0; background: url('arrow.svg') right center no-repeat; }
	
	div.slider-v3.opened { position: fixed; left: 0; right: 0; top: 50px; bottom: 0; z-index: 2000; background-color: white; margin: 0; padding: 0; overflow: hidden; }
	div.slider-v3.opened > h2 { display: none; }
	div.slider-v3.opened > ul { height: 0; }
	div.slider-v3.opened > ul > li { display: none; }
	div.slider-v3.opened > ul > li.act { margin: 0; padding: 0; display: block; position: fixed; left: 0; right: 0; top: 0; height: 50px; background-color: #3CAA36; }
	div.slider-v3.opened > ul > li.act > a:first-child { display: block; position: absolute; left: 0; top: 0; height: 50px; right: 56px; color: white; padding: 0 20px 0 20px; overflow: hidden; }
	div.slider-v3.opened > ul > li.act > a:last-child { display: block; position: absolute; right: 0; top: 0; height: 50px; width: 56px; color: white; padding: 0; background: url('close.svg') no-repeat 21px center; background-size: 14px 14px; }
	
	div.slider-v3.opened > a { display: block; position: fixed; width: 32px; height: 64px; top: 50%; margin-top: -32px; overflow: hidden; background-color: rgba(255,255,255,0.7); background-repeat: no-repeat; background-size: 14px 28px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); -webkit-tap-highlight-color: transparent; }
	div.slider-v3.opened > a.prev { left: 0; background-image: url('arrow.left.m.svg'); background-position: 5px center; border-radius: 0 32px 32px 0; }
	div.slider-v3.opened > a.next { right: 0; background-image: url('arrow.right.m.svg'); background-position: 13px center; border-radius: 32px 0 0 32px; }

	div.slider-v3.opened > div { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }	
	div.slider-v3.opened > div > div.act { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: scroll; }

	@media only screen and (min-width:490px) {
		div.slider-v3.opened > div > div p.back { height: 690px; overflow: hidden; position: relative; }
		div.slider-v3.opened > div > div p.back img { position: absolute; top: 0; left: 50%; width: 490px; height: 690px; margin-left: -245px; }
		div.slider-v3.opened > div > div p.back:after { display: block; content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; border-radius: 10px 10px 0 0; overflow: hidden; background-color: white; box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.15); }
	}
	
	@media only screen and (max-width:489px) {
		div.slider-v3.opened > div > div p.back { padding-top: 140%; overflow: hidden; position: relative; }
		div.slider-v3.opened > div > div p.back img { position: absolute; top: 0; left: 0; width: 100%; }
		div.slider-v3.opened > div > div p.back:after { display: block; content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; border-radius: 10px 10px 0 0; overflow: hidden; background-color: white; box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.15); }
	}
	
	div.slider-v3.opened > div > div h3 { color: #3C3C3B; font-weight: 500; font-size: 20px; line-height: 24px; margin: 0; padding: 0 20px 10px 20px; text-align: center; }
	div.slider-v3.opened > div > div p { color: #3C3C3B; font-weight: 400; font-size: 17px; line-height: 22px; margin: 0; padding: 10px 20px 10px 20px; text-align: justify; }
	div.slider-v3.opened > div > div ul { padding: 0 20px 0 20px; list-style:none; }
	div.slider-v3.opened > div > div ul li { color: #3C3C3B; font-weight: 400; font-size: 17px; line-height: 22px; padding: 0 0 0 15px; margin-bottom: 5px; background: url("bullet.png") 0 8px no-repeat; text-align: justify; vertical-align: middle; }
	div.slider-v3.opened > div > div ul li img { vertical-align: middle; margin: 0 5px 0 0; }

	div.slider-v3.opened > div > div > p.cost { text-align: right; color: #3C3C3B; font-weight: 500; font-size: 20px; line-height: 20px; }
	div.slider-v3.opened > div > div > p.cost > img { margin: 0 5px 0 0; width: 25px; height: 19px; }

}