/* GENERAL */

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: transparent;
	font-family: 'Muli', sans-serif;
	font-weight: 300;
}

body {
	width: 100%;
    width: 100vw;
    height: 100%;
    height: 100vh;
}

.section {
	width: 100%;
	width: 100vw;
	padding: 10% 0;
	padding: 10vh 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	background-color: white;
}

.section--full {
    width: 100%;
	width: 100vw;
    height: 100%;
    height: 100vh;
	padding: 10% 0;
	padding: 10vh 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	background-color: white;
}

.section__title {
}

.row {
	width: 100%;
	width: 100vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	background-color: transparent;
}

.clearfix {
    clear: both;
}

.bckg--grey-gradient {
    background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
}



/* TYPOGRAPHY */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Montserrat', sans-serif;
	color: #444;
	font-weight: 100;
	margin-top: 0;
	line-height: 100%;
}

h1 {
	font-size: 3em;
	margin-bottom: 2em;
}

h2 {
	font-size: 2.2em;
	margin-bottom: 1em;
}

h3 {
	font-size: 1.8em;
	margin-bottom: 1em;
}

h4 {
	font-size: 1.6em;
	margin-bottom: 1em;
}


h5 {
	font-size: 1.4em;
	margin-bottom: 1em;
}

h6 {
	font-size: 1.2em;
	margin-bottom: 1em;
}

p {
	font-size: 1.2em;
	line-height: 1.6em;
	font-weight: 300;
	color: #444;
    margin-bottom: 1em;
}

.bold {
	font-weight: 700;
}

.text-centered {
	text-align: center;
}

.text-important {
	font-weight: 700;
	font-size: 1.2em;
}

.text-red {
	color: indianred;
}

ul {
	list-style: disc;
	padding: 0 1em;
	margin-left: 1em;
	font-size: 1.1em;
	line-height: 1.3em;
}

li {
	padding-top: 10px;
}


a {
	color:#444;
    text-decoration: none;
	-webkit-transition: color 0.3s linear;
	transition: color 0.3s linear;
}

a:hover {
	color: #E63347;
}

sup {
    font-size:50%;
}


/* NAVIGATION */

:root {
  --offset-value: 10;
  --btn-size: 50;
}

.nav--wrapper {
  width: 100%;
  position: relative;
  background: -webkit-gradient(linear, left bottom, right top, from(#444), to(#fff));
  background: linear-gradient(to top right, #444, #fff);
}

.nav-on-top {
    z-index: 9999;
}


#nav-bg {
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  -webkit-transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale));
  transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale));
  will-change: transform;
  pointer-events: none;
}

.nav__btn {
  position: fixed;
  height: calc(var(--btn-size)*1px);
  width: calc(var(--btn-size)*1px);
  top: calc((var(--offset-value))*1px);
  right: calc(var(--offset-value)*1px);
  -webkit-transform:scale(0.7,0.7);
  transform:scale(0.7,0.7);
  border-radius: 50%;
  background: #efefef;
  cursor: pointer;
  margin: 0;
  padding: 0 10px;
  border: none;
  z-index: 100;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  opacity: 0;
  -webkit-animation: mb 0.5s linear forwards 10s;
  animation: mb 0.5s linear forwards 8s;
}

@-webkit-keyframes mb {
	100% {
		opacity:1;
	}
}

@keyframes mb {
	100% {
		opacity:1;
	}
}



#toggle-nav__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #7B9BD1;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}

#toggle-nav__btn span {
  position: relative;
  width: 100%;
}

#toggle-nav__btn span {
  margin-top: -4px;
}
#toggle-nav__btn span + span {
  margin-top: 8px;
}

#toggle-nav__btn span:before,
#toggle-nav__btn span:after {
  content: '';
  position: absolute;
  top: 0;
  background: currentColor;
  opacity: .8;
  height: 100%;
  width: 50%;
  height: 4px;
  -webkit-transition: .25s cubic-bezier(.6,0,.3,1);
  transition: .25s cubic-bezier(.6,0,.3,1);
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

#toggle-nav__btn span:before {
  left: 0;
  border-radius: 3px 0 0 3px;
}

#toggle-nav__btn span:after {
  right: 0;
  border-radius: 0 3px 3px 0;
}

#toggle-nav__btn.shown span:nth-of-type(1):before {
  -webkit-transform: translate3d(3px, 3.5px, 0) rotate(45deg);
  transform: translate3d(3px, 3.5px, 0) rotate(45deg);
}

#toggle-nav__btn.shown span:nth-of-type(1):after {
  -webkit-transform: translate3d(-3px, 3.5px, 0) rotate(-45deg);
  transform: translate3d(-3px, 3.5px, 0) rotate(-45deg);
}

#toggle-nav__btn.shown span:nth-of-type(3):before {
  -webkit-transform: translate3d(3px, -3.5px, 0) rotate(-45deg);
  transform: translate3d(3px, -3.5px, 0) rotate(-45deg);
}

#toggle-nav__btn.shown span:nth-of-type(3):after {
  -webkit-transform: translate3d(-3px, -3.5px, 0) rotate(45deg);
  transform: translate3d(-3px, -3.5px, 0) rotate(45deg);
}

#toggle-nav__btn.shown span:nth-of-type(2):before,
#toggle-nav__btn.shown span:nth-of-type(2):after {
  opacity: 0.0001;
}

#toggle-nav__btn.shown span:nth-of-type(2):before {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
}

#toggle-nav__btn.shown span:nth-of-type(2):after {
  -webkit-transform: translateX(200%);
  transform: translateX(200%);
}

#toggle-nav__btn.shown:before {
  -webkit-transform: scale(.6);
  transform: scale(.6);
  -webkit-transition: .2s;
  transition: .2s;
}

#toggle-nav__btn:before {
  content: '';
  -webkit-transition: .2s .2s;
  transition: .2s .2s;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  z-index: -2;
}

#toggle-nav__btn:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: -1;
}

nav {
  width: 100%;
  height: 100%;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: -1;
  pointer-events: none;
}

nav ul {
  margin: auto;
  pointer-events: auto;
  text-align: center;
  list-style: none;
}

nav li {
  font-size: 30px;
  color: #212121;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: translate(-20px,20px) scale(.9);
  transform: translate(-20px,20px) scale(.9);
  -webkit-transition: 0s;
  transition: 0s;
  opacity: 0.0001;
  visibility: hidden;
  will-change: transform;
}

nav li + li {
  margin-top: 30px;
}

#toggle-nav__btn.shown ~ .nav--wrapper nav li {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  visibility: visible;
  -webkit-transition: .35s cubic-bezier(.4,2.08,.55,1);
  transition: .35s cubic-bezier(.4,2.08,.55,1);
}

#toggle-nav__btn.shown ~ .nav--wrapper nav li:nth-child(1) {
  -webkit-transition-delay: .15s;
  transition-delay: .15s;
}
#toggle-nav__btn.shown ~ .nav--wrapper nav li:nth-child(2) {
  -webkit-transition-delay: .125s;
  transition-delay: .125s;
}
#toggle-nav__btn.shown ~ .nav--wrapper nav li:nth-child(3) {
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

/* nav link effect */

.nav__link {
  position: relative;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.nav__link:before,
.nav__link:after {
  position: absolute;
  content: '';
  height: 3px;
  width: 50%;
  background: #E63347;
  top: calc(50% + 2px);
  -webkit-transition: -webkit-transform .3s cubic-bezier(.5,.5,0,1);
  transition: -webkit-transform .3s cubic-bezier(.5,.5,0,1);
  transition: transform .3s cubic-bezier(.5,.5,0,1);
  transition: transform .3s cubic-bezier(.5,.5,0,1), -webkit-transform .3s cubic-bezier(.5,.5,0,1);
}

.nav__link:before {
  left: 0;
  -webkit-transform: translateX(calc(-100% - 10px)) scaleX(0);
  transform: translateX(calc(-100% - 10px)) scaleX(0);
  -webkit-transform-origin: left;
  transform-origin: left;
}

.nav__link:after {
  right: 0;
  -webkit-transform: translateX(calc(100% + 10px)) scaleX(0);
  transform: translateX(calc(100% + 10px)) scaleX(0);
  -webkit-transform-origin: right;
  transform-origin: right;
}

.nav__link:hover:before {
  -webkit-transform: translateX(calc(-100% - 10px)) scaleX(1);
  transform: translateX(calc(-100% - 10px)) scaleX(1);
  -webkit-transform-origin: right;
  transform-origin: right;
}

.nav__link:hover:after {
  -webkit-transform: translateX(calc(100% + 10px)) scaleX(1);
  transform: translateX(calc(100% + 10px)) scaleX(1);
  -webkit-transform-origin: left;
  transform-origin: left;
}




/* INTRO */

#intro {
    color:#ccc;
    overflow:hidden;
}

#intro::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url("../images/main.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-filter: blur(1px) brightness(0.8) grayscale(40%);
    filter: blur(1px) brightness(0.8) grayscale(40%);
}


.logocont {
	height: 66%;
    width: 100%;
	/* -webkit-animation: 2.5s linear;
	animation: 2.5s linear;
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
	-webkit-animation-name: cycle5;
	animation-name: cycle5;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards; */
    position: relative;
    z-index: 99;
}


#klogo .layer {
	fill: none;
	stroke: #fff;
	stroke-width: 1;
}

#klogo .layer1 {
	fill: transparent;
	stroke-dasharray: 600px;
	stroke-dashoffset: 600px;
	-webkit-animation: 3s linear;
	animation: 3s linear;
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
	-webkit-animation-name: cycle1;
	animation-name: cycle1;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

#klogo .layer2 {
	fill: transparent;
	stroke-dasharray: 400px;
	stroke-dashoffset: 400px;
	-webkit-animation: 3s linear;
	animation: 3s linear;
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
	-webkit-animation-name: cycle2;
	animation-name: cycle2;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

#klogo .layer3 {
	fill: transparent;
	stroke-dasharray: 1400px;
	stroke-dashoffset: 1400px;
	-webkit-animation: 3s linear;
	animation: 3s linear;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-name: cycle3;
	animation-name: cycle3;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

#klogo .layer4 {
	fill: transparent;
	stroke-dasharray: 1340px;
	stroke-dashoffset: 1340px;
	-webkit-animation: 2s linear;
	animation: 2s linear;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-name: cycle4;
	animation-name: cycle4;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}



@-webkit-keyframes cycle1 {
	0% {
		stroke-dashoffset: 600px;
	}
	60%,
	66% {
		stroke-dashoffset: 0;
		fill: transparent;
	}
	68%,
	94% {
		stroke-dashoffset: 0;
		stroke: #fff;
	}
	96%,
	98% {
		fill: #efefef;
	}
	100% {
		stroke-dashoffset: 0;
		stroke: transparent;
		fill: #efefef;
	}
}



@keyframes cycle1 {
	0% {
		stroke-dashoffset: 600px;
	}
	60%,
	66% {
		stroke-dashoffset: 0;
		fill: transparent;
	}
	68%,
	94% {
		stroke-dashoffset: 0;
		stroke: #fff;
	}
	96%,
	98% {
		fill: #efefef;
	}
	100% {
		stroke-dashoffset: 0;
		stroke: transparent;
		fill: #efefef;
	}
}



@-webkit-keyframes cycle2 {
	0% {
		stroke-dashoffset: 400px;
	}
	60%,
	66% {
		stroke-dashoffset: 0;
		fill: transparent;
	}
	68%,
	94% {
		stroke-dashoffset: 0;
		stroke: #fff;
	}
	96%,
	98% {
		fill: #efefef;
	}
	100% {
		stroke-dashoffset: 0;
		stroke: transparent;
		fill: #efefef;
	}
}



@keyframes cycle2 {
	0% {
		stroke-dashoffset: 400px;
	}
	60%,
	66% {
		stroke-dashoffset: 0;
		fill: transparent;
	}
	68%,
	94% {
		stroke-dashoffset: 0;
		stroke: #fff;
	}
	96%,
	98% {
		fill: #efefef;
	}
	100% {
		stroke-dashoffset: 0;
		stroke: transparent;
		fill: #efefef;
	}
}



@-webkit-keyframes cycle3 {
	0% {
		stroke-dashoffset: 1400px;
	}
	60%,
	66% {
		stroke-dashoffset: 0;
		fill: transparent;
	}
	68%,
	94% {
		stroke-dashoffset: 0;
		stroke: #fff;
	}
	96%,
	98% {
		fill: #efefef;
	}
	100% {
		stroke-dashoffset: 0;
		stroke: transparent;
		fill: #efefef;
	}
}



@keyframes cycle3 {
	0% {
		stroke-dashoffset: 1400px;
	}
	60%,
	66% {
		stroke-dashoffset: 0;
		fill: transparent;
	}
	68%,
	94% {
		stroke-dashoffset: 0;
		stroke: #fff;
	}
	96%,
	98% {
		fill: #efefef;
	}
	100% {
		stroke-dashoffset: 0;
		stroke: transparent;
		fill: #efefef;
	}
}



@-webkit-keyframes cycle4 {
	0% {
		stroke-dashoffset: 1340px;
	}
	60%,
	66% {
		stroke-dashoffset: 0;
		fill: transparent;
	}
	68%,
	94% {
		stroke-dashoffset: 0;
		stroke: #fff;
	}
	96%,
	98% {
		fill: #efefef;
	}
	100% {
		stroke-dashoffset: 0;
		stroke: transparent;
		fill: #efefef;
	}
}



@keyframes cycle4 {
	0% {
		stroke-dashoffset: 1340px;
	}
	60%,
	66% {
		stroke-dashoffset: 0;
		fill: transparent;
	}
	68%,
	94% {
		stroke-dashoffset: 0;
		stroke: #fff;
	}
	96%,
	98% {
		fill: #efefef;
	}
	100% {
		stroke-dashoffset: 0;
		stroke: transparent;
		fill: #efefef;
	}
}



@-webkit-keyframes cycle5 {
    100% {
        -webkit-filter: drop-shadow( 0px 0px 4px #bbb);
        filter: drop-shadow( 0px 0px 20px #bbb);
	}
}



@keyframes cycle5 {
    100% {
        -webkit-filter: drop-shadow( 0px 0px 4px #bbb);
        filter: drop-shadow( 0px 0px 20px #bbb);
	}
}


.kname {
	position: fixed;
    top: 0;
    left: 0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
    font-size: 1.6em;
    margin-left: 16px;
	color: #444;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    -webkit-animation: 0.75s linear;
	animation: 0.75s linear;
	-webkit-animation-delay: 8s;
	animation-delay: 8s;
	-webkit-animation-name: knan;
	animation-name: knan;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
    opacity:0;
    z-index: 1;
}


@-webkit-keyframes knan {
	100% {
		opacity:1;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
	}
}


@keyframes knan {
	100% {
		opacity:1;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
	}
}

@media (max-width:999px) {
    .kname {display: none;}
}



.love-design {
    opacity: 0;
    -webkit-animation: ld 0.5s linear forwards 8s;
    animation: ld 0.5s linear forwards 8s;
}

@-webkit-keyframes ld {
	100% {
		opacity:1;
	}
}

@keyframes ld {
	100% {
		opacity:1;
	}
}

.design-x {
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
    font-weight: 100;   
}


@media (min-width:321px) and (max-width:640px) {
    .love-design {
    left: 25px;
}
    
    .design-x {
    font-size: 1.8em;  
}

}

@media (max-width:320px) {
    .love-design {
    left: 25px;
}
    
    .design-x {
    font-size: 1.4em;  
}

}



/* PROGRAMS */

.programs {
    background-color: #fafafa;
}


.program-desc {
    padding: 0 10vw;
}

.program-image {
    padding: 0 40px;
}

.program-image img {
    width: 100%;
    max-width: 800px;
    height: auto;
}


@media (max-width:1000px) {
    .program-desc {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

    .program-image {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

}


@media (min-width:1000px) {
    .program-desc {
    width: 50%;
    width: 50vw;
    padding: 0 10vw;

}

    .program-image {
    width: 50%;
    width: 50vw;
    padding: 0 40px;
}

    .program-image img{
    max-width: 40%;
    max-width: 40vw;
}
}

.spacer {
    margin: 60px 0px;
}




/* ABOUT */

.about__text-block {
        padding: 0 40px;
    }

@media (min-width:900px) {
    .about__text-block {
        width: 800px;
    }
}

/* CONTACT */

.social-media {
}

.social-media__icons {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    fill: #444;
}

.social-media__icons:hover {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.e-mail {
    margin: 0px 0px 80px 0px;
}

.e-mail__icon {
    fill: #7B9BD1;
}