/*
 * 1.0 BASIC ELEMENTS 
 * ============================================================================
 */

#wrapper{
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	position: absolute;
	text-align: left;
}
.inner{
	width: 1220px;
	max-width: 100%;
	position: relative;
	z-index: 20;
	margin: 0 auto;
	padding: 0 10px;
}
.inner.inner-wide{
	width: 1280px;
}

/* 1.1 Forms */

input, select, textarea{
	display: inline-block;
	border-width: 1px;
	border-style: solid;
	vertical-align: middle;
}
input, select{
	height: 2.5rem;
	padding: 10px 13px;
}
input[type='file']{
	
}
input[type='radio'], input[type='checkbox']{
	
}
input[type='color']{
	
}
input[type='time'], input[type='week'], input[type='month'],
input[type='date'], input[type='datetime'], input[type='datetime-local'],
select{
	
}
input[type='range']{
	
}
textarea{
	
}
input[type='button'], input[type='submit'], input[type='reset'], input[type='image'], button, .button{
	width: 200px;
	max-width: 100%;
	height: 2rem;
	display: inline-block;
	outline: none;
	border: none;
	vertical-align: middle;
	text-decoration: none!important;
	text-align: center;
	cursor: pointer;
}
a.button{
	display: table;
	padding: 0;
    text-align: center;
    line-height: 1;
}
a.button span{
	display: table-cell;
	padding-top: 5px;
    padding-bottom: 5px;
    vertical-align: middle;
}

input[type='button'].button-tiny, input[type='submit'].button-tiny, input[type='reset'].button-tiny, input[type='image'].button-tiny, button.button-tiny, .button.button-tiny{
	width: auto;
	min-height: 20px;
	padding-right: 5px;
	padding-left: 5px;
	border-radius: 9px;
	line-height: 1;
	font-size: 0.5rem;
}

input[type='button'].button-grey, input[type='submit'].button-grey, input[type='reset'].button-grey, input[type='image'].button-grey, button.button-grey, .button.button-grey{
	border-radius: 0.9rem;
	background-color: #ebebeb;
	font-weight: bold;
	color: #6234fa;
}

input[type='button']:hover, input[type='submit']:hover, input[type='reset']:hover, button:hover, .button:hover{
	
}


a.shape-btn-lgrey{
	width: 292px;
	max-width: calc(100% - 30px);
	display: block;
	margin: 20px auto 0 auto;
	padding: 12px 10px;
	border-radius: 10px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	line-height: 20px;
}

@media all and (min-width: 769px){
	input[type='button'], input[type='submit'], input[type='reset'], input[type='image'], button, .button{
		height: 2.5rem;
	}
}


.form{
	
}
.form-row{
	margin: 0 30px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
}
.form-column{
	width: 50%;
	float: left;
	padding: 25px 15px 30px 15px;
}
.form-column .column-wrap{
	max-width: 428px;
	margin-right: auto;
	margin-left: auto;
}
.input-control{
	position: relative;
	margin-top: 30px;
	line-height: 0.7rem;
}
.input-control .control{
	position: relative;
}
.input-control label ~ .control{
	margin-top: 7px;
}
.input-control .input-addition{
	height: 100%;
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0.5rem;
	line-height: 2.5rem;
}
.input-control .input-addition + input{
	padding-right: 30px;
}


/* text control */

.text-control input{
	width: 100%;
}

/* number control */

.number-control input{
	width: 100%;
}

/* select control */

.select-control select{
	width: 100%;
}

/* range control */

/*.range-control input{
	display: none;
}*/

.range-control input
{
	position: absolute;
    width: 0;
    height: 0;
    padding: 0;
	border: 0;
}

.range-control .ui-widget.ui-widget-content{
	height: 0;
	margin: 13px 5px 7px 5px;
	border: none;
	border-radius: 0;
	border-top: 1px solid #222;
	background: none;
}
.range-control .ui-slider .ui-slider-handle{
	width: 10px;
	height: 10px;
	margin-left: -5px;
	outline: none!important;
	border: none!important;
	border-radius: 10px;
	background-color: #000000;
}
.range-control .ui-slider .ui-slider-handle.ui-state-focus{
	background-color: #6331fb;
}
.range-control .ui-slider .ui-slider-range{
	height: 0;
	top: -1px;
	border: none;
	border-top: 1px solid #6331fb;
	background: none;
}

/* option radio control */

.option-radio-control input{
	display: none;
}
.option-radio-control .control{
	width: 100%;
	height: 2.5rem;
	display: table;
	table-layout: fixed;
}
.option-radio-control .control .option-radio{
	display: table-cell;
	border-width: 1px;
	border-style: solid;
	vertical-align: middle;
	text-decoration: none!important;
	text-align: center;
}
.option-radio-control .control .option-radio:not(:first-of-type){
	border-left: none;
}


/* upload control */

.upload-control{
	overflow: hidden;
}
.upload-control:after{
	display: block;
	clear: both;
}
.upload-control .control{
	width: calc(100% - 140px);
	height: 2.5rem;
	overflow: hidden;
	float: left;
	position: relative;
	padding: 0 10px;
	border-width: 0.2rem;
	border-style: solid;
	white-space: nowrap;
	line-height: 2.1rem;
	cursor: pointer;
}
.upload-control .control:before{
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	/*box-shadow: inset 0 0 10px 5px #fff;*/
}
.upload-control .control input{
	width: 100%;
	height: 200%;
	opacity: 0;
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 0;
	cursor: pointer;
}
.upload-control .control span{
	vertical-align: middle;
}
.upload-control .control .icon{
	margin-top: -2px;
	margin-right: 4px;
}
.upload-control-warning{
	width: 140px;
	float: right;
	padding: 7px 0 0 10px;
	line-height: 1rem;
}


/* inout custom links */

.input-custom-links{
	margin-top: 0.4rem;
	line-height: 1.1rem;
}

.input-custom-links a{
	display: inline-block;
	margin-top: 0.9rem;
}
.input-custom-links a .icon{
	margin-top: -2px;
	margin-right: 12px;
}

/* submit control */

.submit-control{
	margin-right: -5px;
	margin-left: -5px;
	padding: 16px 0 0 0;
	text-align: center;
}
.submit-control > button, .submit-control > input, .submit-control > span, .submit-control > img, .submit-control > a{
	margin-right: 5px;
	margin-left: 5px;
}

/* 1.2 Tables */

table{
	
}
.table{
	display: table;
}
.table-row{
	display: table-row;
}
.table-cell{
	display: table-cell;
	vertical-align: middle;
}

/* 1.3 Headers */

h1, h2, h3, h4, h5, h6{
	margin: 0 0 0.5em 0;
}
h1{
	letter-spacing: 2px;
	word-spacing: 3px;
}
h2{
	line-height: 1.2;
}
h2.has_nav{
	display: inline-block;
	position: relative;
	padding-right: 40px;
	padding-left: 40px;
}
h2.has_nav .icon{
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%); 
}
h2.has_nav .icon-arrow{
	left: 0;
}
h2.has_nav .icon-arrow-reverse{
	right: 0;
}
@media all and (min-width: 961px){
	h2.has_nav{
		padding-right: 100px;
		padding-left: 100px;
	}
	h2.has_nav .icon-arrow{
		margin-right: 100px;
	}
	h2.has_nav .icon-arrow-reverse{
		margin-left: 100px;
	}
}

/* 1.4 Paragraph */

main p{
	margin: 0 0 1rem 0;
}
p:last-child{
	margin-bottom: 0;
}

/* 1.5 Blockquotes  */

blockquote{
	display: block;
}
blockquote.left {}
blockquote.right {}

/* 1.6 HR dividers */

hr{
	clear: both;
}

/* 1.7 Pre and Code */

pre {
	max-width: 100%;
	margin: 1rem 0;
	white-space: pre-wrap;
	word-break: break-all;
	word-wrap: break-word;
	text-align: left;
}
pre code {
	line-height: 1.5rem;
	white-space: pre-wrap;
}

/* 1.8 Lists */

main ul, ol{
	margin: 0 0 1rem 0;
	padding-left: 1rem;
}
ul:last-child, ol:last-child{
	margin-bottom: 0;
}



/* Desktop */

@media all and (max-width: 2880px){
	
}
@media all and (max-width: 2560px){
	
}
@media all and (max-width: 2048px){
	
}
@media all and (max-width: 1920px){
	
}
@media all and (max-width: 1680px){
	
}
@media all and (max-width: 1600px){
	
}
@media all and (max-width: 1440px){
	
}
@media all and (max-width: 1366px){
	
}
@media all and (max-width: 1280px){
	
}
@media all and (max-width: 1200px){
	
}
@media all and (max-width: 1136px){
	
}
@media all and (max-width: 1024px){
	
}

/* ~ Tablets */

@media all and (max-width: 960px){
	.form-row{
		margin-right: -15px;
		margin-left: -15px;
	}
}
@media all and (max-width: 906px){
	
}
@media all and (max-width: 854px){
	
}
@media all and (max-width: 800px) {
	
}
@media all and (max-width: 768px){
	.form-column{
		width: auto;
		float: none;
	}
	.submit-control input{
		display: block;
		margin: 20px auto 0 auto;
	}
	.submit-control > button{
		display: block;
		margin: 20px auto 0 auto;
	}
}
@media all and (max-width: 736px){
	
}
@media all and (max-width: 720px){
	
}

/* ~ Cellphones */

@media all and (max-width: 667px){
	
}
@media all and (max-width: 640px){
	
}
@media all and (max-width: 601px){
	
}
@media all and (max-width: 568px){
	
}
@media all and (max-width: 540px){
	
}
@media all and (max-width: 480px){
	
	.button.button-grey
	{
		line-height:3;
	}
	
}
@media all and (max-width: 414px){
	.input-group .input-control,
	.input-control .control[class*='wi_'],
	.upload-control .control, .upload-control-warning{
		width: auto;
		float: none;
	}
	
}
@media all and (max-width: 384px){
	
}
@media all and (max-width: 375px){
	
}
@media all and (max-width: 360px){
	
}
@media all and (max-width: 320px){
	
}
@media all and (max-width: 218px){ /* Moto 360 Watch */
	
}
@media (max-device-width: 42mm) and (min-device-width: 38mm){ /* Apple Watch ~ 158px max, 143px min */
	
}