* {
		margin: 0px;
        padding: 0px;
        }
body, html 	{
        text-align: left;
        font-family: Raleway, sans-serif;
        font-size: 100%;
        line-height: 1.25em;
        height: 100%;
        color: #444;
        overflow-x: hidden;
        }
    h1 {font-size: 1.7vw;}
    h2 {font-size: 2.0vw;}
    h3 {font-size: 1.0vw;}
    h4 {font-size: 1.5vw;}	
    h5 {font-size: 2vw;}
    h6 {font-size: 3.4vw;}
    p  {font-size: 1.2vw;}
    A:link, A:visited, A:active {text-decoration: none;}
    
    .bold {
     font-weight: 500;
        }
    .color {
        color: #db9f47;
        }
    .font-up {
      font-size: 1.61vw;
        }
    .text-up {
      font-size: 0.94vw;
        }
    .ital {
      font-style: italic;
        }

#container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        }

/*-- START NAV --*/
#nav {
       position: fixed;
       width: 100%;        
       top: 0;        
       left: 0;        
       min-height: 71px;        
       background-color: #FFF;
       z-index: 100;  
       }
.nav-bar-wrap {
       display: flex;
       align-items: center;
       min-height: 71px;
       }
.nav-bar-name {
       display: flex;
       flex: 1 1 50%;
       justify-content: start;
       padding-left: 16%;
       }
.nav-bar-links {
       display: flex;
       flex: 1 1 50%;
       flex-wrap: wrap;
       justify-content: center;
       gap: 5%;
       list-style: none;
       }

.nav-bar-name h2 {
       line-height: 1.2em;
       font-weight: 100;
       letter-spacing: 0.1em;
       }
   
.nav-bar-links li {
       font-weight: 500;		
       font-size: 1.1vw;
       letter-spacing: 0.1em;		
       }
a:link {color: #111;}
a:visited {color: #111;}
a:active {color: #111;}
a:hover {color: #111;}

.nav-bar-links a:link {color: #111;}
.nav-bar-links a:visited {color: #111;}
.nav-bar-links a:active {color: #111;}
.nav-bar-links a:hover {color: #111; text-decoration: underline; text-decoration-color: #FF0000; text-decoration-thickness: 4px; text-underline-offset: 0.5em;}
/*-- END NAV --*/


/* START WORK TOP SECTION */
#work-top {
      position: relative;
      z-index: -10;
      width: 100%;
      height: 50vmax;
      background-color: #FFF;
      }

.work-top-background {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      }

.work-top-image-wrap {
      position: relative;
      width: 90%;
      height: 90%;
      background: url(images/work/biker.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      }

.work-top-content-wrap {
      display: flex;
      flex-direction: column;
      position: absolute;
      z-index: 1;
      width: 42.5%;
      height: 30%;
      bottom: 0%;
      left: 5%;
      background-color: #637d3f;
      }
.work-top-copy {
      width: 100%;
      padding-top: 7%;
      }
.work-top-copy h4 {
      width: 58%;
      padding-left: 15%;
      line-height: 1.25em;
      letter-spacing: 0.05em;
      font-weight: 700;
      color: #FFF;
      }
.work-top-copy h2 {
      width: 70%;
      padding-top: 3%;
      padding-left: 15%;
      line-height: 1.1em;
      font-family: Roboto Serif;
      font-weight: 400;
      color: #FFF;
      }
/* END WORK TOP SECTION */


/* START VIDEOS */
#videos {
        width: 90%;
        margin: 0 auto;        
        background-color: #FFF;
        padding-bottom: 5%;
        clear: both;
        overflow: hidden;
        }
.content-wrap {
		width: 100%;		
        margin: 2% 0 0 0;
        clear: both;        
        overflow: hidden;	 	
        }

/* START CONTENT SECTION BOXES */
.box-left {
		float: left;        
        width: 31.33%;        
        margin-right: 2%;        
        -webkit-transition: all 0.5s linear;		
        transition: all 0.5s linear;       
        -webkit-transform: translateZ(0);       
        transform: translateZ(0);		
        }
.box-left::before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;    
        bottom: 0;    
        left: 0;    
        background: transparent;    
        transition: background .35s ease-out;    
        }
.box-left:hover::before {
        background: rgba(250, 250, 250, 0.9);    
        }
.box-left__media {
        display: block;    
        min-width: 100%;    
        max-width: 100%;    
        height: auto;    
        }
.box-left__overlay {
        position: absolute;    
        top: 0;    
        right: 0;    
        bottom: 0;    
        left: 0;    
        }
.box-left:hover .box-left__overlay {
        -webkit-opacity: 1;    
        opacity: 1;    
        -webkit-transition: opacity .35s ease-out;    
        transition: opacity .35s ease-out;    
        }
.box-left__overlay__title {
        -webkit-opacity: 0;    
        opacity: 0;    
        }
.box-left:hover .box-left__overlay__title {
        -webkit-opacity: 1;    
        opacity: 1;    
        -webkit-transition: opacity .35s ease-out;    
        transition: opacity .35s ease-out;    
        }
.box-left h2 {
        width: 80%;		
        padding: 39% 0 0 50px;        
        letter-spacing: 0.2px;        
        line-height: 1.1em;		
        font-weight: 600;        
        font-size: 1.8rem;
        font-variant:small-caps;    
        text-align: left;        
        color: #3F4B59;        
        }
.box-left h3 {
        width: 80%;		
        padding: 2px 0 0 50px;        
        letter-spacing: 0.4px;        
        line-height: 1.1em;		
        font-weight: 300;        
        font-size: 1.1rem;
        font-style: italic;
        text-align: left;        
        color: #3F4B59;        
        }
.box-left p {
        width: 80%;		
        padding: 11px 0 0 50px;        
        letter-spacing: 0.2px;        
        line-height: 1.1em;		
        font-weight: 300;        
        font-size: 0.9rem;
        text-align: left;     
        color: #3F4B59;        
        }
        
.box-mid {		
        float: left;        
        width: 31.33%;        
        margin-right: 1%;
        margin-left: 1%;        
        -webkit-transition: all 0.5s linear;		
        transition: all 0.5s linear;       
        -webkit-transform: translateZ(0);       
        transform: translateZ(0);		
        }
.box-mid::before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;    
        bottom: 0;    
        left: 0;    
        background: transparent;    
        transition: background .35s ease-out;    
        }
.box-mid:hover::before {
        background: rgba(250, 250, 250, 0.9);    
        }
.box-mid__media {
        display: block;    
        min-width: 100%;    
        max-width: 100%;    
        height: auto;    
        }
.box-mid__overlay {
        position: absolute;    
        top: 0;    
        right: 0;    
        bottom: 0;    
        left: 0;    
        }
.box-mid:hover .box-mid__overlay {
        -webkit-opacity: 1;    
        opacity: 1;    
        -webkit-transition: opacity .35s ease-out;    
        transition: opacity .35s ease-out;    
        }
.box-mid__overlay__title {
        -webkit-opacity: 0;    
        opacity: 0;    
        }
.box-mid:hover .box-mid__overlay__title {
        -webkit-opacity: 1;    
        opacity: 1;    
        -webkit-transition: opacity .35s ease-out;    
        transition: opacity .35s ease-out;    
        }
.box-mid h2 {
        width: 80%;		
        padding: 39% 0 0 50px;        
        letter-spacing: 0.2px;        
        line-height: 1.1em;		
        font-weight: 600;        
        font-size: 1.8rem;        
        font-variant:small-caps;    
        text-align: left;        
        color: #3F4B59;        
        }
.box-mid h3 {
        width: 80%;		
        padding: 2px 0 0 50px;        
        letter-spacing: 0.4px;        
        line-height: 1.1em;		
        font-weight: 300;        
        font-size: 1.1rem;
        font-style: italic;
        text-align: left;        
        color: #3F4B59;        
        }
.box-mid p {
        width: 80%;		
        padding: 11px 0 0 50px;        
        letter-spacing: 0.2px;        
        line-height: 1.1em;		
        font-weight: 300;        
        font-size: 0.9rem;
        text-align: left;     
        color: #3F4B59;        
        }

.box-right {
		float: left;        
        width: 31.33%;        
        margin-left: 2%;        
        -webkit-transition: all 0.5s linear;		
        transition: all 0.5s linear;       
        -webkit-transform: translateZ(0);       
        transform: translateZ(0);		
        }
.box-right::before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;    
        bottom: 0;    
        left: 0;    
        background: transparent;    
        transition: background .35s ease-out;    
        }
.box-right:hover::before {
        background: rgba(250, 250, 250, 0.9);    
        }
.box-right__media {
        display: block;    
        min-width: 100%;    
        max-width: 100%;    
        height: auto;    
        }
.box-right__overlay {
        position: absolute;    
        top: 0;    
        right: 0;    
        bottom: 0;    
        left: 0;    
        }
.box-right:hover .box-right__overlay {
        -webkit-opacity: 1;    
        opacity: 1;    
        -webkit-transition: opacity .35s ease-out;    
        transition: opacity .35s ease-out;    
        }
.box-right__overlay__title {
        -webkit-opacity: 0;
        opacity: 0;
        }
.box-right:hover .box-right__overlay__title {
        -webkit-opacity: 1;
        opacity: 1;
        -webkit-transition: opacity .35s ease-out;
        transition: opacity .35s ease-out;
        }
.box-right h2 {
        width: 80%;
        padding: 39% 0 0 50px;
        letter-spacing: 0.2px;
        line-height: 1.1em;
        font-weight: 600;
        font-size: 1.8rem;
        font-variant:small-caps;
        text-align: left; 
        color: #3F4B59;
        }
.box-right h3 {
        width: 80%;		
        padding: 2px 0 0 50px;        
        letter-spacing: 0.4px;        
        line-height: 1.1em;		
        font-weight: 300;        
        font-size: 1.1rem;
        font-style: italic;
        text-align: left;        
        color: #3F4B59;        
        }
.box-right p {
        width: 80%;		
        padding: 11px 0 0 50px;        
        letter-spacing: 0.2px;        
        line-height: 1.1em;		
        font-weight: 300;        
        font-size: 0.9rem;
        text-align: left;     
        color: #3F4B59;        
        }
/* END CONTENT ROW BOXES */
/* END VIDEOS SECTION */


/* START SOLUTIONS SECTION */
#solutions {
      display: flex;
      width: 100%;
      height: 740px;
      }
  
.solutions-copy-wrap {
      display: flex;
      flex-direction: column;
      width: 50%;
      padding-top: 7%;
      }

.solutions-photo-wrap {
      width: 50%;
      }
.sol-pic {
      width: 85%;
      margin-top: 2.5%;
      margin-left: 10%;
     }

.solutions-copy-wrap h2 {
      width: 26%;
      padding-left: 18%;
      padding-bottom: 2%;
      line-height: 1.1em;
      font-weight: 400;
      font-family: Roboto Serif;
      }
.solutions-copy-wrap h4 {
      width: 52%;
      padding-left: 18%;
      padding-bottom: 2%;
      line-height: 1.25em;
      font-weight: 400;
      font-family: Roboto Serif;
      }
.solutions-copy-wrap p {
      width: 52%;
      padding-left: 18%;
      padding-bottom: 5%;
      line-height: 1.62em;
      font-weight: 300;
      }
.solutions-copy-wrap h3 {
      width: 18%;
      margin-left: 18%;
      line-height: 2.1em;
      font-size: 0.8vw;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-align: center;
      color: #FFF;
      background-color: #d5a45c;
      }  
/* END SOLUTIONS SECTION */


/* START CONTACT SECTION */
#contact {		
        display: flex;
        width: 100%;
        padding-top: 5%;
        padding-bottom: 5%;
        background-color: #323b3f;
        }
.contact-menu-wrap {
        display: flex;
        width: 34%;
        flex-direction: column;
        align-items: center;
        padding-top: 3.6%;
        }
.contact-copy-wrap {
        display: flex;
        width: 32%;
        flex-direction: column;
        align-items: center;
        }
.contact-links-wrap {
        display: flex;
        width: 34%;
        flex-direction: column;
        align-items: center;
        padding-top: 3.6%;
        }

.contact-menu-wrap p {
		width: 100%;
        line-height: 1.8em;
        font-weight: 400;
        text-align: center;
        color: #FFF;
        }

.contact-copy-wrap h6 {
		width: 100%;
        line-height: 1.7em;
        font-weight: 100;
        text-align: center;
        letter-spacing: 0.02em;
        color: #FFF;
        }
.contact-copy-wrap h2 {
		width: 100%;
        padding-top: 2%;
        line-height: 1.5em;
        font-size: 0.9vw;
        font-weight: 400;
        letter-spacing: 0.06em;
        text-align: center;
        color: #FFF;
        }
.contact-copy-wrap h3 {
		width: 100%;
        padding-top: 2%;
        line-height: 1.5em;
        font-size: 1.1vw;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-align: center;
        color: #FFF;
        }
.contact-copy-wrap h4 {
		width: 100%;
        padding-top: 16%;
        line-height: 1.7em;
        font-size: 0.8vw;
        font-weight: 400;
        text-align: center;
        color: #FFF;
        }
.contact-copy-wrap p {
		width: 100%;
        line-height: 1.7em;
        font-size: 0.8vw;
        font-weight: 400;
        text-align: center;
        color: #FFF;
        }

.contact-links-wrap p {
		width: 100%;
        line-height: 1.8em;
        font-weight: 400;
        text-align: center;
        color: #FFF;
        }

.contact-menu-wrap a:link {color: #FFF;}
.contact-menu-wrap a:visited {color: #FFF;}
.contact-menu-wrap a:active {color: #FFF;} 
.contact-menu-wrap a:hover {color: #FFF;}

.contact-links-wrap a:link {color: #FFF;}
.contact-links-wrap a:visited {color: #FFF;}
.contact-links-wrap a:active {color: #FFF;} 
.contact-links-wrap a:hover {color: #FFF;}
/* END CONTACT SECTION */