html, body, p, h1, h2, h3, h4, h5, h6, ul, li, a, section, div, header, footer {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}

body {
font-size: 16px;
line-height: 1.5;
}

html,body{
  margin: 0;
  padding: 0;
}

/*nav*/
nav {
	width: 100%;
	background: #4C91FF;
	height: 100px;
}

clear{
	clear: both;
}

.left-nav{
	text-align: right;

}

.right-nav{
    text-align: left;
}

[class*=-nav]{
	font-size: 1em;
    float: left;
    width: calc(50% - 100px);
	color: white;
	position: relative;
    line-height: 100px;

}

ul{
	margin: 0;
	padding: 0;
}
ul li {
	display: inline;
	list-style-type: none;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-size: 20px;
	padding: 0 25px 0 50px;
    color: white;
    text-decoration: none;
}

a {
    text-decoration: none;
    color: white;
}

#logo {
    margin-top: -45px;
    float: left;
}

header {
	width: 100%;
	height: 55vh;
	background-color: #D53232;
}

article {
	width: 70%;
	padding: 15vh 15% 0 15%;
	height: 70vh;
	}
	
#down1 {
	background-color: #4C91FF;
}
	
div.direction {
	width: 100%;
	padding-right: 15%;
	height: 15vh;
}

img.arrow {
	float: right;
	width: 50px;
	height: auto;
	padding-top: 30px;
}

img.arrow:hover {
	opacity: .7;
}

img.arrow_up {
	position: relative; 

	width: 50px;
	height: auto;
}

img.arrow_up:hover {
	opacity: .7;
}

#down > div {
	width: 49%;
	padding: 0 20px;
	display: inline-block;
	vertical-align: top;
	}
	
#down img {
	width: 100%;
	height: auto;
	}
	
#down p {
	padding-top: 50px;
	}

li.list {
	color: #D53232; 
	display: block;
	font-size: 1.75em;
	width: 85%;
	line-height: 1.5;
	padding: 15px 0;
	padding-left: 10%;
}

li p {
	font-size: 4em;
	color: #D53232;
	display: inline;
	line-height: .75;
	}

h1 {
	padding-top: 20vh;
	color: white;
	text-align: center;
	font-size: 4em;
	}
	
h2 {
	font-size: 5em;
	color: #D53232;
}

h3 {
	font-size: 3em;
	color: white;
}

h4 {
	font-size: 3em;
	color: #4C91FF;
}

h5 {
	font-size: 3em;
	color: #4C91FF;
	text-align: center;
}

p.red {
	font-size: 1.75em;
	color: #D53232;
}

p.blue {
	font-size: 1.75em;
	padding-bottom: 30px;
	color: #4C91FF;
}

article .responsive_pic {
	width: 70%;
	height: auto;
	}

div.photo {
display: inline-block;
padding: 0 10px;
width: 19%;
}

img.republican {
width: 100%;
height: auto;
border: 3px solid #D53232;
opacity: .7;
}

img.democrat {
width: 100%;
height: auto;
border: 3px solid #4C91FF;
opacity: .7;
}

img.democrat:hover, img.republican:hover {
opacity: 1;
}

.the_candidates {
width: 70%;
padding-top: 50px;
height: 70vh;
margin: 0 auto;
}

div.photo {

}

div.photo:hover {
    -webkit-animation: bounce .8s;
    animation: bounce .8s;
display: inline-block;
    }

/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px); } }
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0); }
  40% {
    -moz-transform: translateY(-30px); }
  60% {
    -moz-transform: translateY(-15px); } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px); } }

p.rep {
	background-color: #D53232;
	height: 30vh;
	padding: 5vh 10%;
	color: white;
	border-radius: 25px;
	width: 100%;
	}
	
p.dem {
	background-color: #4C91FF;
	height: 30vh;
	padding: 5vh 10%;
	color: white;
	border-radius: 25px;
	width: 100%;
}

p.trump {
display: none;
}

p.clinton {
display: none;
}

p.cruz {
display: none;
}

p.sanders {
display: none;
}

p.kasich {
display: none;
}

.donald:hover ~ .trump {
display: block;
}

.hillary:hover ~ .clinton {
display: block;
}

.ted:hover ~ .cruz {
display: block;
}

.bernie:hover ~ .sanders {
display: block;
}

.john:hover ~ .kasich {
display: block;
}

@media all and (max-width: 1350px) {
div.photos {
height: 400px;
width: 100%;
background-color: yellow;
}

}

@media all and (max-width: 1000px) {


body {
	font-size: 13px;
}
}

@media all and (max-width: 700px) {



body {
	font-size: 11px;
	}
	
	div.photo {
display: none;
}

.the_candidates {
height: auto;
}
	
p.rep, p.dem  {
width: 100%;
margin: 5vh 0;
display: block;
}
	}
	
@media all and (max-width: 550px) {


body {
	font-size: 9px;
	}
	}

@media all and (max-width: 1000px) {

ul li{
	display: block;
}

[class*=-nav]{
	line-height: 50px;
	text-align: center;
  margin: 0;

}

.right-ul{
  text-align: right;
  padding: 0;
  margin: 0;
padding: 0 .25em 0 0 ;
}

.left-ul{
  text-align: left;
  padding: 0;
padding: 0 0 0 .25em;
}

[class*=-ul] li{
  margin: 0;
}

.left-ul li{
padding: 0;
}

.right-ul li{
padding: 0;
}

}

@media all and (max-width: 560px) {
  ul li{
  	font-size: 14px;
  }

  nav img{
    width: 100px;
    height: auto;
  }
  #logo{
    margin-top: 45px;
  }

  [class*=-nav] {
    width: calc(50% - 50px);
  }
}
	

	}