/* ----------------------------------
Name:style.css
----------------------------------

/* ==========================================================================
Reset
========================================================================== */

html { font-size: 100%; height: 100%; width: 100%; outline: none; }
body { background: #FFF; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 400; color: #FFFFFF; line-height: 22px; text-align: left; overflow-x: hidden; margin: auto; width: 100%; height: 100%; outline: none; }
/* Internet Explorer 10 in Windows 8 and Windows Phone 8 Bug fix */
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

a, 
button { -webkit-transition: all 400ms ease-in-out 0s; transition: all 400ms ease-in-out 0s; }
a:hover { text-decoration: none; color: #ffb400; }
ul, 
ol { padding-left: 0; margin: 0 }
li { list-style: none; }
input[type="text"], 
input[type="email"], 
input[type="search"], 
input[type="password"] { box-shadow: none; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; }
.btn:focus, 
.btn:active { outline: inherit; }
textarea:focus, 
input:focus { color: #ffffff; }
iframe, 
embed, 
object { max-width: 100%; width: 100%; height: 100%; }
/* Other Fixes */
*, 
*:before, 
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0;  -webkit-border-radius: 0; border-radius: 0; border-spacing: 0; -webkit-appearance: none; -moz-appearance: none; appearance: normal; -webkit-tap-highlight-color: transparent; outline: 0 !important; -webkit-touch-callout: none; transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; }
::selection { color: #fff; background: #a3a3a3; }
::-moz-selection { color: #fff; background: #a3a3a3; }
::-webkit-input-placeholder { color: #838383; text-overflow: ellipsis; }
:-moz-placeholder { color: #838383 !important; text-overflow: ellipsis; opacity: 1; }
::-moz-placeholder { color: #838383 !important; text-overflow: ellipsis; opacity: 1; }
:-ms-input-placeholder { color: #838383 !important; text-overflow: ellipsis; opacity: 1; }

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal}
.fa {display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
.fa-angle-down:before { content: "\f107" }
.fa-angle-up:before { content: "\f106"}


/* ==========================================================================
Typography
========================================================================== */


.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


h1 { font-size: 40px; line-height:50px; font-weight: 700; text-transform: uppercase; }
h2 { font-size: 45px; line-height: 55px; font-weight: 300; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
h3 { font-size: 24px; line-height: 32px; font-weight: 300; margin-top: 0px; }
h4 { font-size: 25px; line-height: 46px; font-weight: 400; font-family: 'Oswald', sans-serif; }
h5 { font-size: 21px; line-height: 29px; font-weight: 400; font-family: 'Oswald', sans-serif;  }
h6 { font-size: 20px; line-height: 30px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; }

/* Hero */
.hero-img {padding-top: 40px; padding-bottom: 40px; -webkit-animation-duration:1000ms;animation-duration:1000ms;}
.hero-box { padding-top: 120px;}
.hero-box-80 { padding-top: 80px;}
.hero-copy  { font-size: 18px; line-height: 29px; font-weight: 400; padding-top:10px; padding-bottom: 35px}

.white-text { color: #ffffff !important; }
.gray-text { color: #AAAEB4 !important; }
.dk-gray-text { color: #484F59 !important; }
.lg-line-height  { line-height: 30px;}
.md-line-height  { line-height: 26px;}
.divider-transparent { background-color: rgba(235, 235, 235, 0.5); height: 1px; width: 100%; margin: 16px 0 16px; }
.w400 { font-weight: 400 }
.w600 { font-weight: 600 }
.padBot30 {padding-bottom: 30px;}
.marBot { margin-bottom: -20px;}

/* Float */
.float-left { float: left !important; }
.float-right { float: right !important; }
.clear-both { clear: both !important; }

/* ==========================================================================
Background Color   .purple-bg { background-color: #8F4878; height: 100vh;}
========================================================================== */

.dk-blue-bg { background-color: #0096E2; }
.blue-bg { background-color: #4FB2FF; }
.lt-blue-bg { background-color: #95D1FF; }
.gray-bg { background-color: #6D727A; }
.dk-gray-bg { background-color: #484F59; }
.lt-gray-bg { background-color: #E5E8ED; }
.purple-bg { background-color: #8F4878;}
.dk-purple-bg { background-color: #6D3D5F; }
.md-gray-bg { background-color: #ACAEB2; }
.yellow-bg { background-color: #FFCF43; }
.lt-yellow-bg { background-color: #FDE9B3; }
.dk-white-bg { background-color: #E5E8ED; }
.dk-yellow-bg { background-color: #DEA30E; }
.dkr-gray-bg { background-color: #363B43; }
.md-yellow-bg { background-color: #FCDB80; }
.white-bg { background-color: #F5F6F8; }


/* ==========================================================================
9. Header
========================================================================== */

/* Sticky Navigation */
nav { width: 100%; top: 0px; z-index: 99; padding-top: 25px; padding-bottom: 10px; transition: all 400ms ease-in-out 0s; -webkit-transition: all 400ms ease-in-out 0s; -moz-transition: all 400ms ease-in-out 0s; }
.shrink-nav { min-height: 80px; padding-top: 14px; border-bottom: 1px solid #e5e5e5;}
.nav-transparent .logo-dark { display: none; }
.shrink-nav.nav-dark, 
.shrink-nav.nav-transparent { background: rgba(255, 255, 255, 1); }
.sticky-nav { position: fixed; top: 0px; background: #484F59; min-height: 80px; }
.sticky-navigation .main-navigation li a { line-height: 30px; font-weight: 400; font-size: 13px; text-transform: lowercase; max-height: 34px; letter-spacing: 0.5px; }


/* Main Navigation */
.logo-light { display: inline-block; float: none }
.navbar-fixed-top .nav > li > a:hover { color: #FFF; }
.shrink-nav .logo-light { display: none; }
.shrink-nav .logo-dark { display: inline-block; margin-top: 3px; }
.shrink-nav .navbar-nav > li > a { color: #000; margin-top: 13px; }
.shrink-nav .nav > li > a:hover { color: #000; }
.logo-dark { width: 220px !important; }
.logo-white { width: 220px !important; margin-top: -5px; }


/* Dropdown Menu */
.dropdown:hover .dropdown-menu { display:inline-table;  transition: none;}
.dropdown .dropdown-menu .sub-menu { float:left; display:none; right:auto; left:233px; top:0; }
.dropdown-menu > li > a {  font-size: 13px; text-transform: uppercase; font-weight: 600; transition: none; }

.active-page { border-bottom: 2px solid #ACAEB2;  -webkit-transition: height 0.01s; -moz-transition: height 0.01s; -ms-transition: height 0.01s; -o-transition: height 0.01s; transition: height 0.01s;}

/* Intro */
header .intro-section { display: none; margin: auto; text-align: center;}
header .intro-section .intro {margin-bottom: 36px; letter-spacing: 1px; line-height: 90px; width: 100%;  }
header .intro-section .buttons { margin: 17px auto; float: none; display: inline-block; }
.highlight { background-color: transparent; font-size: 60px; line-height: 60px; font-weight: 300; padding: 0; color: #000; }
.no-transition { -webkit-transition: height 0.01s; -moz-transition: height 0.01s; -ms-transition: height 0.01s; -o-transition: height 0.01s; transition: height 0.01s;}

/* Header */
header .full-screen { width: 100%; height: 100%; min-height: 1000px; }
.nav > li > a { margin: 10px 23px 10px; font-size: 13px; }
.nav > li.last > a { margin: 10px 0 10px 23px; }
.shrink-nav .nav > li.last > a { margin-top: 12px; }

.main-navigation .col-md-3 { padding-left: 0; }
.gray-bar { width: 100%; height: 90px; background-color: #484F59; margin-top: 0px; margin-left: 0px; }
.navbar-inverse .navbar-nav > li.current > a, 
.navbar-inverse .navbar-nav > li > a:hover { border-bottom: 2px solid #ffb400;  -webkit-transition: height 0.01s; -moz-transition: height 0.01s; -ms-transition: height 0.01s; -o-transition: height 0.01s; transition: height 0.01s;}
.header-yellow { background-repeat: no-repeat; background-position: center top; background-image: url(../images/kms-creative-designs-desk-hero.png); -webkit-background-size: cover; background-size: cover; width: 100%; -webkit-transition: ease-in-out; -moz-transition: ease-in-out; -o-transition: ease-in-out; transition: ease-in-out; background-color: #FFCF43; }
header .intro-section { padding: 45px 0 60px 0; z-index: 3; position: absolute; left: auto; right: auto; width: 100%; top: 31%; color: #000;  }
.highlight strong { display: block;}
header .intro-section .intro { margin-bottom: 20px; line-height: 72px; }

.highlight-divider { background-color: #000000; height: 1px; width: 45%; margin-top: 20px; margin-right: auto; margin-left: auto; margin-bottom: 0px;}
.treatments { display: table; margin-left: auto; margin-right: auto; margin-top: 12px; margin-bottom: 35px; padding-left: 5px; padding-right: 5px; font-size: 16px; color: #000; letter-spacing: 1.5px; background-color: #FFCF43;}

.highlight-button, 
.highlight-button:focus { background-color: #4FB2FF; border: 2px solid #4FB2FF; color: #FFF; font-family: "Oswald", sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 2px; padding: 8px 18px; text-decoration: none; text-transform: uppercase; cursor: pointer; }
header .intro-section .highlight-button:hover { background-color: #3FA1DD; border: 2px solid #3FA1DD; color: #FFF; }

.hero img {}
	.hero-600 img { display: none;}

/* ==========================================================================
Buttons
========================================================================== */

.button-blue-yellow, .button-blue-yellow:focus { background-color: #4FB2FF; color: #FFF; font-family: "Oswald", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 1px; padding: 10px 18px; text-decoration: none; text-transform: uppercase; cursor: pointer; float: none; margin-top: 100px; }
.button-blue-yellow:hover { background-color: #FFCF43; color: #484F59; }

/* Button for process */
.md-button { display: inline-block; font-size: 14px; padding: 6px 20px;  text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: #484F59; font-weight: 600; cursor: pointer; background-color: #FFCA1A; margin-top: 20px; margin-bottom: 30px; border-style: none; }
.md-button:hover { color: #FFF; background-color: #6D727A;  text-decoration: none; opacity: 0.8; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }
.md-button:focus { text-decoration: none; }

.button-yellow-purple, .button-yellow-purple:focus { background-color: #FFCF43; color: #484F59; font-family: "Oswald", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 1px; padding: 10px 18px; text-decoration: none; text-transform: uppercase; cursor: pointer; float: none; margin-top: 100px; }
.button-yellow-purple:hover { background-color: #8F4878; color: #FFF; }

.button-purple-blue, .button-purple-blue:focus { background-color: #8F4878; color: #FFF; font-family: "Oswald", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 1px; padding: 10px 18px; text-decoration: none; text-transform: uppercase; cursor: pointer; float: none; margin-top: 100px; }
.button-purple-blue:hover { background-color:  #4FB2FF; color: #FFF; }

.button-yellow-gray, .button-yellow-gray:focus { background-color: #FFCF43; color: #484F59; font-family: "Oswald", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 1px; padding: 10px 18px; text-decoration: none; text-transform: uppercase; cursor: pointer; float: none; margin-top: 100px; }
.button-yellow-gray:hover { background-color: #6D727A; color: #E5E8ED; }

.button-yellow-blue, .button-yellow-blue:focus { background-color: #FFCF43; color: #484F59; font-family: "Oswald", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 1px; padding: 10px 18px; text-decoration: none; text-transform: uppercase; cursor: pointer; float: none; margin-top: 100px; }
.button-yellow-blue:hover { background-color:  #4FB2FF; color: #FFF; }

.button-blue-yellow, .button-blue-yellow:focus { background-color: #4FB2FF; color: #FFF; font-family: "Oswald", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 1px; padding: 10px 18px; text-decoration: none; text-transform: uppercase; cursor: pointer; float: none; margin-top: 100px; }
.button-blue-yellow:hover { background-color:  #FFCF43; color: #484F59; }


/* ==========================================================================
Sections General
========================================================================== */

section { overflow: hidden;  }
.sectionHead { color: #FFFFFF; padding-top: 10px; padding-bottom: 15px; clear: both; text-align: center; margin-left: auto; margin-right: auto; }
.sectionMain { margin-top: 50px; margin-bottom: 50px; }
.marBot { margin-bottom: 20px;}

.video-home {padding-top: 10%; float: right;}

/* ==========================================================================
 Services
========================================================================== */
.serviceBox { float: left; margin-bottom: 20px; margin-top: 20px; color: #FFFFFF;  text-align: left; height: 430px; position: relative;}
.serviceImg { float: none; width: 85%;}
.service-title { padding-top: 5px; }
.service-copy { padding-bottom: 20px; margin-top: -5px;}
.service-button {position: absolute; bottom: 5px; }

/* ==========================================================================
 Services
========================================================================== */
.designServiceBox { float: left; margin-bottom: 20px; margin-top: 20px; color: #FFFFFF;}
.designService-copy {padding-bottom: 20px; margin-top: -5px;}
.designServiceImg { padding-left: 0px; padding-right: 20px;}
.designService-title {padding-top: 10px;}

/* ==========================================================================
Work
========================================================================== */

/* Portfolio Figcaption */
.slideshow * { transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s; }
.portfolio-item { overflow: hidden; }
.grid { max-width: 100%; margin: 0 auto; list-style: none; text-align: left; }

.portfolio-figure figcaption { position: absolute; bottom: 5px; left: 10px; box-shadow: 0 -5px 0 0 rgba(255, 255, 255, 0.3); }
.portfolio-figure .title { line-height: 37px; margin: 0; padding: 0; }
.portfolio-figure figcaption a { display: inline-block; transition: all 400ms ease-in-out 0s; position: absolute; bottom: 20px; right: 20px; }
.portfolio-figure { overflow: hidden; background-color: #000000; }
.portfolio-figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; max-width: 100%; }

.portfolio-figure figcaption { height: 75px; width: 100%;  padding: 10px; background-color: #484F59; }
.portfolio-figure figcaption:hover { background-color: #2A2E34; }
.portfolio { width: 100%; display: table; }
.portfolio-item { float: left; padding: 0 0; width: 24.96%; max-width: 25%; }
no-touch .portfolio-figure:hover img, 
.portfolio-figure:hover img { opacity: 0.8; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }

.portfolio-figure .title { color: #FFF; font-size: 24px; line-height: 35px; margin-bottom: 3px; }
.portfolio-figure figcaption span { color: #FFF; text-transform: uppercase; font-family: 'Open Sans' , sans-serif; font-size: 16px;}
.portfolio-figure figcaption i { font-size: 32px; position: relative; color: #FFCA1A; top: 0px; right: 0px; }

.fix-margin {margin-left: 10px;}
.motionwork { float: left; padding: 0 0; width: 24%; max-width: 25%; }
.motionwork h4:hover { background-color: #2A2E34; }
.motionwork h4 {font-size: 24px; line-height: 33px; background-color: #484F59; height: 75px; width: 100%;  padding: 20px 10px 40px 10px; }
.motionwork a {color: #fff;}
.motionwork a:hover {color: #fff;}
.motionwork i { font-size: 32px; color: #FFCA1A; padding-right: 5px; float: right; line-height: 40px;}
.motionwork p { color: #484F59; font-size: 14px; font-weight: 600; padding-top: 25px; padding-left: 15px;}


/* ==========================================================================
11. Work Popup
========================================================================== */

.grid-gallery { width: 100%; }

/* General Style */
.popup-slide { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 150px); transform: translate3d(0, 0, 150px); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.popup-slide figure { margin: 0; }
.popup-slide figure img { display: block; float: left; }
.popup-slide .title { color:  #ffb400; display: inline-block; font-size: 50px; font-weight: 400; letter-spacing: 1px; margin: 0; padding: 0 0 20px; width: 100%; line-height: 50px; }

.popup-slide figure { background-color: #000; }
.popup-navigation span.nav-next:hover, .popup-navigation span.nav-prev:hover { color: #000; }

.popup-slide .right-part { color: #656565; }
span.nav-close:before { color: #FFF; }

/* Grid Style */
.grid { margin: 0 auto; }
.grid li { float: left; cursor: pointer; padding-top: 5px; padding-left: 10px; padding-bottom: 5px; }
.grid figure { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }

/* Slideshow Style */
.slideshow { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; opacity: 0; visibility: hidden; overflow: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; padding: 0; background-color: #FFF; }
.slideshow-open .slideshow { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.popup-slide.animatable li { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; }
.slideshow-open .popup-slide { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/* Popup Slide */
.popup-slide .popup-slideshow { right: 0; margin: 0; position: absolute; top: 0; visibility: hidden; width: 100%; height: 100%; display: none; }
.popup-slide .popup-slideshow.show { visibility: visible; }
.popup-slide .popup-slideshow.current:after { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s; }
.popup-slide figure { width: 100%; height: 100%; background: #fff; overflow: hidden; }
.popup-slide span { display: table; font-size: 14px; font-weight: 300; line-height: 20px; }

.popup-line { border-bottom: 1px solid #6D727A; margin-top: 5px; margin-right: 0; margin-left: 0; margin-bottom: 5px; width: 100%; }
.extra-margin { margin-top: 30px; }
.popup-slide .category { display: inline-block; font-size: 24px; font-weight: 300; padding-top: 5px; padding-right: 0; padding-left: 0; padding-bottom: 40px; width: 100%; color: #6D727A; line-height: 24px; text-transform: uppercase; }
.popup-slide .description { display: inline-block; font-size: 17px; text-align: left; font-style: italic; width: 100%; line-height: 24px; padding-bottom: 30px; color: #6D727A; }
.popup-slide .slide-number a { color: #8F4878; display: inline-block; font-size: 16px; font-weight: 600; 	text-align: left; padding-top: 15px;  width: 100%; }
.popup-slide .slide-number a:hover { color: #4FB2FF;  }

/* Navigation */
.popup-navigation { width: 100%; position: fixed; border: 0 }
.popup-navigation span { position: fixed; z-index: 1000; color:#FFCA1A; text-align: center; cursor: pointer; font-size: 30px; transition: all 400ms ease-in-out 0s; visibility: visible !important; }
.popup-navigation span.nav-prev { right: 53.3%; top: 4%; background-color: #6D727A; font-size: 35px; padding: 4px 15px 5px 12px; transform: translateY(-50%); visibility: hidden !important; }
.popup-navigation span.nav-next { left: 46%; top: 4%; background-color: #6D727A; font-size: 35px; padding: 4px 12px 5px 15px; transform: translateY(-50%); visibility: hidden !important;}
.popup-navigation span.nav-close { padding: 8px 7px; right: 10px; top: 8px; transition: all 400ms ease-in-out 0s; }
.icon:before, 
.icon:after { font-family: 'fontawesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
span.nav-prev:before { content: "\f104"; }
span.nav-next:before { content: "\f105"; }
span.nav-close:before { content: "X"; font-family: 'Open Sans', sans-serif;  -webkit-transform: scale(1.3, 1); transform: scale(1.3, 1); display: inline-block; font-size: 26px; font-weight: 600; color: #6D727A; }


.popup-navigation span.nav-next span.copy {color: #80858F; background-color: #FFCA1A; border:solid; border-width: 3px; border-color: #FFF; padding-top: 5px; padding-bottom: 5px; margin-top: 1px; font-size: 15px; font-weight: 700;  width: 145px; visibility: visible !important;}
.popup-navigation span.nav-prev span.copy {color: #FFF; background-color: #ACAEB2; border:solid; border-width: 3px; border-color: #FFF; padding-top: 5px; padding-bottom: 5px; margin-top: 1px; font-size: 16px; font-weight: 700;  width: 35px; visibility: visible !important;}
.popup-navigation span.nav-next span.copy:hover {color: #FFF; background-color: #ACAEB2;}
.popup-navigation span.nav-prev span.copy:hover {color: #80858F; background-color: #FFCA1A;}




.popup-slider { float: left; width: 52%; overflow: hidden; height: 100%; position: absolute; }
.popup-slide .right-part { float: right; width: 48%; padding-top: 8%; padding-right: 6%; padding-left: 6%; padding-bottom: 16%; }
.right-part p { line-height: 22px; color: #6D727A; font-size: 15px;}

.popup-slider { float: left; width: 52%; overflow: visible; height: 100%; position: absolute; background-color: #E5E8ED; padding-top: 7%; padding-bottom: 7% }
i { color: #ffb400 }
.popup-slider .carousel-indicators { top: 96%; }
.popup-slider .carousel-indicators li { border: 1.7px solid #80858F; }
.popup-slider .carousel-indicators .active { background-color: #80858F; }

.controls .carousel-control { border-style: none; top: 45%; color: #80858F; padding-bottom: 10px; transition: all 400ms ease-in-out 0s; }
.controls .carousel-control.left { left: 20px;  }
.controls .carousel-control.right { right: 0;  }
.controls .carousel-control:hover {color: #55595F; }

.popup-slide .controls span { font-size: 40px; color: #FFCA1A; background-color: #6D727A; padding-left: 10px; padding-right: 10px;}
.popup-slide .controls span:hover { color: #6D727A; background-color: #FFCA1A; }

.popup-img-copy  { color: #6D727A; float: right; font-size: 16px; font-weight: 600; padding-right: 30px; margin-top: -15px; z-index: 10; }


.lazyload, .lazyloading { opacity: 0; }
.lazyloaded { opacity: 1;  transition: opacity 300ms; }

.portfolio-buttons{padding-top: 50px; text-align: center;}

.gif-item { float:left; padding-bottom: 30px; }
.video-padding {padding-bottom: 30px; }
.vid-caption {padding-top: 8px;  padding-left: 2px;  font-size: 14px; color: #555C66; line-height: 19px;}
.back-button, .back-button:focus { background-color: #FFCF43; color: #484F59; font-family: "Oswald", sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 1px; padding: 8px 18px; text-decoration: none; text-transform: uppercase; cursor: pointer; float: right; margin-top: 25px;}
header .back-button:hover { background-color: #3FA1DD; color: #FFF; }
.mograph {padding-top: 10px; padding-bottom: 50px;}
.mograph-img {width: 90%; padding-top: 15px;}
.video-js-responsive-container.vjs-hd { padding-top: 56.25%;}
.video-js-responsive-container { width: 100%; position: relative;}
.video-js-responsive-container .video-js { height: 100% !important;  width: 100% !important; position: absolute; top: 0; left: 0;}

/* Show poster when paused or stopped */
.video-js.vjs-default-skin.vjs-paused .vjs-poster { display:none !important;}
.video-js.vjs-default-skin.vjs-ended .vjs-poster {display:block !important;}
.show-more { text-align: center; padding-bottom: 30px; clear: left; }
.show-button, .show-button:focus {background-color: #FFCF43; color: #484F59; font-family: "Oswald", sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 1px; padding: 8px 18px; text-decoration: none; text-transform: uppercase; cursor: pointer; border: none;}
.show-button:hover { background-color: #3FA1DD; color: #FFF; }

/*gif stop/start styles*/
.gif-item figure { margin: 0; position: relative; cursor: pointer; }
.gif-item figure:before,
.gif-item figure:after { position: absolute; }
.gif-item figure:before {top: 40%; left: 50%; margin-left: -25px; width: 60px; height: 60px; border: 3px solid rgba(255, 255, 255, 0.7); border-radius: 30px; background-color: rgba(204, 209, 217, 0.3); font-family: 'fontawesome'; content: "\f04b"; text-align: center; padding-left:5px; line-height: 55px; font-size: 25px; color: #F5F7FA; }

.gif-item figure.play:before { display: none;}
figcaption { padding-top: 5px; padding-left: 2px; font-size: 14px; color: #ACAEB2;}


/* ==========================================================================
Process
========================================================================== */

#processContent { margin-bottom: 10px; margin-top: 20px; }
.process-head { padding-top: 20px; color: #E5E8ED; font-size: 20px; text-transform: uppercase; }
.process-category { color: #FFCA1A; margin-top: 0;}

/* Tabs */
.tabs { border-radius: 0px; margin-bottom: 35px; }
.nav-tabs { border-style: none; }
.nav-tabs li { display: inline-block; float: none; }
.nav-tabs li a { font-size: 15px; margin-right: 1px; border-radius: 0px; font-weight: 600; }
.nav-tabs li:last-child a { margin-right: 0; }
.nav-tabs li a { background: #6D727A; color: #E5E8ED; border-style: none; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; }

.nav-tabs li a:hover { border-bottom-color: transparent; box-shadow: none; background-color: #484F59; opacity: 0.8; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; }
.nav-tabs li a:active, .nav-tabs li a:focus { background: #484F59; color: #CCC; border-style: none; }

.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus { background: #484F59; color: #CCC; border-style: none; }
.tab-content { padding-top: 10px; }


/* Tab Carousel */
.carousel-inner { overflow: visible; display: inline-table; width: 100%; height: 100%;  }
.carousel-indicators li { display: inline-block; width: 22px; height: 11px; margin: 0 8px 0 0; text-indent: -99999px; cursor: pointer; border: 1px solid #AAAEB4; border-radius: 20px; visibility: visible; position: relative; left: inherit; }

.carousel-caption { position: inherit; float: left; text-align: left; width: 60%; left: 0px; }
 .carousel-indicators { position: absolute; z-index: 15; width: 100%; padding-left: 0; margin-left: 0; text-align: center; list-style: none; bottom: 50px; }
.carousel-indicators li:first-child { margin-left: 0; }
.carousel-indicators li:last-child { margin-right: 0; }
.carousel-indicators li:after { left: inherit; content: inherit; }
.carousel-indicators .active { width: 12px; height: 12px; background-color: #AAAEB4; visibility: visible; border: 1px solid #AAAEB4;}

.carousel-caption p { font-size: 15px; color: #AAAEB4; font-weight: 400; padding-left: 25px; padding-right: 25px; }
.carousel-caption span { font-size: 16px; text-transform: uppercase; margin-bottom: 65px; display: inline-block; }
.caption-line { margin: 15px auto 30px; z-index: 1; width: 80%; height: 1px; background: #AAAEB4; }

.carousel-control { border-style: none; font-size: 40px; top: 30%; color: #AAAEB4; }
.carousel-control.left { left: -10px; }
.carousel-control.right { right: 2px; }
.carousel-control:hover { background-color: transparent; }

.process-copy { padding-right: 0px; }

p .lg-number { float: left; font-size: 55px; color: #FFCA1A; line-height: 60px; padding: 4px; margin-right: 15px; font-family: 'Oswald'; font-weight: 300; }


/* Client Carousel */
.clients-logo {  padding-right: 20px; padding-bottom: 80px;}
.client-type { font-size: 21px; line-height: 36px; color: #484F59; font-weight: 400; text-align: center; padding-bottom: 25px; }
.sectionBottom { margin-top: 50px; }
#clients-slider .carousel-indicators li {border: 1.7px solid #6D727A; }
#clients-slider .carousel-indicators .active { background-color: #6D727A; }
#slide1 {background-image: url(../images/client-slide1.png);}
#slide2 {background-image: url(../images/client-slide2.png);}
#slide3 {background-image: url(../images/client-slide3.png);}
#slide1, #slide2, #slide3 {background-repeat: no-repeat; background-position: top, center; margin-bottom: 100px; background-size: contain; width: 100%; height: 110px; margin-top: 20px;}


/* portfolio tabs - fix for gif section */
.gif-nav li a:hover, .gif-nav li a:focus { background: #363B43;}
.gif-nav li.active a {background: #363B43;}
.gif-nav li.active a:hover {background: #363B43;}

.whiteLink {color: #AAAEB4;}

/* ==========================================================================
About
========================================================================== */

.history-list li { line-height: 150%; }
.history-box { padding-top: 20px; }
.history-copy { font-size: 15px; color: rgba(235, 235, 235, 0.8) }
.about-box { margin-left: 0px; margin-right: 0px;}
.about-copy { color: #484F59; line-height: 23px;  padding-bottom: 0px;}
.about-img { float: right; width: 35%; padding-left: 50px; padding-top: 50px; padding-bottom: 50px;}

/* Skills */
.client-list {padding-left: 70px;}
.progress { background-color: #A56D93; }
.progress-bar { color:  #575757; padding-top: 37px; background-color: #B78AA9; }
.progress-name { text-transform: uppercase; padding-top: 30px; margin: 0 0 7px 0; font-size: 14px; letter-spacing: 1px; }
.count h3 { padding-top: 0 !important; }

/* ==========================================================================
Scroll To Top / Scroll Down
========================================================================== */

.scrollToTop { display: none; font-weight: bold; height: auto; padding: 0; position: fixed; right: 45px; text-align: center; text-decoration: none; top: 94%; width: auto; background-color: #161616; z-index: 9999; border-radius: 6px; border: 1px solid #000 }
.scrollToTop i { font-size: 32px; margin: 2px 10px 4px 10px; color: #FFF; }
.scrollToTop:hover { opacity: 0.5; }
.scrollToTop:hover i { position: relative; }
.scrollDownWrap { bottom: 40px; left: 0; margin: 0 auto; min-height: 41px; position: absolute; right: 0; text-align: center; width: 90px; z-index: 9; }
.scrollDown a { text-decoration: none; text-transform: uppercase; color: #fff; -moz-transition: color 500ms ease; -o-transition: color 500ms ease; -webkit-transition: color 500ms ease; transition: color 500ms ease; }
.scrollDown a:hover { color: #fff; -moz-transition: color 500ms ease; -o-transition: color 500ms ease; -webkit-transition: color 500ms ease; transition: color 500ms ease; }
.scrollDown i {display: block; margin: 0 auto; position: relative; -webkit-animation: iconFloat 0.8s infinite linear; -moz-animation: iconFloat 0.8s infinite linear; -ms-animation: iconFloat 0.8s infinite linear; -o-animation: iconFloat 0.8s infinite linear; animation: iconFloat 0.8s infinite linear; padding: 0; color: #484F59; font-size: 65px; opacity: 0.9}
.scrollDown:hover i {opacity: 0.5}
.scrollDown i:before { font-family: 'FontAwesome'; }

/* ==========================================================================
Contact
========================================================================== */

.form-group form { transition: all 800ms ease-in-out 0s; -moz-transition: all 800ms ease-in-out 0s; -webkit-transition: all 800ms ease-in-out 0s; -o-transition-duration: all 800ms ease-in-out 0s; }
#success { background-color: #fff; border: 2px solid #ffb400; color: #ffb400; display: none; font-size: 20px; font-family: "Oswald",sans-serif; line-height: 58px; text-align: center; text-transform: uppercase; }

.contact-text { display: table; width: 100%; margin: 0 0; }

.icon-list { margin-bottom: 20px; padding-left: 15px; padding-right: 15px;}
.icon-list li { font-size: 18px; text-align: center;}
.icon-list i { font-size: 22px; margin-right: 20px; color: #FFFFFF;}
.icon-list li a { color: #FFFFFF; text-decoration: none; font-weight: 600; }
.icon-list li a:hover { text-decoration: underline; }
.contact-left {padding-top: 30%; padding-right: 50px;}
.phone { background-image: url(../images/phone.png); padding-top: 145px; padding-left: 70px; padding-right: 70px; background-repeat: no-repeat; background-position: top, center; margin-top: 35px; margin-bottom: 35px; float: right; background-size: 100% 100%;}

.contact-logo { margin-bottom: 15px; width: 35%; margin-left: auto; margin-right: auto;}
textarea.form-control { height: auto; min-height:120px;  }
.divider-contact { background-color: rgba(242,243,244,0.50); height: 1px; width: 100%; margin: 8px 0 8px;}
.contact-copy-box {	padding-right: 50px;}
.contact-copy { line-height: 25px; padding-bottom: 15px;}
.contact-copy-last { line-height: 25px; padding-bottom: 50px; padding-right: 50px;}
.small-button { display: inline-block; font-size: 15px; padding: 7px 20px; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: #FFF; font-weight: 600; cursor: pointer; background-color: #8F4878; margin-top: 10px; margin-bottom: 130px; border-style: none;}
.small-button:hover { color: #FFF; background-color: #6D3D5F;  text-decoration: none; }
.small-button:focus { text-decoration: none; }
.domain::before { content: "\0040"; }

/* ==========================================================================
 Footer
========================================================================== */

footer { padding: 30px 0 0; }
.copy {margin: 7px auto 25px; color: #A3A9B2;}
#footer { background-color: #363B43; }
.footer-phone {color: #A3A9B2;}
footer a:hover {color: #A3A9B2;}

 .email-reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
    display: inline-block;
  }

/* Anchor div to adjust for top nav bar */
a.anchor {display: block; position: relative; top: -79px; visibility: hidden;
}
.animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}
@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}


.homeLink ul {
	padding-top: 10px;
}