/* media queries*/
@media only screen and (max-width: 420px){
	.nav-logo{
		letter-spacing: 0;
		padding: 0 1rem;
	}

	.hamburger-menu{
		width: 10rem;
	}

	.sidebar-icon{
		padding: 0 1.5rem;
	}

	.demo-types{
		padding: 1.5rem .5rem;
	}

	.demo-types span{
		font-size: 24px;
    	background-color: #a51421;
	    padding-bottom: .2rem;
	    border-radius: 0 5px;
	    color: #ffffff;
	}

	.demo-types h5{
	    font-size: 14px;
    	margin: 1rem auto;
	}

	.demo-types-buttons{
	    padding-top: .5rem;
	}

	.demo-types button{
		padding: .5rem 1rem;
	    margin: 0 auto 1rem auto;
	    font-size: 14px;
	    display: block;
	}

	header div{
		top: 30%;
		left: 0;
		width: 90%;
		margin: 0 auto;
		line-height: normal;
		padding: 0 1rem;
		text-align: center;
	}

	header div h1{
		font-weight: lighter;
		font-size: 20px;
		padding-bottom: 1rem;
	}

	header div p{
		font-size: 14px;
		padding: 1rem 0;
	}

	.learn-more-button{
		margin-top: 1rem;
		padding: .5rem .5rem;
		font-size: 14px;
	}

	#howto{
    background-color: white;
	background-size: cover;
	background-position: center;
		min-height: 3200px;
	}

	.register-wrapper{
		width: 90%;
	}

	.register-types{
		margin-top: 3rem;
		padding: 1rem;
	}

	.register-types > h5{
		font-size: 14px;
		padding-bottom: 1rem;
	}

	.driver-selected, .voter-selected{
		width: 100%;
		height: 2rem;
		font-size: 13px;
		margin-bottom: 1.5rem;
	}
	.register-types > button{
		width: 5rem;
		height: 2rem;
		font-size: 13px;
		font-weight: bold;
	}

	.driver-register > h4,
	.voter-register > h4{
		 font-size: 14px;
	}

	.driver-register label,
	.driver-register input,
	.voter-register label,
	.voter-register input,
	.voter-register textarea{
		margin: 1rem 0;
	}

	.driver-register label,
	.voter-register label{
	    font-size: 14px;
	}

	.driver-register input,
	.voter-register input{
		padding: 0;
	    font-size: 13px;
	}

	.voter-register textarea{
		padding: .5rem;
	    font-size: 13px;
	}

	.fullname-input input,
	.fulladdress-input input{
		width: 100%;
	}

	.reg-form-buttons{
		height: 1rem;
	}

	.reg-form-buttons button{
		width: 45%;
	    height: 2rem;
		font-size: 12px;
	}

	.driver-register > h5,
	.voter-register > h5{
		font-size: 12px;
	}
}

@media only screen and (max-width: 540px){
	#howto h2,
	#contact h2{
    	font-size: 18px;
	}

	#howto i,
	#contact i{
		display: none;
	}

	#howto h3{
		font-size: 16px;
    	text-align: center;
	}

	.thumb-instructions h4{
		letter-spacing: 0;
		font-size: 15px;
	}

	.driver-thumb-row{
		overflow: auto;
		height: auto;
	}
  
.about-icon {
    height: 20px;
    width: 20px;
}
  
	.thumb-instructions{
		width: 90%;
		height: 20rem;
		margin-bottom: 2rem;
		float: none;
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
	}

	#howto{
		min-height: 3200px;
	}

	.our-info{
		width: 100%;
		padding: 1rem;
	}

	.our-info p{
		text-align: center;
	}

	.contact-form{
		width: 100%;
		padding: 0;
	}

	.contact-form input{
		width: 90%;
		height: 1.5rem;
	}

	#contact{
		padding: 2rem;
	}

	#contact p{
		font-size: 14px;
	}

	.contact-form button{
		font-size: 12px;
	}

	footer{
		padding: 1rem;
	}

	footer > a{
		width: 10rem;
	}
}

@media only screen and (min-width: 541px) and (max-width: 1023px){
	.thumb-instructions h4{
		letter-spacing: normal;
	}

	.driver-thumb-row{
		overflow: auto;
		height: auto;
	}

	.thumb-instructions{
		width: 48%;
		height: 20rem;
		margin-bottom: 2rem;
	}

	#howto{
		min-height: 1850px;
	}

	.our-info{
		width: 100%;
		padding: 1rem;
	}

	.our-info p{
		text-align: center;
	}

	.contact-form{
		width: 100%;
		padding: 0;
	}

	.contact-form input{
		width: 90%;
		height: 1.5rem;
	}

	#contact{
		padding: 2rem;
	}

	footer{
		padding: 1rem;
	}

	footer > a{
		width: 10rem;
	}

	.register-wrapper{
		width: 90%;
	}

	.register-types{
		margin-top: 5rem;
		padding: .5rem;
	}

	.register-types h5{
		margin-top: 1rem;
	}

	.driver-selected, .voter-selected{
		width: 49%;
		font-size: 14px;
	}

	.register-types > button{
		width: 6rem;
		height: 2rem;
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 1rem;
	}
}

@media only screen and (min-width:421px) and (max-width: 650px){
	.nav-logo{
	letter-spacing: 1;
	padding: 0 1rem;
	}

	.hamburger-menu{
		width: 10rem;
	}

	.sidebar-icon{
		padding: 0 1.5rem;
	}

	header div{
		top: 30%;
		left: 0;
		width: 90%;
		margin: 0 auto;
		line-height: normal;
		padding: 0 1rem;
		text-align: center;
	}

	header div h1{
		font-weight: bold;
		font-size: 24px;
		padding-bottom: 1rem;
	}

	header div p{
		font-size: 18px;
		padding: 1rem 0;
	}

	.learn-more-button{
		margin-top: 1rem;
		padding: 1rem 1rem;
		font-size: 16px;
	}

	.register-wrapper{
		width: 90%;
	}

	.register-types{
		margin-top: 5rem;
		padding: .5rem;
	}

	.register-types h5{
		margin-top: 1rem;
	}

	.driver-selected, .voter-selected{
		width: 49%;
		font-size: 14px;
	}

	.register-types > button{
		width: 6rem;
		height: 2rem;
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 1rem;
	}

	.driver-register > h4,
	.voter-register > h4{
		 font-size: 14px;
	}

	.driver-register label,
	.driver-register input,
	.voter-register label,
	.voter-register input{
		margin: 1rem 0;
	}

	.driver-register label,
	.voter-register label{
	    font-size: 14px;
	}

	.driver-register input,
	.register input{
		padding: 0;
	    font-size: 13px;
	}

	.fullname-input input{
		width: 47%;
	}

	.fulladdress-input input{
		width: 100%;
	}

	.reg-form-buttons{
		height: 1rem;
	}

	.reg-form-buttons button{
		width: 45%;
	    height: 2rem;
		font-size: 12px;
	}

	.driver-register > h5,
	.voter-register > h5{
		font-size: 12px;
	}
}

@media only screen and (min-width:421px) and (max-width: 685px){
	.demo-types span{
	    color: #ffffff;
	    background-color: #a51421;
	    padding-bottom: .2rem;
	    border-radius: 0 5px;
	}

	.demo-types-buttons button{
		display: block;
    	margin: 1rem auto;
    	width: 20rem;
	}
}

@media only screen and (max-width: 950px){
	.login-wrapper{
		width: 90%;
	}

	.login-close button{
		background-color: #ff4c4c;
		color: #ffffff;
		border-bottom-left-radius: 5px;
	}

	.login-cancel-forgot button{
		background-color: #ff4c4c;
	}

	.login-form button{
		background-color: #4caf50;
	}

	.nav-links{
		display: none;
	}

	/*should be displayed inline-block with jQuery*/
	.hamburger-menu{
		position: absolute;
		width: 15rem;
		right: 0;
		display: none;
		background-color: #000000;
		text-align: center;
		font-weight: lighter;
		height: 100vh;
		opacity: .9;
	}

	.hamburger-menu a{
		color: #ffffff;
		text-decoration: none;
	}

	.hamburger-menu li{
		list-style-type: none;
		padding: 1rem 0;
	}

	.hamburger-menu li:hover{
		background-color: #9a9999;
		color: #000000;
	}

	.hamburger-menu a:hover{
		color: #000000;
	}

	.sidebar-icon{
		display: inline-block;
		float: right;
		padding: 0 2.5rem;
		line-height: 3rem;
	}

	.sidebar-icon a{
		color: black;
	}

	.incorrect-credentials-card,
	.missing-values-card,
	.redirect-message-card{
		width: 80%;
		max-width: 20rem;
	}

	.frequency-card{
		width: 90%;
		max-width: 40rem;

	}

	.frequency-card label,
	.frequency-card select,
	.frequency-card input,
	.frequency-card span{
		font-size: 14px;
	}

	.js-time input{
		text-align: right;
	}
}

.icon {
  margin-left: auto;
  margin-right: auto;
  height: 35px;
  width: 35px;
}

@media only screen and (min-width: 950px) and (max-width: 1180px){
	.nav-logo{
		width: 100%;
		text-align: center;
	}

	.nav-links{
		width: 100%;
	}

	.demo-link{
		width: 25%;
	}

	.register-link{
		width: 18%;
	}

	.login-link{
		width: 18%;
	}

	.howto-link{
		width: 18%;
	}

	.contact-link{
		width: 18%;
	}

	.nav-links li{
		text-align: center;
	}
}

@media only screen and (max-width: 1270px) and (min-width: 1023px){
	.register-types{
		margin-top: 5rem;
		padding: .5rem;
	}

	.register-types h5{
		margin-top: 1rem;
	}

	.driver-selected, .voter-selected{
		width: 49%;
		font-size: 14px;
	}

	.register-types > button{
		width: 6rem;
		height: 2rem;
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 1rem;
	}
}