html, body {
    background:#ffffff;
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
    font-size:16px;
}

a {
    color: black;
}

.mobile_only {
    display: none;
}

.wrapper {
    width:100%;
    max-width:1080px;
    margin:auto;
    background:#fff;
    padding:20px;
    box-sizing: border-box;
}

#logo {
    width:35%;
    height:auto;
    float:left;
}

#logo img {
    width:100%;
}

nav ul {
    float:right;
}

nav a {
    text-decoration:none;
    display:inline-block;
    padding:16px 10px;
    -webkit-transition:ease all 1s;
    transition:ease all 1s;

}

nav a.active {
    color:#fff;
    background-color: #50aede;
}

h2 {
    color:#50aede;
    font-size:30px;
}

nav a:hover {
    color:#fff;
    background-color: #ee805d;
}

nav li {
    display:inline-block;
}

nav img {
    width:100%;
    height:auto;
}

.spacer {
    width:100%;
    float:none;
    clear:both;
}

#hamburger {
    width:50px;
    height:50px;
    position:fixed;
    top:15px;
    right:15px;
    display:none;
    background-image: url('../img/ham.png');
    background-size: cover;
}

.image_container, .text_container {
    width:50%;
}

.image_container {
    float:right;
}

.text_container {
    float: left;
    /*text-align: right;*/
    padding:0 15px;
    box-sizing: border-box;
}

.text_container.bigfont {
    font-size: 30px;
    text-align: right;
    line-height:50px;
}

.image_left .image_container {
    float:left;
}
.image_left .text_container {
    float:right;
    text-align:left;
}
.image_container img {
    max-width: 100%;
}
#logo {
    position:relative;
}
#logo .textbox {
    position:absolute;
    right:0;
    bottom:5px;
    font-size:9.2px;
    text-align:justify;
    letter-spacing:1px;
}

#mobile_textbox {
    display:none;
}

.lastlinks {
    text-decoration: none;
    text-align: right;

}

.lastlinks a {
    margin-left: 10px;
    text-decoration: none;
    color:#aaa;
}

.image_container .photo {
    width:200px;
    -webkit-box-shadow: -5px 4px 16px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: -5px 4px 16px 0px rgba(0,0,0,0.4);
    box-shadow: -5px 4px 16px 0px rgba(0,0,0,0.4);
    padding:16px;
    margin:auto;
    /*-webkit-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;*/
}

.bluebox {
    background-color:#50aede;
    padding:10px;
    box-sizing: border-box;
    text-align: left;
    color: #ffffff;
    margin-top:20px;
}

.bluebox a {
    text-decoration: none;
    color: #ffffff;
}
.bbleft {
    width:50%;
    float: left;
}
.bbright {
    width: 50%;
    float: right;
}

iframe {
    width:100%;
}

@media  (max-width:850px) {
    #logo {
        float:none;
        margin:auto;
    }
    #logo .textbox {
        display:none;
    }
    nav ul {
        margin:0;
        float:none;
        margin:auto;
        padding:0;

    }
    nav {
        text-align: center;
    }
    nav a {
        padding:10px 15px;
    }
    #mobile_textbox {
        display:block;
        width:100%;
        font-size:9.2px;
        text-align:center;
        letter-spacing:1px;

        width:100%;
        padding:5px;
    }
    .bbleft , .bbright{
        width:100%;
    }
    .text_container.bigfont {
        font-size: 22px;
        text-align: right;
        line-height:40px;
    }

}

@media  (max-width:570px) {
    .mobile_only {
        display:block;
    }
    #logo {
        width:220px;
        position: relative;

    }
    .wrapper.top {
        padding:5px;
        height:80px;
        position:fixed;
        top:0;
        left:0;
        -webkit-box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.37);
        -moz-box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.37);
        box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.37);
    }
    .wspacer {
        height:80px;
        widht:100%;
    }
    nav {
        position:fixed;
        background:rgba(255,255,255,0.9);
        left:0;
        top:80px;
        width:100%;
    }
    nav li {
        display: block;
    }
    nav a {
        padding:15px 0;
        font-size:18px;
        width:100%;
        color:#000;
    }
    #hamburger {
        display:block;
    }
    nav {

        -webkit-transition: all linear 0.5s;
        transition: all linear 0.5s;
        -webkit-transform: translate(0, -140%);
        transform:translate(0, -140%);
    }
    nav.open {
        display:block;
        opacity:1;
        -webkit-transform: translate(0, 0);
        transform:translate(0, 0);
    }
    .text_container , .image_container{
        width:100%;
    }

    .text_container {
        text-align: left;
        padding:0;
    }

    #mobile_textbox {
        display:none;
    }
    #logo .textbox {
        position:fixed;
        bottom:0;
        display:block;
        width:100%;
        text-align: center;
        padding:10px;
        background-color: white;
        -webkit-box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.37);
        -moz-box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.37);
        box-shadow: 0px 3px 16px 0px rgba(0,0,0,0.37);
    }
    .bottomspacer {
        height:40px;
    }
    .lastlinks {
        display: none;
    }
    .text_container.bigfont {
        font-size: 22px;
        text-align: center;
        line-height:30px;
    }
}

@media  (max-width:380px) {
    #logo {
        width:200px;
        float:left;
        margin-top:3px;
        margin-left:10px;
    }
    .wrapper.top {
        padding:5px;
        height:70px;
    }
    nav {
        top:70px;
    }
    #hamburger {
        right:8px;
        top:8px;
    }
}