@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200italic,300italic,700italic|Fondamento:400italic,400|Open+Sans+Condensed:300,700&subset=latin,latin-ext);

img, object, embed, video, iframe/**/ {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/




/*
	view-source:http://alistapart.com/article/fluid-images
*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, a {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	/*font-size: 100%;*/
	vertical-align: baseline;
	background: transparent;
	color:#FFF;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block
}
img, object, embed, iframe {
	max-width: 100%
}
[hidden] {
display:none
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	overflow-y: scroll
}
html, button, input, select, textarea {
	color: #222;
	line-height: 1.4;
}
body {
	margin: 0;
	font-size: 1em;
	background:#000;
	height:100%;
	/*background: #900 url(imgs/energetika-bg1-800x50px.png) repeat left top;*/
}

html,body,#gridContainer {
	/*font-family: 'PT Sans Caption', sans-serif;
	letter-spacing:0.01em;
	font-family: 'Antonio Bold', sans-serif;
	letter-spacing:-0.04em;
	font-family: 'Titillium Web', sans-serif;			/italic 200,300,700
	http://www.google.com/fonts#UsePlace:use/Collection:Titillium+Web:400italic,700italic,300italic,200italic,300,200
	font-family: 'Fondamento', cursive;
	font-family: 'Open Sans Condensed', sans-serif;		/300+700*/
	font-family: 'Titillium Web', sans-serif;
	font-style:italic;
	font-weight:200;
}
h1,h2,h3,h4,h5,h6 {
	/*font-family: "Typo3", sans-serif;
	font-family: "delicious", sans-serif;
	font-family: "calluna", sans-serif;
	font-family: "Bebas", sans-serif;
	font-family: "BebasNeue", sans-serif;
		
	font-family: 'Racing Sans One', cursive;
	font-family: 'PT Sans Caption', sans-serif;
		
	font-family: 'Six Caps', sans-serif;
	font-family: 'Stardos Stencil Regular', sans-serif;
	font-family: 'Stardos Stencil Bold', sans-serif;
	font-family: 'BenchNine Light', sans-serif;
	font-family: 'BenchNine Bold', sans-serif;
	font-family: 'BenchNine Regular', sans-serif;
	font-family: 'PT Sans Caption', sans-serif;
	font-weight:bold;
	font-family: 'Roboto Condensed', sans-serif;
	font-family: 'Antonio Light', sans-serif;*/
	letter-spacing:-0.04em;
	
	font-family: 'Titillium Web', sans-serif;
	font-style:italic;
	font-weight:200;
	
	
	/*font-family: 'Open Sans Condensed', sans-serif;
	font-style:normal;
	font-weight:200;*/
	/*font-family: 'Fondamento', cursive;
	font-style:italic;
	font-weight:400;*/
	
}



a:link {
	color: #FFF; text-decoration: none !important;
}
a:visited {
	color: #FFF; text-decoration: none !important;
}
a:hover {
	color: #FFF;
    /*border-bottom: 1px solid #FFF;
    padding-bottom: 0px;*/
}
a:active {
	/**/background-color:#F00;
	color: #FFF;
}


img {
	background-color: transparent !important;
	background-color: none !important;
}


header a:link {
	text-decoration: none;
}
header a:visited {
	text-decoration: none;
}
header a:hover {
	text-decoration: none;
    border-bottom: 1px solid #FFF;
    padding-bottom: 0px;
	/*filter: Alpha(Opacity=70);IE7 fix
	opacity: .7;*/
}
header a:active {
	text-decoration: none;
}




@media only screen and (max-width: 480px) {
	#LayoutDiv1, #LayoutDiv2, #LayoutDiv3 {
		float:none!important;
	}
}



















/* Mobile Layout: 480px and below. */

#gridContainer {
	position:relative;
	margin-left: auto;
	margin-right: auto;
	/*width: 96.7391%;
	padding-left: 1.6304%;
	padding-right: 1.6304%;*/
	padding-left: 0;
	padding-right: 0;
	/*background: #900 url(v4/images/energetika-bg1-800x50px.png) repeat left top;
	height:100%;
	padding-bottom: 10%;*/
	
}

#layoutContainer {
	position:relative;
	background: #900 url(images/energetika-bg1-800x50px.png) repeat left top;
	
	margin: 0;
	padding-bottom: 5%;		/* to include bg-image, use padding */
	/*width:100%;height:100%;
	
	position:relative;
	padding-bottom: 10%;*/
	
}

#footerContainer {
	/*margin-left: auto;
	margin-right: auto;
	height:100px;
	display: block;
	margin-top: 20px;*/
	position:relative;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #000;
}


#LayoutDiv1 {
	/*
	display: block;*/
	display: inline-block;
	width: 100%;
	margin-top: 0;
	/*background:#222;*/
	/*background: #900 url(imgs/energetika-bg1-800x50px.png) repeat left top;
	*/
	/*color:#FFF;
	height:100%;*/
} 
#LayoutDiv1 header {
	margin: 0 auto 0;
	text-align:center;
	/*font-size: 46px;
	font-size:0.6em;*/
	margin: 10px;
}
#LayoutDiv1 header h1 {
	/*line-height: 2.76em;*/
	display:none;
}

#tagline {
	margin: auto;
}

#tagline p {
	line-height:1.03em;
	/*margin-bottom: 2px;*/
	font-size: .96em;
	text-transform:uppercase;/**/
	color: #FFC;
}
#tagline p.taglineSk {
	float:left;
	color:#FFF;
}

#tagline p.taglineEn {
	float:left;
	color:#CCC;
	/*font-size: 0.65em;*/
}



#LayoutDiv2 {
	/*clear: both;
	width: 100%;*/
	width: auto;
	display: block;
	padding: 0;
	margin: 0;
	/*background: #900;*/
}

#LayoutDiv3 {
	/*clear: both;
	width: 100%;
	padding-left: 100px;*/
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
	/*background: #900 url(imgs/zastrcka-sm-wh-100x250.png) no-repeat left top;*/
}

#LayoutDiv4 {
	position: relative;
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
	/*background: #900 url(imgs/zastrcka-sm-wh-100x250.png) no-repeat left top;*/
}		








#footerDiv {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	clear:both;
	/*
	height:100px;
	padding-top: 20px;
	margin-top: 20px;
	padding: 0;
	margin: 0 auto;
	background: #900 url(imgs/zastrcka-sm-wh-100x250.png) no-repeat left top;*/
}	



#footerDiv1 {
	position: relative;
	width: auto;
	padding: 0;
	/*
	float:left;
	margin: 0 auto;
	background: #333;
	display: block;
	width: 30%;
	padding: 0;
	margin: 0 auto;
	background: #900 url(imgs/zastrcka-sm-wh-100x250.png) no-repeat left top;*/
}		

#footerDiv2 {			/* fb */
	position: relative;
	width: 480px;
	padding: 0;
	margin: 0 auto;
	min-height: 480px;
	/*
	float:left;
	background: #666;
	display: block;
	background: #900 url(imgs/zastrcka-sm-wh-100x250.png) no-repeat left top;*/
}		
#footerDiv3 {
	position: relative;
	width: auto;
	padding: 0;
	/*
	float:left;
	margin: 0 auto;
	background: #999;
	display: block;
	background: #900 url(imgs/zastrcka-sm-wh-100x250.png) no-repeat left top;*/
}		



#SocialMediaDiv {		/* unused */
	/*
	float: left;*/
	background: #100;
	clear: both;
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
	text-align:center;
	position:fixed;
	bottom:0;
}
#SocialMediaDiv img {
	margin: 3px 1px;
}



/********************************************************************************************* 

5. Welcome Message 

*********************************************************************************************/   
 
#heading {
	float: left;
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
}
 
#heading .action {
	float:right;
	margin:50px;
	background: url("v4/images/button.png") no-repeat 0 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    color: #525c69;
    /*position: relative;
    overflow: visible;*/
    padding: 13px 0;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    line-height:1.1;
}

#heading .action:hover {
	text-decoration:none;
	color:#747F8F;
}

#heading .action:active {
	top:1px;
}
	
#heading .action span {
    position: relative;
    /**/white-space: nowrap;
    left: 24px;
    padding: 13px 24px 13px 0;
    top: 1px;
    background: url("v4/images/button.png") no-repeat 100% 0;
}







ul.inline-items li {
	display: inline-block
}

.global-nav {
	/*
	float: left;
	width: 100%;
	margin: 0 auto;
	border-bottom: 1px solid #eee;
	clear: both;
	*/
	text-align: center;
	display: block;
	font-size: .76em;
	color:#FFF;
}

.global-nav ul {
	/*width: 960px;
	max-width: 100%;*/
	margin: 0 auto;
	line-height: 42px;
	background: #000;
}
.global-nav li {
	margin-right: 20px;
}
.global-nav a {
	color:#FFF;
	text-decoration:none;
	text-transform: uppercase;
}
.global-nav li:first-child a {
	/*
	position:absolute;
	top:0px;
	left:100px;
	*/
	display: inline-block;
	line-height: 42px;
	width: 35px;
	overflow: hidden;
	text-indent: 100%;
	margin-top: 2px;
	vertical-align: middle;
	/*
	vertical-align: top;
	margin-left: -200px;*/
	background: url(v4/imgs) no-repeat center -4px;
}














.hotspot {
	position: absolute;
	z-index: 1;
	cursor:default;
	/*
	white-space: nowrap;
	margin-top: -1ex;
	font-size: 200px;
	opacity: 0.8;*/
}




#headlineDiv {
	clear: both;
	float: left;
	width: auto;
	display: block;
	margin: 0;
	padding: 0;
	/*padding-left: 10px;
	 */
}
#headlineDiv p,h1{
	margin:0;
	padding:0;
}

#headlineTxt {
	/*position:relative;
	width:100%;
	text-align: right;
	text-transform: uppercase;*/
	text-align: left;
	margin: 0;
	margin-top: 40px;
	padding: 0px;
	/*width:75%;*/
	width:90%;
}
#headlineTxt h1 {
	font-size:3.0em;
	line-height:1.03em;	/* set very precisely */
	margin-bottom:0px;
	/*font-family: 'Antonio Bold', sans-serif;
	font-family: 'Antonio Regular', sans-serif;
	text-transform: uppercase;*/
	font-weight:700;
	opacity:.96;
}

#headlineTxt p.headlineDescription1 {
	opacity:.9;
	/*font-variant: small-caps;
	font-style:normal;
	background-color:#a00;*/
	margin: 5px 0 12px 4px;
	letter-spacing: inherit;
	font-size: .9em;
	text-transform:uppercase;
	font-weight:200;
	line-height:1.15em;	/* set very precisely */
	background: #900 url(v4/images/energetika-bg1-800x50px.png) repeat left top;
}

#headlineTxt p.headlineDescription2 {
	line-height:1.42em;
	width:100%;
}






#description-headline {
	/*
	padding: 90px 0 0 8%;
	padding: 70px 14%;
	margin: 0;
	width: auto !important;
	margin: auto;*/
	font-size:110%;

}

#description-headline1 {
	/**/
	clear:both;
	margin: 0;		/* 14% #LayoutDiv1 header rule */
	padding-bottom: 10px;
	background-color:#000;
	padding-left: 12px;
    /* */
}
#description-headline2 {
	/**/
	margin-top: -8px;
	padding-right: 20px;
	text-align:right;
}

#emailLink a:link {
	background-color: #C00;
	padding: 2px 14px;
}
#emailLink a:visited {
	background-color: #C00;
}
#emailLink a:hover {
	background-color: #FFF;
	color:#111;
}
#emailLink a:active {
	background-color: #F00;
}






#textRollDiv1 {
	/*position: absolute;
	bottom: 0;
	display: block;*/
	position:relative;
	clear:both;
	width: 100%;
	height: 30px;
	padding: 0;
	margin: 0;
	/*
	padding-bottom: 40px;
	top: 20px;
	background: #900 url(imgs/zastrcka-sm-wh-100x250.png) no-repeat left top;*/
}

#textRollDiv2 {
	width:100%;
	
	position: absolute;
	/*top: -8px;
	margin-top: -8px;*/
	background-color:#fff;
}
#textRollDiv3 {
	position: relative;
	width:100%;
	margin:0 auto;
	/*
	width:30%;
	text-align:center;
	display:block;*/
	overflow:hidden;
}
.textRoll{
	text-align:center;
	color:#000;
	font-size:1.3em;
	font-weight:bold;
	padding: 0;
	margin: 0;
}





#description-headline2 span
{
    /**/line-height: normal;
    display:inline-block;
    vertical-align: middle;
}















#content00 {
	/*
	padding: 0px 50px 0px 200px;
	  -webkit-border-radius: 20px;
		 -moz-border-radius: 20px;
			  border-radius: 20px;
	background: #FFF;
	color:#000;*/
    right: 50px;
	z-index: 20;
	opacity:.95;
	margin: 0px;
	padding: 0px;
}




.hotspot a:link { color: #FFF; background:#000; text-decoration: none; padding: 12px 24px;}
.hotspot a:visited { color: #FFF; background:#000; text-decoration: none}
.hotspot a:hover { color: #000; background:#FFF; text-decoration: none; font-size:110%;}
.hotspot a:active { color: #000;}





.stretch-the-type {
    /*display:inline-block;*/
    transform:scale(1,1.2); /* W3C */
    -webkit-transform:scale(1,1.2); /* Safari and Chrome */
    -moz-transform:scale(1,1.2); /* Firefox */
    -ms-transform:scale(1,1.2); /* IE 9 */
    -o-transform:scale(1,1.2); /* Opera */
}







/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
		
	a:link {
		/*text-decoration: underline;*/
	}
		
		


	#headlineDiv {
		/*padding-left: 0;*/
	}
	#headlineTxt {
		margin-top:30px;
	}
	#headlineTxt h1 {
		font-size:2.5em;
		width:100%;
	}
	#headlineTxt p {
		/* font-size:2.5em;*/
	}


	#description-headline {
		/**/
		margin-top:50px;
		text-align:left;
		padding-right: 10%;
		/**/padding-left: 14%;
	}

	#description-headline1 {
		background-color:transparent;
	}

	#description-headline2 {
		text-align:left;
		padding:0;
		margin:0;/**/
	}

}



/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
	#gridContainer {
		/**/
		margin: auto;
	}
	#layoutContainer {
		padding-bottom: 6%;		/* to include bg-image, use padding */
	}




	/* copied from 481px */

	#gridContainer {
		padding-left: 0;
		padding-right: 0;
	}

	#layoutContainer {
		/*padding-left: 14%*/
	}

	#LayoutDiv1 {
		width: 50%;
		float: left;
		background-color: transparent;
		margin: 0;
		padding: 0;
	}
	#LayoutDiv1 header {
		/*padding: 90px 0 0 8%;*/
		/*padding: 70px 28% 70px 14%;*/
		padding: 70px 28% 0 14%;
		margin: 0;
		width: auto !important;
		text-align:left;
	}
	#LayoutDiv1 iframe {	/* for Youtube embed */
		margin: 0;
		width: auto !important;
		text-align:left;
		
	}
	#LayoutDiv2 iframe {	/* for Youtube embed */
		margin: 0;
		width: auto !important;
		text-align:left;
		
	}

	#LayoutDiv1 h1,p {
		margin-right: 5%;		/* text needs some margin from right not to stick to image */
	}


	#LayoutDiv2 {
		width: 50%;
		float: left;
		margin: 0;
		padding: 0;
	}
	#LayoutDiv3 {
		clear:both;
		width: 50%;
		float: left;/**/
	}
	#LayoutDiv4 {
		width: 50%;
		float: left;/**/
	}






	#description-headline {
		padding-right: 20%;
		font-size:1.44em;
	}

	#headlineTxt h1 {
		font-size:3.5em;
	}

	#headlineTxt p.headlineDescription1 {
		/*margin: -2px 0 8px 5px;
		font-weight:700;*/
		font-size: 1.4em;
		letter-spacing:.04em;
	}

	#headlineTxt p.headlineDescription2 {
		line-height:1.42em;
		width:74%;
	}


	#emailLink a:link {
		background-color: #800;
		padding: 8px 22px;
		font-size:80%;
	}
	#emailLink a:visited {
		background-color: #800;
	}
	#emailLink a:hover {
		background-color: #FFF;
	}


	#textRollDiv3 {
		position: relative;
		width:40%;
		margin:0 auto;
		/*
		width:30%;
		text-align:center;
		display:block;*/
		overflow:hidden;
	}




}



/* Bigscreen Layout */

@media only screen and (min-width: 1360px) {
/*@media only screen and (min-width: 1160px) {*/
	#gridContainer {
		width:auto;
		margin: auto 1% auto 1%;
	}


	#tagline p {
		/*font-size: 36px;
		font-size:1.6em;
		font-size:200%;*/
		font-size:1.4em;
	}

	#headlineTxt h1 {
		font-size:5.5em;
	}



}



@media only screen and (min-width: 2100px) {
/*@media only screen and (min-width: 1160px) {*/
	#gridContainer {
		margin: auto 10% auto 10%;
	}
}




@media print
  {
  	/*#LayoutDiv1 header h1 {display:block;}*/
  }





/* =============================================================================
       Links
       ========================================================================== */
/*
     * Addresses `outline` inconsistency between Chrome and other browsers.
     */

a:focus {
  outline: thin dotted;
}

/*
     * Improves readability when focused and also mouse hovered in all browsers.
     */

a:active,
a:hover {
  outline: 0;
}