/* ------------ RESET DEFAULTS ------------ */

* { margin: 0; } html, body {width: 100%; height: 100%; }
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p { margin: 0; padding: 0; }
fieldset,img { border: 0; } ol,ul { list-style: none; } 
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } 
a {text-decoration: none;}


/* ------------ BEGIN MAIN LAYOUT ------------ */

body { background: #FFF; font-family: Trebuchet MS, Arial; color: #000; }

.wrapper  
{
    width: 100%; max-width:1000px; height: 100%; min-height: 100%; position: relative; margin: 0 auto;
    /*background-image: url(../Img/ilustration_bottom.gif); background-repeat: no-repeat; background-position: center bottom;*/
}

.MainLogo{
    position:relative;
    width:100%;
    border-bottom: 10px solid #000;
    padding-bottom: 5px;
    background-color: #fff;
}
.MainLogo a{
  float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 84px;    
    font-weight: 800;
    color:black;
}
.MenuVolume{
    font-family: 'Open Sans', sans-serif;
    font-size: 72px;    
    float:left;
    width:25%;
    font-weight: 800;
    padding-left:3px;
}

.MenuNaslov{
    margin-top:12px;
    font-family: 'Open Sans', sans-serif;
    font-size: 32px;    
    float:left;
    line-height: 37px;
    width:calc( 75% - 3px );
    font-weight: 800;
}



.introSubMenu {
    text-align: left;
    display: block;
    font-family: 'Open Sans', sans-serif;
    width:100%!important;
    font-size: 84px;    
    font-weight: 800;
    color:black;
    cursor: pointer;
    line-height:88px;
    border-bottom: 1px solid #000;
    padding-bottom: 15px;
    padding-top: 0px!important;;
}


.content { padding: 0 0 40px 0; }
.content h1 { font-family: 'Open Sans', sans-serif; font-size: 72px; padding: 10px 0;}
.content p { font-family: 'Open Sans', sans-serif;font-size: 22px; padding: 10px 0; text-align: justify;}







ul.main_menu { position: relative}
ul.main_menu li { width: 100%; margin: 0 0 0 0; border-bottom: 1px solid #000;}
ul.main_menu li a { overflow: hidden;  display: block; width: 100%;color: #000; background-color: #FFF }
ul.main_menu li a:hover { overflow: hidden;  display: block; width: 100%; color: #FFF; background-color: #000}
ul.main_menu li:hover, ul.main_menu li.selected a{color: #FFF; background-color: #000}
ul.top_menu { position: relative;display:inline-block;background-color: black;}
ul.top_menu li { height: 20px; background: #FFFFFF; float: left; margin: 0 0 0 3px;}
ul.top_menu li:first-child { margin: 0 0 0 0;padding-right:5px;}
ul.top_menu li a { font-size: 18px; color: #000000; text-align: center; line-height: 24px; padding-left:5px;}


.volume-intro { text-align: center;margin-top: 10px; }
.volume-menu{margin:0 auto}

.volume-menu img:first-child { border-right: solid 1px #fff; margin-right: 10px;  }
.volume-menu img { padding: 0 20px; cursor: pointer; }
.volume-content { width: 600px;margin-top:  20px;   }


.gallerycontainer { }
.thumbnail { float: left; margin: 10px 10px 0 0; max-height: 92px; }

.ilustration_top  
{
    position: absolute; top: 0; left: 352px;  width: 255px; height: 85px; 
    background-image: url(../Img/ilustration_top.gif); background-repeat: no-repeat;
}
    
.ilustration_right 
{
    position: absolute; top: 277px; right: 0;  width: 79px; height: 327px; 
    background-image: url(../Img/ilustration_right.gif); background-repeat: no-repeat;    
}

.ilustration_bottom 
{
    position: absolute; bottom: 0px; left: 352px;  width: 147px; height: 64px; 
    background-image: url(../Img/ilustration_bottom.gif); background-repeat: no-repeat;    
}
li.volume-intro{
 
}
li.volume-intro:hover{
    background-color:#FFF!important;
}

.language_picker { position: absolute; top: -35px; right: 0; font-size: 12px; font-weight: normal; line-height:30px;}
.language_picker a { color: #333;font-size: 12px; }
.language_picker a:visited { color: #333;}
.language_picker a.selected { font-weight: bold; color: #000;}

.MenusHead{display:block;position: relative; text-align: right;overflow: hidden;padding-right:3px;padding-top:29px;}
.language_picker_main{  float: none;font-size: 18px; font-weight: normal; line-height: 40px;}
.language_picker_main a { display: inline;color: #ccc;font-size: 18px;float: none; }
.language_picker_main a:visited { color: #ccc;}
.language_picker_main a.selected { font-weight: bold; color: #000;}

.window_msg a { color: #666666; width: 500px;}

/* HOME PAGE */

ul.teasers { position: absolute; top: 127px; left: 127px; width: 275px;  }
ul.teasers li { margin: 0 0 20px 0; font-size: 12px; line-height: 16px;}
ul.teasers li h2 {font-size: 14px; font-weight: bold;}

.ilustrationWords_right  
{
    position: absolute; top: 54px; right: 63px;  width: 253px; height: 203px; 
    background-image: url(../Img/ilustrationWords_right.gif); background-repeat: no-repeat; 
}

.ilustrationWords_left 
{
    position: absolute; top: 420px; left: 116px;  width: 266px; height: 309px; 
    background-image: url(../Img/ilustrationWords_left.gif); background-repeat: no-repeat;  
}

.ilustrationCube 
{
    position: absolute; top: 195px; left: 425px;  width: 174px; height: 186px; 
    background-image: url(../Img/ilustrationCube_center.gif); background-repeat: no-repeat;    
}

.articlecontent_left { font-size:12px; text-align:justify; width:600px; padding:20px 0; }
.articlecontent_left  h1 { text-align: left;}


.gradient {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:1280px;
	z-index:-1;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI4MSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(81%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 81%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0) 81%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 81%,rgba(0,0,0,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 81%,rgba(0,0,0,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
}

.gradient1{

	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:1280px;
	z-index:-1;

    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

	
/*	 IE9 SVG, needs conditional override of 'filter' to 'none' 
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjM2Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjgxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjM0Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.34) 81%, rgba(0,0,0,1) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.36)), color-stop(81%,rgba(0,0,0,0.34)), color-stop(100%,rgba(0,0,0,1))); 
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.36) 0%,rgba(0,0,0,0.34) 81%,rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(top,  rgba(0,0,0,0.36) 0%,rgba(0,0,0,0.34) 81%,rgba(0,0,0,1) 100%); 
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.36) 0%,rgba(0,0,0,0.34) 81%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0.36) 0%,rgba(0,0,0,0.34) 81%,rgba(0,0,0,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c000000', endColorstr='#000000',GradientType=0 ); 
*/
}

@media screen and (max-width: 1000px) {
  body { background: #FFF; font-family: Trebuchet MS, Arial; color: #000; margin:10px;}
  .content p { font-family: 'Open Sans', sans-serif;font-size: 3.3vw; padding: 10px 0; text-align: justify;}
  .MainLogo{
    border-bottom: 1vw solid #000;
    width: calc(100% - 10px);
  }
  
  .MainLogo a{
    font-size: 8vw;    
  }
  
    .MenuVolume{
        font-size: 7vw;    
    }
  .MenuNaslov{
        margin-top:1vw;
        font-size: 5vw;
        line-height:5vw;
    }
    .introSubMenu {
        font-size: 8vw!important;
        line-height:  9vw;
    }
    
    ul.main_menu li { width: calc(100% - 10px); margin: 0 0 0 0; border-bottom: 1px solid #000;}
    .volume-content, .articlecontent_left{
      width: calc(100% - 20px); 
    }
    #ctl00_ContentPlaceHolder1_ArticleControlLoader1_ctl00_video object embed{      
      width:100%!important;
      height: 600px!important;
    }
    .wrapper  
    {
        width: calc(100% - 60px); 

    }
    .language_picker_main a{
      font-size:6vw;
    }
    .MenusHead{width:100%}
    
    .articlecontent_left{font-size: 35px!important;}
    .articlecontent_left p{font-size: 35px!important; line-height: 40px!important}
    
}

@media screen and (max-width: 400px) {
  
  .MenuNaslov{
        font-size: 16px;
        line-height:17px;
    }
}