/*
 * One Productions Template
 * Copyright 2016 We Are Human
 * Theme Styles - Services 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: 220px 0 80px 0;
text-align: center;
}

#banner h2 {
position: relative;
font-family: 'Source Sans Pro', sans-serif;
font-size: 28px;
line-height: 1.3;
margin-bottom: 40px;
}

#banner h2:before {
content: "";
position: absolute;
width: 100px;
height: 2px;
background: #fff;
left: -100px;
top: 50%;
}

#banner h2:after {
content: "";
position: absolute;
width: 100px;
height: 2px;
background: #fff;
right: -100px;
top: 50%;
}

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

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

/* OUR SERVICES */

#our-services {
background-color: #ebebeb;
padding: 30px 0 120px 0; 
text-align: center;
}

#our-services h2 {
font-size: 48px;
text-transform: lowercase;
font-weight: 600;
color: #333;
margin-bottom: 100px;
text-shadow: none;
}

#our-services img {
width: 180px;
margin-bottom: 20px;
border-radius: 50%;

-webkit-transform: scale(0.95);
-moz-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}

#our-services  h4 {
font-size: 28px;
font-weight: 600;
color: #666;
text-transform: uppercase;
margin-bottom: 40px;
}

#our-services a:hover img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

#our-services a:hover h4 {
color: #d00b1b;
}

#our-services  p {
font-family: 'Muli', sans-serif;
font-size: 18px;
font-weight: 600;
color: #333;
margin-top: 20px;
}


/* SPLIT SECTIONS */

.split-section {
background: #f0f0f0;
}

.split-section-text {
padding: 100px;
padding-left: 15%;
}

.split-section h3 {
font-family: 'Droid Serif', serif;
font-size: 48px;
color: #666;
text-transform: lowercase;
font-weight: 600;
margin-bottom: 30px;
}

.split-section p {
font-family: 'Muli', sans-serif;
font-size: 20px;
font-weight: 400;
color: #333;
margin-bottom: 50px;
}

.split-section 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;
}

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

.split-section ul li a {
color: #333;
}

.split-section ul li a:hover {
text-decoration: underline;
}

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

.split-section .button {
padding-left: 40px;
padding-right: 40px;
}

.split-section:nth-child(odd) {
color: #fff!important;
background-color: #c02d39;
background-image: url('../images/backgrounds/red-stripe-repeat.jpg'); 
background-repeat: repeat;
}

.split-section:nth-child(odd) .split-section-text {
padding: 100px;
padding-right: 15%;
}

.split-section:nth-child(odd) h3, .split-section:nth-child(odd) p {
color: #fff!important;
}

.split-section:nth-child(odd) ul li {
display: inline-block;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
color: #fff;
margin-bottom: 8px;
}

.split-section:nth-child(odd) ul li a {
color: #fff;
}

.split-section:nth-child(odd) ul li img {
background: #fff;
}


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

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

/* BANNER */

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

#banner h2 {
font-size: 24px;
}

/* OUR SERVICES */

#our-services {
padding: 10px 0 50px 0; 
}

#our-services h2 {
margin-bottom: 50px;
}

#our-services img {
width: 150px;
}

#our-services  h4 {
font-size: 26px;
margin-bottom: 30px;
}

/* SPLIT SECTIONS */

.split-section h3 {
font-size: 36px;
}

.split-section-text {
padding: 40px;
padding-left: 8%;
}

.split-section:nth-child(odd) .split-section-text {
padding: 40px;
padding-right: 8%;
}

.split-section p {
font-size: 18px;
margin-bottom: 30px;
}

.split-section ul {
margin-bottom: 20px;
}

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

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

/* BANNER */

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

/* OUR SERVICES */

#our-services {
padding: 10px 0 40px 0; 
}

#our-services h2 {
margin-bottom: 50px;
}

#our-services  h4 {
font-size: 22px;
margin-bottom: 30px;
}

/* SPLIT SECTIONS */

.split-section-text {
padding: 40px;
}

.split-section ul li {
font-size: 18px;
font-weight: 400;
margin-bottom: 12px;
}

.split-section ul li img {
width: 32px;
height: 32px;
}

.split-section:nth-child(odd) .split-section-text {
padding: 40px;
}

.split-section:nth-child(odd) ul li {
font-size: 18px;
font-weight: 400;
margin-bottom: 12px;
}

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


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

/* BANNER */

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


#banner h2 {
font-size: 20px;
line-height: 1.3;
margin-bottom: 40px;
}

#banner h2:before {
display: none;
}

#banner h2:after {
display: none;
}

/* SPLIT SECTIONS */

.split-section {
display: block;
}

.split-section > div {
display: block;
}

.split-section-image {
height: 350px;
}

.split-section .split-section-text {
padding: 20px 40px 50px 40px;
}

.split-section:nth-child(odd) .split-section-text {
padding: 20px 40px 50px 40px;
}

.split-section h3 {
text-align: center;
}

.split-section p {
text-align: center;
}

.split-section ul {
margin-bottom: 40px;
}

.split-section ul li {
display: block;
}

.split-section:nth-child(odd) ul li {
display: block;
}

.split-section .button {
margin: 0 auto;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

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

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

/* BANNER */

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

#banner h2 {
font-size: 22px;
}

/* OUR SERVICES */

#our-services {
padding: 10px 5% 20px 5%; 
}

#our-services h2 {
font-size: 42px;
}

#our-services img {
width: 130px;
margin-bottom: 20px;
}

#our-services  h4 {
font-size: 20px;
}

#our-services  p {
margin-top: 50px;
}


/* SPLIT SECTIONS */

.split-section-image {
height: 300px;
}

.split-section h3 {
font-size: 32px;
}

.split-section-text {
position: relative;
}

.split-section ul {
position: relative;
column-count:1; -moz-column-count:1; -webkit-column-count:1;

left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

.split-section .button {
margin: 0 auto;
left: auto;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}

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

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

/* BANNER */

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

/* OUR SERVICES */

#our-services {
padding: 10px 5% 20px 5%; 
}

#our-services h2 {
font-size: 32px;
}

#our-services img {
width: 80px;
margin-bottom: 10px;
}

#our-services  h4 {
font-size: 18px;
}

#our-services  p {
margin-top: 20px;
}

/* SPLIT SECTIONS */

.split-section-image {
height: 200px;
}

.split-section h3 {
font-size: 28px;
margin-bottom: 20px;
}

.split-section-text {
padding: 20px 5% 50px 5%;
}

.split-section:nth-child(odd) .split-section-text {
padding: 20px 5% 50px 5%;
}

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