.main-header{
    background-color:#515151;
    opacity: 0.8;
    height: 20%;
}
body{
    margin: 0%;
    background-image: url("Img/Room1.jpg");  
    background-color: #cccccc;  
    background-repeat: no-repeat;
    background-attachment: fixed;
/*     background-size: 100% auto; */
}
h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: 8%;
opacity: 1;
color:white;
margin-top: 0%;
padding: 20px 0;

}

h3{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-left: 8%;
    font-size: 22px;
    margin: 0;

}

.c-header{
display: inline-block;
margin-left: 8%;
white-space: nowrap;
}

nav{
font-size: 18px;
float:right;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
nav :hover{
    color: lightgray;
    
}
.container{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
font-size: 2.5vw;
color: white;
width: 85%;
height: 450px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 2fr);
column-gap: 5%;
row-gap: 101px;

margin-left: auto;
margin-right: auto;
margin-top: 5%;
padding: 10px;
}



.linkField{
    width: 15%;
    height: 175px;
    position:absolute;
    
    
}

.el--1{
    grid-column: 1/span 4;
    grid-row: 1;
    background-color: #515151;
    opacity: 85%;
    font-size: 20px;
    text-align: left;
    
    padding: 15px 20px;
    
    
}

.el--2{
    grid-column: 1;
    grid-row: 2;
    background-color: #515151;
    opacity: 85%;
    white-space: nowrap;
    column-span: 1/-1;;
    /* padding-left: 20%;
    padding-right: 20%; */
}

.el--3{
    grid-column: 2;
    grid-row: 2;
    background-color: #515151;
    opacity: 85%;
    white-space: nowrap;}
.el--4{
    grid-column: 3;
    grid-row: 2;
    background-color: #515151;
    opacity: 85%;
    white-space: nowrap;}
.el--5{
    grid-column: 4;
    grid-row: 2;
    background-color: #515151;
    opacity: 85%;
    white-space: nowrap;}


    @media only screen and (max-width: 600px) {
        
        
        .el--1{
            
        margin-bottom:20px;
        
            
        }
        
        .el--2{
            
            margin-bottom:20px;
            padding: 10%;
        }
        .el--3{
            padding: 10%;
            margin-bottom:20px;
        }
        .el--4{
            padding: 10%;
            margin-bottom:20px;
            }
        .el--5{
            padding: 10%;
            margin-bottom:20px;
            }

        .leer{

            grid-row: 2;
            grid-column: 2;
            column-span: 4;
            background-color: #515151;
            opacity: 85%;
            height: 100%;
            width: 100%;

        }


            .container{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                text-align: left;
                font-size: 30px;
                color: white;
                display:block;
                align-items: center;
                
                
                margin-left: auto;
                margin-right: auto;
                margin-top: 5%;
                
                padding: 10%;
                }

                .linkField{
                    width: 40%;
                    height: 13%;
                    position: absolute;
                }
    }