@import url('https://fonts.googleapis.com/css?family=Raleway');


/* 
############
## NAVBAR ##
############
*/

div.navbar {
    width:100%;
    background-color: #8A8684;
}

div.navbar img.logo {
    display:inline-block;
    width:360px;
    max-width:100%;
    padding:20px;
}

div.links {
    overflow: hidden;
    display:inline-block;
}

div.links a {
    float: left;
    display: block;
    font-weight: 300;
    padding: 5px 20px 5px 20px;
    color:white;
    text-decoration: none;
    font-size: 20px;
}

div.links a:hover {
    text-shadow: 0px 0px 2px #ccc7c4;
}

div.links a.call {
    background-color: green;
    padding:5px 15px 5px 15px;
    margin:0px 20px 0px 20px;
    border-radius:40px;
}


div.links a.in-use {
    color: rgb(71, 34, 13);
    font-weight: 300;
}

/*
##############
## SIDE NAV ##
##############
*/

@media screen and (max-width: 1080px) {
    .links a:not(:first-child) {display: none;}
    .links a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 1080px) {
    .links.responsive {position: relative;}
    .links.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .links.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

  .links .icon {
      display:none;
  }

/* 
################
## header IMG ##
################
*/

.parallax-window.paral {
    min-height: 250px;
    background: transparent;
    display: table;
    width:100%;
}

.parallax-window.home {
    min-height:750px;
}

div.pop-header {
    display:table-cell;
    text-align: left;
    height:100%;
    vertical-align: middle;
}

div.pop-header h1 {
    font-size: 5em;
    padding-left:40px;
    font-family: 'Raleway', 'Sans Serif';
}

div.header {
    display:table-cell;
    text-align: center;
    height:100%;
    vertical-align: middle;
}

div.header h1 {
    font-size: 5em;
    padding-left:40px;
    font-family: 'Raleway', 'Sans Serif';
}

/* 
############
## FOOTER ##
############
*/

div.footer {
    background-color: #8A8684;
    width:100%;
    margin:0px;
    margin-top:200px;
}

div.details {
    margin: 0px;
    padding:40px;
    text-align: center;
}

div.details ul {
    list-style-type: none;
    padding:0px;
    margin:0px;
    font-family: 'Raleway', sans-serif;
}

div.details a {
    padding: 0px 20px 0px 20px;
    color:white;
    text-decoration: none;
    font-size: 16px;
}

div.details h3 {
    padding-bottom:5px;
    font-family: 'Raleway', sans-serif;
}

div.details h3:after {
    content:' ';
    display:block;
    margin:auto;
    margin-top:10px;
    width:60px;
    border:2px solid #d0d0d0;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

div.socials {
    display: inline-block;
}

div.socials a {
    display:inline-block;
    padding:5px;
    transition: .2s;
}

div.socials img {
    transition:0.2s;
}

div.socials img:hover {
    transition:0.2s;
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    
}

img.icons {
    width:40px;
}

/*
##########
## MAIN ##
##########
*/

div.main {
    max-width:1200px;
    display:block;
    margin:auto;
}

body {
    font-family: 'Raleway', 'Sans Serif';
}

/* 
###########
## MULTI ##
###########
*/

div.contain-row {
    padding-left:15px;
    padding-right:15px;
    max-width:100%;
}

div.multisection.row {
    display:table;
    max-width:100%;
    margin:0px;
}

div.multi {
    display:table-cell;
    position: relative;
}

div.multi.first {
    background-color: #A7A069;
    color:rgb(218, 218, 218);
}

div.multi.second {
    background-color: #756F52;
    color:rgb(218, 218, 218);
}

div.multi.third {
    background-color: #4F443E;
    color:rgb(218, 218, 218);
}

div.multi h1 {
    padding-bottom:20px;
}

div.multi h2 {
    font-family: 'Raleway', 'Sans Serif';
    font-size: 46px;
}

div.multi h2:before {
    content:' ';
    display:inline-block;
    height:44px;
    border:2px solid #212529;
    margin-right:14px;
    margin-bottom:-5px;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

div.multi h1:after {
    content:' ';
    display:block;
    margin-top:10px;
    width:50%;
    border:2px solid #d0d0d0;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

div.multi.info p {
    font-size:18px;
}

div.multi.info img {
    max-width:100%;
    -moz-box-shadow: 3px 3px 5px rgb(173, 173, 173);
    -webkit-box-shadow: 3px 3px 5px rgb(173, 173, 173);
    box-shadow: 3px 3px 5px rgb(173, 173, 173);
}

@media screen and (max-width: 1200px) {
    div.multi {
        padding:60px;
    }
    div.tagline img {
        display:block;
        margin:auto;
    }
    div.tagline p {
        display:block;
        margin:auto;
        text-align: center;
    }
    div.tagline p.extra {
        margin:auto;
        text-align:center;
    }
    div.tagline {
        margin:0px;
        margin-bottom:40px;
    }
}

@media screen and (min-width: 1200px) {
    div.multi {
        padding:80px;
    }
    div.tagline img {
        display:inline-block;
    }
    div.tagline p {
        display:inline-block;
        margin-top:2px;
        margin-left:10px;
    }
    div.tagline p.extra {
        margin-left:80px;
    }
    div.tagline {
        padding-left:10px;
        padding-top:20px;
    }
}

@media screen and (max-width: 1200px) {
    div.divider {
        display:none;
    }
}

@media screen and (min-width: 1200px) {
    div.divider {
        display:block;
    }
}
/* ####################### */

div.tagline img {
	height:60px;
	vertical-align:top;
}

div.tagline {
    transition:0.2s;
    display: block;
    max-width:100%;
}

div.tagline:hover {
    transition:0.2s;
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

div.tagline p {
	
    color:black;
	font-size:36px;
    
    font-family: 'Raleway', sans-serif;
}

div.tagline p.extra {
    display:block;
    font-size:18px;
    width:380px;
    max-width:100%;
}

div.taglines {
    display:block;
    margin:auto;
    border-radius:5px;
    padding:5px;
    transition:0.3s

}

div.row.section.color {
    background-image: url('images/color.jpg');
}


/* 
############
## SLANTY ##
############
*/

div.section {
    width:100%;
    margin:0px;
}

div.pair {
    padding:40px;
}

div.pair h1 {
    font-family: 'Raleway' sans-serif;
    font-size:48px;
    font-weight: 100;
}

div.pair p {
    font-family: 'Raleway' sans-serif;
    font-size:20px;
    font-weight: 200;
}

.pair-text {
    text-align:right;
    background: #8A8684;
}

div.divider {
    vertical-align: top;
    background-color: #8A8684;
    position: relative;
    padding:0px;
}

.divider svg {
    position: absolute;
    top: 0;
    height:100%;
    max-width:100%;
    margin:0px;
    padding:0px;
}

.pair-img img {
    display:block;
    max-width:70%;
    margin:auto;
}

.row {
    margin:0px;
}

.tall {
    width:100%;
    display:table;
    margin-left:-50%;
    bottom:0;
}
/*
div.zoombkg {
    background-image: url("images/paint-roller.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 20s 1;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1.2);
    }

}

/*
############
## awards ##
############
*/

div.awards {
    padding:30px;
}

div.awards img {
    max-height:300px;
    max-width:100%;
    display:block;
    margin:auto;
}

/*
#########
## HEX ##
#########
*/

#categories{
    overflow:hidden;
    width:90%;
    margin:0 auto;
}

ul#categories {
    margin-top:50px;
}

.clr:after{
    content:"";
    display:block;
    clear:both;
}

#categories li{
    position:relative;
    list-style-type:none;
    width:27.85714285714286%; /* = (100-2.5) / 3.5 */
    padding-bottom: 32.16760145166612%; /* =  width /0.866 */
    float:left;
    overflow:hidden;
    visibility:hidden;
    
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
}

#categories li:nth-child(3n+2){
    margin:0 1%;
}

#categories li:nth-child(6n+4){
    margin-left:0.5%;
}

#categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
	margin-top: -6.9285714285%;
    margin-bottom: -6.9285714285%;
    
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
}

#categories li:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{
    margin-bottom:0%;
}

#categories li *{
    position:absolute;
    visibility:visible;
}

#categories li > div{
    width:100%;
    height:100%;
    text-align:center;
    color:#fff;
    overflow:hidden;
    
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    
    -webkit-backface-visibility:hidden;
  
}

/* HEX CONTENT */

#categories li img{
    left:-100%; right:-100%;
    width: auto; height:100%;
    margin:0 auto;   
}

#categories div h1, #categories div p{
    width:100%;
    padding:0 5%;
    background-color:#008080; background-color: rgba(0, 128, 128, 0.8);
    font-family: 'Raleway', sans-serif;
    
    -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
    -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
    transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}

#categories li h1{
    bottom:110%;
    font-style:italic;
    font-weight:normal;
    font-size:1.5em;
    padding-top:100%;
    padding-bottom:100%;
    margin:0px;
}

#categories li h1:after{
	content:'';
    display:block;
    position:absolute;
    bottom:-1px; left:45%;
    width:10%;
    text-align:center;
    z-index:1;
    border-bottom:2px solid #fff;
}

#categories li p{
	padding-top:50%;
	top:110%;
	padding-bottom:50%;
}


/* HOVER EFFECT  */

#categories li div:hover h1 {
    bottom:50%;
    padding-bottom:10%;
}

#categories li div:hover p{
    top:50%;
    padding-top:10%;
}

#fork{
    position:fixed;
    top:0;
    left:0;
    color:#000;
    text-decoration:none;
    border:1px solid #000;
    padding:.5em .7em;
    margin:1%;
    transition: color .5s;
    overflow:hidden;
}

#fork:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 130%; height: 100%;
    background: #000;
    z-index: -1;
    transform-origin:0 0 ;
    transform:translateX(-100%) skewX(-45deg);
    transition: transform .5s;
}

#fork:hover {
    color: #fff;
}

#fork:hover:before {
    transform: translateX(0) skewX(-45deg);
}

@media screen and (max-width: 1080px) {
    #categories {
        display: none;
    }
    div.categories-alt {
      display: flex;
    }
}

@media screen and (min-width: 1080px) {
    .categories-alt.row {
        display: none;
    }
}


/*
###########
## ALT C ##
###########
*/

div.categories-alt {
    width:100%;
    margin:0px;
    padding:0px;
}

div.our-work {
    margin:0px;
    padding:60px 60px 0px 60px;
}

div.our-work.image img {
    display:block;
    max-width:100%;
    margin:auto;
    max-height:300px;
    -moz-box-shadow: 3px 3px 5px rgb(173, 173, 173);
    -webkit-box-shadow: 3px 3px 5px rgb(173, 173, 173);
    box-shadow: 3px 3px 5px rgb(173, 173, 173);
}

div.categories-alt h3 {
    padding-bottom:5px;
    font-family: 'Raleway', sans-serif;
    font-size:46px;
}

div.categories-alt h3:before {
    content:' ';
    display:inline-block;
    margin: 10px 10px -10px 0px;
    height:56px;
    border:2px solid #d0d0d0;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}


/*
###########
## ABOUT ##
###########
*/

div.about h3 {
    padding-bottom:5px;
    font-family: 'Raleway', sans-serif;
    font-size:46px;
}

div.about h3:before {
    content:' ';
    display:inline-block;
    margin: 10px 10px -10px 0px;
    height:56px;
    border:2px solid #d0d0d0;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

div.about {
    width:100%;
    margin:0px;
    padding:0px;
}

/*
##########
## TEAM ##
##########
*/

div.teams.row {
    max-width:100%;
    margin:0px;
}

div.team-holder {
    padding:50px 50px 0px 50px;
    position: relative;
}

div.profile-card {
    color:black;
    max-width:100%;
    height:100%;
    padding:20px;
    border-radius:5px;
    border: solid 0.5px rgb(180, 180, 180);
    box-shadow: 5px 5px 15px #888888;
    transition: 0.3s
}

div.profile-card img {
    display:block;
    margin:auto;
    padding:20px;
    border-radius: 120px;
    width:200px;
    transition: 0.3s
}

div.profile-card h1 {
    font-family: 'Raleway', 'Sans Serif';
}

div.profile-card h2 {
    font-family: 'Raleway', 'Sans Serif';
    font-size: 26px;
}

div.profile-card h2:before {
    content:' ';
    display:inline-block;
    height:30px;
    border:2px solid #212529;
    margin-right:14px;
    margin-bottom:-5px;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}

div.profile-card h1:after {
    content:' ';
    display:block;
    margin-top:2px;
    width:50%;
    border:2px solid #d0d0d0;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    transition: 0.3s
}

div.profile-card:hover > h1:after {
    width:70%;
    transition: 0.3s
}

div.profile-card:hover > img {
    -ms-transform: scale(1.2); /* IE 9 */
    -webkit-transform: scale(1.2); /* Safari */
    transform: scale(1.2);
    transition: 0.3s
}

/*
###########
## EQUAL ##
###########
*/

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:  flex;
}

h4 {
    margin-top: 25px;
  }
  .row {
    margin-bottom: 20px;
  }
  .row .row {
    margin-top: 10px;
    margin-bottom: 0;
  }
  [class*="col-"] {
    padding-top: 15px;
    padding-bottom: 15px;
  }

/*
#############
## CONTACT ##
#############
*/

div.section-contact {
    widows: 100%;
    margin:0px;
    padding:0px;
}

div.section-contact form {
    width:500px;
    margin:auto;
    max-width:95%;
}

.alert {
    border-radius:8px;
    color:rgb(241, 241, 241);
    padding:5px 10px;
}

.alert.good {
    background: rgb(127, 179, 97);
    border: solid rgb(100, 151, 69) 1px;
}

.alert.bad {
    background: rgb(252, 93, 81);
    border: solid rgb(252, 102, 102) 1px;
}

div.contact table {
    display:block;
    margin:auto;
    margin-top:60px;
    max-width:450px;
}

div.contact table td {
    padding:5px;
    font-size:18px;
}

div.contact form input,textarea {
    border-radius: 5px;
    border:solid 1px rgb(160, 160, 160);
    box-shadow: 2px 2px 4px rgb(173, 173, 173);
    width:100%;
}