/*
 * #FONTS
 */
@font-face {
  font-family: 'proxima-nova';
  src: url('../fonts/ProximaNovaT-Thin.eot');
  src: url('../fonts/ProximaNovaT-Thin.woff2') format('woff2'),
       url('../fonts/ProximaNovaT-Thin.woff') format('woff'),
       url('../fonts/ProximaNovaT-Thin.ttf') format('truetype'),
       url('../fonts/ProximaNovaT-Thin.svg#ProximaNovaT-Thin') format('svg'),
       url('../fonts/ProximaNovaT-Thin.eot?#iefix') format('embedded-opentype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'proxima-nova';
  src: url('../fonts/ProximaNova-Light.eot');
  src: url('../fonts/ProximaNova-Light.woff2') format('woff2'),
       url('../fonts/ProximaNova-Light.woff') format('woff'),
       url('../fonts/ProximaNova-Light.ttf') format('truetype'),
       url('../fonts/ProximaNova-Light.svg#ProximaNova-Light') format('svg'),
       url('../fonts/ProximaNova-Light.eot?#iefix') format('embedded-opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'proxima-nova';
  src: url('../fonts/ProximaNova-Regular.eot');
  src: url('../fonts/ProximaNova-Regular.woff2') format('woff2'),
       url('../fonts/ProximaNova-Regular.woff') format('woff'),
       url('../fonts/ProximaNova-Regular.ttf') format('truetype'),
       url('../fonts/ProximaNova-Regular.svg#ProximaNova-Regular') format('svg'),
       url('../fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'proxima-nova';
  src: url('../fonts/ProximaNova-Semibold.eot');
  src: url('../fonts/ProximaNova-Semibold.woff2') format('woff2'),
       url('../fonts/ProximaNova-Semibold.woff') format('woff'),
       url('../fonts/ProximaNova-Semibold.ttf') format('truetype'),
       url('../fonts/ProximaNova-Semibold.svg#ProximaNova-Semibold') format('svg'),
       url('../fonts/ProximaNova-Semibold.eot?#iefix') format('embedded-opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'proxima-nova';
  src: url('../fonts/ProximaNova-Bold.eot');
  src: url('../fonts/ProximaNova-Bold.woff2') format('woff2'),
       url('../fonts/ProximaNova-Bold.woff') format('woff'),
       url('../fonts/ProximaNova-Bold.ttf') format('truetype'),
       url('../fonts/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg'),
       url('../fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'proxima-nova';
  src: url('../fonts/ProximaNova-Extrabld.eot');
  src: url('../fonts/ProximaNova-Extrabld.woff2') format('woff2'),
       url('../fonts/ProximaNova-Extrabld.woff') format('woff'),
       url('../fonts/ProximaNova-Extrabld.ttf') format('truetype'),
       url('../fonts/ProximaNova-Extrabld.svg#ProximaNova-Extrabld') format('svg'),
       url('../fonts/ProximaNova-Extrabld.eot?#iefix') format('embedded-opentype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'proxima-nova';
  src: url('../fonts/ProximaNova-Black.eot');
  src: url('../fonts/ProximaNova-Black.woff2') format('woff2'),
       url('../fonts/ProximaNova-Black.woff') format('woff'),
       url('../fonts/ProximaNova-Black.ttf') format('truetype'),
       url('../fonts/ProximaNova-Black.svg#ProximaNova-Black') format('svg'),
       url('../fonts/ProximaNova-Black.eot?#iefix') format('embedded-opentype');
  font-weight: 900;
  font-style: normal;
}

/*
 * #ELEMENTS
 */
html,
body {
	height: 100%;
	padding: 0;
	margin: 0;

	font-family: "proxima-nova", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #fff;
	font-size: 18px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
	margin: 0;
}
h1 {
	display: none;
	font-weight: 900;
	font-size: 36px;
	line-height: 1.2;
}
h2 {
	font-weight: 700;
	font-size: 36px;
	line-height: 1.2;
}
	h2:after {
		display: block;
		content: '';
		position: relative;
		background: #FFB817;
		height: 4px;
		width: 100px;
		margin-top: 10px;
		margin-bottom: 14px;
	}
	.bg-yellow h2:after {
		background: #000;
	}
	div.center h2:after {
		margin-left: auto;
		margin-right: auto;
	}
h3 {
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
}
	h3:after {
		display: block;
		content: '';
		position: relative;
		background: #FFB817;
		height: 2px;
		width: 100px;
		margin-top: 10px;
		margin-bottom: 18px;
	}
	.bg-yellow h3:after {
		background: #000;
	}
	div.center h3:after {
		margin-left: auto;
		margin-right: auto;
	}
h4 {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	margin-bottom: 6px;
}
p + p,
p + ul,
p + ol,
p + button,
ul + p,
ul + ul,
ul + ol,
ul + button,
ol + p,
ol + ul,
ol + ol,
ol + button {
	margin-top: 18px;
}
@media (min-width: 700px) {
	h2 {
		font-size: 48px;
	}
	h3 {
		font-size: 24px;
	}
	h4 {
		font-size: 20px;
	}
}
@media (min-width: 1000px) {
	h2 {
		font-size: 60px;
	}
	h3 {
		font-size: 36px;
	}
	h4 {
		font-size: 24px;
	}
}

a {
	color: #FFB817;
	text-decoration: none;
	position: relative;
}
	a:not(.button):not(.header-logo):not(.footer-logo):not(.header-menu-btn).not(.header-menu a):after {
		display: block;
		position: absolute;
		bottom: 2px;
		left: 0;
		right: 0;
		border-bottom: 1px solid #FFB817;
		content: '';
	}

button {
	cursor: pointer;

	height: 50px;
	padding: 0 20px;
	font-size: 14px;
	font-weight: 400;
	color: #FFB817;
	line-height: 1;
	border: 2px solid #FFB817;
	border-radius: 25px;
	background: transparent;
}


/* important-message-box
*/

#important-message{
	background-color: rgba(0,0,0,0.3);
	padding: 20px;
	width:auto;
	border-radius: 4px;
	font-size: 24px;
	line-height: 50px;
	margin-bottom: 40px;
	animation-name:movebar_top;
	animation-duration:4s;
	left:0px;
	overflow:hidden;
}
/*
 * #header
 */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000000;
	height: 35px;
	padding: 16px 20px;

	/*transition: background .3s ease-in;*/
}
body.scroll-1 .header { background: rgba(0, 0, 0, .05); }
body.scroll-2 .header { background: rgba(0, 0, 0, .1); }
body.scroll-3 .header { background: rgba(0, 0, 0, .15); }
body.scroll-4 .header { background: rgba(0, 0, 0, .2); }
body.scroll-5 .header { background: rgba(0, 0, 0, .25); }
body.scroll-6 .header { background: rgba(0, 0, 0, .3); }
body.scroll-7 .header { background: rgba(0, 0, 0, .35); }
body.scroll-8 .header { background: rgba(0, 0, 0, .4); }
body.scroll-9 .header { background: rgba(0, 0, 0, .45); }
body.scroll-10 .header { background: rgba(0, 0, 0, .5); }
body.scroll-11 .header { background: rgba(0, 0, 0, .55); }
body.scroll .header { background: rgba(0, 0, 0, .6); }
body.menu-open .header { background: rgba(0, 0, 0, .6); }
	.header-logo {
		fill: #fff;
		display: inline-block;
		height: 35px;
	}
		.header-logo svg {
			height: 35px;
		}
	.header-menu {
		display: none;

		position: fixed;
		top: 67px;
		left: 0;
		right: 0;
		padding: 20px 12px 4px;

		background: rgba(0, 0, 0, .6);
	}
	body.menu-open .header-menu {
		display: block;
		height: auto;
		bottom: auto;
	}
		.header-menu a {
			display: block;
			margin: 0 8px 16px;
			width: calc(100% / 2 - 16px);
			height: 34px;
			padding-top: 16px;
			line-height: 1;
			font-size: 18px;
			float: left;
			text-align: center;
			color: #fff;
			text-decoration: none;
		}


    .header-menu a:hover a:active{
      color: rgba(255, 255, 255 ,0.5);
    }

	.header-menu-btn {
		display: block;
		/*background: rgba(0, 0, 0, .1);*/
		position: absolute;
		width: 45px;
		height: 45px;
		top: 11px;
		right: 15px;
	}
		.header-menu-btn:before,
		.header-menu-btn:after,
		.header-menu-btn span {
			display: block;
			position: absolute;
			top: 21px;
			left: 7px;
			right: 7px;
			height: 3px;
			background: #fff;
			border-radius: 2px;
			content: '';
		}
		.header-menu-btn:before {
			top: 11px;
		}
		.header-menu-btn:after {
			top: auto;
			bottom: 11px;
		}
@media (min-width: 1000px) {
	.header {
		padding: 16px 40px;
	}
		.header-logo,
		.header-logo svg {
			height: 40px;
		}
		body.scroll-1 .header-logo, body.scroll-1 .header-logo svg { height: 40px; }
		body.scroll-2 .header-logo, body.scroll-2 .header-logo svg { height: 40px; }
		body.scroll-3 .header-logo, body.scroll-3 .header-logo svg { height: 39px; }
		body.scroll-4 .header-logo, body.scroll-4 .header-logo svg { height: 39px; }
		body.scroll-5 .header-logo, body.scroll-5 .header-logo svg { height: 38px; }
		body.scroll-6 .header-logo, body.scroll-6 .header-logo svg { height: 38px; }
		body.scroll-7 .header-logo, body.scroll-7 .header-logo svg { height: 37px; }
		body.scroll-8 .header-logo, body.scroll-8 .header-logo svg { height: 37px; }
		body.scroll-9 .header-logo, body.scroll-9 .header-logo svg { height: 36px; }
		body.scroll-10 .header-logo, body.scroll-10 .header-logo svg { height: 36px; }
		body.scroll-11 .header-logo, body.scroll-11 .header-logo svg { height: 35px; }
		body.scroll .header-logo, body.scroll .header-logo svg { height: 35px; }
		.header-menu {
			display: inline-block;
			float: right;
			background: none;
			position: relative;
			top: auto;
			left: auto;
			right: auto;
			padding: 4px 0 0;
		}
			.header-menu a {
				margin-left: 18px;
				display: inline;
				width: auto;
				float: none;
			}
		.header-menu-btn {
			display: none;
		}
}

body > div:not(.header) {
	padding: 40px 20px;
}
@media (min-width: 1000px) {
	body > div:not(.header) {
		padding: 64px 40px;
	}
}
@media (min-width: 1680px) {
	body > div:not(.header) {
		padding: 64px calc(50% - 800px);
	}
	body > div.header {
		padding: 16px calc(50% - 800px);
	}
}

/*
 * #CLASSES
 */
div.center {
	text-align: center;
}
.spacer-1 {
	height: 24px;
	clear: both;
}
.spacer-2 {
	height: 36px;
	clear: both;
}
.spacer-3 {
	height: 48px;
	clear: both;
}
.spacer-4 {
	height: 60px;
	clear: both;
}
img.img-responsive {
	width: 100%;
	height: auto;
}

a.button {
	cursor: pointer;

	display: inline-block;
	/* height: 30px; */
	padding: 12px 18px;
	font-size: 18px;
	font-weight: 400;
	color: #fff;
	line-height: 1;
	border: 2px solid #fff;
	border-radius: 25px;
	background: transparent;
	text-decoration: none;
	white-space: nowrap;
}

a.button:hover{
  background: rgba(255,255,255, 0.2);
}

a.button.yellow {
	color: #FFB817;
	border-color: #FFB817;
}

a.button.yellow:hover {
	background-color: rgba(255,184,23, 0.2);
}


/* 
* #ANIMATIONS 
*/

* {
  box-sizing: border-box;
}

.item {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  padding-top: 75px;
  background: #ccc;
  text-align: center;
  color: #FFF;
  font-size: 3em;
}
.col-xxs-12 h2{
	animation-name:let-text-pop;
	animation-duration:4s;
}
.col-sm-6 p{
	animation-name:let-text-pop-discription;
	animation-duration:4s;
}
.header-menu{
	animation-name:let_menu_roll_pc;
	animation-duration:4s;
}
	.header-menu a{
		animation-name:let_menu_roll_pc_buttons;
		animation-duration:4s;
	}
@keyframes movebar_top{
	0%{
		opacity:0.1
	}
	30%{}
}
@keyframes let-text-pop{
	0%{
		font-size:0px;
		transform:rotate(5deg);
	}
	30%{}
}
@keyframes let-text-pop-discription{
	0%{
		font-size:0px;
		text-align:left;
		transform:rotate(5deg);
	}
	30%{}
}
@keyframes let_menu_roll_pc{
	0%{
		left:-30%;
	}
	100%{left:0%;}
}
@keyframes let_menu_roll_pc_buttons{
	0%{
		margin:50px;
	}
	100%{left:0%;}
}