/* reset */
* { position: relative; margin: 0; padding: 0; outline: none; list-style: none; border: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }


/* general */
html, body { min-width: 300px; min-height: 100%; }
body { background: #396683 url(page-bg.jpg) repeat center top; padding: 0 0 100px 0; color: #fff; text-align: center; font-family: 'Open Sans', Arial, Geneva, Helvetica, sans-serif; font-size: 18px; font-weight: 300; }


/* headings */
h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; font-weight: 400; }
h1 { font-size: 60px; line-height: 80px; }
h2 { font-size: 40px; line-height: 50px; text-align: center; margin-bottom: 40px; }
h3 { font-size: 30px; line-height: 40px; }
h4 { font-size: 25px; line-height: 30px; }
h5 { font-size: 20px; line-height: 25px; font-weight: bold; }
h6 { font-size: 15px; line-height: 20px; font-weight: bold; }


/* links */
a { text-decoration: underline; color: #fff; transition: color linear .1s; -webkit-transition: color linear .1s; -moz-transition: color linear .1s; -o-transition: color linear .1s; }
a:hover { color: #dcc593; }
a.red { color: #e94f4f; }
a.orange { color: #f1a00f; }
a.yellow { color: #f1c40f; }
a.green { color: #2ecc71; }
a.blue { color: #3498db; }
a.violet { color: #c339c1; }


/* buttons */
.button { display: inline-block; padding: 8px 20px; background: #396683; box-shadow: 0 2px 1px -1px #fff; -webkit-box-shadow: 0 2px 1px -1px #fff; -moz-box-shadow: 0 2px 1px -1px #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; color: #fff; font-size: 18px; font-weight: normal; text-decoration: none; text-align: center; line-height: 1; cursor: pointer; transition: all linear .1s; -webkit-transition: all linear .1s; -moz-transition: all linear .1s; -o-transition: all linear .1s; }
.button:hover { text-decoration: none; }
.button:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: transparent; transition: all linear .1s; -webkit-transition: all linear .1s; -moz-transition: all linear .1s; -o-transition: all linear .1s; }
.button:hover:before, .button:focus:before { background-color: rgba(255, 255, 255, .2); }
.button:disabled { opacity: .3; filter: alpha(opacity=30); cursor: default; }
.button:disabled:before { display: none; }

.button.full { width: 100%; padding-left: 0; padding-right: 0; }
.button.big { font-size: 120%; padding: 15px 30px; }
.button.small { font-size: 80%; padding: 4px 10px; }
.button.right { float: right; margin-left: 20px; }

.button.white { background-color: #fff; color: #396683; }
.button.red { background-color: #e94f4f; color: #fff; }
.button.orange { background-color: #f1a00f; color: #fff; }
.button.yellow { background-color: #f1c40f; color: #fff; }
.button.green { background-color: #2ecc71; color: #fff; }
.button.blue { background-color: #4e89e7; color: #fff; }
.button.violet { background-color: #c339c1; color: #fff; }
.button.gray { background-color: #dedede; color: #333; }


/* inputs */
input[type="text"], input[type="color"], input[type="date"], input[type="datetime"], input[type="email"], input[type="file"], input[type="number"], input[type="password"], input[type="tel"], input[type="time"], input[type="url"], textarea, select { display: inline-block; width: 400px; max-width: 100%; height: 35px; padding: 5px 10px; background: #fff; border: none; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: #396683; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: 20px; transition: all linear .1s; -webkit-transition: all linear .1s; -moz-transition: all linear .1s; -o-transition: all linear .1s; }

input.full, select.full { width: 100%; }
input.large, select.large { width: 700px; }
input.medium, select.medium { width: 200px; }
input.small, select.small { width: 100px; }
input.xsmall, select.xsmall { width: 70px; }
input.xxsmall, select.xxsmall { width: 40px; }

textarea { width: 100%; height: 150px; resize: none; }
textarea.medium { width: 75%; height: 100px; }
textarea.small { width: 50%; height: 75px; }
textarea.autosize-element { width: auto; }

input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus, .js-checkbox:hover, .js-radio:hover { border-color: #396683; }
input[type="checkbox"]:hover, input[type="checkbox"]:focus, input[type="radio"]:hover, input[type="radio"]:focus { border-color: transparent; }

.button > input[type="checkbox"], .button > input[type="radio"], label > input[type="checkbox"], label > input[type="radio"] { margin-right: 5px; }


/* forms */
dl { display: block; margin-bottom: 20px; }
dl:after { content: ''; display: block; clear: both; }
dl dt { display: block; margin-bottom: 10px; line-height: 1.5; text-align: left; word-break: break-all; }
dl dd { display: block; margin-bottom: 20px; line-height: 1.5; text-align: left; word-break: break-all; }
dl.inline dt { float: left; clear: left; width: 30%; word-wrap: break-word; padding-right: 20px; text-align: right; }
dl.inline dd { float: left; width: 70%; }
dl.text dt { font-weight: bold; }
dl dt.empty, dl dd.empty { display: none; }
dl.inline dt.empty, dl.inline dd.empty { display: block; }

label[for] { cursor: pointer; }
label.full { display: block; margin-bottom: 10px; }

.multi-select .display { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px; }
.multi-select .display.placeholder { color: #bbb; }
.multi-select .display:after { content: '\f078'; font-family: FontAwesome; position: absolute; top: 0; right: 0; height: 100%; width: 30px; text-align: center; line-height: 31px; color: #fff; }


/* common */
.wrapper { max-width: 1170px; min-width: 300px; margin: 0 auto; padding: 0 20px; text-align: left; }
.clear:after { content: ''; display: block; clear: both; }
.double-space { margin-bottom: 40px !important; }
.cta:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; -webkit-border-radius: inherit; -moz-border-radius: inherit; border-bottom: 3px solid rgba(0, 0, 0, .2); box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

.msg { padding: 20px; margin-bottom: 20px; line-height: 1.5; }
.msg.message { background-color: rgba(217, 237, 247, .5); color: #31708f; }
.msg.success { background-color: rgba(223, 240, 216, .5); color: #3c763d; }
.msg.warning { background-color: rgba(252, 248, 227, .5); color: #8a6d3b; }
.msg.error { background-color: rgba(242, 222, 222, .5); color: #a94442; }
.msg.info { background: rgba(0, 0, 0, .1); font-size: 150%; text-align: center; padding: 50px 20px; margin-bottom: 20px; }

.hidden { display: none; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.strike { text-decoration: line-through; }
.a-left { text-align: left; }
.a-center { text-align: center; }
.a-right { text-align: right; }
.a-justify { text-align: justify; }
.f-left { float: left; }
.f-right { float: right; }

.button-label { margin-left: 5px; margin-right: 5px; cursor: inherit; }
.button-label:first-child { margin-left: 0; }
.button-label:last-child { margin-right: 0; }

.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.nowrap { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: inherit; }
.space { margin-bottom: 40px !important; }
.double-space { margin-bottom: 80px !important; }

.fa.green { color: #27c34b; }
iframe { vertical-align: top; }

.overlay-link { display: block; position: fixed; z-index: 9999; left: 0; top: 0; right: 0; bottom: 0; }


/* badges */
.badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; background-color: #396683; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.badge.red { background-color: #e94f4f; }
.badge.orange { background-color: #f1a00f; }
.badge.yellow { background-color: #f1c40f; }
.badge.green { background-color: #2ecc71; }
.badge.blue { background-color: #3498db; }
.badge.violet { background-color: #c339c1; }


/* labels */
.label { display: inline-block; padding: 2px 6px; vertical-align: baseline; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.label.red { background-color: #e94f4f; color: #fff; font-weight: normal; }
.label.orange { background-color: #f1a00f; color: #fff; font-weight: normal; }
.label.yellow { background-color: #f1c40f; color: #fff; font-weight: normal; }
.label.green { background-color: #2ecc71; color: #fff; font-weight: normal; }
.label.blue { background-color: #3498db; color: #fff; font-weight: normal; }
.label.violet { background-color: #c339c1; color: #fff; font-weight: normal; }
.label.gray { background-color: #a3a3a3; color: #fff; font-weight: normal; }


/* progress bar */
.progress-bar { background-color: #396683; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-size: 40px 40px; -webkit-background-size: 40px 40px; }
.progress-bar, .progress-bar * { color: #fff; }


/* grids */
[class*="grid-"] { float: left; }
.grid-1 { width: 8.33333333333%; }
.grid-2 { width: 16.66666666666%; }
.grid-fifth { width: 20%; }
.grid-3 { width: 25%; }
.grid-4 { width: 33.33333333333%; }
.grid-5 { width: 41.66666666666%; }
.grid-6 { width: 50%; }
.grid-7 { width: 58.33333333333%; }
.grid-8 { width: 66.66666666666%; }
.grid-9 { width: 75%; }
.grid-10 { width: 83.33333333333%; }
.grid-11 { width: 91.66666666666%; }
.grid-12 { width: 100%; }

.spaced-grid { margin: 0 -10px; }
.spaced-grid:after { content: ''; display: block; clear: both; }
.spaced-grid > [class*="grid-"] { padding: 0 10px; }
.double-spaced-grid { margin: 0 -20px; }
.double-spaced-grid:after { content: ''; display: block; clear: both; }
.double-spaced-grid > [class*="grid-"] { padding: 0 20px; }


/* tables */
table { width: 100%; margin-bottom: 20px; border-spacing: 0; }
table th, table td { padding: 15px; font-size: 18px; text-align: left; vertical-align: top; line-height: 1.5; }
table th { color: #fff; font-weight: bold; background: #396683; }
table th.right, table td.right { text-align: right; }
table tr:first-child td { border-top: 1px solid rgba(255, 255, 255, .35); }
table tr td { border-bottom: 1px solid rgba(255, 255, 255, .35); }

table.timetable .time { width: 200px; font-weight: bold; }

.table-container { overflow: hidden; margin-bottom: 20px; }
.table-container > div { overflow: hidden; overflow-x: auto; }
.table-container:before { content: ''; display: none; position: absolute; left: -40px; top: 0; width: 40px; bottom: 0; border-radius: 40%; -webkit-border-radius: 40%; -moz-border-radius: 40%; box-shadow: 0 0 20px #000; -webkit-box-shadow: 0 0 20px #000; -moz-box-shadow: 0 0 20px #000; z-index: 2; }
.table-container.after-start:before { display: block; }
.table-container:after { content: ''; display: none; position: absolute; right: -40px; top: 0; width: 40px; bottom: 0; border-radius: 40%; -webkit-border-radius: 40%; -moz-border-radius: 40%; box-shadow: 0 0 20px #000; -webkit-box-shadow: 0 0 20px #000; -moz-box-shadow: 0 0 20px #000; z-index: 2; }
.table-container.before-end:after { display: block; }


/* header */
header { background: url(ice.png) repeat-x center top; margin-bottom: 20px; }
header .wrapper { text-align: center; }
header .logo { display: block; float: left; }
header .logo img { vertical-align: top; }


/* main & sub navigation */
header .nav-button { display: none; position: absolute; right: 20px; top: 50%; width: 30px; line-height: 30px; margin-top: -15px; color: #fff; text-align: center; }
header .nav-overlay { position: fixed; left: 100%; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); transition: all linear .2s; -webkit-transition: all linear .2s; -moz-transition: all linear .2s; -o-transition: all linear .2s; }
header nav { float: right; padding-top: 100px; }
header nav > ul { display: inline-block; margin: 0 auto; vertical-align: top; }
header nav > ul:after { content: ''; display: block; clear: both; }
header nav > ul > li { display: block; float: left; margin: 0 10px; }
header nav > ul > li > a { display: block; color: #fff; line-height: 40px; font-size: 16px; padding: 0 10px; text-decoration: none; font-weight: bold; }
header nav > ul > li.active > a, header nav > ul > li:hover > a { text-decoration: underline; }


/* content */
article { min-height: 200px; text-align: left; background: rgba(255, 255, 255, .2); padding: 20px; }
article p { line-height: 1.5; margin-bottom: 20px; word-wrap: break-word; }
article > section { padding: 100px 0; }
article > section.white { background: #fff; }
article > section.blue { background: #fff; }

.heading { margin-bottom: 40px; }
.heading:after { content: ''; display: block; clear: both; }
.heading h1, .heading h2, .heading h3, .heading h4, .heading h5 { float: left; margin: 0; }
.heading .button { float: right; margin: 0; }

/* counter */
.counter { text-align: center; margin-bottom: 40px; }
.counter .digit, .counter .char { display: inline-block; vertical-align: top; width: 60px; height: 100px; margin: 0 5px; font-size: 70px; line-height: 100px; text-align: center; }
.counter .digit { text-shadow: 1px 1px 0 rgba(255, 255, 255, .5); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .6); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.counter .char { width: auto; }

/* albums */
.photos {margin: -10px;}
.photos .preload {overflow: hidden; width: 0; height: 0; position: absolute; left: -99999px; top: -99999px;}
.photos .item {float: left; width: 25%; padding: 10px;}
.photos a {display: block; overflow: hidden;}
/*.photos a:after {content: ''; visibility: hidden; opacity: 0; filter: alpha(opacity=0); display: block; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .1); transition: all linear 1s;}*/
/*.photos a:hover:after {visibility: visible; opacity: 1; filter: alpha(opacity=100);}*/
.photos a > img {max-width: 100%; height: auto; vertical-align: top; transition: all ease .1s; -webkit-transition: all ease .1s; -moz-transition: all ease .1s; -o-transition: all ease .1s;}
.photos a:hover > img {transform: scale(1.1); transition: all ease 5s; -webkit-transition: all ease 5s; -moz-transition: all ease 5s; -o-transition: all ease 5s;}

.album-detail .description {text-align: center; font-size: 13px; margin-bottom: 10px;}
.album-detail .info {text-align: center; font-size: 11px; margin-bottom: 40px;}
.album-detail .info .fa {margin-right: 3px;}
.album-detail .info span {margin: 0 5px;}
.album-detail .images {text-align: center;}
.album-detail .images .images-placeholder {height: 600px; margin: 0 auto; overflow: hidden;}
.album-detail .images .images-placeholder.disabled:after {content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.album-detail .images .item {display: block; float: left; height: 100%;}
.album-detail .images .item img {vertical-align: top; max-height: 100%; width: auto; margin-right: 10px;}
.album-detail .images .item:last-child img {margin-right: 0;}


/* reviews */
.reviews {margin-bottom: 20px;}
.reviews .info {background: rgba(0, 0, 0, .2); padding: 20px; color: #ccc; text-align: center;}
.reviews .item {background: rgba(0, 0, 0, .2); margin-bottom: 20px; padding: 20px; color: #ccc;}
.reviews .item p {margin-bottom: 10px; line-height: 1.5;}
.reviews .item p:before {content: '\f10e'; font-family: FontAwesome; color: #444; margin-right: 10px;}
.reviews .item .metadata {color: #999; font-size: 12px;}
.reviews .item .metadata span {margin-right: 20px;}


/* contacts */
.contacts {margin-bottom: 60px;}
.contacts .icon-block {margin-bottom: 40px; text-align: center;}
.contacts .icon-block .fa.icon {display: block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .1); color: inherit; margin: 0 auto 10px; transition: all linear .1s; -webkit-transition: all linear .1s; -moz-transition: all linear .1s; -o-transition: all linear .1s;}
.contacts .icon-block p {text-align: center;}
.contacts .box .social a {font-size: 35px; line-height: 47px; display: inline-block; margin: 0 5px; vertical-align: top;}
.contacts .box .social a.facebook:hover {color: #3b5998;}
.contacts .box .social a.google-plus:hover {color: #d34836;}
.contacts .box .social a.twitter:hover {color: #4099ff;}
.contacts .box .social a.soundcloud:hover {color: #ff7700;}


/* error 404 */
.error-404 .box {text-align: center; padding: 80px 20px; background: rgba(0, 0, 0, .2);}
.error-404 .box .fa {display: block; font-size: 120px; margin-bottom: 40px;}

/* footer */
footer {font-size: 11px; padding: 20px; text-align: center; color: #aaa;}


/* responsive design */
@media screen and (max-width: 768px) {
	header .logo img { width: 150px; }
	header nav { padding-top: 60px; }
	dl.inline dt { width: 100%; float: none; text-align: inherit; margin-bottom: 10px; }
	dl.inline dd { width: 100%; float: none; margin-bottom: 20px; }
	dl.inline dt.empty, dl.inline dd.empty { display: none; }
	input[type="text"], input[type="color"], input[type="date"], input[type="datetime"], input[type="email"], input[type="file"], input[type="number"], input[type="password"], input[type="tel"], input[type="time"], input[type="url"], textarea, select { width: 100%; }
	.button { width: 100%; margin: 0 0 10px 0; }
	.heading h1, .heading h2, .heading h3, .heading h4, .heading h5 { margin-bottom: 20px; }
}
@media screen and (max-width: 599px) {

}
@media screen and (max-width: 399px) {

}

*:last-child {margin-bottom: 0 !important;}