/*
 * One Productions Template
 * Copyright 2016 We Are Human
 * Theme Styles - Sectors Single 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: 20px;
line-height: 1.3;
color: #fff;
margin-bottom: 20px;
}

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

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

/* SECTORS SINGLE */

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

#sectors-single p {
font-family: 'Muli', sans-serif;
font-size: 14px;
color: #333;
padding-right: 70px;
}

#sectors-single p:first-child {
font-size: 20px;
}

#sectors-single ul {
list-style-type: none;
padding: 0;
column-count:2; -moz-column-count:2; -webkit-column-count:2;
column-gap:5px; -moz-column-gap:5px; -webkit-column-gap:5px;
margin-bottom: 70px;
}

#sectors-single ul li {
display: inline-block;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
color: #333;
margin-bottom: 8px;
width: 100%;
}

#sectors-single ul li img {
width: 36px;
height: 36px;
background: #404040;
border-radius: 50%;
padding: 1px;
float: left;
clear: none;
margin-right: 8px;
}

/* WORK WITH */

#work-with {
background: #fff;
text-align: center;
padding: 0 0 100px 0;
}

#work-with  h2 {
font-family: 'Droid Serif', serif;
font-size: 48px;
color: #333;
text-transform: lowercase;
margin-bottom: 70px;
}

#work-with  .inner {
height: 150px;
}

#work-with a img {
position: absolute;
max-width: 80%;
max-height: 80%;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
-moz-transform: translateX(-50%) translateY(-50%) scale(1);
-ms-transform: translateX(-50%) translateY(-50%) scale(1);
transform: translateX(-50%) translateY(-50%) scale(1);

-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}

#work-with a:hover img {
-webkit-transform: translateX(-50%) translateY(-50%) scale(1.1);
-moz-transform: translateX(-50%) translateY(-50%) scale(1.1);
-ms-transform: translateX(-50%) translateY(-50%) scale(1.1);
transform: translateX(-50%) translateY(-50%) scale(1.1);
}

/* MORE */

#more {
background: #fff;
text-align: center;
padding: 0 15px 100px 15px;
}

#more  h2 {
font-family: 'Droid Serif', serif;
font-size: 48px;
color: #333;
margin-bottom: 70px;
text-transform: lowercase;
}


#more .work-item article {
min-height: 330px;
}

#more  .work-item article .work-overlay {
padding: 20px 20px;
}

#more .work-item article .work-overlay .play-button {
width: 70px;
}

#more .work-item article .work-overlay .button{
font-size: 16px;
padding-top: 12px;
padding-bottom: 12px;
}

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

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

/* TESIMONIAL */

#testimonial {
background-color: #333;
text-align: center;
height: 600px;
}

#testimonial .container {
padding: 200px 0 120px 0;
text-align: center;
}

#testimonial p {
font-family: 'Droid Serif', serif;
font-size: 26px;
font-style: italic;
line-height: 1.2;
color: #fff;
margin-bottom: 20px;
}

#testimonial p span {
font-weight: 700;
font-style: normal;
font-size: 38px;
}

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

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

/* BROWSE */

#browse {
background: #fff;
text-align: center;
padding: 50px 0 100px 0;
}

#browse  h2 {
font-family: 'Droid Serif', serif;
font-size: 48px;
color: #333;
margin-bottom: 70px;
text-transform: lowercase;
}

#browse .button {
background: #eb4250;
margin: 5px 3px;
}

#browse .button:hover {
background: #f25966;
}

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

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


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

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

/* SECTORS SINGLE */

#sectors-single {
padding: 50px 0 20px 0;
}

/* WORK WITH */

#work-with {
padding: 0 0 20px 0;
}

#work-with  h2 {
font-size: 42px;
}

/* MORE */

#more {
padding: 0 15px 40px 15px;
}

#more  h2 {
font-size: 42px;
}

#more .work-item article {
min-height: 300px;
}

/* TESIMONIAL */

#testimonial p span {
font-weight: 400;
}

/* BROWSE */

#browse {
padding: 30px 050px 0;
}

#browse  h2 {
font-size: 42px;
margin-bottom: 40px;
}

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

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

/* WORK WITH */

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

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

/* BANNER */

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

/* SECTORS SINGLE */

#sectors-single {
padding: 50px 0 0px 0;
}

#sectors-single p {
padding-right: 0px;
}

#sectors-single ul {
margin-bottom: 100px;
margin-top: 30px;
}

/* WORK WITH */

#work-with {
padding: 0 0 40px 0;
}

#work-with  h2 {
font-size: 40px;
margin-bottom: 40px;
}

/* MORE */

#more {
padding: 0 15px 70px 15px;
}

#more  h2 {
font-size: 40px;
}

#more .work-item article {
min-height: 280px;
}

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

/* TESIMONIAL */

#testimonial {
background-color: #333;
text-align: center;
height: 550px;
}

#testimonial p span {
font-size: 32px;
}

/* BROWSE */

#browse {
padding: 50px 0 50px 0;
}

#browse  h2 {
font-size: 40px;
margin-bottom: 50px;
}

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

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

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

/* BANNER */

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

/* SECTORS SINGLE */

#sectors-single {
padding: 50px 5% 0px 5%;
}

#sectors-single ul {
margin-bottom: 70px;
margin-top: 30px;
}

#work-with  h2 {
font-size: 32px;
}

/* MORE */

#more {
padding: 0 15px 70px 15px;
}

#more  h2 {
font-size: 32px;
}

#more .work-item article {
min-height: 300px;
}

/* TESIMONIAL */

#testimonial p {
font-size: 32px;
padding: 0 5%;
}

/* BROWSE */

#browse  h2 {
font-size: 32px;
}

#browse .button {
padding: 10px 20px;
}

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

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

/* BANNER */

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

/* SECTORS SINGLE */

#sectors-single ul {
margin-bottom: 70px;
margin-top: 50px;
column-count:1; -moz-column-count:1; -webkit-column-count:1;
}

/* WORK WITH */

#work-with  h2 {
font-size: 32px;
}

#work-with  .inner {
height: 100px;
}

/* MORE */

#more {
padding: 0;
}

#more  h2 {
font-size: 32px;
}

/* TESIMONIAL */

#testimonial {
height: auto;
}

#testimonial .container {
padding: 100px 0 80px 0;
}

#testimonial p {
font-size: 22px;
}

#testimonial p span {
font-size: 28px;
}

/* BROWSE */

#browse  h2 {
font-size: 32px;
}

#browse .button {
padding: 10px 20px;
}

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