@font-face { font-family: 'Karla';
             src: url('../assets/Karla.ttf')  format('truetype'); 
}

* {
    font-family: karla, sans-serif;
    margin: 0;
    padding: 0;
}

html {
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
    background-color: #fafafa;
}

h1,
h2,
h3 {
    font-weight: 700;
    color: #333333;
}

h1 {
    font-size: 1.6rem;
    margin-bottom: 4rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

li,
a {
    font-weight: 700;
    line-height: 1.6rem;
    color: #333333;
    font-size: 1em;
    text-decoration: none;
}

p {
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6rem;
    color: #333333;
}

.current {
    color: #2b87a2;
}

.shadow {
    -webkit-box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 4px 2px 10px 4px rgba(0, 0, 0, 0.20);
}

/************************************media querie landscape**********************************/

@media (orientation: landscape) {

    #wrapper {
        width: 100%;
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;
        background-color: #fafafa;
    }

    /************************************Header**********************************/

    #logo-p {
        display: none;
    }

    /************************************Navigation**********************************/

    #logo {
        width: 6%;
        display: inline-block;
        float: left;
        margin-left: 2%;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    #menu1 {
        z-index: 2;
        background: #ffffff;
        width: 100%;
        position: absolute;
    }

    #menu1 ul {
        width: 66.6%;
        margin-left: 30%;
        margin-top: 0.8rem;
    }

    #menu1 ul li {
        display: inline-block;
        width: 24%;
        list-style: none;
        text-align: center;
    }

    #menu1 ul li a:hover {
        color: #2b87a2;
    }

    #burger {
        display: none;
    }

    /************************************Content**********************************/

    .content {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        min-height: 8rem;
        padding-top: 2%;
        padding-bottom: 2%;
        display: inline-block;
    }

    /************************************Boxen**********************************/

    .box-content,
    .box-contact {
        padding: 2%;
        min-height: 36rem;
        display: inline-block;
        float: left;
    }
    
    .box-content {
        width: 70%;
        float: left;
        margin-right: 2%;
        background-color: #ffffff;
    }

    .box-content img {
        margin-right: 2rem;
        position: relative;
    }

    .box-contact {
        width: 20%;
        float: right;
        background-color: #2b87a2;
    }

    .box-contact h1,
    .box-contact h2,
    .box-contact h3,
    .box-contact p,
    .box-contact a {
        color: #ffffff;
    }

    .box-contact img {
        width: 50%;
        margin-bottom: 2rem;
    }
    
    .ico{
        width: 20%;
        margin-top: 2rem;
        margin-right: 2%;
        display: inline-block;
    }
    
    .ico img{
        width: 100%;
    }

    /************************************Footer**********************************/

    footer {
        clear: both;
        background-color: #333333;
        position: relative;
        font-size: 0.8rem;
        height: 2rem;
        padding-top: 1rem;
    }

    #copy {
        position: absolute;
        color: #ffffff;
        margin-left: 2%;
    }

    #menu2 {
        width: 66.6%;
        margin-left: 30%;
    }

    #menu2 ul {
        text-align: center;
    }

    #menu2 ul li {
        width: 24%;
        display: inline-block;
        list-style: none;
    }

    #menu2 ul li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        font-size: 0.8rem;
        height: 100%;
        width: 100%;
        text-align: center;
    }

    #menu2 ul li a:hover {
        color: #2b87a2;
    }
}

/************************************media querie portrait**********************************/

@media (orientation: portrait) {

    #wrapper {
        width: 100%;
        min-height: 500px;
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;

        -webkit-box-shadow: 0.5px 0.5px 1px 0.5px rgba(0, 0, 0, 0.25);
        box-shadow: 0.5px 0.5px 1px 0.5px rgba(0, 0, 0, 0.25);

        background-color: #fafafa;
    }

    * {
        font-size: 26px;
    }

    h1,
    h2,
    h3 {
        color: #2b87a2;
        line-height: 1.6rem;
        margin-bottom: 1rem;
    }

    h1 {
        font-size: 1.2rem;
    }

    h2 {
        font-size: 1.0rem;
    }

    h3 {
        font-size: 0.8rem;
    }


    li,
    a {
        font-weight: 700;
        line-height: 1.4rem;
        font-size: 0.8rem;
        color: #333333;
    }

    p {
        font-weight: 400;
        font-size: 0.8rem;
        line-height: 1.4rem;
        color: #333333;
    }

    .current {
        color: #2b87a2;
    }

    /************************************Header**********************************/

    header {
        width: 100%;
        min-height: 2.8rem;
        background: #ffffff;
        position: absolute;
    }

    #burger {
        display: block;
        position: absolute;
        width: 3%;
        right: 5%;
        top: 16%;
    }

    #logo-p {
        display: block;
        position: absolute;
        width: 25%;
        left: 5%;
        top: 40%;
    }

    /************************************Navigation**********************************/

    #logo {
        display: none;
    }

    #menu1 {
        z-index: 10;
        min-height: 14rem;
        position: absolute;
        display: none;
        background: #ffffff;
        width: 90%;
        margin-left: 5%;
        margin-top: 62%;
    }

    #menu1 ul {
        position: relative;
        width: 100%;
        text-align: left;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    #menu1 ul li {
        display: block;
        list-style: none;
    }

    #menu1 ul li a {
        display: block;
        text-decoration: none;
        color: #333333;
        height: 100%;
        width: 90%;
        padding: 5%;
        line-height: 1em;
        font-size: 1.2em;
    }

    #menu1 ul li a:hover {
        color: #2b87a2;
    }

    /************************************Content**********************************/

    .content {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        min-height: 8rem;
        padding: 5%;
        display: inline-block;
    }

    /************************************Boxen**********************************/

    .box-content,
    .box-contact {
        padding: 5%;
        min-height: 12rem;
        display: inline-block;
    }

    .box-content {
        width: 90%;
        float: left;
        background-color: #ffffff;
        margin-bottom: 5%;
    }

    .box-content img {
        position: relative;
        width: 100%;
    }
    
    .box-contact {
        width: 90%;
        float: right;
        background-color: #2b87a2;
    }
    
    .box-contact h1,
    .box-contact h2,
    .box-contact h3,
    .box-contact p,
    .box-contact a {
        color: #ffffff;
    }

    .box-contact a {
        font-size: 0.8rem;
    }

    .box-contact img {
        width: 75%;
        margin-bottom: 1rem;
    }
    
    .ico{
        width: 20%;
        margin-top: 2rem;
        margin-right: 2%;
        display: inline-block;
    }
    
    .ico img{
        width: 100%;
    }

    /************************************Footer**********************************/


    footer {
        width: 100%;
        height: 3rem;
        clear: both;
        background-color: #333333;
        position: relative;
    }

    #copy {
        position: absolute;
        text-align: left;
        font-size: 0.6em;
        color: #FFFFFF;
        margin-left: 10%;
        margin-top: 1rem;
    }

    #menu2 {
        display: none;
    }
    
    /************************************media querie iPad**********************************/

@media (orientation: portrait) and (min-width: 768px) {

    #wrapper {
        width: 100%;
        min-height: 500px;
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;

        -webkit-box-shadow: 0.5px 0.5px 1px 0.5px rgba(0, 0, 0, 0.25);
        box-shadow: 0.5px 0.5px 1px 0.5px rgba(0, 0, 0, 0.25);

        background-color: #fafafa;
    }

    * {
        font-size: 26px;
    }

    h1,
    h2,
    h3 {
        color: #2b87a2;
        line-height: 1.6rem;
        margin-bottom: 2rem;
    }

    h1 {
        font-size: 1.2rem;
    }

    h2 {
        font-size: 1.0rem;
    }

    h3 {
        font-size: 0.8rem;
    }


    li,
    a {
        font-weight: 700;
        line-height: 1.4rem;
        font-size: 0.8rem;
        color: #333333;
    }

    p {
        font-weight: 400;
        font-size: 0.8rem;
        line-height: 1.4rem;
        color: #333333;
    }

    .current {
        color: #2b87a2;
    }

    /************************************Header**********************************/

    header {
        width: 100%;
        min-height: 3rem;
        background: #ffffff;
        position: absolute;
    }

    #burger {
        display: block;
        position: absolute;
        width: 2%;
        right: 5%;
        top: 16%;
    }

    #logo-p {
        display: block;
        position: absolute;
        width: 25%;
        left: 5%;
        top: 36%;
    }

    /************************************Navigation**********************************/

    #logo {
        display: none;
    }

    #menu1 {
        z-index: 10;
        min-height: 14rem;
        position: absolute;
        display: none;
        background: #ffffff;
        width: 90%;
        margin-left: 5%;
        margin-top: 61.5%;
    }

    #menu1 ul {
        position: relative;
        width: 100%;
        text-align: left;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    #menu1 ul li {
        display: block;
        list-style: none;
    }

    #menu1 ul li a {
        display: block;
        text-decoration: none;
        color: #333333;
        height: 100%;
        width: 90%;
        padding: 5%;
        line-height: 1em;
        font-size: 1.2em;
    }

    #menu1 ul li a:hover {
        color: #2b87a2;
    }

    /************************************Content**********************************/

    .content {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        min-height: 8rem;
        padding: 5%;
        display: inline-block;
    }

    /************************************Boxen**********************************/

    .box-content,
    .box-contact {
        padding: 5%;
        min-height: 12rem;
        display: inline-block;
    }

    .box-content {
        width: 90%;
        float: left;
        background-color: #ffffff;
        margin-bottom: 5%;
    }

    .box-content img {
        position: relative;
        width: 100%;
    }
    
    .box-contact {
        width: 90%;
        float: right;
        background-color: #2b87a2;
    }
    
    .box-contact h1,
    .box-contact h2,
    .box-contact h3,
    .box-contact p,
    .box-contact a {
        color: #ffffff;
    }

    .box-contact a {
        font-size: 0.8rem;
    }

    .box-contact img {
        width: 75%;
        margin-bottom: 1rem;
    }
    
    .ico{
        width: 12.5%;
        margin-top: 2rem;
        margin-right: 2%;
        display: inline-block;
    }
    
    .ico img{
        width: 100%;
    }

    /************************************Footer**********************************/


    footer {
        width: 100%;
        height: 3rem;
        clear: both;
        background-color: #333333;
        position: relative;
    }

    #copy {
        position: absolute;
        text-align: left;
        font-size: 0.6em;
        color: #FFFFFF;
        margin-left: 10%;
        margin-top: 1rem;
    }

    #menu2 {
        display: none;
    }

/************************************media querie iPad Pro**********************************/

@media (orientation: portrait) and (min-width: 1024px) {

    #wrapper {
        width: 100%;
        min-height: 500px;
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;

        -webkit-box-shadow: 0.5px 0.5px 1px 0.5px rgba(0, 0, 0, 0.25);
        box-shadow: 0.5px 0.5px 1px 0.5px rgba(0, 0, 0, 0.25);

        background-color: #fafafa;
    }

    * {
        font-size: 26px;
    }

    h1,
    h2,
    h3 {
        color: #2b87a2;
        line-height: 1.6rem;
        margin-bottom: 2rem;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1.0rem;
    }


    li,
    a {
        font-weight: 700;
        line-height: 1.4rem;
        font-size: 0.8rem;
        color: #333333;
    }

    p {
        font-weight: 400;
        font-size: 0.8rem;
        line-height: 1.4rem;
        color: #333333;
    }

    .current {
        color: #2b87a2;
    }

    /************************************Header**********************************/

    header {
        width: 100%;
        min-height: 4rem;
        background: #ffffff;
        position: absolute;
    }

    #burger {
        display: block;
        position: absolute;
        width: 2%;
        right: 5%;
        top: 16%;
    }

    #logo-p {
        display: block;
        position: absolute;
        width: 25%;
        left: 5%;
        top: 36%;
    }

    /************************************Navigation**********************************/

    #logo {
        display: none;
    }

    #menu1 {
        z-index: 10;
        min-height: 14rem;
        position: absolute;
        display: none;
        background: #ffffff;
        width: 90%;
        margin-left: 5%;
        margin-top: 61.5%;
    }

    #menu1 ul {
        position: relative;
        width: 100%;
        text-align: left;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    #menu1 ul li {
        display: block;
        list-style: none;
    }

    #menu1 ul li a {
        display: block;
        text-decoration: none;
        color: #333333;
        height: 100%;
        width: 90%;
        padding: 5%;
        line-height: 1em;
        font-size: 1.2em;
    }

    #menu1 ul li a:hover {
        color: #2b87a2;
    }

    /************************************Content**********************************/

    .content {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        min-height: 8rem;
        padding: 5%;
        display: inline-block;
    }

    /************************************Boxen**********************************/

    .box-content,
    .box-contact {
        padding: 5%;
        min-height: 12rem;
        display: inline-block;
    }

    .box-content {
        width: 90%;
        float: left;
        background-color: #ffffff;
        margin-bottom: 5%;
    }

    .box-content img {
        position: relative;
        width: 100%;
    }
    
    .box-contact {
        width: 90%;
        float: right;
        background-color: #2b87a2;
    }
    
    .box-contact h1,
    .box-contact h2,
    .box-contact h3,
    .box-contact p,
    .box-contact a {
        color: #ffffff;
    }

    .box-contact a {
        font-size: 0.8rem;
    }

    .box-contact img {
        width: 75%;
        margin-bottom: 1rem;
    }
    
    .ico{
        width: 12.5%;
        margin-right: 2%;
        margin-top: 2rem;
        display: inline-block;
    }
    
    .ico img{
        width: 100%;
    }

    /************************************Footer**********************************/


    footer {
        width: 100%;
        height: 3rem;
        clear: both;
        background-color: #333333;
        position: relative;
    }

    #copy {
        position: absolute;
        text-align: left;
        font-size: 0.6em;
        color: #FFFFFF;
        margin-left: 10%;
        margin-top: 1rem;
    }

    #menu2 {
        display: none;
    }