@-ms-viewport {
    width: device-width;
}

@-webkit-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

/* main content wrappers */
.main-body-wrapper {
    width: 100%;
    display: block;
    overflow: hidden;
}

.wrapper {
    max-width: 100%;
    display: block;
    overflow: hidden;
}

/* this class will be auto-added when header banner is fixed top 
	base height of navbar header = 80px if you want to change navbar height also need to change this padding
*/
body.is-navbar-fixed-top {
  padding-top: 70px;
  padding-bottom: 0px;
}


/* flexbox row */
.row {
    display: flex;
    flex-wrap: wrap;
}

@media (min-width : 768px)  {
    /* fix bootstrap pull-right col with flexbox */
    .pull-right {
        margin-left: auto !important;
    }

    .pull-right.col-md-4 {
        order: 3;
    }

    .pull-right.col-md-3 {
        order: 4;
    }

    .pull-right.col-md-5 {
        order: 2;
    }

    .pull-right.col-md-6 {
        order: 2;
    }

    .pull-right.col-md-2 {
        order: 6;
    }
}


/* TEXT-ALIGN HELPERS */
.text-align-right,
.text-right {
    text-align: right;
}

.text-align-center,
.text-center {
    text-align: center;
}

.text-align-left,
.text-left {
    text-align: left;
}

/* BODY FONT-SIZE BASIC 16px = 1em  */
body {
    font-size: 16px; /* if change this - may override some font sizes depends on body font size */
}

/* FONT SIZES HELPERS  */
.headline-3xl {
    font-size: 112px;
    line-height: 120px;
}

.headline-2xl {
    font-size: 80px;
    line-height: 85px;
}

.headline-xl {
    font-size: 64px;
    line-height: 86px;
}

.headline-lg {
    font-size: 48px;
    line-height: 52px;
}

.headline-md {
    font-size: 32px;
    line-height: 38px;
}

.headline-sm {
    font-size: 24px;
    line-height: 30px;
}

/* paragraphs font-size  - depends on body font size base = 16px = 1em*/
.text-xl {
    font-size: 160%;
}

.text-lg {
    font-size: 140%;
}

.text-md {
    font-size: 120%;
}

.text-sm {
    font-size: 90%;
}

.text-xs {
    font-size: 60%;
}

/* TABLET */
@media (max-width : 768px)  {
    .headline-3xl {
        font-size: 93px;
        line-height: 100px;
    }

    .headline-2xl {
        font-size: 67px;
        line-height: 76px;
    }

    .headline-xl {
        font-size: 53px;
        line-height: 62px;
    }

    .headline-lg {
        font-size: 40px;
        line-height: 44px;
    }

    .headline-md {
        font-size: 27px;
        line-height: 34px;
    }

    .headline-sm {
        font-size: 20px;
        line-height: 24px;
    }
}

/* MOBILE  */
@media (max-width: 480px){
    .headline-3xl {
        font-size: 72px;
        line-height: 76px;
    }

    .headline-2xl {
        font-size: 52px;
        line-height: 56px;
    }

    .headline-xl {
        font-size: 42px;
        line-height: 48px;
    }

    .headline-lg {
        font-size: 32px;
        line-height: 38px;
    }

    .headline-md {
        font-size: 22px;
        line-height: 26px;
    }

    .headline-sm {
        font-size: 18px;
        line-height: 24px;
    }
}

/* RWD Typography */
/*2. FLEX GRIDS & SECTIONS */
.half-section-1-2,
.half-section-6-4,
.half-section-1-2.well,
.half-section-6-4.well {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    padding: 0 !important;
    margin: 0 !important;
}

.half-section-1-2 .left,
.half-section .left,
.half-section-1-2 .right,
.half-section .right {
    width: 50%;
    margin: 0;
}

.half-section-6-4 .left {
    width: 60%;
    margin: 0;
}

.half-section-6-4 .left {
    width: 40%;
    margin: 0;
}

@media screen and (max-width: 767px) {
    .half-section-1-2,
    .half-section-6-4 {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 100%;
        padding: 0;
    }

    .half-section-1-2 .left,
    .half-section .left,
    .half-section-6-4 .left,
    .half-section-1-2 .right,
    .half-section .right,
    .half-section-6-4 .right {
        width: 100%;
        margin: 10px 15px 15px;
        border: none;
    }
}



/* fallback for earlier versions of Firefox */
@supports not (flex-wrap: wrap) {
    .masonry {
        display: block;
    }

    .masonry img {
        display: inline-block;
        vertical-align: top;
    }
}

@media screen and (max-width: 500px) {
    .masonry {
        width: 100vw;
        padding: 0;
    }

    .masonry img {
    }
}

section {
    margin: 0 auto !important;
}

section.well {
    margin: 0 auto!important;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border: none;
}

section.well * {
    color: inherit;
}

section:not([class^="padding-top-"]) {
    padding: 50px 0;
}

/* 100% height section*/
section.vh100 {
    min-height: 100vh;
}

/* SECTION COVERS: background sizes */
section.cover,
section.bgs-cover {
    background-size: cover;
}

section.bgs-contain {
    background-size: contain !important;
}

section.bgs-auto {
    background-size: auto auto !important;
}

section.bgr-rr {
    background-repeat: repeat repeat !important;
}

section.bgr-nr {
    background-repeat: no-repeat !important;
}

/* SECIONS & WELLS IMG BG POSITIONS */
/*BACKHROUND POSITION HELPERS  */
.bgp-lt {
    background-position: left top !important;
}

.bgp-ct {
    background-position: center top !important;
}

.bgp-rt {
    background-position: right top !important;
}

.bgp-cl {
    background-position: left center !important;
}

.bgp-cc {
    background-position: center center !important;
}

.bgp-cr {
    background-position: right center !important;
}

.bgp-bl {
    background-position: bottom left !important;
}

.bgp-bc {
    background-position: bottom center !important;
}

.bgp-br {
    background-position: bottom right !important;
}

/* fixed background helper*/
.bgfixed {
    background-attachment: fixed !important;
}

/* 3. MARGINS & PADDINGS */
/* MARGIN TOP HELPERS */
.margin-top-0 {
    margin-top: 0 !important;
    margin-bottom: auto;
}

.margin-top-10 {
    margin-top: 10px !important;
    margin-bottom: auto;
}

.margin-top-20 {
    margin-top: 20px !important;
    margin-bottom: auto;
}

.margin-top-30 {
    margin-top: 30px !important;
    margin-bottom: auto;
}

.margin-top-40 {
    margin-top: 40px !important;
    margin-bottom: auto;
}

.margin-top-50 {
    margin-top: 50px !important;
    margin-bottom: auto;
}

.margin-top-60 {
    margin-top: 60px !important;
    margin-bottom: auto;
}

.margin-top-70 {
    margin-top: 70px !important;
    margin-bottom: auto;
}

.margin-top-80 {
    margin-top: 80px !important;
    margin-bottom: auto;
}

.margin-top-90 {
    margin-top: 90px !important;
    margin-bottom: auto;
}

.margin-top-100 {
    margin-top: 100px !important;
    margin-bottom: auto;
}

/* BOTTOM MARGIN HELPERS */
.margin-bottom-0 {
    margin-bottom: 0 !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-bottom-30 {
    margin-bottom: 30px !important;
}

.margin-bottom-40 {
    margin-bottom: 40px !important;
}

.margin-bottom-50 {
    margin-bottom: 50px !important;
}

.margin-bottom-60 {
    margin-bottom: 60px !important;
}

.margin-bottom-70 {
    margin-bottom: 70px !important;
}

.margin-bottom-80 {
    margin-bottom: 80px !important;
}

.margin-bottom-90 {
    margin-bottom: 90px !important;
}

.margin-bottom-100 {
    margin-bottom: 100px !important;
}

/* BOTTOM PADDING HELPERS */
.padding-bottom-0 {
    padding-bottom: 0 !important;
}

.padding-bottom-10 {
    padding-bottom: 10px !important;
}

.padding-bottom-20 {
    padding-bottom: 20px !important;
}

.padding-bottom-30 {
    padding-bottom: 30px !important;
}

.padding-bottom-40 {
    padding-bottom: 40px !important;
}

.padding-bottom-50 {
    padding-bottom: 50px !important;
}

.padding-bottom-60 {
    padding-bottom: 60px !important;
}

.padding-bottom-70 {
    padding-bottom: 70px !important;
}

.padding-bottom-80 {
    padding-bottom: 80px !important;
}

.padding-bottom-90 {
    padding-bottom: 90px !important;
}

.padding-bottom-100 {
    padding-bottom: 100px !important;
}

/* TOP PADDING HELPERS */
.padding-top-0 {
    padding-top: 0 !important;
}

.padding-top-10 {
    padding-top: 10px !important;
}

.padding-top-20 {
    padding-top: 20px !important;
}

.padding-top-30 {
    padding-top: 30px !important;
}

.padding-top-40 {
    padding-top: 40px !important;
}

.padding-top-50 {
    padding-top: 50px !important;
}

.padding-top-60 {
    padding-top: 60px !important;
}

.padding-top-70 {
    padding-top: 70px !important;
}

.padding-top-80 {
    padding-top: 80px !important;
}

.padding-top-90 {
    padding-top: 90px !important;
}

.padding-top-100 {
    padding-top: 100px !important;
}

/* PADDING LEFT HELPERS */
.padding-left-0 {
    padding-left: 0 !important;
}

.padding-left-10 {
    padding-left: 10px !important;
}

.padding-left-20 {
    padding-left: 20px !important;
}

.padding-left-30 {
    padding-left: 30px !important;
}

.padding-left-40 {
    padding-left: 40px !important;
}

.padding-left-50 {
    padding-left: 50px !important;
}

.padding-left-60 {
    padding-left: 60px !important;
}

.padding-left-70 {
    padding-left: 70px !important;
}

.padding-left-80 {
    padding-left: 80px !important;
}

.padding-left-90 {
    padding-left: 90px !important;
}

.padding-left-100 {
    padding-left: 100px !important;
}

/* RIGHT PADDING  HELPERSS */
.padding-right-0 {
    padding-right: 0 !important;
}

.padding-right-10 {
    padding-right: 10px !important;
}

.padding-right-20 {
    padding-right: 20px !important;
}

.padding-right-30 {
    padding-right: 30px !important;
}

.padding-right-40 {
    padding-right: 40px !important;
}

.padding-right-50 {
    padding-right: 50px !important;
}

.padding-right-60 {
    padding-right: 60px !important;
}

.padding-right-70 {
    padding-right: 70px !important;
}

.padding-right-80 {
    padding-right: 80px !important;
}

.padding-right-90 {
    padding-right: 90px !important;
}

.padding-right-100 {
    padding-right: 100px !important;
}


.ov-10 {
    box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.1) !important;
    -webkit-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.1) !important;
    -moz-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.1) !important;
}

.ov-20 {
    box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.2) !important;
    -webkit-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.2) !important;
    -moz-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.2) !important;
}

.ov-30 {
    box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.3) !important;
    -webkit-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.3) !important;
    -moz-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.3) !important;
}

.ov-40 {
    box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.4) !important;
    -webkit-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.4) !important;
    -moz-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.4) !important;
}

.ov-50 {
    box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.5) !important;
    -webkit-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.5) !important;
    -moz-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.5) !important;
}

.ov-60 {
    box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.6) !important;
    -webkit-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.6) !important;
    -moz-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.6) !important;
}

.ov-70 {
    box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.7) !important;
    -webkit-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.7) !important;
    -moz-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.7) !important;
}

.ov-80 {
    box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.8) !important;
    -webkit-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.8) !important;
    -moz-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.8) !important;
}

.ov-90 {
    box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.9) !important;
    -webkit-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.9) !important;
    -moz-box-shadow: inset 0px 0px 0 5000px rgba(0,0,0,0.9) !important;
}



/*5. CUSTOM COMPONENTS
5.0. IMAGES
5.1 BUTTONS
5.2 HEADERS & NAVBARS
5.3 SHADOWS & CARDS 
5.4. VIDEO */
/* IMAGES */
.image-right,
.img-responsive.image-right {
    margin: 0 0 0 auto;
}

.img-responsive.img-right {
    margin: 0 0 auto;
}

.img-center {
    margin: 0 auto;
    text-align: center;
}

/* 5.2. HEADERS & NAVBARS*/
header.navbar-fixed-top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1350;
    border: none;
    height: 80px;
}

header {
    margin-bottom: 0;
}

header,
header.well {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.navbar {
    padding: 10px 0;

    /* this is navbar height = 80px , if change this to default bootstrap 3 = 60px also need change body padding 
	class  body.is-navbar-fixed-top {padding:80px}
	*/
    margin-bottom: 0;
}

.navbar.has-shadow {
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.navbar {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
    background-color: transparent;
}

.navbar .navbar-toggle .icon-bar {
    background-color: inherit;
    border: 1px solid;
}

/* DEFAULT NAVBAR COLORS */
.navbar-nav>li>a {
    color: inherit;
}

.navbar-brand {
    color: inherit;
}

.nav>li>a:focus,
.nav>li>a:hover {
    text-decoration: none;
    background: none;
}

.navbar.navbar-default.navbar {
    background-color: #ffffff;
    color: #2b2b2b;
}

.navbar-default.transparent.navbar {
    background-color: rgba(255,255,255, 0);
    color: rgba(255,255,255,.84);
}

.navbar.navbar-default.is-scroll.navbar {
    background-color: #ffffff;
    color: #2b2b2b;
}

.navbar-inverse.navbar {
    background-color: #212122;
    color: rgba(255,255,255,.84);
}

.navbar-inverse.transparent.navbar {
    background-color: rgba(0,0,0, 0);
    color: rgba(255,255,255,.84);
}

.navbar-inverse.transparent.is-scroll.navbar {
    background-color: #212122;
    color: rgba(255,255,255,.84);
}

.navbar .navbar-nav > li > a.btn.btn-lg,
.btn-group-lg .navbar .navbar-nav > li > a.btn {
    font-size: 100%;
    padding: 18px 36px;
}

/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified > li > a {
    border-left: 1px solid rgba(250,250,250, 0.1);
    border-right: 1px solid rgba(0,0,0, 0.1);
    color: inherit;
}

.navbar-inverse .nav-justified > li > a {
    color: inherit;
}

.nav-justified > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: bold;
    text-align: center;
}

.nav-justified > li > a:hover {
    background: rgba(0,0,0, 0.2);
}

.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
    box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}

.nav-justified > li:first-child > a {
}

.nav-justified > li:last-child > a {
    border-bottom: 0;
}

@media (max-width: 768px) {
    .nav-justified > li:first-child > a {
        border-left: 0;
    }

    .nav-justified > li:last-child > a {
        border-left: 0px;
        border-right: 0px;
    }

    .nav-justified > li {
        float: none;
        display: block;
        width: 100%;
    }

    .nav-justified > li > a {
        border-left: 0px;
        border-right: 0px;
    }
}

/* CENTERED NAVBAR */
.custom-navbar .navbar-brand,
.navbar-center .navbar-brand {
    position: absolute;
    width: 100%;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    color: inherit;
    margin: auto;
    max-width: 25%;
}

@media (max-width: 768px){
    .custom-navbar .navbar-brand,
    .navbar-center .navbar-brand {
        position: relative;
        max-width: 70%;
        left: 80px;
    }

    .custom-navbar .navbar-right li,
    .custom-navbar .navbar-left li,
    .navbar-center .navbar-left li,
    .navbar-center .navbar-left li,
    .custom-center .navbar-left li a,
    .navbar-center .navbar-left li a {
        text-align: center !important;
        font-size: 110%;
    }
}

.custom-navbar a,
.navbar-center a {
    color: inherit !important;
}

.custom-navbar a:hover,
.navbar-center a:hover {
    color: inherit !important;
}

.custom-navbar .hamburger-on-left,
.navbar-center .hamburger-on-left {
    float: left;
}

.custom-navbar .navbar-left li,
.navbar-center .navbar-left li {
    text-align: left;
}

.custom-navbar .navbar-right li,
.navbar-center .navbar-right li {
    text-align: right;
}


/* BUTTONS */
.navbar .navbar-nav>li>a.navbar-btn {
    padding: 10px 24px;
}

.btn {
    position: relative;
    padding: 8px 30px;
    border: 0;
    margin: 10px 1px;
    cursor: pointer;
    border-radius: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255,255,255,.84);
    transition: background-color .2s ease,box-shadow .28s cubic-bezier(.4,0,.2,1);
    outline: none!important;
}

.btn,
.navbar .navbar-nav > li > a.btn {
    border: none;
    border-radius: 3px;
    position: relative;
    padding: 12px 30px;
    margin: 10px 1px;
    text-transform: uppercase;
    will-change: box-shadow, transform;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.btn-lg,
.btn-group-lg .btn {
    font-size: 120%;
    padding: 18px 36px;
}

.btn.btn-round {
    border-radius: 50px;
}

.navbar .navbar-nav > li > a.btn,
.navbar .navbar-nav > li > a.btn.btn-default {
    box-shadow: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12);
    -webkit-box-shadow: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12);
    -moz-box-shadow: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12);
}

.btn:focus,
.btn:active,
.btn:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default:hover,
.navbar .navbar-nav > li > a.btn:focus,
.navbar .navbar-nav > li > a.btn:active,
.navbar .navbar-nav > li > a.btn:hover,
.navbar .navbar-nav > li > a.btn.btn-default:focus,
.navbar .navbar-nav > li > a.btn.btn-default:active,
.navbar .navbar-nav > li > a.btn.btn-default:hover {
    box-shadow: 0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2);
    -webkit-box-shadow: 0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2);
    -moz-box-shadow: 0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2);
}

/* OUTLINE BOOTSTRAP BUTTONS MIGRATE FROM bs v.4 Alfa*/
* {
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    -webkit-tap-highlight-color: transparent;
}




}