.kiTabBtn .dot, #landingKiTab ul li, #landingKiTab ul li span, .infoBtn, #landingKiTab ul li a, .point 
{
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    -moz-transition: all .45s cubic-bezier(.23,1,.32,1);
    -ms-transition: all .45s cubic-bezier(.23,1,.32,1);
    -o-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
}

/*
  {
    -webkit-transition: all 3.45s cubic-bezier(.23,1,.32,1);
    -moz-transition: all 3.45s cubic-bezier(.23,1,.32,1);
    -ms-transition: all 3.45s cubic-bezier(.23,1,.32,1);
    -o-transition: all 3.45s cubic-bezier(.23,1,.32,1);
    transition: all 3.45s cubic-bezier(.23,1,.32,1);
}
*/

/*--------------------------------------------------------*/
/*----- STAGE 1 -> INTERACTIVE HEADPICTURE -----------------------*/
/*--------------------------------------------------------*/
#stage1 {width: 100%;margin: 0;padding: 0;background-color: #f1f1f1;overflow: hidden;position: relative}
canvas{/*background-color: #000;*/}
#stage1 .overlay {position: absolute;left: 0;bottom: -270px;width: 120%;height: 270px;background: #fff;transform-origin: top left;transform: rotate(-8deg);z-index: 1;box-shadow: 0 0 1px 0 #fff inset, 0 0 1px 0 #fff}


#enMapInfo {position: absolute; top: 15%; left: 20%; color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.6)}
#enMapInfo h1, #enMapInfo h2 {color: #fff}
#enMapInfo h1 {font-size: 5em; margin-bottom: 20px}
#enMapInfo h2 {font-size: 3em}
#enMapInfo button {max-width: 400px}
#enMapInfo button a {color: #fff; text-decoration: none}


/*--------------------------------------------------------*/
/*----- STAGE 2 -> TAB PANEL TILES -----------------------*/
/*--------------------------------------------------------*/
.invisi {display: none}
#stage2 {position: relative; min-height: 300px}

#landingKiTab {position: absolute;top: -340px;width: 100%;left: 0;z-index: 2}
#lKTHeadInner {background-color: #ffffffb0;padding: 15px;text-align: center; font-weight: bold}
#lKTHeadInner h1 {font-size: 2.4em; color: #474747;margin-bottom: 5px}
#lKTHeadInner p {max-width: 85%;margin: auto}
#landingKiTab ul {overflow: hidden}
#landingKiTab ul li {width: 25%; float: left; height: 300px;list-style-type: none; text-align: center; padding: 40px; cursor: pointer;position: relative}
#landingKiTab ul li a {text-decoration: none}
#landingKiTab ul li h3 {color: #fff; margin-top: 30px}
#landingKiTab .imgFrame {width: 180px; height: 180px; border-radius: 50%; border: 4px solid #fff; display: block;margin: auto;margin-top: 32px;}
#landingKiTab ul li img {margin: 0 auto; max-width: 90px; padding-top: 42px}
#landingKiTab ul li:hover span, #landingKiTab ul li.active span  {transform: scale(1.2)}
#landingKiTab ul li a {position: absolute; width: 100%; height: 100%; top: 0; right: 0;box-shadow: inset 15px 15px 180px 10px rgba(0,0,0,0.8);}

#landingKiTab ul li.active a {box-shadow: inset 5px 5px 5px rgba(0,0,0,0.1)}
#landingKiTab ul li.active:after {content: "\f078";font-family: "FontAwesome";position: absolute;bottom: 5px;color: #fff;font-size: 20px;width: 100%;left: 0}

.KiTabInner {position: relative}
.KiTabInner .line {position: absolute; background-color: #f00}
.KiTabInner .line.vertical {top: 20%;height: 80%; width: 3px;left: 15px}
.KiTabInner .line.horizontal {bottom: 15px;width: 100%; height: 3px; left: 1px;-webkit-animation-delay: 0.5s; animation-delay: 0.5s;}

#landingKiTab #BT66, #TP66 .kiTabBtn .dot, #TP66 .line, #mH1 .point, 
#landingKiTab #BT175, #TP175 .kiTabBtn .dot, #TP175 .line {background-color: #910f31}
#TP66 .kiTabBtn .dotText, #TP175 .kiTabBtn .dotText {color: #910f31}
#landingKiTab #BT67, #TP67 .kiTabBtn .dot, #TP67 .line, #mH2 .point, 
#landingKiTab #BT176, #TP176 .kiTabBtn .dot, #TP176 .line, #mH2 .point {background-color: #003c68}
#TP67 .kiTabBtn .dotText, #TP176 .kiTabBtn .dotText {color: #003c68}

#landingKiTab #BT68, #TP68 .kiTabBtn .dot, #TP68 .line, #mH3 .point, 
#landingKiTab #BT177, #TP177 .kiTabBtn .dot, #TP177 .line, #mH3 .point {background-color: #51bdcb}
#TP68 .kiTabBtn .dotText, #TP177 .kiTabBtn .dotText {color: #51bdcb}
#landingKiTab #BT69, #TP69 .kiTabBtn .dot, #TP69 .line, #mH4 .point, 
#landingKiTab #BT178, #TP178 .kiTabBtn .dot, #TP178 .line, #mH4 .point, #BT190, #TP190 .kiTabBtn .dot, #TP190 .line  {background-color: #e88800}
#TP69 .kiTabBtn .dotText, #TP178 .kiTabBtn .dotText, #TP190 .kiTabBtn .dotText {color: #e88800}

.KiTabInner {padding: 160px 0 6% 0; width: 99%}
.KiTabInner .row, .KiTabInner h3 {padding-left: 50px}
.kiTabBtn .dot {width: 50px;height: 50px;border-radius: 50%;position: relative;display: inline-block;color: #fff;padding: 0;text-align: center;font-size: 32px;vertical-align: middle;line-height: 47px}
.kiTabBtn .dot:before {content: ""; position: absolute; top: 5px; left: 5px; width: 35px; height: 35px; border-radius: 50%; border: 2px solid #fff; text-align: center} 
.kiTabBtn .dotText {display: inline-block; margin-left: 20px;font-weight: bold}

/*.kiTabBtn a {position: absolute;width: 100%;height: 100%;top: 0;text-align: center;color: #fff;text-decoration: none !important;font-size: 2em;line-height: 49px}*/
.kiTabBtn:hover .dot {transform: scale(1.2)}    
.kiTabBtn:hover a {color: #fff}

.mapHolder {position: relative}
.mapHolder .point {width: 15px; height: 15px;border-radius: 50%; position: absolute; top: 30%; left: 30%; z-index: 2}


.pointLine {position: absolute;
    top: 101px;
    left: 182px;
    transform: rotate(-34deg);
    width: 1px;
    bottom: 268px;
    background: #474747;
-webkit-animation-delay: 1s; animation-delay:1s;    
}

/*--------------------------------------------------------*/
/*----- INFO BUTTON RIGHT -----------------------*/
/*--------------------------------------------------------*/
#infoBtnBack {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); z-index: 99}
#infoBtnBack.zoomIn {display: block} 
/*#infoBtnBack:before {content: "\f057";font-family: "FontAwesome";color: #fff;position: absolute;right: 5%;top: 5%;font-size: 3em; cursor: pointer}*/
#infoBtnCloser:before {content: "\f057";font-family: "FontAwesome";color: #fff;position: absolute;right: 5%;top: 5%;font-size: 3em; cursor: pointer} 

#InfoBox {position: absolute; text-align: center; z-index: 999; background-color: rgba(255,255,255,0.9); padding: 50px;top: 20%; width: 60%; left: 20%;box-shadow: inset 2px 2px 25px rgba(0,0,0,0.5)}
#InfoBox .btn {cursor: pointer;max-width: 400px;padding: 8px 10px;background-color: #940a2e;text-align: center;font-weight: bold;margin: auto; margin-top: 30px}
#InfoBox .btn a {display: block; color: #fff; text-decoration: none}

#awButton {top: 30%;width: 300px;right: -230px;background-color: #910f31;}
#foButton {top: 37%;width: 380px;right: -310px;background-color: #003c68;}

.infoBtn {position: fixed;cursor: pointer;border-top-left-radius: 45px;border-bottom-left-radius: 45px;color: #fff;padding: 10px 12px;z-index: 9}
.infoBtn i {font-size: 3em;vertical-align: middle}
.infoBtn span {display: inline-block;vertical-align: middle;margin-left: 7%;font-size: 1.2em}
.infoBtn:hover, .infoBtn.active {right: 0 !important}

/*--------------------------------------------------------*/
/*----- MEDIABREAK -----------------------*/
/*--------------------------------------------------------*/

@media all and (max-width: 1200px) 
{

	.mapHolder .point {transform: scale(0.8)}
}


@media all and (max-width: 950px) 
{
	#stage1 > div:nth-child(1) {height: 400px !important}
	#lKTHeadInner {font-size: 0.7em !important}
	.KiTabInner {padding-top: 120px}
	#landingKiTab {top: -300px}
	#landingKiTab ul li {height: 180px; font-size: 0.8em}
	#landingKiTab .imgFrame {width: 60px; height: 60px; margin-top: 18px}
	#landingKiTab ul li img {max-width: 70%;padding-top: 6px}
	#landingKiTab ul li:hover span, #landingKiTab ul li.active span {transform: scale(1)}
	.KiTabInner .line.vertical {top: 5%; height: 95%}
	.kiTabBtn {transform: scale(0.7);transform-origin: 0 0}
	.mapHolder {position: relative;transform: scale(0.8);overflow: hidden;transform-origin: 0 0;padding: 20px}
	#InfoBox {width: 90%; top: 25%; left: 5%; padding: 25px}
	.infoBtn {transform: scale(0.8);transform-origin: 24%}
	.infoBtn:hover, .infoBtn.active {right: -230px}
	.KiTabInner .row, .KiTabInner h3 {padding-left: 40px;width: 95%;}
	
}

@media all and (max-width: 768px) 
{
		#landingKiTab ul li {font-size: 0.45em; font-weight: normal}
}