* {
    box-sizing: border-box;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}
  
html {
    background-color: white;
    color: #696969;
    font-family: "Open Sans", sans-serif;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
}

body {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-areas: 
    "header"
    "main"
    "footer";
    grid-template-columns: 1fr;
    position: relative;
    min-height: 100vh;
}

.desktop-header {
    display: none;
}

.mobile-menu {
    width: auto;
    position: fixed;
    padding: 0;
    height: 50px;
    /* disable text selection by clicking */
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
    "logo . . menu"
    "dropdownitem dropdownitem dropdownitem dropdownitem";
    background-color: #ea4c15;
    align-items: center;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-bottom: 3px solid black;
    z-index: 101;
}

.logo {
    grid-area: logo;
    height: 50px;
}
  
.dropdown-link{
    grid-area: menu;
    display: block;
    height: 30px;
    padding: 0 20px;
    color: white;
    font-size: 1.2rem;
    font-weight: bolder;
    cursor: pointer;
    background: black;
    border: 1px solid white;
    border-radius: 5px;
    margin: 10px;
    
}
  
.mobile-dropdown {
    display: none;
    grid-area: dropdownitem;
    list-style-type: none;
    background: black;
    padding: 0;
    width: 100%;
    position: relative;
    z-index: 100;
    margin: 0;
    text-align: center;
}
  
.mobile-dropdown li{
    padding: 0;
    height: auto;
    border-bottom: 1px solid #EA4C15;
}
  
.mobile-dropdown li a{
    margin: 0;
    color: white;
    display: block;
    padding: 8px;
    font-size: 1.4rem;
    text-decoration: none;
}
  
.mobile-dropdown li a:hover{
    text-decoration: none;
    background: #cc1d3a;
}

#school {
    display: none;
}

/*MAIN SECTION*/
main {
    position: relative;
    top: 50px;
    grid-area: main;
    width: 100;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "motto"
    "galeria"
    "motto2"
    "facebook"
    "youtube"
}

.motto {
    grid-area: motto;
    background-color: black;
    color: white;
    width: 100%;
    margin: 0;    
    text-align: center;    
}

.motto h1{
    margin: 0 auto 0 auto;
    padding: 10px 0;
    font-size: 1.5rem;
    font-weight: 900;
    width: 90%;
    color: white;
    -webkit-text-stroke-width: 0.5px; 
    -webkit-text-stroke-color: #e30713; 
}

.galeria {
    grid-area: galeria;
    padding: 20px 10px;
}

.galeria h1 {
    font-size: 1.2rem;
    padding: 20px 10px;
    margin: 0;
    color: #EA4C15;
    text-align: left;
}

/* #### - gallery thumbs - #### */
.gallery { 
    margin:0; 
    padding:0; 
    list-style:none; 
    display:table; 
    overflow:hidden; 
}

.gallery li { 
    position:relative; 
    float: left; 
    margin-right:1em; 
    margin-bottom:1em; 
     
}
.gallery li a, .gallery li a img { 
    display:block; 
    text-decoration:none; 
}

.gallery li a img {
    border-radius: 25px;
    border: 1px solid #EA4C15;
}

.gallery li a span { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    text-align:center; 
    cursor:pointer; 
    color:transparent; 
    filter:alpha(opacity=0); 
    opacity:0; 
    background:#fff; 
}

.gallery li a span:before { 
    content:""; 
    display:inline-block; 
    height:100%; 
    vertical-align:middle; 
    margin-top:-0.25em; 
}

.gallery li a:hover span { 
    filter:alpha(opacity=70); 
    opacity:.7; 
}

.gallery li a:hover span b { 
    filter:alpha(opacity=99); 
    opacity:1; 
}

.gallery li a span, .gallery li a span b, .gallery li a:hover span, .gallery li a:hover span b { 
    -webkit-transition:opacity .35s ease-in-out; 
    transition:opacity .35s ease-in-out; 
}

/* #### - gallery thumbs magnifying glass - #### */
.gallery li a span b { 
    display:inline-block; 
    position:relative; 
    width:2.5em; 
    height:2.5em; 
    line-height:3em; 
    vertical-align:middle; 
    border:.25em solid #000; 
    border-radius:50%;
}

.gallery li a span b:before { 
    content:""; 
    position:absolute; 
    top:.80em; 
    left:.65em; 
    width:.30em; 
    height:.30em; 
    background:#000;
	box-shadow:.2em 0 0 #000, .35em 0 0 #000, .5em 0 0 #000, .5em 0 0 #000, .25em .2em 0 #000, .25em .3em 0 #000, .25em -.2em 0 #000, .25em -.3em 0 #000;
}
    
.gallery li a span b:after { 
    content:""; 
    position:absolute; 
    top:1.5em; 
    left:-.5em; 
    width:.5em; 
    height:1.5em; 
    background:#000; 
    border-radius:.2em;
    -webkit-transform:rotate(40deg); 
    -ms-transform:rotate(40deg); 
    transform:rotate(40deg);
}

/* #### - modal overlay plus contents - #### */
.gallery .overlay { 
    position:fixed; 
    overflow:hidden; 
    left:0; 
    top:0; 
    width:0; 
    height:0; 
    z-index:9999; 
    text-align:center; 
    color:#fff; 
    background:rgba(0,0,0,.75);
}

.gallery .overlay div a { 
    display:inline; 
    color:#fff; 
    text-decoration:none;
}

.gallery .overlay img { 
    max-width:100%; 
    max-height:100%; 
    position:absolute; 
    opacity:0; 
    float:none; 
    margin:0; 
    top:48%; 
    left:50%; 
    -webkit-transform:translate(-50%,-50%); 
    -ms-transform:translate(-50%,-50%); 
    transform:translate(-50%,-50%); 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    -webkit-transition:opacity .001s linear; 
    transition:opacity .001s linear;
}

.gallery .overlay:target { 
    width:auto; 
    height:auto; 
    bottom:0; 
    right:0; 
    padding:0.5em 0 5em; 
}

.gallery .overlay:target img { 
    opacity:1; 
}

/* #### - gallery controls - #### */
.gallery .close { 
    position:absolute; 
    z-index:1001; 
    font:bold 1.5em/1.3em Arial; 
    color:#fff; 
    background:#222; 
    top:1px; 
    left:50%; 
    margin-left:-0.625em; 
    width:1.45em; 
    height:1.45em; 
    border-radius:50%; 
    border:2px solid #fff; 
    box-shadow:0 0 0 1px rgb(102,102,102); 
    
}

.gallery .close:hover { 
    background:#666; 
}

.gallery .prev, .gallery .next { 
    color:transparent; 
    position:absolute; 
    z-index:1000; 
    display:inline-block; 
    top:0; 
    right:0; 
    width:50%; 
    height:100%; 
}

.gallery .prev { 
    left:0; 
}

.gallery .next:after, .gallery .prev:after { 
    content:"\203A"; 
    display:block; 
    position:relative; 
    top:43%; 
    right:0; 
    font-size:6em; 
    color:#222; 
    text-align:right; 
    opacity:.75;  
	text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff;
    -webkit-transform:translateY(-50%); 
    -ms-transform:translateY(-50%); 
    transform:translateY(-50%);
}

.gallery .prev:after { 
    content:"\2039"; 
    text-align:left; 
}

.gallery .next:hover:after, .gallery .prev:hover:after { 
    color:#666; 
}


@media ( min-width:48.75em ) { /* #### - make better use of space at 780px (780/16=48.75 - 16px being default browser font-size) - #### */
	
	.gallery .overlay img { 
        border:2px solid #fff; 
        border-radius:0.3125em; 
        position:relative; 
        top:auto; 
        left:auto; 
        -webkit-transform:none; 
        -ms-transform:none; 
        transform:none; 
    }

	.gallery .overlay:target { 
        padding-top:2.875em; 
    }

	.gallery .prev, .gallery .next { 
        display:block; 
        left:50%; 
        top:2.125em; 
        width:4em; 
        height:auto; 
        background:#222; 
        font:bold 0.875em/1.875em Arial; 
        color:#fff; 
        padding:0 0.5em; 
        border-radius:0.3125em; 
        border:2px solid #fff; 
        box-shadow:0 0 0 1px rgb(102,102,102); 
    }

	.gallery .prev { 
        margin-left:-5.625em; 
        -webkit-transform:scale(-1,1); 
        -ms-transform:scale(-1,1); 
        transform:scale(-1,1); 
    }

	.gallery .next { 
        margin-left:1.85em; 
    }

	.gallery .prev:hover, .gallery .next:hover { 
        background:#666; 
    }

	.gallery .next:after, .gallery .prev:after { 
        display:none; }

	.gallery .close { 
        top:1.175em; 
    }
}


.motto2 {
    grid-area: motto2;
    background-color: #EA4C15;
    color: white;
    margin: 0;
    padding: 0;
    width: 100%;
}

.motto2 h1 {
    font-size: 1rem;
    margin: 0;
    padding: 3% 0;
    text-align: center;
    font-style: italic;
}

.youtube {
    grid-area: youtube;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-areas: "YTimg YTh2";
    padding: 30px 10px;
}

.youtube a {
    grid-area: YTimg;
    align-self: center;
    text-align: center;
    color: red;
    font-size: 4rem;
}

.youtube h2 {
    grid-area: YTh2;
    font-size: 1rem;
    margin: 0;
    padding: 2% 2%;
    color: black;
    text-align: left;
    font-weight: normal;
}

.facebook {
    grid-area: facebook;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-areas: 
    "FBimg FBh2"
    "FBimg FBp";
    padding: 10px;
    border-bottom: 2px solid #EA4C15;
}

.facebook a {
    grid-area: FBimg;
    align-self: center;
    text-align: center;
    color: #4267B2;
    font-size: 4rem;
}

.facebook h2 {
    grid-area: FBh2;
    font-size: 1rem;
    margin: 0;
    padding: 2% 2%;
    color: black;
    text-align: left;
    font-weight: normal;
}


footer {
    grid-area: footer;
    background-color: black;
    width: 100%;
    position: relative;
    top: 50px;
}

footer nav {
    display: grid;
    width: 100%;
    grid-template-columns: 50% 50%;
    grid-template-areas: 
    "foo1 foo3"
    "foo2 foo5"
    "foo4 foo6";
    color: white;
    padding: 2%;
    gap: 10px;
}

.foo1 {
    grid-area: foo1;
}

.foo2 {
    grid-area: foo2;
}

.foo3 {
    grid-area: foo3;
}

.foo3 span {
    background-color: #EA4C15;
    border-radius: 5px; 
    padding: 3%;
}

.foo4 {
    grid-area: foo4;
}

.foo5 {
    grid-area: foo5;    
}

.foo6 {
    grid-area: foo6;   
}

footer a {
    text-decoration: none;
    color: white;
    margin: 0 20px;
    font-size: 1rem;
}

@media all and (min-width: 420px) and (max-width: 480px) {
    .galeria h1 {
        font-size: 1.4rem;
    }
        
    .motto2 h1 {
        font-size: 1.1rem;
    }
    .foo3, .foo5, .foo6 {
        text-align: right;
    }
}

@media all and (min-width: 481px) and (max-width: 768px) {

    .mobile-menu {
        grid-area: header;
        display: grid;
        grid-template-columns: 80px 1fr 1fr 120px;
        grid-template-areas: 
        "logo school school menu"
        ". . dropdownitem dropdownitem";
        background-color: #EA4C15;
        height: 50px;
        width: 100%;
        text-align: center;
    }    

   
    #school {
        grid-area: school;
        display: block;
        font-size: 1.1rem;
        margin: 0;
        padding: 0;
        color: white;
        align-self: center;
        text-align: center;
    }

    main {
        grid-area: main;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "motto motto"
        "galeria galeria"
        "motto2 motto2"
        "facebook youtube";
    }
    
    .facebook, .youtube {
        border: 3px solid #EA4C15;
        border-radius: 25px;
        margin: 5px;
        padding: 5px;
        height: auto;
        align-content: center;
    
    }

    .youtube a, .facebooka {
        font-size: 3rem;
    }
    .facebook h2, .youtube h2 {
        padding-left: 10px;
    }

    .foo3, .foo5, .foo6 {
        text-align: right;
    }

    footer a {
        font-size: 1.1rem;
    }
}

@media all and (min-width: 769px) {

    .mobile-header {
        display: none;
    }

    .desktop-header {
        grid-area: header;
        display: grid;
        grid-template-columns: repeat(5,1fr);
        grid-template-areas: 
        "logo2 school2 school2 school2 social"
        "menu menu menu menu menu";
        width: 100%;
        background-color: #ea4c15;
    }

    .desktop-header div {
        grid-area: social;
        text-align: right;
        padding: 10px;
    }

    .desktop-header div a {
        padding: 10px;
        font-size: 40px;       
        text-align: center;
    }
    #yt2 {
        color: white;        
        font-size: 35px;
        width: 50px;
        height: 40px;
        background-color: black;
        border-radius: 10px;
        margin: 0 auto 0 auto;
        padding:2px;
        justify-self: center;
        align-self: center;
    }

    #fb2 {
        color: white;
        font-size: 35px;
        margin: 0 auto 0 auto;
        width: 40px;
        height: 40px;
        background-color: black;
        border-radius: 10px;
        align-self: center;
        padding: 2px;
        justify-self: center;
    }

    .mainMenu2 {
        grid-area: menu;
        display: grid;
        grid-template-areas:
        "li1 li2 li3 li4 li5";
        background-color: #ea4c15;
        color: white;
        top: 50px;
        width: 100%;
        height: 40px;
        text-align: center;
        padding:0;
        margin: 0;
    }

    .logo2 {
        grid-area: logo2;
        height: 60px;
        align-self: flex-end;
    }

    #school2 {
        grid-area: school2;
        font-size: 1.4rem;
        margin: 0;
        padding: 0;
        color: white;
        align-self: center;
        text-align: center;
    }

    .mainMenu2 a {
        color: white;
        padding: 0;
        margin: 0;
        font-size: 1.3rem;
        border-right: 2px solid #EA4C15;
        background-color: black;
        align-self: center;
        border-bottom: none;
    }

    .mainMenu2 a:nth-child(5){
        border: none;
    }

    .nav1 {
        grid-area: li1;
    }

    .nav2 {
        grid-area: li2;
    }

    .nav3 {
        grid-area: li3;
    }

    .nav4 {
        grid-area: li4;
    }

    .nav5 {
        grid-area: li5;
    }

    .motto {
        display: none;
    }

    .motto2 h1 {
        font-size: 1.2rem;
        padding: 0;
    }
    
    .motto2 h1 {
        padding: 1%;
    }

    main {
        grid-area: main;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "motto motto"
        "galeria galeria"
        "motto2 motto2"
        "facebook youtube";
    }
    
    .facebook, .youtube {
        border: 3px solid #EA4C15;
        border-radius: 25px;
        margin: 30px;
        padding: 10px;
        height: auto;
        align-content: center;
    
    }

    footer nav {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: 
        "foo1 foo3 foo5"
        "foo2 foo4 foo6";
        gap: 10px;
        text-align: center;
    }

    footer a {
        font-size: 1.3rem;
    }

    .foo3 span {
        padding: 2%;
    }
}