@charset "utf-8";

/* =================================================================================== //

 .d8888b.  888b     d888 8888888b.       88888888888 888                                           
d88P  Y88b 8888b   d8888 888  "Y88b          888     888                                           
Y88b.      88888b.d88888 888    888          888     888                                           
 "Y888b.   888Y88888P888 888    888          888     88888b.   .d88b.  88888b.d88b.   .d88b.       
    "Y88b. 888 Y888P 888 888    888          888     888 "88b d8P  Y8b 888 "888 "88b d8P  Y8b      
      "888 888  Y8P  888 888    888          888     888  888 88888888 888  888  888 88888888      
Y88b  d88P 888   "   888 888  .d88P          888     888  888 Y8b.     888  888  888 Y8b.          
 "Y8888P"  888       888 8888888P"           888     888  888  "Y8888  888  888  888  "Y8888       
                                                                                                   
                                                                                                   
                                                                                                   
d8b           .d888                                                                                
Y8P          d88P"                                                                                 
             888                                                                                   
888 88888b.  888888 .d88b.                                                                         
888 888 "88b 888   d88""88b                                                                        
888 888  888 888   888  888                                                                        
888 888  888 888   Y88..88P                                                                        
888 888  888 888    "Y88P" 


 Theme Name: Elsom custom site developed by Somdow
 Theme URI: somdow.com
 Author URI: somdow.com
 Description: A custom SMD Theme for me by me. Hey if you are back here looking at my code...well.....WELCOME! hope you like what you see and yeah. If you need me for anything, give me a holler. I'm always around.
 Author: Somdow
 Version: 1.0

 */




/* =================================================================================== //

 .d8888b.   .d8888b.   .d8888b.                                         888    
d88P  Y88b d88P  Y88b d88P  Y88b                                        888    
888    888 Y88b.      Y88b.                                             888    
888         "Y888b.    "Y888b.        888d888 .d88b.  .d8888b   .d88b.  888888 
888            "Y88b.     "Y88b.      888P"  d8P  Y8b 88K      d8P  Y8b 888    
888    888       "888       "888      888    88888888 "Y8888b. 88888888 888    
Y88b  d88P Y88b  d88P Y88b  d88P      888    Y8b.          X88 Y8b.     Y88b.  
 "Y8888P"   "Y8888P"   "Y8888P"       888     "Y8888   88888P'  "Y8888   "Y888 
// ==================================================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, 
big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, 
ruby, section, summary,time, mark, audio, video {
	margin: 0px;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/*! NORMALIZE CSS RESET 4.1.1 */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}










/* =================================================================================== //
d8b          d8b 888                  888             888                   
Y8P          Y8P 888                  888             888                   
                 888                  888             888                   
888 88888b.  888 888888      .d8888b  888888 888  888 888  .d88b.  .d8888b  
888 888 "88b 888 888         88K      888    888  888 888 d8P  Y8b 88K      
888 888  888 888 888         "Y8888b. 888    888  888 888 88888888 "Y8888b. 
888 888  888 888 Y88b.            X88 Y88b.  Y88b 888 888 Y8b.          X88 
888 888  888 888  "Y888       88888P'  "Y888  "Y88888 888  "Y8888   88888P' 
                                                  888                       
                                             Y8b d88P                       
                                              "Y88P"                        
// ==================================================================================== */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MY GEN STYLES INIT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
html, body{
  width:100%; 
  height:100%; 
  font-family: "akkurat", Helvetica, Verdana, sans-serif; 
  font-size:25px;
  /* background-color: #dfdfdf; */
}


a{ text-decoration: none; }


@font-face {
    font-family: 'akkurat';
    src: url("fonts/Akkurat.ttf") format('TrueType');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ninjaNaruto';
    src: url("fonts/njnaruto.ttf") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brownSTDLight';
    src: url("fonts/brown-light.c8ada63.woff2") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brownSTDNormal';
    src: url("fonts/brown-regular.c974dcf.woff2") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'nueueHAASblack';
  src: url("fonts/haasfonts/NeueHaasDisplayBlack.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ninjanaruto';
  src:  url('./fonts/njnaruto-webfont.woff2') format('woff2'), 
        url('./fonts/njnaruto-webfont.woff') format('woff'), 
        url('./fonts/njnaruto.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Electrolize';
  src: url('./fonts/Electrolize-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


h1{font-size:50px; }
h2{font-size: 40px; }


.fl{
  float:left;
}

.fr{
  float:right;
}

.clearEm{ 
  clear:both;
}

.clearEmL{ 
  clear:left; 
}

.clearEmR{ 
  clear:right;
}


.mainSiteWidth{ 
  max-width: 1280px; 
  margin:0px auto; 
}

.sectionMiniTitle{ 
  font-family: 'ninjaNaruto', Arial, Helvetica, sans-serif; 
  font-size:40px;
}


#smdSlogan{
  font-weight: bold; 
  color:#f15a25; 
}


/* =================================================================================== //

888                             888                        .d8888b.                      
888                             888                       d88P  "88b                     
888                             888                       Y88b. d88P                     
88888b.   .d88b.   8888b.   .d88888  .d88b.  888d888       "Y8888P"                      
888 "88b d8P  Y8b     "88b d88" 888 d8P  Y8b 888P"        .d88P88K.d88P                  
888  888 88888888 .d888888 888  888 88888888 888          888"  Y888P"                   
888  888 Y8b.     888  888 Y88b 888 Y8b.     888          Y88b .d8888b                   
888  888  "Y8888  "Y888888  "Y88888  "Y8888  888           "Y8888P" Y88b                 
                                                                                         
                                                                                         
                                                                                         
888                           .d8888b.                    888                     888    
888                          d88P  Y88b                   888                     888    
888                          888    888                   888                     888    
888888 .d88b.  88888b.       888         .d88b.  88888b.  888888 .d88b.  88888b.  888888 
888   d88""88b 888 "88b      888        d88""88b 888 "88b 888   d8P  Y8b 888 "88b 888    
888   888  888 888  888      888    888 888  888 888  888 888   88888888 888  888 888    
Y88b. Y88..88P 888 d88P      Y88b  d88P Y88..88P 888  888 Y88b. Y8b.     888  888 Y88b.  
 "Y888 "Y88P"  88888P"        "Y8888P"   "Y88P"  888  888  "Y888 "Y8888  888  888  "Y888 
               888                                                                       
               888                                                                       
               888                                                                       
   
// ==================================================================================== */
  #topRowContW{
    background:rgba(0, 0, 0, 0.65);
    height:100vh;  
  }

  #topRowContInnerW{
    height:100vh;  
    position:relative; 
    color:#fff;
  }

  #interiorPageVideoHeaderW{
    background:rgba(0, 0, 0, 0.65);
    height:100vh;  
  }

  #interiorPageVideoHeaderInnerW{
    position:relative; 
    color:#fff;
  }

  #mainMenuW{
    display:flex; 
    padding-top:30px;
  }

  #mainLogo{
    flex-grow: 1; 
    font-family: 'ninjaNaruto', Arial, Helvetica, sans-serif; 
    font-size:30px;
    margin-top:20px;
    color:#fff;
    padding-left:100px;
  }

  #mainLogo a{text-decoration: none; color:#fff;}


  #mainNav{
    padding-right:100px;
    font-family: "brownSTDLight", Helvetica, Verdana, sans-serif; 
    font-weight: bold; 
    font-size:16px;
    text-align: right;
  }

  #mainNav ul li{
    padding:0px 20px;
    margin-top:4px;
    font-family: "nueueHAASblack";
    color:#e2e2e2;
    list-style-type:none;
  }

  #mainNav a{
    text-decoration: none; 
    color:#e2e2e2;
  } 

  #mainNav a:hover{
    color:#f15a25;
  } 


  /***************************************************************************************************************
  /* This is for the portfolio page only; Everything else is handled by normal header stylings 
  /**************************************************************************************************************/
  .portPageColors{background:#DFDFDF !important; color:#000 !important }
  .portPageColors a{ color:#000 !important; }
  .portPageColors a:hover{ color:#f15a25 !important; }
  /***************************************************************************************************************/

  .toggleView{
    display:block !important;
  }

  #topRowContW .hamburger-inner, 
  #topRowContW .hamburger-inner::before, 
  #topRowContW .hamburger-inner::after{
    background:#f15a25;
  }

  #topRowContW .hamburger.is-active .hamburger-inner, 
  #topRowContW .hamburger.is-active .hamburger-inner::before, 
  #topRowContW .hamburger.is-active .hamburger-inner::after{
    background:#f15a25;
  }


  #videoSecSlogan{ 
    position:absolute; 
    text-align: center;
    font-family: "nueueHAASblack";
    width:100%;

    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
  }

  #videoSecSlogan h1{
    font-size:4vw;
    color:#e2e2e2;
    margin: 0px;
    word-spacing: 10px;
  }

#videoBG video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

#videoBG {
    position:fixed;
    z-index: -1;
    background:red;
}

/* Contact page styling(popup) */
#contactFormWrapper{ 
  background: #1f1f1ff5;
  position:fixed;
  width:100%;
  height: 100%;
  z-index: 9998;
  display:none;
}

#contactFormInteriorWrapper{
  width: 85%;
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#contactFormInteriorWrapper input, #contactFormInteriorWrapper textarea{
  width: 100%;
  margin-bottom: 4px;
  
  width: 100%;
  font-size: 30px;
  padding: 0px;
  font-family: "ninjanaruto",Arial, Helvetica, sans-serif;
  color: #CCC;
  background-color: rgba(38, 38, 38, 0.9);
  border: 1px dashed #CCC;
  padding-left:10px;

  /* make all form fields selected same width(since textareas and input fields use diff box models) */
  box-sizing: border-box;
  -moz-box-sizing: border-box;

}

#contactFormInteriorWrapper input{
  margin-bottom: 10px;
  height: 130px;

  display:block;
}

#contactFormInteriorWrapper input[type=submit]:hover{
  background-color:#f15a25;
}

/* ============================ [ PRELOADER GRAPHIC for AJAX requests ] == */
.preloader {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
  display: none;
  
  color:#fff;
  text-align: center;
  width: 100%;
  height:100%;
  background:#1d1212d6;

}

.preloaderInner{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
  color:#fff;
  text-align: center;
  width:320px;
}

.preloader p{
  margin-top:5%;
}

.preloader img {
    width: 100%;
    height: auto;
}


#formCloseButton{
  color: #fff;
  font-size:130px;
  cursor: pointer;
  position: fixed;
  top:-27px;
  right:126px;
  z-index: 9999;
}


/* =================================================================================== //
888           .d888 888          .d8888b.  d8b      888          888                       
888          d88P"  888         d88P  Y88b Y8P      888          888                       
888          888    888         Y88b.               888          888                       
888  .d88b.  888888 888888       "Y888b.   888  .d88888  .d88b.  88888b.   8888b.  888d888 
888 d8P  Y8b 888    888             "Y88b. 888 d88" 888 d8P  Y8b 888 "88b     "88b 888P"   
888 88888888 888    888               "888 888 888  888 88888888 888  888 .d888888 888     
888 Y8b.     888    Y88b.       Y88b  d88P 888 Y88b 888 Y8b.     888 d88P 888  888 888     
888  "Y8888  888     "Y888       "Y8888P"  888  "Y88888  "Y8888  88888P"  "Y888888 888     
// ==================================================================================== */










/* =================================================================================== //
              d8b      888       .d8888b.                    888                     888    
              Y8P      888      d88P  Y88b                   888                     888    
                       888      888    888                   888                     888    
88888b.d88b.  888  .d88888      888         .d88b.  88888b.  888888 .d88b.  88888b.  888888 
888 "888 "88b 888 d88" 888      888        d88""88b 888 "88b 888   d8P  Y8b 888 "88b 888    
888  888  888 888 888  888      888    888 888  888 888  888 888   88888888 888  888 888    
888  888  888 888 Y88b 888      Y88b  d88P Y88..88P 888  888 Y88b. Y8b.     888  888 Y88b.  
888  888  888 888  "Y88888       "Y8888P"   "Y88P"  888  888  "Y888 "Y8888  888  888  "Y888 
// ==================================================================================== */
#midSecContW, #midSecContWForEmailPage{
  background:#dfdfdf url("images/chargerBG.png") no-repeat center; 
  background-size: cover; 
  padding:100px 0px;
}


  #midSecContW video{
    width:100%; 
    height:auto;  
  }

  #midSecContW img{
    width:100%; 
    height:auto; 
    position:absolute; 
    z-index: 9997;  
  }

  #midSecComidSecContWForEmailPagentW img{
    width:100%; 
    height:auto; 
    margin-bottom: 100px;

  }

  #midSecContW span{
    font-size:76px; 
  }

  #midSecContInnerW{
    color:#fff; 
    display:flex; 
    flex-wrap: wrap;
  }

.responsiveIframeWrapper{
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


  #midSecContW .sectionMiniTitle{
    padding:0px 0px 20px 0px; 
    color:#000;
  }

  #midSecContW h1, #midSecContW h2{
    background:rgba(0, 0, 0, 0.35); 
    padding:10px 60px 10px 20px;
  }

  .homepageFeaturedVideoBox{
    flex-basis: 100%; 
    position:relative; 
    max-height: 530px; 
    overflow: hidden; 
    cursor:pointer; 

  }

  #leftBoxHomepageFeatured{
    flex-basis: 50%;  
    position:relative; 
    max-height: 325px; 
    overflow: hidden; 
    cursor:pointer; 

  }

  #rightBoxHomepageFeatured{
    flex-basis: 50%; 
    position:relative;  
    overflow: hidden; 
    max-height: 325px; 
    overflow: hidden; 
    cursor:pointer; 

  }

  .homepageFeaturedTextW{ 
    padding:20px; 
    position:absolute; 
    top:50%; 
    left:-20px; 
    transform: translate(-0, -45%); -webkit-transform: translate(-0, -45%); -moz-transform: translate(-0, -45%); -ms-transform: translate(-0, -45%); -o-transform: translate(-0, -45%); 
    z-index:1001; 
  }

  .homepageFeaturedTextW a{color:#fff;}

  #midSecContW .smallerBoxedTitle{
    font-size: 10px;
  }


/* animated mouse scrolling icon */
.scroll-downs {
  position: absolute;
  right: 0;
  bottom: 160px;
  left: 0;
  margin: auto;
  
  width :34px;
  height: 55px;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 5px solid #fff;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}


  #midSecContWrapperInteriorPages{
    padding: 40px 0px;
  }

  .sectionMiniTitle{ 
    font-size:20px;
    margin-left:10px;
  }

  .sectionMiniTitle a{ color: #000;}


  #midSecContWrapperInteriorPages{
  background:#dfdfdf url("images/chargerBG.png") no-repeat center; 
  background-size: cover; 
  padding:100px 0px;
}


  #midSecContWrapperInteriorPages video{
    width:100%; 
    height:auto;  
  }

  #midSecContWrapperInteriorPages img{
display:block; margin:0px auto;
 
  }

  #midSecContWrapperInteriorPages span{
    font-size:76px; 
  }

  #midSecContWrapperInteriorPages{
    color:#fff; 
  }
  

  #midSecContWrapperInteriorPages .sectionMiniTitle{
    padding:0px 0px 20px 0px; 
    color:#000;
  }

  #midSecContWrapperInteriorPages h1, #midSecContWrapperInteriorPages h2{
    background:rgba(0, 0, 0, 0.761); 
    padding:10px 60px 10px 20px;
  }

  #midSecContWrapperInteriorPagesInnerW{
    color:#fff; 
  }

  .scrollToTopArrow{
    display:block;
    text-align: center;
    font-size:50px;
    color:red;
  }

  .scrollToTopArrow a i{
    display:block;
    text-align: center;
    font-size:50px;
    color:#000;
  }
  
  ::selection{
    color:#fff;
    background-color: #f15a25;
  }

/* =================================================================================== //
              d8b      888       .d8888b.                    888                     888    
              Y8P      888      d88P  Y88b                   888                     888    
                       888      888    888                   888                     888    
88888b.d88b.  888  .d88888      888         .d88b.  88888b.  888888 .d88b.  88888b.  888888 
888 "888 "88b 888 d88" 888      888        d88""88b 888 "88b 888   d8P  Y8b 888 "88b 888    
888  888  888 888 888  888      888    888 888  888 888  888 888   88888888 888  888 888    
888  888  888 888 Y88b 888      Y88b  d88P Y88..88P 888  888 Y88b. Y8b.     888  888 Y88b.  
888  888  888 888  "Y88888       "Y8888P"   "Y88P"  888  888  "Y888 "Y8888  888  888  "Y888 
                                                                                            
                                                                                            
                                                                                            
d8b          888                    d8b                                                     
Y8P          888                    Y8P                                                     
             888                                                                            
888 88888b.  888888 .d88b.  888d888 888  .d88b.  888d888                                    
888 888 "88b 888   d8P  Y8b 888P"   888 d88""88b 888P"                                      
888 888  888 888   88888888 888     888 888  888 888                                        
888 888  888 Y88b. Y8b.     888     888 Y88..88P 888                                        
888 888  888  "Y888 "Y8888  888     888  "Y88P"  888                                        
// ==================================================================================== */

.portPageWorkContainerW{
  flex-basis: 100%; 
  position:relative; 
  max-height: 648px; 
  overflow: hidden; 
  cursor:pointer; 

  color:#fff;
}

.mainBoxPortpageFeatured{
  flex-basis: 100%; 
  position:relative; 
  max-height: 648px; 
  overflow: hidden; 


}

.portPageFeaturedTextW{ 
  padding:20px; 
  position:absolute; 
  top:50%; 
  left:-20px; 
  transform: translate(-0, -45%); -webkit-transform: translate(-0, -45%); -moz-transform: translate(-0, -45%); -ms-transform: translate(-0, -45%); -o-transform: translate(-0, -45%); 
  z-index:9998; 
  color:#fff;
}

#midSecProjectDescriptionRowW{
  padding:100px 0px;
}

#portfolioPageInteriorW h1, #PortfolioPageW h2{
  padding:10px 60px 10px 20px;
}


#portPageHeroWrapper{
  background-color:#dfdfdf;
  text-align:center;
}

#portPageHeroWrapper h1{
  padding:25px;  font-size:7vw; margin:0px; font-family: 'nueueHAASblack'; word-spacing: 20px;
}


/* for video navigation boxes on interior pages */
.videoNavigationBoxes{
  width:250px;
  height:127px;
  background:#000;
  position:fixed; 
  max-height: 530px; 
  overflow: hidden; 
  cursor:pointer; 
  z-index:2000;
  display:none;
}

.videoNavigationBoxes p{
color:#fff;
font-family: 'ninjaNaruto', Arial, Helvetica, sans-serif; 
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
font-size: 18px;
width: 100%;
text-align: center;
}


.videoNavigationBoxes video{
  width:100%;
  height:auto;
  opacity: .6;
}


.videoNavigationBoxNEXT{

  right:0px;
  top: 50%;
  transform: translate(0%, -50%);

}

.videoNavigationBoxPREVIOUS{

  left:0px;
  top: 50%;
  transform: translate(0%, -50%);

}

.toggleVideoCover{
  display: block;
  position: relative;
  z-index: 1000;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
}



/* =================================================================================== //
        d8b          888      888          .d8888b.  d8b      888          888                       
        Y8P          888      888         d88P  Y88b Y8P      888          888                       
                     888      888         Y88b.               888          888                       
888d888 888  .d88b.  88888b.  888888       "Y888b.   888  .d88888  .d88b.  88888b.   8888b.  888d888 
888P"   888 d88P"88b 888 "88b 888             "Y88b. 888 d88" 888 d8P  Y8b 888 "88b     "88b 888P"   
888     888 888  888 888  888 888               "888 888 888  888 88888888 888  888 .d888888 888     
888     888 Y88b 888 888  888 Y88b.       Y88b  d88P 888 Y88b 888 Y8b.     888 d88P 888  888 888     
888     888  "Y88888 888  888  "Y888       "Y8888P"  888  "Y88888  "Y8888  88888P"  "Y888888 888     
                 888                                                                                 
            Y8b d88P                                                                                 
             "Y88P"                                                                                  
// ==================================================================================== */










/* =================================================================================== //
 .d888                  888                    
d88P"                   888                    
888                     888                    
888888 .d88b.   .d88b.  888888 .d88b.  888d888 
888   d88""88b d88""88b 888   d8P  Y8b 888P"   
888   888  888 888  888 888   88888888 888     
888   Y88..88P Y88..88P Y88b. Y8b.     888     
888    "Y88P"   "Y88P"   "Y888 "Y8888  888     
// ==================================================================================== */
#bottomSecContW{
  background:#dfdfdf; 
  padding:100px 0px;
}
  #bottomSecContW img{
    width: 100%; 
    height: auto;
  }

  #bottomSecContInnerW{
    display:flex; 
    flex-wrap: wrap;
  }

  #bottomSecContW .sectionMiniTitle{
    padding:0px 0px 20px 0px; 
    color:#000; 
    flex-basis: 100%;
  }

  #bottomSecContW .personalProjectBox{
    flex-basis: 33.3%; 
    background:red; 
    height: 350px;
  }


  #footerW{
    background:#dfdfdf; 
    padding:20px 0px;
  }

  #footerW a:visited{
    color:#000;
  }

  #footerLogo{
    flex-grow: 1; 
    font-family: 'ninjaNaruto', Arial, Helvetica, sans-serif; 
    font-size:30px;
    padding:0px 0px 20px 0px;
    color:#000;
    text-align:center;
    margin:100px 0px;
  }

  #footerLogo a{ color: #000;}


html{
  scroll-behavior: smooth;
}



/* =================================================================================== //
                            888 d8b                .d88888b.                            d8b                   
                            888 Y8P               d88P" "Y88b                           Y8P                   
                            888                   888     888                                                 
88888b.d88b.   .d88b.   .d88888 888  8888b.       888     888 888  888  .d88b.  888d888 888  .d88b.  .d8888b  
888 "888 "88b d8P  Y8b d88" 888 888     "88b      888     888 888  888 d8P  Y8b 888P"   888 d8P  Y8b 88K      
888  888  888 88888888 888  888 888 .d888888      888 Y8b 888 888  888 88888888 888     888 88888888 "Y8888b. 
888  888  888 Y8b.     Y88b 888 888 888  888      Y88b.Y8b88P Y88b 888 Y8b.     888     888 Y8b.          X88 
888  888  888  "Y8888   "Y88888 888 "Y888888       "Y888888"   "Y88888  "Y8888  888     888  "Y8888   88888P' 
                                                         Y8b                                                  
// ==================================================================================== */

	/* All Mobile Sizes (devices and browser) */
	@media all and (max-width: 767px) {

    /* header & topRow area ====================================================== */
    video{width:100%; height: auto;}

    #midSecContW video{display: none;}

    #mainLogo{
      font-size:30px; 
      margin-left: 10px;
    }

    #mainMenuW{
      width:100%;
      z-index: 9999;
    }


    #videoSecSlogan h1{
      font-size:30px;
      padding:10px;
      word-spacing: 4px;
    }

    #videoSecSlogan p{
      font-size:20px;
      padding:10px;
    }

    /* midSec ============================================================= */
    #midSecContW{
      padding: 40px 0px;
    }
  
    #midSecContW img {
      position:static;
    }

    .sectionMiniTitle{ 
      font-size:20px;
      margin-left:10px;
    }

    .homepageFeaturedVideoBox, #leftBoxHomepageFeatured, #rightBoxHomepageFeatured{
      flex-basis: 85%;
      margin: 0px auto;
    }

    .homepageFeaturedTextW h2, .homepageFeaturedTextW h1, .portPageFeaturedTextW{
      font-size:20px;
    }

    #bottomSecContW{padding:40px 0px;}

}


@media all and (max-width: 1200px) {
  /* For maximum image sharpness, i want he images to show at their original sizes and NOT width 100% because it looks distorted based on certains creens. Below this however, its ok */
  #midSecContWrapperInteriorPagesInnerW img{
    width: 100%;
    height: auto;
    display: block;
  }

  #portPageHeroWrapper{
    display:none;
  }

  #contactFormInteriorWrapper input{
    height: 50px;
  }

  #formCloseButton{
    font-size: 70px;
    right:4%;
  }  
  
}

/* ======================== SPECIAL RULE SET FOR THE VIDEOS == */
@media (min-aspect-ratio: 16/9) {
    #videoBG {
        width:100%;
        height: auto;
    }
}


@media (max-aspect-ratio: 16/9) {
    #videoBG { 
        width:auto;
        height: 100%;
    }
}


@media (max-width: 767px) {
    body {
        background-size: cover;
    }
}


@media (max-width: 1000px){
  #mainLogo{
    padding-left: 10px;
  }

  #mainNav{
    padding-right: 10px;
  }

}


/* ======================== SPECIAL RULE SET ROLL OVERS ON PORTFOLIO PIECES == */

.skillsUsed, .jobType{ display:none;}

@media all and (min-width: 767px ){

  .skillsUsed, .jobType{ display:block;}

  .midSecVideo{
    opacity: .6;
  }
  
  
  .videoBox{
    background: #F15A25;
    
  }
  
  .skillsUsed{
    position:absolute;
    bottom:10px;
    left:20px;
    transform: translate(-0%, -50%);
    opacity: 0;
    color:#fff;
    font-size:20px;
    padding:0px;
    z-index:9000;
    max-width:320px;
  
    font-family: 'Electrolize', sans-serif;
    font-size:10px;
    text-transform: uppercase;
  
    transition: opacity 300ms ease-in-out 0ms;
  
  }
  
  .videoBox:hover .skillsUsed{
    transition: opacity 300ms ease-in-out 0.7s;
    opacity: 1;
  }  
  
  .jobType{
    position:absolute;
    top:25px;
    left:20px;
    transform: translate(-0%, -50%);
    opacity: 0;
    color:#fff;
    font-size:14px;
    padding:0px;
    z-index:9000;
  
    font-family: 'Electrolize', sans-serif;
    font-size:12px;
    text-transform: uppercase;
  
    transition: opacity 300ms ease-in-out 0ms;
  
  }  

  .homepageFeaturedTextW h1{transition: 300ms ease-in-out ;}

  .homepageFeaturedTextW h1,   .homepageFeaturedTextW h2{transition: 300ms ease-in-out ;}

  .videoBox:hover .homepageFeaturedTextW h1, .videoBox:hover .homepageFeaturedTextW h2{
    transform: translateY(-20%);
    opacity: 1;
    background: #f15b25c8 !important;
  }
  
  
  .videoBox:hover .jobType{
    transition: opacity 300ms ease-in-out .50s;
    opacity: 1;
  }
}


/* =================================================================================== //
                                           d8b      888                   
                                           Y8P      888                   
                                                    888                   
 .d88b.  888  888  .d88b.  888d888 888d888 888  .d88888  .d88b.  .d8888b  
d88""88b 888  888 d8P  Y8b 888P"   888P"   888 d88" 888 d8P  Y8b 88K      
888  888 Y88  88P 88888888 888     888     888 888  888 88888888 "Y8888b. 
Y88..88P  Y8bd8P  Y8b.     888     888     888 Y88b 888 Y8b.          X88 
 "Y88P"    Y88P    "Y8888  888     888     888  "Y88888  "Y8888   88888P' 
// ==================================================================================== */







/* =================================================================================== //
888                     888    d8b                   
888                     888    Y8P                   
888                     888                          
888888 .d88b.  .d8888b  888888 888 88888b.   .d88b.  
888   d8P  Y8b 88K      888    888 888 "88b d88P"88b 
888   88888888 "Y8888b. 888    888 888  888 888  888 
Y88b. Y8b.          X88 Y88b.  888 888  888 Y88b 888 
 "Y888 "Y8888   88888P'  "Y888 888 888  888  "Y88888 
                                                 888 
                                            Y8b d88P 
                                             "Y88P"  
// ==================================================================================== */



#emailPageMidSecInnnerWrapper{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-around;
  /* gap:10px; */
  row-gap: 100px;
}

#emailPageMidSecInnnerWrapper img{
  width:90%;
  height:auto;
  display: block;
  margin:0px auto;
}