/****************

        Handsome CSS
        Version 2.0
        By Themanoid

        Table of Contents

        00         Presets
        01         General
        02         Layout
        03         Typography
        04         Element styles
        05         Portfolio
        06  Services
        07  Cotnact
        08  Lightbox
        09  Team
        10  Pricing Tables
        11  Dark mode

*****************/
/*         
        00         
        Presets
*/
::selection { color: white; background: black; }

::-moz-selection { color: white; background: black; }

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/*         
        01        
        General         
*/
html, body { font-size: 16px; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 100%; min-height: 100%; width: 100%; min-width: 100%; }
@media screen and (max-width: 620px) { html, body { font-size: 13px; } }

body { overflow-y: scroll; }

#loader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; }
#loader .bar { position: fixed; top: 50%; left: 0; height: 1px; width: 0; background: #777; }

.container-fluid { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: opacity 2s; -moz-transition: opacity 2s; -o-transition: opacity 2s; transition: opacity 2s; }
.container-fluid.inloading { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
.container-fluid.hide { display: none; }

/*         
        02        
        Layout         
*/
.container-fluid { min-height: 100%; height: 100%; padding: 0; }
.container-fluid .row { max-width: 1200px; width: 100%; margin: 0 auto; position: relative; }
.container-fluid header { position: absolute; bottom: 0; left: 0; right: 0; height: 51px; padding: 0 50px; z-index: 99; background: white; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; transition: background 0.2s; }
.container-fluid header.affix { position: fixed; top: 0; bottom: auto; background: #fff; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.container-fluid header .row { padding: 0 15px; }
.container-fluid header .row .col-xs-4 { padding: 0; }
@media screen and (max-width: 620px) { .container-fluid header .row { padding: 0; } }
.container-fluid header #branding { line-height: 48px; width: auto; }
.container-fluid header nav#main-nav { position: absolute; top: 0; left: 0; width: 100%; text-align: center; }
.container-fluid header nav#main-nav .trigger { float: right; height: 30px; width: 30px; margin-top: 10px; margin-bottom: 5px; position: relative; display: none; }
.container-fluid header nav#main-nav .trigger .bar { width: 30px; height: 2px; background: #222; top: 13px; position: absolute; }
.container-fluid header nav#main-nav .trigger .bar:first-child { top: 5px; }
.container-fluid header nav#main-nav .trigger .bar:last-child { top: auto; bottom: 7px; }
.container-fluid header nav#main-nav ul { list-style: none; padding: 0; margin: 0; width: 100%; text-align: center; }
.container-fluid header nav#main-nav ul li { padding: 0; border-left: 1px solid rgba(0, 0, 0, 0.3); display: inline-block; }
.container-fluid header nav#main-nav ul li:last-child { border-right: 1px solid rgba(0, 0, 0, 0.3); }
.container-fluid header nav#main-nav ul li a { line-height: 51px; padding: 0 15px; display: inline-block; color: #222; font-size: .8em; text-transform: uppercase; letter-spacing: 1px; -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; transition: background 0.5s; }
.container-fluid header nav#main-nav ul li a:hover, .container-fluid header nav#main-nav ul li a.active { background: rgba(0, 0, 0, 0.2); text-decoration: none; }
@media screen and (max-width: 1000px) { .container-fluid header nav#main-nav ul li a { background: rgba(255, 255, 255, 0.2); } }
.container-fluid header #social-nav ul { width: auto; position: absolute; top: 0; right: 0; list-style: none; margin: 0; padding: 0; text-align: right; }
@media screen and (max-width: 1000px) { .container-fluid header #social-nav ul { display: none; } }
.container-fluid header #social-nav ul li { display: inline-block; }
.container-fluid header #social-nav ul li a { line-height: 51px; padding: 0 10px; color: #222; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; }
.container-fluid header #social-nav ul li a:hover { text-decoration: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.container-fluid header #social-nav ul li:last-child a { padding: 0 0 0 10px; }
@media screen and (max-width: 1000px) { .container-fluid header { padding: 0; }
  .container-fluid header #branding { margin-left: 50px; }
  .container-fluid header .trigger { margin-right: 60px; }
  .container-fluid header.affix nav#main-nav ul { position: relative; margin-top: 50px; }
  .container-fluid header.affix nav#main-nav ul li { border: 0; }
  .container-fluid header nav#main-nav .trigger { display: inline-block; position: absolute; right: 15px; cursor: pointer; }
  .container-fluid header nav#main-nav ul { display: none; position: absolute; bottom: -1px; width: 100%; }
  .container-fluid header nav#main-nav ul li { border: 0; display: block; background: #111; padding: 0; margin: 0; }
  .container-fluid header nav#main-nav ul li:last-child { border: 0; }
  .container-fluid header nav#main-nav ul li a { display: block; color: #fff; line-height: 35px; } }
@media screen and (max-width: 1000px) and (max-width: 620px) { .container-fluid header #branding { margin-left: 15px; } }
@media screen and (max-width: 1000px) and (max-width: 620px) { .container-fluid header .trigger { margin-right: 0; } }
.container-fluid section { margin: 0; width: 100%; margin-bottom: -6px; padding: 50px; position: relative; display: inline-block; overflow: hidden; height: 100%; background-size: cover; }
@media screen and (min-width: 992px) { .container-fluid section { min-height: 100%; height: auto; } }
@media screen and (max-width: 620px) { .container-fluid section { padding: 30px 15px; height: auto; } }
.container-fluid section.full { height: 100%; }
.container-fluid section .border-left { background: rgba(0, 0, 0, 0.3); position: absolute; top: 50px; left: 50px; z-index: 5; width: 1px; bottom: 52px; }
@media screen and (max-width: 620px) { .container-fluid section .border-left { display: none; } }
.container-fluid section .border-right { background: rgba(0, 0, 0, 0.3); position: absolute; top: 50px; right: 50px; z-index: 5; width: 1px; bottom: 52px; }
@media screen and (max-width: 620px) { .container-fluid section .border-right { display: none; } }
.container-fluid section .border-top { background: rgba(0, 0, 0, 0.3); position: absolute; top: 49px; left: 50px; z-index: 5; height: 1px; right: 50px; }
@media screen and (max-width: 620px) { .container-fluid section .border-top { display: none; } }
.container-fluid section .border-bottom { background: rgba(0, 0, 0, 0.3); position: absolute; bottom: 51px; left: 50px; z-index: 5; height: 1px; right: 50px; }
@media screen and (max-width: 620px) { .container-fluid section .border-bottom { display: none; } }
.container-fluid section .flexslider { left: 0; right: 0; bottom: 0; top: 0; position: absolute; overflow: hidden; border: 0; margin: 0; background: transparent; z-index: 4; font-size: 1.5em; display: inline-block; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; -ms-box-shadow: 0 0 0; box-shadow: 0 0 0; }
.container-fluid section .flexslider .flex-direction-nav a { background: transparent; width: 50px; height: 50px; -webkit-text-shadow: 0 0 0 transparent; -moz-text-shadow: 0 0 0 transparent; -ms-text-shadow: 0 0 0 transparent; text-shadow: 0 0 0 transparent; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; transition: background 0.2s; }
.container-fluid section .flexslider .flex-direction-nav a:before { font-family: 'FontAwesome'; font-size: 14px; height: 50px; width: 50px; text-align: center; line-height: 50px; color: #222; border-top: 1px solid rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
.container-fluid section .flexslider .flex-direction-nav a.flex-prev { left: 0; }
.container-fluid section .flexslider .flex-direction-nav a.flex-prev:before { content: '\f177'; }
@media screen and (max-width: 620px) { .container-fluid section .flexslider .flex-direction-nav a.flex-prev:before { border-right: 1px solid rgba(0, 0, 0, 0.3); } }
.container-fluid section .flexslider .flex-direction-nav a.flex-next { right: 0; }
.container-fluid section .flexslider .flex-direction-nav a.flex-next:before { content: '\f178'; }
@media screen and (max-width: 620px) { .container-fluid section .flexslider .flex-direction-nav a.flex-next:before { border-left: 1px solid rgba(0, 0, 0, 0.3); } }
.container-fluid section .flexslider .flex-direction-nav a:hover { background: rgba(0, 0, 0, 0.1); }
.container-fluid section .flexslider ul.slides { position: relative; }
.container-fluid section .flexslider ul.slides li { width: 100%; height: 100%; background: #fff; position: relative; display: inline-block; overflow: hidden; }
.container-fluid section .flexslider ul.slides li p, .container-fluid section .flexslider ul.slides li h1, .container-fluid section .flexslider ul.slides li h2, .container-fluid section .flexslider ul.slides li h3, .container-fluid section .flexslider ul.slides li h4, .container-fluid section .flexslider ul.slides li h5, .container-fluid section .flexslider ul.slides li h6 { color: #333; }
.container-fluid section .flexslider ul.slides li .box { left: 0; right: 0; bottom: 0; top: 0; position: absolute; margin: auto; width: 500px; height: auto; padding: 0; z-index: 9; }
.container-fluid section .flexslider ul.slides li .box img { display: inline-block; width: auto; }
@media screen and (max-width: 1000px) { .container-fluid section .flexslider ul.slides li .box { width: 65%; left: 0; }
  .container-fluid section .flexslider ul.slides li .box img { max-width: 90%; width: auto; } }
.container-fluid section .flexslider ul.slides li .centered { border: 0px solid rgba(0, 0, 0, 0.2); text-align: center; }
.container-fluid section .flexslider ul.slides li .centered .vcenter { margin: auto; }
@media screen and (max-width: 1000px) { .container-fluid section .flexslider ul.slides li .centered { display: table; margin: auto; }
  .container-fluid section .flexslider ul.slides li .centered .vcenter { display: table-cell; margin: auto; } }
.container-fluid section .flexslider ul.slides li .content { position: relative; z-index: 5; max-width: 500px; width: auto; }
.container-fluid section .flexslider ul.slides li .content img { max-width: 100% !important; width: auto !important; display: inline-block; position: relative; }
.container-fluid section .flexslider ul.slides li .bg { position: absolute; z-index: 0; }
.container-fluid section .flexslider ul.slides li .bg img { z-index: -1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.container-fluid section .flexslider ul.slides li p { margin: 15px 0; }
.container-fluid section .flexslider:hover .flex-direction-nav a.flex-prev { left: 0; }
.container-fluid section .flexslider:hover .flex-direction-nav a.flex-next { right: 0; }

.flex-viewport { position: fixed; width: 100%; height: 100%; }

.flexslider .slides, .flexslider .slides > li { height: 100%; }

.bg { position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; }
.bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 75%; min-height: 75%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; }
@media screen and (max-width: 620px) { .bg img { min-width: 200% !important; } }
@media screen and (max-width: 620px) and (min-width: 992px) { .bg img { min-height: 100%; height: 100%; } }

/*         
        03        
        Typography
*/
h1, h2, h3, h4, h5, h6 { color: #222; }

h1 { font-size: 3.5em; font-weight: 100; }
@media screen and (max-width: 1000px) { h1 { font-size: 2em; } }
@media screen and (max-width: 1000px) { h1 { font-size: 1.5em; } }

h2 { font-size: 2.7em; text-transform: uppercase; letter-spacing: 4px; font-weight: 300; margin-bottom: .7em; }
@media screen and (max-width: 1000px) { h2 { font-size: 1.6em; text-align: center; } }
@media screen and (max-width: 1000px) { h2 { font-size: 1.3em; } }

h3 { font-size: 1.3em; font-weight: 600; margin-top: 30px; }
@media screen and (max-width: 1000px) { h3 { font-size: 1.1em; } }

p { font-size: 1.1em; color: #515151; line-height: 1.75em; font-weight: normal; font-weight: 400; }
@media screen and (max-width: 1000px) { p { font-size: 1.3em; } }
@media screen and (max-width: 1000px) { p { font-size: 1em; } }

strong { font-weight: bold; color: #222; }

.dark strong { color: #fff; }

/*         
        04
        Element styles
*/
.btn { padding: 10px 20px; border: 1px solid #333; position: relative; z-index: 4; display: inline-block; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; color: #333; }
.btn .fa { margin-right: 5px; }
.btn:hover { background: rgba(255, 255, 255, 0.2); color: #333; }
.btn:hover .fa { color: #333; }

.centered { display: table; width: 100%; }
.centered .vcenter { display: table-cell; vertical-align: middle; }
@media screen and (max-width: 1000px) { .centered { display: block; height: auto; margin: 0; }
  .centered .vcenter { display: block; height: auto; } }

.box { padding: 40px 60px; height: auto; }
@media screen and (max-width: 1000px) { .box { padding: 20px 0; } }
@media screen and (max-width: 620px) { .box { padding: 10px 0; } }
.box.border { border: 1px solid rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 1000px) { .box.border { padding: 20px 40px; } }
@media screen and (max-width: 620px) { .box.border { padding: 10px 30px; } }
.box.white { background: #fff; }
.box.black { background: #222; }

.dark { background: #222; color: #939393; }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #fff; }
.dark p { color: #939393; }

.grey { background: #efefef; }

.dark-grey { background: #333; }

.darker-grey { background: #111; }

#filters { margin: 0; padding: 0; list-style: none; }
#filters li { display: inline-block; margin: 25px 20px; cursor: pointer; border-bottom: 1px solid transparent; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#filters li.active, #filters li:hover { color: #222; border-bottom: 1px solid #222; }
#filters li:last-child { margin-right: 0; }
@media screen and (max-width: 1000px) { #filters { text-align: center; width: 100%; } }
@media screen and (max-width: 620px) { #filters li { display: block; float: none; margin: 10px 0; padding: 0; border: 0 !important; }
  #filters li.active, #filters li:hover { border: 0 !important; } }

.title-block { margin-bottom: 30px; }
.title-block h2 { width: auto; display: inline-block; padding: 10px 0; border-bottom: 1px solid #ccc; }

/*         
        05
        Portfolio
*/
#masonry { -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; }
#masonry .item { position: relative; width: 30%; margin: 1.666%; background: #222; overflow: hidden; }
@media screen and (max-width: 1000px) { #masonry .item { width: 46.666%; } }
@media screen and (max-width: 620px) { #masonry .item { width: 100%; margin: 10px 0; } }
#masonry .item img { display: inline-block; width: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#masonry .item .caption { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); position: absolute; top: 50px; left: 50px; right: 50px; bottom: 50px; border: 1px solid rgba(255, 255, 255, 0.3); text-align: center; }
#masonry .item .caption .title, #masonry .item .caption .type { position: absolute; text-align: center; left: 0; right: 0; }
#masonry .item .caption .title { top: -41px; color: #fff; font-weight: 500; font-size: 1.3em; }
#masonry .item .caption .type { bottom: -35px; color: #fff; letter-spacing: 2px; text-transform: uppercase; }
#masonry .item .link { position: absolute; height: 100%; width: 100%; margin: auto; text-align: center; display: table; color: #fff; color: #fff; background: rgba(255, 255, 255, 0.1); }
#masonry .item .link:before { text-align: center; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); display: table-cell; width: 100%; vertical-align: middle; }
#masonry .item:hover .caption { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); transform: scale(1, 1); }
#masonry .item:hover .link { text-decoration: none; }
#masonry .item:hover .link:before { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); transform: scale(1, 1); }
#masonry .item:hover img { -webkit-transform: scale(1.3, 1.3); -moz-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; }

/*         
        06
        Services
*/
.service { margin: 30px 0; }
.service .fa { font-size: 2em; margin-bottom: 20px; }
.service h3 { margin-top: 0; }
@media screen and (max-width: 620px) { .service { text-align: center; } }

/*         
        07
        Contact
*/
.social-links { list-style: none; display: block; margin: 35px 0; padding: 0; }
.social-links li { border-right: 1px solid rgba(0, 0, 0, 0.3); padding: 0 20px; display: inline-block; }
.social-links li:first-child { padding-left: 0; }
.social-links li:last-child { border-right: 0; }
.social-links li a { font-size: 24px; color: #222; line-height: 50px; display: inline-block; cursor: pointer; border-bottom: 1px solid transparent; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
.social-links li a:hover { color: rgba(0, 0, 0, 0.3); text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 1000px) { .social-links { margin: 15px 0; }
  .social-links li { padding: 0 10px; }
  .social-links li a { font-size: 14px; line-height: 30px; } }

#form { padding: 20px; border: 1px solid rgba(0, 0, 0, 0.3); }
@media screen and (max-width: 1000px) { #form { padding: 15px; } }
#form .form-group { position: relative; margin-bottom: 6px; }
#form .form-group input, #form .form-group textarea { padding: 15px; border: 0; width: 100%; font-weight: bold; }
#form .form-group input:focus, #form .form-group textarea:focus { outline: none; }
#form .form-group textarea { margin-bottom: -6px; }
#form .form-group input[type=submit] { background: #222; color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#form .form-group input[type=submit]:hover { background: #333; }
#form .form-group .message { position: absolute; display: none; right: 100%; padding: 17px 20px; width: 250px; background: #F75C50; color: #222; font-weight: normal; font-size: .9em; height: 100%; }
#form .form-group .message:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-left-color: #F75C50; border-width: 10px; margin-top: -10px; }
@media screen and (max-width: 1000px) { #form .form-group .message { right: 0; left: 0; width: 100%; position: relative; z-index: 99; }
  #form .form-group .message:after { display: none; } }
#form ::-webkit-input-placeholder { font-weight: normal; }
#form :-moz-placeholder { /* Firefox 18- */ font-weight: normal; }
#form ::-moz-placeholder { /* Firefox 19+ */ font-weight: normal; }
#form :-ms-input-placeholder { font-weight: normal; }

/*         
        08
        Lightbox
*/
#lightbox { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #222; z-index: 9999; }
#lightbox img, #lightbox iframe { position: absolute; top: 0; right: 0; bottom: 50px; left: 0; width: auto; height: auto; margin: auto; display: none; -webkit-transition: left 0.3s; -moz-transition: left 0.3s; -o-transition: left 0.3s; transition: left 0.3s; }
#lightbox img { max-width: 90%; max-height: 80%; }
@media screen and (max-width: 620px) { #lightbox img { max-width: 65%; } }
#lightbox iframe { width: 600px; height: 400px; z-index: 0; }
@media screen and (max-width: 620px) { #lightbox iframe { width: 75%; height: 250px; } }
#lightbox .description { border-right: 1px solid rgba(255, 255, 255, 0.3); color: #999; left: -400px; top: 0; bottom: 50px; padding: 0 50px; width: 400px; position: absolute; background: #222; text-align: center !important; -webkit-transition: left 0.3s; -moz-transition: left 0.3s; -o-transition: left 0.3s; transition: left 0.3s; }
#lightbox .description h3 { color: #fff; }
#lightbox .description .vcenter { width: 400px; }
@media screen and (max-width: 620px) { #lightbox .description { width: 70%; left: -70%; }
  #lightbox .description .vcenter { width: 70%; text-align: left; } }
#lightbox .bar { border-top: 1px solid rgba(255, 255, 255, 0.3); height: 50px; left: 0; right: 0; bottom: 0; position: absolute; background: #222; z-index: 3; }
#lightbox .next, #lightbox .prev, #lightbox .x, #lightbox .info { height: 49px; width: 50px; line-height: 50px; position: absolute; bottom: 0; color: #999; text-align: center; cursor: pointer; z-index: 3; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#lightbox .next:hover, #lightbox .prev:hover, #lightbox .x:hover, #lightbox .info:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
#lightbox .info { left: 0; bottom: 50%; border: 1px solid rgba(255, 255, 255, 0.3); border-left: 0; }
#lightbox .next { right: 0; border-left: 1px solid rgba(255, 255, 255, 0.3); }
#lightbox .prev { left: 0; border-right: 1px solid rgba(255, 255, 255, 0.3); }
#lightbox .x { left: 50%; margin-left: -25px; border-left: 1px solid rgba(255, 255, 255, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.3); }
#lightbox.info-active img, #lightbox.info-active iframe { left: 400px; }
@media screen and (max-width: 620px) { #lightbox.info-active img, #lightbox.info-active iframe { left: 70%; } }
#lightbox.info-active .description { left: 0; }
#lightbox.info-active .info { left: 400px; }
@media screen and (max-width: 620px) { #lightbox.info-active .info { left: 70%; } }

/*         
        09
        Team
*/
.member { margin-bottom: 30px; }
.member .avatar { position: relative; }
.member .avatar .caption { position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding-top: 70px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; text-align: center; }
.member .avatar .caption .btn { margin: 10px auto; display: block; height: 50px; width: 50px; line-height: 50px; padding: 0; font-size: 21px; }
.member .avatar .caption .btn:hover { background: rgba(0, 0, 0, 0.2); }
.member .avatar:hover img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; }
.member .avatar:hover .caption { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$ms)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
.member img { width: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

/*         
        10
        Pricing Tables
*/
.pricing-table { overflow: hidden; position: relative; display: inline-block; width: 100%; margin-bottom: 20px; }
.pricing-table.featured { -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); }
.pricing-table.featured ul { border-width: 2px; }
.pricing-table .featured { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; width: 150px; top: 25px; right: -15px; left: -35px; text-align: center; padding: 5px 20px; background: #222; color: #fff; }
.pricing-table ul { list-style: none; padding: 0; margin: 0; text-align: center; background: #fff; border: 1px solid rgba(0, 0, 0, 0.3); overflow: hidden; width: 100%; }
.pricing-table ul li { padding: 15px 10px; margin: 0; }
.pricing-table ul li h2 span { font-size: 14px; color: #999; }
.pricing-table ul li:first-child { padding: 10px 15px; }
.pricing-table ul li:nth-child(even) { background: #efefef; }
.pricing-table .btn:hover { background: #333; color: #fff !important; }
.pricing-table .btn:hover .fa { color: #fff; }

/*         
        11
        Dark mode
*/
body.dark { background: #222; }
body.dark .container-fluid section, body.dark .container-fluid header { border-bottom: 1px solid #333; }
body.dark .container-fluid section .service h3, body.dark .container-fluid header .service h3 { color: #fff !important; }
body.dark .container-fluid section .pricing-table.featured, body.dark .container-fluid header .pricing-table.featured { -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); }
body.dark .container-fluid section .pricing-table ul, body.dark .container-fluid header .pricing-table ul { background: #fff; border: 0; }
body.dark .container-fluid section .pricing-table ul *, body.dark .container-fluid header .pricing-table ul * { color: #222; }
body.dark .container-fluid section .pricing-table ul li h2, body.dark .container-fluid header .pricing-table ul li h2 { color: #222 !important; }
body.dark .container-fluid section .pricing-table .btn, body.dark .container-fluid header .pricing-table .btn { border-color: #333; }
body.dark .container-fluid section .pricing-table .btn:hover, body.dark .container-fluid header .pricing-table .btn:hover { background: #333; color: #fff !important; }
body.dark .container-fluid section .pricing-table .btn:hover .fa, body.dark .container-fluid header .pricing-table .btn:hover .fa { color: #fff; }
body.dark .container-fluid section #filters li.active, body.dark .container-fluid section #filters li:hover, body.dark .container-fluid header #filters li.active, body.dark .container-fluid header #filters li:hover { color: #fff; border-bottom: 1px solid #fff; }
body.dark .container-fluid section .box h1, body.dark .container-fluid section .box h2, body.dark .container-fluid section .box h3, body.dark .container-fluid section .box h4, body.dark .container-fluid section .box h5, body.dark .container-fluid section .box h6, body.dark .container-fluid section .box strong, body.dark .container-fluid header .box h1, body.dark .container-fluid header .box h2, body.dark .container-fluid header .box h3, body.dark .container-fluid header .box h4, body.dark .container-fluid header .box h5, body.dark .container-fluid header .box h6, body.dark .container-fluid header .box strong { color: #333; }
body.dark .container-fluid section .box p, body.dark .container-fluid header .box p { color: #999; }
body.dark .container-fluid section .box.border, body.dark .container-fluid header .box.border { border: 0; }
body.dark .container-fluid section .border-left, body.dark .container-fluid section .border-right, body.dark .container-fluid section .border-bottom, body.dark .container-fluid section .border-top, body.dark .container-fluid header .border-left, body.dark .container-fluid header .border-right, body.dark .container-fluid header .border-bottom, body.dark .container-fluid header .border-top { background: rgba(255, 255, 255, 0.3); }
body.dark .container-fluid section .btn, body.dark .container-fluid header .btn { border: 1px solid #fff; color: #fff; }
body.dark .container-fluid section .btn:hover, body.dark .container-fluid header .btn:hover { background: rgba(0, 0, 0, 0.2); color: #fff; }
body.dark .container-fluid section .btn:hover .fa, body.dark .container-fluid header .btn:hover .fa { color: #fff; }
body.dark .container-fluid section nav#main-nav .trigger .bar, body.dark .container-fluid header nav#main-nav .trigger .bar { background: #fff; }
body.dark .container-fluid section nav#main-nav ul li, body.dark .container-fluid header nav#main-nav ul li { border-left: 1px solid rgba(255, 255, 255, 0.3); }
body.dark .container-fluid section nav#main-nav ul li:last-child, body.dark .container-fluid header nav#main-nav ul li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.3); }
body.dark .container-fluid section nav#main-nav ul li a, body.dark .container-fluid header nav#main-nav ul li a { color: #fff; }
body.dark .container-fluid section nav#main-nav ul li a:hover, body.dark .container-fluid section nav#main-nav ul li a.active, body.dark .container-fluid header nav#main-nav ul li a:hover, body.dark .container-fluid header nav#main-nav ul li a.active { background: rgba(255, 255, 255, 0.2); }
body.dark .container-fluid section #social-nav ul li a, body.dark .container-fluid header #social-nav ul li a { color: #fff; }
body.dark .container-fluid section.affix, body.dark .container-fluid header.affix { background: #222; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); -ms-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); }
body.dark .container-fluid section .flexslider .flex-direction-nav a:before, body.dark .container-fluid header .flexslider .flex-direction-nav a:before { color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
@media screen and (max-width: 620px) { body.dark .container-fluid section .flexslider .flex-direction-nav a.flex-prev:before, body.dark .container-fluid header .flexslider .flex-direction-nav a.flex-prev:before { border-right: 1px solid rgba(255, 255, 255, 0.3); } }
@media screen and (max-width: 620px) { body.dark .container-fluid section .flexslider .flex-direction-nav a.flex-next:before, body.dark .container-fluid header .flexslider .flex-direction-nav a.flex-next:before { border-left: 1px solid rgba(255, 255, 255, 0.3); } }
body.dark .container-fluid section .flexslider .flex-direction-nav a:hover, body.dark .container-fluid header .flexslider .flex-direction-nav a:hover { background: rgba(255, 255, 255, 0.1); }
body.dark .container-fluid section .flexslider ul.slides li, body.dark .container-fluid header .flexslider ul.slides li { background: #222; }
body.dark .container-fluid section .flexslider ul.slides li p, body.dark .container-fluid section .flexslider ul.slides li h1, body.dark .container-fluid section .flexslider ul.slides li h2, body.dark .container-fluid section .flexslider ul.slides li h3, body.dark .container-fluid section .flexslider ul.slides li h4, body.dark .container-fluid section .flexslider ul.slides li h5, body.dark .container-fluid section .flexslider ul.slides li h6, body.dark .container-fluid header .flexslider ul.slides li p, body.dark .container-fluid header .flexslider ul.slides li h1, body.dark .container-fluid header .flexslider ul.slides li h2, body.dark .container-fluid header .flexslider ul.slides li h3, body.dark .container-fluid header .flexslider ul.slides li h4, body.dark .container-fluid header .flexslider ul.slides li h5, body.dark .container-fluid header .flexslider ul.slides li h6 { color: #fff; }
body.dark .container-fluid section .flexslider ul.slides li .centered, body.dark .container-fluid header .flexslider ul.slides li .centered { border: 6px solid rgba(0, 0, 0, 0.2); }

.container-fluid header {
position: fixed;
top: 0; bottom: auto;
left: 0; right: 0;
box-shadow: 0 1px 0 rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}