*{box-sizing:border-box}*:before,*:after{box-sizing:inherit}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  font-family: @font-family-base;
}

body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    line-height: 1.42857143;
    color: #555;
    background-color: #f7f7f7;
}

a {text-decoration: none}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
      
header,.nav-collapse {        
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: transparent;     
    display: -webkit-flex;     
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;               
    position: fixed;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    top: 0;
    width: calc(100% - 320px);            
}

.site-logo {
    transition: color 200ms cubic-bezier(.55, 0, .1, 1);
    color: #30acff;
    font-size: 3rem;
}

.ok-header__logo:hover {color: #546edb}

main {
    margin-top: 7rem;
    padding: 2%;
    text-align: center;
}

body.okayNav-loaded {
	overflow-x: hidden
}

.okayNav:not(.loaded) {
	visibility: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.okayNav ul {
	float: left
}

.okayNav a {
	color: #2e2e33;      
	font-weight: 700;
	position: relative;
	z-index: 1
}

.okayNav__nav--visible {
	overflow: hidden;
	white-space: nowrap
}

.okayNav__nav--visible li {
	display: inline-block
}

.okayNav__nav--visible a {
	display: block; 
	padding: 15px
}

.okayNav__nav--visible a:hover {
	color: #546edb
}

.okayNav__nav--invisible { 
	position: absolute;
	top: 62px;    
    /* right: -243px; */
     right: 0;    
    box-shadow: 0px 0px 5px 1px #eee;
	-webkit-transform-origin: 200px 0;
	-ms-transform-origin: 200px 0;
	transform-origin: 200px 0;
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: none; 
}

.okayNav__nav--invisible a {
	background: #fff;
	width: 240px;
	display: block;     
	padding: 5px 15px;
}

.okayNav__nav--invisible.nav-open {
	/* -webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0); */
	display: block;      
}

.okayNav__menu-toggle {
	position: relative; 
	cursor: pointer;
	width: 40px;
	height: 20px;
	float: left;
	z-index: 1;
	top: 20px;         
	transform: rotate(90deg);
}

.okayNav__menu-toggle span {
	display: block;
	position: absolute;
	margin: auto;
	height: 4px;
	width: 4px;
	background: #2e2e33;
	border-radius: 50%;
	left: 0;
	right: 0;
	pointer-events: none
}

.okayNav__menu-toggle span:nth-child(1) {
	top: 0
}

.okayNav__menu-toggle span:nth-child(2) {
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}

.okayNav__menu-toggle span:nth-child(3) {
	bottom: 0
}

.okayNav__menu-toggle.icon--active {
/* 	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg) */
}

.okayNav__menu-toggle.icon--active span {
	background: #546edb
}

#nav-main {
    position: relative;
}