/*********************************** SEITE HOME  */
body.unterlagen,
body.Zeugniss,
body.my-art,
body.Info{
    font-family: 'PT Sans', sans-serif;
    background-color: hsl(200, 14%, 96%);
    padding-left: 10px;
    padding-right: 10px;
}

body.index {
    font-family: 'PT Sans', sans-serif;
    background-color: hsl(200, 14%, 96%);
    background-size: 4000px auto;
    background-image: url(Htmlbackv2.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    padding-left: 250px;
    padding-right: 100px;
    margin-right: 100%;
}

.index .RomanHauser-Home {
    position: absolute;
    left: 0px;
    top: 11px;
    color: white;
 }

 .index .post {
    width: 251px;
    height: 351px;
    position: relative;
    cursor: pointer;
 }

 .index .post:hover .post-s {
    width: 251px;
 }

 .index .post img {
    display: block;
    width: 251px;
    height: 351px;
 }

 .index .post-s {
    width: 0px;
    height: 351px;
    background: rgba(80, 60, 180, 0.7);
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition:0.4s ease;
 }

 .index .post-s h2 {
    color:white;
    font-size: 25px;
    border: 6px solid white;
    padding: 10px 30px;
 }

 .index #mainbox {
    font-weight: bold;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    color: white;
    left: 60px;
    top: 60px;
 }

 .index .Boxes-text{
    position: absolute;
    left: 157px;
 }

 .index .Text-welcome{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    position: absolute;
    left: 120px;
    top: 40px;
    font-size: bold;
    font-size: 9px;
    color: rgb(255, 255, 255);
}

 .index .Text-welcome:hover{
    text-decoration: underline  rgba(80, 60, 180, 0.7);
 }

 .index .Text-short{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    left: 80px;
    top: 1165px;
    position: absolute;
    color: white;
}
 

/*************************** SIDEBAR */

 .index .Sidebar .closebnt {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 25px;
    margin-left: 28px;
 }
 
 .index .Sidebar{
    position:fixed;
    top: 0px;
    left:0px;
    height:100%;
    width: 0px;
    z-index: 1;
    padding-top: 70px;
    overflow-x: hidden;
    padding-right: -80px;
    background-color: black;
    right: 0px;
    opacity: 80%;
 }

 .index .Sidebar a{
    padding: 30px 30px 30px 50px;
    text-decoration: none;
    font-size: 18px;
    color: rgb(255, 255, 255);
    display: block;
    position: relative;
    top: 30px;
    opacity: 100%;
 }

 .index .Sidebar a:hover {
    color: rgb(144, 58, 58);
    font-weight: bold;
 }
 
 /*************************** VIERECK */

 .index .viereck3,
 .index .viereck2,
 .index .viereck1 {
    position: relative;
    cursor: pointer;
 }
 
 .index .viereck3 img,
 .index .viereck2 img,
 .index .viereck1 img {
    display: block;
 }

 .index .viereck3-s,
 .index .viereck2-s ,
 .index .viereck1-s {
    background: rgba(80, 60, 180, 0.7);
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
 }

 .index .Box3,
 .index .Box2,
 .index .Box1{
    position: absolute;
 }
 
 .index .viereck3-s h5,
 .index .viereck2-s h4,
 .index .viereck1-s h3 {
    color:white;
    border: 7px solid white;
 }

 /*************************** VIERECK 1 */

 .index .viereck1,
 .index .viereck1 img {
    width: 100%;
    height: 100%;
 }

 .index .viereck1:hover .viereck1-s {
    width: 100%;
 }
 
 .index .viereck1-s {
    width: 0px;
    height: 100%;
    transition:0.4s ease;
 }

 .index .viereck1-s h3 {
    font-size: 25px;
    padding: 10px 30px;
 }

 .index .Box1{
    left:80px;
    top: 580px;
 }

/*************************** VIERECK 2 */

.index .viereck2:hover .viereck2-s,
.index .viereck2,
.index .viereck2 img  {
    width: 100%;
    height: 100%;
}
 
 .index .viereck2-s {
    width: 0px;
    height: 100%;
    transition:0.4s ease;
 }

 .index .viereck2-s h4 {
    font-size: 25px;
    padding: 7px 30px;
 }

 .index .Box2 {
    left: 80px;
    top: 830px;
    border:4px solid #ffffffc9

}

/*************************** VIERECK 3 */

.index .viereck3 img,
.index .viereck3 {
    width: 100%;
    height: 100%;
 }

 .index .viereck3:hover .viereck3-s {
    width: 100%;
 }

 .index .viereck3-s {
    width: 0px;
    height: 100%;
    transition:0.4s ease;
 }

 .index .viereck3-s h5 {
    font-size: 18px;
    padding: 5px 15px;
 }

 .index .Box3{
    left: 350px;  
    top: 580px;
 }

 /*************************** BILDBOX */

 .index .Bildbox{
    position: absolute;
    left: 115px;
    top: 200px;
    left: 80px;
    top: 220px;
 }
 
 .index .Roman{
    position: absolute;
    left: 30px;
 }

/**********************************@media HOME*/
 @media (max-width: 576px){  
 }

@media (min-width:768px){
    .index .headline {
        left: 180px;
        top: 11px;
    }
    
    .index .RomanHauser-Home{
        left: -20px;
        top: 0px;
    }

    .index .Bildbox{
        left: 140px;
        top: 200px;
    }


    .index #mainbox{
        left: 70px;
        top: 45px;
    }

    .index .Sidebar .closebnt{
        top: 0;
        right: 25px;
    }

    .index .Sidebar{
        top: 0px;
        left:0px;
        padding-top: 120px;
    }

    .index .Sidebar a{
        top: 30px;
    }

    .index .Box1{
        left:100px;
        top: 590px;
        width: 175px;
        height: 175px;
    }

    .index .Box2{
        left: 500px;
        top: 280px;
    }

    .index .Box3{
        left: 370px;  
        top: 610px;
        width: 175px;
        height: 175px;
    }

    .index .Boxes-text{
        left: 157px;
    } 

    .index .Text-welcome{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        position: absolute;
        left: 160px;
        top: 35px;
        font-size: bold;
        font-size: 12px;
        color: white;
    
    }

    .index .Text-short{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 18px;
        left: 150px;
        top: 840px;
        position: absolute;
        color: white;
    }

}

@media (min-width:992px){
    .index .headline {
        left: 180px;
        top: 11px;
    }
    
    .index .RomanHauser-Home{
        left: 20px;
        top: 0px;
    }

    .index .Bildbox{
        left: 140px;
        top: 200px;
    }

    .index #mainbox{
        left: 70px;
        top: 45px;
    }

    .index .Sidebar .closebnt{
        top: 0;
        right: 25px;
    }

    .index .Sidebar{
        top: 0px;
        left:0px;
        padding-top: 120px;
    }

    .index .Sidebar a{
        top: 30px;
    }

    .index .Box1{
        left:380px;
        top: 590px;
    }

    .index .Box2{
        left: 570px;
        top: 140px;
    }

    .index .Box3{
        left: 760px;  
        top: 490px;
    }

    .index .Boxes-text{
        left: 157px;
    } 

    .index .Text-welcome{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        position: absolute;
        left: 140px;
        top: px;
        font-size: bold;
        font-size: 20px;
        color: white;
    
    }

    .index .Text-short{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 20px;
        left: 150px;
        top: 850px;
        position: absolute;
        color: white;
    }

    /*********************************@media Info*/
}


@media (min-width:1250px){
    .index .headline {
        left: 180px;
        top: 11px;
    }
    
    .index .RoanHauser-Home{
        left: 170px;
    }

    .index .Bildbox{
        left: 250px;
        top: 320px;

    }

    .index #mainbox{
        left: 70px;
        top: 45px;
    }

    .index .Sidebar .closebnt{
        top: 100px;
        right: 25px;
    }

    .index .Sidebar{
        top: 0px;
        left:0px;
        padding-top: 120px;
        opacity: 100%;
    }

    .index .Sidebar a{
        top: 30px;
    }

    .index .Box1{
        left: 590px;
        top: 350px;
        width: 200px;
        height: 200px;
    }

    .index .Box2{
        left: 900px;
        top: 170px;
    }

    .index .Box3{
        left: 980px;  
        top: 610px;
        height: 200px;
        width: 200px;
    }

    .index .Boxes-text{
        left: 230px;
        top: 150px;
    } 

    .index .Text-welcome{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        position: absolute;
        left: 250px;
        top: -5px;
        font-size: bold;
        font-size: 22px;
        color: white;
    
    }

    .index .Text-short{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 22px;
        left:260px;
        top: 870px;
        position: absolute;
        color: white;
    }


    /*********************************@media Info*/
}

@media (min-width:1900px){
    .index .headline {
        left: 180px;
        top: 11px;
    }
    
    .index .RoanHauser-Home{
        left: 170px;
    }

    .index .Bildbox{
        left: 250px;
        top: 370px;
    }

    .index #mainbox{
        left: 70px;
        top: 45px;
    }

    .index .Sidebar .closebnt{
        top: 100px;
        right: 25px;
    }

    .index .Sidebar{
        top: 0px;
        left:0px;
        padding-top: 120px;
        opacity: 100%;
    }

    .index .Sidebar a{
        top: 30px;
    }

    .index .Box1{
        left: 590px;
        top: 430px;
        height: 230px;
        width: 230px;

    }

    .index .Box2{
        left: 990px;
        top: 190px;
        height: 292px;
        width: 503px;
    }

    .index .Box3{
        left: 980px;  
        top: 720px;
        height: 240px;
        width: 240px;
    }

    .index .Boxes-text{
        left: 230px;
        top: 190px;
    } 

    .index .Text-short{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 18px;
        left: 1450px;
        top: 940px;
        position: absolute;
        color: white;
    }

    /*********************************@media Info*/
}



 /*********************************** SEITE ALLG  */

 .Zeugniss .navbar,
 .unterlagen .navbar,
 .my-art .navbar,
 .Info .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: rgb(214, 231, 246);
     margin-bottom: 7px;
     box-shadow: 0px 5px 13px 2px #C2C2C2;
 }

 .Zeugniss a,
 .unterlagen a,
 .my-art a,
 .Info a {
    color:#831D17;
    margin-right: 16px;
    font-weight: bold;
    text-decoration: none;
}

.Zeugniss a:hover,
.unterlagen a:hover,
.my-art a:hover {
    text-decoration: underline;
}

.Zeugniss .container,
.my-art .container,
.unterlagen .container {
    background-color: white;
    padding: 0px;
    box-shadow: 0px 5px 13px 2px #C2C2C2;
}

/*********************************** SEITE Info  */

.Info .header-image {
    width: 100%;
}

.Info .headline {
    color:#831D17;
}

.Info a:hover {
    text-decoration: underline;
}

.Info .Roman {
    margin-left: 0px;
    font-size: 25px;
}

.Info .container{
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 20px;
    display: flex;
    height: 1200px;
    color: rgb(255, 255, 255);
    box-shadow: 0px 5px 13px 2px #C2C2C2;
}

.Info .maps{
    position: relative;
    left: 5px;
    bottom: 722px;
    height:240px;
    width: 240px;
}

.Info .tetx-info{
    color: black;
    position: relative;
    right: 0px;
}

.Info .romanname{
    color: black;
    position: relative;
    left: -100px;
}

.Info .fa-circle-info{
    position: relative;
    color: blue;
    right: 80px;
    margin-top: 17.5px;
    font-size: 30px;
}


.Info .fa-phone{
    color: rgb(0, 0, 0);
    position: relative;
    right: 120px;
    margin-right: 0px;
    top: 470px;
    font-size: 40px;
}

.Info .fa-phone:hover{
    font-size: 50px;
}

.Info .fa-google{
    color: #e1970d;
    font-size: 40px;
    position: relative;
    top: 560px;
    right: 110px;
}

.Info .fa-google:hover{
    font-size: 50px;
}

.Info .fa-circle-info:hover{
    font-size: 50px;
}

.Info .maps-container{
    position: relative;
   left: 0px;
   bottom: 477px;
   height:250px;
   width: 250px;
   background-color: #e2e0e0;
}

.Info .allmaps{
    position:relative;
    top: 310px;
    left: -70px;
}

.Info .Contact-text{
    position: relative;
    top: 270px;
    left: -110px;
}

.Info .Perfect-text{
    position: relative;
    top: 270px;
}

/*********************************** LEBENSLAUF */

.unterlagen .header-image {
    width: 100%;
}

.unterlagen .headline {
    color:#831D17;
}

.unterlagen a{
    color:#831D17;
    margin-right: 16px;
    font-weight: bold;
    text-decoration: none;
}

.unterlagen .Roman {
    margin-left: 1px;
    font-size: 25px;
}

.unterlagen .Zeugniss {
    width: 100%;
    height: 100%;
    box-shadow: 0px 5px 13px 2px #C2C2C2;
}

/*********************************** ZEUGNIS */

.Zeugniss .header-image {
    width: 100%;
}

.Zeugniss .headline {
    color:#831D17;
}

.Zeugniss .Roman {
    margin-left: 0px;
    font-size: 25px;
}

/*******************pdf*/
.pdf-Lebenslauf{
    width: 100%;
    height: 1000px;
}

.pdf-zeugniss{
    width: 100%;
    height: 3000px;
}

/*******************my-art*/

.my-art .autoreal{
    position: relative;
    left: 480px;
    top: -266.5px;
    height: 100%;
    width: 100%;
}

.my-art .Video1{
    position: relative;
    left: 480px;
    top: -478px;
    height: 100%;
    width: 100%;
}

.my-art .Tisch{
    position: relative;
    left: 0px;
    top: -212px;
    height: 100%;
    width: 100%;
}

.my-art .Minecraft{
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.my-art .Bilder{
    position: relative;
    left: 130px;
    top:60px;
}

.my-art .Roman {
    margin-left: 0px;
    font-size: 25px;
}

.my-art .headline {
    color:#831D17;
}


/****************************************************@Media INFO*/

@media (min-width:0px)and (max-width:400px){
    .Info .headline {
        margin-left: 130px;
        color:#831D17;
    }
    
    .Info .maps{
    height:240px;
    width: 240px;
    }
    
    .Info .tetx-info{
        color: black;
        position: relative;
        right: 40px;
    }
    
    .Info .fa-circle-info{
        color: blue;
        margin-right: 30px;
        margin-top: 17.5px;
        font-size: 30px;
    }
    
    .Info .fa-phone{
        color: rgb(0, 0, 0);
        position: relative;
        right: 70px;
        margin-right: 0px;
        top: 450px;
        font-size: 30px;
    }
    
    .Info .fa-phone:hover{
        font-size: 35px;
    }
    
    .Info .fa-google{
        color: #e1970d;
        font-size: 30px;
        position: relative;
        top: 585px;
        right: 110px;
    }
    
    .Info .fa-google:hover{
        font-size: 35px;
    }
    
    .Info .fa-circle-info:hover{
        font-size: 35px;
    }
    
    .Info .maps-container{
       height:250px;
       width: 250px;
       background-color: #e2e0e0;
    }
    
    .Info .allmaps{
        position:relative;
        top: 340px;
    }
    
    .Info .Contact-text{
        position: relative;
        padding-top: 10px;
        top: 270px;
    }
    
    .Info .Perfect-text{
        position: relative;
        top: 270px;
    }
    
}


@media (min-width:560px) and (max-width:763px){

    .Info .headline {
        margin-left: 130px;
        color:#831D17;
    }
    
    .Info .maps{
    position: relative;
    left: 5px;
    bottom: 722px;
    height:240px;
    width: 240px;
    }
    
    .Info .tetx-info{
        color: black;
        position: relative;
        right: 40px;
    }
    
    .Info .fa-circle-info{
        color: blue;
        margin-right: 30px;
        margin-top: 17.5px;
        font-size: 30px;
    }
    
    .Info .fa-phone{
        color: rgb(0, 0, 0);
        position: relative;
        right: 155px;
        margin-right: 0px;
        top: 490px;
        font-size: 30px;
    }
    
    .Info .fa-phone:hover{
        font-size: 35px;
    }
    
    .Info .fa-google{
        color: #e1970d;
        font-size: 30px;
        position: relative;
        top: 585px;
        right: 110px;
    }
    
    .Info .fa-google:hover{
        font-size: 35px;
    }
    
    .Info .fa-circle-info:hover{
        font-size: 35px;
    }
    
    .Info .maps-container{
        position: relative;
       left: 0px;
       bottom: 477px;
       height:250px;
       width: 250px;
       background-color: #e2e0e0;
    }
    
    .Info .allmaps{
        position:relative;
        top: 340px;
    }
    
    .Info .Contact-text{
        position: relative;
        padding-top: 10px;
        top: 270px;
    }
    
    .Info .Perfect-text{
        position: relative;
        top: 270px;
    }
}

@media (min-width:763px) and (max-width:996px){

    .Info .maps{
        position: relative;
        left: 5px;
        bottom: 722px;
        height:240px;
        width: 600px;
    }
    
    .Info .tetx-info{
        color: black;
        position: relative;
        right: 40px;
    }
    
    .Info .fa-circle-info{
        color: blue;
        margin-right: 30px;
        margin-top: 17.5px;
        font-size: 40px;
    }
    
    
    .Info .fa-phone{
        color: rgb(0, 0, 0);
        position: relative;
        right: 155px;
        margin-right: 0px;
        top: 470px;
        font-size: 40px;
    }
    
    .Info .fa-phone:hover{
        font-size: 50px;
    }
    
    .Info .fa-google{
        color: #e1970d;
        font-size: 40px;
        position: relative;
        top: 560px;
        right: 110px;
    }
    
    .Info .fa-google:hover{
        font-size: 50px;
    }
    
    .Info .fa-circle-info:hover{
        font-size: 50px;
    }
    
    .Info .maps-container{
        position: relative;
       left: 0px;
       bottom: 477px;
       height:250px;
       width: 610px;
       background-color: #e2e0e0;
    }
    
    .Info .allmaps{
        position:relative;
        top: 340px;
    }
    
    .Info .Contact-text{
        position: relative;
        top: 270px;
    }
    
    .Info .Perfect-text{
        position: relative;
        top: 270px;
    }
}

@media (min-width:996px) and (max-width:1200px){
    .Info .maps{
        position: relative;
        left: 5px;
        bottom: 722px;
        height:240px;
        width: 600px;
    }
    
    .Info .tetx-info{
        color: black;
        position: relative;
        right: 40px;
        font-size: 20px;
    }
    
    .Info .fa-circle-info{
        position: relative;
        color: blue;
        right: 30px;
        margin-top: 17.5px;
        font-size: 40px;
    }
    
    
    .Info .fa-phone{
        color: rgb(0, 0, 0);
        position: relative;
        right: 70px;
        margin-right: 0px;
        top: 520px;
        font-size: 40px;
    }
    
    .Info .fa-phone:hover{
        font-size: 50px;
    }
    
    .Info .fa-google{
        color: #e1970d;
        font-size: 40px;
        position: relative;
        top: 560px;
        right: 110px;
    }
    
    .Info .fa-google:hover{
        font-size: 50px;
    }
    
    .Info .fa-circle-info:hover{
        font-size: 50px;
    }
    
    .Info .maps-container{
        position: relative;
       left: 0px;
       bottom: 477px;
       height:250px;
       width: 610px;
       background-color: #e2e0e0;
    }
    
    .Info .allmaps{
        position:relative;
        top: 340px;
    }
    
    .Info .Contact-text{
        position: relative;
        top: 270px;
        left: -10px;
    }
    
    .Info .Perfect-text{
        position: relative;
        top: 270px;
    }
    
    .Info .romanname{
        color: black;
        position: relative;
        left: -10px;
    }
}

@media (min-width:1201px){
.Info .maps{
    position: relative;
    left: 5px;
    bottom: 722px;
    height:240px;
    width: 600px;
}

.Info .tetx-info{
    color: black;
    position: relative;
    right: 40px;
    font-size: 20px;
}

.Info .fa-circle-info{
    position: relative;
    color: blue;
    right: 30px;
    margin-top: 17.5px;
    font-size: 40px;
}


.Info .fa-phone{
    color: rgb(0, 0, 0);
    position: relative;
    right: 70px;
    margin-right: 0px;
    top: 520px;
    font-size: 40px;
}

.Info .fa-phone:hover{
    font-size: 50px;
}

.Info .fa-google{
    color: #e1970d;
    font-size: 40px;
    position: relative;
    top: 560px;
    right: 110px;
}

.Info .fa-google:hover{
    font-size: 50px;
}

.Info .fa-circle-info:hover{
    font-size: 50px;
}

.Info .maps-container{
    position: relative;
   left: 0px;
   bottom: 477px;
   height:250px;
   width: 610px;
   background-color: #e2e0e0;
}

.Info .allmaps{
    position:relative;
    top: 340px;
}

.Info .Contact-text{
    position: relative;
    top: 270px;
    left: -10px;
}

.Info .Perfect-text{
    position: relative;
    top: 270px;
}

.Info .romanname{
    color: black;
    position: relative;
    left: -10px;
}
}

/****************************************************@Media Design*/

@media (min-width:0px) and (max-width: 576px){  
    .my-art .autoreal{
        position: relative;
        top: 400px;
        left: -120px;
    }
    
    .my-art .Video1{
        position: relative;
        left: -120px;
        top: -478px;
        height: 50%;
        width: 50%;
    }
    
    .my-art .Tisch{
        position: relative;
        left: -120px;
        top: 512px;
        height: 50%;
        width: 50%;
    }
    
    .my-art .Minecraft{
        position: relative;
        left: -120px;
        top: -5px;
    }
    
    .my-art .Bilder{
        position: relative;
        top:60px;
    }

    .my-art .container{
        height: 1500px;
        background-color: white;
        padding: 0px;
        box-shadow: 0px 5px 13px 2px #C2C2C2;
    }
    .my-art .container{
        background-color: white;
        padding: 0px;
        box-shadow: 0px 5px 13px 2px #C2C2C2;
        width: 500px;
    }

    .Info .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgb(214, 231, 246);
        margin-bottom: 7px;
        box-shadow: 0px 5px 13px 2px #C2C2C2;
        width: 500px;
    }
    
}


@media (min-width:576px) and (max-width: 768px){ 
    .my-art .autoreal{
        position: relative;
        top: 400px;
        left: -120px;
    }
    
    .my-art .Video1{
        position: relative;
        left: -120px;
        top: -478px;
        height: 50%;
        width: 50%;
    }
    
    .my-art .Tisch{
        position: relative;
        left: -120px;
        top: 512px;
        height: 50%;
        width: 50%;
    }
    
    .my-art .Minecraft{
        position: relative;
        left: -120px;
        top: -5px;
    }
    
    .my-art .Bilder{
        position: relative;
        top:60px;
    }

    .my-art .container{
        height: 1400px;
        background-color: white;
        padding: 0px;
        box-shadow: 0px 5px 13px 2px #C2C2C2;
    } 
}

@media (min-width:768px) and (max-width: 1100px){  
    .my-art .autoreal{
        position: relative;
        top: 400px;
        left: 110px;
    }
    
    .my-art .Video1{
        position: relative;
        left: 110px;
        top: -478px;
        height: 50%;
        width: 50%;
    }
    
    .my-art .Tisch{
        position: relative;
        left: 110px;
        top: 512px;
        height: 50%;
        width: 50%;
    }
    
    .my-art .Minecraft{
        position: relative;
        left: 110px;
        top: -5px;
    }
    
    .my-art .Bilder{
        position: relative;
        top:60px;
    }

    .my-art .container{
        height: 1400px;
        background-color: white;
        padding: 0px;
        box-shadow: 0px 5px 13px 2px #C2C2C2;
    } 
}

@media (min-width:1100px) and (max-width: 1250px){  

}

@media (min-width: 1900px){  
    .my-art .Bilder{
        position: relative;
        top:130px;
        left: 500px;
    }
}