/* ------------------------------------------------------------ *\
	Reset
\* ------------------------------------------------------------ */

*,
*:before,
*:after { padding: 0; margin: 0; outline: 0; box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; }

html,
body { height: 100%; }

html { tap-highlight-color: rgba(0,0,0,0); }

body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; }

img, iframe, video, audio, object { max-width: 100%; }

img { height: auto; display: inline-block; vertical-align: middle; }

b,
strong { font-weight: bold; }

address { font-style: normal; }

svg:not(:root) { overflow: hidden; }

a { color: inherit; text-decoration: none; display: inline-block; }

a:hover,
button:hover { cursor: pointer; text-decoration: none; }

a[href^="tel"] { text-decoration: none; }

img { border: 0; }

h1,
h2,
h3,
h4,
h5,
h6 { margin-bottom: 0; font-weight: normal; text-transform: none; font-size: inherit; }

p,
ul,
ol,
dl,
table,
blockquote { margin-bottom: 0; }

h1[class],
h2[class],
h3[class],
h4[class],
h5[class],
h6[class],
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
table:last-child,
blockquote:last-child { margin-bottom: 0; }

nav ul { list-style-type: none; }

a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="file"],
input[type="image"],
label[for] { cursor: pointer; }

a[href^="tel"],
button[disabled],
input[disabled],
textarea[disabled],
select[disabled] { cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { display: none; -webkit-appearance: none; margin: 0; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

textarea { overflow: auto; resize: none; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }

button,
input,
optgroup,
select,
textarea { border: none; border-radius: 0; font-family: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }

button,
select { text-transform: none; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }

/* ------------------------------------------------------------ *\
	Base
\* ------------------------------------------------------------ */

body { background: #ffffff; font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 24px; color: #444444; }

button,
input,
optgroup,
select,
textarea { color: #444444; }

button,
select { background: #ffffff; }

.alignleft { float: left; }

.aligncenter { text-align: center; }

.alignright { float: right; }

[disabled],
.disabled { cursor: default; }

.mobileonly { display: none; }

[class^='ico'] { display: inline-block; font-size: 0; background-repeat: no-repeat; background-position: center; }

.grayscale { -webkit-filter: grayscale(1); filter: grayscale(1); }
.grayscale:hover { -webkit-filter: none; filter: none; }

ul { list-style-type: square; }

@media (max-width: 1160px){
	body { font-size: 13px; line-height: 18px; }
	.mobileonly { display: block; }
	.desktoponly { display: none !important; }
	.alignleft, .alignright { float: none; }
}

/* ------------------------------------------------------------ *\
	Wrapper
\* ------------------------------------------------------------ */

.wrapper { margin: 0 auto; display: inline; }
.shell { max-width: 1160px; margin: 0 auto; }

@media (max-width: 1160px){
	.shell { padding: 0 10px; }
}

/* ------------------------------------------------------------ *\
	row / col
\* ------------------------------------------------------------ */

.row { clear: both; display: block; }
.row:after { clear: both; display: block; content: ' '; }

.row .col { margin-left: 40px; position: relative; float: left; }
.row .col:first-child { margin-left: 0; }

.col-1of2 { width: 560px; }
.col-2of2 { width: 1160px; }

.col-1of3 { width: 360px; }
.col-2of3 { width: 760px; }
.col-3of3 { width: 1160px; }

.col-1of4 { width: 260px; }
.col-2of4 { width: 560px; }
.col-3of4 { width: 860px; }
.col-4of4 { width: 1160px; }

.col-1of5 { width: 200px; }
.col-2of5 { width: 440px; }
.col-3of5 { width: 680px; }
.col-4of5 { width: 920px; }
.col-5of5 { width: 1160px; }

.col-1of6 { width: 160px; }
.col-2of6 { width: 360px; }
.col-3of6 { width: 560px; }
.col-4of6 { width: 760px; }
.col-5of6 { width: 960px; }
.col-6of6 { width: 1160px; }

@media (max-width: 1160px){
	.col-1of2, .col-2of2,
	.col-1of3, .col-2of3, .col-3of3, 
	.col-1of4, .col-2of4, .col-3of4, .col-4of4,
	.col-1of5, .col-2of5, .col-3of5, .col-4of5, .col-5of5,
	.col-1of6, .col-2of6, .col-3of6, .col-4of6, .col-5of6, .col-6of6 { width: 100%; }
	.row .col { margin-left: 0; }
}

/* ------------------------------------------------------------ *\
	content
\* ------------------------------------------------------------ */


.content span.grey { background: #dddddd; display: block; }
.content span.row:last-child { margin-bottom: 20px; }

.content { text-align: center; }
.content p { margin-bottom: -7px; }
.content p + p { margin-top: 28px; }
.content span .row:last-child { padding-bottom: 80px; }

.content ul,
.content ol { margin-top: 34px; margin-bottom: 34px; }

.content ul,
.content ol { list-style-position: inside; }

.content ul li + li,
.content ol li + li { margin-top: 8px; }

.content span .row:not(.headline) + .row { margin-top: 28px; }

@media (max-width: 1160px){
	.content span .row:last-child { padding-bottom: 40px; }
	
	.content ul,
	.content ol { margin-top: 19px; margin-bottom: 19px; }
	.content ul li + li,
	.content ol li + li { margin-top: 3px; }
}

/* ------------------------------------------------------------ *\
	teaser
\* ------------------------------------------------------------ */

.teaser { position: relative; }

.teaser .video-box { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.teaser .video-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.teaser .video-container { left: 0; top: 0; bottom: 0; right: 0; text-align: center; position: absolute; }
.teaser .video-container { background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,0.5), rgba(0,0,0, 0) 1px, transparent 1px, transparent 100%); background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,0.5), rgba(0,0,0, 0) 1px, transparent 1px, transparent 100%); background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,0.5), rgba(0,0,0, 0) 1px, transparent 1px, transparent 100%); background-image: repeating-radial-gradient(center center, rgba(0,0,0,0.5), rgba(0,0,0, 0) 1px, transparent 1px, transparent 100%); -webkit-background-size: 3px 3px; -moz-background-size: 3px 3px; background-size: 3px 3px; }

.teaser .video-content { font-family: 'SegoeUI', sans-serif; opacity: 0; animation: hideVideoContent 0.5s linear; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; position: absolute; }
.teaser:hover .video-content { opacity: 1; animation: showVideoContent 0.5s linear; }

.teaser .logo { margin-bottom: 40px; }

.teaser .first-head span,
.teaser .second-head span { text-transform: uppercase; color: #ffffff; }
.teaser .first-head span { font-size: 70px; line-height: 88px; padding-top: 1px; font-weight: bold; }
.teaser .second-head span { font-size: 40px; line-height: 69px; padding-top: 11px; padding-bottom: 11px; }

.teaser .first-head + .second-head { margin-top: 20px; }

@keyframes showVideoContent { 
	0% { opacity: 0; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}

@keyframes hideVideoContent { 
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 0; }
}

@media (max-width: 1160px){
	.teaser .video-content { display: none; }
}

/* ------------------------------------------------------------ *\
	headline
\* ------------------------------------------------------------ */

.row.headline .headline { margin-top: 80px; margin-bottom: 40px; }
.row.headline + .row.headline .headline { margin-top: 0; margin-bottom: 8px; }

.headline .first-head span,
.headline .second-head span { text-transform: uppercase; color: #ffffff; font-weight: bold; }

.headline .first-head span { font-family: 'SegoeUI', sans-serif; font-size: 40px; line-height: 60px; }
.headline .second-head span { font-family: 'SegoeUI', sans-serif; font-weight: normal; font-size: 24px; padding: 5px 0; }
.headline .third-head span { font-weight: bold; }

.headline .first-head { margin-top: -5px; }

.headline .first-head,
.headline .second-head { margin-bottom: -1px; }

.headline .first-head + .second-head { margin-top: 19px; }

@media (max-width: 1160px){
	.row.headline .headline { margin-top: 40px; margin-bottom: 20px; }
	
	.headline .second-head span { line-height: 44px; }
	.headline .first-head + .second-head { margin-top: 3px; }
}

/* ------------------------------------------------------------ *\
	gallery
\* ------------------------------------------------------------ */

.gallery .gallery-image { width: 200px; height: 200px; float: left; text-align: center; position: relative; margin-top: 40px; }
.gallery .gallery-image + .gallery-image { margin-left: 40px; }

.gallery .gallery-image img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

.gallery .gallery-image:nth-child(5n+1) { margin-left: 0; }

@media (max-width: 1160px){	
	.gallery .gallery-image { width: 100%; height: auto; margin-top: 20px; display: block; }
	.gallery .gallery-image a { display: block; }
	.gallery .gallery-image + .gallery-image { margin-left: 0; }
	.gallery .gallery-image img { position: relative; width: 100%; }
}

/* ------------------------------------------------------------ *\
	tile
\* ------------------------------------------------------------ */

.tile-row { margin-top: 40px; }

.tile-row .tile a { display: block; }
.tile-row .tile img { width: 100%; height: auto; }

.tile .title { font-weight: bold; margin-top: 14px; margin-bottom: 14px; }

@media (max-width: 1160px){	
	.tile-row { margin-top: 0; }
	.tile { margin-top: 20px; }
}

/* ------------------------------------------------------------ *\
	panorama
\* ------------------------------------------------------------ */

.panorama { margin-top: 40px; }
.panorama img { width: 100%; height: auto; }

/* ------------------------------------------------------------ *\
	map
\* ------------------------------------------------------------ */

.map { margin-top: 40px; }

@media (max-width: 1160px){
	.map iframe { height: 200px !important; }
}

/* ------------------------------------------------------------ *\
	footer
\* ------------------------------------------------------------ */

.footer { color: #ffffff; text-align: center; }


.footer-nav { font-weight: bold; font-family: 'SegoeUI', sans-serif; font-weight: bold; font-size: 20px; text-transform: uppercase; padding-top: 36px; }
.footer-nav ul li { display: inline-block; }
.footer-nav ul li + li { margin-left: 35px; }

.social { margin-top: 35px; }
.social ul li { display: inline-block; }
.social ul li + li { margin-left: 16px; }

.copyright { margin-top: 28px; padding-bottom: 33px; }

@media (max-width: 1160px){
	.footer-nav ul li { display: block; }
	.footer-nav ul li + li { margin-left: 0; margin-top: 12px; }
}

/* ------------------------------------------------------------ *\
	button
\* ------------------------------------------------------------ */

.button { text-align: right; margin-top: 40px; }

.btn { text-transform: uppercase; color: #ffffff; font-size: 16px; font-weight: bold; padding: 15px 20px 13px 20px; }
.btn i { margin-left: 19px; }

button.btn { padding: 17px 20px 16px 20px; }


/* ------------------------------------------------------------ *\
	form
\* ------------------------------------------------------------ */

.form { text-align: left; }

.form a { text-decoration: underline; font-weight: bold; }

.form-row:first-child { margin-top: 7px; }

.form-row { display: block; margin-bottom: 12px; }
.form-spacer { height: 10px; }

.form .button { margin-top: 20px; }

.form-label,
.form-cols,
.form-col { display: inline-block; }

.form-col { margin-left: -4px; }

.form-label { font-weight: bold; width: 400px; text-align: right; padding-right: 36px; }

input,
select,
textarea { border: none; background-color: #ffffff; }

input,
select { vertical-align: middle; height: 32px; padding: 7px 5px; margin-top: -2px; }

textarea { vertical-align: top; padding: 7px 5px; height: 160px; margin-top: -6px; }

.form-full input,
.form-full select { width: 360px; }
.form-full textarea { width: 760px; }

.custom-textarea { margin-top: 4px; margin-bottom: -5px; }

.form-row.checkbox { margin-top: 21px; }

.custom-checkbox { margin-top: -20px; padding-left: 25px; padding-right: 200px; }

.custom-checkbox { display: block; position: relative; font-weight: bold; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.custom-checkbox input { width: 0; position: absolute; opacity: 0; cursor: pointer; }
.custom-checkbox span { position: absolute; top: 3; left: 0; height: 16px; width: 16px; background-color: #ffffff; }
.custom-checkbox span:after { content: " "; position: absolute; display: none; }
.custom-checkbox input:checked ~ span:after { display: block; }
.custom-checkbox span:after { left: 5px; top: 2px; width: 5px; height: 10px; border: solid #444444; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }


@media (max-width: 1160px){
	.form-label { text-align: left; width: 100%; margin-bottom: 7px; }
	.form-cols { display: block; margin-top: 0; min-width: auto; }
	
	.form-full,
	.form-full input,
	.form-full select,
	.form-full textarea { width: 100%; }
	.custom-checkbox input { width: 0; }
	.custom-checkbox { margin-top: 8px; margin-left: 0; padding-left: 33px; padding-right: 20px; }
}

/* ------------------------------------------------------------ *\
	ico
\* ------------------------------------------------------------ */

i.ico-btn { background: url(/images/ico-btn.png) no-repeat center; width: 7px; height: 12px; }

i.ico-facebook { background: url(/images/ico-facebook.png) no-repeat center; width: 64px; height: 64px; }
i.ico-instagram { background: url(/images/ico-instagram.png) no-repeat center; width: 64px; height: 64px; }
i.ico-tiktok { background: url(/images/ico-tiktok.png) no-repeat center; width: 64px; height: 64px; }
i.ico-whatsapp-channel { background: url(/images/ico-whatsapp-channel.png) no-repeat center; width: 64px; height: 64px; }
i.ico-snapchat { background: url(/images/ico-snapchat.png) no-repeat center; width: 64px; height: 64px; }
i.ico-youtube { background: url(/images/ico-youtube.png) no-repeat center; width: 64px; height: 64px; }

i.ico-facebook:hover { background: url(/images/ico-facebook_hover.png) no-repeat center; width: 64px; height: 64px; }
i.ico-instagram:hover { background: url(/images/ico-instagram_hover.png) no-repeat center; width: 64px; height: 64px; }
i.ico-tiktok:hover { background: url(/images/ico-tiktok_hover.png) no-repeat center; width: 64px; height: 64px; }
i.ico-whatsapp-channel:hover { background: url(/images/ico-whatsapp-channel_hover.png) no-repeat center; width: 64px; height: 64px; }
i.ico-snapchat:hover { background: url(/images/ico-snapchat_hover.png) no-repeat center; width: 64px; height: 64px; }
i.ico-youtube:hover { background: url(/images/ico-youtube_hover.png) no-repeat center; width: 64px; height: 64px; }


/* ------------------------------------------------------------ *\
	note
\* ------------------------------------------------------------ */

.note { position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; }
.note { background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
.note-box { background-color: #ffffff; margin: 15% auto; padding: 20px; width: 35%; text-align: center; animation: noteDown 0.5s linear; }
.note-content { margin-bottom: 20px; }

.note-close .note-box { animation: noteUp 0.5s linear; margin: -16% auto; }

@keyframes noteDown { 
	0% { margin: -16% auto; }
	50% { margin: 0% auto; }
	100% { margin: 15% auto; }
}

@keyframes noteUp { 
	0% { margin: 15% auto; }
	50% { margin: 0% auto; }
	100% { margin: -16% auto; }
}

@media (max-width: 1220px){
	.note-box { width: 80%; margin: 40% auto; }
	@keyframes noteDown { 
		0% { margin: -41% auto; }
		50% { margin: 0% auto; }
		100% { margin: 40% auto; }
	}
	
	@keyframes noteUp { 
		0% { margin: 40% auto; }
		50% { margin: 0% auto; }
		100% { margin: -41% auto; }
	}
}