@charset 'utf-8';


/* ====================================================================================================================
	CSS Reset by Eric Meyer - Released under Public Domain
    https://meyerweb.com/eric/tools/css/reset/
 * ====================================================================================================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td 
                  	{margin: 0;padding: 0;border: 0;outline: 0; font-size: 100%;vertical-align: baseline; background: transparent;font-weight: normal;}
body              	{line-height: 1;}
ol, ul            	{list-style: none;}
blockquote, q     	{quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after 	{content: ''; content: none;}
:focus            	{outline: 0;}
ins               	{text-decoration: none;}
del               	{text-decoration: line-through;}
table             	{border-collapse: collapse;border-spacing: 0;}
a 					{text-decoration: none;}


/* ====================================================================================================================
 * FONT-FACE
 * ====================================================================================================================*/
@font-face {
    font-family: 'ibm_plex';
    src: url('../fonts/ibmplexsans-regular.woff2') format('woff2'),
         url('../fonts/ibmplexsans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ibm_plex_sansbold';
    src: url('../fonts/ibmplexsans-bold.woff2') format('woff2'),
         url('../fonts/ibmplexsans-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ====================================================================================================================
 * STYLES
 * ====================================================================================================================*/
html {
	height: 100%;
}

body {
	font-family: ibm_plex, Arial, sans-serif;
	color: #4a4a4a;
	background-color: #ffffff;
	font-size: 16px;
	line-height: 24px;
	height: 100%;
}

h1 {
	font-family: ibm_plex, Arial, sans-serif;
}

h2 {
	font-family: ibm_plex, Arial, sans-serif;
	text-transform: uppercase;
	color: #7500FF;
}

strong {
	font-family: ibm_plex_sansbold, Arial, sans-serif;	
}

.small_block_indent{
	padding-left: 24px;
	border-left: solid;
	border-width: 0.7vw;
	border-color: #4a4a4a;
}

.on_image{
	margin-top: -22vw;
}

.mr_logo_onimage {
	width: 8vw;
	position: relative;
	left:-3vw;
	margin: 0px 0px 24px 0px;
	opacity:0;	
	animation-name: blend_in_logo;
	animation-duration: 0.5s;
	animation-timing-function: ease-out; 
  	animation-delay: 0.5s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

@media (max-width: 479px) {
	h1 {
		font-size: 32px;
		line-height: 32px;
	}
	h2 {
		font-size: 24px;
		line-height: 32px;
	}

	.block_indent{
		padding-top: 24px;
		border-top: solid;
		border-width: 1.3vw;
		border-color: #4a4a4a;
	}

	a.primary {
		display:block;
		width:100%;
		text-align: center;
	}
}

@media (min-width: 480px) and (max-width: 1023px) {
	h1 {
		font-size: 40px;
		line-height: 40px;
	}
	h2 {
		font-size: 28px;
		line-height: 32px;
	}

	.block_indent{
		padding-left: 24px;
		border-left: solid;
		border-width: 1.3vw;
		border-color: #4a4a4a;
	}
}

@media (min-width: 1024px) {
	h1 {
		font-size: 56px;
		line-height: 56px;
	}
	h2 {
		font-size: 32px;
		line-height: 36px;
	}

	.block_indent{
		padding-left: 24px;
		border-left: solid;
		border-width: 1.3vw;
		border-color: #4a4a4a;
	}
}



@media (max-width: 1023px) {
	.content{
		font-size: 18px;
		line-height: 28px;
		margin-right: 12%;
		margin-left: 12%;
		padding: 16px 0px 16px 0px;
		position: relative;
		max-width: 600px;
		z-index: 2;
		display: inline-block;
	}

	.content .small_copy {
		font-size: 16px;
		line-height: 24px;		
	}

	.content p, .content h1, .content h2 {
		margin-bottom: 16px;
	}

	.mr_logo {
		width: 40px;
		position: relative;
		left:-16px;
		margin: 16px 0px 16px 0px ;
	}

	a.primary {
		position: relative;
		display: inline-block;
		box-sizing: border-box;
		border-color: #7500FF;
		border-width: 1.5px;
		border-style: solid;
		background-color: #fff;
		padding: 4px 20px 4px 20px;
		-webkit-transition: color 0.5s ease-out;
	  	-moz-transition: color 0.5s ease-out;
	  	-o-transition: color 0.5s ease-out;
		transition: color 0.5s ease-out;
		color: #7500FF;
		text-decoration: none;
		margin-bottom: 16px;
		margin-right:16px;
	}
	
	a.primary:before {
	  content: "";
	  position: absolute;
	  width: 100%;
	  height: 1.5px;
	  background-color: #7500FF;
	  margin-bottom: -1.5px;
	  bottom: 0;
	  left: 0;
	  visibility: hidden;
	  -webkit-transform: scaleX(1);
	  transform: scaleX(1);
	  -webkit-transition: all 0.3s ease-in-out 0s;
	  transition: all 0.3s ease-in-out 0s;
	}
}

@media (min-width: 1024px) {
	.content {
		font-size: 24px;
		line-height: 40px;
		margin-right: 12%;
		margin-left: 12%;
		padding: 24px 0px 24px 0px;
		position: relative;
		max-width: 800px;
		z-index: 2;
		display: inline-block;

	}

	.content .small_copy {
		font-size: 16px;
		line-height: 24px;		
	}

	.content p, .content h1, .content h2 {
		margin-bottom: 24px;
	}

	.mr_logo {
		width: 56px;
		position: relative;
		left:-22px;
		margin: 24px 0px 24px 0px ;
	}

	a.primary {
		position: relative;
		display: inline-block;
		box-sizing: border-box;
		border-color: #7500FF;
		border-width: 2px;
		border-style: solid;
		background-color: #fff;
		padding: 4px 20px 4px 20px;
		-webkit-transition: color 0.5s ease-out;
	  	-moz-transition: color 0.5s ease-out;
	  	-o-transition: color 0.5s ease-out;
		transition: color 0.5s ease-out;
		color: #7500FF;
		text-decoration: none;
		margin-bottom: 24px;
		margin-right:16px;
	}

	a.primary:before {
	  content: "";
	  position: absolute;
	  width: 100%;
	  height: 2px;
	  background-color: #7500FF;
	  margin-bottom: -2px;
	  bottom: 0;
	  left: 0;
	  visibility: hidden;
	  -webkit-transform: scaleX(1);
	  transform: scaleX(1);
	  -webkit-transition: all 0.3s ease-in-out 0s;
	  transition: all 0.3s ease-in-out 0s;
	
	}	
}

.one{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.5s;
	animation-timing-function: ease-out; 
  	animation-delay: 0.7s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.two{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.5s;
	animation-timing-function: ease-out; 
  	animation-delay: 0.8s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.three{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.5s;
	animation-timing-function: ease-out; 
  	animation-delay: 0.9s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.four{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.5s;
	animation-timing-function: ease-out; 
  	animation-delay: 1s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

.five{
	position:relative;
	opacity:0;
	animation-name: blend_in;
	animation-duration: 0.5s;
	animation-timing-function: ease-out; 
  	animation-delay: 1.1s;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
}

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

@keyframes blend_in {
  0% {
    opacity: 0;
    top: 24px;
    -webkit-transform: scaleX(0.95);
	 transform: scaleX(0.95);
  }
  100% {
    opacity: 1;
	top: 0;
	-webkit-transform: scaleX(1);
	 transform: scaleX(1);
  }
}

@keyframes blend_in_logo {
  0% {
    opacity: 0;
    top: 24px;
    -webkit-transform: scaleX(0.95);
	 transform: scaleX(0.95);
  }
  100% {
    opacity: 1;
	top: 0;
	-webkit-transform: scaleX(1);
	 transform: scaleX(1);
  }
}

@keyframes blend_in_frame {
  0% {
    opacity: 0;
    -webkit-transform: scaleX(0.95);
	 transform: scaleX(0.95);
  }
  100% {
    opacity: 1;
	-webkit-transform: scaleX(1);
	 transform: scaleX(1);
  }
}


a.primary:hover, a.primary:active a.primary:focus {
	-webkit-transition: border-color 0.2s ease-out;
  	-moz-transition: border-color 0.2s ease-out;
  	-o-transition: border-color 0.2s ease-out;
	transition: border-color 0.2s ease-out;
	color: #000;
	text-decoration: none;
	border-color: #fff;
}

a.primary:hover:before, a.primary:active:before, a.primary:focus:before {
  visibility: visible;
  -webkit-transform: scaleX(0.4);
  transform: scaleX(0.4);
  -webkit-animation: random_background 2s infinite;
  animation: random_background 2s infinite;
}

.dot {
     color: #4a4a4a;
     -webkit-animation: random 2s infinite;
     animation: random 2s infinite;
}
@keyframes  random {
    5% { color: #4a4a4a; } 
    10% { color: #7500FF; } 
    15% { color: #4a4a4a; } 
    20% { color: #52E7FF; } 
    25% { color: #7500FF; } 
    30% { color: #F600FF; } 
    35% { color: #003BFF; } 
    40% { color: #7500FF; } 
    45% { color: #4a4a4a; } 
    42% { color: #F600FF; } 
    50% { color: #4a4a4a; } 
    55% { color: #7500FF; } 
    60% { color: #4a4a4a; }
    62% { color: #52E7FF; } 
    65% { color: #4a4a4a; } 
    70% { color: #7500FF; } 
    75% { color: #4a4a4a; }
    80% { color: #4a4a4a; }
    85% { color: #F9FF52; }
    90% { color: #F600FF; }  
}

@keyframes  random_background {
    5% { background-color: #4a4a4a; } 
    10% { background-color: #7500FF; } 
    15% { background-color: #4a4a4a; } 
    20% { background-color: #52E7FF; } 
    25% { background-color: #7500FF; } 
    30% { background-color: #F600FF; } 
    35% { background-color: #003BFF; } 
    40% { background-color: #7500FF; } 
    45% { background-color: #4a4a4a; } 
    42% { background-color: #F600FF; } 
    50% { background-color: #4a4a4a; } 
    55% { background-color: #7500FF; } 
    60% { background-color: #4a4a4a; }
    62% { background-color: #52E7FF; } 
    65% { background-color: #4a4a4a; } 
    70% { background-color: #7500FF; } 
    75% { background-color: #4a4a4a; }
    80% { background-color: #4a4a4a; }
    85% { background-color: #F9FF52; }
    90% { background-color: #F600FF; }  
}


.footer {
	margin-right: 12%;
	margin-left: 12%;
	padding: 24px 0px 24px 0px;
	position: relative;
	max-width: 600px;

}

a.secondary {
	position: relative;
	display: inline-block;
	color: #999;
	text-decoration: none;
}


a.secondary:before {
  	content: "";
  	position: absolute;
  	width: 100%;
  	height: 1.5px;
  	background-color: #7500FF;
  	margin-bottom: -1.5px;
  	bottom: 0;
  	left: 0;
  	visibility: hidden;
  	-webkit-transform: scaleX(0.5);
  	transform: scaleX(0.5);
  	-webkit-transition: all 0.3s ease-in-out 0s;
  	transition: all 0.3s ease-in-out 0s;

}
a.secondary:hover:before, a.secondary:active:before, a.secondary:focus:before {
 	visibility: visible;
  	-webkit-transform: scaleX(1);
  	transform: scaleX(1);
  	-webkit-animation: random_background 2s infinite;
  	animation: random_background 2s infinite;
}


/* ====================================================================================================================
 * SLIDER
 * ====================================================================================================================*/

.slider_container{
	width:100%;
	max-height:96vh;
	overflow: hidden;
	vertical-align: middle;
}

.flex-direction-nav a.flex-next, 
.flex-direction-nav a.flex-prev{
    display:none;
}
.flex-control-nav{
	display:none;
}