@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a { color: #111; }
@charset "utf-8";

@font-face {
    font-family: 'din';
    src: url('DINNeuzeitGrotesk-Light.woff2') format('woff2'),
        url('DINNeuzeitGrotesk-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'dinbold';
    src: url('DINNeuzeitGrotesk-BoldCond.woff2') format('woff2'),
        url('DINNeuzeitGrotesk-BoldCond.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face { font-family: 'spaceage';src: url('space_age.ttf'); }

/*---=== [ master ] ===---*/

body { width: 100%; background: #ccc; font-family: 'dinbold', 'din'; overflow-x: hidden;  }

.content { width: 98%; margin: 1%; position: relative; float: left; display: block; top: 0; left: 0%; overflow: hidden;  }

.page_content { margin-top: 36.9px; text-align: center; }

/*---=== [ box ] ===---*/

.content.box { 
    opacity: 0;
    background: #fff; 
    text-align: center; 
    padding-bottom: 27px; 
    border-radius: 9px; 

    width: 95%;
    margin: 1.8% 2.5%;
}

.content.box .box-title {
    float: left;
    margin-top: 9px;
}

.content.box .box-title .ng-fa-icon {
    font-size: 25px;
    margin: 18px 18px 18px 9px;
    color: #333;
}

.content.box .box-title span {
    font-family: open sans;
    font-weight: 600;
    position: relative;
    top: -6.3px;
    width: 180px;
    display: inline-block;
    text-align: left;
    /* font-size: 13px; */
    font-size: 12px;
    margin-bottom: 18px;

    color: #111;
    letter-spacing: .9px;
}

.content.box .txt { 
	color: #333;
    font-family: 'mysanslight';
    font-size: 14px;
    float: left;
    margin: 9px;
    line-height: 27px;
 }

.content.box .splitter { 
    position: relative; 
    left: 50%; 
    margin: 25px; 
    margin-left: -18px;  
	/* background: rgb(50, 189, 240);  */
    background: #333;
    border-radius: 3.6px; 
    width: 36px; 
    height: 9px; 
}

.content.box .ico { color: #666; float: right; font-size: 18px; margin: 9px; }

.content.box .title { font-family: open sans; font-weight: 600; font-size: 14px; }

.content.box .intro { color: #333; text-align: center; margin: 0 18%; position: relative; float: left;
    font-family: 'open sans'; font-size: 14px; line-height: 21px; 
    display: inline-block; font-weight: 600; }

.content.box .txt-label { float: left; color: #666; font-size: 12px;     
    line-height: 18px;font-family:'open sans'; margin: 36px 9px 18px; }

.content.box.dark { background: #111; color: #ccc;  }

.btn-action {
  text-align: center;
  border-radius: 900px;
  overflow: hidden;
  position: fixed;
  bottom: 25px;
  right: 25px;
  padding: 18px 20px;
  z-index: 99;
  display: inline-block;
  backdrop-filter: blur(16px) saturate(150%);
  /* opacity: .7; */
  opacity: 0;
}

.btn-glass {
  border: 1px solid rgba(255, 255, 255, 0.21) !important;
  background: linear-gradient(135deg, rgba(88, 170, 255, 0.42), rgba(255, 255, 255, 0.2));
  box-shadow: var(--glass-shadow-soft) !important;
  backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: blur(18px) saturate(150%);
}

/*---=== [ head ] ===---*/

#block-init { background: #fe0; min-height: 250px; }

.wrapper { float: left; position: relative; margin-top: 0px; width: 100%; overflow: hidden; }

.wrapper .thumbnail { max-width: 100%; }

video.thumbnail { width: 100%; }

.playbtn { position: absolute; top: 50%; z-index: 9; left: 50%; margin-left: -46px; opacity: .7; }

.cover { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 50%; background: #fff; }

.cover.bottom { top: 50%; }

.trglayer { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; }

.header, .footer 
{ display: block; float: left; width: 100%; text-align: center; position: relative; }

#top-container { margin-top: 39px; height: 218px; }

#top-container .logo 
{ width: 200px; height: 100px; margin: 63px 0; left: 50%; margin-left: -50px; position: relative; 
    display: inline-block; float: left; overflow: hidden; z-index: 11; }

#top-container .logo img { width: 100%; top: -100%; position: relative; }

#top-container .thumbnail { max-width: 100%; display: none; }

#top-container.mobile { margin-top: 0; padding: 9px 0; height: 144px; z-index: 90; }

#top-container.mobile .logo 
{ width: 100px; padding: 0; position: absolute; top: -36px; left: 50%; margin-left: -50px;  }

#top-container.mobile .logo img { width: 100%; top: -100%; position: relative; }

#top-container.mobile .thumbnail { max-width: 100%; display: none; }

/* 
.teaser { position: absolute; top: 160px; display: block; overflow: hidden; z-index: 99999; }
.teaser .wrapper { margin-top: 0; max-height: 420px; }
.teaser .cover { z-index: 10; } */

#list  { width: 1216px; left: 50%; margin-left: -608px;text-align: center; z-index: 12; }

#list li 
{ float: left; display: inline-block; width: 390px; overflow: hidden; margin: 7px; max-height: 300px; 
  position: relative; }

#list li div { position: relative; width: 99%; float: left; height: 236px; overflow: hidden; border: 1px solid; }

#list li div img { position: absolute; left: 0; top: 0; width: 120%; min-height: 236px; }

#list li p { margin: 4.3%; display: inline-block; font-family: 'din'; }

#list .title { opacity: 0; display: none; }

#list li div p 
{ 
    display: none; position: absolute; text-align: center; color: #fff; background: rgba(0,0,0,.5); 
    left: 0; top: 0; width: 100%; height: 236px; margin: 0; padding-top: 25%;
    font-size: 18px; letter-spacing: 4px; opacity: 0;
}

#list li a:hover div p { display: block; }

/*#list li div p span { font-size: 9px; }*/

#list li div p span 
{ font-size: 18px; display: block; position: absolute; background: rgba(0,0,0,.7); width: 100%; 
    padding: 29% 0; top: 0; }

#list.mobile li, #list.mobile { width: 100%; margin: 1px; }

#list.mobile .title { opacity: 1; display: inline-block; margin-bottom: 45px; margin-top: 9px; }

#list.mobile2 { left: 0; margin-left: 0; width: 100%;  }

#list.mobile2 li { width: 100%; margin: 1px; width: 48%; margin: 1%; }

#list.mobile2 .title { opacity: 1; display: inline-block; margin-bottom: 45px; margin-top: 9px; }

.modal-bg {
  position: fixed; display: block; float: left; width: 100%; height: 100%; background: #fff;
  z-index: 9999999; top: 0; left: 0;
}
.modal {
  position: fixed; text-align: center; width: 100%; color: #333; margin-top: 3px;
  overflow: hidden; z-index: 999999999; top: 0; left: 0;
}
.modal > a { margin-top: 7px; display: inline-block; font-size: 9pt; letter-spacing: 4px; }
.modal > a.close { 
  font-weight: 300;
  display: inline-block;
  float: right;
  font-size: 9px;
  font-family: verdana;
  color: #c5b805;
  margin: 0;
  position: relative;
  top: 45px;
  border-right: 3px solid;
  padding-right: 7px;    
}
.modal p { float: left; font-family: 'dinbold'; margin: 9px 0; font-size: 9pt; 
           letter-spacing: 2.7px; line-height: 21px; color: #111; width: 100%; }
.modal .logo { position: relative; float: left; top: 0; width: 232px; }
.modal .pageicon { 
  /* color: #333; font-size: 36px; position: absolute; left: 50%; margin-left: -18px; top: 63px; */
  color: #333;
  font-size: 43px;
  position: relative;
  top: 0;
}
.modal .title { text-align: center; position: relative; float: left; width: 100%; 
  margin-top: 30px; font-family: 'open sans'; letter-spacing: 3.6px; font-size: 16px; }
.modal .box { position: relative; top: 50%; text-align: left; margin: 16%; }
.modal .frm { position: relative; float: left; width: 100%; text-align: center; padding-bottom: 9px;
              min-height: 420px; }
.modal .frm .inputtxt { width: 70%;
  margin: 9px 15%;
  text-align: center;
  border: 0;
  border-bottom: 1px solid #999;
  border-radius: 9px;
  padding: 12px 0; }
.modal .frm select { background: #fff; color: #333; text-align: center; }
.modal .frm a.btn {
  background: rgb(50, 189, 240);
  color: #fff; 
  letter-spacing: 3px;
}
.modal .frm a.btnReturn {
    background: transparent;
    color: #666;
    width: 70%;
    display: inline-block;
    margin: 9px 15%;
    padding: 9px 0;
    font-size: 12px;
    position: relative;
    top: 70px;
    letter-spacing: 3px;
}
.modal .loading { 
  display: block;
  opacity: 1;
  width: 100%;
  z-index: -1;
  position: absolute;
  top: 63px;
  height: 600px;
  background: #fff; 
}
.modal .loading img { 
  float: left; width: 180px; position: relative; top: 0; left: 50%; margin-left: -90px;
}
/*---=======[ intro ]============================================================---*/
#modal_intro { background: #fff; margin-top: 0; z-index: 900; height: 100%; }
#modal_intro .skip {
  border: 1px solid #111; color: #111;
  padding: 9px 21px;
  margin-top: 19px;
  float: right;
  display: inline-block;
  right: 2.7%;
  top: 0;
  position: absolute;
  font-size: 9px;
  letter-spacing: 2px;
}
#modal_intro .wrapper { max-height: 85%; position: absolute; left: 0; top: 50%; margin-top: -190px; }
/*---=======[ content ]============================================================---*/
#modal_content { background: #fff; margin: 0; z-index: 990; height: 100%; }
#modal_content a, #modal_content p { color: #000; margin: 18px; }
#modal_content .wrapper { margin: 2.7% 3.6%; width: 93%; }
#modal_content .playbtn.pause { margin-left: -63px; top: 36%; }
#modal_content .wrapper { position: absolute; left: 0; top: 50%; margin-top: -190px; }
/*---=======[ contact ]============================================================---*/
#modal_contact span { font-size: 12pt; letter-spacing: 4px; }
#modal_contact p { font-size: 7pt; letter-spacing: 8px; }
#modal_contact span a:hover { text-decoration: underline; }
/*---=======[ biografy ]============================================================---*/
#modal_biografy div { width: 900px; position: relative; left: 50%; margin-left: -450px; height: auto;overflow: hidden; }
#modal_biografy div p { float: right; width: 500px; text-align: justify; margin-right: 90px; }
#modal_biografy div img { float: right;width: 180px;margin: 63px; }
#modal_biografy div img.top { display: none; }
#modal_biografy.mobile div 
{ width: 100%; position: relative; left: 0%; margin-left: 0px; float: left; height: 100%; overflow-y: scroll; }
#modal_biografy.mobile div p 
{ float: left; width: 90%; text-align: justify; margin: 4.5%; height: 100%; padding-bottom: 250px; }
#modal_biografy.mobile div img { display: none; margin: 2.5%; width: 95%; }
#modal_biografy.mobile div img.top { display: block; }
#vue-frm {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    /*background-image: linear-gradient(to bottom right, #ff4e4e 0 15%, #f8ff64 40% 60%, #00ce1a 85% 100%);*/
    width: 100%;
    height: 90px;
    max-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-splatter {
    /* color: #ffffff; */
    color: #111;
    font-family: inherit;
    font-weight: bold;
    /* background-color: #4487ed; */
    background-color: #c5b805;
    width: 12em;
    height: 4em;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    position: relative;
    border-radius: 0.9em;
    box-shadow: 0 0.6em 0.9em rgba(0, 0, 0, 0.6);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none; /* Thanks to @SplittyDev */
    transform: translateY(-0.5em);
    transition: background-color 300ms cubic-bezier(0.18, 0.89, 0.32, 1.28), box-shadow 300ms cubic-bezier(0.18, 0.89, 0.32, 1.28), transform 300ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.btn-splatter.v2w {
    background: #fff;
    color: #4487ed;
    border-bottom: 1px solid #4487ed;
}

.btn-splatter:focus {
        outline: 0;
    }

.btn-splatter:active {
        background-color: #2770df;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
        transform: translateY(0em) scale(0.9);
        transition: background-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
    }

.splatter {
    position: absolute;
    top: 0;
    left: 0;
}

.splatter-round, .splatter-ring, .splatter-star {
    position: absolute;
}

.splatter-round {
    width: 1em;
    height: 1em;
    background-color: #1da5ff;
    border-radius: 50%;
}

.splatter-ring {
    width: 0.8em;
    height: 0.8em;
    border: solid 0.35em #0099e6;
    border-radius: 50%;
}

.splatter-star {
    width: 1.8em;
    height: 1.8em;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="%23006dd0" viewBox="0 0 24 24"%3E%3Cpath%20d%3D%22M12%2C17.27L18.18%2C21L16.54%2C13.97L22%2C9.24L14.81%2C8.62L12%2C2L9.19%2C8.62L2%2C9.24L7.45%2C13.97L5.82%2C21L12%2C17.27Z%22%3E%3C%2Fpath%3E%3C/svg%3E');
}