@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700);
@font-face {
    font-family: 'codropsicons';
    src:url('../fonts/codropsicons/codropsicons.eot');
    src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/codropsicons/codropsicons.woff') format('woff'),
        url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
        url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'finra-tech';
    src:url('../fonts/tech-fonts/tech-icons.eot');
    src:url('../fonts/tech-fonts/tech-icons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/tech-fonts/tech-icons.woff') format('woff'),
        url('../fonts/tech-fonts/tech-icons.ttf') format('truetype'),
        url('../fonts/tech-fonts/tech-icons.svg#finra-tech') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Material Icons';
    src:url('../fonts/material-design-icons/Material-Design-Icons.eot');
    src:url('../fonts/material-design-icons/Material-Design-Icons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/material-design-icons/Material-Design-Icons.woff') format('woff'),
        url('../fonts/material-design-icons/Material-Design-Icons.ttf') format('truetype'),
        url('../fonts/material-design-icons/Material-Design-Icons.svg#finra-tech') format('svg');
    font-weight: normal;
    font-style: normal;
}


[data-icon]:before { content: attr(data-icon); }

[data-icon]:before,
.icons8-calendar:before,
.icons8-cancel:before,
.icons8-delete:before,
.icons8-email:before,
.icons8-external-link:before,
.icons8-external-link-2:before,
.icons8-external-link-squared:before,
.icons8-facebook:before,
.icons8-github-filled:before,
.icons8-google-plus:before,
.icons8-help-filled:before,
.icons8-info:before,
.icons8-info-filled:before,
.icons8-left:before,
.icons8-left-2:before,
.icons8-link:before,
.icons8-linkedin:before,
.icons8-message:before,
.icons8-print:before,
.icons8-reddit-filled:before,
.icons8-right:before,
.icons8-right-2:before,
.icons8-share:before,
.icons8-stack-overflow:before,
.icons8-synchronize:before,
.icons8-synchronize-filled:before,
.icons8-twitter:before,
.icons8-youtube:before {
  display: inline-block;
  font-family: "Downloaded";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.icons8-calendar:before { content: "\f100"; }
.icons8-cancel:before { content: "\f101"; }
.icons8-delete:before { content: "\f102"; }
.icons8-email:before { content: "\f103"; }
.icons8-external-link:before { content: "\f104"; }
.icons8-external-link-2:before { content: "\f105"; }
.icons8-external-link-squared:before { content: "\f106"; }
.icons8-facebook:before { content: "\f107"; }
.icons8-github-filled:before { content: "\f108"; }
.icons8-google-plus:before { content: "\f109"; }
.icons8-help-filled:before { content: "\f10a"; }
.icons8-info:before { content: "\f10b"; }
.icons8-info-filled:before { content: "\f10c"; }
.icons8-left:before { content: "\f10d"; }
.icons8-left-2:before { content: "\f10e"; }
.icons8-link:before { content: "\f10f"; }
.icons8-linkedin:before { content: "\f110"; }
.icons8-message:before { content: "\f111"; }
.icons8-print:before { content: "\f112"; }
.icons8-reddit-filled:before { content: "\f113"; }
.icons8-right:before { content: "\f114"; }
.icons8-right-2:before { content: "\f115"; }
.icons8-share:before { content: "\f116"; }
.icons8-stack-overflow:before { content: "\f117"; }
.icons8-synchronize:before { content: "\f118"; }
.icons8-synchronize-filled:before { content: "\f119"; }
.icons8-twitter:before { content: "\f11a"; }
.icons8-youtube:before { content: "\f11b"; }
/*
.icons8-Reading {
    background: url("../img/events-share-sprite.png") no-repeat;
    background-position: 0 -35px;
    width: 25px;
    height: 16px;
    display: inline-block; 
    vertical-align: middle; 
}

.icons8-Share{
    background: url("../img/events-share-sprite.png") no-repeat;
    background-position: 0px -18px;
    width: 25px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
}


.icons8-Play{
   background: url("../img/events-share-sprite.png") no-repeat;
   background-position: 0px 0px;
   width: 25px;
   height: 18px;
   display: inline-block;
   vertical-align: middle;
}

.icons8-External-Link {
   background: url("../img/events-share-sprite.png") no-repeat;
   background-position: 0px -51px;
    width: 25px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
}
*/

html,
body {
    height: 100%;
}

.img-centered {
    margin: 0 auto;
}



section {
    padding: 100px 0;
}

section.bg-gray {
    background-color: #f5f5f5;
}

.owl-theme .owl-controls .owl-page span {
    background: rgba(34,34,34,.5);
}

body {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 20px;
    font-weight: 300;
 	overflow-x:hidden;
}

a {
    color: #ef4035;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}


a:hover,
a:focus {
    text-decoration: none;
    color: inherit;
}

p {
    font-size: 20px;
    font-family:Helvetica, Arial, sans-serif;
    color:#212121;
    line-height: 1.5;
}

p.lead {
    text-transform: uppercase;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 24px;
    font-weight: 900;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /*text-transform: uppercase;*/
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 900;
}
ul li {
    color:#212121;
    font-family:Helvetica, Arial, sans-serif;
}

.tech-logo {
  color:#ffffff!important;
  font-size:32px;
  letter-spacing:0px;
  font-family:"Avenir","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900;
}

/*============ FINRA LOGO =============*/

.header-homepage{width:100%;height:80%;position:relative;left:0;top:0;background:#000000;z-index:1;}
.header-homepage svg{
  position:relative;
  width:100%;
  height:100%;
  }

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

.navbar a:focus {
    outline: 0;
}

.navbar .navbar-nav li a:focus {
    outline: 0;
}

.navbar .navbar-nav li:last-child a i{
    /*border: 1px solid #ffffff;
    border-radius: 50% 50%;*/
    padding: 5px;
    top: -6px;
    position: relative;
    font-size:22px;
}

.navbar .navbar-nav li:last-child a i:hover{
    /*border: 1px solid #808587;
    border-radius: 50% 50%;*/
    padding: 5px;
    top: -6px;
    position: relative;
    font-size:22px;
}

@media only screen and (min-width: 280px) and (max-width: 767px) {
  .navbar .navbar-nav li:last-child a i{
    /*border: 1px solid #ffffff;
    border-radius: 50% 50%;*/
    padding: 5px;
    top: -6px;
    position: relative;
    font-size:22px;
  }
}

header {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    padding: 100px 0;
    background: no-repeat center center;
    background-attachment: scroll;
    background-color: #000000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.container{
  width:90%;
}

@media only screen and (min-width: 200px) and (max-width: 767px) {
  .container{
    width:100%;
  }
}

.container > header,
.codrops-top {
    font-family: 'Lato', Arial, sans-serif;
}

header .intro-content {
    position: relative;
    text-align: center;
    color: #fff;
}

header .herosidebar-container {
    position: relative;
    width:30%;
    height:inherit;
    float:right;
}
header .herosidebar-content {
    position: relative;
    text-align: center;
    color: #fff;
}

header .brand-name {
    margin-top: 15px;
    text-transform: uppercase;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 9em;
    font-weight: 900;
    line-height: 80%;
    letter-spacing: -25px;
}

header .brand-name span{
    color: #fb483d;
}

hr {
    height: 2px;
    margin: 15px auto;
    max-width: 100px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

hr.events {
    height: 2px;
    margin: 25px 15px 15px 15px auto;
    max-width: 80%;
    border-top: 1px solid #cbcbcb;
}

hr.double-orange {
    height: 2px;
    margin: 15px auto;
    max-width: 200px;
    border-top: 1px solid #fc771f;
    border-bottom: 1px solid #fc771f;
}

hr.left {
    margin: 15px auto 15px 0;
}

hr.right {
    margin: 15px 0 15px auto;
}

hr.colored {
    border-color: #ef4035;
}

.intro-content.wow.fadeIn{
    text-align:left;
    padding:0;
}

code {
font-size:12px;
color:#199f12;
margin:15px 25px;
}

/*=============BLOG SECTION===============*/
.grid figure h2.blog {
  font-size:1em!important;
  text-transform:capitalize;
  word-spacing:normal;
  letter-spacing:normal;
}
h1.blog {
  font-weight:200;
  font-size:45px;
  text-transform: capitalize;
  text-align:center;
}

h1.blog span{
  font-weight:700;
}

h3.blog {
  color:#646464;
  text-align:center;
  font-weight:normal;
}

@media(max-width:767px) {
    section {
        padding: 40px 0;
    }
}

@media(min-width:200px) {
    h1 {
        font-size: 34px;/*52px;*/
        font-family:Helvetica, Arial, sans-serif;
        font-weight:200;
    }

    h2 {
        font-size: 50px;
    }

}

@media(min-width:768px) {
    hr {
        margin: 20px auto;
        max-width: 200px;
    }

    hr.left {
        margin: 20px auto 20px 0;
    }

    hr.right {
        margin: 20px 0 20px auto;
    }
}

.text-primary {
    color: #ef4035;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
    border-radius: 0;
    color: #b8cadb;
	background-color:#000000;
}

.navbar-default {
    background-color: #ef4035;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: rgba(255,255,255,.5);
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: rgba(255,255,255,.5);
}

.navbar-inverse {
    background-color: #000000;
    opacity:0.9;
}

.navbar-default,
.navbar-inverse {
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.navbar-default .navbar-brand,
.navbar-inverse .navbar-brand {
    padding: 20px 15px;
    text-decoration: none;
    color: #fff;
    opacity: 1;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}

.navbar-default .navbar-brand:hover,
.navbar-inverse .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-inverse .navbar-brand:focus {
    opacity: 1;
}

.navbar-default .navbar-nav li a,
.navbar-inverse .navbar-nav li a {
    color: #fff;
    font-weight:100;
    font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
    text-transform:uppercase;
    font-size:18px;
}


.navbar-default .navbar-nav li:last-child a.special,
.navbar-inverse .navbar-nav li:last-child a.special {
    color:#fb483d;
    font-weight:700;
    font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
}

.navbar-default .navbar-nav li:last-child a.special:hover,
.navbar-inverse .navbar-nav li:last-child a.special:hover {
    color:#cd2f25;
    font-weight:700;
    font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
}

.navbar-default .navbar-nav a.current,
.navbar-inverse .navbar-nav a.current {
    color:#fb483d;
    font-weight:700;
    font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
}

.navbar-default .navbar-nav a.current:hover,
.navbar-inverse .navbar-nav a.current:hover {
    color:#cd2f25;
    font-weight:700;
    font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
}


.navbar-default .navbar-nav li a:hover,
.navbar-inverse .navbar-nav li a:hover {
    color: rgba(255,255,255,.5);
}

.stButton .st-yahoo-counter, .stButton .st-linkedin-counter,
.stButton .st-twitter-counter, .stButton .st-facebook-counter,
.stButton .st-pinterest-counter, .stButton .st-email-counter  {
    height: 25px!important;
}

.stButton .stArrow{
    display:none !important;
}


@media(min-width:768px) {

    .intro-content.wow.fadeIn{
        text-align:left;
        padding:25px 50px;
    }

    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar-default .navbar-nav>.active>a:focus,
    .navbar-inverse .navbar-nav>.active>a,
    .navbar-inverse .navbar-nav>.active>a:hover,
    .navbar-inverse .navbar-nav>.active>a:focus {
    }

    .navbar-fixed-top.navbar-expanded {
        padding: 30px 0;
    }

    .navbar-fixed-top {
        padding: 15px 0;
        -webkit-transition: padding .5s;
        -moz-transition: padding .5s;
        -ms-transition: padding .5s;
        transition: padding .5s;
    }

    .navbar-fixed-top .navbar-brand:hover {
        opacity: .5;
    }

    .navbar-default.navbar-expanded,
    .navbar-inverse.navbar-expanded {
        border: 0;
        background: 0 0;
    }
}

@media only screen and (min-width:845px) and (max-width:1043px){
      .ribbon-box {
  width: 200px; height: 200px;
  position: relative;
  border: 0px solid #BBB;
  background: none;
  float:right;
  right: -6%;
  top: 0%!important;
}
.ribbon {
  position: relative;

  z-index: 1031;
  overflow: hidden;
  width: 100%; height: 100%;
  text-align: center;
}
.ribbon span {
  font-size: 14px;
  font-weight: 400;
  font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 40px;
  transform: rotate(45deg);
  width: 300px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F70505 0%, #8F0808 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -61px;
  padding-left:30px;
}
.ribbon span a {
  font-size: 14px;
  font-weight: 400;
  font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 40px;
  text-decoration:none;
}
.ribbon span a:hover {
  font-size: 14px;
  font-weight: 400;
  font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 40px;
  text-decoration:none;
}

/*.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F0808;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F0808;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}*/

    /*=================================================================*/
}

@media only screen and (min-width:300px){

    /*================= AWARDS ANNOUNCEMENT RIBBON ====================*/

    .ribbon-box {
  width: 200px; height: 200px;
  position: relative;
  border: 0px solid #BBB;
  background: none;
  float:right;
  right: -2%;
  top: 5.8%;
}
.ribbon {
  position: relative;

  z-index: 1031;
  overflow: hidden;
  width: 100%; height: 100%;
  text-align: center;
}
.ribbon span {
  font-size: 14px;
  font-weight: 400;
  font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 40px;
  transform: rotate(45deg);
  width: 300px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F70505 0%, #8F0808 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -61px;
  padding-left:30px;
}
.ribbon span a {
  font-size: 14px;
  font-weight: 400;
  font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 40px;
  text-decoration:none;
}
.ribbon span a:hover {
  font-size: 14px;
  font-weight: 400;
  font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 40px;
  text-decoration:none;
}

/*.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F0808;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F0808;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}*/

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


    .header-stat {
        width:100%;
        height:100%;

    }
    .btn-outline-light:hover,
    .btn-outline-light:active,
    .btn-outline-light:focus {
        outline: 0;
        color: #ef4035;
        background: #fff;
    }

    .btn-blue {
        position:relative;
        margin:0 auto;
        left:28%;
        outline: 0;
        color: #00639f;
        padding:5px 10px;
        background: #fff;
        border: #00639f 1px solid;
        font-weight:700;
        font-size:0.75em;
    }
    .btn-blue:hover {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #00639f;
        border: #fff 1px solid;
        font-weight:300;
    }

    .btn-blue:active {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #00446d;
        border: #fff 1px solid;
    }

     .btn-lightblue {
        position:relative;
        margin:0 auto;
        left:28%;
        outline: 0;
        color: #00abec;
        padding:5px 10px;
        background: #fff;
        border: #00abec 1px solid;
        font-weight:700;
        font-size:0.75em;
    }
    .btn-lightblue:hover {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #00abec;
        border: #fff 1px solid;
        font-weight:300;
    }

    .btn-lightblue:active {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #00abec;
        border: #fff 1px solid;
    }

    .btn-red {
            position:relative;
            margin:0 auto;
            left:28%;
            outline: 0;
            color: #fb483d;
            padding:5px 10px;
            background: #fff;
            border: #fb483d 1px solid;
            font-weight:700;
            font-size:0.75em;
        }
    .btn-red:hover {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #fb483d;
        border: #fff 1px solid;
        font-weight:300;
    }

    .btn-red:active {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #dd2b20;
        border: #fff 1px solid;
    }

    .btn-homered {
            position:relative;
            margin:0 auto;
            outline: 0;
            color: #ffffff!important;
            padding:5px 10px;
            background: #fb483d!important;
            border: #fb483d 1px solid;
            font-weight:200!important;
            font-size:1em;
        }
    .btn-homered:hover {
        outline: 0;
        color: #fb483d!important;
        background: none!important;
        border: #fb483d 1px solid!important;
        font-weight:200;
        font-size:1em;
    }

    .btn-homered:active {
        outline: 0;
        color: #fff;
        background: #fb483d;
        border: #fb483d 1px solid;
    }



    .btn-orange {
            position:relative;
            margin:0 auto;
            left:40%;
            top:17px;
            outline: 0;
            color: #f36d41;
            padding:5px 10px;
            background: #fff;
            border: #f36d41 1px solid;
            font-weight:700;
            font-size:0.75em;
        }
    .btn-orange:hover {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #f36d41;
        border: #fff 1px solid;
        font-weight:300;
    }

    .btn-orange:active {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #f36d41;
        border: #fff 1px solid;
    }


    .btn-drkblue {
            position:relative;
            margin:0 auto;
            left:40%;
            top:17px;
            outline: 0;
            color: #005690;
            padding:5px 10px;
            background: #fff;
            border: #005690 1px solid;
            font-weight:700;
            font-size:0.75em;
        }
    .btn-drkblue:hover {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #005690;
        border: #fff 1px solid;
        font-weight:300;
    }

    .btn-drkblue:active {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #005690;
        border: #fff 1px solid;
    }

    .btn-gray {
            position:relative;
            margin:0 auto;
            left:28%;
            outline: 0;
            color: #414b4e;
            padding:5px 10px;
            background: #fff;
            border: #414b4e 1px solid;
            font-weight:700;
            font-size:0.75em;
        }
    .btn-gray:hover {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #414b4e;
        border: #fff 1px solid;
        font-weight:300;
    }

    .btn-gray:active {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #85c426;
        border: #fff 1px solid;
    }
    .btn-green {
            position:relative;
            margin:0 auto;
            left:28%;
            outline: 0;
            color: #85c426;
            padding:5px 10px;
            background: #fff;
            border: #85c426 1px solid;
            font-weight:700;
            font-size:0.75em;
        }
    .btn-green:hover {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #85c426;
        border: #fff 1px solid;
        font-weight:300;
    }

    .btn-green:active {
        outline: 0;
        color: #fff;
        padding:10px;
        background: #1f2e32;
        border: #fff 1px solid;
    }
    header .intro-content-3dbar {
        position: absolute;
        bottom: -18%;
        left:50%;
        width: 100%;
        margin: auto;
        text-align: center;
        color: #fff;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

    header .brand-name {
    letter-spacing: -16px;
    }
}/*screen and (min-width:300px)*/



header .brand-name-subtext {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    text-transform:uppercase;
}

 header .brand-name-subtext span.red{
        color:#fb483d;
    }

header .pages-headline {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 2.7em;
    font-weight: 100;
    line-height: normal;
    text-transform:uppercase;
    letter-spacing:normal;
    color:#fb483d;
}

header img {
    max-height: 150px;
    max-width: 150px;
}



header .scroll-down {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    padding:20px 0px;
    background-image: url(../img/overlay_blk.png);
}

header .scroll-down .btn {
    width: 54px;
    height: 51px;
    padding: 0;
    /*border: 2px solid #fff;
    border-radius: 100%;
    font-size: 30px;
    line-height: 50px;
    letter-spacing: normal;
    color: #fff;*/
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
	background-image:url(../img/home_pgnav.png);
	background-repeat:no-repeat;
}

header .scroll-down .btn:hover {
    /*border-color: rgba(255,255,255,.5);
	border-radius:100%;
    outline: 0;
    color: rgba(255,255,255,.5);*/
    width: 54px;
    height: 51px;
    padding: 0;
    background-image:url(../img/home_pgnav.png);
    background-repeat:no-repeat;
}

@media(min-width:940px) {
    /*================= AWARDS ANNOUNCEMENT RIBBON ====================*/

    .ribbon-box {

  top: 0%!important;
}


    /*=================================================================*/
}
@media only screen and (min-width:767px) and (max-width:787px) {
  header .intro-content {
        position: absolute;
        top: 50%!important;
    }
}
@media(min-width:768px) {
    header {
        width: 100%;
        height: 100%;
		padding:0;
        background-attachment: scroll;
    }

    header .intro-content {
        position: absolute;
        top: 45%;
        left: 50%;
        width: 80%;
        margin: auto;
        text-align: center;
        color: #fff;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }


     header .intro-content-full {
        position: absolute;
        top: 70%;
        left: 50%;
        width: 80%;
        margin: auto;
        text-align: center;
        color: #fff;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
     header .intro-content-full h1{
        font-size:3em;
        color:#ffffff;
        /**/letter-spacing:-2px;
        line-height:66px;
        text-shadow: 0px 0px 6px rgba(150, 150, 150, 1);
    }
     header .intro-content-full h1 span{
        color:#f44336;
        text-shadow: none;
    }
    header .intro-content-full p{
        font-size:2em;
        color:#ffffff;
        font-family: 'Times Regular',Times, Georgia Serif;
        text-shadow: 0px 0px 6px rgba(150, 150, 150, 1);
    }
     header .intro-content-full p span{
        color:#f44336;
        font-style:italic;
        text-shadow: none;
    }



    header .intro-content-3dbar {
        position: absolute;
        bottom: -8%;
        left:50%;
        width: 100%;
        margin: auto;
        text-align: center;
        color: #fff;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }


    header .brand-name {
        font-size: 5em;
        line-height: 100%;
		letter-spacing:-6px;
        text-transform:uppercase;
    }

    header .brand-name-subtext {
        font-size: 30px;
        line-height: 15px;
        text-transform:uppercase;
    }
    header .brand-name-subtext span.red{
        color:#fb483d;
    }
    header .pages-headline {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 3em;
    font-weight: 100;
    line-height: normal;
    text-transform:uppercase;
    letter-spacing:normal;
    color:#fb483d;
}

    header img {
        max-height: 300px;
        max-width: 300px;
    }

    header img.special {
        max-height:100%;
        max-width:100%;
        width:100%;
    }
    .intro-content-awards {
        width:100%!important;
        top:58%!important;
    }


}

@media only screen and (min-width:200px) and (max-width:767px) {
    header .intro-content-full p{
        font-size:1em;
        color:#ffffff;
        font-family: 'Times Regular',Times, Georgia Serif;
        text-shadow: 0px 0px 6px rgba(150, 150, 150, 1);
    }
}
/*min-width:768px*/

@media(min-width:1025px) {
    header {
        background-attachment: fixed;
    }
     .intro-content-awards {
        width:100%!important;
        top:58%!important;
    }
}

header.video .overlay {
    z-index: 998;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #000;
}

header.video .intro-content {
    z-index: 999;
}

header.video .scroll-down {
    z-index: 999;
}

@media(min-width:768px) {
    header.video .overlay {
        opacity: .5;
    }
     .intro-content-awards {
        width:100%!important;
        top:58%!important;
    }
}

aside.cta-quote {
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: no-repeat center center scroll;
    background-color: #222;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

aside.randich-quote{
    background-size:100%;
    background-color:#ffffff;
}

.page-quote {
    color:#01101e;
    padding: 40px 0;
    text-align: center;
    font-size:1.714em;
}

.page-quote span{
    color:#fb483d;
    padding: 100px 0;
    text-align: center;
    font-size:83px;
    line-height:2px;
    vertical-align:-37px;
}

aside.cta-quote span.quote {
    display: block;
    font-size: 30px;
    font-weight: 300;
    line-height: 32px;
}



@media(min-width:768px) {
    aside.cta-quote {
        padding: 150px 0;
        background-attachment: scroll;
    }

    aside.cta-quote span.quote {
        font-size: 36px;
        line-height: 38px;
    }
}/*min-width:768px*/

@media(min-width:992px) {
    aside.cta-quote {
        padding: 300px 0;
    }

    aside.awards-aside{
        padding: 130px 0;
    }

    aside.cta-quote span.quote {
        font-size: 40px;
        line-height: 42px;
    }
}

@media(min-width:1025px) {
    aside.cta-quote {
        background-attachment: fixed;
    }
}


.testimonials {
    text-align: left;
}

.testimonials .testimonials-carousel .item {
    padding: 0;
}

.testimonials .testimonials-carousel .item p.quote {
    margin-bottom: 30px;
}

.testimonials .testimonials-carousel .item .testimonial-info {
    margin-bottom: 30px;
}

.testimonials .testimonials-carousel .item .testimonial-info .testimonial-img {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.testimonials .testimonials-carousel .item .testimonial-info .testimonial-author {
    display: inline-block;
}

.testimonials .testimonials-carousel .item .testimonial-info .testimonial-author .name {
    text-transform: uppercase;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-weight: 900;
}

.testimonials .testimonials-carousel .item .testimonial-info .testimonial-author hr.colored {
    margin: 3px auto;
    max-width: 50px;
}

.testimonials .testimonials-carousel .item .testimonial-info .testimonial-author p {
    margin: 0;
}

.testimonials .testimonials-carousel .item .testimonial-info .testimonial-author .stars {
    color: #f1c40f;
}

.testimonials .testimonials-carousel .owl-controls {
    margin-top: 0;
}

.testimonials .testimonials-carousel .owl-controls .owl-prev,
.testimonials .testimonials-carousel .owl-controls .owl-next {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    height: 60px;
    margin: auto 0!important;
    border-radius: 0!important;
    text-align: center;
    font-size: 30px!important;
    line-height: 50px;
    color: #fff!important;
    background-color: #ef4035!important;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}

.testimonials .testimonials-carousel .owl-controls .owl-prev:hover,
.testimonials .testimonials-carousel .owl-controls .owl-next:hover {
    opacity: 1;
}

.testimonials .testimonials-carousel .owl-controls .owl-prev {
    left: 15px;
}

.testimonials .testimonials-carousel .owl-controls .owl-next {
    right: 15px;
}

@media(min-width:768px) {
    .testimonials .testimonials-carousel .item {
        padding: 0 100px;
    }

    .testimonials .testimonials-carousel .owl-controls .owl-prev,
    .testimonials .testimonials-carousel .owl-controls .owl-next {
        display: block;
    }
    .copyright {
    text-align:center;padding: 26px 0;
    /**/background-color:transparent;
    cursor:default;color:#ffffff;font-family:"Avenir", "Helvetica", Helvetica, Arial, sans-serif; font-size:12px!important;margin-bottom:0px;
}

}

/*CODROPS*/
/* To Navigation Style */
.codrops-top {
    background: #fff;
    background: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    width: 100%;
    font-size: 0.69em;
    line-height: 2.2;
}

.codrops-top a {
    text-decoration: none;
    padding: 0 1em;
    letter-spacing: 0.1em;
    color: #888;
    display: inline-block;
}

.codrops-top a:hover {
    background: rgba(255,255,255,0.95);
    color: #716d62;
}

.codrops-top span.right {
    float: right;
}

.codrops-top span.right a {
    float: left;
    display: block;
}

.codrops-icon:before {
    font-family: 'codropsicons';
    margin: 0 4px;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
    content: "\e001";
}

.codrops-icon-prev:before {
    content: "\e004";
}

.container > section {
    margin: 0 auto;
    padding: 10em 3em;
    text-align: center;
}

.color-1 {
    background: #435a6b;
}

.color-2 {
    background: #f39c12;
}

.color-3 {
    background: #2ac56c;
}

.color-4 {
    background: #0e83cd;
}

.color-5 {
    background: #cd4436;
}

.color-6 {
    background: #f19f0f;
}

.color-7 {
    background: #3fa46a;
}

.color-8 {
    background: #ecf0f1;
}

.color-9 {
    background: #9e487f;
}

.color-10 {
    background: #16a085;
}

.color-11 {
    background: #aab7b7;
}

@media screen and (max-width: 25em) {

    .codrops-icon span {
        display: none;
    }
     .intro-content-awards {
        width:100%!important;
        top:58%!important;
    }

}

.about-content {
    padding: 30px;
}

.about-content p{
    text-align:left;
}

.about-content h3{
    text-align:left;
}

.about-carousel .item {
    padding: 15px;
}

.about-carousel .item .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    margin: auto;
    padding: 15px;
    color: rgba(255,255,255,.7);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.about-carousel .item .caption h3 {
    margin: 0;
}

.about-carousel .item .caption hr {
    margin: 5px auto;
    max-width: 50px;
}

.about-carousel .item .caption p {
    margin: 0;
}

.about-carousel .item .caption ul.social {
    margin-top: 5px;
}

.about-carousel .item .caption ul.social li a {
    color: rgba(255,255,255,.7);
}

.about-carousel .item .caption ul.social li a:hover,
.about-carousel .item .caption ul.social li a:focus {
    color: #fff;
}

.about-carousel .owl-controls {
    margin-top: 0;
}

.about-carousel .owl-controls .owl-prev,
.about-carousel .owl-controls .owl-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    height: 60px;
    margin: auto 0!important;
    border-radius: 0!important;
    text-align: center;
    font-size: 30px!important;
    line-height: 50px;
    color: #fff!important;
    background-color: #ef4035!important;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}

.about-carousel .owl-controls .owl-prev:hover,
.about-carousel .owl-controls .owl-next:hover {
    opacity: 1;
}

.about-carousel .owl-controls .owl-prev {
    left: 15px;
}

.about-carousel .owl-controls .owl-next {
    right: 15px;
}

.services .media {
    margin-bottom: 30px;
}

.services .media i.fa {
    width: 75px;
    height: 75px;
    border: 3px solid #222;
    border-radius: 100%;
    text-align: center;
    font-size: 30px;
    line-height: 70px;
}

.services .media .media-body {
    padding-left: 15px;
    min-width: none;
}

.services .media .media-body h3 {
    margin-bottom: 15px;
}

.services .media .media-body ul {
    padding: 0;
    list-style: inside;
}

.services .media .media-body ul li {
    margin-bottom: 10px;
}

@media(min-width:390px) {
    .services .media .media-body {
        min-width: 260px;
    }
     .intro-content-awards {
        width:100%!important;
        top:58%!important;
    }

}

@media(min-width:992px) {
    .services .media .media-body {
        min-width: 193px;
    }
}

@media(min-width:1199px) {
    .services .media .media-body {
        min-width: 260px;
    }
}

@media(min-width:992px) {
    .services .media {
        margin-bottom: 0;
    }
}

.portfolio-carousel {
    padding: 0;
    color: #fff;
    background-color: #222;
}

.portfolio-carousel .item {
    padding: 0px;
    text-align: center;
    background: no-repeat center center scroll;
    background-color: #ffffff;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    color:#000000;
}

.portfolio-carousel .item .portfolio-image {
    margin-top: 50px;
}

.portfolio-carousel .item .project-details {
    padding: 0;
}

.portfolio-carousel .item .project-details img.client-logo {
    margin: 0 auto 25px;
}

.portfolio-carousel .item .project-details .project-name {
    display: block;
    margin-bottom: 5px;
    /*text-transform: uppercase;*/
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 40px;
    font-weight: 900;
    line-height: 40px;
    text-align:left;
    color:#ffffff;
    /*width:60%;*/
    margin:0 auto;
}

.portfolio-carousel .item .project-details p {
    /*width:60%;*/
    margin:0 auto;
    text-align:left;
    color:#ffffff;
    font-size:20px;
    font-family: Helvetica, arial, sans-serif;
    font-weight:100;
}


.portfolio-carousel .item .project-details .project-description {
    display: block;
    font-size: 18px;
    line-height: 18px;
}

.portfolio-carousel .owl-controls {
    margin-top: 0;
}

.portfolio-carousel .owl-controls .owl-prev,
.portfolio-carousel .owl-controls .owl-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    height: 90px;
    margin: auto 0!important;
    border-radius: 50%!important;
    text-align: center;
    font-size: 30px!important;
    line-height: 70px;
    color: #fff!important;
    background-color: #de574f!important;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}



.portfolio-carousel .owl-controls .owl-prev:hover,
.portfolio-carousel .owl-controls .owl-next:hover {
    opacity: 1;
}

.portfolio-carousel .owl-controls .owl-prev {
    left: -60px;
    text-align:right;
}

.portfolio-carousel .owl-controls .owl-next {
    right: -60px;
    text-align:left;
}

@media(min-width:992px) {
    .portfolio-carousel .item img{
        /*padding: 155px 55px;*/
        min-height: 100%;
        text-align: left;
    }

    .portfolio-carousel .item .portfolio-image {
        margin-top: 0;
    }

    .portfolio-carousel .item .project-details {
        /*padding: 15% 0 0;*/
    }

    .portfolio-carousel .item .project-details img.client-logo {
        margin: 0 auto 25px 0;
    }

    .portfolio-carousel .item .project-details .project-name {
        display: block;
        font-size: 50px;
        line-height: 50px;
    }

    .portfolio-carousel .item .project-details .project-description {
        font-size: 20px;
        line-height: 20px;
    }

    .portfolio-carousel .item hr.colored {
        margin: 20px auto 20px 0;
    }
}/*min-width:992px*/

.portfolio-gallery .item {
    padding: 15px;
}

.portfolio-modal {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.portfolio-modal .modal-backdrop {
    display: none;
}

.portfolio-modal .modal-content {
    padding: 100px 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    text-align: center;
    color: #fff;
    background: 0 0;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.portfolio-modal .modal-content h2 {
    margin: 0;
    font-size: 46px;
}

.portfolio-modal .modal-content img {
    margin: 30px auto;
}

.portfolio-modal .modal-content .item-details {
    margin: 30px 0;
}

.portfolio-modal .close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: transparent;
    cursor: pointer;
}

.portfolio-modal .close-modal:hover {
    opacity: .3;
}

.portfolio-modal .close-modal .lr {
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    background-color: #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.portfolio-modal .close-modal .lr .rl {
    z-index: 1052;
    width: 1px;
    height: 75px;
    background-color: #fff;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.portfolio-filter {
    display: inline-block;
}

.portfolio-filter #filters {
    margin-bottom: 30px;
    padding: 0;
    list-style: none;
}

.portfolio-filter #filters li {
    display: inline-block;
}

.portfolio-filter #filters li .filter {
    display: block;
    margin: 2px;
    padding: 10px 6px;
    border: 1px solid #ffffff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff;
    background: 0 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    cursor: pointer;
}

.portfolio-filter #filters li .dark {
    display: block;
    margin: 2px;
    padding: 10px 15px;
    border: 1px solid #ef4035;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff;
    background: 0 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    cursor: pointer;
}

.portfolio-filter #filters li .filter.active {
    border-color: #ef4035;
    color: #fff;
    background-color: #ef4035;
}

#portfoliolist .portfolio {
    display: none;
    margin: 1%;
    overflow: hidden;
}

#portfoliolist .portfolio .portfolio-wrapper {
    position: relative!important;
    overflow: hidden;
    background: #222;
    cursor: pointer;
}

#portfoliolist .portfolio .portfolio-wrapper img {
    position: relative;
    max-width: 100%;
}

#portfoliolist .portfolio .portfolio-wrapper .caption {
    position: absolute;
    bottom: -75px;
    width: 100%;
    height: 75px;
}

#portfoliolist .portfolio .portfolio-wrapper .caption .caption-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ef4035;
}

#portfoliolist .portfolio .portfolio-wrapper .caption .caption-text {
    z-index: 500;
    position: relative;
    padding: 15px 8px;
    color: #fff;
}

#portfoliolist .portfolio .portfolio-wrapper .caption .caption-text a.text-title {
    color: #fff;
}

#portfoliolist .portfolio .portfolio-wrapper .caption .caption-text .text-category {
    display: block;
    font-size: 12px;
}

.datagensolutions img{
    margin-bottom:15px;
    width:100%;
}

@media(min-width:1025px) {
    .left-rail-container {
        float: left;
        margin-left: -10%;
        width: 33%;
    }
}

@media(min-width:1280px) {
    .left-rail-container {
        float: left;
        width: 31%;
    }
}

@media(min-width:1025px) {
    .floating-label-form-group {
        position: relative;
        margin-bottom: 0;
        padding-bottom: .5em;
        border-bottom: 1px solid #e1e1e1;
    }

    .floating-label-form-group input,
    .floating-label-form-group textarea {
        z-index: 1;
        position: relative;
        padding-right: 0;
        padding-left: 0;
        border: 0;
        border-radius: 0;
        font-size: 1.5em;
        line-height: 1;
        background: 0 0;
        box-shadow: none!important;
        resize: none;
        height:auto;
    }

    .floating-label-form-group label {
        display: block;
        z-index: 0;
        position: relative;
        top: 2em;
        margin: 0;
        font-size: .85em;
        line-height: 1.7;
        vertical-align: middle;
        vertical-align: baseline;
        opacity: 0;
        -webkit-transition: top .5s ease,opacity .5s ease;
        -moz-transition: top .5s ease,opacity .5s ease;
        -ms-transition: top .5s ease,opacity .5s ease;
        transition: top .5s ease,opacity .5s ease;
    }

    .floating-label-form-group::not(:first-child) {
        padding-left: 14px;
        border-left: 1px solid #e1e1e1;
    }

    .floating-label-form-group-with-value label {
        top: 0;
        opacity: 1;
    }

    .floating-label-form-group-with-focus label {
        color: #ef4035;
    }

    form .row:first-child .floating-label-form-group {
        border-top: 1px solid #e1e1e1;
    }

    form .help-block ul,
    form .help-block ul li{
        list-style:none;
    }

    footer.footer {
        /*padding: 50px 0 20px;*/
        color: rgba(255,255,255,.7);
        background: no-repeat center center scroll;
        background:#000000;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        min-height:26%!important;
        height:17%!important;
    }

    footer.tech {
        min-height:26%!important;
        height:17%!important;
    }

    footer.tech h5{
        text-transform:uppercase;
    }


    footer.footer a {
        color: #ffffff;
        font-size:13px;
        /*text-transform:uppercase;*/
    }

    footer.footer a:hover {
        color: #fb483d;
    }

    footer.footer h5 a i {
    font-size: 29px;
    vertical-align: -5px;
    padding: 0 10px;
    }

    footer.footer p {
        font-size: 22px;
    }

    footer.footer img.ff-logo {
        width:17%;
    }

    footer.footer img.ff-logo-main {
        width:23%;
    }

    footer.footer .contact-details {
        margin: 26px 0 11px 0;}

    footer.footer .social {
        margin-bottom: 75px;
    }

    footer.footer .copyright p.small {
        font-size: 12px!important;
        margin-bottom:0px;
    }

}




@media only screen and (min-width:768px) and (max-width:1024px) {
footer.footer {
        /*padding: 50px 0 20px;*/
        color: rgba(255,255,255,.7);
        background: no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -ms-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        min-height:26%!important;
        height:17%!important;
    }

    footer.tech {
        min-height:26%!important;
        height:17%!important;
    }


    footer.footer a {
        color: #ffffff;
        font-size:13px;
        text-transform:uppercase;
    }

    footer.footer a:hover {
        color: #fb483d;
    }

    footer.footer h5 {
    font-size: 9px;
    vertical-align: -5px;
    padding: 0 10px;
    }

    footer.footer h5 a i {
    font-size: 18px;
    vertical-align: -5px;
    padding: 0 5px;
    }

    footer.footer p {
        font-size: 22px;
    }

    footer.footer img.ff-logo {
        width:46%;
    }

    footer.footer .contact-details {
        margin: 26px 0 11px 0;}

    footer.footer .social {
        margin-bottom: 75px;
    }

    footer.footer .copyright p.small {
        font-size: 12px!important;
        margin-bottom:0px;
    }

}

@media (min-width:768px){
    .home-mission-content img {
      float: left;
      margin-right: 45px;
      margin-bottom: 40px;
    }
}

@media(min-width:1025px) {
    footer.footer {
        background-attachment: fixed;
    }
}

.btn-outline-light {
    border: 1px solid #fff;
    color: #fff;
    background: 0 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    outline: 0;
    color: #ef4035;
    background: #fff;
}

.btn-outline-dark {
    border: 1px solid #222;
    color: #222;
    background: 0 0;
    padding:10px 15px 10px 15px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    border-color: #ef4035;
    outline: 0;
    color: #fff;
    background: #fb483d;
}

.btn-outline-careers {
    border: 1px solid #ef4035;
    color: #ffffff;
    background: #fb483d;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}

.btn-outline-careers:hover,
.btn-outline-careers:focus {
    border-color: #ef4035;
    outline: 0;
    color: #fff;
    background: #fb483d;
}

.btn {
    padding: 12px 18px;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: normal;
    -webkit-appearance: none; /*Safari/Chrome*/
    -moz-appearance: none; /*Firefox*/
    -ms-appearance: none; /*IE*/
    -o-appearance: none; /*Opera*/
    appearance: none;
    -webkit-border-radius: 0;
    background:#666;
    color:#fff;
}

.btn:focus,
.btn:active,
.btn.active {
    outline: 1px dotted #bcbcbc;
}

.btn-full-width {
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    text-transform: none;
    font-size: 26px;
    font-weight: 200;
    letter-spacing: normal;
    color: #fff;
    background-color: #000000;
    /*height:100%;*/
}

.btn-full-width:hover {
    color: #fff;
}

.btn-full-width:focus {
    color: #fff;
}


.btn-events{
    display: inline-block;
    /*margin: 2px;*/
    padding: 10px 6px;
    border: 1px solid #ffffff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff;
    background: 0 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    cursor: pointer;
    outline:0;
}

.btn-home {
    padding: 12px 18px;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
    white-space: normal;
    -webkit-appearance: none; /*Safari/Chrome*/
    -moz-appearance: none; /*Firefox*/
    -ms-appearance: none; /*IE*/
    -o-appearance: none; /*Opera*/
    appearance: none;
    -webkit-border-radius: 0;
    background:#f34235;
    color:#fff;
    font-family: 'Avenir', Helvetica, sans-serif;
    font-size:14px;

}

.btn-home:hover {
    
    background:#ffffff;
    color:#f34235;
    font-family: 'Avenir', Helvetica, sans-serif;

}

.btn-home:focus,
.btn-home:active,
.btn-home.active {
    
}

input[type="radio"]{
    display:none;
}

.btn-events:hover, .btn-events:focus, .btn-events.focus, .btn-events:active, .btn-events.active, .open>.dropdown-toggle.btn-events{
    border-color: #ef4035;
    color: #fff;
    background-color: #ef4035;
}

label.btn-events{
    margin:2px;
}

body.modern {
    font-family: Cardo,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
}

body.modern h1,
body.modern h2,
body.modern h3,
body.modern h4,
body.modern h5,
body.modern h6 {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

body.modern p.lead {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

body.modern header .brand-name {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

body.modern .about-carousel .owl-controls .owl-prev,
body.modern .about-carousel .owl-controls .owl-next {
    line-height: 55px;
}

body.modern .portfolio-carousel .item .project-details .project-name {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

body.modern .testimonials .testimonials-carousel .item .testimonial-info .testimonial-author .name {
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

body.modern .testimonials .testimonials-carousel .owl-controls .owl-prev,
body.modern .testimonials .testimonials-carousel .owl-controls .owl-next {
    line-height: 55px;
}

body.vintage {
    font-family: Cardo,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
}

body.vintage h1,
body.vintage h2,
body.vintage h3,
body.vintage h4,
body.vintage h5,
body.vintage h6 {
    text-transform: uppercase;
    font-family: Sanchez,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
}

body.vintage p.lead {
    text-transform: uppercase;
    font-family: Sanchez,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
}

body.vintage header .brand-name {
    text-transform: uppercase;
    font-family: Sanchez,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
}

body.vintage .about-carousel .owl-controls .owl-prev,
body.vintage .about-carousel .owl-controls .owl-next {
    line-height: 55px;
}

body.vintage .portfolio-carousel .item .project-details .project-name {
    text-transform: uppercase;
    font-family: Sanchez,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
}

body.vintage .testimonials .testimonials-carousel .item .testimonial-info .testimonial-author .name {
    text-transform: uppercase;
    font-family: Sanchez,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
}

body.vintage .testimonials .testimonials-carousel .owl-controls .owl-prev,
body.vintage .testimonials .testimonials-carousel .owl-controls .owl-next {
    line-height: 55px;
}


/*CUSTOM STYLES*/
.blog-title {
	color:#ffffff;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.blog-title h1 {
	font-size: 5em;
	font-weight:100;
}

.blog-title h1 span{
	font-weight:300;
	text-transform:none;
}

.blog-title-subtext {
	font-size:1.555em;
	font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.blog-title-dark {
    color:#01101e;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight:100;
}

.blog-title-dark h1 {
    font-size: 5em;
    font-weight:100;
    text-transform:uppercase;
}

.blog-title-dark h1 span{
    font-weight:300;
    text-transform:none;
    text-transform:uppercase;
}

.blog-title-dark-subtext {
    color:#01101e;
    font-size:1.555em;
    font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.hero-title-hr {
	height:3px;
    margin: 55px auto;
    max-width: 100%;
	border-bottom: 3px solid #c7cfd3;
	border-top:none;
}

.hero-title-hr-dark {
    height:3px;
    margin: 55px auto;
    max-width: 100%;
    border-bottom: 3px solid #333333;
    border-top:none;
}

.hero-title-hr-home {
    height:3px;
    margin: 15px auto;
    max-width: 50%;
    border-top:1px dotted #333333;
}

.article-container {
    width:60%;
    margin-bottom:3em;
    padding-top:50px;
}

.article-container-full {
    width:80%;
    margin-bottom:3em;
    margin-top:4%;
}

.article-content p{
    text-align:left;
    color:#212121;/*#808587;*/
    /*font-size:16px;*/
}

.article-content h3 {
    color:#01101e;
}

.article-content h4 {
  text-align:center;
}

.article-container-left {
width: 66.67%;
float: left;
}

.article-container-right {
width: 66.67%;
float: right;
text-align: left;
color: #808587;
font-size: 16px;
}

.article-content-left {
width: 66.67%;
float: left;
text-align: left;
color: #808587;
font-size: 16px;
}
.article-content-right {
width: 69.67%;/*66.67%;*/
float: right;
}


/*********************AWARDS******************/
.awards-navbar {
    background-color:#ffffff!important;
    opacity:1!important;
}

.awards-trigger {
  top: -21px!important;
  left: 91%!important;
}

.awards-iconbar {
    background-color:#000000!important;
}

.content-right-awards h1{
    text-align:left;
    color:#fcb040;
    font-size:4em;
    font-weight:100!important;
}

aside.cta-quote.awards-aside p{
  color:#ffffff;
}

.content-right-awards ul{
}

.content-right-awards li{
    text-align:left;
    color:#000000;
    font-size:20px;
    list-style:none;
    line-height:36px;
    font-family:Helvetica, Arial, sans-serif;
}

img.awards-logos{
    width:70%;
}
.awards-nav ul li a{
    color:#000000!important;
}

.awards-container {
  border-right:#fcb040 5px solid; margin-bottom:10px;margin-top:2em;height:1152px;
}
/*********************************************/

.left-rail {
    float:left;
    width:23.67%;
    padding:7px 35px 15px 0px;
}

.left-rail h4{
    font-size:1.143em;
    color:#01101e;
}

.left-rail p{
    font-size:0.857em;
    line-height:18px;
}

.left-rail img{
    margin-bottom:20px;
}

.left-rail2 {
    float:left;
    width:239px;
    padding:7px 35px 15px 0px;
}

.left-rail2 h4{
    font-size:1.143em;
    color:#01101e;
}

.left-rail2 p{
    font-size:0.857em;
    line-height:18px;
}

.left-rail2 img{
    margin-bottom:20px;
}
.right-rail {
    float:right;
    width:239px;
    padding:0px 0px 15px 0px;
}

.right-rail h4{
    font-size:1.143em;
    color:#01101e;
    margin-top:0px;
}

.right-rail p{
    font-size:0.857em;
    line-height:18px;
    color:#808587;
}

/*************************************
            CUSTOM RAILS
*************************************/


.right-rail-orange {
    float:right;
    padding:0px 0px 15px 36px;
    background-repeat:no-repeat;
    width:26%;
    border-left:8px #fc771f solid;
    margin-top:43px;
}
.right-rail-orange p{
    font-size:0.857em;
    line-height:18px;
    color:#808587;
}
.right-rail-orange img{
    margin-top:22px;
    margin-bottom:10px;
    width:100%;
}

.right-rail-blue {
    float:right;
    padding:0px 0px 15px 36px;
    background-repeat:no-repeat;
    width:26%;
}
.right-rail-blue img{
    margin-top:22px;
    margin-bottom:10px;
    width:100%;
}
.right-rail-blue p{
    font-size:0.857em;
    line-height:18px;
    color:#808587;
}
.right-rail-blue h4{
    font-size:1.0em;
    margin-top:-5px;
    text-transform:none!important;
    color:#00639f;
    margin-bottom:0px;
    text-align:center;
    /*padding-left:12px;*/
}

.fastola .right-rail-blue {
    padding-bottom: 25px;
}

.fastola .right-rail-orange {
    padding-bottom: 25px;
}



.left-rail-gray {
    float:left;
    padding:1px 36px 70px 0px;
    background-position:right;
    background-repeat:no-repeat;
    clear:both;
}

.left-rail-gray h4{
    font-size:1.0em;
    margin-top:-5px;
    text-transform:none!important;
    color:#424b4d;
    margin-bottom:0px;
    text-align:center;
    padding-left:12px;
}

.left-rail-gray p{
    font-size:0.857em;
    line-height:18px;
    color:#808587;
}

.left-rail-gray img{
    margin-top:22px;
    margin-bottom:10px;
    width:100%;
}

.right-rail-gray {
    float:right;
    padding:40px 31px 15px 0px;
    background-position:right;
    background-repeat:no-repeat;
    width:22.67%;
}

.right-rail-gray h4{
    font-size:1.0em;
    margin-top:-5px;
    text-transform:none!important;
    color:#424b4d;
    margin-bottom:0px;
    text-align:center;
    padding-left:12px;
}

.right-rail-gray p{
    font-size:0.857em;
    line-height:18px;
    color:#808587;
}

.right-rail-gray img{
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
}

.testgen-datagen-challenge ol li{
    font-size: 12px;
    color: #000000;
}
.testgen-datagen-challenge ul li{
    font-size: 12px;
    color: #000000;
}

/*************==========DATAGEN ARTICLE SIDEBARS===============**************/
/*blue*/
.left-rail-blue {
    float:left;
    width:40%;
    height:auto;
}
.left-rail-blue-top{
    width:25px;
    height:5px;
    border-bottom:5px solid #00abec;
    }
.left-rail-blue-left{
    width:227px;
    height:100%;
    padding-left:30px;
    border-left:9px solid #00abec;
}

.left-rail-blue-bottom{
    width:25px;
    height:5px;
    border-top:5px solid #00abec;
    }


.left-rail-blue h4{
    font-size:1.0em;
    margin-top:-5px;
    text-transform:none!important;
    color:#00abec;
    margin-bottom:10px;
    text-align:center;
    padding-left:12px;
}

.left-rail-blue p{
    font-size:0.857em;
    line-height:18px;
    color:#808587;
}


.left-rail-blue img{
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
}

/*red*/
.left-rail-red {
    float:left;
    width:100%;
    height:auto;
    margin-bottom:116px;
}

.left-rail-msl-red {
    float:left;
    width:100%;
    height:auto;
    margin-bottom:116px;
    border-right: 9px #ef474d solid;
    padding-right:20px;
    padding-left:0px;
}


.left-rail-red-top{
    width:25px;
    height:5px;
    border-bottom:5px solid #fb483d;
    }
.left-rail-red-left{
    width:227px;
    height:100%;
    padding-left:30px;
    border-left:9px solid #fb483d;
}

.left-rail-red-bottom{
    width:25px;
    height:5px;
    border-top:5px solid #fb483d;
    }


.left-rail-red h4{
    font-size:1.0em;
    margin-top:-5px;
    text-transform:none!important;
    color:#fb483d;
    margin-bottom:10px;
    text-align:center;
    padding-left:12px;
}

.left-rail-red p{
    font-size:0.857em;
    line-height:22px;
    color:#808587;
}


.left-rail-red img{
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
}


/*gray*/
.left-rail-gray {
    float:left;
    /*width:40%;*/
    height:auto;
}
.left-rail-gray-top{
    float:right;
    width:25px;
    height:0px;
    border-bottom:5px solid #424b4d;

    }
.left-rail-gray-left{
    width:227px;
    height:100%;
    padding-right:30px;
    border-right:9px solid #424b4d;
}

.left-rail-gray-bottom{
    float:right;
    width:25px;
    height:0px;
    border-top:5px solid #424b4d;

    }


.left-rail-gray h4{
    font-size:1.0em;
    margin-top:0px;
    text-transform:none!important;
    color:#424b4d;
    margin-bottom:10px;
    text-align:center;
    padding-left:12px;
}

.left-rail-gray p{
    font-size:0.857em;
    line-height:18px;
    color:#808587;
}


.left-rail-gray img{
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
}

/* right rail blue*/
/*blue*/
.right-rail-blue {
    float:right;
    width:40%;
    height:auto;
}
.right-rail-blue-top{
    width:25px;
    height:5px;
    border-bottom:5px solid #00639f;
    }
.right-rail-blue-left{
    width:227px;
    height:100%;
    padding-left:30px;
    border-left:9px solid #00639f;
}

.right-rail-blue-bottom{
    width:25px;
    height:5px;
    border-top:5px solid #00639f;
    }


.right-rail-blue h4{
    font-size:1.0em;
    margin-top:-5px;
    text-transform:none!important;
    color:#00639f;
    margin-bottom:10px;
    text-align:center;
    padding-left:12px;
}

.right-rail-blue p{
    font-size:0.857em;
    line-height:22px;
    color:#00639f;
}


.right-rail-blue img{
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
}


.datagen-hack-drkblue-rail-left{
    display:block;
    margin-right:0px;
    float:left;
    margin-bottom:100px;
    width:6%;
}

.datagen-hack-drkblue-rail-right{
    display:inline-block;
    margin-right:0px;
    float:left;
    margin-bottom:100px;

}

.events-left {
    width:75%;
    float:left;
}

.events-right-rail {
    float:left;
    width:36%;
}

.left-rail-main {
    display:block;
    margin-right:0px;
    float:left;
    margin-bottom:100px;
    width:27%;
    padding-right:20px;
}


/*====================Randich Article--------------------*/

.randich-orange{
  float: right;
  padding: 0px 0px 15px 0px;
  background-repeat: no-repeat;
  width: 28%;
}


.randich-orange h4{
  font-size: 1.0em;
  margin-top: -5px;
  text-transform: none!important;
  color: #ffab00;
  margin-bottom: 10px;
  text-align: center;
  padding-left: 12px;
}

.randich-orange h4 span{
  font-size: 5.0em;
  margin: -15px 0px 0px -6px;
  text-transform: none!important;
  color: #ffab00;
  margin-bottom: 10px;
  text-align: center;
  line-height: 87px;
  letter-spacing: -9px;
}

.randich-orange img{
  margin: 0 auto;
  padding-bottom: 15px;
}



.randich-orange p{
  font-size: 12px;
  color:#000000;
  line-height:1.5;
  margin:0px 0px 10px;
  text-align:left;
  padding:0px 0px 0px 20px;
  border-left: 9px #ffab00 solid;
}
.randich-orange-lower {
    padding:0px 0px 0px 20px;
    border-left: 9px #ffab00 solid;
    float:right;
    background-repeat:no-repeat;
    width:28%;
}
.randich-orange-lower h4{
  font-size: 1.0em;
  margin-top: -5px;
  text-transform: none!important;
  color: #ffab00;
  margin-bottom: 10px;
  text-align: left;
  padding-left: 12px;
}

.randich-orange-lower-h4{
  font-size: 1.2em;
  margin-top: -5px;
  text-transform: none!important;
  color: #455a64;
  margin-bottom: 20px;
  text-align: center;
}

.randich-orange-lower span{
  font-size: 5.0em;
  margin: -15px 0px 0px -6px;
  text-transform: none!important;
  color: #ffab00;
  margin-bottom: 10px;
  text-align: left;
  line-height: 87px;
  letter-spacing: -9px;
}

.randich-orange-lower p{
  font-size: 12px;
  color:#000000;
  line-height:1.5;
  margin:0px 0px 10px;
  text-align:left;
}

.randich-aside p{
    color:#000000;
    font-size:16px;
}
/**********TOOLTIP**************/

a.rollover {
  color:#808587;
  border-bottom:#5b84f3 dotted 1px;
}
a.rollover span {
  position: absolute;
  width:200px;
  color: #000000;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 34px -6px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 0px 34px -6px rgba(0,0,0,0.35);
  box-shadow: 0px 0px 34px -6px rgba(0,0,0,0.35);
  height: auto;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  box-shadow: 2px 1px 2px #EFEFEF;
  font-size:12px;
  text-align: center;
  line-height:normal;
  padding:20px 15px;
}
a.rollover span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #FFFFFF;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  -webkit-box-shadow: 0px 0px 34px -6px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 34px -6px rgba(0,0,0,0.35);
box-shadow: 0px 0px 34px -6px rgba(0,0,0,0.85);
}
a:hover.rollover span {
  visibility: visible;
  opacity: 0.8;
  bottom: 0%;
  left: 50%;
  margin-left: -5%;/*-476px;*/
  margin-top:-7%;
  height:100px;
  z-index: 999;
  -webkit-box-shadow: 0px 0px 34px -6px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 34px -6px rgba(0,0,0,0.35);
box-shadow: 0px 0px 34px -6px rgba(0,0,0,0.85);
}


/***********************************************
    ADDITIONAL ARTICLE EFFECTS AND STYLES
*************************************************/
@-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
}
#spin{
    position:relative;
    top:0%;
    left:0%;
    -webkit-animation-name: spinnerRotate;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinnerRotate;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinnerRotate;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

/*SCROLLARAMA SETTINGS*/
.simple-demo, .mobile-demo {
    visibility: visible;
}

.simple-demo #content-wrapper {
    height: 1600px;
    padding-top: 400px;
}

#examples-1 { overflow: hidden; }
#fly-it { position: relative; }
#scale-it { width: 500%; margin: 0px -200%; padding: 0; }

#examples-pin { position: relative; width: 100%; height: 600px; overflow: hidden; margin-bottom: -200px; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame h2 { margin-top: 120px; }
#pin-frame-slide { background: #D92B00; margin-left:-100%; }
#pin-frame-wipe  { background: #FFB000; top:100%; }
#pin-frame-wipe h2  { color: #D92B00; }
#pin-frame-bounce  { background: #222438; }
#pin-frame-color  { background: #222438; }
#pin-frame-unpin  { top:100%; }

#examples-2 { z-index: 9999; width: 100%; height: 100%; overflow: hidden; }
#fling-it, #move-it { position: relative; }
#examples-parallax {
    padding-top: 200px;
    height: 800px;
    margin-bottom: -600px;
    overflow: hidden;
}
#parallax-it {
    padding: 0;
    font-size: 80px;
    position: relative;
}

#parallax-it-left {
    position: relative;
    font-size: 120px;
    left: -160px;
    color: #C5C3DE;
    opacity: 0.5;
    -moz-opacity: 0.5;
    -ms-opacity: 0.5;
    filter:alpha(opacity=5);
    overflow: hidden;
}

#parallax-it-right {
    position: relative;
    font-size: 160px;
    left: 80px;
    color: #C5C3DE;
    opacity: 0.25;
    -ms-opacity: 0.25;
    -moz-opacity: 0.25;
    filter:alpha(opacity=2.5);
    overflow: hidden;
    width: 900px;
}

#showcase { padding: 60px 0; }
.gallery { width: 960px; margin: 0 auto; text-align: center; }
.gallery figure { text-align: center; float: left; margin: 10px; height: 270px; display: inline-block; }

#howtouse { padding-top: 200px; }

.divider { font-size: 14px; padding-top: 20px; }

.disclaimer {
    font-size: 18px;
    font-style: italic;
    font-weight: normal;
    margin: 0 auto;
}

#instructions { padding-top: 40px; }

#instructions p { margin: 0px auto 20px; }

#instructions-animation { padding-top: 40px; }

#instructions .documentation {
    font-size: 16px;
    text-align: left;
    width: 720px;
    margin: 10px auto 30px;
    padding: 20px 40px;
    text-shadow: none;
    border: solid 1px #69697A;
    color:#C5C3DE;
}

#instructions .param-list {
    font-size: 18px;
    line-height: 1.4;
    padding: 0 18px;
    margin: 1em 0 0;
}

#instructions .param-list-sub {
    padding-left: 36px;
    font-size: 15px;
}

#instructions .param-list li {
    font-weight: normal;
    padding-bottom: 20px;
    text-shadow: 0 2px 1px #000;
}
.param {
    font-style:italic;
}

.param-list small {
    display: block;
    font-weight: normal;
    font-style: italic;
}

#credits { padding: 80px 0; }

/* mobile demo */

.mobile-demo #fade-it {
    margin: 400px 0 500px 0;
}
.mobile-demo #examples-1 {
    margin-bottom: 200px;
}
.mobile-demo #instructions {
    width: 800px;
    text-align: left;
    margin: auto;
}
.mobile-demo ul {
    list-style: disc;
    color:#FFFFFF;
    margin: 20px 80px 100px 80px;
}
.mobile-demo #content-wrapper {
    margin-bottom: 100px;
    width: 100%;
}
.mobile-demo h2 {
    width: 90%;
}
.mobile-demo h3 {
    color:#C5C3DE;
}

#newversion {
    position: absolute;
    top: 230px;
    left: 50%;
    margin-left: 250px;
    z-index: 100;
    background-color: #D92B00;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    box-shadow: 0 2px 1px #000;
}
#newversion h2 {
    font-size: 43px;
    margin: 0;
    padding: 30px 0px 0px 0px;
    color: #FFFFFF;
    font-style: normal;
}
#newversion a {
    text-decoration: none;
    padding: 0px 20px 20px 20px;
    display: block;
    font-size: 18px;
    color: #FFFFFF;
}
#newversion a:hover span {
    text-decoration: underline;
}

/*HOMEPAGE*/

section.home-awards {
  padding:27px 0px!important;
  border-top: 3px solid #f34235;
  border-bottom: 3px solid #f34235;
}

header.home {
  height:23%!important;
  top:41%;
}



            .mid2 {
              position: absolute;
              left: 42%;
              margin-left: 0;
              top: 150px;
              transform: translateZ(0);
              perspective: 1000;
              backwards-visibility: hidden;
              z-index:1000!important;
              border:1px dashed #f34235;
              border-radius:100px;
              height:60px;
              width:60px;
            }

            .mid {
              animation: animationFrames linear 4s;
              animation-iteration-count: infinite;
              transform-origin: 50% 50%;
              animation-fill-mode:forwards; 
              -webkit-animation: animationFrames linear 4s;
              -webkit-animation-iteration-count: infinite;
              -webkit-transform-origin: 50% 50%;
              -webkit-animation-fill-mode:forwards; 
              -moz-animation-iteration-count: infinite;
              -moz-transform-origin: 50% 50%;
              -moz-animation-fill-mode:forwards; 
              -o-animation: animationFrames linear 4s;
              -o-animation-iteration-count: infinite;
              -o-transform-origin: 50% 50%;
              -o-animation-fill-mode:forwards; 
              -ms-animation: animationFrames linear 4s;
              -ms-animation-iteration-count: infinite;
              -ms-transform-origin: 50% 50%;
              -ms-animation-fill-mode:forwards; 
            }

            @keyframes animationFrames{
              0% {
                transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-moz-keyframes animationFrames{
              0% {
                -moz-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -moz-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -moz-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-webkit-keyframes animationFrames {
              0% {
                -webkit-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -webkit-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -webkit-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-o-keyframes animationFrames {
              0% {
                -o-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -o-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -o-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-ms-keyframes animationFrames {
              0% {
                -ms-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -ms-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -ms-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }




            .mid3 {
              position: absolute;
              left: 68%;
              margin-left: 0;
              top: 300px;
              transform: translateZ(0);
              perspective: 1000;
              backwards-visibility: hidden;
              z-index:1000!important;
              border:1px dashed #f34235;
              border-radius:100px;
              height:60px;
              width:60px;
            }

             /*.mid2:hover {
              background:#f34235;
              border:1px dashed #ffffff;
              border-radius:100px;
              height:80px;
              width:80px;
            }*/

           .mid2 {
              animation: animationFrames linear 4s;
              animation-iteration-count: infinite;
              transform-origin: 50% 50%;
              animation-fill-mode:forwards; 
              -webkit-animation: animationFrames linear 4s;
              -webkit-animation-iteration-count: infinite;
              -webkit-transform-origin: 50% 50%;
              -webkit-animation-fill-mode:forwards; 
              -moz-animation: animationFrames linear 4s;
              -moz-animation-iteration-count: infinite;
              -moz-transform-origin: 50% 50%;
              -moz-animation-fill-mode:forwards; 
              -o-animation: animationFrames linear 4s;
              -o-animation-iteration-count: infinite;
              -o-transform-origin: 50% 50%;
              -o-animation-fill-mode:forwards; 
              -ms-animation: animationFrames linear 4s;
              -ms-animation-iteration-count: infinite;
              -ms-transform-origin: 50% 50%;
              -ms-animation-fill-mode:forwards; 
            }

            @keyframes animationFrames{
              0% {
                transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-moz-keyframes animationFrames{
              0% {
                -moz-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -moz-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -moz-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-webkit-keyframes animationFrames {
              0% {
                -webkit-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -webkit-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -webkit-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-o-keyframes animationFrames {
              0% {
                -o-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -o-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -o-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-ms-keyframes animationFrames {
              0% {
                -ms-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -ms-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -ms-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            .mid {
              position: absolute;
              left: 20%;
              margin-left: 0;
              top: 338px;
              transform: translateZ(0);
              perspective: 1000;
              backwards-visibility: hidden;
              z-index:1000!important;
              border:1px dashed #f34235;
              border-radius:100px;
              height:60px;
              width:60px;
            }

            .mid3 {
              animation: animationFrames linear 4s;
              animation-iteration-count: infinite;
              transform-origin: 50% 50%;
              animation-fill-mode:forwards; 
              -webkit-animation: animationFrames linear 4s;
              -webkit-animation-iteration-count: infinite;
              -webkit-transform-origin: 50% 50%;
              -webkit-animation-fill-mode:forwards; 
              -moz-animation: animationFrames linear 4s;
              -moz-animation-iteration-count: infinite;
              -moz-transform-origin: 50% 50%;
              -moz-animation-fill-mode:forwards; 
              -o-animation: animationFrames linear 4s;
              -o-animation-iteration-count: infinite;
              -o-transform-origin: 50% 50%;
              -o-animation-fill-mode:forwards;
              -ms-animation: animationFrames linear 4s;
              -ms-animation-iteration-count: infinite;
              -ms-transform-origin: 50% 50%;
              -ms-animation-fill-mode:forwards; 
            }

            @keyframes animationFrames{
              0% {
                transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-moz-keyframes animationFrames{
              0% {
                -moz-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -moz-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -moz-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-webkit-keyframes animationFrames {
              0% {
                -webkit-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -webkit-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -webkit-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-o-keyframes animationFrames {
              0% {
                -o-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -o-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -o-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }

            @-ms-keyframes animationFrames {
              0% {
                -ms-transform:  translate(-24px,-23px)  rotate(0deg) ;
              }
              100% {
                -ms-transform:  translate(-24px,-23px)  rotate(356deg) ;
              }
              101% {
                -ms-transform:  translate(-24px,-23px)  rotate(360deg) ;
              }
            }


            .mid:hover, .mid2:hover, .mid3:hover {
                border:2px solid #f34235;
            }
            /*#shadow, .model, #lt-paths, #dots, #main, #dots path, #strong-paths, .line { visibility:hidden; }

            .midCirc { opacity: 0.2; }

            .s0 {
                stop-color:#FFFFFF;
            }
            .s1 {
                stop-color:#F34235;
            }
            .s2 {
                stop-color:#1F1B26;
            }*/

.home-awards {
  background-color:#000000;
  margin:0 auto;
  text-align:center;
}

.home-awards .fa{
  font-size:30px;
  font-weight:100;
}

header.home .title {
  font-size:103px;
  font-weight:600;
  text-transform:uppercase;
  font-family:"Avenir", "Helvetica", Arial, sans-serif;
  color:#ffffff;
  /*letter-spacing:-5px;*/
  line-height:65px;
}

header.home .subtitle{
  font-size:24px;
  font-weight:100;
  text-transform: uppercase;
  font-family:"Avenir", "Helvetica", Arial, sans-serif;
  color:#ffffff;
}


section.home-awards{
  padding:0px!important;
  max-height:192px;
  position: relative;
  z-index:0;
}

.home-awards-list {
  width:87%;
  float:left;
  padding:17px 0px;
  height:105px;
}
.home-awards img{
  width:85px;
    margin-top: -7px;
}

@media (min-width: 767px) and (max-width: 1024px) {
    .home-awards img{
        margin-top: -30px;
        width: 60px;
    }
}

.home-awards img:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(243,66,53, 0.5);
  -moz-transition: background .3s linear;
  -webkit-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
}

.home-awards img:hover:before {
  background: none;
}

 .more-awards-btn{
    width:9%;
    padding:1% 30px 1% 30px;
    background:#f34235;
    color:#ffffff;
    float:right;
    max-height:105px;
    height:105px;
 }

  .more-awards-btn:hover{
    background:#ffffff;
 }

 .more-awards-btn:active{
  background:#ffffff!important;
  color:#f34235!important;
 }

 .more-awards-btn:focus{
  background:#ffffff!important;
  color:#f34235!important;
 }

.more-awards-btn:hover a{  
    color:#f34235;
}


.more-awards-btn a p i{
  color:#ffffff;

}


 div.col-lg-12.home-awards-button {
  padding-right:0px;
    color:#ffffff;
 }

div.col-lg-12 .more-awards-btn:hover a,
div.col-lg-12 .more-awards-btn:hover i,
div.col-lg-12 .more-awards-btn:hover h4{
  color:#f34235!important;
}


div.col-lg-12.home-awards-button:before {
    padding-right:0px;
    color:#ffffff;
 }

div.col-lg-12.home-awards-button:after {
  color:#f34235!important;

}


   

  .more-awards-btn a{
  color:#ffffff;
  background:#f34235;
 }


 .more-awards-btn h4{
  margin:0;
  padding:0;
  font-weight:100;
 }
.home-mission {
    padding:22px 0px 100px 0px;background-color:#e1e1e1;
}
.home-mission-content h1{
    color:#fb483d;padding-top:20px;width:65%;margin:0 auto;text-align:left;font-size:34px;margin-bottom:10px; font-family:helvetica, arial, sans-serif; font-weight:100;
}
.home-mission-content p{
    font-family:helvetica, arial, sans-serif; color:#808587;font-size:20px;width:74%;margin:0 auto;text-align:left;
}
.home-mission-content img{float:left;margin-right:45px;margin-bottom:40px;}
.home-mission-content p span{text-transform:uppercase;color:#fb483d;}
.home-countdown {
    padding:0px 0px 100px 0px;background-color:#e1e1e1;border-bottom: 4px solid #fb483d;
}
.home-next-event {
    margin-bottom:50px;
}

.home-next-event .section-title{
    color:#fb483d;font-size:20px;font-weight:700;
}

.home-next-event p {
    color:#01101e;font-size:1em;width:60%;margin:0 auto;text-align:center;
}

.home-next-event h1{
    color:#01101e;padding-top:0px;width:60%;margin:0 auto;text-align:center;
}
.home-slide-box {
    width:100%; margin:0 auto;padding:0px 40px;display:none;
}
.home-slide-viewport {
    width:100%;
}


            

            div.home-content.container {
              width:100%;
              position:absolute;
              left:0px;
              top:116px;
              height:69%;
              z-index:1000;
              margin: 0 auto;
            }

            div.home-content h3 {
                color:#ffffff;
                font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
                font-weight:200;
                position:relative;
                z-index:1000;
            }

            div.home-content p {
                color:#ffffff;
                font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
                position:relative;
                z-index:1000

            }

            /*div.home-content-1 {
              width:23%;
              display:block;
              height:auto;
              position:relative;
              top:93px;
              left:-264px;
              margin: 0 auto;
              padding:20px 30px;
            }*/

            .home-content-1 .overlay {
              background:#000000;
              opacity:0.7;
              height:265px;
              width:100%;
              position:absolute;
              top:0;
              left:0;
            }

            div.home-content-1 p{
              font-weight:100!important;
              font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
            }

            div.home-content-2 {
              width:23%;
              display:block;
              height:auto;
              position:relative;
              top:40px;
              right:112px;              
              margin: 0 auto;
              padding:20px 30px;
            }

            .home-content-2 .overlay {
              background:#000000;
              opacity:0.8;
              height:276px;
              width:100%;
              position:absolute;
              top:0;
              left:0;
            }

            div.home-content-2 p{
              font-weight:100!important;
              font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
            }

            div.home-content-3 {
              width:23%;
              display:block;
              height:auto;
              position:relative;
              top:100px;
              right:-106px;
              margin: 0 auto;
              padding:20px 30px;
            }
            .home-content-3 .overlay {
              background:#000000;
              opacity:0.8;
              height:335px;
              width:100%;
              position:absolute;
              top:0;
              left:0;
            }

            div.home-content-3 p{
              font-weight:100!important;
              font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
            }

            .dg {
                display:none;
            }
            #stats {
                display:none;
            }
            #home-header-container {
                height:100%!important;
                opacity: 0.5;
            }
            #interactive-points {
                width:100%!important;
                height:100%!important;
                position:absolute!important;
                top:0;
                left:0;
                z-index:6!important;
                background:transparent!important;
            }

/*  CAREERS SECTION*/
.careers-overflow-container {
    width:100%;
    height:auto;
    margin-bottom:50px;
}
.newyork{
    border:5px solid #000000;
}
.newyork img{
    width:100%;
}
.newyork:hover {
    background-image: url('assets/img/careers-dcbg.png');
    background:#FF2400;
    width:100%;
    height:auto;
}

.careers h1 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align:center;
    font-size:2.333em;
    font-weight:200;
    background-color:#000000;
    color:#ffffff;
}

.careers h4{
    font-size:1.111em;
    text-align:center;
}

.careers p{
    text-align:center;
}

.careers .social-share{
    text-align:left;
}

.tech-page h1 {
    font-size:3em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:100;
    text-align:center;
    margin-top:70px;
}
.pagetitle h1, h2, h3, h4, h5 {
    font-family:"Helvetica Neue", Helvetica, Arial, Sans-serif;
}
.datagensolutions {
    padding-top:90px;
}
.datagensolutions h4{font-size:1em;color:#00639f;}
/**/.datagensolutions p{font-size:16px;color:#000000;}

.what-does-tech-use {
    padding-top:35px;
}

.put-your-geek {
    width:80.333333%;margin-left:10.333333%;
}
.fastola-movement-top {
    position:relative;top:-17px;
}
.fastola-movement-petabytes {
    width: 100%; color: rgb(255, 255, 255); padding: 20px; visibility: visible; background-color: rgb(1, 16, 30);
}
.fastola-movement-bottom {
    position:relative;bottom:-30px;
}
.copyright {
    text-align:right;
    background: transparent;
    cursor:default;
    color:#ffffff;
    font-family:"Avenir", "Helvetica", Helvetica, Arial, sans-serif; 
    font-size:12px!important;
    margin-bottom:0px;
    padding:0;
}


#object{
    visibility: hidden;
}


.play-btn-container {
    position:relative;
    display:block;
    border:none;
    max-height:142px;
}

.play-btn-overlay {
    position: absolute;
    float:left;
    margin:0 auto;
    display:block;
    top: 0px;
    left: 0px;
    width:100%;
    height:90%;
    text-align:center;
    display:block;
    border:3px #fb483d solid;
    background: rgba(0,0,0,0.7);
}

.play-btn-overlay a{
    position:relative;
    font-size:40px;
    color:#ffffff;
    /*-webkit-text-stroke: 1px #ffffff;*/
    border:none;
    display:block;
    padding-top: 20%;
}

/*.play-btn-overlay i{
    -webkit-box-shadow: 0px 0px 23px 10px rgba(51,50,51,1);
    -moz-box-shadow: 0px 0px 23px 10px rgba(51,50,51,1);
    box-shadow: 0px 0px 23px 10px rgba(51,50,51,1);
}*/

.play-btn-overlay a:hover{
    font-size:63px;
    color:#ff8f88;
    border:none;
    display:block;
    padding-top: 15px;
}
.play-btn-overlay a:active{
    font-size:63px;
    color:#c4382f;
    border:none;
    display:block;
}



/*CAREERS PAGE STYLES*/
.careers table{
    width:100%;
    height:auto;
    margin-bottom:80px;
}

.careers tr{
    border-bottom:1px #aeaeae dotted;
}

.careers tr.last{
    border-bottom:0px #aeaeae dotted;
}

.careers tr:hover{
    color:#ffffff;
    background-color:#000000;
    webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-in;
}


.careers tr.labels{
    background-color:#dbdbdb;
    border-bottom:0px;
}

.careers tr.labels th{
    font-size:1em;
    font-weight:400;
    color:#fb483d;
    background-color:#dbdbdb;
    /*border-right:1px #aeaeae solid;*/
}

.careers th,
.careers td{
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:20px;
    font-size: 1.155em;
    line-height: 22px;
    font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
    letter-spacing: -1px;
    width:16.667%;
}

.careers td i{
    font-family:FontAwesome;
    color:#fb483d;
    font-style:normal;
}

.careers td i.icon{
    font-family:FontAwesome;
    color:#fb483d;
    font-style:normal;
    margin:0 7px 0 7px;
}
.careers td i.icon:hover{
    color:#ff8f88;
    webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-in;
    font-style:normal;
}

.careers td i.icon.last-child{
    font-style:normal;
    margin-left:16px;
}


.careers td.location{
    font-size:.888em;
    color:#9d9d9d;
    font-weight:400;
    letter-spacing: normal;
}

.careers td.term{
    font-size:.888em;
    color:#9d9d9d;
    font-weight:400;
    letter-spacing: normal;
}

.careers td .icon-map-marker{
	margin:5px;
}

.careers td .fa-plus,
.careers td .fa-minus{
  margin-right:15px;
}

.text-danger li{
    color: red;
    font-size:14px;
}

.careers tr.moreContent{
    padding:25px 20px;
}

.careers tr.moreContent:hover{
     background:#fff;
     color:#000;
}

.careers .moreContentCell{
    padding: 0 25px 20px 25px;
    border-left:4px solid #fe4635;
    font-size:14px;
    margin:0 20px;
}

.careers .descriptionItem{
    padding:10px 0;
    letter-spacing:normal;
    font-size:14px;
}

.careers .description0{
    font-size:12px;
    color:#9d9d9d;
    letter-spacing:normal;
}

/***************************************************
                 HOMEPAGE STYLES
***************************************************/


/***********************3D Vertical****************/
.3dvertical-container{
      position: absolute;
      left: 0%;
      bottom: 1.9%;
      width:100%;
      color:#ffffff;
      margin: auto;
      text-align: center;
      -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
     }


.slide h3 span{
    border-top: 5px #ffffff solid;
    padding-top: 5px;
    }



/*********************** EVENTS STYLES ******************/
.events-container {
}

.modal-dialog {
    width: 394px;
    margin: 30px auto;
}
.share-container {
    position: absolute;
    top: 0;
    left: 103px;
}

svg.mail-event{
  margin-left:15px;
}

.events-past-label{

  position:absolute;
  left:0;
  top:44px;
  background:#212121;
  color:white;
  padding:5px 15px;
  text-transform:uppercase;
  font-size:12px;
}

.event-listings-container{
    margin-top:12px;
}

.event-card {
    position:relative;
    display: block;
    clear:both;
    min-height:150px;
    text-decoration: none;
    border: 1px solid #f7f7f7;
    background-color: #fff;
    box-shadow: 0 2px 1px #f7f7f7;
    margin-top:35px;
}

.event-cards .card-image h4{

  font-weight:100;
  line-height:9px;
}

.event-cards .card-image h3{
  font-size:21px;
}


.event-share{
  position:absolute;
  bottom:20px;
  right:0px;
}

 p.event-share a{
  font-size:12px;
  text-transform: uppercase!important;
  outline:0;
  border:0;

}
p.event-otherlink a{
  font-size:12px;
  text-transform: uppercase!important;
  outline:0;
  border:0;
}

.modal-dialog {
  top:150px;
}

.event-card-img {
    display: table-cell;
    vertical-align:middle;
    border-right: 1px solid #d9d9d9;
    float: left;
    overflow: hidden;
    text-align: center;
    display: table;
    line-height: 0;
    max-width:150px;
    max-height:150px;
    height:150px;
}

.event-card-img img{
   width:100%;
   vertical-align:middle;
}

.event-card-info {
    padding:16px 25px 25px 168px;
    width:70%;
}

.event-card-info h4{
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align:left;
}
ul.event-card-info{
    list-style-type: none;
    padding: 0;
    margin-left: 0em;
}

li.event-card-info {
    list-style:none;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align:left;
    font-size:0.9em;
    padding-top: 15px;
    padding-left:0px;
    padding-bottom:0px;
    margin-left:0px;
    margin-bottom:0px;
}
.events-upcoming-label{

  position:absolute;
  left:0;
  top:44px;
  background:#ef4035;
  color:#ffffff;
  padding:5px 5px;
  text-transform:uppercase;
  font-size:12px;
}
.upcoming-events {
    max-height:150px;
    text-decoration: none;
    border: 1px solid #d5d5d5;
    background-color: #fff;
    box-shadow: 0 2px 1px #d5d5d5;
}

.past-events {
    max-height:150px;
    text-decoration: none;
    color:#ffffff;
    border: 1px solid #f7f7f7;
    background-color: #ECECEC;
    box-shadow: 0 2px 1px #f7f7f7;
}

.past-events h4{
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align:left;
    color:#ffffff;
}

.past-events p{
    color:#ffffff;
}



@media only screen and (max-width: 780px) {
    /*********************** EVENTS STYLES ******************/
        .events-container {
        /*height:auto;*/
        }

        .event-listings-container{
            margin-top:12px;
        }

        .event-card {
            position:relative;
            display: block;
            clear:both;
            min-height:150px;
            text-decoration: none;
            border: 1px solid #f7f7f7;
            background-color: #fff;
            box-shadow: 0 2px 1px #f7f7f7;
            margin-top:35px;
        }
        .event-card-img {
            display: table-cell;
            vertical-align:middle;
            border-right: 1px solid #d9d9d9;
            float: left;
            overflow: hidden;
            text-align: center;
            display: table;
            line-height: 0;
            max-width:150px;
            max-height:150px;
        }

        .event-card-img img{
            max-height:150px;

        }

        .event-card-info {
            padding:25px 25px 25px 235px;
            width:70%;
        }

        .event-card-info h4{
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            text-align:left;
        }
        ul.event-card-info{
            list-style-type: none;
            padding: 0;
            margin-left: 0em;
        }

        li.event-card-info {
            list-style:none;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            text-align:left;
            font-size:0.9em;
            padding-top: 15px;
            padding-left:0px;
            padding-bottom:0px;
            margin-left:0px;
            margin-bottom:0px;
        }

        .upcoming-events {
            min-height:150px;
            text-decoration: none;
            border: 1px solid #d5d5d5;
            background-color: #fff;
            box-shadow: 0 2px 1px #d5d5d5;
        }

        .past-events {
            min-height:150px;
            text-decoration: none;
            color:#ffffff;
            border: 1px solid #f7f7f7;
            background-color: #c4c4c4;
            box-shadow: 0 2px 1px #f7f7f7;
        }

        .past-events h4{
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            text-align:left;
            color:#ffffff;
        }

        .past-events p{
            color:#ffffff;
        }

}
/********************************CONTENT FILTER**********************
Main Components
-------------------------------- */
.cd-header {
  position: relative;
  height: 150px;
  background-color: #331d35;
}
.cd-header h1 {
  color: #ffffff;
  line-height: 150px;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 300;
}
@media only screen and (min-width: 1170px) {
  .cd-header {
    height: 180px;
  }
  .cd-header h1 {
    line-height: 180px;
  }
}

.cd-main-content {
  position: relative;
  min-height: 100%;
  margin:50px auto;
}
.cd-main-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-main-content.is-fixed .cd-tab-filter-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.cd-main-content.is-fixed .cd-gallery {
  padding-top: 76px;
}
.cd-main-content.is-fixed .cd-filter {
  position: fixed;
  height: 100vh;
  overflow: hidden;
}
.cd-main-content.is-fixed .cd-filter form {
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.cd-main-content.is-fixed .cd-filter-trigger {
  position: fixed;
}
@media only screen and (min-width: 768px) {
  .cd-main-content.is-fixed .cd-gallery {
    padding-top: 90px;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-main-content.is-fixed .cd-gallery {
    padding-top: 100px;
  }
}

/* --------------------------------

xtab-filter

-------------------------------- */
.cd-tab-filter-wrapper {
  background-color: #ffffff;
  /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);*/
  z-index: 1;
}
.cd-tab-filter-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tab-filter {
  /* tabbed navigation style on mobile - dropdown */
  position: relative;
  height: 50px;
  width: 140px;
  margin: 0 auto;
  z-index: 1;
}
.cd-tab-filter::after {
  /* small arrow icon */
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("assets/img/plugins/content-filter/cd-icon-arrow.svg") no-repeat center center;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  pointer-events: none;
}
.cd-tab-filter ul {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
  box-shadow: inset 0 -2px 0 #fb483d;
}
.cd-tab-filter li {
  display: none;
  list-style:none;
}
.cd-tab-filter li:first-child {
  /* this way the placehodler is alway visible */
  display: block;
}
.cd-tab-filter a {
    display: block;
    height: 50px;
    width: 140px;
    line-height: 50px;
    margin: 0px;
    padding: 10px 15px;
    border: 1px solid #222;
    text-transform: uppercase;
    font-size: .9em;
    font-weight: 900;
    letter-spacing: 1px;
    color: #222;
}
.cd-tab-filter a.selected {
  background: #fb483d;
  color: #ffffff;
  border: 1px solid #fb483d;
}
.cd-tab-filter.is-open::after {
  /* small arrow rotation */
  -webkit-transform: translateY(-50%) rotate(-180deg);
  -moz-transform: translateY(-50%) rotate(-180deg);
  -ms-transform: translateY(-50%) rotate(-180deg);
  -o-transform: translateY(-50%) rotate(-180deg);
  transform: translateY(-50%) rotate(-180deg);
}
.cd-tab-filter.is-open ul {
  box-shadow: inset 0 -2px 0 #fb483d, 0 2px 10px rgba(0, 0, 0, 0.2);
}
.cd-tab-filter.is-open ul li {
  display: block;
  list-style:none;
  padding:0px;
}
.cd-tab-filter.is-open .placeholder a {
  /* reduces the opacity of the placeholder on mobile when the menu is open */
  opacity: .4;
}
@media only screen and (min-width: 768px) {
  .cd-tab-filter {
    /* tabbed navigation style on medium devices */
    width: auto;
    cursor: auto;
  }
  .cd-tab-filter::after {
    /* hide the arrow */
    display: none;
  }
  .cd-tab-filter ul {
    background: transparent;
    position: static;
    box-shadow: none;
    text-align: center;
  }
  .cd-tab-filter li {
    display: inline-block;
    list-style:none;
  }
  .cd-tab-filter li.placeholder {
    display: none !important;
  }
  .cd-tab-filter a {
    display: inline-block;
    padding: 0 1em;
    width: auto;
    color: #222222;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 12px;
  }
  .no-touch .cd-tab-filter a:hover {
    background: #fb483d;
    color: #ffffff;
    border:none;
  }
  .cd-tab-filter a.selected {
    background: #fb483d;
    color: #ffffff;
    /* create border bottom using box-shadow property
    box-shadow: inset 0 -2px 0 #fb483d; */
  }

  .cd-tab-filter a.selected:hover{

    color: #ffffff;
    border: 1px solid #fb483d;
    /* create border bottom using box-shadow property
    box-shadow: inset 0 -2px 0 #fb483d; */
  }

  .cd-tab-filter.is-open ul li {
    display: inline-block;
    list-style:none;
  }
}

@media only screen and (min-width: 1170px) {
  .cd-tab-filter {
    /* tabbed navigation on big devices */
    width: 100%;
    float: right;
    margin: 0;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    transition: width 0.3s;
  }
  .cd-tab-filter.filter-is-visible {
    /* reduce width when filter is visible */
    width: 80%;
  }
}

/* --------------------------------

xgallery

-------------------------------- */
.cd-gallery {
  padding: 26px 5%;
  width: 100%; /*For displaying items full width on IE9*/
}
.cd-gallery li {
  margin-bottom: 1.6em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: none;
  list-style:none;
  width:100%;
}
.cd-gallery li.gap {
  /* used in combination with text-align: justify to align gallery elements */
  opacity: 0;
  height: 0;
  display: inline-block;
}
.cd-gallery img {
  display: block;
  width: 74%;
  margin: 0 auto;
  vertical-align:middle;
  padding-top:20px;
}
.cd-gallery h4 {
  text-align: left;
  color:#000000;
  font-family: Helvetica, Arial, sans-serif;
  font-size:1em;
  font-weight: 300;
}
.cd-gallery p {
  text-align: left;
  color:#000000;
  font-family: Helvetica, Arial, sans-serif;
  font-size:0.85em;
  font-weight: 200;
}
.cd-gallery .cd-fail-message {
  display: none;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .cd-gallery {
    padding: 40px 3%;
  }
  .cd-gallery ul {
    text-align: justify;
  }
  .cd-gallery ul:after {
    content: "";
    display: table;
    clear: both;
  }
  .cd-gallery li {
    width: 48%;
    margin-bottom: 2em;
    list-style:none;
  }

}
@media only screen and (min-width: 1170px) {
  .cd-gallery {
    padding: 30px 2%;
    float: right;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
  }
  .cd-gallery li {
    width: 100%;
    list-style:none;
  }
  .cd-gallery.filter-is-visible {
    /* reduce width when filter is visible */
    width: 80%;
  }
}

/* --------------------------------

xfilter

-------------------------------- */
.cd-filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: #ffffff;
  box-shadow: 4px 4px 20px transparent;
  z-index: 2;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s;
  -moz-transition: -moz-transform 0.3s, box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cd-filter::before {
  /* top colored bar */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background-color: #fb483d;
  z-index: 2;
}
.cd-filter form {
  padding: 70px 20px;
}
.cd-filter .cd-close {
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  width: 60px;
  color: #ffffff;
  font-size: 1.3rem;
  text-align: center;
  background: #37296a;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: 3;
}
.no-touch .cd-filter .cd-close:hover {
  background: #32255f;
}
.cd-filter.filter-is-visible {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
}
.cd-filter.filter-is-visible .cd-close {
  opacity: 1;
}
@media only screen and (min-width: 1170px) {
  .cd-filter {
    width: 20%;
  }
  .cd-filter form {
    padding: 70px 10%;
  }
}

.cd-filter-trigger {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  width: 60px;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  color: transparent;
  white-space: nowrap;
  background: transparent url("assets/img/plugins/content-filter/cd-icon-filter.svg") no-repeat center center;
  z-index: 3;
}
.cd-filter-trigger.filter-is-visible {
  pointer-events: none;
}
@media only screen and (min-width: 1170px) {
  .cd-filter-trigger {
    width: auto;
    left: 2%;
    text-indent: 0;
    color: #9a9a9a;
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 700;
    padding-left: 24px;
    background-position: left center;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
  }
  .no-touch .cd-filter-trigger:hover {
    color: #fb483d;
  }
  .cd-filter-trigger.filter-is-visible, .cd-filter-trigger.filter-is-visible:hover {
    color: #ffffff;
  }
}

/* --------------------------------

xcustom form elements

-------------------------------- */
.cd-filter-block {
  margin-bottom: 1.6em;
}
.cd-filter-block h4 {
  /* filter block title */
  position: relative;
  margin-bottom: .2em;
  padding: 10px 0 10px 20px;
  color: #9a9a9a;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.3rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
.no-touch .cd-filter-block h4:hover {
  color: #fb483d;
}
.cd-filter-block h4::before {
  /* arrow */
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  background: url("assets/img/plugins/content-filter/cd-icon-arrow.svg") no-repeat center center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -ms-transition: -ms-transform 0.3s;
  transition: transform 0.3s;
}
.cd-filter-block h4.closed::before {
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.cd-filter-block input, .cd-filter-block select,
.cd-filter-block .radio-label::before,
.cd-filter-block .checkbox-label::before {
  /* shared style for input elements */
  font-family: "Open Sans", sans-serif;
  border-radius: 0;
  background-color: #ffffff;
  border: 2px solid #e6e6e6;
}
.cd-filter-block input[type='search'],
.cd-filter-block input[type='text'],
.cd-filter-block select {
  width: 100%;
  padding: .8em;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  box-shadow: none;
}
.cd-filter-block input[type='search']:focus,
.cd-filter-block input[type='text']:focus,
.cd-filter-block select:focus {
  outline: none;
  background-color: #ffffff;
  border-color: #fb483d;
}
.cd-filter-block input[type='search'] {
  /* custom style for the search element */
  border-color: transparent;
  background-color: #e6e6e6;
  /* prevent jump - ios devices */
  font-size: 1.6rem !important;
}
.cd-filter-block input[type='search']::-webkit-search-cancel-button {
  display: none;
}
.cd-filter-block .cd-select {
  /* select element wrapper */
  position: relative;
}
.cd-filter-block .cd-select::after {
  /* switcher arrow for select element */
  content: '';
  position: absolute;
  z-index: 1;
  right: 14px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
  width: 16px;
  height: 16px;
  background: url("assets/img/plugins/content-filter/cd-icon-arrow.svg") no-repeat center center;
  pointer-events: none;
}
.cd-filter-block select {
  cursor: pointer;
  font-size: 1.4rem;
}
.cd-filter-block select::-ms-expand {
  display: none;
}
.cd-filter-block .list li {
  position: relative;
  margin-bottom: .8em;
}
.cd-filter-block .list li:last-of-type {
  margin-bottom: 0;
}
.cd-filter-block input[type=radio],
.cd-filter-block input[type=checkbox] {
  /* hide original check and radio buttons */
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 2;
}
.cd-filter-block .checkbox-label,
.cd-filter-block .radio-label {
  padding-left: 24px;
  font-size: 1.4rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cd-filter-block .checkbox-label::before, .cd-filter-block .checkbox-label::after,
.cd-filter-block .radio-label::before,
.cd-filter-block .radio-label::after {
  /* custom radio and check boxes */
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-filter-block .checkbox-label::before,
.cd-filter-block .radio-label::before {
  width: 16px;
  height: 16px;
  left: 0;
}
.cd-filter-block .checkbox-label::after,
.cd-filter-block .radio-label::after {
  /* check mark - hidden */
  display: none;
}
.cd-filter-block .checkbox-label::after {
  /* check mark style for check boxes */
  width: 16px;
  height: 16px;
  background: url("assets/img/plugins/content-filter/cd-icon-check.svg") no-repeat center center;
}
.cd-filter-block .radio-label::before,
.cd-filter-block .radio-label::after {
  border-radius: 50%;
}
.cd-filter-block .radio-label::after {
  /* check mark style for radio buttons */
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  left: 5px;
}
.cd-filter-block input[type=radio]:checked + label::before,
.cd-filter-block input[type=checkbox]:checked + label::before {
  border-color: #fb483d;
  background-color: #fb483d;
}
.cd-filter-block input[type=radio]:checked + label::after,
.cd-filter-block input[type=checkbox]:checked + label::after {
  display: block;
}

@-moz-document url-prefix() {
  /* hide custom arrow on Firefox - select element */
  .cd-filter-block .cd-select::after {
    display: none;
  }
}


/*********************************************************
                HOMEPAGE IMAGE HOVER EFFECTS
*********************************************************/
.jm-item {
    padding: 10px;
    display: inline-block;
    text-align: left;
}
.jm-item-wrapper {
    position: relative;
    /*padding: 7px;
    background: #E8D7B6;*/
}
.jm-item-image {
    position: relative;
    overflow: hidden;
}
.jm-item-image img {
    display: block;
    width:100%;
}
.jm-item-title {
    position: absolute;
    left: -10px;
    bottom: 17px;
    background: #FF6B0E;
    line-height: 1.5em;
    font-weight: normal;
    padding: 7px 9px 6px;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    color: #FFFFFF;
    font-size: 1.4em;
}
.jm-item-overlay {
    background: #000;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.5s ease-in 0s;
    -moz-transition: opacity 0.5s ease-in 0s;
    -o-transition: opacity 0.5s ease-in 0s;
    -ms-transition: opacity 0.5s ease-in 0s;
    transition: opacity 0.5s ease-in 0s;
}
.jm-item-wrapper:hover .jm-item-overlay {
    opacity: 0.3;
}
.jm-item-button {
    height: 50px;
    width: 50px;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -25px;
}
.jm-item-button a {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #ef4035;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    color: #FFFFFF;
    font-size: 0.85em;
    line-height: 50px;
    -webkit-transition: all 0.1s ease-in 0s;
    -moz-transition: all 0.1s ease-in 0s;
    -o-transition: all 0.1s ease-in 0s;
    -ms-transition: all 0.1s ease-in 0s;
    transition: all 0.1s ease-in 0s;
    text-decoration: none !important;
    display: block;
}
.jm-item-button a:hover {
    background: #3b3b3b;
}
.first .jm-item-button {
    -webkit-transition: all 0.2s ease-in 0.2s;
    -moz-transition: all 0.2s ease-in 0.2s;
    -o-transition: all 0.2s ease-in 0.2s;
    -ms-transition: all 0.2s ease-in 0.2s;
    transition: all 0.2s ease-in 0.2s;
    top: -50px;
}
.first .jm-item-wrapper:hover .jm-item-button {
    top: 32%;
}

.cloudera-inner-thumb {
    position:relative;
    width:200px;
    float:left;
    margin: 0px 30px 15px 0px;
}

.grid{
    overflow:hidden;
}

/*****************  TYPEWRITER *******************/
.reveal #header {
  margin-top:-270px;
  opacity:0.3;
}
.reveal #header:hover {
  opacity:0.9;
  -webkit-transition:all 200ms;
  transition:all 200ms;
}
.ta {
position:absolute;
left:4%;
top:58%;
/*margin-top:-66px;*/

height:50px;
/*width:420px;*/
background:none;
z-index:2;
-webkit-transition:all 1s, color 400ms, outline 50ms;
transition:all 1s, color 400ms, outline 50ms;
overflow:hidden;
}
.textarea {
  display:block;
  background:none;
  height:50px;
  width:400px;
  padding:10px;
  color:#ffffff;
  font-size:130%;
  border:0!important;
  font-weight: 400;
}
.textarea.dim {
color:rgba(236,236,236,0.3);
}
#rhs {
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-210px;
  height:30px;
  width:420px;
  background:none;
  white-space:pre;
  -webkit-transition:all 1s;
  -transition:all 1s;
  font-size:80%;
  overflow:hidden;
  text-overflow: ellipsis;
  text-align:left;
}
#rhs #code {
height:30px;
width:400px;
padding:10px;
background:none !important;
}
.ta {
  margin-right:-210px;
}
#rhs {
  margin-left:-210px;
}
.reveal .ta, .reveal #rhs {
  margin-right:0px;
  margin-left:0px;
}
#secondhalf {
  display:none;
}
#usage {
  position:absolute;
  display:block;
  border:0!important;
  background:none;
  background:none;
  color:#030;
  z-index:3;
  display:block;
  bottom:-70px;
  left:15px;
  width:380px;
  height:3em;
  padding:5px;
  overflow:scroll;
  white-space:pre;
  opacity:0;
  -webkit-transition:bottom 1s, opacity 200ms;
  transition:bottom 1s, opacity 200ms;
  font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
}
#usage.show {
  opacity:0.4;
  bottom:15px;
}
#usage:hover {
  opacity:1;
}


#jquery-script-menu {
    position: fixed;
    height: 90px;
    width: 100%;
    top: 0;
    left: 0;
    border-top: 5px solid #316594;
    background: #fff;
    -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
    z-index: 999999;
    padding: 10px 0;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}

.jquery-script-center {
    width: 960px;
    margin: 0 auto;
}
.jquery-script-center ul {
    width: 212px;
    float:left;
    line-height:45px;
    margin:0;
    padding:0;
    list-style:none;
}
.jquery-script-center a {
    text-decoration:none;
}
.jquery-script-ads {
    width: 728px;
    height:90px;
    float:right;
}
.jquery-script-clear {
    clear:both;
    height:0;
}


footer .btn{
    white-space: normal;
    border:0!important;
    outline:0!important;
    cursor:pointer!important;}



} /* END @media(min-width:1025px)  */




@media (min-width:300px) {
    .events .portfolio figcaption img {
        top: -36% !important;
    }

    .events .portfolio figcaption div {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}


@media (min-width: 767px) and (max-width: 1024px) {
    .events .portfolio figcaption {
        padding: 2em 1em;
    }
    .events .portfolio figcaption img {
        margin-top:20px;
        top: -98% !important;
    }
    .events .portfolio figcaption h2 {
        font-size: 0.6em;
    }

	/*CAREERS PAGE STYLES*/
        .careers table{
            width:100%;
            height:auto;
            margin-bottom:80px;
        }

        .careers tr{
            border-bottom:1px #aeaeae dotted;
        }

        .careers tr.last{
            border-bottom:0px #aeaeae dotted;
        }

        .careers tr:hover{
            color:#ffffff;
            background-color:#000000;
            webkit-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            -ms-transition: all .3s ease-in;
            transition: all .3s ease-in;
        }

        .careers tr.labels{
            background-color:#dbdbdb;
            border-bottom:0px;
        }

        .careers tr.labels th{
            font-size:1em;
            font-weight:400;
            color:#fb483d;
            background-color:#dbdbdb;
            /*border-right:1px #aeaeae solid;*/
        }

        .careers th,
        .careers td{
            padding-top:10px;
            padding-bottom:10px;
            padding-left:20px;
            padding-right:20px;
            font-size: 1.155em;
            line-height: 22px;
            font-family: "Helvetica Neue",Helvetica, Arial, sans-serif;
            letter-spacing: -1px;
            width:16.667%;
        }

        .careers td i{
            font-family:FontAwesome;
            color:#fb483d;
            font-style:normal;
        }

        .careers td i.icon{
            font-family:FontAwesome;
            color:#fb483d;
            font-style:normal;
            margin:0 7px 0 7px;
        }
        .careers td i.icon:hover{
            color:#ff8f88;
            webkit-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            -ms-transition: all .3s ease-in;
            transition: all .3s ease-in;
            font-style:normal;
        }

        .careers td i.icon.last-child{
            font-style:normal;
            margin-left:16px;
        }


        .careers td.location{
            font-size:.888em;
            color:#9d9d9d;
            font-weight:400;
            letter-spacing: normal;
        }

        .careers td.term{
            font-size:.888em;
            color:#9d9d9d;
            font-weight:400;
            letter-spacing: normal;
        }

        .careers td .icon-map-marker{
        	margin:5px;
        }

        .text-danger li{
            color: red;
            font-size:14px;
        }

        .careers tr.moreContent{
            padding:25px 20px;
        }

        .careers tr.moreContent:hover{
             background:#fff;
             color:#000;
        }

        .careers .moreContentCell{
            padding: 0 25px 20px 25px;
            border-left:4px solid #fe4635;
            font-size:14px;
            margin:0 20px;
        }

        .careers .descriptionItem{
            padding:10px 0;
            letter-spacing:normal;
            font-size:14px;
        }

        .careers .description0{
            font-size:12px;
            color:#9d9d9d;
            letter-spacing:normal;
        }

        
}


button {
    background-color: #666;
}

/* DataGen Hackathon Page */
@media(max-width:640px) {
    .btn-drkblue,
    .btn-orange {
        left: 33%;
    }
}
@media(min-width:1024px) {
    .right-rail-blue .btn-orange {
        left: 20%;
    }
    .right-rail-orange .btn-orange {
        left: 20%;
    }

    .events .portfolio figcaption img {
        margin-top:20px;
        top: -98% !important;
    }
    .events .portfolio figcaption div {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

.magnific-gallery {
    padding-left: 0;
}
.magnific-gallery li img {
    width: 11%;
}

/**Homepage Carousel**/
.carousel-caption {
    top:10%;
}

.carousel-inner{
    height:492px;
}

@media only screen and (min-width:280px) and (max-width:767px){
  .carousel-inner{
    height:280px;
  }
  .home-slides img {
    background-size:160%!important;
    max-width:160%!important;
  }
}

@media(min-width:768px) {
    /*MOBILE ONLY*/
    .mobile-only {
        display:none;
    }

    .careers .applyOnline{
          float: right;
          display:inline;
          padding-top:0;
    }
}

@media(max-width:767px) {
    /*MOBILE ONLY*/
    .mobile-only {
        display:block;
    }

    .randich-orange{
        float: right;
        padding: 0px 0px 15px 0px;
        background-repeat: no-repeat;
        width: 100%;
        margin-bottom:50px;

    }

    .randich-orange h4{
      font-size: 1.0em;
      margin-top: -5px;
      text-transform: none!important;
      color: #ffab00!important;
      margin-bottom: 10px;
      text-align: center!important;
      padding-left: 12px;
    }

    .randich-orange img{
      margin: 0 auto;
      padding-bottom: 15px;
      width:25%;
    }

    .randich-orange p{
      font-size: 12px;
      color:#000000;
      line-height:1.5;
      margin:0px 0px 10px;
      text-align:left;
      padding:0px 0px 0px 20px;
      border-left: 9px #ffab00 solid;
    }
    .randich-orange-lower {
        padding:0px 0px 0px 20px;
        border-left: 9px #ffab00 solid;
        float:right;
        background-repeat:no-repeat;
        width:100%;
    }
    .randich-orange-lower h4{
      font-size: 1.0em;
      margin-top: -5px;
      text-transform: none!important;
      color: #ffab00;
      margin-bottom: 10px;
      text-align: left;
      padding-left: 12px;
    }

    .randich-orange-lower-h4{
      font-size: 1.2em;
      margin-top: -5px;
      text-transform: none!important;
      color: #455a64;
      margin-bottom: 20px;
      text-align: center;
    }

    .randich-orange-lower span{
      font-size: 5.0em;
      margin: -15px 0px 0px -6px;
      text-transform: none!important;
      color: #ffab00;
      margin-bottom: 10px;
      text-align: left;
      line-height: 87px;
      letter-spacing: -9px;
    }

    .randich-orange-lower p{
      font-size: 12px;
      color:#000000;
      line-height:1.5;
      margin:0px 0px 10px;
      text-align:left;
    }

    .randich-aside p{
        color:#000000;
        font-size:16px;
    }
}

.article-content.noTranscript h3,
.article-content.noTranscript p{
		text-align: center;
}


/* ============ API ==============*/

.api .intro-content.wow.fadeIn {
    text-align: center!important;
    padding-top:80px!important
}

header .api-subtext {
    margin-top: 305px;
}

.api-content p {
    color: #808587;
    font-size: 1em;
    /*width: 60%;*/
    margin: 0 auto;
    text-align: left!important;
}

.api-tabs .nav-tabs{
    border:none;
    background:#f44336;
    padding:0;
    margin:0;
  }

.api-tabs .nav-tabs ul{
    height:100%;
    background:#f44336;

  }

  .api-tabs .nav-tabs>li{
    float:none;
  }

  .api-tabs .nav-tabs>li>a{
    color:#ffffff;
    margin:1px;
    border-radius:0;
  }

  .api-tabs .nav-tabs>li.active>a{
    border:none;
    color:#f44336;
  }

  .api-tabs .nav-tabs>li>a:hover{
    color:#f44336;
    background: #ffffff;
  }

  /*============== SLIDING BUTTONS =================*/

/* Button 1 */

/*.btn-1-container{
  border:2px solid #f44336;
  border-right:0;
}*/
.btn-1 {
  border-left: 3px solid #f44336;
  color: #fff;
}
/* Button 1c */
.btn-1c:after {
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background: #f44336;
}

.btn-1c:hover,
.btn-1c:active {
  color: #ffffff;
}

.btn-1c:hover:after,
.btn-1c:active:after {
  width: 100%;
}
/* General button style (reset) */
.sliding-btn {
  border: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: inherit;
  background: none;
  cursor: pointer;
  padding: 5px 10px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 100;
  outline: none;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.sliding-btn:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* Pseudo elements for icons */
.sliding-btn:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

.sliding-btn {
  border: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: inherit;
  background: none;
  cursor: pointer;
  display: inline-block;
  margin: 15px 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 100;
  outline: none;
  position: relative;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.sliding-btn:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* Pseudo elements for icons */
.sliding-btn:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
}



/*============= MORPHING BUTTONS ================*/
/* Morph Button: Default Styles */

.morph-button {
  position: relative;
  display: block;
  margin: 0 auto;
}

.morph-button > button {
  position: relative;
  padding: 0 1em;
  border: none;
  background-color: #e85657;
  color: #f9f6e5;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 80px;
  overflow: hidden;
}

.morph-button.open > button {
  pointer-events: none;
}

.morph-content {
  pointer-events: none;
}

.morph-button.open .morph-content {
  pointer-events: auto;
}

/* Common styles for overlay and modal type (fixed morph) */
.morph-button-fixed,
.morph-button-fixed .morph-content {
  width: 300px;
  height: 80px;
}

.morph-button-fixed > button {
  z-index: 1000;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.1s 0.5s;
  transition: opacity 0.1s 0.5s;
}

.morph-button-fixed.open > button {
  opacity: 0;
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
}

.morph-button-fixed .morph-content {
  position: fixed;
  z-index: 900;
  opacity: 0;
  -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
  transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button-fixed.open .morph-content {
  opacity: 1;
}

.morph-button-fixed .morph-content > div {
  visibility: hidden;
  height: 0;
  opacity: 0;
  -webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
  transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;
}

.morph-button-fixed.open .morph-content > div {
  visibility: visible;
  height: auto;
  opacity: 1;
  -webkit-transition: opacity 0.3s 0.5s;
  transition: opacity 0.3s 0.5s;
}

.morph-button-fixed.active > button {
  z-index: 2000;
}

.morph-button-fixed.active .morph-content {
  z-index: 1900;
}

/* Transitions for overlay button and sidebar button */
.morph-button-overlay .morph-content,
.morph-button-sidebar .morph-content {
  -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
  transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

.morph-button-overlay.open .morph-content,
.morph-button-sidebar.open .morph-content {
  -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
  transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
}

/* Morph Button Style: Overlay */
.morph-button.morph-button-overlay {
  margin: 50px auto;
}

.morph-button-overlay .morph-content {
  overflow: hidden;
  background: #e85657;
}

.morph-button-overlay.open .morph-content {
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  height: 100%;
}

/* Morph Button Style: Modal */
.morph-button-modal::before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 800;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  pointer-events: none;
}

.morph-button-modal.open::before {
  opacity: 1;
  pointer-events: auto;
}

.morph-button-modal.active::before {
  z-index: 1800;
}

.morph-button-modal .morph-content {
  overflow: hidden;
  -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
  transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

.morph-button-modal.open .morph-content {
  top: 50% !important;
  left: 50% !important;
  margin: -210px 0 0 -300px;
  width: 600px;
  height: 420px;
  -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
  transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

/* Colors and sizes for individual modals */
.morph-button.morph-button-modal-1 {
  float: left;
}

.morph-button.morph-button-modal-2,
.morph-button.morph-button-modal-3 {
  display: inline-block;
  margin: 10px 15px;
}

.morph-button-modal-1 > button,
.morph-button-modal-1 .morph-content {
  background-color: #553445;
}

.morph-button-modal-2 > button,
.morph-button-modal-2 .morph-content,
.morph-button-modal-3 > button,
.morph-button-modal-3 .morph-content {
  background-color: #fef0e3;
  color: #e75854;
}

.morph-button-modal-4 {
  display: inline-block;
}

.morph-button-modal-4 > button,
.morph-button-modal-4 .morph-content {
  background-color: #faf1e0;
  color: #553445;
}

.morph-button-modal-4 > button span,
.morph-button-modal-4 .morph-clone {
  padding-left: 10px;
  color: #286f81;
}

.morph-button-modal-4 .morph-clone {
  position: absolute;
  right: 34px;
  bottom: 30px;
  z-index: 100;
  letter-spacing: 1px;
  font-weight: 700;
  -webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
  transition: bottom 0.4s 0.1s, right 0.4s 0.1s;
}

.morph-button-modal-4.open .morph-clone,
.no-js .morph-button-modal-4 .morph-clone {
  right: 10px;
  bottom: 10px;
}

.morph-button-modal-1::before {
  background: rgba(240,221,204,0.7);
}

.morph-button-modal-2.open .morph-content {
  margin: -210px 0 0 -170px;
  width: 340px;
  height: 420px;
}

.morph-button-modal-3.open .morph-content {
  margin: -255px 0 0 -210px;
  width: 420px;
  height: 510px;
}

.morph-button-modal-3.open .morph-content > div {
  height: 420px;
}

.morph-button-modal-2.open .morph-content > div,
.morph-button-modal-3.open .morph-content > div {
  -webkit-transition: opacity 0.3s 0.3s;
  transition: opacity 0.3s 0.3s;
}

.morph-button-modal-4.open .morph-content {
  margin: -200px 0 0 -320px;
  width: 640px;
  height: 400px;
}

/* Morph Button Style: In the content flow */
.morph-button-inflow {
  overflow: hidden;
  max-width: 100%;
  height: 70px;
}

.morph-button-inflow > button {
  width: 100%;
  line-height: 70px;
}

.morph-button-inflow .morph-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.morph-button-inflow .morph-content .morph-clone {
  padding: 0;
  font-weight: 700;
  font-size: 1.5em;
  line-height: 70px;
}

/* Colors and sizes for individual in flow buttons */
.morph-button-inflow-1 {
  width: 600px;
  margin: 2em auto;
  -webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
  transition: height 0.5s cubic-bezier(0.7,0,0.3,1);
}

.morph-button-inflow-1 > button span {
  visibility: hidden;
}

.morph-button-inflow-1 .morph-content .morph-clone {
  color: #f9f6e5;
  background: #e85657;
}

.morph-button-inflow-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  background-color: #fef0e3;
  -webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s;
  transition: height 0.3s, width 0.3s, transform 0.3s;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.morph-button-inflow-2 > button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: #e75854;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.morph-button-inflow-2.open > button {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.morph-button-inflow-2 .morph-content {
  width: 260px;
  height: 200px;
}

.morph-button-inflow-2.open {
  width: 260px;
}

/* Morph Button Style: Sidebar */
.morph-button-sidebar,
.morph-button-sidebar .morph-content {
  width: 60px;
  height: 60px;
}

.morph-button-sidebar {
  position: fixed;
  bottom: 50px;
  left: 50px;
}

.morph-button-sidebar > button {
  line-height: 60px;
  font-size: 1.6em;
  padding: 0;
}

.morph-button-sidebar .morph-content {
  background: #e85657;
}

.morph-button-sidebar.open .morph-content {
  top: 0 !important;
  left: 0 !important;
  width: 300px;
  height: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
}

/* Let's add some nice easing for all cases */
.morph-button .morph-content,
.morph-button.open .morph-content,
.morph-button-modal-4 .morph-clone {
  -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Helper classes */
.noscroll {
  overflow: hidden;
}

.morph-button-overlay.scroll .morph-content {
  overflow-y: scroll;
}

.morph-button-sidebar.scroll .morph-content {
  overflow: auto;
}

/* No JS fallback: let's hide the button and show the content */
.no-js .morph-button > button {
  display: none;
}

.no-js .morph-button {
  margin: 10px 0;
  float: none;
}

.no-js .morph-button,
.no-js .morph-button .morph-content,
.no-js .morph-button .morph-content > div {
  position: relative;
  width: auto;
  height: auto;
  opacity: 1;
  visibility: visible;
  top: auto;
  left: auto;
  -webkit-transform: none;
  transform: none;
  pointer-events: auto;
}

.no-js .morph-button .morph-content .icon-close {
  display: none;
}

.no-js .morph-button-sidebar {
  width: 300px;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  height: 100%;
  background: #e85657;
  overflow: auto;
}

.no-transition {
  -webkit-transition: none !important;
  transition: none !important;
}

/* Media Queries */

@media screen and (max-width: 600px) {
  .morph-button-modal.open .morph-content {
    top: 0% !important;
    left: 0% !important;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
    transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;
  }
}

@media screen and (max-width: 400px) {
  .morph-button-fixed,
  .morph-button-fixed .morph-content {
    width: 200px;
    height: 80px;
  }

  .morph-button-fixed > button {
    font-size: 75%;
  }

  .morph-button-sidebar > button {
    font-size: 1.6em;
  }

  .morph-button-inflow .morph-content .morph-clone {
    font-size: 0.9em;
  }

  .morph-button-modal-4,
  .morph-button-modal-4 .morph-content {
    width: 220px;
    height: 120px;
  }

  .morph-button-modal-4 > button {
    font-size: 100%;
    line-height: 50px;
  }

  .morph-button-modal-4 > button span {
    display: block;
  }

  .morph-button-modal-4 .morph-clone {
    right: 83px;
    bottom: 26px;
  }

  .morph-button-sidebar,
  .morph-button-sidebar .morph-content {
    width: 100% !important;
    height: 60px !important;
  }

  .morph-button-sidebar {
    bottom: 0px;
    left: 0px;
  }

  .morph-button-sidebar.open .morph-content {
    height: 100% !important;
  }
}

section.related {
  text-align: center;
}

.related p {
  font-weight: 700;
}

.related > a {
  border: 2px solid #faf1e0;
  color: #faf1e0;
  display: inline-block;
  text-align: center;
  margin: 20px 10px;
  padding: 20px;
  -webkit-transition: color 0.3s, border-color 0.3s;
  transition: color 0.3s, border-color 0.3s;
}

.related a:hover {
  color: rgba(0,0,0,0.2);
  border-color: rgba(0,0,0,0.2);
}

.related a img {
  max-width: 100%;
  opacity: 0.8;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.related a:hover img,
.related a:active img {
  opacity: 1;
}

.related a h3 {
  margin: 0;
  padding: 0.5em 0 0.3em;
  max-width: 300px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1em;
  text-align: left;
  font-family: "Merriweather Sans", sans-serif;
}

/* Demo mockups */
.mockup-content {
  text-align: center;
}

.demo-4 .mockup-content {
  padding: 1em 0 3em;
}

.demo-5 .mockup-content {
  padding: 1em 0 6em;
}

.mockup-content > span {
  display: block;
  background: rgba(0,0,0,0.1);
  height: 50px;
  width: 100%;
  margin: 0 0 10px;
  clear: both;
}

.mockup-content > span:nth-child(2),
.mockup-content > span:nth-child(3),
.mockup-content > span:nth-last-child(2) {
  width: calc(50% - 5px);
  float: left;
  clear: none;
  height: 80px;
}

.mockup-content > span:nth-child(3),
.mockup-content > span:nth-last-child(2) {
  float: right;
}

.mockup-content > span:nth-last-child(2) {
  width: calc(100% - 310px);
}

.no-js .mockup-content > span:nth-last-child(2) {
  width: 100%;
}

.mockup-content h2 {
  font-size: 2em;
  margin: 0;
}

.mockup-content > p {
  font-family: 'Blokk', sans-serif;
  font-size: 0.85em;
  text-align: center;
  opacity: 0.5;
  margin: 0;
  overflow: hidden;
}

.no-js .joiner {
  display: block;
}

.demo-5 .mockup-content > p {
  font-size: 1.4em;
  margin: 0;
  padding: 0.5em 0;
  text-align: justify;
  font-family: 'Lato', Arial, sans-serif;
}

.js .fixed-block {
  min-height: 300px;
  position: relative;
}

.mockup-left {
  float: left;
  max-width: 100%;
  overflow: hidden;
  width: 300px;
  margin: 0 40px 50px 0;
  background: rgba(0,0,0,0.1);
  height: 400px;
  position: relative;
}

.mockup-left::after {
  content:'\2234';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(0,0,0,0.05);
  font-size: 15em;
}

.mockup-right {
  text-align: left;
}

html.demo-7, .demo-7 body {
  overflow-x: hidden;
  height: 100%;
}

.demo-7 .container {
  width: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
}

.no-js.demo-7 .container {
  width: calc(100% - 300px);
  right: 0;
}

.pushed.container {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
}

@media screen and (max-width: 770px) {
  .mockup-left {
    float: none;
    margin: 0 auto 20px;
  }

  .mockup-right {
    text-align: center;
  }

  .joiner {
    display: block;
  }
}

@media screen and (max-width: 400px) {
  .mockup-content > span:nth-last-child(2) {
    width: calc(100% - 210px);
  }
}

/*================ BACK TO TOP ===============*/
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  color:#a4a4a4;
  font-size:14px;
  text-align:center;
  /* image replacement properties */
  /*overflow: hidden;
  text-indent: 100%;*/
  white-space: nowrap;
  background: rgba(33, 33, 33, 0.8) url(../img/cd-top-arrow.png) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 40px;
    width: 40px;
    right: 30px;
    bottom: 112px;
  }
}


/*==================== CUSTOM SCROLLBAR =====================*/
  .mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ }
  .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; }

  .mCustomScrollBox{ /* contains plugin's markup */
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
  }

  .mCSB_container{ /* contains the original content */
    overflow: hidden;
    width: 100%;
    height: auto;
  }



/*
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR
y-axis
------------------------------------------------------------------------------------------------------------------------
*/

  .mCSB_inside > .mCSB_container{ margin-right: 30px; }

  .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */

  .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */
    margin-right: 0;
    margin-left: 30px;
  }

  .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */

  .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
    position: absolute;
    width: 16px;
    height: auto;
    left: auto;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */

  .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
  .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */
    right: auto;
    left: 0;
  }

  .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */

  .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: auto;
  }

  .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }

  .mCSB_scrollTools .mCSB_draggerRail{
    width: 3px;
    height: 100%;
    margin: 0 auto;
    -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
  }

  .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */
    cursor: pointer;
    width: 100%;
    height: 30px; /* minimum dragger height */
    z-index: 1;
  }

  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */
    position: relative;
    width: 4px;
    height: 100%;
    margin: 0 auto;
    -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
    text-align: center;
  }

  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }

  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }

  .mCSB_scrollTools .mCSB_buttonUp,
  .mCSB_scrollTools .mCSB_buttonDown{
    display: block;
    position: absolute;
    height: 20px;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    cursor: pointer;
  }

  .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }



/*
------------------------------------------------------------------------------------------------------------------------
3. HORIZONTAL SCROLLBAR
x-axis
------------------------------------------------------------------------------------------------------------------------
*/

  .mCSB_horizontal.mCSB_inside > .mCSB_container{
    margin-right: 0;
    margin-bottom: 30px;
  }

  .mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; }

  .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */

  .mCSB_scrollTools.mCSB_scrollTools_horizontal{
    width: auto;
    height: 16px;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
  .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */

  .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; }

  .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{
    width: 100%;
    height: 2px;
    margin: 7px 0;
  }

  .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{
    width: 30px; /* minimum dragger width */
    height: 100%;
    left: 0;
  }

  .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
    width: 100%;
    height: 4px;
    margin: 6px auto;
  }

  .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
  .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
    height: 12px; /* auto-expanded scrollbar */
    margin: 2px auto;
  }

  .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
    height: 8px; /* auto-expanded scrollbar */
    margin: 4px 0;
  }

  .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
  .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{
    display: block;
    position: absolute;
    width: 20px;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    cursor: pointer;
  }

  .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; }

  .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; }



/*
------------------------------------------------------------------------------------------------------------------------
4. VERTICAL AND HORIZONTAL SCROLLBARS
yx-axis
------------------------------------------------------------------------------------------------------------------------
*/

  .mCSB_container_wrapper{
    position: absolute;
    height: auto;
    width: auto;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-right: 30px;
    margin-bottom: 30px;
  }

  .mCSB_container_wrapper > .mCSB_container{
    padding-right: 30px;
    padding-bottom: 30px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  }

  .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; }

  .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; }

  /* non-visible horizontal scrollbar */
  .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; }

  /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
  .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal,
  .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; }

  /* RTL direction/left-side scrollbar */
  .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; }

  /* non-visible scrollbar/RTL direction/left-side scrollbar */
  .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; }

  .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */
    margin-right: 0;
    margin-left: 30px;
  }

  .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; }

  .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; }

  .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{
    margin-right: 0; /* non-visible scrollbar */
    margin-left: 0;
  }

  /* non-visible horizontal scrollbar */
  .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; }



/*
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS
------------------------------------------------------------------------------------------------------------------------
*/

  .mCSB_scrollTools,
  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCSB_scrollTools .mCSB_buttonUp,
  .mCSB_scrollTools .mCSB_buttonDown,
  .mCSB_scrollTools .mCSB_buttonLeft,
  .mCSB_scrollTools .mCSB_buttonRight{
    -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
    transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  }

  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
  .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
  .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
  .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
    -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s,
          margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
          margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
          opacity .2s ease-in-out, background-color .2s ease-in-out;
    -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s,
          margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
          margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
          opacity .2s ease-in-out, background-color .2s ease-in-out;
    -o-transition: width .2s ease-out .2s, height .2s ease-out .2s,
          margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
          margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
          opacity .2s ease-in-out, background-color .2s ease-in-out;
    transition: width .2s ease-out .2s, height .2s ease-out .2s,
          margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
          margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
          opacity .2s ease-in-out, background-color .2s ease-in-out;
  }



/*
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
------------------------------------------------------------------------------------------------------------------------
*/

  /*
  ----------------------------------------
  6.1 THEMES
  ----------------------------------------
  */

  /* default theme ("light") */

  .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }

  .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
  .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; }

  .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
  .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
  .mCustomScrollBox:hover > .mCSB_scrollTools,
  .mCustomScrollBox:hover ~ .mCSB_scrollTools,
  .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
  .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }

  .mCSB_scrollTools .mCSB_draggerRail{
    background-color: #cbcbcb; background-color: rgba(203,203,203,0.75);
    filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)";
  }

  .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background-color: #000; background-color: rgba(0,0,0,0.4);
    filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)";
  }

  .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
    background-color: #000; background-color: rgba(0,0,0,0.85);
    filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)";
  }
  .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
    background-color: #000; background-color: rgba(0,0,0,0.9);
    filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)";
  }

  .mCSB_scrollTools .mCSB_buttonUp,
  .mCSB_scrollTools .mCSB_buttonDown,
  .mCSB_scrollTools .mCSB_buttonLeft,
  .mCSB_scrollTools .mCSB_buttonRight{
    background-image: url(mCSB_buttons.png); /* css sprites */
    background-repeat: no-repeat;
    opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)";
  }

  .mCSB_scrollTools .mCSB_buttonUp{
    background-position: 0 0;
    /*
    sprites locations
    light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
    dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
    */
  }

  .mCSB_scrollTools .mCSB_buttonDown{
    background-position: 0 -20px;
    /*
    sprites locations
    light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px
    dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px
    */
  }

  .mCSB_scrollTools .mCSB_buttonLeft{
    background-position: 0 -40px;
    /*
    sprites locations
    light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px
    dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px
    */
  }

  .mCSB_scrollTools .mCSB_buttonRight{
    background-position: 0 -56px;
    /*
    sprites locations
    light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px
    dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px
    */
  }

  .mCSB_scrollTools .mCSB_buttonUp:hover,
  .mCSB_scrollTools .mCSB_buttonDown:hover,
  .mCSB_scrollTools .mCSB_buttonLeft:hover,
  .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }

  .mCSB_scrollTools .mCSB_buttonUp:active,
  .mCSB_scrollTools .mCSB_buttonDown:active,
  .mCSB_scrollTools .mCSB_buttonLeft:active,
  .mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; }


  /* theme: "dark" */

  .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }

  .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

  .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); }

  .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); }

  .mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; }

  .mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }

  .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }

  .mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }

  /* ---------------------------------------- */



  /* theme: "light-2", "dark-2" */

  .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
    width: 4px;
    background-color: #fff; background-color: rgba(255,255,255,0.1);
    -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
  }

  .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    width: 4px;
    background-color: #fff; background-color: rgba(255,255,255,0.75);
    -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
  }

  .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
    width: 100%;
    height: 4px;
    margin: 6px auto;
  }

  .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }

  .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }

  .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; }

  .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -20px; }

  .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -40px; }

  .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; }


  /* theme: "dark-2" */

  .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
    background-color: #000; background-color: rgba(0,0,0,0.1);
    -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
  }

  .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background-color: #000; background-color: rgba(0,0,0,0.75);
    -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
  }

  .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

  .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

  .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; }

  .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; }

  .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; }

  .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -56px; }

  /* ---------------------------------------- */



  /* theme: "light-thick", "dark-thick" */

  .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
    width: 4px;
    background-color: #fff; background-color: rgba(255,255,255,0.1);
    -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
  }

  .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    width: 6px;
    background-color: #fff; background-color: rgba(255,255,255,0.75);
    -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
  }

  .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{
    width: 100%;
    height: 4px;
    margin: 6px 0;
  }

  .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
    width: 100%;
    height: 6px;
    margin: 5px auto;
  }

  .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }

  .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }

  .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; }

  .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -20px; }

  .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -40px; }

  .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; }


  /* theme: "dark-thick" */

  .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
    background-color: #000; background-color: rgba(0,0,0,0.1);
    -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
  }

  .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background-color: #000; background-color: rgba(0,0,0,0.75);
    -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
  }

  .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

  .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

  .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; }

  .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; }

  .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; }

  .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -56px; }

  /* ---------------------------------------- */



  /* theme: "light-thin", "dark-thin" */

  .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); }

  .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; }

  .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; }

  .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
    width: 100%;
    height: 2px;
    margin: 7px auto;
  }


  /* theme "dark-thin" */

  .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }

  .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

  .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

  .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

  .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; }

  .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }

  .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }

  .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }

  /* ---------------------------------------- */



  /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */

  .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); }

  .mCS-rounded.mCSB_scrollTools .mCSB_dragger,
  .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,
  .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,
  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; }

  .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    width: 14px;
    margin: 0 1px;
  }

  .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger,
  .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
  .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,
  .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; }

  .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
    height: 14px;
    margin: 1px 0;
  }

  .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
  .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
  .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
  .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
    width: 16px; /* auto-expanded scrollbar */
    height: 16px;
    margin: -1px 0;
  }

  .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
  .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ }

  .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
  .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
  .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
  .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
    height: 16px; /* auto-expanded scrollbar */
    width: 16px;
    margin: 0 -1px;
  }

  .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
  .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
    height: 4px; /* auto-expanded scrollbar */
    margin: 6px 0;
  }

  .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; }

  .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; }

  .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; }

  .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; }


  /* theme "rounded-dark", "rounded-dots-dark" */

  .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

  .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }

  .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

  .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

  .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; }

  .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; }

  .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; }

  .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; }


  /* theme "rounded-dots", "rounded-dots-dark" */

  .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail,
  .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; }

  .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
    background-color: transparent;
    background-position: center;
  }

  .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
    background-repeat: repeat-y;
    opacity: 0.3;
    filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)";
  }

  .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
    height: 4px;
    margin: 6px 0;
    background-repeat: repeat-x;
  }

  .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; }

  .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; }

  .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; }

  .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; }


  /* theme "rounded-dots-dark" */

  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=");
  }

  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; }

  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; }

  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; }

  .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; }

  /* ---------------------------------------- */



  /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */

  .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background-repeat: repeat-y;
    background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
    background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
    background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
    background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
  }

  .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
    background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
    background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
  }


  /* theme "3d", "3d-dark" */

  .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger,
  .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; }

  .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger,
  .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; }

  .mCS-3d.mCSB_scrollTools,
  .mCS-3d-dark.mCSB_scrollTools{
    opacity: 1;
    filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)";
  }

  .mCS-3d.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; }

  .mCS-3d.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
    width: 8px;
    background-color: #000; background-color: rgba(0,0,0,0.2);
    box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2);
  }

  .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
  .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
  .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
  .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }

  .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; }

  .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
    width: 100%;
    height: 8px;
    margin: 4px 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2);
  }

  .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
    width: 100%;
    height: 8px;
    margin: 4px auto;
  }

  .mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }

  .mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }

  .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }

  .mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }


  /* theme "3d-dark" */

  .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-color: #000; background-color: rgba(0,0,0,0.1);
    box-shadow: inset 1px 0 1px rgba(0,0,0,0.1);
  }

  .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); }

  .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

  .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

  .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

  .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{  background-position: -120px -128px; }

  /* ---------------------------------------- */



  /* theme: "3d-thick", "3d-thick-dark" */

  .mCS-3d-thick.mCSB_scrollTools,
  .mCS-3d-thick-dark.mCSB_scrollTools{
    opacity: 1;
    filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)";
  }

  .mCS-3d-thick.mCSB_scrollTools,
  .mCS-3d-thick-dark.mCSB_scrollTools,
  .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer,
  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }

  .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

  .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical,
  .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; }

  .mCS-3d-thick.mCSB_scrollTools_vertical,
  .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); }

  .mCS-3d-thick.mCSB_scrollTools_horizontal,
  .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{
    bottom: 1px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5);
  }

  .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    box-shadow: inset 1px 0 0 rgba(255,255,255,0.4);
    width: 12px;
    margin: 2px;
    position: absolute;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }

  .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
  .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }

  .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
    height: 12px;
    width: auto;
  }

  .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{
    background-color: #000; background-color: rgba(0,0,0,0.05);
    box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
  }

  .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }

  .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }

  .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }

  .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }

  .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }


  /* theme: "3d-thick-dark" */

  .mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); }

  .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); }

  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); }

  .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); }

  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; }

  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{
    background-color: #fff; background-color: rgba(0,0,0,0.05);
    box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
  }

  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }

  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

  .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{  background-position: -120px -128px; }

  /* ---------------------------------------- */



  /* theme: "minimal", "minimal-dark" */

  .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,
  .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
    right: 0;
    margin: 12px 0;
  }

  .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
  .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
  .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
  .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{
    bottom: 0;
    margin: 0 12px;
  }

  /* RTL direction/left-side scrollbar */
  .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,
  .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
    left: 0;
    right: auto;
  }

  .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }

  .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger,
  .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; }

  .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger,
  .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; }

  .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background-color: #fff; background-color: rgba(255,255,255,0.2);
    filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)";
  }

  .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
    background-color: #fff; background-color: rgba(255,255,255,0.5);
    filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)";
  }


  /* theme: "minimal-dark" */

  .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background-color: #000; background-color: rgba(0,0,0,0.2);
    filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)";
  }

  .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
    background-color: #000; background-color: rgba(0,0,0,0.5);
    filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)";
  }

  /* ---------------------------------------- */



  /* theme "light-3", "dark-3" */

  .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{
    width: 6px;
    background-color: #000; background-color: rgba(0,0,0,0.2);
  }

  .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; }

  .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{
    width: 100%;
    height: 6px;
    margin: 5px 0;
  }

  .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
  .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
    width: 12px;
  }

  .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
  .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
  .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
    height: 12px;
    margin: 2px 0;
  }

  .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }

  .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }

  .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }

  .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }


  /* theme "dark-3" */

  .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

  .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

  .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

  .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }

  .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

  .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

  .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

  .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; }

  /* ---------------------------------------- */



  /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */

  .mCS-inset.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{
    width: 12px;
    background-color: #000; background-color: rgba(0,0,0,0.2);
  }

  .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    width: 6px;
    margin: 3px 5px;
    position: absolute;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
    height: 6px;
    margin: 5px 3px;
    position: absolute;
    width: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
  .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
    width: 100%;
    height: 12px;
    margin: 2px 0;
  }

  .mCS-inset.mCSB_scrollTools .mCSB_buttonUp,
  .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,
  .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }

  .mCS-inset.mCSB_scrollTools .mCSB_buttonDown,
  .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,
  .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }

  .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft,
  .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,
  .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }

  .mCS-inset.mCSB_scrollTools .mCSB_buttonRight,
  .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,
  .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }


  /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */

  .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

  .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

  .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

  .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }

  .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

  .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

  .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

  .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -120px -128px; }


  /* theme "inset-2", "inset-2-dark" */

  .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,
  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    border-color: rgba(255,255,255,0.2);
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  }

  .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); }


  /* theme "inset-3", "inset-3-dark" */

  .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); }

  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); }

  .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

  .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

  .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); }

  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }

  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
  .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }

  /* ---------------------------------------- */


#bumper {
  height:80px;
}

#bumper2 {
  height:90px;
}

.event-front-btn{
  position:absolute;
  bottom:20px;
  text-align:center;
  margin:0 auto;
  left:29%!important;
}

.event-front-btn .btn-red {
    position: relative;
    margin: 0 auto;
    left: 0;
    outline: 0;
    color: #fb483d;
    padding: 5px 10px;
    background: #fff;
    border: #fb483d 1px solid;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    font-weight: 200;
    font-size: 1em;
}

.event-front-btn .btn-red:hover {
    position: relative;
    margin: 0 auto;
    left: 0;
    outline: 0;
    color: #ffffff;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    background: #fb483d;
    border: #fb483d 1px solid;
}

/*============== 404 page =========================*/
.hit-the-floor {
    color: #fff;
    position: relative;
    top: -238px;
    font-size: 15em;
    font-weight: bold;
    font-family: Helvetica;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.hit-the-floor {
  text-align: center;
}

/*============= buttons =====================*/



.border-animate .three-sided-border-container,.item .three-sided-border-container
{
  padding:0.875em 0;
  position:relative;
  z-index:2
}

.three-sided-border{
  -moz-transition-duration:0.3s;
  -o-transition-duration:0.3s;
  -webkit-transition-duration:0.3s;
  transition-duration:0.3s;
  -moz-transition-timing-function:cubic-bezier(0.46, 0.13, 0.63, 0.99);
  -o-transition-timing-function:cubic-bezier(0.46, 0.13, 0.63, 0.99);
  -webkit-transition-timing-function:cubic-bezier(0.46, 0.13, 0.63, 0.99);
  transition-timing-function:cubic-bezier(0.46, 0.13, 0.63, 0.99);
  cursor:pointer;
  display:inline;
  font-family:Helvetica, Arial, sans-serif;
  font-size:1em;
  font-weight:200;
  line-height:0;
  position:relative;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  width:10%;
  z-index:1;
  background:transparent
}


.three-sided-border:before{
  -moz-transition-property:height;
  -o-transition-property:height;
  -webkit-transition-property:height;
  transition-property:height;
  -moz-transition-duration:0.1s;
  -o-transition-duration:0.1s;
  -webkit-transition-duration:0.1s;
  transition-duration:0.1s;
  -moz-transition-timing-function:ease-in;
  -o-transition-timing-function:ease-in;
  -webkit-transition-timing-function:ease-in;
  transition-timing-function:ease-in;
  -moz-transition:height 0.3s ease-in,right 0.3s ease-in;
  -o-transition:height 0.3s ease-in,right 0.3s ease-in;
  -webkit-transition:height 0.3s ease-in,right 0.3s ease-in;
  transition:height 0.3s ease-in,right 0.3s ease-in;
  background-color:#fff;
  content:'';
  display:block;
  height:0;
  left:0;
  position:absolute;
  bottom:-5px;
  /*width:100%;*/
  z-index:-1
}


.three-sided-border-container{
    margin: 0 auto;
    text-align: center;
    display: table;
}


.text-color--is-black .three-sided-border:before
{
  background-color:#222
}

.fa-angle-double-down:before{
  font-size:26px;
}
.home-content .content-cta{
  position:relative;
  left:0;
}
.content-cta .inner{
     border: 3px solid #f34235;
    border-right: none;
    width: 10px;
    height: 49px;
    position: relative;
    float: left;
    left: 0px;
    top: 2px;
}

.home-content .content-cta .inner{
  left:4px;
  top:0px;
}

.sliding-btn{
    margin:0;
}


/* ===== == = === 37.5em (600px) === = == ===== */

@media screen and (min-width: 37.5em) {
 
}

/* ===== == = === 48em (768px) === = == ===== */

@media only screen and (min-width : 48em) {
   .content-cta .inner{
    position:absolute;
    top:-6px;
    left:1px;
  }
}

/* ===== == = === 56.25em (900px) === = == ===== */

@media only screen and (min-width : 56.25em) {


  
}


.sprite-events-placards { background: url('../img/events/placards/sprite-events-placards.jpg') no-repeat; }
.amazonreinvent-placard { width: auto; height: 153px; background-position: 0 0; }
.bitcamp-placard { width: auto; height: 153px; background-position: 0 -154px; }
.cdhacks-placard { width: auto; height: 153px; background-position: 0 -308px; }
.cloudera-placard { width: auto; height: 153px; background-position: 0 -462px; }
.finra-placard { width: auto; height: 153px; background-position: 0 -616px; }
.gtac-placard { width: auto; height: 153px; background-position: 0 -770px; }
.hbase-placard { width: auto; height: 153px; background-position: 0 -924px; }
.jenkins-placard { width: auto; height: 153px; background-position: 0 -1078px; }
.meetup-placard { width: auto; height: 153px; background-position: 0 -1232px; }
.njit-placard { width: auto; height: 153px; background-position: 0 -1386px; }
.pennapps-placard { width: auto; height: 153px; background-position: 0 -1540px; }
.pennapps-title-placard { width: auto; height: 153px; background-position: 0 -1540px; }
.pentaho-placard { width: auto; height: 153px; background-position: 0 -1694px; }
.puppet-placard { width: auto; height: 153px; background-position: 0 -1848px; }
.puppetconf-placard { width: auto; height: 153px; background-position: 0 -2002px; }
.splunk-placard { width: auto; height: 153px; background-position: 0 -2156px; }
.splunk2-placard { width: auto; height: 153px; background-position: 0 -3527px; }
.stamford-placard { width: auto; height: 153px; background-position: 0 -2310px; }
.stevens-placard { width: auto; height: 153px; background-position: 0 -2464px; }
.umd-placard { width: auto; height: 153px; background-position: 0 -2618px; }
.xebia-placard { width: auto; height: 153px; background-position: 0 -2772px; }
.yhack-1-placard { width: auto; height: 153px; background-position: 0 -2926px; }
.yhack-placard { width: auto; height: 153px; background-position: 0 -3080px; }
.yhack-title-placard { width: auto; height: 153px; background-position: 0 -3730px; }
.ewdhackathon-placard { width: auto; height: 153px; background-position: 0 -3219px; }
.awssummit-placard { width: auto; height: 153px; background-position: 0 -3383px; }
.stratasj-placard { width: auto; height: 153px; background-position: 0 -3553px; }

#slider {
    opacity:1;
    transition: opacity 1.5s;
}

#slider.fadeOut {
    opacity:0;
}

#content-holder{
    display:none;
}

.selected{
    border-style: solid; !important;
    border-width: 2px; !important;
}


/*------------ AWARDS PAGE ==================*/

.awards-p-container {
  /*padding-top:23px;*/
}

.awards-p-container h1{
  font-size:4em;
  letter-spacing:-12px;
  font-weight:900;
  color:#212121;
  margin-top:-15px;
}

.awards-p-container ul {
  padding-left:7px;
}

.awards-p-container ul li{
  list-style:none;
  line-height:24px;
  padding-bottom:13px;
}
.awards-p-container .awards-col-2 {
  border-left:2px dotted #212121;
}

.awards-p-container .awards-col-1 {
  border-right:2px dotted #212121;
}

.awards-p-container .row{
  margin-bottom:50px;
}

@media(max-width:991px) {

  .awards-p-container .awards-col-2 {
  border-left:0px dotted #212121;
  }

  .awards-p-container .awards-col-1 {
    border-right:0px dotted #212121;
  }
  .awards-p-container ul li{
    list-style:none;
  line-height:24px;
  }
  .awards-p-container .row{
    margin-bottom:0px;
  }
  .awards-p-container h1{
  margin-top:0px;
}

  .awards-p-container .col-md-6{
    padding-bottom:40px;
  }
}

@media only screen and (min-width:200px) and (max-width:787px) {
  header{
    background-position-y: 30px!important;
    height:63.46%!important;/*45.46%!important;*/
  }
}


code.inline {
  color:#212121!important;
  margin:0px!important;
  font-size:0.95em!important;
  background:none!important;
}

pre {
  white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 padding: 0.1em 0.5em 0.3em 0.7em;
  border-left: 11px solid #ccc;
  margin: 1.7em 0 1.7em 0.3em;
  overflow: auto;
  width: 93%;
  font-family: "Courier New", Courier, monospace, sans-serif;

}

/*------------ INTERNSHIP PAGE ==================*/

.position-desc{
    margin-bottom:10px;
}

.hero-title-hr-dark-intern {
    height:4px;
    max-width: 100%;
    border-bottom: 3px solid #333333;
    border-top:none;
}

.skill-bottom{
    height: 105px;
 }

.apply-btn{
    padding-bottom: 30px;
}



.btn-home-intern {
    padding: 12px 18px;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
    white-space: normal;
    -webkit-appearance: none; /*Safari/Chrome*/
    -moz-appearance: none; /*Firefox*/
    -ms-appearance: none; /*IE*/
    -o-appearance: none; /*Opera*/
    appearance: none;
    -webkit-border-radius: 0;
    background:#f34235;
    color:#fff;
    font-family: 'Avenir', Helvetica, sans-serif;
    font-size:20px;


}

.btn-home-intern:hover {
    color:#fff;
    font-family: 'Avenir', Helvetica, sans-serif;
}

.intern-img{
    width: 90%;
    float: left;
    position: relative;
    overflow: hidden;
}

.intern-img:before{
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%;
}

.intern-img img{
    position: absolute;
    top: 0;
    left: 20px;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

@media (min-width: 640px) {
    .intern-img {
        width: 50%;
    }
}



/*------------ Summer Intern Widget ==================*/

.bg  {
    position: absolute;
    top: 170%;
    left: 50%;
    margin: -100px 0 0 -150px;
}

.bg-index  {
    position: absolute;
    top: 0%;
    left: 85%;
    margin: -100px 0 0 -150px;
}

.lightbulb{
    position: absolute;
    top: 29px;
    left: 33px;
    transform: scale(1.1);
}
.recruit{
    position: absolute;
    top:0;
}
.path, #Summer-Intern {
    /*animation: draw 3.5s; Make item show up and disapper*/
    /*animation: draw 3.5s infinite;*/
    /*animation: draw 5s linear forwards;*/
    fill-opacity: 0;

    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration: 1;

    animation-name: DrawLine, FadeStroke, FillIn;
    animation-duration: 3s, 1s, 1s;
    animation-delay: 0s, 3.5s, 1.5s;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .path, #Summer-Intern {
        /*animation: draw 3.5s; Make item show up and disapper*/
        /*animation: draw 3.5s infinite;*/
        /*animation: draw 5s linear forwards;*/
        fill-opacity: 1;

        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration: 1;

        animation-name: DrawLine, FadeStroke, FillIn;
        animation-duration: 3s, 1s, 1s;
        animation-delay: 0s, 3.5s, 1.5s;
    }
}
@keyframes DrawLine {
    to {
        stroke-dashoffset: 0;
        /*Completion of your animation, larger the value, more incomlete it is, value shouldn't larger than stroker-dashoffset value*/
        /*stroke-dasharray: 5; showing in dashed line
        class="path" stroke="#4CADC1" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none"
        */
    }
}

@keyframes FadeStroke {
    to { stroke-opacity: 0; }
}
@keyframes FillIn {
    from { fill-opacity: 0; }
    to { fill-opacity: 1; }
}