/* =========================== Font-face ======================= */
/* ============================================================= */
@font-face {
    font-family: 'pfdindisplay-light';
    src: url('fonts/pfdindisplaypro-light-webfont.eot');
    src: url('fonts/pfdindisplaypro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pfdindisplaypro-light-webfont.woff') format('woff'),
         url('fonts/pfdindisplaypro-light-webfont.ttf') format('truetype'),
         url('fonts/pfdindisplaypro-light-webfont.svg#pf_dindisplay_prolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pfdindisplay-regular';
    src: url('fonts/pfdindisplaypro-reg-webfont.eot');
    src: url('fonts/pfdindisplaypro-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/pfdindisplaypro-reg-webfont.woff') format('woff'),
         url('fonts/pfdindisplaypro-reg-webfont.ttf') format('truetype'),
         url('fonts/pfdindisplaypro-reg-webfont.svg#pf_dindisplay_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nexa-lightregular';
    src: url('fonts/nexa_light-webfont.eot');
    src: url('fonts/nexa_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/nexa_light-webfont.woff') format('woff'),
         url('fonts/nexa_light-webfont.ttf') format('truetype'),
         url('fonts/nexa_light-webfont.svg#nexa_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nexa-boldregular';
    src: url('fonts/nexa_bold-webfont.eot');
    src: url('fonts/nexa_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/nexa_bold-webfont.woff') format('woff'),
         url('fonts/nexa_bold-webfont.ttf') format('truetype'),
         url('fonts/nexa_bold-webfont.svg#nexa_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* main-menu icons */
@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-eg5h8');
	src:url('fonts/icomoon.eot?#iefix-eg5h8') format('embedded-opentype'),
		url('fonts/icomoon.woff?-eg5h8') format('woff'),
		url('fonts/icomoon.ttf?-eg5h8') format('truetype'),
		url('fonts/icomoon.svg?-eg5h8#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-book:before {
	content: "\e600";
}

.icon-leaf:before {
	content: "\e601";
}

.icon-photo:before {
	content: "\e602";
}


/* =========================== RESET =========================== */
/* ============================================================= */

/** * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Richard Clark (http://richclarkdesign.com) * http://cssreset.com */
html, 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, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	background:transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
	display:block;
}
ul{
	list-style:none;
}
a{
	margin:0;
	padding:0;
	font-size:100%;
	background:transparent;
	text-decoration: none;
	color: inherit;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
input[type="text"], input[type="submit"], input[type="button"], textarea{-webkit-appearance: none; font-family: Arial, Helvetica, sans-serif; border-radius: 0;}

h1, h2, h3, h4, h5, h6, p{margin: 0.5em 0; padding: 0;}
img{max-width: 100%;}

/* =========================== Layout styles =================== */
/* ============================================================= */

body{background: #fff; color: #000; font: 16px 'pfdindisplay-light', sans-serif;}
#wrap{min-height: 300px;}

/* logo */
#logo{float: left; width: 18%;}
#top{
	padding: 0; 
	margin: 0 auto 72px; 
	max-width: 2061px; 
	position: relative;
	background: url(../images/top-bg.jpg) no-repeat center top;
}
#main #top{background-image: none; margin-bottom: 0; left: 0; right: 0; position: fixed; z-index: 1000;}
#main{background: url(../images/bg-main.jpg) no-repeat center top; background-size: cover;}
#top-inner{
	background: #18bed8;
	background: -webkit-radial-gradient(rgba(86,211,221,0.8), rgba(64,188,203,0.8));
	background: -moz-radial-gradient(rgba(86,211,221,0.8), rgba(64,188,203,0.8));
	background: radial-gradient(rgba(86,211,221,0.8), rgba(64,188,203,0.8));
}
#top:after{background: url(../images/header-line.gif) no-repeat center top; height: 1px; width: 100%; position: absolute; bottom: 1px; content: ""; z-index: 2;}
#top header{height: 100px; padding: 20px 0 0 0; position: relative; width: 87%;}
#main.fixed-header{padding: 0;}
.fixed-header{padding: 192px 0 0 0;}
.fixed-header #lang{top: 21px;}
.fixed-header #logo img{margin: 8px 0 0; width: 160px;}
.fixed-header #top{position: fixed; margin: 0; left: 0; right: 0; top: 0; z-index: 30;}
.fixed-header #lang img{width: 30px;}
.fixed-header #top header{padding: 3px 0 0; height: 84px;}
.fixed-header #main-menu{font-size: 0.75em !important; padding-top: 16px;}
.fixed-header #main-menu > ul > li > a {padding-top: 32px;}

/* banner */
#banner{background-color: #f2f1ed; border-top: 1px solid #cccac6; border-bottom: 1px solid #cccac6; margin: 0 0 54px 0; position: relative;}
#banner .inner{max-width: 1290px; width: 100%; margin: 0 auto; position: relative;}
#banner img{display: block;}
#banner .waves{left: 10.07751937984496%; top: 22.3062381852552%; width: 51.47286821705426%; position: absolute; z-index: 20;}
#banner .main{margin: -40px 0 -1px 0; position: relative; z-index: 10; width: 32.94573643410853%; float: right;}
#banner h1{font: 47px/88% 'nexa-lightregular', 'pfdindisplay-light', sans-serif; color: #cccac6; display: block; margin: 0; position: absolute; left: 12.01550387596899%; bottom: 17.20226843100189%; z-index: 20;}
#banner h1, #banner .waves, #banner .main{opacity: 0; 
transition: opacity .4s ease-in; -webkit-transition: opacity .4s ease-in; -moz-transition: opacity .4s ease-in;}
#imagelightbox{
	position: fixed;
	z-index: 9999;
}
#imagelightbox-loading{background: url(js/source/fancybox_loading.gif) no-repeat center center;}

#frontpageContent-1{margin: 0 auto; max-width: 1220px;}
#frontpage-links li{position: absolute;}
#frontpageContent {padding: /*192px*/15.7% 0 0 0; position: relative; overflow: hidden;}
#frontpageContent .title{color: #fff; font: 30px 'nexa-boldregular', sans-serif; display: block; text-align: center;}
/*#frontpage-links li .title{position: absolute; z-index: 3;}*/

/* 669 
#ar {
    left: 33%;
    top: 16%;
	width: 235px;
	height: 341px;
}
#ar .title{left: 22%; right: 0;top: 3%;}

#gal {
    left: 57%;
    top: 0;
	width: 16.66666666666667%;
	height: 51.71898355754858%;
}
#gal::before, #gal::after{background-color: #fff; width: 1px; height: 70%; position: absolute; content: ""; top: 0; z-index: 1;}
#gal::before{left: 21%;}
#gal::after{right: 27%;}
#gal img{z-index: 2; position: absolute; bottom: 0; left: 0;}

#gal .title{bottom: 19%; left: 0; right: 0;}

#kka {
    bottom: 4%;
    left: 50%;
	width: 12.93333333333333%;
	height: 23.01943198804185%;
}
#kka .title{bottom: -22%; left: -13%; right: 0;}*/
/*
#frontpageContent {position: relative; height: 702px;}
#frontpageContent .item {position: absolute; z-index: 2;}
#frontpageContent .title {position: absolute; z-index: 4;}

#arImg {top: 192px; left: 0; width: 28.44%;}
#arLogo {top: 310px; left: 474px; width: 19.26%;}
#arTitle {left: 370px; top: 319px;}
#frontpageContent #arImg {z-index: 3;}
#frontpageContent #arTitle {z-index: 2;}

#galImg {right: 0; top: 286px; width: 19.91%;}
#galLogo {right: 250px; top: 0; padding: 305px 0 0 0; width: 18.6%;}
#galLogo img {position: relative; z-index: 2;}
#galTitle {right: 290px; top: 366px;}
#galLogo:before, #galLogo:after{background-color: #fff; width: 1px; height: 69%; position: absolute; content: ""; top: 0; z-index: 1;}
#galLogo:before{left: 21%;}
#galLogo:after{right: 27%;}

#kkaImg {bottom: 0; left: 310px; z-index: 3; width: 27.95%;}
#kkaLogo {bottom: -46px; left: 470px; z-index: 3; width: 42.7%;}
#kkaTitle {left: 608px; bottom: 60px;}
*/
#frontpageContent {position: relative;}
#frontpageContent .item {position: absolute; z-index: 2;}
#frontpageContent .title {position: absolute; z-index: 4;}

#arImg {top: 21.35%; left: 0; width: 28.44%;}
#arLogo {top: 34.48%; left: 38.85%; width: 19.26%;}
#arTitle {left: 30.32%; top: 35.48%;}
#frontpageContent #arImg {z-index: 3;}
#frontpageContent #arTitle {z-index: 2;}

#galImg {right: 0; top: 31.81%; width: 19.91%;}
#galLogo {right: 20.49%; top: 0; padding: 25% 0 0 0; width: 18.6%;}
#galLogo img {position: relative; z-index: 2;}
#galTitle {right: 23.77%; top: 41.2%; width: 12%;}
#galLogo:before, #galLogo:after{background-color: #fff; width: 1px; height: 69%; position: absolute; content: ""; top: 0; z-index: 1;}
#galLogo:before{left: 21%;}
#galLogo:after{right: 27%;}

#kkaImg {bottom: 0; left: 25.40%; z-index: 3; width: 27.95%;}
#kkaLogo {bottom: -4.56%; left: 38.52%; z-index: 3; width: 42.7%;}
#kkaTitle {left: 49.83%; bottom: 6.67%;}

#frontpageContent .item {opacity: 0; transition: opacity .4s ease-in; -webkit-transition: opacity .4s ease-in; -moz-transition: opacity .4s ease-in;}

#frontpageContent #arImg{
	-webkit-transform: translate(-40px, 0);	
	-moz-transform: translate(-40px, 0);
	transform: translate(-40px, 0);
}
#frontpageContent #arLogo {
	-webkit-transform: translate(0, 40px);	
	-moz-transform: translate(0, 40px);
	transform: translate(0, 40px);
	animation-delay: 0.4s; -webkit-animation-delay: 0.4s; 
	transition-delay: 0.4s; -webkit-transition-delay: 0.4s; 
}
#frontpageContent #arTitle {
	-webkit-transform: translate(-80px, 0px);	
	-moz-transform: translate(-80px, 0px);
	transform: translate(-80px, 0px);
	animation-delay: 1s; -webkit-animation-delay: 1s;
	transition-delay: 1s; -webkit-transition-delay: 1s;
}
#frontpageContent #galImg {
	-webkit-transform: translate(80px, 0px);	
	-moz-transform: translate(80px, 0px);
	transform: translate(80px, 0px);
	animation-delay: 2s; -webkit-animation-delay: 2s;
	transition-delay: 2s; -webkit-transition-delay: 2s;
}
#frontpageContent #galLogo {
	-webkit-transform: translate(0, -80px);	
	-moz-transform: translate(0, -80px);
	transform: translate(0, -80px);
	animation-delay: 2.4s; -webkit-animation-delay: 2.4s;
	transition-delay: 2.4s; -webkit-transition-delay: 2.4s;
}
#frontpageContent #galTitle {
	transition-delay: 3s; -webkit-transition-delay: 3s;
}
#frontpageContent #kkaImg {
	-webkit-transform: translate(80px, 0px);	
	-moz-transform: translate(80px, 0px);
	transform: translate(80px, 0px);
	animation-delay: 4s; -webkit-animation-delay: 4s;
	transition-delay: 4s; -webkit-transition-delay: 4s;
}
#frontpageContent #kkaLogo {
	-webkit-transform: translate(0, -80px);	
	-moz-transform: translate(0, -80px);
	transform: translate(0, -80px);
	animation-delay: 4.4s; -webkit-animation-delay: 4.4s;
	transition-delay: 4.4s; -webkit-transition-delay: 4.4s;
}
#frontpageContent #kkaTitle {
	transition-delay: 5s; -webkit-transition-delay: 5s;
}
#frontpageContent .item {
	-webkit-animation: come-in 1.1s ease forwards;
	-moz-animation: come-in 1.1s ease forwards;
	animation: come-in 1.1s ease forwards;
}
#main.an #frontpageContent .item {opacity: 1;}


/* main-content */
#main-content{font-size: 1em;}
#main-content h2, #main-content h1{font: 1.5625em 'nexa-lightregular', 'pfdindisplay-light', sans-serif; text-transform: uppercase; padding: 0 6px 0 6px; margin-top: 0; margin-bottom: 10px;}

/* featured */
#featured{overflow: hidden; padding: 0 0 29px 0; font-family: 'nexa-lightregular', 'pfdindisplay-light', sans-serif;}
#featured > li > a{padding: 51px 1.5% 35px 1.5%; display: block;}
#featured > li{text-align: center; float: left; width: 32.07207207207207%; margin-bottom: 21px; background-color: #f2f1ed; 
opacity: 0; transition: opacity 1s ease-in; -webkit-transition: opacity 1s ease-in; -moz-transition: opacity 1s ease-in;
box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
#featured > li.second-block{margin-left: 1.891891891891892%; margin-right: 1.891891891891892%;}
#featured p{font-size: 0.875em; margin: 0 0 24px 0; height: 55px;}
#featured .icon{padding: 0 0 12px 0;}

/* content */
#content{padding: 0 0 82px 0;}
#left-col{width: 25.5%; margin: 0 4.5% 0 0; float: left;}
#right-col{width: 70%; float: right;}

/* bottom */
#bottom{background: #333; color: #fff;}
#bottom h2{font-size: 1.5625em; text-transform: uppercase;}
#bottom p{ font-size: 0.875em; line-height: 150%;}
footer{position: relative; padding: 42px 0 100px 0; background: url(../images/decor-kraan.gif) no-repeat right 58px;}
footer .arrow{position: absolute; bottom: 100%; left: 100%; background: url(../images/footer-arrow.gif) no-repeat; width: 31px; height: 23px;}

/* gallery */
.gallery{overflow: hidden; padding: 22px 0 82px 0; margin: 0 0 0 -20px; font-size: 0;}
.gallery li{vertical-align: top; display: inline-block; margin: 0 0 20px 1.769911504424779%; padding: 5px 5px 20px 5px; border: 1px solid #cccac6; width: 23.1858407079646%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
.gallery li a{font-size: 14px;}
.gallery li:nth-child(4n){}
.gallery li a, .gallery li span{display: block;}
.gallery li .thumb{margin: 0 0 15px 0;}
.gallery li .title{color: #cccac6; padding: 0 8px; font: 1em/117% 'nexa-lightregular', 'pfdindisplay-light', sans-serif;}
.gallery img{display: block; margin: 0 auto;}
.gallery li:hover img{opacity: 0.7; filter: alpha(opacity=70);}

div.gallery-module{opacity: 0; transition: opacity 1s ease-in; -webkit-transition: opacity 1s ease-in; -moz-transition: opacity 1s ease-in;}

/* ====================== Menus, lang, breadcumbs ============== */
/* ============================================================= */
/* main-menu */
#main-menu{float: left; width: 72%; font-size: 1em; padding: 10px 0 0 5%;}
#main-menu > ul > li{float: left; text-align: center; position: relative; margin-left: 6%;}
#main-menu > ul > li > a{padding-top: 44px;}
#main-menu > ul > li > a:before{color: #fff; position: absolute; top: 0; left: 0; right: 0; font-size: 2.2em; text-align: center;}
#main-menu > ul > li > a > span{color: #fff; font: 1.5em 'nexa-lightregular', 'pfdindisplay-light', sans-serif; display: block; background: url(../images/arrow-menu-item.png) no-repeat right center; padding: 0 18px 0 0;}
#main-menu ul li a{display: block;}
#submenu li.active > a {
    text-decoration: underline;
}
.toggle-menu{display: none; cursor: pointer; 
border-radius: 3px; background: rgba(255, 255, 255, 0.47) url(../images/toggle-menu.png) no-repeat center center; width: 51px; height: 41px; margin: 0 auto 11px auto; }

/*
#main-menu > ul > li.child3n{
    display: none;
}*/

/* submenu */
#submenu li{padding: 10px 0;}
#submenu li a{text-transform: uppercase; font-size: 20px; padding-left: 21px;}
#submenu ul ul{padding: 10px 0 0 21px;}
#submenu li li{padding: 0; margin: 4px 0;}
#submenu li li a{text-transform: none; font-size: 16px; padding: 5px 0 5px 7px;}
#submenu li li a span{padding-left: 19px;}
#submenu ul ul ul{padding: 10px 0 0 26px;}

#submenu ul ul li.active > a{background: url(../images/active-bg.gif) repeat-y left; text-decoration: underline;}

#submenu > ul > li > a.dcjq-parent, #submenu li li a.dcjq-parent span{background: url(../images/arrows1.png) no-repeat 0 7px;}
#submenu > ul > li > a.dcjq-parent.active, #submenu li li a.active span{background-position: 0 -62px;}
#submenu a, #submenu span{display: block;}

/* lang */
#lang{position: absolute; right: 0; top: 30px;}
#lang li{display: block; padding: 0 0 7px 0; text-align: center; float: left; margin: 0 0 0 10px;}
#lang img{display: block; vertical-align: middle; width: 38px; margin-bottom: 5px;}
#lang li a{display: block; color: #fff; font-size: 13px; text-transform: uppercase; white-space: nowrap;}
#lang li.active a{font-weight: bold;}

.iframe-video {margin: 15px 0;}
/* ======================= article styles ====================== */
/* ============================================================= */
#article{padding: 0; font-size: 1em; line-height: 140%; color: #333; text-align: justify;}
#article b{font-weight: bold;}

#article h1{font: 25px 'pfdindisplay-light', sans-serif; margin: 0 0 24px 0; padding: 0 0 4px 0; text-transform: uppercase; border-bottom: 1px solid #3ebbcb; text-align: left;}
#article h2, #article h3{font: 20px 'pfdindisplay-regular', sans-serif; margin: 0 0 3px 0; color: #3ebbcb; text-align: left;}
#article h3{color: #333;}

#article ul{padding-left: 1px; margin: 0 0 20px 0;}
#article li{margin-bottom: 5px !important; margin-top: 5px !important;}

#article ul li, .list-style{padding: 0px 0 0 13px; margin: 0; background: url(../images/article-list-style.gif) no-repeat left 9px;}
#article ul ol li{background: none; padding: 0 0 0 0;}
#article ol ul li{padding: 0px 0 0 13px;}

#article ol{padding: 0 0 0 22px; margin: 0 0 20px 0;}
#article ol ol{padding: 0 0 0 20px;}
#article ol li{padding: 0; margin: 0;}

#article table{border-collapse: collapse; margin: 2em 0; width: 100%;}
#article table, #article td, #article th{border: 1px solid #bcb6b6;}
#article td, #article th{padding: 8px 10px;}
#article th{text-align: left; font-weight: bold; color: #000; background: #eee;}
#article table.noborder, #article table.noborder td, #article table.noborder th{border: none;}

#article caption{color: #fff; background-color: #2d0014; text-align: left; padding: 5px 8px;}
#article table p{margin: 0;}
#article p{margin: 0 0 25px 0;}
#article p.list-style{}
#article a{text-decoration: underline; color: #0278bc;}
#article a:hover{text-decoration: none;}
#article sub, #article sup {
    font-size: 11px;
}

.image-container{margin: 25px 0 25px 0;}
.image-container.floatLeft{float: left; margin: 0 2em 10px 0;}
.image-container.floatRight{float: right; margin: 0 0 10px 2em;}
.image-container .title{display: block;}
#article .image-container a, #article .half-half a{text-decoration: none;}
#article a .title{color: #7f7f7f; display: block; text-align: center; font-size: 13px; line-height: 145%;}
.half-half{font-size: 0;}
.half-half.float{overflow: hidden;}
.half-half .left, .half-half .right{display: inline-block; text-align: left; width: 50%; padding: 0 4% 0 0; height: 100%; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box;}
.half-half.float .left{float: left; width: auto;}
.half-half.float .right{float: right; width: auto;}
.half-half .right{text-align: right; padding: 0 0 0 4%;}
.half-half img{display: inline-block; vertical-align: middle;}
.half-half .alignRight {text-align: right;}
.half-half .alignLeft {text-align: left;}
.alignRight img, .alignLeft img {display: inline;}

.cols{font-size: 0;}
.cols > div{display: inline-block; vertical-align: top; font-size: 16px; box-sizing: border-box; -moz-box-sizing: border-box;}
.cols.three > div{width: 33.33333333333333%;}
.cols.three > div.col1{padding-right: 3%;}
.cols.three > div.col2{padding: 0 1.5%;}
.cols.three > div.col3{padding-left: 3%;}

.cols .thumb{padding: 0 0 20px 0;}
#article .cols h3 {
    margin: 0 0 21px;
}
.cols h3 span {
    display: block;
    font-size: 13px;
}

/* global */
.bold{font-weight: bold;}
.file{display: inline-block; text-decoration: none !important; padding: 8px 0 7px 38px; line-height: 98%;}
.file.pdf{background: url(../images/icon-pdf.gif) no-repeat left center;}
.centered1{max-width: 1110px; width: 100%; margin: 0 auto;}
.alignCenter{text-align: center;}
.button{color: #fff !important; text-decoration: none !important; text-transform: uppercase; text-align: center; font: 20px 'nexa-boldregular', 'nexa-lightregular', 'pfdindisplay-light', sans-serif; display: inline-block; background: #0fc5a7; padding: 11px 35px 8px 35px; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px;}
.button.indigo{background-color: #6a7dba;}
.button.cyan{background-color: #43a1e3;}
input.button{border: none;}
.button:after{content: " >>";}
.italic{font-style: italic;}
.separator{display: block; margin: 10px 0; background: #000; height: 1px;}
.border-grey{border: 1px solid #bfbfbf;} 
.upperCase{text-transform: uppercase;}

div.clear{clear:both; height:0px; font-size:0px; line-height:0px;}
.floatLeft{float:left;}
.floatRight{float:right;}
/* ============================== animation ======================= */
/* ============================================================= */
.already-visible {
	transform: none;
	-moz-transform: none;
	-webkit-transform: none;
	animation: none;
}
.come-in{
	-webkit-animation: come-in 1.1s ease forwards;
	-moz-animation: come-in 1.1s ease forwards;
	animation: come-in 1.1s ease forwards;
	opacity: 1 !important;
}
@-webkit-keyframes come-in {
	to { -webkit-transform: translate(0, 0); }
}
@-moz-keyframes come-in {
	to { -moz-transform: translate(0, 0); }
}
@keyframes come-in {
	to { transform: translate(0, 0); }
}



/* =========================== media queries ======================= */
/* ============================================================= */
@media screen and (max-width: 1366px){
	#frontpage-links li a{font-size: 28px;}
}

@media screen and (max-width: 1180px){	
	#main-menu{font-size: 0.82em;}
	#lang img{width: 30px;}
		
	#frontpage-links li a{font-size: 25px;}
	#frontpageContent .title{font-size: 27px;}
}
@media screen and (max-width: 1052px){
	#frontpageContent .title{font-size: 24px;}
}
@media screen and (max-width: 1024px){		
	#main{background-size: 106% auto;}
	#frontpage-links li a{font-size: 20px;}
	#raamat{top: 21%;}
	#main-menu{font-size: 0.75em;}
	#top{margin: 0 0 51px 0;}
	#top header, #main-content, #content, footer.centered1{width: 94%; margin: 0 auto;}

	#top header {
		height: 85px;
		padding: 10px 0 0;
	}
	#lang{top: 20px;}
	#lang li {
		display: inline-block;
		margin: 0 20px 0 0;
		padding: 0;
		vertical-align: middle;
	}
	#lang img{width: 24px;}
	#main-menu > ul > li > a{padding-top: 34px;}
	footer .arrow {
		left: auto;
		right: 0;
	}	
	.fancybox-nav{width: 50% !important;}
	.fancybox-nav span{visibility: visible !important;}
}
@media screen and (max-width: 1006px){
	#frontpageContent .title{font-size: 21px;}
}
@media screen and (max-width: 900px){
	#frontpage-links li a{font-size: 16px;}
	#main-menu{font-size: 0.65em; padding-left: 3%;}	
	#main-menu > ul > li{margin-left: 32px;}
	#banner h1{font-size: 42px;}
	#main-content h2 {
		font-size: 1.2625em
	}
	.button{padding: 7px 28px 5px; font-size: 17px;}
	
	.cols.three > div{width: 50%;}
	.cols.three > div.col1,
	.cols.three > div.col2,
	.cols.three > div.col3{padding: 0 2%;}
}
@media screen and (max-width: 810px){
	#submenu li a {
		font-size: 18px;
	}
	#main #top {position: absolute;}
	
	#frontpageContent .title{font-size: 19px;}
}
@media screen and (max-width: 767px){
	#top{background: url("../images/bg-main.jpg") no-repeat center top;}
	#frontpage-links li a{font-size: 14px;}
	#raamat{top: 25%;}
	#logo, #main-menu, #main-menu > ul > li{float: none;}
	#top header{height: auto;}
	#logo{text-align: center; float: none; width: auto; margin: 0 0 19px 0;}
	
	#main #logo{float: left; margin: 0 0 12px 0;}	
	#main #logo img{width: 135px;}
	#frontpageContent .title{font-size: 17px;}
	#main {
		background-position: center;
		background-size: auto;
	}
	
	#main #main-menu{display: none;}
	
	#banner h1{font-size: 32px;}
	#main-menu {
		font-size: 1em;
		float: none;
		padding: 0 0 16px 0;
		width: auto;
		text-align: center;
	}
	#main-menu > ul{
		display: none;
	}
	#main #main-menu > ul, #main #lang{
		display: block;
	}
	#main-menu > ul > li{margin: 0 0 10px 0;}
	#main-menu > ul > li > a:before{left: -9999px;}
	#main-menu > ul > li > a{padding: 6px 0;}
	#main-menu > ul > li > a > span{display: inline-block;}
	#submenu ul ul li.active > a{background: none;}
	#submenu li li a.dcjq-parent span{background-position: 0 5px;}
	#submenu li li a.active span{background-position: 0 -64px;}

	.toggle-menu{display: inline-block;}
	#main .toggle-menu{display: none;}
	
	
	#featured > li {
		float: none;	
		width: auto;
	}
	#featured > li > a{
		padding-top: 38px;
	}
	#featured > li.second-block{margin-left: 0; margin-right: 0;}
	
	#main-content h2{text-align: center;}
	
	#left-col, #right-col{float: none; width: auto; margin: 0;}
	#left-col {
		margin: 0 0 48px;
	}
	

	#submenu{text-align: center;}
	#submenu ul ul{padding: 0; margin-top: 10px;}	
	#submenu ul ul ul{padding: 0;}
	#submenu li li {margin: 4px 0;padding: 12px 0;}
	#submenu ul ul li.active{background: #f0efee;}
	#submenu li.active > ul{background: #FAF9F8;}
	#submenu ul ul ul{background: #fff;}
	#submenu li li li{margin: 0;}
	#submenu li a {padding: 0 21px;}
	#submenu li li a{padding: 0 26px;}
	#submenu a{display: inline-block;}
	
	.gallery {
		margin: 0;
		padding: 0 6%;
	}
	.gallery li {
		margin: 0 5% 52px;
		width: 40%;
	}
	#featured > li.middle-block{margin-left: 0; margin-right: 0;}
	footer .arrow{display: none;}
	
	.cols.three > div{width: 33.33333333333333%;}
	.cols.three > div.col1{padding-right: 3%;}
	.cols.three > div.col2{padding: 0 1.5%;}
	.cols.three > div.col3{padding-left: 3%;}
	
	#avalehe-kuva{visibility: hidden; opacity: 0;}
	
	#frontpage-content{overflow: hidden;}
	#frontpage-links li {

	}
	#frontpage-links li a{font-size: 28px;}
	#raamat {
		left: -6%;
		top: 11%;
		width: 41.33148404993065%;
		height: 44.89795918367347%;
	}
	#pildiraam {
		right: 0;
		left: auto;
		top: -27%;
		width: 34.67406380027739%;
		height: 98.21428571428571%;
	}
	#keskkond {
		bottom: 15%;
		left: 30%;
		width: 26.90707350901526%;
		height: 43.62244897959184%;
	}
}
@media screen and (max-width: 700px){
	#main-content #frontpageContent .item {
		opacity: 1;
		-webkit-animation: none;
		-moz-animation: none;
		animation: none;
		-webkit-transform: none;	
		-moz-transform: none;
		transform: none;
	}
	#arImg, #galImg, #kkaImg {display: none;}
	
	#arLogo {
		left: 4.85%;
		top: 30.48%;
		width: 28.26%;
	}
	#arTitle {
		left: 4.85%;
		top: 27.48%;
		width: 28.26%;
	}
	#galLogo:before, #galLogo:after {height: 55%;}
	#galLogo {
		padding: 18% 0 0 0;
		right: 10.49%;
		width: 24.6%;
	}
	#galTitle {
		right: 13.77%;
		top: 33.71%;
		width: 18%;
	}
	#kkaLogo {
		bottom: -1.56%;
		left: 38.52%;
		width: 48.7%;
	}
	#kkaTitle {
		bottom: 11.67%;
		left: 51.5%;
		width: 25%;
	}
}
@media screen and (max-width: 640px){
	#banner .waves{top: 12%;}
	#banner h1{font-size: 25px;}
	
	.cols.three > div{width: 50%;}
	.cols.three > div.col1,
	.cols.three > div.col2,
	.cols.three > div.col3{padding: 0 2%;}
	#frontpage-links li a{font-size: 24px;}
}
@media screen and (max-width: 520px){
	#fp-placeholder {
		display: none;
	}
	#frontpageContent {overflow: visible; padding: 88px 0 0;}
	#frontpageContent .item {
		position: static;
	}
	#frontpageContent .item-wrap {position: relative; margin: 0 0 15px 0;}
	#frontpageContent .title {position: absolute; left: 27%; top: 10%; right: auto; width: auto; height: 22px;}
	#frontpageContent #arTitle {top: 10%; bottom: 0; margin: auto 0;}
	#frontpageContent #galTitle {top: 31%;}
	#frontpageContent #kkaTitle {top: 20%;}
	#arLogo {width: 20%;}
	#galLogo {
		padding: 0;
		width: 21%;
	}
	#galLogo:before, #galLogo:after {display: none;}
	#kkaLogo {
		margin-left: -14%;
		width: 47%;
	}


}
@media screen and (max-width: 500px){
	#top header, #main-content, #content, footer.centered1{width: 88%;}
	.gallery{text-align: center; padding: 22px 7% 40px;}
	.gallery li{width: 100%; margin: 0 0 20px 0;}
	#lang{right: 0; text-align: center;}
	#lang li{margin: 0 10px;}
	#featured > li, div.gallery-module{opacity: 1; transition: none; -webkit-transition: none; -moz-transition: none;
	-webkit-transform: none;	
	-moz-transform: none;
	transform: none;
	}
	.gallery .thumb, 
	.gallery .title, 
	.gallery.list1 .title,
	.gallery.list2 .title{
		height: auto !important;
	}
	#frontpage-links li a{font-size: 18px;}
}
@media screen and (max-width: 480px){
	#banner h1{font-size: 18px; bottom: 10%;}
	
	
	.half-half .left, .half-half .right {
		padding: 0 0 20px;
		text-align: center;
		width: 100%;
	}

	.cols.three > div{width: 100%;}
	.cols.three > div.col1,
	.cols.three > div.col2,
	.cols.three > div.col3{padding: 0 0 40px 0;}
	
	#main-menu{font-size: 14px;}
	/*#raamat {
		left: -10%;
		width: 164px;
		height: 112px;
	}
	#pildiraam {
		right: 0;
		left: auto;
		top: -27%;
		width: 138px;
		height: 245px;
	}
	#keskkond {
		bottom: 0;
		left: 16%;
		width: 107px;
		height: 109px;
	}*/
}
@media screen and (max-width: 400px){
	#logo{float: left; margin: 0 0 12px 0;}	
	#logo img{width: 165px;}
	
	#main-menu{font-size: 12px; clear: both;}
	#main-menu > ul > li > a{padding: 0;}
	
	#frontpageContent {padding: 98px 0 0;}
	#frontpageContent .item-wrap {margin: 0 0 25px 0;}
	
	#frontpage-content{overflow: visible; padding: 52px 0 0;}
	#frontpage-links li {
		height: auto;
		margin: 0 0 22px;
		padding: 6px 0 6px 74px;
		position: static;
		width: auto;
	}
	#frontpage-links li a, 
	#frontpage-links #pildiraam a {
		font-size: 19px;
		text-align: left;
	}
	#frontpage-links li .title{position: static;}
	#frontpage-links li img, #pildiraam::before, #pildiraam::after, #avalehe-kuva{display: none;}
	
	#raamat {
		background: url("../images/raamat.png") no-repeat -17px -1px;
		background-size: 75px auto;
	}
	#pildiraam {
		background: url("../images/pildiraam.png") no-repeat 7px 2px;
		background-size: 45px auto;
	}
	#keskkond {
		background: url("../images/bonzai.png") no-repeat 6px -1px;
		background-size: 41px auto;
	}
}
@media screen and (max-width: 320px){
	
}
/* ======================== clearfix =========================== */
/* ============================================================= */
/* Force Element To Self-Clear its Children */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */