/*  Made by Sasha Karachinsky     */
/*  www.karachinsky.ru            */

@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,400,500,500,600,700&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700&subset=cyrillic');

/*  Global shit, man!  */

	:root {

     --customRed: #f36525;
	 --customYellow: #fc0;
	 --customGreen: #adc72b;
	 --customBlue: #22a4e7;
	}

	img { -ms-interpolation-mode: bicubic; }

	body {  font-family: 'Playfair Display';
			font-size: 1.1em;
			color: #463F30;
			padding: 0;
			margin: 0;
			background-color: white;
			}


	h1 {font-family: 'Playfair Display';
		font-size: 3em;
		font-weight: 100;
		clear: both;}

	h1  {font-weight: 800;}

	h2 {font-family: 'Playfair Display';
		font-size: 5em;
		margin:0;  }

	h3 {font-family: 'Amatic SC';
		font-size: 3em;
		font-weight: bold;
		margin:0;  }

	a:link {color: #069aea; text-decoration: none; border-bottom: 1px solid rgba(0,181,255,0.83);}
	a:visited {color: #069aea; text-decoration: none; border-bottom: 1px solid rgba(0,181,255,0.83);}
	a:hover {transition: color 200ms ease-in-out, border 200ms ease-in-out; color: var(--customRed); border-bottom: 1px solid white;}

	li{
   list-style:square;
	}

	ul {margin-left: -40px; line-height: 1.8em;}

/* Decors */

	#decorA {display: block; float: left; width: 60%; margin: -6px 0 0 -48px;
					transform-origin: 50% 0%;
					-ms-transform-origin: 50% 0%; /* IE 9 */
					-webkit-transform-origin: 50% 0%; /* Safari and Chrome */
					-moz-transform-origin: 50% 0%; /* Firefox */
					-o-transform-origin: 50% 0%; /* Opera */}

	#decorBalloon {position: absolute; margin-top: -264px; right: 10%;  width: 135px; z-index: 0;
					transform-origin: 50% 0%;
					-ms-transform-origin: 50% 0%; /* IE 9 */
					-webkit-transform-origin: 50% 0%; /* Safari and Chrome */
					-moz-transform-origin: 50% 0%; /* Firefox */
					-o-transform-origin: 50% 0%; /* Opera */}

	#decorOpinions {position: absolute; margin-top: -164px; right: 10%;  width: 135px; z-index: 0;
					transform-origin: 50% 100%;
					-ms-transform-origin: 50% 100%; /* IE 9 */
					-webkit-transform-origin: 50% 100%; /* Safari and Chrome */
					-moz-transform-origin: 50% 100%; /* Firefox */
					-o-transform-origin: 50% 100%; /* Opera */}

	#decorB, #decorC, #decorD, #decorE {height: 111px; margin: 0 0 -48px -16px;}

	#plane {position: fixed; left: -200px; top: 30%; width: 200px;}

	#wheel {position: fixed; right: -6px; top: 470px; width: 120px;}

	#manWithBird {position: fixed; right: -63px; top: 224px; width: 240px;
							z-index: 1111;
							transform-origin: 50% 100%;
							-ms-transform-origin: 50% 100%; /* IE 9 */
							-webkit-transform-origin: 50% 100%; /* Safari and Chrome */
							-moz-transform-origin: 50% 100%; /* Firefox */
							-o-transform-origin: 50% 100%; /* Opera */
							}



/*  Containers  */

  #face {padding-top: 7%; width: 100%;}


	#authorPhoto {width: 110%;}
	#authorPhotoMobile {width: 100%; display: none;}

	#highlighted {font-weight: 900; color: var(--customRed);}

	.leftMenu {position: fixed; left: 3%; top: 10%; font-size: 1.2em; line-height: 2em; width: 20%; height: 400px;}
	.leftMenu a {pointer-events: auto;}
	.leftMenu a:link {transition: padding 200ms ease-in-out, border 200ms ease-in-out;  color: black; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.33);}
	.leftMenu a:visited {transition: padding 200ms ease-in-out, border 200ms ease-in-out;  color: black; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.33);}
	.leftMenu a:hover {transition: padding 200ms ease-in-out, border 200ms ease-in-out; border-bottom: none; padding-left: 22px; color: var(--customRed);}

	#numbersRomb {display: inline-block; clear: both; float: left; width: 16%; margin: 0px 0 0 42%; float: left;}
	.padRombs {float: left; padding: 0px 10% 12px 20%; width: 70%; }

	.padFirst {width: 100%;  }

	#imageTop {width: 100%;}

	#logoAzTop {width: 100%; margin: 0 0 48px -24px;}

	#logoAzMenu {width: 90%; margin: 0 0 16px -24px; margin-right: 10%;}

	.padFirstText {margin: -17% 0 0 20%; width: 70%;}

	.padNumbers {float: left; padding: 64px 10% 0px 20%; width: 70%; background: url('../i/bgGrey.jpg'); background-size: cover; background-repeat: no-repeat;}

	.padNumbers h1 {color: var(--customRed); margin: 0 0 -8px 0; font-size: 3em; font-weight: 100;}

	.blockNumber {width: 22%; padding: 0 3% 32px 0; float: left; font-size: 1.4em; font-family: 'Amatic SC'; font-weight: bold;}

	.padAuthor {float: left; margin: 64px 0 0 20%; width: 70%;}
	#headerAuthor {width: 100%; margin: 0 0 -48px -24px; float: left;}

	#headerOpinions {width: 100%; margin: -64px 0 8px -24px;}

	#headerBuy {width: 100%; margin: -114px 0 22px -24px; pointer-events: none;}

	#headerDelivery {width: 100%; margin: 64px 0 48px -24px;}

	strong {font-family: 'Amatic SC'; font-weight: bold; font-size: 1.8em;}

	/*.padIllustrations {float: left; margin: 64px 0 0 20%; width: 70%;}*/
	#headerIllustration {float: left; margin: 64px 0 48px 20%; width: 70%;}


	.illustrationsBG {float: left; width: 100%;}

	#textBlock {float: left; margin: 64px 0 0 20%; width: 70%;}

	#textBlockIllustrations {float: left; margin: -64px 0 64px 20%; width: 50%; z-index: 999;}

    .padIllustrations {float: left;}
	.padIllustration {float: left; margin: 64px 0 0 0; width: 100%;}


	#illustration {width: 100%;}



	#illustrationsmobile {width: 100%; display: none;}

	/* Footer  */

	iframe {width: 80%; height: 70vh; margin: 2% 5% 11% 11%; box-shadow: 2px 72px 128px rgba(0,0,0,0.3); border-radius: 32px;}

	.ytb {width: 100%;}

	#logoKarachinsky {width: 54px;  padding-top: 2px;}

	.footer {float: left; margin: 64px 0 0 0; width: 100%; background-color: #8289b1; padding: 0 0 32px 0;}

	.socialLinks {line-height: 1.8em; padding-right: 10%; float: left; width: 20%;}

	.footerMid {float: left; color: white; width: 30%;}

	.footerRight {float: right; padding-right: 12%; text-align: right; width: 23%;}

	#footerPhone {margin: 0 0 0 -16px; font-family: 'Amatic SC'; font-size: 3em; font-weight: bold;}

	.footer a:link {color: white; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.38);}
	.footer a:visited {color: white; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.38);}
	.footer a:hover {color: white; text-decoration: none; border-bottom: none;}

	#footerImg {float: left; width: 100%;}

	.footerText {float: left; width: 80%; margin: -12% 0 0 20%; color: white;}

	/*       */

	button {transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, padding 200ms ease; font-size: 2em; margin: 18px 0 0 16px; padding: 16px 36px; border-radius: 8px; border: none; color: white; background-color: var(--customYellow); }

	button:hover {transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, padding 200ms ease; cursor: pointer;  background-color: var(--customBlue); box-shadow: 0 0 64px var(--customBlue); padding: 16px 64px 16px 64px; margin-right: 0;}

    .price {font-family: 'Montserrat'; font-size: 4em; padding: 12px 32px 12px 0; float: left;}

	input, textarea, select {transition: border 200ms ease, box-shadow 200ms ease; display: block; clear: both;
								margin: 16px 0 22px 0; border: 1px solid #888; font-size: 2em; padding: 6px 12px; width: 90%;}
	input:hover, textarea:hover, select:hover {transition: border 200ms ease, box-shadow 200ms ease; border: 1px solid #fc0; box-shadow: 0 4px 64px #fc0;}

	select {width: 33%;}
	/*       */

	.padOpinions {float: left; margin: 64px 0 0 20%; width: 70%;}
	.opinionBlock {float: left; width: 45%; margin: 32px 5% 0 0; }
	#opinionPerson {width: 30%; float:left;
					margin-right: 5%;
					border-radius: 200px;
					-webkit-border-radius: 200px;
					-moz-border-radius: 200px;
					float: left;}

	#opinionName {font-weight: bold; font-size: 1.7em; font-family: 'Amatic SC'; margin: 12px 0 0 0;}
	#opinionName strong {color: var(--customRed); font-size: 1.4em;}

	#opinionText {float: left; width: 95%; margin-right: 5%;}

	.devider {clear: both;}


	#headerQuest {width: 100%; margin: -114px 0 -32px -24px;}
	.padQuest {float: left; margin: 16px 0 0 20%; width: 70%;}

	.padQuestBG {float: left; width: 100%; background-image: url('../i/bgQuest.jpg'); background-size: cover; padding: 0 0 32px 0; margin: 64px 0 32px 0;}



	.padVideo {float: left; width: 100%; background-image: url('../i/bgQuest.jpg'); background-size: cover; padding: 0 0 32px 0; margin: 64px 0 32px 0;}



	.padQuestRight {width: 45%;  float: left;}

	#imageQuest {width: 150%; margin: 0 0 -200px -45%;}


	.padBuy {float: left; margin: 64px 0 0 20%; width: 70%;}

	.padDelivery {float: left; margin: 64px 0 0 20%; width: 70%;}



	#block50 {width: 45%; padding-right: 5%; float: left;  display: block;  }
	#block100 {clear: both; width: 95%; padding: 0 5% 0 0; float: left; display: block; margin: 32px 0 0 0;}

	.menuMobile {display: none;}





 @media screen and (max-device-width: 640px) {

/* @media (max-width: 1080px){    */

	 body {padding: 0; margin: 0; width: 100%; font-size: 3em;}

	 #block50 {width: 95%; padding: 0 5% 64px 0; clear: both; float: left; }

	 iframe {height: 20vh!important; margin: 1% 5% 16% 8%!important;}

	 #wheel, #manWithBird {display: none;}
	 #plane {position: fixed; left: 200px; top: 30%; width: 400px;}

	 .leftMenu {display: none; left: 0; top: 0; width: 90%;
	 					background-color: rgba(255,255,255,0.9); margin: 0; height: 100%; padding: 35% 5% 5% 5%;
						text-align: center;}

	 #logoAzMenu {width: 70%; padding: 0 0 35px 15%;}
	 #decorA {display: none;}

	 .menuMobile {display: block; position: fixed; left: 0; top: 0; width: 15%; height: 15%; cursor: pointer;}

	 .price {font-size: 2em;}

	 .padFirstText, .padNumbers, .padRombs, .padAuthor, .padOpinions, .padQuest, .padBuy, .padDelivery {margin: 0 0 0 0; padding: 0 5% 0 5%; width: 90%; }

	 input, textarea, select  {font-size: 1.4em;}

	 .padNumbers {background: none;}
	 .padRombs {display: none;}

	 .padNumbers h1 {font-size: 2em; margin: 48px 0 0 0;}

	 #decorB, #decorC, #decorD, #decorE {height: 300px;}

	 .padIllustrations {padding: 0;}
	 #textBlockIllustrations {margin: 0; padding: 0 2% 32px 12%; width: 76%;}
	 .illustrationsBG {padding: 0; margin: 0; width: 100%;}

	 #illustration {padding: 0; margin: 0; width: 100%;}
	 #face {padding: 0; margin:0; width: 100%;}

	 #illustrationsmobile {width: 100%; display: block;}


	 .blockNumber {font-size: 1.3em; width: 45%;}

	.padFirstText {margin-top: -96px;}

	 .opinionBlock {width: 100%; padding: 0; margin: 16px 0 0 0;}
	 #opinionText {width: 100%; margin: 0; padding: 32px 0 32px 0;}
	 #opinionName {}
	 #opinionName strong {display: inline-block; margin: 0 0 -32px 0; padding: 0;}

	 #headerQuest {margin: 0;}
	 #headerAuthor {margin: 0;}
	 #headerDelivery {margin: 112px 0 0 0;}
	 #headerIllustration {margin: -32px 0 32px 4%; width: 96%;}
	 #headerOpinions {margin: 0; width: 100%;}

	 #authorPhoto {width: 80%; margin: 0 0 0 10%;  display: none;}

	#authorPhotoMobile {width: 100%; display: block;}

	 .padQuestRight {width: 100%; margin: 0 0 64px 0;}
	 #imageQuest {margin: 0 0 0 0; width: 100%;}

	 strong {display: block; margin: 32px 0 -32px 0;}

	 #logoAzTop {margin: 0;}

	 #headerBuy {margin: 0;}

	 #footerPhone {font-size: 2em;}

	 h3 {font-size: 2em;}

	 #footerImg {content: url('../i/bgFooterMobile.jpg');}

	 .footerText {margin: -65% 0 0 5%; padding: 0 0 64px 0; }

	 .socialLinks {padding: 0; margin: 0;}

	 .footer {background-color: #8289b1; padding: 0 0 32px 0; margin: 0; width: 100%;}

	 .footerRight {clear: both; text-align: left; padding: 0; margin: 0; float: left; width: 100%;}
	 .footerRightStrong {border-bottom: 2px solid rgba(255,255,255,0.55);}

	 .footerMid {margin: 48px 0 16px 0; width: 100%;}

	 #logoKarachinsky {display: none;}
}