/* fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700|Roboto+Slab:400,700');
h1, h2{font-family: 'Montserrat', sans-serif; font-weight: 700;}
h1{font-size: 30px;}
h2{font-size: 22px;}
ul {
    list-style-image: url('/images/tick.svg');
    padding: 0 0 0 22px;
}
ol li{
	margin-bottom: 30px;
}
.text-red{color: #CE181E;}

/* forms */
input[type='text'], input[type='password'], input[type='email'], input[type='number'], select{
	background-color: #DBE0E0;
	outline: 0;
	border:0;
	padding: 5px;
	margin-left: 15px;
}
button[type='submit']{
	-webkit-appearance: none;
	background-color: #AD171C;
	padding: 5px;
	border:0;
	color: #FFF;
	width: 30px;
	margin-left: 5px;
	cursor: pointer;
}
::placeholder {
	color: #859296;
}

form button[type='submit']{
	width: auto;
}

/* body and html */
html{
	height: 100%
}
body{
	font-family: 'Roboto Slab', sans-serif;
	height: 100%;
}

/* menu */
nav .btn{
	text-transform: uppercase;
	border-radius: 0;
	margin-right: 10px;
	min-width: 80px;
	font-size:12px;
}

nav .btn-sm{
	padding-top: 2px;
	padding-bottom: 2px;
}

/* header image */
.img-header{
	height: 500px;
	background-size: cover;
	background-position: center center;
}

.img-header h1{
	color: #FFF;
	width: 250px;
	padding-top: 20px;
	font-weight: 500;	
}

/* page content */
.page-content{
	line-height:30px;
}
.page-content h1{
	margin-top: 70px;
	margin-bottom: 30px;
	font-size: 50px;

}

/* hoe werkt stemmen */
.page-content-hoe img{
	width: 100%;
}

/* homepage topics */
.topic{
	margin-top: 20px;
	border-top: 1px solid #CE181E;
	margin-bottom: 50px;
	height: 350px;
}
.topic img{
	height: 280px;
	margin-top: 35px;
}
@media (max-width: 1199.98px) {
	.topic{
		height: 400px;	
	}
	.topic img{
		margin-top: 60px;
	}
	
}
@media (max-width: 991.98px) {
	.topic{
		height: 450px;	
	}
	.topic img{
		margin-top: 85px;
	}
	
}
@media (max-width: 767.98px) {
	.topic{
		height: 680px;	
	}
	
}

.topic .topic-image{
	text-align: center;
}

.topic h2{
	margin-top: 50px;
	margin-bottom:30px;
}
.home .btn{
	text-transform: uppercase;
	border-radius: 0;
	margin-right: 10px;
	min-width: 120px;
}

/* login page */
.login-page{
	min-height: calc(100% - 370px);
	margin-top: 50px;
}
.login-page label{
	
	margin-top: 20px;
}
.login-page input[type='text'], .login-page input[type='password']{
	margin-left: 0;
	width: 100%;
}
.login-page input[type='submit']{
	width: 100%;
	-webkit-appearance: none;
	background-color: #AD171C;
	padding: 5px;
	border:0;
	color: #FFF;
	cursor: pointer;
	margin-top: 10px;
}
.login-page a{
	color: #AD171C;
}

/* voting page */
.vote-body{
	min-height: 100%;
}
.body-grey{
	background-color: #F5F5F5;
}

.vote-body h1{
	font-size: 45px;
}

.vote-body .item{
	width: 100%;
	border-top: 1px solid #8F9B9F;
	padding: 15px 0px;
	font-weight: bold;
}

.vote-body .description{
	width: 100%;
	border-top: 1px solid #8F9B9F;
	border-bottom: 1px solid #8F9B9F;
	padding: 30px 0px;
}

.vote-body .item a{
	color: #000;
}

.vote-body .item a:hover{
	color: #CE181E;
}

.vote-body .item .square{
	width: 19px;
	height: 19px;
	border: 2px solid #000;
	float: left;
	margin-right: 15px;
	margin-top: 3px;
}
.vote-body label{
	font-weight: bold;
}
.containerCandidate form div{
	float: left;
}
.vote-body .vote-btn{
	text-align: center;
}
.vote-body .btn{
	margin: 30px auto;
	border-radius: 0;
	text-transform: uppercase;
	width: 300px;
}
.vote-submit{
	width: 100%;
	text-align: center;
}
.vote-submit div{
	width: 100%;
}
.vote-submit button{
	width: 200px !important;

}
.blanco{
	color: #CCC;
}

/* modal */
.modal-footer .btn{
	width: 120px !important;
}

.modal-body h3{
	font-family: 'Roboto Slab', sans-serif;
	font-size: 14pt;
	color: #CE181E;
}

/* candidates */
.candidates{
	width: 100%;
}
.candidate{
	width: calc(25% - 15px);
	float: left;
	background-color: #FFF;
	height: 365px;
	margin-left: 20px;
	margin-bottom: 20px;
}
.candidate.summary-candidate{
	height: 250px !important;
}

.candidate.summary-candidate .text{
	height: auto !important;
}
.candidate.summary-candidate button{
	margin: 0 auto;
}

.candidate .imageFallback{
	background-color: #F5F5F5;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin-left: calc(50% - 50px);
	margin-top: 20px;
}
.candidate .imageFallback img{
	border-radius: 50%;
	width: 100%;
	}
.candidate .text{
	width: 100%;
	float: left;
	height: 150px;
	padding: 0px 10px;
	text-align: center;
	margin-top: 20px;
}
.candidate button{
	width: 100% !important;
	color: #CE181E;
	border: 0px;
	font-weight: normal;
	background-color: #FFF;
}

@media (min-width: 991.98px) {
.candidates .candidate:first-child, .candidates .candidate:nth-child(5n){
   margin-left: 0px;
} 
}

@media (max-width: 991.98px) {
	.candidate{
		width: calc(33% - 30px);
	}
	.candidates .candidate:first-child, .candidates .candidate:nth-child(4n){
   margin-left: 0px;
} 
	
}
@media (max-width: 767.98px) {
	.candidate{
		width: 100%;
		margin-left: 0;
		height: 100px;
	}

	.candidate .imageFallback{
		width: 40px;
		height: 40px;
		margin-left: 15px;
		margin-top: 10px;
		float: left;
	}

	.candidate .text{
		width: calc(100% - 210px);
		margin-left: 15px;
		text-align: left;
		height: auto;
		margin-top: 10px;
	}

	.candidate button{
		float: right;
		width: 70px !important;
		margin-top: 65px !important;
	}
	
}

@media (max-width: 480px) {
		.candidate{
		width: 100%;
		margin-left: 0;
		height: 180px;
	}

	.candidate .imageFallback{
		width: 40px;
		height: 40px;
		margin-left: 15px;
		margin-top: 10px;
		float: left;
	}

	.candidate .text{
		width: calc(100% - 115px);
		margin-left: 15px;
		text-align: left;
		height: auto;
		margin-top: 10px;
		height: 120px;
	}

	.candidate button{
		float: right;
		margin-top: 15px !important;
		margin-right: 35px !important;
	}

	}

.candidate input[type='checkbox']{
	display: none;
}
.candidate label{
	cursor: pointer;
}
.candidate .fakeCheckbox{
	width: 30px;
	height: 30px;
	background-color: #000;
	float: right;
}
.candidate .fakeCheckbox .circle{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #FFF;
	margin: 5px;
}
.candidate input[type='checkbox']:checked ~ .fakeCheckbox .circle{
	background-color: #CE181E;
}

.candidate button:hover, .candidate button:focus, .candidate button:active, .candidate button:visited {
  background-color: #FFF !important;
  border: 0px;
  color: #CE181E;
}

/* lists */
.lists .col-lg-4{
	margin-bottom: 20px;
}
.lists label{
	display: block;
	font-weight: normal;
	cursor: pointer;
}
.lists .title{
	width: 100%;
	background-color: #CE181E;
	color: #FFF;
	padding: 5px 10px;
}
.lists .description-link{
	width: 100%;
	color: #BCC4C5;
	font-size: 13px;
	padding: 5px 0px;
	border-bottom: 1px solid #BCC4C5;
	cursor:pointer;
}
.lists .list-candidate{
	width: 100%;
	background-color: #FFF;
	margin-top: 10px;
	float: left;
	height: 60px;
}
.lists .list-candidate .image{
	width: 60px;
	height: 60px;
	float: left;
	background-color: #C2BEBE;
}
.lists .list-candidate .image img{
	float: left;
	width: 60px;
	height: 60px;
}

.lists .list-candidate .text{
	float: left;
	width: calc(100% - 100px);
	margin-left: 10px;
	margin-top: 2px;
	font-size: 13px;
}

.lists .list-candidate .fakeCheckbox{
	width: 30px;
	height: 30px;
	background-color: #000;
	float: right;
	margin-top: 30px;
}
.lists .list-candidate .fakeCheckbox .circle{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #FFF;
	margin: 5px;
}
.lists .list-candidate input[type='checkbox']{display: none;}
.lists .list-candidate input[type='checkbox']:checked ~ .fakeCheckbox .circle{
	background-color: #CE181E;
}

/* page bottom */
.bottom{
	background-color: #000;
	color: #384353;
	text-align: center;
	padding: 20px 0;
	font-family: 'Montserrat';
	font-size: 14px;
	font-weight: bold;
}

.bottom a{
	color: inherit;
}

.bottom .btn{
	border-radius: 0;
	text-transform: uppercase;
	color: #76797A;
	font-family: 'Roboto Slab';
	font-size: 12px;
	padding: 15px;
	width: 200px;
	margin-right: 30px;
}
.address{
	color: #FFF;
	font-weight: normal;
	font-size: 12px;
}

.address a{
	color: inherit;
}

/* buttons */
.btn{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}
.btn-primary{
	background-color: #CE181E;
	border-color: #CE181E;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited {
  background-color: #AD171C !important;
  border-color: #AD171C !important;
}

.navbar-border{
	border-bottom: 1px solid #BCC4C5;
}

.navbar-light .navbar-nav .nav-link{
	color:#FFF;
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus{
	color:#FFF;
}

.btn-secondary{
	background-color: #363D41;
	border-color: #363D41;
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: #1A1E21;
  border-color: #1A1E21;
}