@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

body,html, h1, h2, h3, h5, h6, p {
    font-family:'Open Sans';
}
h2 {
    font-size:2.4rem;
    font-weight:600;
    letter-spacing:-1px;
    line-height:120%;
    color:#014F63;
    position:relative;
    margin-bottom:3.5rem;
}
h2:after {
    content:'';
    position:absolute;
    bottom:-2rem;
    width:12rem;
    left:0;
    height:1px;
    background: linear-gradient(to right, #ccc, #fff);
}
p {
    font-size:1.5rem;
    line-height:160%;
    color:#333;
}

/* --------------------------------------------------------------------- navigation mobile */
.nav-bar.nav-main .navigation > ul > li > a.nav-icon {
    font-size:3rem;
    margin: 2rem 0 0 0;
}

.side-navigation-wrapper {
    background:#042a39;
}
.side-navigation-header .logo {
    width: 18.5rem;
    margin:.3rem 0 0 0;
}
.side-navigation-header .icon-cancel {
    font-size: 3rem;
}
.navigation-hide {
    top:2rem;
    right:1.5rem;
}
.side-navigation-wrapper nav {
    margin:7rem 0 0 0;
}
.side-navigation ul li.current a {
    opacity:1;
}
.side-navigation ul li .sub-menu a {
    opacity:.6;
    font-size:1.1rem;
}
.side-navigation ul li a {
    opacity: .6;
    color:#fff;
    font-size:1.4rem;
    text-transform:uppercase;
    transition:0.2s opacity;
    text-shadow:0px 0px 5px rgba(0,0,0,.6);
}
.side-navigation ul li a:hover, .side-navigation ul li.current .sub-menu a:hover {
    opacity:1;
}
.side-navigation-footer .copyright {
    color:#fff;
    opacity: .6;
    font-size:1.1rem;
    margin:5rem 0 0 0;
}
.side-navigation-footer .copyright a {
    color:#fff;
    opacity:0.6;
    font-weight:400;
}
.side-navigation-footer .copyright a:hover {
    opacity:1;
}


/* --------------------------------------------------------------------- navigation main */
.nav-bar.nav-main > .row > .column {
    border-bottom: none;
    height:7rem;
}
.nav-bar.nav-main .logo img {
    width:18.5rem;
    margin:1.2rem 0 0 0;
}
.nav-bar.nav-main .navigation > ul > li > a {
    opacity: 1;
    font-size:1.4rem;
    text-transform:uppercase;
    margin:2.6rem 0 0 0;
    transition:0.2s opacity;
    text-shadow:0px 0px 5px rgba(0,0,0,.6);
}
.nav-bar.nav-main .navigation > ul > li > a:hover {
    opacity: .4;
}
.nav-bar.nav-main .navigation > ul > li.current > a {
    color:#ff9900;
}
.nav-bar.nav-main .navigation > ul > li.current > a:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------- header */
.leaves {
    background: transparent url(../images/leaves.png) no-repeat 100% 100% / 70rem;
    position:absolute;
    height:50rem;
    width:100%;
    top:0;
    right:0;
    mix-blend-mode: multiply;
    transition:0.2s background;
}
.intro-title-1 .row {
    position:relative;
}
.title-container {
    position:relative;
}
.title-container-inner {
    position:relative;
    z-index:1;
}
.intro-title-1 {
    height: 50rem;
    background: #000 url(../images/header-bkg.jpg) no-repeat 50% 50% / cover;
}
.intro-title-1 h1 {
    padding-top:5rem;
    font-size:4.8rem;
    font-weight:300;
    letter-spacing: -1px;
    line-height:120%;
    max-width:800px;
    text-shadow:0px 0px 10px rgba(0,0,0,.6);
}
.sub .intro-title-1 h1 {
    padding-top:3rem;
}
.button {
    text-shadow:0px 0px 5px rgba(0,0,0,.6);
}
.show-on-mobile {
    display:none;
}
/*  media queries 1023  960  768  600  480 */
@media only screen and (max-width:1023px) {
    .leaves {
        background: transparent url(../images/leaves.png) no-repeat 100% 100% / 50rem;
    }
}
@media only screen and (max-width:768px) {
    .intro-title-1 h1 {
        padding-top:7rem;
        font-size:4.2rem;
    }
}
@media only screen and (max-width:480px) {
    .intro-title-1 h1 {
        font-size:3.8rem;
    }
}
@media only screen and (max-width:360px) {
    .intro-title-1 h1 {
        font-size:3.4rem;
    }
}

/* --------------------------------------------------------------------- teaser */
.teaser {
    background:#F7F9F9;
    position:relative
}
.teaser .column {

}
.teaser .copy {
    padding:6rem;
    box-sizing:border-box;
}
.teaser .copy.left {
    padding:6rem 6rem 6rem 1.5rem;
}
.teaser .copy.right {
    padding:6rem 2.5rem 6rem 6rem;
    text-align:left;
}

.teaser .image {
    height:33.33%; /* js dynamic */
    position:absolute;
    width:50%;
    transition:.2s height;
}
.teaser .image.left  { left:0; }
.teaser .image.right { right:0; }

@media only screen and (max-width:768px) {
    .teaser .copy.left, .teaser .copy.right {
        padding:30rem 1.5rem 6rem 1.5rem;
    }
    .teaser .image {
        height:25rem;
        width:100%;
    }
}

/* replace image-n classes with dynamics in migx/modx */
.teaser .image.image-1 {
    background:url(../images/teaser-img.jpg) no-repeat 50% 50% / cover;
}
.teaser .image.image-2 {
    background:url(../images/teaser-img-demo-2.jpg) no-repeat 50% 50% / cover;
}
.teaser .image.image-3 {
    background:url(../images/teaser-img-demo-3.jpg) no-repeat 50% 50% / cover;
}

.content ul.box {
    list-style-type: circle;
    color: #333;
    background: #F7F9F9;
    padding: 20px;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #ff9900;
}
.content .width-9 ul.box li {
    margin: 0 0 5px 13px
}

.content .width-9 a {
    
}
.timeline p {
    margin-top: -6px !important;
}

.contacts p {
    margin: 0 0 .5rem 0;
    font-size:13px;
    font-weight:600;
}
.contacts h5 {
    font-weight:300;
}
.contacts a {
    font-weight: 300;
    font-family: 'Open Sans'
}
.contacts .box {
    color: #333;
    background: #F7F9F9;
    padding: 10px 20px;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #ff9900;
}

/* --------------------------------------------------------------------- sub */
.sub .leaves {
    display:none;
}
.sub .intro-title-1 {
    height: 35rem;
    background: #000 url(../images/header-bkg.jpg) no-repeat 50% 50% / cover;
}
.sub .picture {
    margin: -6rem 0 0 0;
    background:transparent url(../images/sub-img.jpg) no-repeat 50% 50% / cover;
    box-shadow:0px 0px 20px rgba(0,0,0,0.2);
    width:100%;
    height:35rem;
}
/*  media queries 1023  960  768  600  480 */
@media only screen and (max-width:960px) {
    .sub .picture {
        height:30rem;
        margin: -6rem 0 -2rem 0;
    }
}
@media only screen and (max-width:768px) {
    .sub .picture {
        height:25rem;
    }
}
@media only screen and (max-width:600px) {
    .sub .picture {
        height:20rem;
    }
}
@media only screen and (max-width:480px) {
    .sub .picture {
        height:15rem;
        margin: -4rem 0 -2rem 0;
    }
}
/* --------------------------------------------------------------------- footer */
footer {
    background:#fff;
    position:relative;
}
footer .hr {
    height:1px;
    width:25%;
    background: linear-gradient(to right, #ff9900, #fff);
    margin:0 0 2rem 0;
}
footer .navigation::after {
    width: 0;
    height: 0;
    background: none;
}
footer .navigation ul {
    position:relative;
}
footer .navigation ul li {
    margin: 0;
    float: left;
    line-height: 1.2;
}
footer .navigation ul li.current a {
    color:#ccc !important
}
footer .navigation ul li a {
    display:inline;
    padding: 0 2rem 0 0;
}
footer .navigation ul li a:hover {
    color:#ff9900;
}
footer .copyright {
    margin:4rem 0 0 0;
}
footer .copyright a {
    font-weight:400;

}