html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
line-height: 1.5;
background: #282d33;
color: #fff;
font-family: 'Open Sans', sans-serif;
padding-top: 60px;
}
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
strong{
  font-weight:bold;
}
/*----------------------------------------------------------------------
------------------------------BUTTONS SWITCH-------------------------
----------------------------------------------------------------------*/
.ui-kit .row:first-child button.blue{
  background:#42a9ec;
}
.ui-kit .row:first-child button.green{
  background:#5BD198;  
}
.ui-kit .row:first-child button.yellow{
  background:#F1C63D;  
}
.ui-kit .row:first-child button.pink{
  background:#F55487;  
}
.ui-kit .row:first-child button.current {
border-bottom: 2px solid #fff;
}
/*----------------------------------------------------------------------
------------------------------UI----------------------------------------
----------------------------------------------------------------------*/
.ui-kit{
	width: 620px;
	margin: 0 auto;
	margin-bottom: 50px;
}
.row{
	margin:20px 0;
}
input[type=text],input[type=password],input[type=email],button{
height: 36px;
padding:10px;
}
textarea{
padding:10px;
height: 150px;
max-width: 100%;
}
input,select,textarea,button{
	border: none;
	outline:none !important;
	margin: 0;
	background: #e9ecee;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
}
input:focus,textarea:focus{
background:#f0f4f7
}
button{
	background: #42a9ec;
	color: #fff;
	min-width: 150px;
	line-height: 36px;
	height: 36px;
	padding: 0 10px;
  cursor:pointer;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;	
}
button:hover{
  box-shadow:inset 0 -36px 0 rgba(0,0,0,0.1);
}
button:active{
  box-shadow:inset 0 -36px 0 rgba(0,0,0,0.2);
}
  -webkit-transform: scale(0.98);
  -moz-transform: ;
  -ms-transform: ;
  -o-transform: ;
  transform: ;
}
input[type=text],input[type=password],input[type=email]{
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;	
}
em{
	font-style: italic;
}
ul {
padding-left: 1em;
}
ul li:before {
    content: "• ";
    color: #42a9ec;
}
blockquote {
margin: 1em;
position: relative;
}
blockquote:before, blockquote:after {
content: '“';
position: absolute;
left: -0.5em;
top: 0;
color: #42a9ec;
line-height: 0;
font-size: 2em;
}
blockquote:after {
	content: '”';
	left: inherit;
	right: -0.5em;
	top: inherit;
	bottom: -0.2em;
	}
/*---------------------------------------------------------------------
-----------------------------------------HEADINGS----------------------
----------------------------------------------------------------------*/
h1{
	font-size:2em;
}
h2{
	font-size:1.8em;
}
h3{
	font-size:1.6em;	
}
h4{
	font-size:1.4em;	
}
h5{
	font-size:1.2em;	
}
h6{
	font-size:1.1em;	
}
/*----------------------------------------------------------------------
-----------------------------------------HEADINGS-----------------------
----------------------------------------------------------------------*/
a{
	position: relative;
  text-decoration:none;
	color :#42a9ec;
	box-shadow: inset 0 -1px 0 ;
	-webkit-transition: all 100ms linear;
	-moz-transition: all 100ms linear;
	-ms-transition: all 100ms linear;
	-o-transition: all 100ms linear;
	transition: all 100ms linear;	
}
a:hover{
	color :#fff !important;
	box-shadow: inset 0 -1.5em 0 #42a9ec;
}
/*---------------------------------------------------------------------
-----------------------------------------INPUT TEXT--------------------
-----------------------------------------------------------------------*/
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus {
background: rgba(255, 255, 255, 0.5);
box-shadow: inset 0 -1px 0 #42a9ec;
}
textarea:focus{
	background: rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 -1px 0 #42a9ec;
}
/*--------------------------------------------------------------------
-----------------------------------------FAKE PLACEHOLDER-------------
----------------------------------------------------------------------*/
.fake-placeholder {
position: relative;
display: inline-block;
}
.fake-placeholder input+ span {
position: absolute;
display: none;
top: 0;
bottom: 0;
left: 10px;
line-height: 36px;
color: rgb(149, 149, 149);
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;	
}
.fake-placeholder input.empty + span{
display: block;
}
.fake-placeholder input:focus + span{
display: block !important;
}
.fake-placeholder input:focus + span {
position: absolute;
top: -10px;
bottom: inherit;
left: 0;
line-height: 1;
color: #42a9ec;
font-size: 9px;
}
/*---------------------------------------------------------------------
-----------------------------------------FAKE RADIO--------------------
----------------------------------------------------------------------*/
.fake-radio {
display: inline-block;
}
.fake-radio input {
position: absolute;
visibility: hidden;
}
.fake-radio input + span {
	width: 20px;
	height: 20px;
	display:block;
	background: #e9ecee;
	border-radius: 50%;
	position: relative;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;
	}

.fake-radio input + span:before {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	background: black;
	opacity: 0.2;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;
	}
.fake-radio:hover input + span:before {
	opacity: 0.5;
	}
.fake-radio input:checked + span ,.fake-radio input.checked + span {
	background: #42a9ec;
	}
.fake-radio input:checked + span:before ,.fake-radio input.checked + span:before {
	opacity: 0.6;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	}
/*---------------------------------------------------------------------
-----------------------------------------FAKE CHECKBOX-----------------
----------------------------------------------------------------------*/
.fake-checkbox {
display: inline-block;
}
.fake-checkbox input {
position: absolute;
visibility: hidden;
}
.fake-checkbox input + span {
	width: 20px;
	height: 20px;
	display:block;
	background: #e9ecee;
	position: relative;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;
	}

.fake-checkbox input + span:before {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	background: black;
	opacity: 0.2;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;
	}
.fake-checkbox:hover input + span:before {
	opacity: 0.5;
	}
.fake-checkbox input:checked + span ,.fake-checkbox input.checked + span {
	background: #42a9ec;
	}
.fake-checkbox input:checked + span:before ,.fake-checkbox input.checked + span:before {
	opacity: 0.6;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	}
.fake-checkbox input + span:after {
content: '';
position: absolute;
height: 5px;
width: 10px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 6px;
left: 5px;
opacity: 0;
}
.fake-checkbox input:checked + span:after {
	opacity: 1;
}
/*--------------------------------------------------------------------
-----------------------------------------FAKE SELECT------------------
----------------------------------------------------------------------*/
.fake-select{
  width:300px;
  position: relative;
  cursor: pointer;  
  color: #585858;
  height: 36px;
  line-height: 36px;
  z-index: 1;
}
.fake-select:after {
content: '';
position: absolute;
border-top: 10px solid rgba(0, 0, 0, 0.5);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
top: 14px;
right: 10px;
}
.fake-select input[type="radio"]{
  position:absolute;
  left:-9999px;
}

.fake-select-title {
width: 100%;
display: block;
background: #e9ecee;
text-align: center;
}

.fake-select input[type="radio"] + span {
background: #e9ecee;
display: block;
text-align: center;
cursor: pointer;
width: 100%;
}
.fake-select-objects {
position: absolute;
top: 0;
padding-top: 36px;
width: 100%;
overflow: hidden;
max-height: 0;
}
.fake-select:hover .fake-select-objects  input[type="radio"] + span {
position: relative;
top: 0;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;
}
.fake-select:hover input[type="radio"] + span:hover {
background:#BBB;
}
.fake-select:hover input[type="radio"]:checked + span:hover {
background:#42a9ec;
color: #fff;
}
.fake-select input[type="radio"]:checked + span {
background: #42a9ec;
color: #fff !important;
position: absolute;
top: 0em;
}
.fake-select:hover .fake-select-objects {
max-height: 540px;
}

/*---------------------------------------------------------------------
-----------------------------------------UI- COLORS--------------------
----------------------------------------------------------------------*/
/*----------------GREEN------------*/
.green .fake-select input[type="radio"]:checked + span,.green .fake-select:hover input[type="radio"]:checked + span:hover,.green button,.green .fake-radio input:checked + span ,.green .fake-radio input.checked + span,.green .fake-checkbox input:checked + span ,.green .fake-checkbox input.checked + span{
	background: #5BD198;
}
.green .fake-select input[type="radio"]:checked + span,.green ul li:before,.green blockquote:before,.green  blockquote:after,.green a,.green .fake-placeholder input:focus + span {
    color: #5BD198;
}
.green a:hover{
	box-shadow: inset 0 -1.5em 0 #5BD198;
}
.green textarea:focus,.green input[type="text"]:focus,.green input[type="password"]:focus,.green input[type="email"]:focus {
box-shadow: inset 0 -1px 0 #5BD198;
}
/*----------------YELLOW------------*/
.yellow .fake-select input[type="radio"]:checked + span,.yellow .fake-select:hover input[type="radio"]:checked + span:hover,.yellow button,.yellow .fake-radio input:checked + span ,.yellow .fake-radio input.checked + span,.yellow .fake-checkbox input:checked + span ,.yellow .fake-checkbox input.checked + span{
	background: #F1C63D;
}
.yellow .fake-select input[type="radio"]:checked + span,.yellow ul li:before,.yellow blockquote:before,.yellow  blockquote:after,.yellow a,.yellow .fake-placeholder input:focus + span {
    color: #F1C63D;
}
.yellow a:hover{
	box-shadow: inset 0 -1.5em 0 #F1C63D;
}
.yellow textarea:focus,.yellow input[type="text"]:focus,.yellow input[type="password"]:focus,.yellow input[type="email"]:focus {
box-shadow: inset 0 -1px 0 #F1C63D;
}
/*----------------PINK------------*/
.pink .fake-select input[type="radio"]:checked + span,.pink .fake-select:hover input[type="radio"]:checked + span:hover,.pink button,.pink .fake-radio input:checked + span ,.pink .fake-radio input.checked + span,.pink .fake-checkbox input:checked + span ,.pink .fake-checkbox input.checked + span{
	background: #F55487;
}
.pink .fake-select input[type="radio"]:checked + span,.pink ul li:before,.pink blockquote:before,.pink  blockquote:after,.pink a,.pink .fake-placeholder input:focus + span {
    color: #F55487;
}
.pink a:hover{
	box-shadow: inset 0 -1.5em 0 #F55487;
}
.pink textarea:focus,.pink input[type="text"]:focus,.pink input[type="password"]:focus,.pink input[type="email"]:focus {
box-shadow: inset 0 -1px 0 #F55487;
}