/*Your CSS here*/

* {
    margin: 0;
    padding: 0;
    color: white;
}

html,
body {
    height: 100%;
    font-family: sans-serif;
}

.container-fluid {
    margin: 0;
    padding: 0;
}

.wrapper {
    /*margin: 0 auto;*/
    /*max-width: 1200px;
    padding: 0 2%;
    width: 96%;*/
}

header {
    position: relative;
}

.navbar-header {
    padding-left: 4%;
}

.navbar-brand {
    padding: 5% 0 0 0;
}

.navbar-brand img {
    width: 10vw;
}

.navbar {
    border-radius: 0;
}

header nav h2 {
    line-height: 0;
    margin: 0;
    text-indent: -10000px;
}

#navi {
    border: 0;
    margin-bottom: 0;
    background: #eaeaea;
}

#navi a {
    font-size: 1.2vw !important;
}

#bs-example-navbar-collapse-1 {
    border-color: #a09f9f;
}

#bs-example-navbar-collapse-1 li {
    padding-top: 7px;
}

#navi li a {
    text-align: right;
    color: #b24d37;
    margin: 0 10px 0 0;
}

#navi ul {
    top: 50%;
}

.navbar-nav {
    margin: 0;
}

.navbar-nav li a {
    padding: 0 15px;
}


/* Override bootstrap collapse to keep margins */

.hvr-reveal:before {
    border-color: b24d37;
}


/*toggle menu section*/

#toggle-menu {
    visibility: hidden;
}

#sidebar-wrapper {
    display: block;
    /*margin-right: -250px;*/
    /*top: 50%;*/
    top: 0;
    left: 0;
    float: left;
    margin-left: -250px;
    width: 250px;
    background: rgb(0, 0, 0);
    position: fixed;
    /*height: 100%;*/
    overflow-y: auto;
    z-index: 1000;
    transition: all 0.5s ease-in 0s;
    -webkit-transition: all 0.5s ease-in 0s;
    -moz-transition: all 0.5s ease-in 0s;
    -ms-transition: all 0.5s ease-in 0s;
    -o-transition: all 0.5s ease-in 0s;
}

.sidebar-nav {
    /*position: absolute;*/
    display: inline-block;
    top: 0;
    width: 250px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav li {
    line-height: 50px;
    text-indent: 20px;
    /*height: 50px;*/
}

.sidebar-nav li a {
    color: #999999;
    display: block;
    text-decoration: none;
}

.sidebar-nav li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav>.sidebar-brand {
    height: 55px;
    line-height: 55px;
    font-size: 18px;
}

.sidebar-nav>.sidebar-brand a {
    color: #999999;
}

.sidebar-nav>.sidebar-brand a:hover {
    color: #fff;
    background: none;
}

#menu-close {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), to(#818080));
    background-image: linear-gradient(to bottom, #fff 0, #818080 100%);
}

#menu-close:hover {
    background-position: 0;
    border-radius: 20px;
}

#menu-toggle {
    top: 50%;
    margin: 0 auto;
    /*right: 0;*/
    float: left;
    position: fixed;
    z-index: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#sidebar-wrapper.active {
    left: 250px;
    width: 250px;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
}

.toggle {
    margin: 5px 5px 0 0;
}

.info {
    padding: 0 1vw;
}

.info-text span {
    line-height: 1.45em;
}

#first-section {
    /*background-image: url("../img/portfolio01.jpg");*/
    /*background-attachment: fixed;*/
    /*background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;*/
    color: white;
    height: 100%;
    left: 0;
    top: 0;
    width: auto;
    position: relative;
}

#first-section img {
    width: 100%;
}

#second-section {
    background-color: #ffa235;
}

#second-header {
    background: #fdd29f;
}

#second-section .info .title {
    font-size: 3vw;
    margin-bottom: 2vw;
    text-decoration: underline;
}

#second-section .info span {
    /*font-size: 16px;*/
    /*line-height: 1.2em;*/
}

#third-section {
    background-color: #1845b1;
}

#third-header {
    background: #a6bae9;
}

#third-section .info .title {
    font-size: 3vw;
    margin-bottom: 2vw;
    text-decoration: underline;
}

#third-section .info span {
    /*font-size: 16px;*/
    line-height: 1.2em;
}

#fourth-section {
    background-color: #25b241;
}

#fourth-section .services-title {
    display: block;
    text-align: center;
    font-size: 20px;
}

#fourth-header {
    background: #84d594;
}

#fourth-section .services-title {
    font-size: 3vw;
    margin-bottom: 2vw;
}

#fourth-section .services-info-text-container {
    padding: 0 5vw;
    font-size: 16px;
}

#fourth-section .services-info-text {
    /*line-height: 1.2em;*/
}

#fifth-section {
    background-color: #0b9e9e;
}

#fifth-header {
    background: #5ecfcf;
}

#fifth-section .info .title {
    font-size: 3vw;
    margin-bottom: 2vw;
    text-decoration: underline;
}

#fifth-section .info span {
    /*font-size: 16px;*/
    line-height: 1.4em;
}

#sixth-section {
    background-color: #ac5cac;
}

#sixth-header {
    background: #d8abd8;
}

#sixth-section .info .title {
    font-size: 3vw;
    margin-bottom: 2vw;
}

#sixth-section .info span {
    font-size: 16px;
    line-height: 1.2em;
}

.line-bottom-title {
    font-size: 3vw;
    text-decoration: underline;
}

.form-control {
    height: auto;
}

#footer {
    background-color: #4084b2;
    padding: 5% 0;
}

#footer .footer-row {
    /*position: relative;*/
    /*display: inline-block;*/
    margin: 0;
    height: 100%;
}

#footer img {
    padding: 0 0 0 10px;
}

#footer .copy-container {
    position: relative;
    height: 100%;
    /*display: inline-block;
    min-height: 100%;*/
    /*width: 100%;*/
}

#footer .copy {
    position: absolute;
    top: 50%;
    white-space: nowrap;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    /*padding: 0 0 0 10%;*/
}

.page-header {
    height: 10vw;
    width: 100%;
    margin: 0;
    vertical-align: middle;
    border-bottom: 0;
    border-top: 1px solid #eee;
}

.page-header h1 {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.page-header .title {
    color: #6f6b6b;
    text-align: center;
    font-weight: bold;
    font-size: 3vw;
}

.cont {
    position: relative;
    visibility: hidden;
}


/*fade in overlay effect*/

.container-img {
    position: relative;
    width: 100%;
}

.image {
    display: block;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: .5s ease;
    transition: .5s ease;
    background-color: #eaeaea;
}

.container-img:hover .overlay {
    opacity: 0.8;
}

.text {
    /*color: white;*/
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.text h1 {
    font-size: 3vw;
}

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

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


/*Bootstrap col center*/

.row-centered {
    margin: 0 auto;
    position: relative;
    padding: 2% 0 0 0;
}

.col-centered {
    display: inline-block;
    margin: 0 auto;
}

.footer-row {
    background: #72acd3;
    padding: 1vw 0;
}


/*==========  Mobile First Method  ==========*/


/* Custom, iPhone Retina */

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


/* Extra Small Devices, Phones */

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


/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
    #navi li a {
        line-height: 5;
    }
    .row-centered {
        padding: 1% 0;
        margin: 3% 0;
    }
    .cont {
        display: table-cell;
        vertical-align: middle;
        /*text-align: center;*/
        float: none;
    }
}


/* Medium Devices, Desktops */

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


/* Large Devices, Wide Screens / 1200 felett*/

@media only screen and (min-width: 1200px) {
    #nav li a {
        padding: 10px 15px !important;
    }
    #navi a {
        font-size: 24px;
    }
    #second-section {
        height: 100%;
    }
    #third-section {
        height: 100%;
    }
    .navbar-brand {
        width: 330px;
        height: 100%;
    }
    .sidebar-nav li {
        padding: 15px 0;
    }
    .sidebar-nav li a {
        font-size: 24px;
    }
    .sidebar-nav>.sidebar-brand {
        font-size: 34px;
        white-space: nowrap;
        margin: 10px 0 30px;
    }
    #sidebar-wrapper.active {
        width: 400px;
    }
    #menu-close {
        margin-right: -150px;
    }
    .info {
        font-size: 24px;
        line-height: 1.8em;
    }
    .info h4 {
        font-size: 28px;
    }
    .row-centered {
        padding: 1% 0;
    }
    .cont {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
    .copy {
        font-size: 22px;
    }
}


/*==========  Non-Mobile First Method  ==========*/


/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {}


/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {}


/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
    #navigation {
        display: none;
    }
    #logo-cont {
        display: none;
    }
    #navi li a {
        line-height: 20px;
    }
    .info {
        padding: 4% 20%;
    }
    #bs-example-navbar-collapse-1 {
        position: absolute;
        width: 100%;
        z-index: 9999;
    }
    #bs-example-navbar-collapse-1 li {
        background: #eaeaea;
    }
    .row:nth-child(odd) {
        border-top: 1px solid white;
    }
    .footer-row {
        border-top: 0 !important;
    }
    .navbar-brand img {
        width: 110px;
    }
    .navbar-brand {
        padding-top: 0.5%;
    }
    .page-header .title {
        font-size: 5vw;
    }
    #second-section .info {
        line-height: 0;
    }
    #third-section .info {
        line-height: 0;
    }
    #fourth-section .services-title {
        font-size: 5vw;
        margin-top: 7vw;
    }
    #fourth-section .cont:last-child {
        margin-bottom: 7vw;
    }
    #fifth-section .info {
        line-height: 0;
    }
    .line-bottom-title {
        font-size: 5vw;
    }
}


/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
    #logo-cont {
        display: none;
    }
}


/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {}