@font-face {
    font-family: "Roboto-Light";
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
}
@font-face {
    font-family: "Roboto-Medium";
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: 	border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}
.cf{zoom: 1;}
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

html{
    overflow-y: scroll;
	scroll-behavior: smooth;
    min-height: 100%;
}
::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
body{
    /* background: transparent url(../images/bg1.jpg) 50% / cover no-repeat; */
    background-color: #ADD8E6;
    height: 100%;
    font-family: "Roboto-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.5em;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
    color: #666666;
    margin: 0;
    min-height: 100%;
}
h1,h2,h3,h4,h5,h6{
    font-family: "Roboto-Medium", "Roboto-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
}
h1{
    font-size: 2em;
    line-height: 1.25em;
    margin: 0 0 20px;
}
h1 span{
    font-size: 14px;
    line-height: 1.25em;
    display: inline-block;
}
h2{
    font-size: 1.5em;
    line-height: 1.25em;
}
a{
    color: #666666;
}
img{
    max-width: 100%;
}
.header{
    background: rgba(0,0,0,0.8);
    color: #ffffff;
    padding: 25px 50px;
    margin: 40px 0;
    box-shadow: 10px 20px 15px rgba(0,0,0,0.25);
}
.header p{
    margin-bottom: 0;
}
.header a{
    color: #ffffff;
    text-decoration: none;
}
.content{
    background: rgba(255,255,255,0.8);
    color: #666666;
    box-shadow: 10px 20px 15px rgba(0,0,0,0.25);
    margin: 0 0 100px;
}
.content .inner-content{
    padding: 30px 120px 30px 50px;
}
.content .inner-content >div{
    display: none;
}
.content .inner-content >div.active{
    display: block;
}
.content .inner-content.scroll{
    margin-bottom: -40px;
}
.content .inner-content .business-card .portrait{
    width: 200px;
}
.content .inner-content .data-protection h3{
    font-size: 20px;
    margin-bottom: 5px;
}
.content .inner-content .data-protection p{
    margin-top: 0;
    font-size: 18px;
}
.content .scroll-down{
    display: none;
    text-indent: -9999px;
    position: sticky;
    left: 100%;
    bottom: 20px;
    margin-right: 16px;
    width: 40px;
    height: 40px;
    background: transparent url(../images/long-arrow-down.svg) 0 0 / 100% auto no-repeat;
    cursor: pointer;
}
.footer{
    position: fixed;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    padding: 10px 50px;
    margin: 40px 0 0;
    width: 100%;
    line-height: 22px;
}
.footer .copyright{
    display: none;
    float: left;
    color: #ffffff;
    font-size: 12px;
    margin: 0;
    text-transform: uppercase;
    font-family: "Roboto-Medium", "Roboto-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.footer ul{
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}
.footer li{
    list-style: none;
    padding: 0 15px;
    float: left;
}
.footer li:first-child{
    padding: 0 15px 0 0;
}
.footer li:last-child{
    padding: 0 0 0 15px;
}
.footer a{
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    font-family: "Roboto-Medium", "Roboto-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.footer li a{
    display: block;
    float: left;
}
.footer li:first-child a{
   text-indent: -9999px;
   background: transparent url(../images/home.svg) 50% 1px / 20px no-repeat;
   display: inline-block;
   width: 22px;
   height: 22px;
}

@media only screen and (min-width: 480px) {
    .footer .copyright{
        display: block;
    }
    .footer ul{
        float: right;
        width: auto;
    }
    .footer li{
        padding: 0 30px;
    }
    .footer li:first-child{
        padding: 0 30px 0 0;
    }
    .footer li:last-child{
        padding: 0 0 0 30px;
    }
}
@media only screen and (min-width: 768px) {
    .header{
        margin-top: 50px;
        display: inline-block;
    }
    .content{
        float: right;
        max-width: 80%;
    }
    .content .inner-content .business-card{
        position: relative;
    }
    .content .inner-content .business-card .cta{
        margin: 50px 0;
    }
    .content .inner-content .business-card .portrait{
        position: absolute;
        margin: 0;
        right: -70px;
        top: 90px;
    }
}
@media only screen and (min-width: 1024px) {

    body{
        background-color: #ADD8E6;
        background: -webkit-gradient(linear, 0% 0%, 0% 10%, from(#ADD8E6), to(#70bed8));
        background: -webkit-linear-gradient(left, #ADD8E6 40%, #70bed8 100%);
        background: -moz-linear-gradient(left, #ADD8E6 40%, #70bed8 100%);
        background: -ms-linear-gradient(left, #ADD8E6 40%, #70bed8 100%);
        background: -o-linear-gradient(left, #ADD8E6 40%, #70bed8 100%);
        background: linear-gradient(left, #ADD8E6 40%, #70bed8 100%);
    }
}
@media only screen and (min-width: 1280px) {

    .content{
        min-width: 550px;
        max-height: 700px;
        overflow-y: scroll;
    }

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

    .content{
        margin: 40px auto 100px;
        float: none;
        width: 800px;
    }
    .content .inner-content .business-card .portrait{
        top: 25px;
    }
}