@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700&subset=latin-ext');
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
@import "animate.css";
@import "bootsnav.css?v=1.0.1";
@import "sisfont.css";
@import "grid-rotator.css";
@import "menubar.css";
@import "select2.min.css";
@import "toastr.css";
@import "select2-bootstrap.css";
@import "jquery.fancybox.css";
@import "timeline.css";
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #fafafa;
}

body {
    font-family: 'Roboto', sans-serif;
    position: relative;
    font-size: 14px;
    color: #8a949b;
    -webkit-overflow-scrolling: touch;
}

.wrapper {
    height: 100%;
}

a {
    color: #777;
}

a:hover {
    color: #28b78d;
}

a,
a:active,
a:focus,
a:hover {
    outline: none;
    -webkit-transition: color 0.4s ease-in-out;
    -moz-transition: color 0.4s ease-in-out;
    -o-transition: color 0.4s ease-in-out;
    -ms-transition: color 0.4s ease-in-out;
    transition: color 0.4s ease-in-out;
    cursor: pointer !important;
    text-decoration: none;
}

.trigger-url {
    color: #777 !important;
}

h4.subtitle {
    font-weight: 100;
    margin-top: 0;
}

:focus {
    outline: none !important;
}

strong {
    font-weight: 700;
}

h1 {
    font-weight: 100;
}

input:focus {
    outline: none !important;
    -webkit-appearance: none;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: #28b78d;
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.sistema-main-container {}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s infinite linear;
    width: 28px;
    height: 28px;
    margin: 0 auto;
}

.circle {
    border: solid 0.05em #8a949b;
    width: 28px;
    height: 28px;
    border-radius: 1em;
    border-left: none;
    border-bottom: none;
    border-right: none;
}

/*********************** Select2 ***********************/

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #243743;
    font-weight: 300;
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: #28b78d;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #28b78d;
}

.select2-container--bootstrap .select2-selection--single {
    border-radius: 0 !important;
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection,
.select2-container--bootstrap .select2-dropdown {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-color: #28b78d;
}

/*********************** Helper ***********************/

.push-top-15 {
    margin-top: 15px;
}

.p-t-5 {
    padding-top: 5px;
}

.m-b-0 {
    margin-bottom: 0 !important;
}

/*********************** Buttons ***********************/

.btn {
    padding: 8px 14px;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 12px;
    color: #fafafa;
}

.btn-default {
    background: #28b78d;
    border: 1px solid #28b78d;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.btn-default:hover,
.btn-default:focus {
    background: #2ed4a3;
    color: #fafafa;
    border: 1px solid #28b78d;
}

.btn-primary {
    background: #243743;
    border: 1px solid #243743;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #3f6075;
    color: #fafafa;
    border: 1px solid #3f6075;
}

.top-search .btn-link {
    padding: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.form-control {
    height: 35px;
    font-size: 14px;
}

/*********************** Menu ***********************/

.top-search .btn-link:hover,
.top-search .btn-link:focus {
    color: #28b78d;
    text-decoration: none;
}

.top-search .container {
    padding-top: 11px;
}

.attr-nav>ul>li>a {
    padding: 11px 0;
    margin: 3px 15px 0 15px;
}

nav.navbar.bootsnav ul.nav>li>a {
    padding: 15px 0;
    margin: 0 15px;
}

nav.navbar.bootsnav ul.nav>li.active>a {
    box-shadow: inset 0 -5px 0 0 #28b78d;
    padding: 15px 0;
    margin: 0 15px;
    font-weight: 700;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

nav.navbar.bootsnav ul.nav>li>a:hover {
    box-shadow: inset 0 -5px 0 0 #28b78d;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.single-col li {
    float: left;
    margin-right: 30px;
}

.navbar-brand {
    padding: 0 15px;
    background: url("../img/assets/sistema-logo.png") no-repeat;
    background-size: contain;
    width: 180px;
    height: 32px;
}

.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
    margin-left: 0;
}

.active {
    font-weight: 700 !important;
}

.social {
    position: relative;
    float: right;
    margin: 0;
    padding: 0;
    height: 25px;
    line-height: 24px;
}

.social li {
    list-style: none;
    float: left;
}

.social li a {
    padding: 1px 7px 3px 7px;
    float: left;
    color: #fafafa;
    font-size: 13px;
    border-right: 1px solid #fafafa;
    background: #28b78d;
    height: 25px;
}

.social li a:hover {
    background: #2ed4a3;
}

.lang a {
    border-right: none !important;
    font-weight: 300;
    text-transform: uppercase;
}

.lang a:first-child {
    margin-left: 20px;
}

.lang a:last-child {
    margin-right: -7px;
}

.green-bar {
    position: absolute;
    height: 25px;
    background: #28b78d;
    z-index: -1;
    width: 100%;
    box-shadow: 70px 0 0 0 #28b78d;
}

.barbg {
    box-shadow: 1000px 0 0 0 #28b78d;
}

/*********************** Mobile Menu ***********************/

.side .social {
    position: relative;
    float: none;
    margin: 10px 0 0 0;
    padding: 0;
    height: inherit;
    display: inline-block;
}

.side .social li {
    list-style: none;
    float: left;
    margin-bottom: 10px;
}

.side .social li a {
    padding: 1px 7px 3px 7px;
    float: left;
    color: #fafafa;
    font-size: 13px;
    border-right: none;
    background: #28b78d;
    height: 25px;
    margin-right: 10px;
}

.side .lang a:first-child {
    margin-left: 0;
}

.head-title h1 {
    font-weight: 100;
    font-size: 30px;
    color: #28b78d;
    text-align: right;
}

.head-title {
    margin-top: -25px !important;
    border-right: 1px solid #28b78d;
}

/*********************** Slider ***********************/

.carousel {
    margin-top: 0;
}

.carousel-inner {}

.main-slider-controls .carousel-control {
    position: relative;
    background: none !important;
    font-size: 96px;
}

.main-slider-controls {
    position: absolute;
    bottom: 30px;
    right: 0;
}

.main-slider-controls .carousel-control.left {
    top: 94px;
    left: 120px;
}

.carousel h1 {
    font-size: 48px;
    font-weight: 300;
    margin-bottom: 0;
}

.carousel h1 a {
    color: #fafafa;
}

.carousel h1 a:hover {
    color: #28b78d;
}

.carousel p {
    background: #28b78d;
    float: right;
    padding: 0 6px 0 26px;
}

.carousel p a {
    color: #fafafa;
    font-weight: 400;
}

.caption-container {
    position: relative;
}

.carousel-indicators {
    position: absolute;
    bottom: 10px;
    right: 150px;
    top: 23px;
    z-index: 8;
    padding-left: 0;
    margin: 0;
    width: auto;
    text-align: right;
    list-style: none;
}

.carousel-indicators li.active {
    width: 5px;
    height: 5px;
}

.carousel-indicators li {
    width: 5px;
    height: 5px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
}

.main-slider-container {
    margin-top: -150px;
    position: relative;
}

.main-slider .carousel-control {
    position: relative;
}

.carousel,
.item,
.active {
    height: 100%;
}

.carousel-inner {
    height: 100%;
    overflow: inherit;
}

.carousel-caption {
    text-transform: uppercase;
    right: 150px;
    bottom: 90px;
    left: inherit;
    text-align: right;
}

.carousel-caption p {
    text-shadow: none;
}

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.project-w-slider {
    overflow: hidden;
    padding-bottom: 30px;
    float: left;
    width: 100%;
    height: 470px;
}

/*********************** Background Slider ***********************/

.crossfade-container {
    background: #243743;
    width: 100%;
    height: 1200px;
    overflow: hidden;
    transition: height 1s ease;
}

@media only screen and (max-width: 767px) {
    .crossfade-container {
        height: 601px;
    }
}

.crossfade:before {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.swal2-icon.swal2-info {
    border-color: #11d89e !important;
    color: #28b78d !important;
}

.crossfade>figure {
    animation: imageAnimation 60s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center center;
    color: transparent;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 0;
}

@keyframes imageAnimation {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: scale(1);
    }
    8% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: scale(1.05);
    }
    17% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: scale(1.10);
    }
    25% {
        animation-timing-function: ease-out;
        opacity: 0;
        transform: scale(1.15);
    }
    100% {
        animation-timing-function: ease-out;
        opacity: 0;
        transform: scale(1.17);
    }
}

/*********************** Animated Mouse Icon ***********************/

.scroll-icon-container {
    min-height: 65px;
    position: relative;
    padding-top: 15px;
}

.icon-scroll,
.icon-scroll:before {
    position: absolute;
    left: 50%;
}

.icon-scroll {
    width: 26px;
    height: 46px;
    box-shadow: inset 0 0 0 1px #243743;
    border-radius: 25px;
}

.icon-scroll:before {
    content: '';
    width: 4px;
    height: 6px;
    background: #243743;
    margin-left: -2px;
    top: 5px;
    border-radius: 4px;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: scroll;
    animation-name: scroll;
}

@-webkit-keyframes scroll {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}

@keyframes scroll {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}

/*********************** Loader ***********************/

.js div#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999999999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #243743 url('../img/assets/loader.svg') no-repeat center center;
}

.preLogo {
    background: url('../img/assets/sistema-logo-w.png') no-repeat;
    background-size: contain;
    width: 180px;
    height: 32px;
    display: block;
    margin-top: 15%;
    margin-left: auto;
    margin-right: auto;
}

/*********************** Text Rotator ***********************/

.text-rider {
    position: absolute;
    z-index: 2;
    color: white;
    text-align: center;
    width: 70%;
    top: 40%;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: none;
}

.text-rider h1 {
    font-size: 48px;
}

.text-rider h1 a {
    color: #fff;
}

.text-rider h1 a:hover {
    color: inherit;
}

.text-rider span {
    color: #28b78d;
}

/*********************** Background Video ***********************/

.video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-container video {
    /* Make video to at least 100% wide and tall */
    min-width: 100%;
    min-height: 100%;
    /* Setting width & height to auto prevents the browser from stretching or squishing the video */
    width: auto;
    height: auto;
    /* Center the video */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.overlay {
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 95%;
    max-width: 45em;
    margin: auto auto 1em;
    box-sizing: border-box;
    padding: 2em;
    line-height: 1.5;
    text-align: center;
}

/*********************** Footer ***********************/

footer:before {
    content: "";
    position: absolute;
    top: 0;
    left: -40px;
    width: 40%;
    height: 100%;
    background-color: #8a949b;
    -webkit-transform: matrix(1, 0, 1.018, 1.039, -79, 0.609);
    -moz-transform: matrix(1, 0, 1.018, 1.039, -79px, 0.609px);
    -ms-transform: matrix(1, 0, 1.018, 1.039, -79, 0.609);
    -o-transform: matrix(1, 0, 1.018, 1.039, -79, 0.609);
    transform: matrix(1, 0, 1.018, 1.039, -79, 0.609);
}

footer {
    width: 100%;
    position: relative;
    background: #243743;
    padding: 30px 0 10px 0;
    overflow: hidden;
    font-weight: 300;
    color: #fafafa;
    font-size: 12px;
}

footer .social {
    float: none;
    margin-bottom: 10px;
}

.footer-firm p {
    color: #fafafa;
    font-size: 12px;
    line-height: 17px;
}

.footer-firm a img {
    margin-bottom: 20px;
}

.footer-mid p,
.footer-mid p a,
.footer-firm a {
    text-transform: uppercase;
    color: #fafafa;
}

.footer-mid p a:hover {
    color: #28b78d;
}

.footer-right h6 {
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin: 0;
}

.footer .social a {
    padding: 5px 7px 3px 7px;
    color: #fafafa;
    font-size: 13px;
    border-right: 1px solid #243743;
    background: #28b78d;
    height: 25px;
}

.footer .social a:hover {
    color: #fafafa;
    background: #2ed4a3;
}

footer .form-control {
    background-color: transparent;
    border: 1px solid #8a949b;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    width: 100%;
}

footer .form-control:focus {
    color: #fafafa;
}

.footer-push {
    margin-top: 10px;
}

.apollo {
    color: #fafafa;
    font-size: 22px;
    margin-top: 20px;
    float: right;
}

.apollo:hover {
    color: #28b78d;
}

/*********************** Containers ***********************/

.page-container {
    margin-top: 20px;
    margin-bottom: 30px;
}

.sistema-pad {
    padding-top: 76px;
}

@media only screen and (max-width: 992px) {
    .sistema-pad {
        padding-top: 44px;
    }
}

.homepage-container {
    margin-top: 30px;
}

/*********************** Item Preferences ***********************/

.item-layout .col-md-6,
.item-layout .col-md-3,
.item-layout .col-xs-6,
.item-layout .col-sm-3,
.item-layout .col-xs-12 {
    padding: 0 7px;
}

.item-layout .row {
    margin-right: -7px;
    margin-left: -7px;
}

.item-layout a {
    margin-bottom: 14px;
    float: left;
    width: 100%;
    position: relative;
    color: #fafafa;
    cursor: pointer;
}

.item-layout a img {
    width: 100%;
}

/*********************** Item Grid View ***********************/

.sistema-item {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    -webkit-transition: background 0.4s linear;
    -moz-transition: background 0.4s linear;
    -o-transition: background 0.4s linear;
    -ms-transition: background 0.4s linear;
    transition: background 0.4s linear;
}

.sistema-item:after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    content: '';
    background: -moz-linear-gradient(-45deg, rgba(36, 55, 67, 1) 0%, rgba(36, 55, 67, 1) 1%, rgba(36, 55, 67, 0.3) 36%, rgba(36, 55, 67, 0) 51%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(36, 55, 67, 1) 0%, rgba(36, 55, 67, 1) 1%, rgba(36, 55, 67, 0.3) 36%, rgba(36, 55, 67, 0) 51%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(36, 55, 67, 1) 0%, rgba(36, 55, 67, 1) 1%, rgba(36, 55, 67, 0.3) 36%, rgba(36, 55, 67, 0) 51%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#243743', endColorstr='#00243743', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.sistema-item:hover {
    background: rgba(40, 183, 141, 0.6);
}

.sistema-item h2 {
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 5px;
    position: relative;
    z-index: 2;
}

.sistema-item h3 {
    font-weight: 600;
    font-size: 13px;
    margin: 0;
    padding-bottom: 5px;
    position: relative;
    z-index: 2;
}

.sistema-item p {
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.sistema-item span {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    position: absolute;
    bottom: 10px;
    right: 20px;
}

.non-project:after {
    background: none;
}

.non-project:before {
    background: none;
}

.non-project:hover span {
    text-decoration: underline;
}

.non-project:hover {
    background: transparent;
}

/*********************** Item List View ***********************/

.listView a img {
    width: 35%;
    float: left;
}

.listView .sistema-item {
    position: absolute;
    width: 65%;
    margin-left: 35%;
    height: 100%;
    padding: 20px;
    background: none;
    color: #8a949b;
    display: block;
}

.listView .sistema-item:after {
    content: '';
    background: #28b78d;
    width: 54%;
    margin-left: -54%;
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.4s linear;
    -moz-transition: opacity 0.4s linear;
    -o-transition: opacity 0.4s linear;
    -ms-transition: opacity 0.4s linear;
    transition: opacity 0.4s linear;
}

.listView a:hover .sistema-item:after {
    content: '';
    background: #28b78d;
    width: 54%;
    margin-left: -54%;
    position: absolute;
    opacity: .6;
}

.listView .sistema-item:hover {
    background: none;
    color: #243743;
}

.listView .sistema-item h2 {
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 5px;
}

.listView .sistema-item h3 {
    font-weight: 600;
    font-size: 13px;
    margin: 0;
    padding-bottom: 5px;
}

/*********************** Project Page ***********************/

.filter-bar {
    margin-bottom: 30px;
    font-weight: 300;
}

.filter-bar p {
    font-size: 18px;
    margin-top: 20px;
}

.filter-bar h6 {
    font-weight: 700;
    color: #28b78d;
    border-bottom: 1px solid #28b78d;
    font-size: 18px;
    padding-bottom: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.filter-bar .select2-container--default .select2-selection--single {
    color: #8a949b;
    border-bottom: 1px solid #8a949b;
    border-right: none;
    border-top: none;
    border-left: none;
    background-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.filter-bar .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
}

.filter-bar strong a {
    color: #8a949b;
}

.filter-bar strong a:hover,
.filter-bar strong a:focus {
    color: #28b78d;
}

.btn-dropdown {
    color: #8a949b;
    border-bottom: 1px solid #8a949b;
    border-right: none;
    border-top: none;
    border-left: none;
    background-color: transparent;
    padding: 0;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.btn-dropdown:hover,
.btn-dropdown:focus {
    background-color: transparent;
    color: #243743;
    border-bottom: 1px solid #8a949b;
    border-right: none;
    border-top: none;
    border-left: none;
    padding: 0;
    cursor: pointer;
}

.btn-dropdown .caret {
    margin-top: 10px;
    float: right
}

.btn-icon {
    background: transparent;
    border: 1px solid #8a949b;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #8a949b;
    font-weight: normal;
    padding: 2px 7px 1px 7px;
    font-size: 16px;
}

.btn-icon:hover {
    border: 1px solid #243743;
    color: #243743;
}

.btn-icon:focus,
.btn-icon.active {
    background: #8a949b;
    border: 1px solid #8a949b;
    color: #fafafa;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-weight: normal;
}

.filter-icons {
    text-align: right;
}

.filter-icons span {
    margin-right: 20px;
}

.filter-icons ul {
    padding: 0;
}

.filter-icons ul li {
    display: inline;
}

.filter-icons ul li:nth-child(2) {
    margin-left: 30px;
}

.listView {
    width: 33.333333333%;
}

/*********************** Page Title Bar ***********************/

.page-title {
    padding-top: 15px;
    padding-bottom: 15px;
}

.ptWhite {
    border-bottom: 1px solid #28b78d;
}

.page-title .dropdown {
    float: right;
    width: 100%;
    margin-bottom: 5px;
}

.page-title .btn-dropdown {
    color: #8a949b;
    border-bottom: 1px solid #8a949b;
}

.page-title h1 {
    font-size: 36px;
    text-transform: uppercase;
    margin: 0;
}

.page-title h6 a,
.page-title h6 {
    font-weight: 400;
    color: #8a949b;
    font-size: 14px;
    text-transform: uppercase;
    margin: 0;
}

.page-title h6 a:hover,
.page-title h6 a:focus {
    color: #28b78d;
}

.page-title h6 a i {
    font-size: 20px;
    vertical-align: middle;
}

.social-share {
    font-weight: 300;
    width: 80%;
    float: right;
    text-align: right;
}

.social-share span {
    display: block;
    text-align: right;
}

/*********************** Green Title Bar ***********************/

.green {
    background: #28b78d;
    color: #fafafa;
}

.green h1 {
    font-size: 36px;
    text-transform: uppercase;
    margin: 0;
}

.green h6 a,
.green h6 {
    font-weight: 400;
    color: #fafafa;
    font-size: 14px;
    text-transform: uppercase;
    margin: 0;
}

.green h6 a:hover {
    color: #fafafa;
    text-decoration: underline;
    cursor: pointer;
}

.green .dropdown {
    float: right;
    width: 100%;
}

.green .btn-dropdown {
    color: #fafafa;
    border-bottom: 1px solid #fafafa;
}

/*********************** White Title Bar ***********************/

.white {
    background: #fafafa;
    color: #8a949b;
    border-bottom: 1px solid #28b78d;
}

.white h1 {
    font-size: 36px;
    text-transform: uppercase;
    margin: 0;
}

.white h6 a,
.white h6 {
    font-weight: 400;
    color: #8a949b;
    font-size: 14px;
    text-transform: uppercase;
    margin: 0;
}

.white h6 a:hover {
    color: #8a949b;
    text-decoration: underline;
    cursor: pointer;
}

.white h3 a,
.white h3 {
    font-weight: 400;
    color: #8a949b;
    font-size: 14px;
    margin: 5px 30px 0 0;
}

.white h3 .active {
    font-weight: 700;
}

.white h3 a:hover {
    color: #28b78d;
    cursor: pointer;
}

/*********************** Actual Filter ***********************/

.filter {
    margin: 0;
    padding: 0;
}

.filter li {
    list-style: none;
    display: inline-block;
    float: left;
}

.filter li a {
    font-weight: 400;
    color: #8a949b;
    font-size: 14px;
    margin: 5px 20px 0 0;
}

.filter li .active {
    font-weight: 700;
    color: #28b78d;
}

/*********************** Project Detail Slider ***********************/

.project-slider .carousel-control {
    top: 40%;
    font-size: 92px;
    background: none;
}

.project-slider .fill {
    float: left;
}

.project-slider-container {
    position: relative;
    margin-top: -50px;
}

.project-slider-container .carousel-indicators {
    right: 15px;
    bottom: inherit;
    top: 0;
}

.half {
    width: 50%;
}

.halfone {
    width: 33.333333%;
}

.halftwo {
    width: 66.6666666%;
}

.imageRight {
    font-weight: 300;
    font-size: 11px;
    text-align: right;
    line-height: 30px;
    position: absolute;
    width: 100%;
    bottom: -30px;
}

/*********************** Side Menu ***********************/

.side-menu a:hover {
    color: #28b78d;
}

.side-menu h1,
.procect-title {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
}

.side-menu h2 {
    font-size: 12px;
    font-weight: 400;
    margin: 0;
    color: #8a949b;
}

.side-menu h5 {
    font-size: 11px;
    font-weight: 400;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    color: #8a949b;
}

.side-menu h3 {
    font-size: 14px;
    font-weight: 400;
    color: #8a949b;
    margin: 0;
}

.side-menu h3 a,
.side-menu a h3 {
    font-size: 14px;
    font-weight: 400;
    color: #243743;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.side-menu ul li a {
    color: #8a949b;
    display: inline-block;
}

.side-menu ul li a:hover {
    color: #28b78d;
}

.side-menu ul li .active {
    color: #28b78d;
}

.side-menu ul {
    margin-bottom: 30px;
    padding: 0;
    float: left;
    width: 100%;
}

.side-menu ul li {
    list-style: none;
    margin-bottom: 13px;
    float: left;
    display: block;
    width: 100%;
    position: relative;
}

.side-menu img {
    width: 100%;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.side-menu a:hover img {
    opacity: .6;
}

.side-menu span {
    background: #28b78d;
    width: 30%;
    display: block;
}

.side-menu-image:hover {
    color: #28b78d !important;
}

.side-menu-image {
    position: absolute;
    margin-left: 35%;
    top: 10px;
}

.side-menu a:hover .side-menu-image h3 {
    color: #28b78d;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.sml {
    width: 70%;
    height: 1px;
    background: #28b78d;
    margin: 0 0 20px 0;
}

/*********************** Project Description ***********************/

.procect-desc p {
    font-weight: 300;
    text-align: justify;
}

.related-projects {
    margin-top: 40px;
}

.related-projects h2 {
    font-size: 13px;
}

.related-projects h3 {
    font-size: 10px;
}

/*********************** Article ***********************/

article {
    float: left;
    width: 100%;
}

article:not(.press-release) img,
article:not(.press-release) a img {
    width: 100%;
}

article h1 {
    margin-bottom: 0;
}

article h6 {
    margin-top: 0;
    text-transform: uppercase;
}

article figure,
.video-fig {
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}

article p {
    text-align: justify;
    font-weight: 300;
}

article figure .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 13px;
}

/*********************** Press Page ***********************/

.press {
    margin-top: 20px;
}

.press .row {
    -moz-column-width: 18em;
    -webkit-column-width: 18em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    margin-right: 0;
    margin-left: 0;
}

.press .press-item {
    display: inline-block;
    width: 100%;
}

.press .well {
    position: relative;
    display: block;
    background: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.press-item img {
    width: 100%;
}

.modal-content {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.modal-title,
.press h4 {
    font-weight: 300;
    font-size: 24px;
    color: #243743;
    margin-bottom: 0;
    width: 100%;
}

.press h4 {
    margin-bottom: 10px;
}

.modal-title small,
.press h4 small {
    font-weight: 300;
    font-size: 12px;
    display: block;
    width: 100%;
    margin-top: 5px;
}

.modal-header .close.close {
    margin-top: 6px;
    color: #8a949b;
    opacity: 1;
}

.close:focus,
.close:hover {
    opacity: 1;
}

.ekko-lightbox-nav-overlay a {
    font-size: 60px;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
}

/*********************** Load More Buttons ***********************/

.load-all,
.load-more {
    margin-top: 15px;
    display: block;
    color: #8a949b;
    text-transform: uppercase;
}

.load-all:hover,
.load-more:hover {
    color: #28b78d;
}

.load-all span,
.load-more span {
    display: block;
}

.load-all i,
.load-more i {
    margin-top: -5px;
    display: block;
}

/*********************** Ideas Page ***********************/

/*
    .ideas - site-master.blade.php içine alındı.
*/

.ideas-push {
    padding-top: 3%;
    padding-bottom: 2%;
}

.ideas .greenBg {
    background: #28b78d;
    color: #fafafa;
}

.ideas .greyBg {
    background: #8a949b;
    color: #fafafa;
}

.ideas .darkBg {
    background: #243743;
    color: #fafafa;
}

.ideas .whiteBg {
    background: #fafafa;
    color: #8a949b;
}

.box {
    position: relative;
    width: 60%;
    /* desired width */
    margin-bottom: 30px;
    opacity: .8;
}

.box:before {
    content: "";
    display: block;
    padding-top: 100%;
    /* initial ratio of 1:1*/
}

.box.wide {
    position: relative;
    width: 100%;
    /* desired width */
}

.box.wide:before {
    content: "";
    display: block;
    padding-top: 60%;
    /* initial ratio of 1:1*/
}

.box a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 20px;
    color: inherit;
}

.box a h1 {
    margin: 0 0 10px 0;
    font-weight: 300;
    font-size: 24px;
    text-transform: uppercase;
}

.box a p {
    font-size: 14px;
    font-weight: 300;
    line-height: 17px;
}

.box a span {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 13px;
    text-transform: uppercase;
}

.box a:hover span {
    text-decoration: underline;
}

/*********************** Ideas Category Page ***********************/

.subpage-title {
    text-align: center;
    margin-bottom: 30px;
}

.subpage-title h1 {
    font-size: 30px;
    font-weight: 300;
    color: #28b78d;
    margin-bottom: 30px;
}

.subpage-title p {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 20px;
}

/*********************** About ***********************/

.about-image-container {
    min-height: 350px;
    background-size: cover;
}

.about h1 {
    font-weight: 100;
    font-size: 36px;
    color: #fafafa;
    text-transform: uppercase;
    margin: 40px 30px 20px 30px;
}

.about p {
    color: #fafafa;
    font-weight: 300;
    padding: 0px 30px 30px 30px;
}

.about-dark {
    background: #243743;
}

.about-grey {
    background: #8a949b;
}

.about-green {
    background: #28b78d;
}

.about p a {
    Color: #ffffff;
}

.about p a:hover {
    text-decoration: underline;
    Color: #ffffff;
}

.team-bg {
    background-size: cover;
    width: 100%;
    height: 100%;
}

/*********************** Career Page ***********************/

.career h2 {
    font-size: 32px;
}

.career-show {
    display: block;
}

.career-hide {
    display: none;
}

.career .sistema-item.active {
    background: rgba(40, 183, 141, 0.6);
}

.career span {
    margin-bottom: 14px;
    float: left;
    width: 100%;
    position: relative;
    color: #fafafa;
}

.career span img {
    width: 100%;
}

.opportunities-list-title,
.app-form-title {
    border-bottom: 1px solid #28b78d;
}

.opportunities-list-title h1,
.app-form-title h1 {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px;
}

.app-form-title h1 span {
    color: #28b78d;
}

.opportunities-list-item {
    padding: 10px 0;
    border-bottom: 1px solid #8a949b;
}

.opportunities-list-item:hover {
    background: rgba(138, 148, 155, 0.05);
    -webkit-transition: background 0.4s ease-in-out;
    -moz-transition: background 0.4s ease-in-out;
    -o-transition: background 0.4s ease-in-out;
    -ms-transition: background 0.4s ease-in-out;
    transition: background 0.4s ease-in-out;
}

.opportunities-list-item span {
    margin-top: 8px;
    float: left;
}

.opportunities-list-item:hover .btn {
    visibility: visible;
}

.opportunities-list-item .btn {
    float: right;
    visibility: hidden;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

.app-form-desc {
    margin: 20px 0;
    border-bottom: 1px solid #28b78d;
}

.app-form-desc p {
    font-size: 14px;
    font-weight: 300;
}

/*********************** Form Elements ***********************/

.form-container label {
    font-weight: 300;
    font-size: 14px;
    color: #8a949b;
    margin-bottom: 0;
}

.form-control {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-appearance: none;
    font-weight: 300;
    color: #1c2833;
}

.btn-default.disabled:hover {
    background-color: #2ed4a3;
    border-color: #28b78d;
}

/*********************** File Inputs ***********************/

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile+label {
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
}

.no-js .inputfile+label {
    display: none;
}

.inputfile:focus+label,
.inputfile.has-focus+label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile+label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

/* style 6 */

.inputfile-6+label {}

.inputfile-6+label {
    padding: 0;
}

.inputfile-6+label span,
.inputfile-6+label strong {
    padding: 0.675rem 1.25rem;
    /* 10px 20px */
}

.inputfile-6+label span {
    min-height: 2em;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
}

.inputfile-6+label strong {
    position: absolute;
    display: inline-block;
    z-index: 99999999;
    right: 16px;
}

/*********************** Contact Page ***********************/

.contact h4 {
    font-weight: 700;
    text-transform: uppercase;
}

.contact p {
    font-weight: 300;
    font-size: 16px;
}

.contact a {
    color: #8a949b;
}

.contact-title {
    font-weight: 700;
    color: #28b78d;
    text-transform: uppercase;
}

#map {
    width: 100%;
    height: 450px;
    margin-top: 13px;
}

/*********************** Search Page ***********************/

.search-title {
    margin-top: 40px;
}

.badge {
    background-color: #28b78d;
    padding: 4px 7px 3px 7px;
    margin-top: -1px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.search-box p {
    font-size: 18px;
    margin-top: 10px;
}

.result-item {
    border-bottom: 1px solid #c2c7ca;
    padding-bottom: 20px;
}

.result-item h2 {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 0;
    color: #1c2833;
}

.result-item p {
    font-size: 14px;
    margin-bottom: 0;
}

.result-item a {
    color: #28b78d;
}

.result-item a:hover {
    text-decoration: underline;
}

/*********************** Award Page ***********************/

.award-layout img {
    width: 50%;
    border: 1px solid #c5d5e1;
}

.award-layout,
.award-layout a {
    color: #243743;
}

.award-layout a:hover,
.award-layout a:focus {
    color: #28b78d;
}

.award-layout h2 {
    font-size: 18px;
    margin-bottom: 0;
}

.award-layout h3 {
    font-size: 14px;
    margin: 0;
}

.award-layout .item {
    text-align: center;
}

.award-listView {
    width: 100%;
}

.award-container {
    margin-bottom: 40px;
}

.award-listView .award-container {
    border-bottom: 1px solid #c5d5e1;
    width: 100%;
    padding: 20px 15px;
    float: left;
    margin-bottom: 0;
}

.award-listView .award-container:hover {
    background: #f5f5f5;
}

.award-listView img {
    display: none;
}

.award-listView h2 {
    font-size: 14px;
    margin: 0;
}

.award-listView .award-project-title {
    width: 30%;
    float: left;
    text-align: left;
}

.award-listView .award-title {
    width: 30%;
    float: left;
    text-align: left;
}

.award-listView .award-year {
    width: 10%;
    float: left;
    text-align: left;
}

.award-listView .award-organisation {
    width: 30%;
    float: left;
    text-align: left;
}

.award-listView:nth-child(1) .award-container {
    border-top: 1px solid #28b78d;
}

/*********************** References Page ***********************/

.reference-logos a img {
    width: 100%;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.reference-logos a:hover img {
    -webkit-filter: none;
    filter: none;
}

.reference-logo-div {
    max-height: 82px;
    margin-bottom: 15px;
    margin-top: 15px;
}

/*********************** Error Page ***********************/

.error-bg {
    background: #4f5e68;
}

.error-page {
    margin: 0;
    min-height: 100%;
}

.error-page img {
    width: 100%;
    margin-bottom: 50px;
}

.error-page h1 {
    color: #fafafa;
    font-size: 130px;
    font-weight: 100;
    letter-spacing: 1.2px;
    margin: 0;
    float: left;
    width: 100%;
}

.error-page h2 {
    color: #28b78d;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0;
    float: left;
    width: 100%;
}

.error-page h3 {
    color: #fafafa;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0;
    float: left;
    width: 100%;
}

.error-page a {
    margin-top: 10px;
    color: #8a949b;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    float: left;
    width: 100%;
}

.error-page a i {
    font-size: 28px;
    vertical-align: middle;
}

.error-page a:hover {
    color: #fafafa;
}

.errPad {
    padding-top: 10%;
}

.terms h4 {
    margin-top: 30px;
}

.terms p {
    font-weight: 300;
}

/*********************** Media Query's ***********************/

@media (max-width: 992px) {
    .navbar-brand {
        width: 130px;
        height: 24px;
        margin-top: 14px;
    }
    footer:before {
        display: none;
    }
    .filter-icons {
        text-align: left;
        margin-top: 20px;
    }
    .filter-icons span {
        margin-right: 10px;
    }
    .listView {
        width: 50%;
    }
    .box {
        width: 100%;
    }
    .top-search.on {
        height: 50px;
    }
    .top-search .container {
        padding-top: 6px;
    }
}

@media (max-width: 767px) {
    .text-rider h1 {
        font-size: 28px;
    }
    .project-w-slider {
        height: 300px;
    }
    .main-slider-controls .carousel-control {
        position: relative;
        background: none !important;
        font-size: 60px;
    }
    .main-slider-controls {
        position: absolute;
        bottom: 30px;
        right: 0;
    }
    .main-slider-controls .carousel-control.left {
        top: 59px;
        left: 75px;
    }
    .carousel h1 {
        font-size: 24px;
        font-weight: 300;
        margin-bottom: 0;
    }
    .carousel h1 a {
        color: #fafafa;
    }
    .carousel h1 a:hover {
        color: #28b78d;
    }
    .carousel p {
        background: #28b78d;
        float: right;
        padding: 0 6px 0 26px;
        font-size: 11px;
    }
    .carousel p a {
        color: #fafafa;
        font-weight: 400;
    }
    .caption-container {
        position: relative;
    }
    .carousel-indicators {
        position: absolute;
        bottom: 10px;
        right: 90px;
        top: 0;
        z-index: 8;
        padding-left: 0;
        margin: 0;
        width: auto;
        text-align: right;
        list-style: none;
    }
    .carousel-indicators li.active {
        width: 5px;
        height: 5px;
    }
    .carousel-indicators li {
        width: 5px;
        height: 5px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        margin: 0;
        background-color: rgba(255, 255, 255, 0.4);
        border: none;
    }
    .main-slider-container {
        margin-top: -40px;
        position: relative;
    }
    .main-slider .carousel-control {
        position: relative;
    }
    .carousel-caption {
        text-transform: uppercase;
        right: 90px;
        bottom: 10px;
        left: inherit;
        text-align: right;
    }
    .listView {
        width: 100%;
    }
    .listView .sistema-item {
        padding: 10px;
    }
    .green h1 {
        font-size: 24px;
    }
    .ptWhite h1 {
        font-size: 24px;
    }
    .green h6 a,
    .green h6 {
        font-size: 14px;
        padding-bottom: 20px;
    }
    .ptWhite h6 a,
    .ptWhite h6 {
        font-size: 14px;
        padding-bottom: 20px;
    }
    .project-slider .carousel-control {
        font-size: 60px;
        width: 90px;
    }
    footer {
        text-align: center;
    }
    .footer-push {
        margin-top: 20px;
    }
    .social-share {
        width: 100%;
        float: left;
    }
    .sistema-item h2 {
        font-size: 10px;
    }
    .sistema-item h3 {
        font-size: 10px;
    }
    .sistema-item p {
        font-size: 10px;
    }
    .sistema-item span {
        font-size: 10px;
    }
    .box:before {
        padding-top: 50%;
    }
    .box a h1 {
        font-size: 18px;
    }
    .box a p {
        font-size: 12px;
        line-height: 14px;
    }
    .box a span {
        font-size: 11px;
    }
    .social {
        display: inline-block;
        float: none;
        vertical-align: middle;
    }
    .social-share {
        text-align: left;
        margin-top: 0;
    }
    .social-share span {
        margin-right: 10px;
        text-align: left;
        display: inline;
    }
    .filter {
        margin-bottom: 10px;
        float: left;
    }
    .subpage-title p {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 10px;
    }
    .subpage-title h1 {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    article figure {
        margin-bottom: 10px;
    }
    article h1 {
        font-size: 18px;
    }
    article p {
        font-size: 12px
    }
    article h6 {
        font-size: 11px
    }
    .push-top-15m {
        margin-top: 15px;
    }
    .modal-title,
    .press h4 {
        font-size: 18px;
    }
    .modal-title small strong,
    .press h4 small strong {
        display: block;
    }
    .about-image-container {
        min-height: 220px;
    }
    .opp-title {
        font-size: 16px;
    }
    .opportunities-list-item .btn {
        float: left;
        margin-top: 20px;
        visibility: visible;
    }
    .award-listView .award-project-title {
        width: 100%;
        font-size: 18px;
    }
    .award-listView .award-title {
        width: 100%;
    }
    .award-listView .award-year {
        width: 100%;
    }
    .award-listView .award-organisation {
        width: 100%;
    }
    .award-listView h3 {
        margin-top: 10px;
    }
    .reference-logos a img {
        -webkit-filter: none;
        filter: none;
    }
    .reference-logo-div {
        height: 114px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .apollo {
        float: none;
        display: block;
        margin-top: 30px;
    }
    .error-page h1 {
        font-size: 84px;
    }
    .error-page h2 {
        font-size: 14px;
    }
    .error-page h3 {
        font-size: 14px;
    }
    .error-page img {
        width: 80%;
        margin-left: 10%;
        margin-top: 40px;
        float: left;
    }
}

@media (min-width: 480px) and (max-width: 640px) {
    nav.bootsnav.navbar-full ul.nav {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

html.lb-disable-scrolling {
    overflow: hidden;
    /* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
    position: fixed;
    height: 100vh;
    width: 100vw;
}

.lightboxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #f0f0f0;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
    display: none;
}

.lightbox {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10000;
    text-align: center;
    line-height: 0;
    font-weight: normal;
}

.lightbox .lb-image {
    display: block;
    height: auto;
    max-width: inherit;
    max-height: none;
    border-radius: 3px;
    /* Image border
  border: 10px solid white; */
}

.lightbox a img {
    border: none;
}

.lb-outerContainer {
    position: relative;
    *zoom: 1;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    border-radius: 4px;
    /* Background color behind image.
     This is visible during transitions. */
    background-color: white;
}

.lb-outerContainer:after {
    content: "";
    display: table;
    clear: both;
}

.lb-loader {
    position: absolute;
    top: 43%;
    left: 0;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}

.lb-cancel {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    /*background: url(../images/loading.gif) no-repeat;*/
}

.lb-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}

.lb-container>.nav {
    left: 0;
}

.lb-nav a {
    outline: none;
    background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev,
.lb-next {
    height: 100%;
    cursor: pointer;
    display: block;
    font-size: 48px;
}

.lb-nav a.lb-prev {
    width: 50%;
    left: 0;
    float: left;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 1;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    -o-transition: opacity 0.6s;
    transition: opacity 0.6s;
    font-size: 48px;
    cursor: url('../img/assets/prev.png'), auto !important;
}

.lb-nav a.lb-prev:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.lb-nav a.lb-next {
    width: 50%;
    right: 0;
    float: right;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 1;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    -o-transition: opacity 0.6s;
    transition: opacity 0.6s;
    cursor: url('../img/assets/next.png'), auto !important;
}

.lb-nav a.lb-next:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.lb-dataContainer {
    margin: 0 auto;
    padding-top: 5px;
    *zoom: 1;
    width: 100%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
    content: "";
    display: table;
    clear: both;
}

.lb-data {
    padding: 0;
    color: #ccc;
}

.lb-data .lb-details {
    width: 85%;
    float: left;
    text-align: left;
    line-height: 1.1em;
    padding: 10px 0 5px 13px;
}

.lb-data .lb-caption {
    font-size: 24px;
    font-weight: 300;
    color: #444;
    line-height: 1em;
}

.lb-data .lb-caption a {
    color: #4ae;
}

.lb-data .lb-number {
    display: block;
    clear: left;
    padding-bottom: 1em;
    font-size: 12px;
    color: #999999;
}

.lb-data .lb-close {
    position: absolute;
    color: #8a949b;
    top: 28px;
    right: 13px;
    font-size: 18px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: block;
    z-index: 9999999;
}

.lb-data .lb-close:hover {
    cursor: pointer;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.lb-nav a.lb-prev {
    background: url(../img/assets/prev.png) 15% 55% no-repeat;
    background-size: 36px;
}

.lb-nav a.lb-next {
    background: url(../img/assets/next.png) 85% 55% no-repeat;
    background-size: 36px;
}

@media (max-width: 992px) {
    .sml {
        width: 100%;
    }
}