@font-face {
    font-family: Roboto-Light;
    src: url(../roboto/Roboto-Light.woff);
}

body{
	font-family:Roboto-Light;  
}

.row{
	margin-left: 0;
	margin-right:0; 
}

.gradient-btn{
	padding: 10px;
	border: 0;
	color:white;
	font-weight: bold;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,207cca+73,207cca+73,bf3ec4+100 */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(left,  #1e5799 0%, #207cca 73%, #207cca 73%, #bf3ec4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #1e5799 0%,#207cca 73%,#207cca 73%,#bf3ec4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #1e5799 0%,#207cca 73%,#207cca 73%,#bf3ec4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#bf3ec4',GradientType=1 ); /* IE6-9 */
transition: all 0.2s;

}

.gradient-btn:hover{
	box-shadow: 2px 2px 2px #333;
	color:white;
	text-decoration: none;
	

}
.gradient-btn:link{
	color:white;
	text-decoration: none;
}
.gradient-btn:visited{
	color:white;
	text-decoration: none;
}

.group        { 
  position:relative; 
  margin-bottom:40px; 
}
input         {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus     { outline:none; }

/* LABEL ======================================= */
label          {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
}

/* active state */
input:focus ~ label, input:valid ~ label     {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar  { position:relative; display:block; width:100%; }
.bar:before, .bar:after   {
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@keyframes inputHighlighter {
  from  { background:#5264AE; }
  to    { width:0; background:transparent; }
}

.full-input{
	width: 100%;
	border: 1px solid #757575;
	padding: 10px;
	transition: all 0.2s;
}


.full-input:focus{
	border: 2px solid #5264AE;
	box-shadow: 2px 2px 2px #333;
}



label{
	font-weight: bold;

}

@keyframes flickerAnimation {
  0%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s forwards;
   -moz-animation: flickerAnimation 1s forwards;
   -o-animation: flickerAnimation 1s forwards;
    animation: flickerAnimation 1s forwards;
}

.qbtn{
	border: 0;
	background-color: #999;
	font-weight: bold;
	padding: 10px; 
	width: 100%;
	color: white;
	transition: all 0.2s;
}

.qbtn:hover{
	background-color: #666;
}

.badbtn{
	background-color:red;
}
.badbtn:hover{
	background-color: rgb(180,0,0); 
}

.regularbtn{
	background-color: #00BFFF;
}

.regularbtn:hover{
	background-color: 	#1E90FF;
}

.goodbtn{
	background-color: 	#32CD32;
}

.goodbtn:hover{
	background-color: 	#3CB371;
}

.verygoodbtn{
	color:black;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eab92d+1,ffff59+45,c79810+100 */
background: #eab92d; /* Old browsers */
background: -moz-linear-gradient(left,  #eab92d 1%, #ffff59 45%, #c79810 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #eab92d 1%,#ffff59 45%,#c79810 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #eab92d 1%,#ffff59 45%,#c79810 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=1 ); /* IE6-9 */

}

.verygoodbtn:hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#febf01+0,e7fc02+40,febf01+100 */
background: #febf01; /* Old browsers */
background: -moz-linear-gradient(left,  #febf01 0%, #e7fc02 40%, #febf01 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #febf01 0%,#e7fc02 40%,#febf01 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #febf01 0%,#e7fc02 40%,#febf01 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01', endColorstr='#febf01',GradientType=1 ); /* IE6-9 */

}

#comments{
	min-height: 250px;
	width: 100%;
	border: 1px solid #5264AE;
	transition: all 0.2s;
}

#comments:focus{
	border: 2px solid #5264AE;
}

#black_modal{
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	top:0;
	left: 0;
	display: none;

}

#inner_modal{
	margin-top: 20px;
	min-height: 250px;
	box-shadow: 2px 2px 2px #333;
	text-align: center;
	background-color: white;
	padding-top: 20px;
	padding-bottom: 20px;
}