body, html{font-family: 'Neucha', cursive; font-size: 1.2em; letter-spacing: 2px; height:100%;}
a{text-decoration: none;}
ul{margin: 0; padding: 0;}
.red{color: #ed3126;}
.yellow{color: #fcd408;}
.orange{color: #fc7f0c;}
.blue{color: #3b72b8;}
.light-blue{color: #14b7f1;}
.dark-blue{color: #3b72b8;}
.pink{color: #ee257c;}
.green{color: #8ec642;}
.dark-green{color: #0ea80c;}
.dark-red{color: #a40202;}
.color1{color: #ed3126;}
.color2{color: #fcd408;}
.color3{color: #fc7f0c;}
.color4{color: #3b72b8;}
.color5{color: #14b7f1;}
.color6{color: #ee257c;}
.color7{color: #8ec642;}
.color8{color: #0ea80c;}
.color1bg{background-color: #ed3126;}
.color2bg{background-color: #fcd408;}
.color3bg{background-color: #fc7f0c;}
.color4bg{background-color: #3b72b8;}
.color5bg{background-color: #14b7f1;}
.color6bg{background-color: #ee257c;}
.color7bg{background-color: #8ec642;}
.color8bg{background-color: #0ea80c;}
.frame{ width: 70%; margin: 0 auto; position: relative;}
.section{position: relative; background-color: #fff; overflow: hidden; top: 0; width: 100%;}
.section-notch:before{ content: ""; position: absolute; background: url(../images/section_notch_top.png); background-repeat: repeat-x; opacity: 0.9; display: block; top: 0; width: 100%; height: 7px; z-index: 2;}
.section-notch:after{ content: ""; position: absolute; background-image: url(../images/section_notch_bottom.png); background-repeat: repeat-x; opacity: 0.9; bottom: -1px; width: 100%; height: 7px; z-index: 2;}
.section .background{background-size: cover; background-position: 0; background-repeat: no-repeat;}
.subpage{padding: 40px 0;}
.subpage .background{position: fixed; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat;}
.subpage .sidebar{vertical-align: top;}
.subpage .single-post .post-image{height: 250px;}
._padding_40{padding: 40px 0;}
._width_66{width: 66%;}
._width_33{width: 33%;}
.paragraph{font: normal normal normal 17px/1.4em din-next-w01-light,din-next-w02-light,din-next-w10-light,sans-serif; color: #2F2E2E; line-height: normal; letter-spacing: normal;}
.parallax{height: 100%; top: 300px; background-size: 100%;}
/*#index{min-height: 100%;}*/
.headline{position: absolute; width: 200px; height: 200px; bottom: 50px; right: 50px; z-index: 2;}
.headline2{top: 30px; left: 30px;}
.headline .headline-svg{height: auto; animation: headline-svg 22s infinite linear;}
@keyframes headline-svg {from{transform: rotate(0deg);} to{transform: rotate(360deg);}}
.headline .headline-text{ text-align: center; color: #fff; top: 20px; margin: 0;}
.headline .headline-fill{animation: halls-fill 14s infinite linear;}
.headline .headline-stroke{animation: red-stroke 14s infinite linear;}
.background_2{background-image: url("/web/file/background_2.png"); background-size: contain!important; background-repeat: repeat!important;}
.title{font-size: 48px; animation: address-text 14s infinite;}
.hex-list li{padding: 15px 50px; margin: 0 auto; background: url('/web/file/hex_list_gifs/yellow.gif') 0px 15px/30px no-repeat; list-style-type: none;}
.hex-list li:nth-child(2){background-image: url('/web/file/hex_list_gifs/green.gif');}
.hex-list li:nth-child(3){background-image: url('/web/file/hex_list_gifs/light-blue.gif');}
.hex-list li:nth-child(4){background-image: url('/web/file/hex_list_gifs/orange.gif');}
.hex-list li:nth-child(5){background-image: url('/web/file/hex_list_gifs/pink.gif');}
.hex-list li:nth-child(6){background-image: url('/web/file/hex_list_gifs/red.gif');}
.temporary{position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; z-index: 999;}
.temporary .background{background-color: #000; opacity: 0.7; animation: show-message-background 1s;}
@keyframes show-message-background{from{opacity: 0;} to {opacity: 0.7;}}
.temporary #message{width: 60%; left: 20%; top: 5%; max-height: 85%; height: auto; background-color: #fff; position: relative; overflow-y: auto; animation: show-message 1s;}
@keyframes show-message{from{top: -100%;} to {top: 5%;}}
.temporary .frame{padding: 15px 0; width: 85%;}
#admin-message{margin-top: 40px;}
#admin-message #admin_on_off{margin: 0 auto;display: table;padding: 10px 0;}
.terms{padding-top: 100px;}
.mobile{display: none;}

.single-post{height: auto; min-height: 100vh;}
.single-post .headline{top: 100px; right: 50px; left: auto;}
.single-post .headline .headline-text{font-size: 1.1em; width: 80%; left: 10%;}
.single-post .headline .small-title{font-size: 0.85em;}
.single-post #page-contain{width: 70%; margin: 0 auto; padding: 100px 0 170px; float: right;}
.single-post #page-contain #service-sidebar{padding-top: 250px;}
.single-post .service-hex{position: absolute; width: 350px; height: 350px; }
.single-post .post-image .headline-svg{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.single-post #hex-bottom{    bottom: -60px;position: absolute;left: 0;}


/* HEADER */
#header .menu-frame{width: 1080px; margin: 0 auto;}
#header .site-menu{height: 100px; z-index: 9; position: fixed; top: -100px; width: 100%; transition: 0.5s; background: rgba(255,255,255, 0.85); overflow: hidden;}
#header .site-menu .frame{height: 100%;}
#header .null-page{position: relative; top: 0;}
#header .service-page{background: none;}
#logo{position: absolute; height: 80px; top: 10px; left: 5%; width: 150px; transition: 0.5s;}
.menu{position: relative; display: block; text-align: center; margin: 0 auto; padding: 0;}
.menu li{display: inline-block; vertical-align: top; margin-top: 5px;}
.menu li a{text-decoration: none; cursor: pointer; display: block; font-weight: bold; padding: 35px 20px; color: #3b72b8;}
.menu li:nth-child(2) a{color: #ed3126;}
.menu li:nth-child(3) a{color: #fcd408;}
.menu li:nth-child(4) a{color: #8ec642;}
.menu li:nth-child(5) a{color: #fc7f0c;}
.menu li:nth-child(6) a{color: #ee257c;}
#mobile-open{background: none; border: none; outline: none; position: absolute; right: 20px; top: 40px; display: none;}
#mobile-open .mobile-line{width: 25px; height: 2px; margin: 4px 0;display: block; transition: 0.2s;}
#header .collapse .mobile-line:nth-child(1){transform: rotate(45deg) translate(4px, 5px);}
#header .collapse .mobile-line:nth-child(2){display: none;}
#header .collapse .mobile-line:nth-child(3){transform: rotate(-45deg) translate(-1px, 0px);}
#header .languages{position: absolute; right: 30px; top: 5px;}
#header .languages a{margin: 5px; color: #8ec642;}
#header .languages a:nth-child(2){color: #ed3126;}

/* bannner */
#banner{height: 100vh;}
#banner section{position: absolute; top: 0; left: 0; opacity: 0; height: 100%;}
#banner-video{height: 100%; width: auto; top: 0;}


/* admin */
#banner.admin{height: auto;}
#banner.admin section{position: relative; top: 0; left: 0; opacity: 1; height: auto; min-height: 100vh;}
#banner.admin #home{min-height: 100vh;}
.admin #services #services-contain{bottom: 25%;}

/* HOME */
#home #home-socials{width: 100%; position: absolute; bottom: 70px; text-align: center;}
#home #home-socials .social a{width: 90px; height: 70px;}
#home #summer-texts{z-index: 2; position: absolute; width: 350px; right: 12%; top: 200px; text-align: center;}
#home #summer-texts #summer-sign{width: 100%; height: 28vh;}
#home #summer-texts #summer-logo{width: 70%; height: 80px; margin: 10px auto;}
#home #summer-banner .image{background-size: 100% 100%;}
#home #summer-school .image{background-position: center;}
#home #summer-texts .load-more-wrapper{margin: 10px auto; }
#home #summer-texts .load-more{font-size: 26px;}

/* ABOUT */
#about .frame{padding-top: 10%; position: relative;}
#about .aboutpic{width: 300px; height: 300px;}
#about #aboutpic1{left: -100px; position: absolute; bottom: 250px; transform: rotate(10deg);}
#about #aboutpic2{left: -50px; position: absolute; bottom: 0; transform: rotate(-20deg);}
#about #aboutpic3{left: 150px; position: absolute; bottom: -130px; transform: rotate(-45deg);}
#about #hex-top{position: absolute; top: -5%; width: 100%; right: -3%; height: auto;}
.blue-fill{animation: blue-fill 10s infinite steps(1);}
.red-fill{animation: red-fill 12s infinite steps(1);}
.yellow-fill{animation: yellow-fill 14s infinite steps(1);}
.green-fill{animation: green-fill 16s infinite steps(1);}
@keyframes blue-fill {0%{fill: #3b72b8;}25%{fill: #fcd408;}50%{opacity: 0; fill: #ed3126; }75%{ opacity: 1; fill: #8ec642;}100%{fill: #3b72b8;}}
@keyframes red-fill {0%{fill: #ed3126;}25%{fill: #8ec642; opacity: 0;}50%{fill: #fcd408; opacity: 1;}75%{fill: #3b72b8;}100%{fill: #ed3126;}}
@keyframes yellow-fill {0%{fill: #fcd408;}25%{fill: #ed3126;}50%{fill: #8ec642;}75%{opacity: 0; fill: #3b72b8;}100%{opacity: 1; fill: #fcd408;}}
@keyframes green-fill {0%{fill: #8ec642;}25%{fill: #ed3126;}50%{opacity: 0; fill: #fcd408;}75%{opacity: 1; fill: #ed3126;}100%{fill: #8ec642;}}
#about #hex-top .blue-stroke{animation: blue-stroke 7s infinite steps(1);}
#about #hex-top .red-stroke{animation: red-stroke 9s infinite steps(1);}
#about #hex-top .yellow-stroke{animation: yellow-stroke 11s infinite steps(1);}
#about #hex-top .green-stroke{animation: green-stroke 13s infinite steps(1);}
@keyframes blue-stroke {0%{stroke: #3b72b8;}25%{stroke: #fcd408;}50%{stroke: #ed3126; }75%{stroke: #8ec642;}100%{stroke: #3b72b8;}}
@keyframes red-stroke {0%{stroke: #ed3126;}25%{stroke: #8ec642;}50%{stroke: #fcd408;}75%{stroke: #3b72b8;}100%{stroke: #ed3126;}}
@keyframes red-border {0%{border-color: #ed3126;}25%{border-color: #8ec642;}50%{border-color: #fcd408;}75%{border-color: #3b72b8;}100%{border-color: #ed3126;}}
@keyframes yellow-stroke {0%{stroke: #fcd408;}25%{stroke: #ed3126;}50%{stroke: #8ec642;}75%{stroke: #3b72b8;}100%{stroke: #fcd408;}}
@keyframes green-stroke {0%{stroke: #8ec642;}25%{stroke: #ed3126;}50%{stroke: #fcd408;}75%{stroke: #ed3126;}100%{stroke: #8ec642;}}
.svg{position: absolute;}
#svg-book{width: 8%; top: 0; left: 85%; transform: rotate(40deg); animation: svg-fall-book 18s infinite linear;}
@keyframes svg-fall-book{0%{top: 0; opacity: 0; transform: rotate(40deg);} 10%{opacity:1;} 13%{top: 0; transform: rotate(40deg); opacity: 1;} 70%{ top: 120%; transform: rotate(80deg);} 80%{opacity: 0;} 100%{opacity: 0;}}
#svg-bulp{width: 7%; top: -20px; left: 15%; transform: rotate(-20deg); animation: svg-fall-bulp 30s infinite linear;}
#svg-bulp #bulp{animation: svg-flash 2s infinite linear;}
@keyframes svg-fall-bulp{0%{top: -20px; opacity: 0; transform: rotate(-20deg);} 10%{opacity:1;} 15%{top: -20px; transform: rotate(-20deg); opacity: 1;} 70%{ top: 120%; transform: rotate(-130deg);} 80%{opacity: 0;} 100%{opacity: 0;}}
@keyframes svg-flash{0%{opacity: 1;} 50%{opacity: 0;} 100%{opacity: 1;}}
#svg-rocket{width: 5%; top: -50px; left: 60%; animation: svg-fall-rocket 30s infinite linear; transform: rotate(-20deg);}
@keyframes svg-fall-rocket{0%{top: -50px; opacity: 0; transform: rotate(-20deg);} 10%{opacity:1;} 17%{top: -50px; transform: rotate(-20deg); opacity: 1;} 70%{ top: 120%; transform: rotate(140deg);} 80%{opacity: 0;} 100%{opacity: 0;}}
#svg-clock{width: 5%; left: 35%; top: -60px; transform: rotate(-55deg);animation: svg-fall-clock 22s infinite linear;}
@keyframes svg-fall-clock{0%{top: -60px; opacity: 0; transform: rotate(-55deg);} 10%{opacity:1;} 20%{top: -60px; transform: rotate(-55deg); opacity: 1;} 70%{ top: 120%; transform: rotate(180deg);} 80%{opacity: 0;} 100%{opacity: 0;}}
#svg-coffee{width: 4%; left: 67%; top: 50px; transform: rotate(15deg); animation: svg-fall-coffee 26s infinite linear;}
@keyframes svg-fall-coffee{0%{top: 50px; opacity: 0; transform: rotate(15deg);} 10%{opacity:1;} 14%{top: 50px; transform: rotate(-15deg); opacity: 1;} 70%{ top: 120%; transform: rotate(-90deg);} 80%{opacity: 0;} 100%{opacity: 0;}}
#svg-rocket .stroke-background{animation: stroke-background 17s infinite linear;}
#about h2{text-align: center;}

/* HALLS */
#halls {width: 100%; height: 100%; overflow: hidden;}
#halls .headline, #partners .headline{top: 50px;}
#halls .halls-video .video{  position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%;  min-height: 100%; overflow: hidden; width: auto; height: auto;}
#halls .halls-button{animation: red-stroke 14s infinite linear;}
#halls .hall-svg{width: 250px; position: absolute;}
#halls #hall-mapping{left: 12px; bottom: 167px; }
#halls #hall-houses{left: 133px; bottom: -40px;}
#halls .halls-fill{animation: halls-fill 14s infinite linear;}
@keyframes halls-fill {0%{fill: #ed3126;}25%{fill: #8ec642;}50%{fill: #fcd408;}75%{fill: #3b72b8;}100%{fill: #ed3126;}}
#halls #halls-text-show{position: absolute; bottom: 0px; right: 60px;}
#halls .texts{color: #fff; position: absolute; text-align: center; font-size: 26px; line-height: 44px; cursor: pointer; z-index: 2; width: 250px;}
#halls #hall-houses-text{ left: 133px; bottom: 115px;}
#halls #hall-mapping-text{left: 12px; bottom: 320px;}
@keyframes halls-text {0%{color: #ed3126;}25%{color: #8ec642;}50%{color: #fcd408;}75%{color: #3b72b8;}100%{color: #ed3126;}}
#halls #halls-page{position: absolute; right: -20px; bottom: 50px; height: 100px; width: 550px;}
#halls #halls-page #halls-current{color: #ffffff; padding: 35px 0; font-size: 26px; text-align: center;}
.halls-text-frame{ border: 5px solid; animation: red-border 14s infinite linear; position: absolute; right: 30px; bottom: 30px; padding: 6px;}
#DYN .halls-text-frame{top: 50px; margin: 0 auto; background-color: transparent; position: relative; right: unset; bottom: unset; width: 80%;}
.halls-text-frame #halls-text-background{animation: halls-background 14s infinite linear; color: #ffffff; padding: 20px;}
@keyframes halls-background {0%{background-color: #ed3126;}25%{background-color: #8ec642;}50%{background-color: #fcd408;}75%{background-color: #3b72b8;}100%{background-color: #ed3126;}}
.halls-text-frame #halls-text-background #halls-closeDYN{display: none; text-align: right; cursor: pointer; font-size: 26px;}
#halls #halls-full-screen{position: absolute; right: 30px; bottom: 30px; width: 40px; display: none; cursor: pointer;}

/* EVENTS */
#events #hex-top{position: absolute; top: -5%; width: 100%; right: -3%; height: auto;}
#events .headline .headline-month{line-height: 46px;}
#events #events-contain{padding: 150px 0 0 0;}
#events .events-month{display: inline-block; width: 32%; margin: 0 auto; text-align: center; vertical-align: top; position: relative;}
#events .events-month h3 span{border-bottom: 2px solid; width: 200px; display: block; margin: 15px auto;}
#events .event-item{margin: 10px auto; color: inherit; cursor: pointer;}
#events .event-item .event-date{left: 0; margin-bottom: 10px;}
#events .event-item h4{margin: 0; display: block; color: inherit;}
#events .event-item .event-date span{color: #ffffff; display: block; text-align: center;}
#events .event-item .event-date .date-hex{position: absolute; left: 0; top: -13px; width: 100%; height: 54px; animation: headline-svg 14s infinite linear;}
#events .event-item .preview-event{bottom: 40px; z-index: 3; border: 5px solid; width: 150px; left: -25px; padding: 4px; font-size: 18px;}
#events .event-item .preview-event .preview-contain{color: #fff; padding: 5px;}
#events .event-item .preview-event .event-open, #events .event-item .preview-event .event-close{font-size: 22px; color: inherit; font-weight: bold; cursor: pointer;}
#events .event-item .preview-event .event-open .Text{text-decoration: underline;}
#events .past-event{color: #888;}
#events .past-event .event-date .date-hex{animation: unset;}
#events .past-event .event-date .date-hex .event-polygon{fill: #888;}
#events #collage{ bottom: 0px; top: unset;}
#events #collage .image{background-position: bottom; background-size: contain;}
#events .season{transition: 1s; min-width: 100%; min-height: 100%; position: absolute;}
#events .hide_season{opacity: 0;}
#events #month{left: 70px; width: 230px; height: 230px; bottom: 30px;}
#events #month .headline-svg{animation: unset; transform: rotate(90deg);}
#events #collage #collage-image{bottom: 160px; top: auto; height: 450px; }
#events #collage #collage-image .month-image{ position: absolute; bottom: 0; height: 100%;  transition: 1s; left: 0;}
#events #collage #collage-image .hide-month{ height: 0; left: 150px;}
#events #collage #collage-image #month_3, #events #collage #collage-image #month_6, #events #collage #collage-image #month_9{padding-left: 30px;}
#events #collage #collage-image #month_10{transform: rotate(20deg);}
#events .Calendar #mobile-period th{font-size: 32px;}

#event #page-contain{padding: 70px 0 100px;}
#event #page-contain #service-text{padding-top: 50px; vertical-align: top;}
.events-page .options{width: 300px; height: 300px; bottom: 50px; left: 250px;}
#event .options .class-details{position: relative; top: 50%; transform: translateY(-65%); font-size: 20px; width: 100%; color: #ffffff; padding: 0;}
#event .options .class-details li{list-style-type: none; line-height: 40px;}
#event .options .class-details .name, .services-page .class-details .info{display: inline-block; color: #ffffff;}
.events-page .post-image{left: -120px; bottom: 0; position: fixed;}
.events-page .post-image .post-pic{left: 114px; width: 323px; height: 328px; top: unset; bottom: 247px;}
#event #service-text #countdown{padding-left: 0;}
#event #service-text #countdown .clock-item{display: inline-block; position: relative; margin: 0 10px; text-align: center;}
#event #service-text #countdown .clock-item .count-field{width: 100px; margin-bottom: 10px;}
#event #service-text #countdown .clock-item .date-hex{position: absolute; left: -2px; top: -13px; width: 100%; height: 75px; animation: headline-svg 14s infinite linear;}
#event #service-text #countdown .clock-item:nth-child(1) .date-hex .event-polygon{fill: #3b72b8;}
#event #service-text #countdown .clock-item:nth-child(2) .date-hex .event-polygon{fill: #fcd408;}
#event #service-text #countdown .clock-item:nth-child(3) .date-hex .event-polygon{fill: #8ec642;}
#event #service-text #countdown .clock-item:nth-child(4) .date-hex .event-polygon{fill: #ed3126;}
#event #service-text #countdown .clock-item .count-number{position: relative; font-size: 30px; line-height: 48px; color: #ffffff;}
#event #service-text #countdown .clock-item:nth-child(1) .count-text{color: #3b72b8;}
#event #service-text #countdown .clock-item:nth-child(2) .count-text{color: #fcd408;}
#event #service-text #countdown .clock-item:nth-child(3) .count-text{color: #8ec642;}
#event #service-text #countdown .clock-item:nth-child(4) .count-text{color: #ed3126;}

.Calendar{margin: 0 auto;display: table; position: relative;}
.schedule{ display: inline-block; text-align: center; }
.schedule th{padding: 10px; width: 90px; font-size: 18px; color: #ed3126;}
.schedule th:nth-child(2){color: #3b72b8;}
.schedule th:nth-child(3){color: #ee257c;}
.schedule th:nth-child(4){color: #a40202;}
.schedule th:nth-child(5){color: #0ea80c;}
.schedule th:nth-child(6){color: #fcd408;}
.schedule th:nth-child(7){color: #fc7f0c;}
.schedule td{ padding: 3px; position: relative; height: 48px;}
.schedule td .background{ background-color: #fff; opacity: 0.7; width: 94%; height: 90%; top: 5%; left: 3%; font-size: 24px;}
.changePeriod{position: absolute; font-size: 150px; color: #8ec642;cursor: pointer; top: 80px; right: -120px; padding: 0 10px; vertical-align: top;}
.changePeriod:nth-child(1){color: #ed3126; right: auto; left: -120px;}
.now{background: rgba(111, 255, 40, 0.8);}
.other-month{color: #999;}

/* SERVICES */
#services{text-align: center;}
#services #services-contain{width: 86%; margin: 0 auto; position: absolute; bottom: -100px; left: 7%; transition: 0.5s;}
#services .service-item{display: inline-block;margin: 0 2%; vertical-align: top; position: relative; z-index: 1;}
#services .service-item .contain{/*height: 200px;*/}
#services .service-item .service-image{width: 40%; height: auto; transform: rotate(45deg); transition: 0.5s;}
#services .service-item h4{width:  100%; opacity: 0; transition: 0.2s;}
#services #hex-bottom{width: 100%; bottom: 0; position: absolute; left: -2%; height: auto;}
#services #hex-top{position: absolute; top: -5%; width: 100%; right: -3%; height: auto;}

.services-page .post-image .options{bottom: 50px; left: 250px;}
.services-page .post-image .post-pic{left: 10px; top: 120px; height: 430px; width: 430px;}
#service #page-contain #service-text{vertical-align: top;}
#service #page-contain #service-text .paragraph{padding-bottom: 20px;}

/* GALLERY */
#gallery{padding: 0 0 250px; text-align: center;}
#gallery .gallery-categories{padding: 80px 0 50px;}
#gallery .gallery-categories .gallery-menu{padding: 0;}
#gallery .gallery-menu li{display: inline-block; list-style-type: none; margin: 10px 15px; font-weight: bold; cursor: pointer; padding-bottom: 3px;}
#gallery .gallery-menu li:first-child{border-bottom: 2px solid;}
#gallery .gallery-item{vertical-align: top; margin: 10px 5px; border: 8px solid; position: relative; cursor: pointer;  display: inline-block; width: 220px; height: 220px; overflow: hidden; transition: 0.3s;}
#gallery .hide{display: none;}
#gallery .gallery-image{width: 100%; height: 100%;}
#gallery .gallery-item .gallery-overlay{position: absolute; height: 90%; width: 90%; top: 5%; left: 5%; z-index: 2; opacity: 0;}
#gallery .gallery-item:hover .gallery-overlay{opacity: 1; transition: 0.5s;}
#gallery .gallery-item .gallery-overlay .gallery-content{color: #fff;}
#gallery #load-more, .load-more{display: block; font-size: 36px; padding: 5px 20px; font-family: inherit; animation: bg-color linear infinite 14s;}
#gallery #load-more-wrapper, .load-more-wrapper{padding: 5px; border: 5px solid; margin: 20px auto; animation: address-text linear infinite 14s;}
@keyframes bg-color {0%{background-color: #ed3126;}25%{background-color: #8ec642;}50%{background-color: #fcd408;}75%{background-color: #3b72b8;}100%{background-color: #ed3126;}}

/* PARTNERS */
#partners{height: 800px;}
#partners-list{height: 100%; height: 500px; margin-top: 200px;}
#partners-box{height: 400px;}
.partner-preview{width: 27%; height: 100%; opacity: 0.3; position: absolute; z-index: 2; transition: 1s;}
.partner-preview .preview-content, .hex-changer .changer-image{ width: 80%; left: 10%;}
.partner-preview.go-back{visibility: hidden; transition: none;}
.partner-preview.before{left: 15%;}
.partner-preview.after{left: 56%;}
.partner-preview.current{left: 33%; opacity: 1; z-index: 3; width: 33%; top: 0;}
.partner-preview.current .preview-content{opacity: 1;}
#partner-info .headline-stroke, #partner-info .headline-fill, .partner-changer .basic-fill{transition: 1s;}
#partner-info{height: 800px;}
#partners #partner-info .headline-svg{height: auto; /*animation: headline-svg 50s infinite linear;*/ transform: rotate(10deg); width: 160%; left: -45%; top: -50px;}
#partner-title{border-bottom: 1px solid #000000;}
.partner-changer{padding-top: 30px; cursor: pointer;}
.partner-changer .hex-changer{height: 60px; width: 52px; margin: 0 -1.5px;}
.partner-changer .partner-arrow{margin: 22px -10px 0 0;}
.partner-changer .partner-arrow:last-child{transform: rotate(180deg); margin: 22px 0 0 -10px;}
.partner-text{font-size: 0.9em; padding-right: 40px;}
#partners-background{height: 100%; width: auto; transform: translateX(300px);}
.partner-loader{width: 100%; overflow: hidden;  position: absolute; height: 4px;}
.partner-loader span{display: block; height: 4px; width: 100%; transform: translateX(-100%); position: absolute;}
.partner-loader .active{animation: partner-loader 8s linear;}
@keyframes partner-loader{from{transform: translateX(-100%);} to {transform: translateX(0%);}}
#partner-control .control-button{height: 25px; width: 25px; display: inline-block; margin: 10px 5px; cursor: pointer;}
.button-arrow{height: 22px; width: 30px;}
#rainbow .rainbow-star{animation: rainbow-star 4s ease infinite;}
#rainbow #rainbow-star-4{animation-delay: 0.5s;}
#rainbow #rainbow-star-5{animation-delay: 1s;}
#rainbow #rainbow-star-6{animation-delay: 1.5s;}
#rainbow #rainbow-star-3{animation-delay: 2s;}
#rainbow #rainbow-star-2{animation-delay: 2.5s;}
@keyframes rainbow-star{0%{opacity: 100%;} 50%{opacity: 100%;} 75%{opacity: 0;} 100%{opacity: 100%;}}

/* ADDRESS */
#address{height: 80vh;}
#address #map-canvas{height: 100%; position: relative;}
#address #adress-info{position: absolute; width: 400px; height: 400px; right: 100px; top: 50%; transform: translateY(-65%); z-index: 2;}
#address #adress-info #adress-hex{position: absolute; width: 100%; height: 100%; left: 0px; top:  0px;}
#address #adress-info ul{position: relative; padding: 70px 0 0 0; width: 290px; margin: 0 auto; text-align: center;}
#address #adress-info ul li{list-style-type: none;}
#address #adress-info ul li h4{ animation: address-text 14s infinite; margin: 0; color: #fcd408;}
@keyframes address-text {0%{color: #ed3126; border-color: #ed3126;}25%{color: #8ec642; border-color: #8ec642;}50%{color: #fcd408; border-color: #fcd408;}75%{color: #3b72b8; border-color: #3b72b8;}100%{color: #ed3126; border-color: #ed3126;}}
#address #adress-info ul li .paragraph, #address #adress-info ul li .paragraph a{display: inline-block; color: #3b72b8; text-decoration: none;}
#address .adress-hex{animation: red-stroke 14s infinite;}

/* WRITE-US */
#write-us{display: block;}
#write-us #contact-form{width: 500px; margin: 0 auto; padding: 20px; box-sizing: border-box;}
#write-us #contact-form input[type="text"], #write-us #contact-form textarea{outline: none; border: none; padding: 10px; box-sizing: border-box; font-size: 20px; background-color: transparent; border-bottom: 2px solid; font-family: inherit;}
#write-us #contact-form input[type="text"]::placeholder, #write-us #contact-form textarea::placeholder{color: #555555;}
#write-us #contact-form input[type="text"]{width: 49%;}
#write-us #contact-form textarea{width: 100%; height: 100px; margin: 20px auto;}
#write-us #contact-form input[type="submit"]{outline: none; border: none; padding: 10px 15px; font-size: 18px; margin: 0 auto; color: #ffffff; display: block; cursor: pointer; transition: 0.5s;}
#write-us #contact-form input[type="submit"]:hover{background-color: #8ec642;}
#write-us #contact-form #ContactThankMessege{color: #ed3126; text-align: center; display: none;}

/* CONTACT */
.social a{width: 50px; height: 50px; display: inline-block;}
.social a .image{background-size: contain; width: 100%; height: 100%;}
#adress-info ul li{background: none; padding: 0; margin: 0;}

/* FOOTER */
#foot-top{ padding: 10px 0; text-align: center;}
#foot-top .inline-block{vertical-align: top;}
#foot-top .plugin-button{margin: 0;}
#foot-bottom{padding: 5px 0; height: auto; text-align: center; color: #3b72b8;}
#foot-bottom .credit_imaSMI a{color: #ed3126;}
#foot-bottom .inline-block{vertical-align: top;}
#foot-bottom #Logger a{color: #3b72b8; margin: 0 5px;}
#foot-bottom #menu-footer ul li{padding: 0; background: none; display: block; margin-top: 0;}
#foot-bottom #menu-footer ul li a{padding: 0; font-size: 22px; font-weight: normal;}

@media only screen and (min-height: 900px){
    .paragraph{font: normal normal normal 24px/1.4em din-next-w01-light,din-next-w02-light,din-next-w10-light,sans-serif;}
    #address #adress-info{width: 500px; height: 550px;}
    #address #adress-info ul{padding: 106px;}
    
    .headline{width: 250px; height: 250px;}
    .headline .headline-text{ font-size: 34px; line-height: 48px;}
}

@media only screen and (max-height: 699px){
    .paragraph{ font-size: 16px; line-height: 20px;}
    .headline{width: 170px; height: 170px;}
    .headline .headline-text{ font-size: 26px;}
    
    #about #about-title{margin: 0;}
    #about .aboutpic{width: 250px; height: 250px;}
    #about #aboutpic1{bottom: 180px;}
    #about #aboutpic3{left: 60px; }
    
    #halls .hall-svg{width: 200px;}
    #halls .texts{font-size: 24px; line-height: 40px; width: 200px;}
    #halls #hall-mapping{left: 12px; bottom: 97px; }
    #halls #hall-mapping-text{left: 12px; bottom: 250px;}
    #halls #hall-houses{left: 110px; bottom: -70px;}
    #halls #hall-houses-text{left: 110px; bottom: 85px; }
}

@media only screen and (max-height: 569px){
    #about .paragraph{ font-size: 15px; line-height: 19px;}
    #about .aboutpic{width: 230px; height: 230px;}
    
    #home #summer-school #summer-texts .load-more{font-size: 20px;}
    #home #summer-texts #summer-sign{height: 80px;}
    #home #summer-texts .load-more-wrapper{vertical-align: top;}
    #home #summer-texts #summer-logo{width: 50%; display: inline-block; height: 60px;}
}

@media only screen and (max-height: 480px){
    #top-menu li a{padding: 5px;}
    
    #home #summer-school #summer-banner .image{background-position: right;}
    #home #summer-school #summer-texts{top: 110px; right: 12%; margin: 0px;}
    #home #summer-school #summer-sign{width: 100%;}
    #home #summer-school #summer-sign,#home #summer-school .load-more-wrapper{display: inline-block;     vertical-align: middle;}
    #home #summer-school #summer-logo{height: 60px;}
}

@media only screen and (min-width: 2100px){
    .paragraph{font: normal normal normal 24px/1.4em din-next-w01-light,din-next-w02-light,din-next-w10-light,sans-serif;}
}

@media only screen and (max-width: 1360px){
    #logo{ left: 3%;}
    .menu li a{padding: 35px 10px;}
    
    #services #fb_comments{display: none;}
    .single-post .post-image .post-pic{height: 380px; width: 380px;}
    .single-post .headline .small-title{font-size: 0.7em!important;}
    #service .post-pic{height: 400px; width: 400px;}
    
    .events-page .post-image .post-pic{left: 90px;width: 294px; height: 294px; bottom: 226px;}
    .events-page .service-hex{width: 270px; height: 270px; }
    .events-page .options .class-details{font-size: 18px;}
    .events-page .post-image .options{bottom: 45px; left: 215px;}
    
    #events #month{width: 200px; height: 200px; bottom: 30px; left: 30px;}
    #events #collage #collage-image { bottom: 140px; top: auto; height: 350px;}
    #events #collage #collage-image #month_3{margin-left: -30px;}
}

@media only screen and (max-width: 1280px){
    .frame{width: 86%;}
    .headline{width: 170px; height: 170px;}
    .headline .headline-text{ font-size: 26px;}
    
    #address #adress-info{right: 50px;}
    #about #hex-top{top: -10%;}
    #about .background #aboutpic3{left: 0;}
    
    #halls .hall-svg{width: 200px;}
    #halls .texts{font-size: 24px; line-height: 40px; width: 200px;}
    #halls #hall-mapping{left: 12px; bottom: 97px; }
    #halls #hall-mapping-text{left: 12px; bottom: 250px;}
    #halls #hall-houses{left: 110px; bottom: -70px;}
    #halls #hall-houses-text{left: 110px; bottom: 85px; }
    
    .single-post #page-contain{width: 550px; float: unset;}
    .single-post #page-contain #service-sidebar{padding: 0;}
    ._width_66{width: 100%;}
    ._width_33{display: block; width: 100%;}
    #service .post-pic{width: 330px; height: 330px; }
    .service-bottom  .post-pic{left: unset; top: unset; bottom: unset;}
    .events-page .post-image{position: absolute; top: auto; bottom: -50px;}
    .schedule th{width: 80px;}
    #events #month {width: 170px;height: 170px;bottom: 30px;left: 15px;}
    
    #gallery .gallery-categories{width: 70%; margin: 0 auto;}
}

@media only screen and (max-width: 1080px){
    .desktop{display: none;}
    .mobile{display: block;}
    .settingText{display: none;}
    .stripText{display: block;}
    .temporary #message{width: 90%; left: 5%;}
    
    #top-menu{display: none; padding: 0px; margin: 0px;}
    #logo{left: 10px; height: 70px; top: 15px; position: relative;}
    .frame{ width: 90%;}
    #header .menu-frame{width: 100%;}
    .menu li{display: block; margin: 0 auto;}
    .menu li a{padding: 20px;}
    #mobile-open{display: block;}
    #header .languages {right: 90px; top: 35px;}
    #banner{height: auto;}
    #banner section{position: relative; top: 0; left: 0; opacity: 1; height: auto;}
    .headline{position: relative;top: auto; left: auto; bottom: auto; right: auto; margin: 0 auto; width: unset; height: unset;}
    .headline .headline-svg{display: none;}
    .headline .headline-text{color: #ed3126; font-size: 48px; transform: unset; animation: address-text 14s infinite; top: 0; padding-bottom: 20px;}
    #banner #about .headline{padding-top: 180px;}
    
    #banner #home{min-height: 100vh;}
   /* #home #home-image .image{background-image: url('/web/file/49/mv2_mobile.gif')!important;} */
    
    #banner #about .frame{padding: 0 0 360px;}
    #about #hex-top{width: 1400px; right: -80px; top: 5px;}
    #svg-book{width: 10%;}
    #svg-bulp{width: 9%;}
    #svg-clock{width: 7%;}
    #svg-coffee{width: 6%;}
    #svg-rocket{width: 7%;}
    #about .background .aboutpic{width: 220px; height: 220px;}
    #about .background #aboutpic1{bottom: 160px; left: -60px;}
    #about .background #aboutpic2{left: 40px; bottom: 60px;}
    #about .background #aboutpic3{left: 180px; bottom: 40px;}
    
    #banner #halls{height: 100vh;}
    #banner #halls .hall-svg{width: 160px;}
    #banner #halls #hall-houses{left: 90px; bottom: -85px;}
    #banner #halls #hall-mapping{bottom: 45px;}
    #banner #halls .texts{font-size: 20px; line-height: 36px; width: 160px;}
    #banner #halls #hall-mapping-text{bottom: 205px;}
    #banner #halls #hall-houses-text{left: 90px; bottom: 73px;}
    #halls #halls-text-show{display: none;}
    
    #banner #services{height: 550px;}
    #banner #services .headline{padding-top: 85px;}
    #banner #services #services-contain{top: 25%; bottom: unset;}
    #banner #services .service-item .service-image{margin-top: 200px; display: block;}
    #banner #services #hex-top{width: 1000px; top: 5px; right: -40px;}
    #banner #services #hex-bottom{width: 1000px; bottom: 0px; left: -30px;}
    
    
    
    #events{padding: 50px 0;}
    #events #events-contain{width: 100%; padding: 0px;}
    #events #hex-top{display: none;}
    #events .Calendar #mobile-period{display: table-row;}
    #events #collage{display: none;}
    .schedule td, .schedule th{ font-size: 14px;}
    .schedule th{width: 40px;}
    .changePeriod{font-size: 108px; top: 160px;}
    .changePeriod{right: -90px;}
    .changePeriod:nth-child(1){left: -90px;}
    #events .event-item .event-date .date-hex{height: 44px;}
    .event-top .post-image{position: relative; height: 270px; bottom: unset;}
    .event-top .post-image .service-hex{bottom: 0;}
    .event-bottom .post-image{position: absolute;}
    #event .post-image .post-pic{left: unset;width: 270px; left: 50%; margin-left: 140px;}
    .event-bottom .post-image .post-pic{bottom: 65px;}
    .event-top .post-image .post-pic{bottom: -25px;}
    #event .post-image .options{width: 250px; height: 250px; left: 50%; margin-left: -140px;}
    #event .options .class-details{font-size: 18px;transform: translateY(-68%);}
    #event .options .class-details li{line-height: 26px;}
	#event #page-contain{padding: 0;}
    #event #page-contain #service-text{padding-top: 0;}
    
    .single-post .headline{width: auto; height: auto; right: auto; padding: 30px 0; top: unset; margin-top: 100px;}
    .single-post .headline .headline-text{top: 0;}
    .single-post .headline .headline-text{font-size: 1.3em; margin-top: 0; transform: none;}
    #service .post-image .post-pic{height: 250px; width: 250px;}
    .service-top .post-image{position: relative;}
    .service-top .post-image .post-pic{ top: unset; left: unset; margin: 0 auto; position: relative;}
    .service-bottom .post-image .post-pic{ bottom: 100px; left: 50%; margin-left: -125px; top: unset;}
    .single-post .post-image .options{left: 105px;}
    .event-bottom .post-image .options{bottom: 86px;}
	.single-post #page-contain{width: 90%; padding: 0 0 30px;}
	.service-top #page-contain, .event-top #page-contain{margin: 0 5% 150px;}
	.service-bottom #page-contain, .event-bottom #page-contain{margin: 0 5% 350px;}
    #index .single-post .background #hex-bottom{width: auto; height: 600px; left: -65px;}
    
    #gallery{padding: 50px 0 100px;}
    #gallery .headline{padding-top: 50px;}
	#gallery .gallery-categories{padding: 0;}
    #gallery .gallery-categories{width: 100%;}
    
    #address{height: auto;}
    #address #adress-info{position: relative; margin: 40px auto; right: auto; top: auto; transform: none;}
    #address .background{position: relative; height: 400px;}
}

@media only screen and (max-width: 780px){
    #about #hex-top{width: 1200px;}
    #svg-book{width: 14%;}
    #svg-bulp{width: 13%;}
    #svg-clock{width: 11%;}
    #svg-coffee{width: 10%;}
    #svg-rocket{width: 11%;}
    #about .background #aboutpic1{left: -10%; bottom: 130px;}
    #about .background #aboutpic2{left: 25%; bottom: 80px;}
    #about .background #aboutpic3{left: 60%; bottom: 95px;}
    
    #banner #services{height: auto;}
    #banner #services .headline{padding: 150px 0 20px;}
    #banner #services #services-contain{top: unset; width: auto; left: unset; position: relative; padding: 0 0 150px;}
    #banner #services .service-item{width: 220px!important; margin: 0 20px;}
    #banner #services .service-item .service-image{margin-top: 200px; display: block;}
    
    #halls #halls-text-info{display: none;}
    .halls-text-frame #halls-text-background #halls-closeDYN, #halls #halls-full-screen{display: block;}
    /*#halls #halls-text-open{display: block;}
    #halls #halls-text-open #halls-text-background{padding: 5px;}*/

    .schedule th{padding: 5px 2px;}
    .changePeriod{font-size: 40px; position: absolute; top: -4px; right: 0;}
    .changePeriod:nth-child(1){left: 0;}
    .event-top .post-image{height: 230px;}
    #event .post-image .post-pic{width: 230px; height: 230px; position: absolute;}
    .event-bottom .post-image .post-pic{ bottom: 95px;}
    .event-top .post-image .post-pic{bottom: -5px;}
    #event .post-image .options{height: 220px; width: 220px; margin: 0 0 0 -140px;}
    .event-bottom .post-image .options{ bottom: 100px;}
    #event #service-text #countdown .clock-item{font-size: 1em; margin: 0 5px;}
    #event #service-text #countdown .clock-item .count-field{width: 75px;}
    
    .single-post #page-contain #service-text{width: 100%;}
    .single-post #page-contain #service-sidebar{padding-top: 0; width: 100%;}
    .single-post #service-sidebar #fb_comments{display: block; width: 100%;}
    .single-post .class-details{transform: translateY(-55%);}
    
    #write-us #contact-form{width: 70%;}
    #write-us #contact-form input[type="text"], #write-us #contact-form textarea{width: 100%; margin: 15px auto; display: block;}
}

@media only screen and (max-width: 640px){
    /* #home #home-image .image{background-image: url('/web/file/49/mv2_cut.gif')!important;} */
    #event .post-image .post-pic{margin-left: 110px;}
    #event .post-image .options{margin: 0 0 0 -110px;}
    
    #home #summer-banner{height: 250px; top: 90px;}
    #home #summer-banner .image{background-image: url("/web/file/1500/zanimalnia.png")!important; background-position: center; background-size: contain;}
    #home #summer-texts{top: 350px; left: 0; margin: 0 auto; width: 100%;}
    #home #summer-texts #summer-sign{height: 80px;}
    #home #summer-texts .load-more-wrapper{vertical-align: top;}
    #home #summer-texts #summer-logo{width: 50%; display: inline-block; height: 60px;}
    #home .load-more{font-size: 20px;}
    
    #write-us #contact-form{width: 90%;}
}

@media only screen and (max-width: 460px){
    #home #home-socials .social a{width: 55px; height: 55px;}
    
    #banner #halls .hall-svg{width: 145px;}
    #banner #halls #hall-houses{left: 84px; bottom: -99px;}
    #banner #halls #hall-mapping{bottom: 22px;}
    #banner #halls .texts{font-size: 18px; line-height: 28px; width: 145px;}
    #banner #halls #hall-mapping-text{bottom: 193px;}
    #banner #halls #hall-houses-text{left: 84px; bottom: 72px;}

    /*#halls #halls-text-open{right: 10px; bottom: 60px; font-size: 14px;}*/
    
    .event-top .post-image{height: 180px;}
    #event .post-image .post-pic{width: 200px; height: 200px;}
    .event-top .post-image .post-pic{bottom: -5px;}
    .event-bottom .post-image .post-pic{bottom: 145px;}
    #event .post-image .options{ height: 190px; width: 190px; font-size: 0.7em; margin: 0 0 0 -60px;}
    .event-bottom .post-image .options{bottom: 150px}
    #event .options .class-details{transform: translateY(-70%); padding-left: 0; font-size: 0.9em;}
    #event .options .class-details li{line-height: 22px;}
    #event #service-text #countdown .clock-item{font-size: 0.75em; margin: 0 2px;}
    #event #service-text #countdown .clock-item .count-field{width: 63px;}
    #event #service-text #countdown .clock-item .date-hex{height: 60px;}
    #event #service-text #countdown .clock-item .count-number{line-height: 36px;}
    
    
    #address #adress-info{width: 320px; height: 360px;}
    #address #adress-info ul{font-size: 0.8em;}
}