@media (min-width: 200px)
{
html {
    font:500 14px/150% arial;
    font-family:;
    letter-spacing: 0px;
    font-style:italic;
    text-decoration: none;
    color:rgb(255, 255, 255);
    text-align:center;
}

body {
margin:20px;
background-color: #233030;
background-color: #101919;
border: 0px solid rgb(239, 243, 239);
}

.c1 {
    display: grid;
    grid-template-columns: repeat(7, 350px);
    xgrid-template-rows: repeat(8, 260px);
    border:0px solid rgb(255, 25, 25); 
    margin:0px;
    margin-top:-10px;
    margin-bottom:20px;
    float: left;
}

.container1 {
    grid-column: 1/2;
    border:0px solid rgb(255, 25, 25); 
    }

.container2 {
    grid-column: 2/3;
    border:0px solid rgb(25, 255, 25); 
    }
 
.container3 {
    grid-column: 3/4;
    border:0px solid rgb(205, 205, 255); 
    }

.container4 {
    grid-column: 4/5; 
    border:0px solid rgb(255, 20, 25); 
    }

.container5 {
    grid-column: 5/6; 
    border:0px solid rgb(25, 255, 25); 
    }

.container6 {
    grid-column: 6/7; 
    border:0px solid rgb(205, 205, 255); 
    }

.container7 {
    grid-column: 7/8; 
    border:0px solid rgb(205, 205, 255); 
    }

.bild1 {
        border: 1px solid #ccc; 
        border-radius: 15px;
        margin:0px;
        margin-top:5px;
        margin-bottom:-3px;
        cursor: pointer;   
        width: 100%;
        object-fit: cover;
        object-position: 65%;}

/*--------------------------------------------------------*/

/*450/250*/
 /*400/225*/
/*350/200*/
/*300/170*/


.b11 {height: 400px; object-position: 10%;} 
.b12 {height: 250px; object-position: 45%;} 
.b13 {height: 480px; object-position: static;} 
.b14 {height: 100px; object-position: 60%;} 
.b15 {height: 390px; object-position: 60%;} 
.b16 {height: 225px; object-position: 10%;} 
.b17 {height: 226px; object-position: 10%;} 
.b18 {height: 300px; object-position: 50%;} 

.b21 {height: 300px; object-position: 90%;} 
.b22 {height: 350px; object-position: 60%;} 
.b23 {height: 210px; object-position: 40%;} 
.b24 {height: 470px; object-position: 60%;} 
.b25 {height: 300px; object-position: static;} 
.b26 {height: 450px; object-position: 40%;} 
.b27 {height: 300px; object-position: 60%;} 
.b28 {height: 200px; object-position: 82%;} 

.b31 {height: 300px; object-position: 45%;} 
.b32 {height: 300px; object-position: 1%;} 
.b33 {height: 100px; object-position: 40%;} 
.b34 {height: 400px; object-position: 1%;} 
.b35 {height: 480px; object-position: 60%;} 
.b36 {height: 390px; object-position: 25%;} 
.b37 {height: 250px; object-position: 40%;} 
.b38 {height: 280px; object-position: static;} 

.b41 {height: 310px; object-position: 70%;} 
.b42 {height: 300px; object-position: 50%;} 
.b43 {height: 300px; object-position: 60%;} 
.b44 {height: 400px; object-position: 50%;} 
.b45 {height: 250px; object-position: 40%;} 
.b46 {height: 480px; object-position: 45%;} 
.b47 {height: 100px; object-position: 1%;} 
.b48 {height: 390px; object-position: 50%;} 

.b51 {height: 225px; object-position: 40%;} 
.b52 {height: 220px; object-position: 40&;} 
.b53 {height: 100px; object-position: 40%;} 
.b54 {height: 100px; object-position: static;} 
.b55 {height: 350px; object-position: 45%;} 
.b56 {height: 210px; object-position: 40%;} 
.b57 {height: 470px; object-position: 50%;} 
.b58 {height: 300px; object-position: 30%;} 

.b61 {height: 450px; object-position: 45%;} 
.b62 {height: 300px; object-position: static;} 
.b63 {height: 220px; object-position: 40%;} 
.b64 {height: 470px; object-position: static;} 
.b65 {height: 300px; object-position: static;} 
.b66 {height: 450px; object-position: static;} 
.b67 {height: 300px; object-position: static;} 
.b68 {height: 220px; object-position: static;} 

.b71 {height: 390px; object-position: 50%;} 
.b72 {height: 250px; object-position: static;} 
.b73 {height: 280px; object-position: static;} 
.b74 {height: 310px; object-position: 70%;} 
.b75 {height: 300px; object-position: static;} 
.b76 {height: 300px; object-position: static;} 
.b77 {height: 300px; object-position: static;} 
.b78 {height: 300px; object-position: static;} 



a {
font:500 14px/100% verdana;
letter-spacing: 2px;
font-style:italic;
text-decoration: none;
color:#ec1;
text-shadow: 1px 1px rgb(0, 0, 0);
}

a:hover {color:#fff;}

.p1 {
font:500 14px/100% verdana;
letter-spacing: 1px;
font-style:italic;
text-decoration: none;
color:#eee;
text-shadow: 1px 1px rgb(0, 0, 0);
}

li {   margin-left:-33px;
        margin-top:15px;
        margin-right:5px;
    border: 0px solid rgb(2, 2, 201);  
}  

ul {
        margin:0px;
    list-style-type: none;
}

#top1 {
    display: grid;
    grid-template-columns: repeat(5, 350px);
    grid-template-rows: repeat(2, 30px);
     width:97%;
    border:1px solid rgb(255, 100, 25); 
     border-radius: 15px;
     background-color: #031010;
     background-color: #101919;
    margin:5px;
    padding:10px;
    }

#top1logo {
    display: grid;
    xgrid-template-columns: repeat(5, 350px);
    grid-template-rows: repeat(2, 30px);
     width:97%;
    border:0px solid rgb(255, 250, 25); 
        border-radius: 15px;
    margin:5px;
    margin-top:-90px;
    padding:10px;
    }

#top2 {
    display: grid;
    grid-template-columns: repeat(5, 350px);
    grid-template-rows: repeat(2, 30px);
  display: flex;
     width:97%;
    border:0px solid rgb(255, 250, 25); 
        border-radius: 15px;
    margin:5px;
    margin-top:0px;
    padding:10px;
  text-align: left;
    float: left;
}
}

@media (min-width: 500px)
{
.c1 {
    display: grid;
    grid-template-columns: repeat(7, 250px);
    float: left;
}

}


@media (min-width: 800px)
{ 
.c1 {
    display: grid;
    grid-template-columns: repeat(7, 200px);
    float: left;
}

}
@media (min-width: 1200px)
{ 


.c1 {
    display: grid;
    grid-template-columns: repeat(7, 160px);
    float: left;
}

}


@media (min-width: 1500px)
{ 
.c1 {
    display: grid;
    grid-template-columns: repeat(7, 200px);
    float: left;
}

}


@media (min-width: 1800px)
{ 
.c1 {
    display: grid;
    grid-template-columns: repeat(7, 260px);
    float: left;
}
}


@media (min-width: 2000px)
{ 
.c1 {
    display: grid;
    grid-template-columns: repeat(7, 280px);
    float: left;
}

}


@media (min-width: 2500px)
{ 
.c1 {
    display: grid;
    grid-template-columns: repeat(7, 370px);
    float: left;
}
}


@media (min-width:3600px)
{ 
.c1 {
    display: grid;
    grid-template-columns: repeat(7, 530px);
    float: left;
}

}