/*
 * One Productions Template
 * Copyright 2016 We Are Human
 * Theme Styles - About 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 {
margin-bottom: 300px;
}

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

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

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

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

/* ABOUT MAIN */

#about-main {
margin-top: 100px;
margin-bottom: 50px;
}

.about-video {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: -100%;
width: 100%;
min-height: 500px;
background: #bbb;
z-index: 100;
display: block;
}

.about-video .video-cover {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
}

.about-video .video-cover .inner {
position: relative;
text-align: center;
padding: 70px 0;
}

.about-video .video-cover .play-button img {
position: relative;
text-align: center;
margin: 0 auto;
display: block;
width: 140px;
opacity: 1;

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

.about-video .video-cover .play-button img:hover {
opacity: 0.8;
}

.about-video .video-cover .video-logo {
display: inline-block;
position: relative;
background: #fff;
border: 1px solid #fff;
margin: 0 auto;
display: block;
margin-top: 30px;
margin-bottom: 30px;
width: 150px;
}

.about-video .video-cover a {
font-family: 'Droid Serif', serif;
font-size: 26px;
line-height: 1.5;
color: #fff;
}

.about-video .video-cover a:hover {
text-decoration: underline;
}

.about-main-text{
margin-top: 50px;
column-count:2; -moz-column-count:2; -webkit-column-count:2;
column-gap:40px; -moz-column-gap:40px; -webkit-column-gap:40px;
}

#about-main p {
font-family: 'Muli', sans-serif;
font-size: 18px;
line-height: 1.5;
color: #333;
}

/* PROFILES */

#profiles {
text-align: center;
margin: 80px 0;
}

#profiles h2 {
font-family: 'Droid Serif', serif;
font-size: 48px;
font-weight: 600;
line-height: 1.5;
color: #333;
text-transform: lowercase;
}

/* Profile pic */

.profile-thumbnail {
margin-bottom: 30px;
}

.profile-pic {
width: 100%;
height: 260px;
padding: 0px;
}

.profile-pic a {
position: absolute;
background: rgba(208, 11, 27, 0.8);
left: 10%;
top: 5%;
width: 80%;
height: 90%;
text-align: center;
color: #fff;
text-decoration: none;
cursor: pointer;
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);

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

.profile-pic a:hover {
color: #fff;
text-decoration: none;
}

.profile-pic a h3 {
margin: 90px 5% 0 5%;
text-transform: uppercase;
font-family: 'Source Sans Pro', sans-serif;
font-size: 22px;
font-weight: 500;
}

.profile-pic a h4 {
margin: 5px 5% 0 5%;
font-family: 'Muli', sans-serif;
font-size: 14px;
}

.profile-pic a h3, .profile-pic a h4 {
width: 90%;
}

.profile-pic a h3:hover, .profile-pic a h4:hover {
color: #fff;
}

.profile-pic:hover a{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

.profile-pic:hover a h3, .profile-pic:hover a h4{
-webkit-transition: scale(1);
-moz-transition: scale(1);
transition: scale(1);
opacity: 1;
}

/* Profile bio */

.profile-bio {
display: none;
margin: 0px 0;
}

.profile-bio img {
width: 50%;
height: auto;
position: relative;
float: left;
}

.profile-bio-text {
width: 50%;
height: auto;
position: relative;
/* Vertical center via JS */
float: left;
padding-left: 30px;
color: #333;
text-align: left;
font-size: 18px;
}

.profile-bio-text .inner {
position: absolute;
}

.profile-bio-text h3 {
text-transform: uppercase;
font-family: 'Source Sans Pro', sans-serif;
font-size: 22px;
font-weight: 500;
margin-bottom: 10px;
}

.profile-bio-text h4 {
font-size: 18px;
margin-bottom: 20px;
}

#profile-bio-container {
position: relative;
display: inline-block;
width: 100%;
}

#profile-bio-container .close-button {
position: absolute;
width: 30px;
height: 30px;
top: 0;
right: 0;
cursor: pointer;
opacity: 0.8;
z-index: 10;
display: none;
}

#profile-bio-container .close-button:hover {
opacity: 1;
}

#profile-bio-container .close-button:before, #profile-bio-container .close-button:after {
position: absolute;
content: "";
width: 25px;
height: 1px;
top: 50%;
left: 0;
margin-top: -1px;
background-color: #000;
}

#profile-bio-container .close-button:before {
-webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

#profile-bio-container .close-button:after {
-webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}


/* MAXIMS */

#maxims {
text-align: center;
margin: 30px 0;
}

#maxims p:first-child {
font-family: 'Muli', sans-serif;
font-size: 18px;
margin-bottom: 100px;
text-align: center;
}

.maxims-chain-image{
float: right;
}

.maxim-steps  h3 {
font-family: 'Droid Serif', serif;
font-size: 32px;
font-weight: 600;
color: #333;
text-align: left;
}

.maxim-steps  p {
font-family: 'Muli', sans-serif;
font-size: 14px;
font-weight: 500;
text-align: left;
margin-bottom: 70px;
width: 75%;
}

.maxim-steps img {
display: none;
}


/* OFFICE */

.office-banner {
position: relative;
width: 100%;
height: 600px;
}

.office-banner .section-angle {
top: -1px;
}

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

.office-shots {
position: relative;
padding: 100px 0 150px 0;
background-color: #c02d39;
background-image: url('../images/backgrounds/red-stripe-repeat.jpg');
background-repeat: repeat;
}

.office-shots .section-angle {
top: -99px;
}

.office-shots .section-angle polygon {
    fill: rgba(212, 52, 65, 1);
}

.office-shots .section-angle2 {
top: auto;
bottom: -99px;
}

.office-shots .section-angle2 polygon {
    fill: rgba(212, 52, 65, 1);
}

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

.office-shots .blend2 {
display: block;
position: absolute;
width: 100%;
height: 300px;
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));
}

.office-shots-inner {
display: table;
width: 100%;
}

.office-shots-inner .left-col {
display: table-cell;
width: 100%;
}

.office-shots-inner .left-col img {
display: block;
width: 100%;
padding-right: 15px;
}

.office-shots-inner .left-col img:first-child{
margin-bottom: 30px;
}

.office-shots-inner .right-col {
display: table-cell;
float: none;
}





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

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

/* BANNER */

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

/* ABOUT MAIN */

#about-main {
margin-top: 100px;
margin-bottom: 50px;
}

.about-video {
width: 80%;
min-height: 400px;
}

.about-video .video-cover .inner {
padding: 60px 0;
}

.about-video .video-cover .play-button img {
width: 100px;
opacity: 1;
}

/* MAXIMS */

.maxim-steps  h3 {
font-size: 28px;
}

.maxim-steps  p {
width: 68%;
}

/* OFFICE SHOTS */

.office-shots {
padding: 50px 0 50px 0;
}

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

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

/* BANNER */

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

/* PROFILES */

#profiles {
margin: 40px 0;
}

/* Profile pic */

.profile-pic {
height: 212px;
}

.profile-pic a h3 {
margin: 70px 5% 0 5%;
}

/* MAXIMS */

.maxim-steps  p {
width: 75%;
margin-bottom: 60px;
}

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

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

/* BANNER */

#banner .container {
padding: 120px 0 80px 0;
text-align: center;
margin-bottom: 200px;
}

/* ABOUT MAIN */

#about-main {
margin-top: 100px;
margin-bottom: 50px;
}

.about-video {
left: 5%;
right: 5%;
bottom: -100%;
width: 90%;
min-height: 400px;
}

.about-video .video-cover .inner {
padding: 50px 20px;
}

.about-video .video-cover .play-button img {
width: 100px;
}

.about-video .video-cover a {
font-size: 24px;
}

#about-main p {
font-family: 'Muli', sans-serif;
font-size: 18px;
line-height: 1.5;
color: #333;
}

/* PROFILES */

#profiles h2 {
font-size: 36px;
}

/* Profile pic */

.profile-pic {
height: 345px;
}

.profile-pic a h3 {
margin: 130px 5% 0 5%;
}

/* Profile bio */

.profile-bio img {
width: 200px;
display: block;
float: left;
clear: both;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 50%;
}

.profile-bio-text {
position: relative;
float: left;
width: 70%;
margin: 0 15%;
/* Vertical center via JS */
float: left;
padding-left: 0px;
display: inline-block;
}

.profile-bio-text .inner {
position: relative;
float: left;
width: 100%;
}

.profile-bio-text h3 {
text-align: center;
}

.profile-bio-text h4 {
text-align: center;
}

#profile-bio-container {
margin-top: 50px;
}


/* MAXIMS */

.maxim-steps  p {
width: 85%;
margin-bottom: 40px;
}

.maxim-steps img {
display: none;
}


/* OFFICE */

.office-banner {
height: 500px;
}

.office-shots {
padding: 40px 0 50px 0;
}

.office-shots .section-angle {
top: -49px;
}

.office-shots .section-angle2 {
top: auto;
bottom: -49px;
}

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

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

/* BANNER */

#banner .container {
margin-bottom: 180px;
}

#banner p {
width: 90%;
margin-left: 5%;
}

/* ABOUT MAIN */

#about-main {
margin-top: 100px;
margin-bottom: 50px;
}

.about-video {
left: 5%;
right: 5%;
bottom: -100%;
width: 90%;
min-height: 350px;
}

.about-video .video-cover .inner {
padding: 40px 20px;
}

.about-video .video-cover a {
font-size: 20px;
}

.about-main-text{
margin-top: 50px;
column-count:1; -moz-column-count:1; -webkit-column-count:1;
column-gap:0px; -moz-column-gap:0px; -webkit-column-gap:0px;
}

/* PROFILES */

/* Profile pic */

.profile-thumbnail {
margin-bottom: 20px;
width: 50%;
height: 200px;
padding: 0 10px;
}

.profile-pic {
width: 100%;
height: 100%;
padding: 0px;
}

.profile-pic a h3 {
margin: 70px 5% 0 5%;
}

/* Profile bio */

.profile-bio-text {
width: 90%;
margin: 0 5%;
}

/* MAXIMS */

#maxims {
text-align: center;
margin: 80px 0 50px 0;
}

#maxims p:first-child {
margin-bottom: 50px;
}

.maxims-chain-image{
display: none;
}

.maxim-steps  h3 {
text-align: center;
}

.maxim-steps  p {
width: 70%;
margin: 0 15%;
margin-bottom: 50px;
text-align: center;
}

.maxim-steps img {
display: block;
float: none;
margin: 0 auto;
max-height: 100px;
max-width: 200px;
}

/* OFFICE */

.office-shots-inner {
display: block;
width: auto;
}

.office-shots-inner .left-col {
display: block;
width: 100%;
}

.office-shots-inner .left-col img {
display: block;
width: 100%;
padding-right: 0px;
margin-bottom: 20px!important;
}

.office-shots-inner .right-col {
display: block;
float: none;
height: 500px;
margin: 0 2%;
width: 96%;
}

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

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

/* BANNER */

#banner .container {
margin-bottom: 80px;
padding: 80px 0 80px 0;
}

#banner p {
width: 90%;
margin-left: 5%;
line-height: 1.3;
}

/* ABOUT MAIN */

#about-main {
margin-top: 100px;
margin-bottom: 50px;
}

.about-video {
min-height: 250px;
}

.about-video .video-cover .inner {
padding: 20px;
}


.about-video .video-cover .play-button img {
width: 60px;
}

.about-video .video-cover .video-logo {
height: 60px;
width: auto;
margin-top: 12px;
margin-bottom: 12px;
}

.about-video .video-cover a {
font-size: 18px;
width: 90%;
left: 5%;
}

/* PROFILES */

#profiles {
margin: 30px 0;
}

#profiles h2 {
font-size: 32px;
font-weight: 600;
}

.profile-pic a h3 {
margin: 50px 5% 0 5%;
}

/* MAXIMS */

#maxims {
margin: 80px 0 0 0;
}

.maxim-steps  h3 {
font-size: 24px;
}

/* OFFICE */

.office-shots-inner .right-col {
height: 400px;
margin: 0 5%;
width: 90%;
}

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