@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }


html {
    height: 100%;
}
body {
    font-family: "Open Sans", sans-serif;
    height: 100%;
}
a,
a:visited {
    color: #EB7B59;
    text-decoration: underline;
}
a:hover,
a:active,
a:focus {
    outline: 0;
    color: #6D7884;
    text-decoration: underline;
}
section {
    padding: 80px 0;
}
section p {
    color: #6D7884;
    padding: 10px 20px;
    font-size: 1.1em;
}
footer {
    overflow: hidden;
}
h1,
h2,
h3,
h4,
.navbar-brand,
.my-button {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}
h2,
h3,
h4 {
    color: #3b475f;
}
.left-h2 {
    margin-left: 20px;
}
.pretitle {
    font-size: 1.2em;
    font-weight: 400;
    font-style: italic;
    color: #EB7B59;
    margin: 20px;
}
hr {
    margin: 20px auto;
    width: 80px;
    height: 4px;
    border-radius: 2px;
    border: 0;
}
.left-hr {
    margin: 20px;
}
.white-text {
    color: white;
}
.bg-grey {
    background-color: #f4f6f8;
}
.bg-colored {
    background-color: #EB7B59;
}
.colored-line {
    background: #3b475f;
}
.white-line {
    background: white;
}
.dark-colored-line {
    background: #D25A34;
}
.grey-line {
    background: #ddd;
}

/* buttons */
.btn:focus {
    outline: none;
    color: white;
}
a.my-button-main {
    background: #EB7B59;
    color: white;
    text-decoration: none;
    border: 3px solid #EB7B59;
    margin: 10px 0;
    -webkit-transition: background .7s, color .7s, border .7s;
    transition: background .7s, color .7s, border .7s;
}
.my-button-main:hover {
    background: #D25A34;
    color: white;
    border: 3px solid #D25A34;
}
.my-button-colored,
.my-button-colored-inv:hover,
.my-button-colored-inv:active {
    background: white;
    color: #3b475f !important;
    border: 1px solid #3b475f;
    margin: 10px;
    text-decoration: none;
}
.my-button-colored,
.my-button-colored-inv {
    -webkit-transition: background .7s, color .7s, border .7s;
    transition: background .7s, color .7s, border .7s;
}
.my-button-colored:hover,
.my-button-colored:active,
.my-button-colored-inv {
    text-decoration: none;
    background: #3b475f;
    color: white !important;
    border: 1px solid #3b475f;
    margin: 10px;
}
.my-button-colored:focus {
    color: #3b475f;
}
.scroll-down-icon-div {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
}
.scroll-down-icon {
    font-size: 2.5em;
    text-align: center;
    color: white;
    margin-bottom: 10px;
    -webkit-transition: margin-bottom .5s;
    transition: margin-bottom .5s;
}
.scroll-down-icon:hover {
    color: white;
    margin-bottom: 5px;
}
/* end buttons */

/* navigation and title */
.navbar {
    background: transparent;
    padding: 20px 0 10px 0;
    border: 0;
}
.navbar .navbar-brand {
    color: white;
    font-size: 1.5em;
    font-weight: 700;
    text-decoration: none;
}
.navbar .navbar-brand:focus,
.navbar .navbar-brand:hover {
    color: white;
}
.title-em-big {
    font-style: normal;
    display: inline;
}
.title-em-small {
    font-style: normal;
    display: none;
}
.navbar .nav li a {
    font-family: "Montserrat", sans-serif;
    color: white;
    text-decoration: none;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 1px;
    border-bottom: 3px solid transparent;
    -webkit-transition: border-color 0.5s;
    transition: border-color 0.5s;
}
.navbar .nav li:hover a:hover,
.navbar .nav li a:focus {
    color: white;
    border-bottom: 3px solid #EB7B59;
}
.navbar .nav li.active a,
.navbar .nav li.active:hover a:hover,
.navbar .nav li.active a:focus {
    background-color: transparent;
    color: white;
    border-bottom: 3px solid #EB7B59;
}
/* on scroll*/

.top-nav-collapse {
    background: #3b475f;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.navbar .navbar-brand-custom,
.navbar .navbar-brand-custom:hover,
.navbar .navbar-brand-custom:focus {
    color: white;
}
.navbar .nav-custom li a,
.navbar .nav-custom li a:focus {
    color: white;
}
.navbar .nav-custom li:hover a:hover,
.navbar .nav-custom li.active a,
.navbar .nav-custom li.active:hover a:hover,
.navbar .nav-custom li.active a:focus {
    background-color: transparent;
    color: white;
    border-bottom: 3px solid #EB7B59;
}
/* end on scroll*/
/* end navigation and title */

/* intro */
.overlay {
    background: rgb(25, 33, 50); /* fallback */
    background: rgba(25, 33, 50, 0.7);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.jumbotron {
    position: relative;
    background: url("../img/intro.jpg") no-repeat top center scroll;
    background-size: cover;
    color: white;
    margin-bottom: 0;
    padding-top: 80px;
}
#intro {
    display: table;
    height: 100%;
    width: 100%;
}
.intro-content {
    display: table-cell;
    vertical-align: middle;
}
.intro-p,
.intro-h {
    color: white;
}

/* /intro */

/* about */
.img-wrap {
    max-width: 300px;
    width: 80%;
    height: 80%;
    margin: 0 auto;
}

.project-logo-img {
    width: 100%;
}
/* end about */
/* cities and modals*/
.vertical-middle{
  display: inline-block;
  vertical-align: middle;
  float: none;
  margin-left: -3px;
}

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

.foto-img-div{
    position: relative;
    margin: 0 auto;
    max-width: 500px;
    border: 10px solid #e4e6e8;
    border-radius: 4px;
}

.foto-img{
    width: 100%;
}

.foto-copyright-wrap {
    position: relative;
}
.foto-copyright {
    position: absolute;
    bottom: 0;
    width: 100%;
}
.foto-info-icon-wrap {
    background: rgb(228,230,232);
    border-top-left-radius: 3px;
    width: 20px;
    float: right;
}

.foto-info-icon {
    color: #3b475f;
    font-size: 0.8em;
    top: 0;
    padding: 3px;
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    float: right;
}
.foto-copy {
    font-size: 0.8em;
    padding: 5px 0 0 0;
    margin-bottom: -1px;
    background: rgb(228,230,232);
    display: none;
    color: #3b475f;
}
.foto-info-icon-wrap:hover{
    cursor: pointer;
    background: rgb(228,230,232);
}
.modal-dialog {
    min-width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.modal-body p {
    text-align: left;
    padding: 5px 20px;
}
.modal-body-img {
    width: 100%;
    border: 10px solid #e4e6e8;
}
p.img-description {
    font-style: italic;
    font-size: 0.9em;
    text-align: center;
}
.modal-content h4 {
    margin-top: 20px;
    margin-bottom: 5px;
}
.modal-footer .btn {
    margin-bottom: 0;
}
.thumbnail {
    padding: 0;
    border: none;
    margin: 0;
}
.thumbnail img {
    width: 100%;
    margin-bottom: 0;
    opacity: 0.85;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    z-index: 99;
}
/* end cities and modals*/
/* Services*/

.img-circle {
    height: 250px;
    width: 250px;
    margin-top: 20px;
    border: 10px solid #D25A34;
    opacity: 0.85;
    -webkit-transition: opacity 0.5s, border 0.5s;
    transition: opacity 0.5s, border 0.5s;
}
.img-circle:hover {
    opacity: 1;
    border: 7px solid #D25A34;
}
.services-p-text {
    margin: 0 10px;
}
/* Contacts */

.person {
    margin-top: 40px;
    text-align: left;
}
.person-left {
    margin-right: 50px;
}
.contact-text-head {
    margin: 20px 0;
    padding: 0;
}
.contact-row {
    margin: 25px 0 0 0;
}
.contact-row .glyphicon {
    font-size: 1.8em;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #EB7B59;
}
.contact-row span {
    font-size: 1.15em;
    font-weight: 700;
}
.contact-box-icon {
    display: inline-block;
    vertical-align: middle;
    height: 50px;
    width: 50px;
    margin: 0 20px 0 10px;
    border-right: 1px solid #ddd;
}
.contact-box-text {
    display: inline-block;
    width: 70%;
    vertical-align: middle;
}
.contact-text {
    padding: 0;
    margin: 0;
}
/* end Contacts */
/* Footer */

.footer {
    background-color: rgb(25, 33, 50);
    padding: 20px 0;
}
.footer .row {
    margin: 10px;
}
.footer-center {
    text-align: center;
}
.footer p {
    color: white;
    font-size: 0.9em;
    padding: 0 0 3px 0;
    margin: 0;
}
.to-the-top:visited,
.to-the-top:focus {
    color: #EB7B59;
}
.to-the-top:hover,
.to-the-top:hover .glyphicon-menu-up {
    color: white;
}
.to-the-top-icon {
    font-size: 1em;
    text-align: center;
    color: #EB7B59;
    padding: 0 5px 5px 0;
    -webkit-transition: margin-bottom .5s;
    transition: margin-bottom .5s;
}
.footer-img-links,
.footer-img-links:focus,
.footer-img-links:hover {
    text-decoration: none;
}
.footer-img-links img {
    margin: 0 20px 20px 0;
}
/* end Footer */

@media (max-width: 1199px) {} 
@media (max-width: 991px) {
    .navbar .navbar-brand,
    .navbar .navbar-brand:hover {
        font-size: 1.5em;
    }
    .title-em-big {
        display: none;
    }
    .title-em-small {
        display: inline;
    }
    .jumbotron h1 {
        font-size: 3em;
    }
    .person {
        margin-top: 20px;
    }
    .person h3,
    .contact-text-head {
        text-align: center;
    }
    .person-left {
        border-right: 0;
    }
    .person address {
        margin-left: 10px;
    }
}
@media (max-width: 767px) {
    section {
        padding: 80px 0 50px 0;
    }
      .left-hr {
        margin: 20px auto;
    }
    .jumbotron h1 {
        font-size: 2.7em;
    }
    .navbar {
        background-color: #3b475f;
        padding: 5px 0;
    }
    .navbar .navbar-brand,
    .navbar .navbar-brand:hover,
    .navbar .navbar-brand:focus,
    .navbar .navbar-brand:active {
        color: white;
        padding-right: 0;
        font-size: 1.3em;
    }
    .navbar .nav li a,
    .navbar .nav li:hover a:hover,
    .navbar .nav li:focus a {
        font-size: 1em;
        color: white;
        border-bottom: 3px solid transparent;
    }
    .navbar .navbar-toggle,
    .navbar .navbar-toggle:hover,
    .navbar .navbar-toggle:focus {
        border: 0;
        background: none;
    }
    .navbar .navbar-toggle .icon-bar,
    .navbar .navbar-toggle:focus .icon-bar,
    .navbar .navbar-toggle:hover .icon-bar {
        background-color: white;
    }
    /* on scroll*/
    
    .navbar .navbar-brand-custom,
    .navbar .navbar-brand-custom:hover {
        color: white;
    }
    .navbar .nav-custom li a,
    .navbar .nav-custom li:hover a:hover {
        color: white;
    }
    .navbar .nav li.active a,
    .navbar .nav li.active:hover a:hover {
        background-color: transparent;
        color: white;
        border-bottom: 3px solid transparent;
    }
    /* end on scroll*/
    
    #intro {
        min-height: 400px;
        max-height: 600px;
    }
    .jumbotron p {
        font-size: 1.3em;
    }
    .right-block {
      text-align: center;
    }

    .foto-img-div{
        max-width: 400px;
    }
    .person {
        margin: 30px 20px 0 20px;
    }
    .footer-center {
        text-align: center;
    }
}
@media (max-width: 450px) {
    section {
        padding: 60px 0 40px 0;
    }
    .navbar .navbar-brand,
    .navbar .navbar-brand:hover,
    .navbar .navbar-brand:focus,
    .navbar .navbar-brand:active {
        font-size: 1.2em;
    }
    .jumbotron h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.3em;
    }
      .left-h2 {
        margin-left: 0;
    }
    .jumbotron p {
        font-size: 1.1em;
    }
    .my-button {
        font-size: 0.9em;
    }
    .my-button-main {
        font-size: 1.1em;
    }
    .foto-img-div{
        border: 5px solid #e4e6e8;
    }
    .img-circle {
        height: 200px;
        width: 200px;
    }
    .box-icon {
        height: 50px;
        width: 50px;
    }
    .box-icon-left {
        margin: 0 10px 0 5px;
    }
    .contact-row span {
        font-size: 1em;
    }
    .contact-row p {
        font-size: 0.9em;
    }
    .contact-box-text {
        width: 60%;
    }
}
@media (max-width: 320px) {
    section {
        padding: 50px 0 30px 0;
    }
    section p {
        font-size: 0.9em;
    }
    h1 {
        font-size: 1.3em;
    }
    h2 {
        font-size: 1.2em;
    }
    h3 {
        font-size: 1.1em;
    }
    .navbar .navbar-brand,
    .navbar .navbar-brand:hover,
    .navbar .navbar-brand:focus,
    .navbar .navbar-brand:active {
        font-size: 0.9em;
    }
    .jumbotron {
        padding-top: 50px;
    }
    .panels {
        margin: 20px 0 0 0;
    }
    .contact-row span {
        font-size: 1em;
    }
    .contact-row .glyphicon {
        font-size: 1.4em;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        color: #EB7B59;
    }
    .contact-box-icon {
        height: 35px;
        width: 35px;
        margin-right: 5px;
    }
}