/*

	Base.css
	
	01. Reset
	02. Other basic parts
	03. Forms
	04. Media
	05. Grid
	06. Positioning and spacing

*/


/* === 01. Reset === */
html, body { height: 100%; min-height: 100%; }
body { overflow-x: hidden; padding: 0; }
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
* { margin: 0; padding: 0; border: 0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0)!important; -webkit-focus-ring-color: rgba(255, 255, 255, 0)!important; outline: none!important; }
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 1em; -webkit-text-size-adjust: 1em; -ms-text-size-adjust: 1em; }
body { vertical-align: baseline; }
html, button, input, select, textarea { font-family: inherit; }


/* === 02. Other basic parts === */
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #999999;
}

address { margin-bottom: 25px }
cite { font-style: italic }
dfn { font-style: italic }
small { font-size: 75% }
sup { top: -0.5em }
sub { bottom: -0.25em }
var { font-style: italic }

mark {
background: yellow;
color: #000000;
}

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

pre,
code,
kbd,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 13px;
line-height: 20px;
}

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

.code {
background: #fafafa;
border: 1px solid #eee;
padding: 0 20px 20px 20px;
margin-top: 25px;
margin-bottom: 25px;
}

.code span {
color: tomato;
}


/* === 03. Forms === */
::-webkit-input-placeholder { color: #cccccc }
:-moz-placeholder { color: #cccccc }
::-moz-placeholder { color: #cccccc }
:-ms-input-placeholder { color: #cccccc }

.form input:not([type]),
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="url"],
.form input[type="date"],
.form input[type="month"],
.form input[type="time"],
.form input[type="datetime"],
.form input[type="datetime-local"],
.form input[type="week"],
.form input[type="number"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="color"],
.form select,
.form textarea {
-webkit-appearance: none;
display: inline-block;
width: 100%;
min-height: 50px;
padding: 10px;
background: none;
color: #777777;
border: 1px solid #999999;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
		box-sizing: border-box;
-webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	 -o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
}

.form input:not([type]):focus,
.form input[type="text"]:focus,
.form input[type="password"]:focus,
.form input[type="email"]:focus,
.form input[type="url"]:focus,
.form input[type="date"]:focus,
.form input[type="month"]:focus,
.form input[type="time"]:focus,
.form input[type="datetime"]:focus,
.form input[type="datetime-local"]:focus,
.form input[type="week"]:focus,
.form input[type="number"]:focus,
.form input[type="search"]:focus,
.form input[type="tel"]:focus,
.form input[type="color"]:focus,
.form select:focus,
.form textarea:focus {
outline: 0;
outline: thin dotted \9; /* IE6-9 */
color: #111111;
border: 1px solid #111111;
-webkit-transition: all .2s;
   -moz-transition: all .2s;
	-ms-transition: all .2s;
	 -o-transition: all .2s;
		transition: all .2s;
}

.form input[type="file"]:focus,
.form input[type="radio"]:focus,
.form input[type="checkbox"]:focus {
outline: thin dotted #111111;
outline: 1px auto #111111;
}

.form select {
min-width: 75px;
}

.form .form-checkbox,
.form .form-radio {
margin: 1em 0;
display: block;
}

.form input:not([type])[disabled],
.form input[type="text"][disabled],
.form input[type="password"][disabled],
.form input[type="email"][disabled],
.form input[type="url"][disabled],
.form input[type="date"][disabled],
.form input[type="month"][disabled],
.form input[type="time"][disabled],
.form input[type="datetime"][disabled],
.form input[type="datetime-local"][disabled],
.form input[type="week"][disabled],
.form input[type="number"][disabled],
.form input[type="search"][disabled],
.form input[type="tel"][disabled],
.form input[type="color"][disabled],
.form select[disabled],
.form textarea[disabled] {
cursor: not-allowed;
background-color: #eaeded;
color: #cad2d3;
}

.form input[readonly],
.form select[readonly],
.form textarea[readonly] {
background: #eee;
color: #777;
border-color: #cccccc;
}

.form input:focus:invalid,
.form textarea:focus:invalid,
.form select:focus:invalid {
color: #b94a48;
border: 1px solid #ee5f5b;
}

.form input:focus:invalid:focus,
.form textarea:focus:invalid:focus,
.form select:focus:invalid:focus {
border-color: #e9322d;
}

.form input[type="file"]:focus:invalid:focus,
.form input[type="radio"]:focus:invalid:focus,
.form input[type="checkbox"]:focus:invalid:focus {
outline-color: #e9322d;
}

.form textarea {
overflow: auto;
resize: none;
height: 150px;
font-size: 100%;
}

.form select {
border: 1px solid #ccc;
background-color: white;
}

.form select[multiple] {
height: auto;
}

.form label {
margin: 0.5em 0 0.2em;
font-size: 100%;
}

.form fieldset {
margin: 0;
padding: 0.35em 0 0.75em;
border: 0;
}

.form legend {
display: block;
width: 100%;
padding: 10px 0;
margin-bottom: 10px;
font-size: 125%;
color: #111111;
border-bottom: 1px solid #eeeeee;
}

.form-aligned input,
.form-aligned textarea,
.form-aligned select,
.form-aligned .form-help-inline,
.form-message-inline {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}

.form-aligned textarea {
vertical-align: top;
}

.form-aligned .form-control-group {
margin-bottom: 0.5em;
}

.form-aligned .form-control-group label {
text-align: right;
display: inline-block;
vertical-align: middle;
width: 10em;
margin: 0 1em 0 0;
}

.form-aligned .form-controls {
margin: 1.5em 0 0 10em;
}


/* === 04. Media === */
video {
max-width: 100%;
height: auto;
}

iframe,
embed,
object { max-width: 100% }

.vendor {
padding: 0;
background: #fafafa;
margin-bottom: 0;
}

.unsupported { background: #fafafa }

img { vertical-align: bottom }

.responsive-img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}

.circle-img {
-webkit-border-radius: 50%;
	-ms-border-radius: 50%;
		border-radius: 50%;
}


/* === 05. Grid === */
/* Grid parts */
.row { width: 1140px; max-width: 100%; margin: 0 auto; }
.row .row { width: auto; max-width: none; margin: 0 -20px; }
.col { float: left; min-height: 1px; padding: 0 20px; position: relative; }
.row_full .col {padding: 0;}
/* Margin grid */
.grid-m { margin: 20px; }
.grid-ms { margin-left: 20px; margin-right: 20px; }
.grid-mt { margin-top: 40px; }
.grid-mb { margin-bottom: 40px; }

/* Basic grid */
.row .one { width: 8.3333% }
.row .two { width: 16.6666% }
.row .three { width: 25% }
.row .four { width: 33.3333% }
.row .five { width: 41.6666% }
.row .six { width: 50% }
.row .seven { width: 58.3333% }
.row .eight { width: 66.6666% }
.row .nine { width: 75% }
.row .ten { width: 83.3333% }
.row .eleven { width: 91.6666% }
.row .twelve { width: 100% }

/* Offset grid */
.offset-by-one { margin-left: 8.3333% }
.offset-by-two { margin-left: 16.6666% }
.offset-by-three { margin-left: 25% }
.offset-by-four { margin-left: 33.333% }
.offset-by-five { margin-left: 41.6666% }
.offset-by-six { margin-left: 50% }
.offset-by-seven { margin-left: 58.3333% }
.offset-by-eight { margin-left: 66.6666% }
.offset-by-nine { margin-left: 75% }
.offset-by-ten { margin-left: 83.3333% }
.offset-by-eleven { margin-left: 91.6666% }

/* Center grid */
.one.center { margin-left: 45.8333% }
.two.center { margin-left: 41.6667% }
.three.center { margin-left: 37.5% }
.four.center { margin-left: 33.3333% }
.five.center { margin-left: 29.1667% }
.six.center { margin-left: 25% }
.seven.center { margin-left: 20.8333% }
.eight.center { margin-left: 16.6667% }
.nine.center { margin-left: 12.5% }
.ten.center { margin-left: 8.3333% }
.eleven.center { margin-left: 4.1667% }

/* Micro clearfix */
.row:before, .row:after,.row_full:before, .row_full:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.row:after,.row_full:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }


/* Tablet landscape - Large */
@media only screen and (max-width: 1024px) {

/* Grid parts - 30px gutter */
.row .row { margin: 0 -15px; }
.col { padding: 0 15px; }

/* Margin grid */
.grid-m { margin: 15px; }
.grid-ms { margin-left: 15px; margin-right: 15px; }
.grid-mt { margin-top: 30px; }
.grid-mb { margin-bottom: 30px; }

/* Large grid */
.row .large-one { width: 8.3333% }
.row .large-two { width: 16.6666% }
.row .large-three { width: 25% }
.row .large-four { width: 33.3333% }
.row .large-five { width: 41.6666% }
.row .large-six { width: 50% }
.row .large-seven { width: 58.3333% }
.row .large-eight { width: 66.6666% }
.row .large-nine { width: 75% }
.row .large-ten { width: 83.3333% }
.row .large-eleven { width: 91.6666% }
.row .large-twelve { width: 100% }

}


/* Tablet portrait - Medium */
@media only screen and (max-width: 768px) {

/* Basic grid - Collapsing all to one 100% width column here */
.row .one,
.row .two,
.row .three,
.row .four,
.row .five,
.row .six,
.row .seven,
.row .eight,
.row .nine,
.row .ten,
.row .eleven,
.row .twelve { width: 100% }

/* Offset grid - Since every col is collapsing we don't use the offsets anymore */
.offset-by-one,
.offset-by-two,
.offset-by-three,
.offset-by-four,
.offset-by-five,
.offset-by-six,
.offset-by-seven,
.offset-by-eight,
.offset-by-nine,
.offset-by-ten,
.offset-by-eleven { margin-left: 0 }

/* Center grid - Since every col is collapsing we don't use the offsets anymore */
.one.center,
.two.center,
.three.center,
.four.center,
.five.center,
.six.center,
.seven.center,
.eight.center,
.nine.center,
.ten.center,
.eleven.center { margin-left: 0 }

/* Medium grid */
.row .medium-one { width: 8.3333% }
.row .medium-two { width: 16.6666% }
.row .medium-three { width: 25% }
.row .medium-four { width: 33.3333% }
.row .medium-five { width: 41.6666% }
.row .medium-six { width: 50% }
.row .medium-seven { width: 58.3333% }
.row .medium-eight { width: 66.6666% }
.row .medium-nine { width: 75% }
.row .medium-ten { width: 83.3333% }
.row .medium-eleven { width: 91.6666% }
.row .medium-twelve { width: 100% }

}


/* Smartphone landscape - Small */
@media only screen and (max-width: 480px) {

/* Grid parts - 20px gutter */
.row .row { margin: 0 -10px; }
.col { padding: 0 10px; }

/* Margin grid */
.grid-m { margin: 10px; }
.grid-ms { margin-left: 10px; margin-right: 10px; }
.grid-mt { margin-top: 20px; }
.grid-mb { margin-bottom: 20px; }

/* Small grid */
.row .small-one { width: 8.3333% }
.row .small-two { width: 16.6666% }
.row .small-three { width: 25% }
.row .small-four { width: 33.3333% }
.row .small-five { width: 41.6666% }
.row .small-six { width: 50% }
.row .small-seven { width: 58.3333% }
.row .small-eight { width: 66.6666% }
.row .small-nine { width: 75% }
.row .small-ten { width: 83.3333% }
.row .small-eleven { width: 91.6666% }
.row .small-twelve { width: 100% }

}


/* Smartphone portrait - X-small */
@media only screen and (max-width: 320px) {

/* X-small grid */
.row .x-small-one { width: 8.3333% }
.row .x-small-two { width: 16.6666% }
.row .x-small-three { width: 25% }
.row .x-small-four { width: 33.3333% }
.row .x-small-five { width: 41.6666% }
.row .x-small-six { width: 50% }
.row .x-small-seven { width: 58.3333% }
.row .x-small-eight { width: 66.6666% }
.row .x-small-nine { width: 75% }
.row .x-small-ten { width: 83.3333% }
.row .x-small-eleven { width: 91.6666% }
.row .x-small-twelve { width: 100% }

}


/* Responsive utilities */
@media only screen and (min-width: 1025px) {
.hide-normal { display: none!important }
.hide-large,
.hide-medium,
.hide-small,
.hide-x-small { display: block!important }
}

@media only screen and (max-width: 1024px) {
.hide-large { display: none!important }
.hide-normal,
.hide-medium,
.hide-small,
.hide-x-small { display: block!important }
}

@media only screen and (max-width: 768px) {
.hide-medium { display: none!important }
.hide-normal,
.hide-large,
.hide-small,
.hide-x-small { display: block!important }
}

@media only screen and (max-width: 480px) {
.hide-small { display: none!important }
.hide-normal,
.hide-large,
.hide-medium,
.hide-x-small { display: block!important }
}

@media only screen and (max-width: 320px) {
.hide-x-small { display: none!important }
.hide-normal,
.hide-large,
.hide-medium,
.hide-small { display: block!important }
}


/* === 06. Positioning and spacing === */
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }

.pull-left { float: left }
.pull-right { float: right }

.relative { position: relative }
.absolute { position: absolute }

.m0 { margin: 0 }
.mt0 { margin-top: 0 }
.mb0 { margin-bottom: 0 }
.ms0 { margin-right: 0; margin-left: 0 }

.p0 { padding: 0 }
.pt0 { padding-top: 0 }
.pb0 { padding-bottom: 0 }
.ps0 { padding-right: 0; padding-left: 0 }