@import url('normalize.css');
body{ overflow: hidden; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: lightgrey; }

.st-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; 
                /*font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;*/ 
                font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

/* first line of the header */
.topline { position: fixed; top: 0px; height: 52px;  z-index: 10;  width: 100%; }

/* Zasovyvaet text v menus snizy */
.st-container > input,
.st-container > a {
    border-left: solid 1px #242426; border-right: solid 1px #151515;
    position: fixed; top: 54px; cursor: pointer; font-size: 16px; height: 52px; line-height: 52px;
}


/* Neponyatnoe svoistvo kak-to vlijauschee na skorost perekluchenija tabov no visualno neprojavlyajuscheesya */
.st-container > input { opacity: 0; z-index: 1000; }
.st-container > input#st-control-6 { z-index: 11; }
.st-container > input#st-control-7 { z-index: 11; }
.st-container > input#st-control-8 { z-index: 11; }
.st-container > a:focus { outline: none; }


/* Color of ALL menu labels - both selected and nonselected */
.st-container > a { z-index: 10; text-align: center; color: white; /*text-shadow: 1px 1px 1px rgba(151,24,64,0.2);*/ 

 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjEyMTIzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMEYwRjBGIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
 background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #212123), color-stop(100%, #0F0F0F)); background-image: -webkit-linear-gradient(top, #212123 0%, #0F0F0F 100%); background-image: -moz-linear-gradient(top, #212123 0%, #0F0F0F 100%);    background-image: -ms-linear-gradient(top, #212123 0%, #0F0F0F 100%); background-image: -o-linear-gradient(top, #212123 0%, #0F0F0F 100%); background-image: linear-gradient(to bottom, #212123 0%, #0F0F0F 100%);
}

/* podloga pod menu - pishut chto dlya IE - postavim na vsyakij sluchai
    "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
.st-container:before { 
 content: ''; position: fixed; width: 100%; height: 53px; z-index: 9; top: 53px;
 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjEyMTIzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMEYwRjBGIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
 background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #212123), color-stop(100%, #0F0F0F)); background-image: -webkit-linear-gradient(top, #212123 0%, #0F0F0F 100%); background-image: -moz-linear-gradient(top, #212123 0%, #0F0F0F 100%);    background-image: -ms-linear-gradient(top, #212123 0%, #0F0F0F 100%); background-image: -o-linear-gradient(top, #212123 0%, #0F0F0F 100%); background-image: linear-gradient(to bottom, #212123 0%, #0F0F0F 100%);
}

/* Menu items position and width */


#st-control-1, #st-control-1 + a { left: 100px; width: 98px;  }
#st-control-2, #st-control-2 + a { left: 200px; width: 150px; }
#st-control-3, #st-control-3 + a { left: 352px; width: 136px; }
#st-control-4, #st-control-4 + a { left: 490px; width: 118px; }
#st-control-5, #st-control-5 + a { left: 610px; width: 128px; }
#st-control-6, #st-control-6 + a { left: 740px; width: 140px; }
#st-control-7, #st-control-7 + a { left: 880px; width: 110px; }
#st-control-8, #st-control-8 + a { left: 990px; width: 110px; }
#st-control-9, #st-control-9 + a { left: 1100px; width: 100px; }

/* Color of currently selected tab and it is the same for it when mouseover */
.st-container > input:checked + a,
.st-container > input:checked:hover + a
{ 
 color: #3dc2fb; 
 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMjEyMTIzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMEYwRjBGIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
 background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #212123), color-stop(100%, #0F0F0F)); background-image: -webkit-linear-gradient(top, #212123 0%, #0F0F0F 100%); background-image: -moz-linear-gradient(top, #212123 0%, #0F0F0F 100%); background-image: -ms-linear-gradient(top, #212123 0%, #0F0F0F 100%); background-image: -o-linear-gradient(top, #212123 0%, #0F0F0F 100%); background-image: linear-gradient(to bottom, #212123 0%, #0F0F0F 100%);
}

/* Color of other items when hovered */
.st-container > input:hover + a,
.st-container > input:checked:hover + a
{
	border-left: solid 1px #242426;
	border-right: solid 1px #151515;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyYWRpYWxHcmFkaWVudCBpZD0iZyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNDk0OTQ5Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMTAxMDEwIi8+PC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSIwJSIgeT0iMCUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiMxMDEwMTAiIC8+PHJlY3QgeD0iLTMxLjM4NzElIiB5PSItMTI2LjczNzElIiB3aWR0aD0iMTYyLjc3NDElIiBoZWlnaHQ9IjI1My40NzQyJSIgZmlsbD0idXJsKCNnKSIgLz48L3N2Zz4=);
	background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 255, color-stop(0%, #494949), color-stop(100%, #101010));
	background-image: -webkit-radial-gradient(center top, farthest-corner circle, #494949 0%, #101010 100%);
	background-image: -moz-radial-gradient(center top, farthest-corner circle, #494949 0%, #101010 100%);
	background-image: -ms-radial-gradient(center top, farthest-corner circle, #494949 0%, #101010 100%);
	background-image: -o-radial-gradient(center top, farthest-corner circle, #494949 0%, #101010 100%);
	background-image: radial-gradient(farthest-corner circle at center top, #494949 0%, #101010 100%);
}

/* Neponyatnoe svoistvo */
.st-container > input:hover + a:after {	border-bottom-color: #AD244F; }

.st-scroll,
.st-panel 
{ position: relative; width: 100%; height: 100%; }


/* Gde nachinaetsa content area + animation kotoryi perelistyvaet ekran */
.st-scroll { top: 106px; left: 0; 

-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
	
/* Let's enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}

.st-panel { background: #fff; overflow: hidden; } 


/* Ustanavlivaem smeschenuyia */
#st-control-1:checked ~ .st-scroll {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
	-webkit-transform: translateY(-200%);
	-moz-transform: translateY(-200%);
	-o-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
	-webkit-transform: translateY(-300%);
	-moz-transform: translateY(-300%);
	-o-transform: translateY(-300%);
	-ms-transform: translateY(-300%);
	transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
	-webkit-transform: translateY(-400%);
	-moz-transform: translateY(-400%);
	-o-transform: translateY(-400%);
	-ms-transform: translateY(-400%);
	transform: translateY(-400%);
}
/*#st-control-6:checked ~ .st-scroll {
	-webkit-transform: translateY(-500%);
	-moz-transform: translateY(-500%);
	-o-transform: translateY(-500%);
	-ms-transform: translateY(-500%);
	transform: translateY(-500%);
}*/
/*#st-control-7:checked ~ .st-scroll {
	-webkit-transform: translateY(-600%);
	-moz-transform: translateY(-600%);
	-o-transform: translateY(-600%);
	-ms-transform: translateY(-600%);
	transform: translateY(-600%);
}*/


@media screen and (max-width: 520px) {
	.st-panel h2 {
		font-size: 42px;
	}
	
	.st-panel p {
		width: 90%;
		left: 5%;
		margin-top: 0;
	}
	
	.st-container > a {
		font-size: 13px;
	}
}
@media screen and (max-width: 360px) {
	.st-container > a {
		font-size: 10px;
	}
}