@charset "UTF-8";
/* CSS Document */

body {
    background-color:#fff;
    margin:0;
    padding:0;
	
}

h1, h2, h3, h4 {
  font-family: 'Big Shoulders Display', cursive;
    text-align:center;
    color:#304c59;
}

h1 {
    margin-bottom:50px;
}

h2 {
    margin-bottom:30px;
}

h3 {
    margin-top:30px;
}

h4 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size:18px;
}

p {
    text-align:center;
}

a {
    text-decoration:none;
    font-family: 'Lato', sans-serif;
}


.laptop {
    width:1300px;
    height:833px;
    background-image: url('../img/laptop.jpg');
    background-size:contain;
    background-repeat:no-repeat;
    margin-top: 50px;
}

.video {
    padding-top:2%;
    padding-left:21%;
    padding-right:21%;
}

.playbutton {
    background-image: url('../img/playbutton.svg');
    background-repeat:no-repeat;
    background-size:contain;
    width:100px;
    height:100px;
    position:absolute;
    right:50%;
    margin-right:-50px;
    top:175px;
    opacity:0.85;
}

.avatar {
    width:250px;
    height:250px;
    border-radius: 100%;
    background-image: url('../img/julia_peham.jpg');
    background-size:contain;
    margin-bottom:30px;
}

.wkslogo {
    width:146px;
    height:50px;
    background-image: url('../img/logo_versand_internet_handel.svg');
    background-repeat:no-repeat;
    background-size:contain;
}








/* RESPONSIVE Anpassungen */




/* X-Small */
@media screen and (max-width: 576px) {
    .laptop {
        background-image: url('../img/laptop_ohne.jpg');
        height:500px;
        background-size:auto 100%;
        background-position: 45% 0;
        padding:0;
    }
    .playbutton {
        top:90px;
        width:100px;
        height:100px;
        margin-right:-50px;
    }
    .video {
        width:96VW;
        max-width:450px;
    padding-top:20px;
    padding-left:0px;
    padding-right:0px;
        margin:0px auto;
}
    
}

/* Small */
@media screen and (min-width: 576px) {
    .laptop {
        height:346px;
    }
    .playbutton {
        top:40px;
    }

}


/* Medium */
@media screen and (min-width: 768px) {
    .laptop {
        height:462px;
    }
    .playbutton {
        top:80px;
    }

}

/* Medium */
@media screen and (min-width: 992px) {
    .laptop {
        height:615px;
    }
    .playbutton {
        top:120px;
    }

}

/* Large */
@media screen and (min-width: 1200px) {
    .laptop {
        height:730px;
    }
    .playbutton {
        top:150px;
    }
}

/* XXL */
@media screen and (min-width: 1400px) {
    .laptop {
        height:833px;
    }
    .playbutton {
        top:175px;
    }
}