body {
	margin: 0;
	padding: 0;
}

a img, :link img, :visited img {
	border: none;
}

*:focus {
	outline: none;
}

@font-face {
	font-family: 'Gotham Medium';
	src: url('gotham-medium.eot');
	src: url('gotham-medium.eot?#iefix') format('embedded-opentype'),
		url('gotham-medium.woff') format('woff'),
		url('gotham-medium.ttf') format('truetype'),
		url('gotham-medium.svg#Gotham-Medium') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham Light';
	src: url('gotham-light.eot');
	src: url('gotham-light.eot?#iefix') format('embedded-opentype'),
		url('gotham-light.woff') format('woff'),
		url('gotham-light.ttf') format('truetype'),
		url('gotham-light.svg#Gotham-Light') format('svg');
	font-weight: normal;
	font-style: normal;
}

#container {
	font-family: 'Gotham Medium';
	height: 600px;
	width: 900px;
	position: relative;
	overflow: hidden;
}

#slides {
	height: 600px;
	position: absolute;
	right: 0;
	top: 0;
	overflow: hidden;
	background: #05c3de;
	-moz-transition: all 0.6s linear;
	-webkit-transition: all 0.6s linear;
	-o-transition: all 0.6s linear;
	transition: all 0.6s linear;
}

#slide1 {
	width: 300px;
	height: 600px;
}

#slide2 {
	width: 900px;
	height: 600px;
	cursor: pointer;
}

.collapsed {
	width: 300px;
}

.expanded {
	width: 900px;
}

.logo {
	position: absolute;
	left: 25px;
	top: 25px;
}

h2 {
	color: #fff;
	position: absolute;
	left: 25px;
	top: 120px;
	width: 250px;
	font-size: 42px;
	font-weight: bold;
}

 #dot6-title {
	 width: 290px;
 }

#dot2-title, #dot3-title, #dot6-title {
	display: none;
}

#notice {
	position: absolute;
	bottom: 74px;
	right: 25px;
	font-size: 14px;
	color: #00325f;
	opacity: 0;
}

#globe .outline {
	-moz-transform: scale(0.5);
 	-webkit-transform: scale(0.5);
 	-o-transform: scale(0.5);
 	transform: scale(0.5);
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	opacity: 1;
	position: absolute;
	bottom: -105px;
	right: -130px;
	border: 3px solid #fff;
	width: 410px;
	height: 410px;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	overflow: hidden;
}

#globe .outline .globe_map {
	position: absolute;
	left: -3102px;
	top: 0;
	width: 4138px;
	height: 671px;
	background: #05c3de url("full_globe.png") repeat-x -350px -180px;
}

.expanded #globe .outline {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	bottom: 120px;
	right: 62px;
}

.transition #globe .outline .globe_map {
	-moz-animation: globe-rotation 2s ease-in-out 1 0s forwards;
	-webkit-animation: globe-rotation 2s ease-in-out 1 0s forwards;
	-o-animation: globe-rotation 2s ease-in-out 0s forwards;
	animation: globe-rotation 2s ease-in-out 1 0s forwards;
}

@-moz-keyframes globe-rotation {
	0%   {-moz-transform: translateX(0px);}
	100% {-moz-transform: translateX(3102px);}
}

@-webkit-keyframes globe-rotation {
	0%   {-webkit-transform: translateX(0px);}
	100% {-webkit-transform: translateX(3102px);}
}

@-o-keyframes globe-rotation {
	0%   {-o-transform: translateX(0px);}
	100% {-o-transform: translateX(3102px);}
}

@keyframes globe-rotation {
	0%   {transform: translateX(0px);}
	100% {transform: translateX(3102px);}
}

.line {
	position: absolute;
	bottom: -130px;
	right: -10px;
	display: none;
}

#line2 {
	bottom: -30px;
	right: -40px;
}

#line3 {
	bottom: 66px;
	right: -85px;
}

#line4 {
	bottom: 77px;
	right: -5px;
}

#line5 {
	bottom: 68px;
	right: 70px;
}

#line6 {
	bottom: -80px;
	right: 130px;
}

.expanded #line3 .path, .expanded #line4 .path {
	-moz-animation-name: reversedash;
	-webkit-animation-name: reversedash;
	-o-animation-name: reversedash;
  animation-name: reversedash;
}

.expanded .line {
	display: block;
}

.expanded .line .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1500;
	-moz-animation: dash 3s linear 1 1.7s forwards;
	-webkit-animation: dash 3s linear 1 1.7s forwards;
	-o-animation: dash 3s linear 1 1.7s forwards;
  animation: dash 3s linear 1 1.7s forwards;
}

@-moz-keyframes dash {
	from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 2500;
  }
}

@-webkit-keyframes dash {
	from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 2500;
  }
}

@-o-keyframes dash {
	from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 2500;
  }
}

@keyframes dash {
  from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 2500;
  }
}

@-moz-keyframes reversedash {
	from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes reversedash {
	from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-o-keyframes reversedash {
	from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes reversedash {
  from {
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.dot-container {
	position: absolute;
	width: 50px;
	height: 50px;
	opacity: 0;
	display: none;
}

.dot {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #fff;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
}

.expanded .active .dot {
	background: #c10043;
	-moz-animation: active-animation 0.4s ease-in-out 1 0s forwards;
	-webkit-animation: active-animation 0.4s ease-in-out 1 0s forwards;
	-o-animation: active-animation 0.4s ease-in-out 1 0s forwards;
	animation: active-animation 0.4s ease-in-out 1 0s forwards;
}

@-moz-keyframes active-animation {
	0%   {background: #ffffff;}
	100% {background: #c10043;}
}

@-webkit-keyframes active-animation {
	0%   {background: #ffffff;}
	100% {background: #c10043;}
}

@-o-keyframes active-animation {
	0%   {background: #ffffff;}
	100% {background: #c10043;}
}

@keyframes active-animation {
	0%   {background: #ffffff;}
	100% {background: #c10043;}
}

#dot1 {
	opacity: 0;
	right: 315;
	bottom: 395px;
}

#dot1.fadein {
}

#dot2 {
	right: 240px;
	bottom: 145px;
}

#dot2.fadein {
	-moz-animation-delay: 1.1s;
	-webkit-animation-delay: 1.1s;
	-o-animation-delay: 1.1s;
	animation-delay: 1.1s;
}

#dot3 {
	right: 85px;
	bottom: 360px;
}

#dot3.fadein {
	-moz-animation-delay: 1.1s;
	-webkit-animation-delay: 1.1s;
	-o-animation-delay: 1.1s;
	animation-delay: 1.1s;
}

#dot4 {
	right: 232px;
	bottom: 498px;
}

#dot4.fadein {
	-moz-animation-delay: 0.4s;
	-webkit-animation-delay: 0.4s;
	-o-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

#dot5 {
	right: 370px;
	bottom: 465px;
}

#dot5.fadein {
	-moz-animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
	-o-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

#dot6 {
	right: 430px;
	bottom: 220px;
}

#dot6.fadein {
	-moz-animation-delay: 0.9s;
	-webkit-animation-delay: 0.9s;
	-o-animation-delay: 0.9s;
	animation-delay: 0.9s;
}

#dot4 .dot, #dot5 .dot, #dot6 .dot {
	-moz-animation: dot-positoning 1s ease 1 3s forwards;
	-webkit-animation: dot-positoning 1s ease 1 3s forwards;
	-o-animation: dot-positoning 1s ease 1 3s forwards;
	animation: dot-positoning 1s ease 1 3s forwards;
	-moz-transform: translate(0px, -20px);
	-webkit-transform: translate(0px, -20px);
	-o-transform: translate(0px, -20px);
	transform: translate(0px, -20px);
}

#dot2 .dot{
	-moz-animation: dot-positoning 1s ease 1 2.7s forwards;
	-webkit-animation: dot-positoning 1s ease 1 2.7s forwards;
	-o-animation: dot-positoning 1s ease 1 2.7s forwards;
	animation: dot-positoning 1s ease 1 2.7s forwards;
	-moz-transform: translate(0px, -20px);
	-webkit-transform: translate(0px, -20px);
	-o-transform: translate(0px, -20px);
	transform: translate(0px, -20px);
}

#dot3 .dot, #dot6 .dot  {
	-moz-animation: dot-positoning 1s ease 1 2.5s forwards;
	-webkit-animation: dot-positoning 1s ease 1 2.5s forwards;
	-o-animation: dot-positoning 1s ease 1 2.5s forwards;
	animation: dot-positoning 1s ease 1 2.5s forwards;
	-moz-transform: translate(0px, -20px);
	-webkit-transform: translate(0px, -20px);
	-o-transform: translate(0px, -20px);
	transform: translate(0px, -20px);
}

@-moz-keyframes dot-positoning {
	0%   {-moz-transform: translate(0px, -20px);}
	100% {-moz-transform: translate(0px, 0px);}
}

@-webkit-keyframes dot-positoning {
	0%   {-webkit-transform: translate(0px, -20px);}
	100% {-webkit-transform: translate(0px, 0px);}
}

@-o-keyframes dot-positoning{
	0%   {-o-transform: translate(0px, -20px);}
	100% {-o-transform: translate(0px, 0px);}
}

@keyframes dot-positoning {
	0%   {transform: translate(0px, -20px);}
	100% {transform: translate(0px, 0px);}
}

.expanded #dot1, .expanded #dot2, .expanded #dot3, .expanded #dot4, .expanded #dot5, .expanded #dot6 {
	display: block;
}

.concentric .circle1 {
	position: absolute;
	width: 50px;
	height: 50px;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid #fff;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	left: 0px;
	top: 0px;
	opacity: 0.8;
	display: none;
}

.concentric .circle2 {
	position: absolute;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid #fff;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	left: 5px;
	top: 5px;
	opacity: 0.8;
	display: none;
}

.concentric .circle1, .concentric .circle2 {
	-moz-animation: circle-animation 1s ease-in-out infinite forwards;
	-webkit-animation: circle-animation 1s ease-in-out infinite forwards;
	-o-animation: circle-animation 1s ease-in-out infinite forwards;
	animation: circle-animation 1s ease-in-out infinite forwards;
	display: block;
}

@-moz-keyframes circle-animation {
	0%   {-moz-transform: scale(1); opacity: 0.8;}
	100% {-moz-transform: scale(2); opacity: 0;}
}

@-webkit-keyframes circle-animation {
	0%   {-webkit-transform: scale(1); opacity: 0.8;}
	100% {-webkit-transform: scale(2); opacity: 0;}
}

@-o-keyframes circle-animation {
	0%   {-o-transform: scale(1); opacity: 0.8;}
	100% {-o-transform: scale(2); opacity: 0;}
}

@keyframes circle-animation {
	0%   {transform: scale(1); opacity: 0.8;}
	100% {transform: scale(2); opacity: 0;}
}

.box {
	display: none;
	color: #fff;
	font-size: 13px;
	width: 300px;
	position: absolute;
	top: -90px;
	left: -110px;
	padding: 10px;
	box-sizing: border-box;
	background: url("box_bg.png") repeat 0 0;
	font-family: Gotham Light;
}

#dot1 .box {
	top: 75px;
	left: -90px;
	opacity: 0;
}

.initial #dot1 .box {
	-moz-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
	-o-animation-delay: 2.5s;
	animation-delay: 2.5s;
}

#dot3 .box {
	top: 75px;
	left: -200px;
}

#dot6 .box {
	top: 75px;
	left: -130px;
}

.box span {
	position: absolute;
	bottom: -20px;
	right: 130px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 35px 0 35px;
	opacity: 0.4;
	border-color: #000000 transparent transparent transparent;
}

#dot1 .box span {
	top: -20px;
	right: 155px;
	border-width: 0 30px 20px 30px;
	border-color: transparent transparent #000000 transparent;
}

#dot3 .box span {
	top: -20px;
	right: 42px;
	border-width: 0 30px 20px 30px;
	border-color: transparent transparent #000000 transparent;
}

#dot6 .box span {
	top: -20px;
	right: 112px;
	border-width: 0 30px 20px 30px;
	border-color: transparent transparent #000000 transparent;
}

.active .box {
	display: block;
}

#slide2 {
	opacity: 0;
	display: none;
}

.fadeout {
	-moz-animation: fadeout 0.4s linear 1 forwards;
	-webkit-animation: fadeout 0.4s linear 1 forwards;
	-o-animation: fadeout 0.4s linear 1 forwards;
	animation: fadeout 0.4s linear 1 forwards;
}

.fadein {
	-moz-animation: fadein 0.4s linear 1 forwards;
	-webkit-animation: fadein 0.4s linear 1 forwards;
	-o-animation: fadein 0.4s linear 1 forwards;
	animation: fadein 0.4s linear 1 forwards;
}

.title {
	position: absolute;
	top: 415px;
	left: 25px;
	background: url("arrows.png") no-repeat right center;
	padding-right: 26px;
	color: #fff;
	font-size: 20px;
}

.social {
	position: absolute;
	bottom: 85px;
	left: 25px;
	margin: 0;
	padding: 0;
}

.social li {
	display: block;
	margin-right: 14px;
	float: left;
}

.social div {
	display: block;
	width: 34px;
	height: 34px;
}

#facebook {
	background: url("facebook.png") no-repeat 0 0;
}

#twitter {
	background: url("twitter.png") no-repeat 0 0;
}

#linkedin {
	background: url("linkedin.png") no-repeat 0 0;
}

#youtube {
	background: url("youtube.png") no-repeat 0 0;
}

#close {
	position: absolute;
	top: 15px;
	right: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #fff;
	cursor: pointer;
	display: block;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 100%;
	opacity: 0;
}

#expand-button {
	background: #00325f;
	position:absolute;
	width: 900px;
	height: 60px;
	bottom: 0px;
	left: 0px;
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0;
	display: none;
}

#find-out-more {
	display: block;
	margin-left: 25px;
	line-height: 60px;
	color: #fff;
	font-size: 20px;
}

#find-out-more .arrows {
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
	box-sizing: border-box;
	display: block;
	background: url("arrows.png") no-repeat 0 center;
	height: 60px;
	width: 18px;
	margin: 0 10px 0 0;
	float: left;
}

#click-through {
	display: block;
	margin-left: 25px;
	line-height: 60px;
}

#click-through .mba {
	color: #fff;
	font-size: 17px;
	font-family: Gotham Light;
}

#click-through .register {
	color: #fff;
	font-size: 21px;
	font-family: Gotham medium;
	position: absolute;
	right: 25px;
	background: url("arrows.png") no-repeat right center;
	padding-right: 27px;
}

@-moz-keyframes fadein {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}

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

@-o-keyframes fadein {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadein {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}

@-moz-keyframes fadeout {
	0%   {opacity: 1;}
	100% {opacity: 0;}
}

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

@-o-keyframes fadeout {
	0%   {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes fadeout {
	0%   {opacity: 1;}
	100% {opacity: 0;}
}
