/*
 * One Productions Template
 * Copyright 2016 We Are Human
 * Theme Styles - Blog Page
 * Dependencies:
 */

/*
   Google Fonts:
   
   Top level headings: font-family: 'Droid Serif', serif;
   Body: font-family: 'Source Sans Pro', sans-serif;
   Mega-menu: font-family: 'Muli', sans-serif;
 */
 
 /*
   Theme colours:
   
   Red: 	#d00b1b;
   Bg red: 	#ce313e; -> Fallback for tile repeat
   Black: 	#030f0d;
   White: 	#fff;
 */


/* BANNER */

#banner .container {
padding: 200px 0 100px 0;
text-align: center;
}

#banner p {
font-family: 'Muli', sans-serif;
font-size: 26px;
line-height: 1.3;
color: #fff;
margin-bottom: 40px;
}

#banner .section-angle {
bottom: -1px;
}

#banner .section-angle polygon {
    fill: #e5e5e5;
}

.filter-label {
font-size: 16px;
text-transform: uppercase;
}

.filter-buttons {
float: left;
text-align: left;
}

.filter-buttons .button {
font-size: 16px;
padding: 10px;
margin: 0 5px 8px 0;
}

/* BLOG MAIN */

#blog-main {
padding: 40px 0 50px 0;
background: #e5e5e5;
background: -webkit-linear-gradient(#e5e5e5, #ffffff);
background: -moz-linear-gradient(#e5e5e5, #ffffff);
background: linear-gradient(#e5e5e5, #ffffff);
}

#blog-main .section-angle {
bottom: -99px;
}

#blog-main .section-angle polygon {
    fill: #fff;
}


/* SIGNUP */

#signup {
text-align: center;
padding: 200px 0 40px 0;
background-color: #c02d39;
background-image: url('../images/backgrounds/red-stripe-repeat.jpg'); 
background-repeat: repeat;
}

#signup p {
font-family: 'Droid Serif', serif;
font-size: 42px;
color: #fff;
line-height: 1.3;
margin-bottom: 40px;
position: relative;
display: inline-block;
width: 100%;
}

#signup form {
text-align: center;
position: relative;
display: inline-block;
}

#signup form input {
position: relative;
display: inline-block;
width: 200px;
background: #fff;
padding: 13px;
font-size: 14px;
}

#signup form input.button {
display: block;
margin: 10px auto 20px auto;
}

#signup form .button {
clear: both;
width: 200px;
background: rgba(255,255,255,0);
padding: 13px;
font-size: 16px;
font-weight: 600;
background: transparent;
margin-bottom: 20px;
}

#signup form .button:hover {
background: rgba(255,255,255,0.3);
}

#signup form p {
position: relative;
width: 100%;
color: #fff;
font-size: 26px !important;
margin-top: 20px;
}

#signup .section-angle {
bottom: -99px;
}

#signup .section-angle polygon {
    fill: #d43441;
}

#signup .blend {
position: absolute;
width: 100%;
height: 200px;
bottom: 0px;
background: -webkit-linear-gradient(bottom, rgba(212, 52, 65, 1), rgba(212, 52, 65, 0));
background: -moz-linear-gradient(bottom, rgba(212, 52, 65, 1), rgba(212, 52, 65, 0));
background: -ms-linear-gradient(bottom, rgba(212, 52, 65, 1), rgba(212, 52, 65, 0));
background: -o-linear-gradient(bottom, rgba(212, 52, 65, 1), rgba(212, 52, 65, 0));
background: linear-gradient(bottom, rgba(212, 52, 65, 1), rgba(212, 52, 65, 0)); 
display: block;
}



/*********** MEDIA QUERIES **************/

@media screen and (max-width: 1500px) {

/* BANNER */

#banner .container {
padding: 180px 0 100px 0;
text-align: center;
}

#banner p {
font-size: 24px;
line-height: 1.3;
}

/* SIGNUP */

#signup p {
font-size: 36px;
}

} /* end max-width: 1500px */

@media screen and (max-width: 991px) {

/* BANNER */

#banner .container {
padding: 120px 0 80px 0;
}

#banner p {
font-size: 22px;
margin-bottom: 30px;
}

.filter-buttons {
margin-top: 20px;
text-align: center;
}

/* BLOG MAIN */

#blog-main .section-angle {
bottom: -49px;
}

/* SIGNUP */

#signup p {
padding: 0px 5%;
}

#signup .section-angle {
bottom: -49px;
}

} /* end max-width: 991px */

@media screen and (max-width: 767px) {


/* BANNER */

#banner .container {
padding: 120px 5% 80px 5%;
}

/* BLOG MAIN */

#blog-main {
padding: 40px 0 10px 0;
}

/* SIGNUP */

#signup p {
font-size: 30px;
margin-bottom: 40px;
}

} /* end max-width: 767px */

@media screen and (max-width: 450px) {


/* BANNER */

#banner .container {
padding: 80px 5% 80px 5%;
}


#banner p {
font-size: 18px;
margin-bottom: 20px;
}

/* SIGNUP */

#signup {
padding: 100px 0 40px 0;
}

#signup p {
font-size: 24px;
margin-bottom: 20px;
}

#signup form p {
font-size: 20px !important;
}

} /* end max-width: 450px */