@import url("vars.css");

body {
    padding-top: 50px;
    padding-bottom: 100px;
    max-width: 960px;
    margin: auto;
    text-align: justify;
    /*background-color: var(--background-color);*/
}

body::after {
    /*background-image: url("/img/bkg_pattern.png");*/
    background-image: url("/img/main-page-title-bkg.jpg");
    background-position: center top;
    /*background-repeat: no-repeat;*/
    background-size: cover;
    /*background-attachment: fixed;*/
    content: "";
    opacity: 0.5;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    /*filter: contrast(200%) brightness(20%);*/
}

.container {
    margin: auto;
    max-width: 960px;
}

.jumbotron .container {
    display: inline;
}

.envelope {
    padding: 0 0 100px;
    background-color: var(--body-color);
}

.page-header {
    padding: 40px 0 20px;
    margin: 0;
}

#page-main-content {
  padding-left: 32px;
  padding-right: 32px;
}

#page-main-content .content-part {
  padding-top: 16px;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>.open>a {
    color: var(--d-color);
    font-weight: 500;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
    /*text-decoration: underline;*/
    border-bottom: 4px solid var(--ml-color);
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover {
    color: var(--d-color);
    background-color: var(--nav-color);
    border-bottom: 4px solid var(--md-color);
}

.navbar-brand {
    padding: 5px 15px;
}

.navbar-brand > img {
    max-width:100%;
    max-height:100%;
}

.dropdown-menu>li>a {
    color: var(--d-color);
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
    color: var(--d-color);
    background-color: var(--l-color);
    border-bottom: none !important;
}

.navbar-fixed-top {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
    border-bottom: thin solid gray;
}

.contacts-info a {
  padding: 10px;
  color: #337ab7 !important;
}

.contacts-info a:hover,
.contacts-info a:focus {
  color: var(--d-color) !important;
}

.navbar-text {
    margin-left: 0;
    margin-right: 0;
}

.navbar-fixed-bottom .navbar-text {
    color: var(--d-color);
    font-weight: 300;
}

.jumbotron {
    color: white;
    text-shadow: 2px 2px 4px black;
    background-color: var(--m-color);
}

.jumbotron-with-bkg-image {
    background-image: url("/img/main-page-title-bkg.jpg");
    background-position: center;
    background-size: cover;
    height: 350px;
}

.content-img {
    width: 40%;
    padding-top: 5px;
}

.content-img.pull-left {
    padding-right: 20px;
}

.content-img.pull-right {
    padding-left: 20px;
}

.content-img img {
    max-width: 100%;
}

span.company-name {
    /*font-style: italic;*/
    font-weight: 500;
}

span#company_address {
    font-weight: bold;
}

.thumbnail .caption {
    text-align: center;
}

.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}

.modal-dialog {
    width: 75%;
}

.image-in-modal-body > img {
    display: block;
    width: 100%;
    height: 100%;
}


@media (max-width: 992px) {

    .hidden-on-small-tablet {
        display: none !important;
    }

}

@media (max-width: 768px) {

    .content-img {
        width: 50%;
    }
    .jumbotron-with-bkg-image {
        height: 250px;
    }

    .modal-dialog {
        width: auto;
        height: auto;
    }

}

@media (max-width: 512px) {

    .hidden-on-phones {
        display: none !important;
    }
    .jumbotron-with-bkg-image {
        height: 250px;
    }
    body {
        background-color: var(--body-color);
    }
    body::after {
        background-image: none;
    }
    .envelope {
        padding: 0;
    }
    .content-img.pull-left, .content-img.pull-right {
        width: 100%;
        padding: 0;
        padding-top: 5px;
        padding-bottom: 10px;
    }

    .col-xs-6 {
        width: 100% !important;
    }

}

@media (min-width: 512px) {

    .hidden-on-bigger-than-phones {
        display: none !important;
    }

}