@charset "UTF-8";

div.advantages { }
div.advantages > div { display: flex; flex-direction: row; }
div.advantages > div > div { overflow: hidden; box-shadow: 0 0 5px #666666; border-radius: 7px; background-color: white; flex: 0 0 auto; position: relative; }
div.advantages > div > div a { font-size: 18px; font-weight: 500; color: #3C3C3B; display: inline-block; width: 180px; height: 45px; position: absolute; text-align: center; background-repeat: no-repeat }
div.advantages > div > div a:first-child { top: 28px; left: 50%; margin: 0 0 0 -90px; }
div.advantages > div > div a:last-child { top: 50%; left: 50%; margin: 22px 0 0 -90px; }
div.advantages > div > div a.adv-1 { background-image: url('advant/1.svg'); }
div.advantages > div > div a.adv-2 { background-image: url('advant/2.svg'); }
div.advantages > div > div a.adv-3 { background-image: url('advant/3.svg'); }
div.advantages > div > div a.adv-4 { background-image: url('advant/4.svg'); }
div.advantages > div > div a.adv-5 { background-image: url('advant/5.svg'); }
div.advantages > div > div a.adv-6 { background-image: url('advant/6.svg'); }
div.advantages > div > div:after { content: ''; position: absolute; height: 2px; top: 50%; margin-top: -1px; left: 20px; right: 20px; background-color: #ececec; }
div.advantages > div > div:nth-child(2) { margin: 0 auto; }
div.advantages > div > div:hover { box-shadow: 0 0 7px #222222; }

@media only screen and (min-width: 1200px) {
	div.advantages { width: 1200px; height: 422px; margin: 0 auto 20px auto;  }
	div.advantages > div { }
	div.advantages > div > div { margin: 0; width: 389px; height: 422px;}
	
	div.advantages > div > div a { padding: 110px 0 0 0; background-position: center top; background-size: 90px; }
}

@media only screen and (min-width: 932px) and (max-width: 1199px) {
	div.advantages { width: 100%; margin: 0 0 20px 0; }	
	div.advantages > div { }	
	div.advantages > div > div { margin: 0 auto; width: 280px; height: 395px; }
	
	div.advantages > div > div a { padding: 100px 0 0 0; background-position: center 10px; background-size: 71px; }
}

@media only screen and (max-width: 931px) {
	div.advantages { position:relative; width: 100%; height: 420px; margin: 0 0 20px 0; }
	div.advantages > div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 7px 0 7px 0; overflow: auto; }
	div.advantages > div > div { margin: 0 18px; width: 280px; height: 395px; }
	div.advantages > div > div a { padding: 100px 0 0 0; background-position: center 10px; background-size: 71px; }
}

/*REF-MAP*/

div.refmap { font-size: 0; background-color: white; }
div.refmap div { margin: 0; padding: 0; border: 0; }
div.refmap h3 { font-weight: 500; color: #3C3C3B; margin: 0; padding: 0; }
div.refmap p { font-weight: 300; color: #3C3C3B; margin: 0; padding: 0; }
div.refmap > div > div { }
div.refmap > div:nth-child(1) > div:nth-child(1) { background: url('ref.map/reference.svg') no-repeat left center; }
div.refmap > div:nth-child(1) > div:nth-child(2) { background: url('ref.map/map.svg') no-repeat left center; }
div.refmap > div:nth-child(2) { }

div.howtoget p { margin: 0; padding: 0; font-weight: 300; color: #3C3C3B; text-align: justify; }
	
@media only screen and (min-width: 990px) {
	div.refmap { width: 990px; height: 76px; line-height: 76px; margin: 35px auto 10px auto; }
	div.refmap h3 { font-size: 18px; line-height: 22px; padding: 7px 0 7px 0; }
	div.refmap p { font-size: 15px; line-height: 20px; text-align: justify; }
	div.refmap > div { display: inline-block; height: 76px; line-height: 76px; }
	div.refmap > div > div { display: inline-block; height: 76px; line-height: 76px; margin: 0; }
	div.refmap > div:nth-child(1) { font-size: 0; vertical-align: top; }
	div.refmap > div:nth-child(1) > div:nth-child(1) { width: 173px; padding: 0 0 0 82px; }
	div.refmap > div:nth-child(1) > div:nth-child(2) { width: 163px; padding: 0 0 0 82px; }
	div.refmap > div:nth-child(2) { width: 460px; padding: 0 0 0 22px; border-left: 1px solid #3C3C3B; }
	
	div.howtoget { width: 875px; margin: 35px auto 10px auto; padding: 0 0 0 115px; background: url('howtoget.svg') 15px center no-repeat; background-size: 83px 69px; min-height: 69px; }
	div.howtoget p { line-height: 18px; font-size: 15px; }
}

@media only screen and (min-width: 520px) and (max-width: 989px) {
	div.refmap { text-align: center; margin: 20px 0 20px 0; }
	div.refmap h3 { font-size: 18px; line-height: 22px; padding: 7px 0 7px 0; }
	div.refmap p { font-size: 15px; line-height: 20px; text-align: justify; }
	div.refmap > div:nth-child(1) { display: flex; flex-flow: row; align-items: center; margin: 20px 0; }
	div.refmap > div:nth-child(1) > div { flex: none; height: 76px; margin: auto; }
	div.refmap > div:nth-child(1) > div:nth-child(1) { padding: 0 0 0 82px; }
	div.refmap > div:nth-child(1) > div:nth-child(2) { padding: 0 0 0 82px; }
	div.refmap > div:nth-child(2) { margin: 0 20px 0 20px; padding: 24px 0 0 0; border-top: 1px solid #B3B2B2; }
	
	div.howtoget { margin: 35px 10px 10px 10px; padding: 0 0 0 115px; background: url('howtoget.svg') 15px center no-repeat; background-size: 83px 69px; min-height: 69px; }
	div.howtoget p { line-height: 18px; font-size: 15px; }
}

@media only screen and (max-width: 519px) {
	div.refmap { text-align: center; margin: 20px 0 20px 0; }
	div.refmap h3 { font-size: 20px; line-height: 24px; padding: 7px 0 2px 0; text-align: left; }
	div.refmap p { font-size: 17px; line-height: 20px; text-align: justify; }
	div.refmap > div:nth-child(1) { display: inline-block; }
	div.refmap > div:nth-child(1) > div { height: 60px; margin: 20px 0; }
	div.refmap > div:nth-child(1) > div:nth-child(1) { padding: 0 0 0 62px; background-size: 60px 50px; }
	div.refmap > div:nth-child(1) > div:nth-child(2) { padding: 0 0 0 62px; background-size: 54px 60px; }
	div.refmap > div:nth-child(2) { margin: 0 20px 0 20px; padding: 24px 0 0 0; border-top: 1px solid #B3B2B2; }
	
	div.howtoget { margin: 35px 10px 10px 10px; padding: 0; min-height: 50px; }
	div.howtoget p { line-height: 18px; font-size: 15px; }
	
	@media only screen and (min-width: 380px) {
		div.howtoget { padding: 0 0 0 80px; background: url('howtoget.svg') 15px center no-repeat; background-size: 60px 50px; }	
	}
}

/* CONTACTS */

div.header div.contacts { height: 410px; background-repeat: no-repeat; background-position: center top; position: relative; }
div.header div.contacts div { background-color: white; border-radius: 10px 10px 0 0; box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.15); position: absolute; height: 210px; padding: 5px 0 0 0; bottom: 0; text-align: center; }
div.header div.contacts div a { display: block; width: 165px; height: 40px; padding: 0 0 0 50px; margin: 20px auto; font-weight: 500; font-size: 20px; line-height: 40px; text-align: left; color: #000000; background-repeat: no-repeat; background-position: left center; cursor: pointer; }
div.header div.contacts div a.email { background-image: url('contacts/email.svg'); }
div.header div.contacts div a.fbook { background-image: url('contacts/fbook.svg'); }
div.header div.contacts div a.cinfo { background-image: url('contacts/cityinfo.svg'); }

@media only screen and (max-width: 360px) { div.header div.contacts { background-image: url('contacts/bg-360.jpg'); } }
@media only screen and (min-width: 361px) and (max-width: 576px) { div.header div.contacts { background-image: url('contacts/bg-576.jpg'); } }
@media only screen and (min-width: 577px) and (max-width: 768px) { div.header div.contacts { background-image: url('contacts/bg-768.jpg'); } }
@media only screen and (min-width: 769px) and (max-width: 1024px) { div.header div.contacts { background-image: url('contacts/bg-1024.jpg'); } }
@media only screen and (min-width: 1025px) and (max-width: 1280px) { div.header div.contacts { background-image: url('contacts/bg-1280.jpg'); } }
@media only screen and (min-width: 1281px) and (max-width: 1500px) { div.header div.contacts { background-image: url('contacts/bg-1500.jpg'); } }
@media only screen and (min-width: 1501px) { div.header div.contacts { background-image: url('contacts/bg-1920.jpg'); } }

@media only screen and (max-width: 360px)
{
	div.header div.contacts div { left: 0; right: 0; }
	div.header div.contacts div:after { display: block; position: absolute; content: ''; border-top: 1px solid #B3B2B2; left: 20px; right: 20px; height: 1px;  }
}

@media only screen and (min-width: 361px) and (max-width: 576px) { div.header div.contacts div { left: 50%; margin-left: -175px; width: 350px; } }
@media only screen and (min-width: 577px) and (max-width: 1280px) { div.header div.contacts div { right: 113px; width: 350px; } }
@media only screen and (min-width: 1281px) { div.header div.contacts div { right: 300px; width: 350px; } }