body {
    font-family: "Work Sans", sans-serif;
    margin: 0;
    overflow-x: hidden;
}

.container {
    display: none;
}
#menu {
    display: none;
}

.layernavbar {
    position: fixed;
    z-index: 100;
}

#NavBar {
     z-index: 100;
     position: fixed;
     display: flex;
     top: 0;
     width: 100%;
     height: 70px;
     margin: 0 30px 0 0;
     padding: 16px 0 16px 30px;
     background-color: #222222;

     box-shadow: 0 5px 20px #222222;
 }

.navitem {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-left: 5%;
    margin-top: 0;
    cursor: pointer;
}

li > a {
    color: #f04e23;
    text-decoration: none;
    transition: background-color 0.5s;
    padding: 10px;
    cursor: pointer;
    font-size: 12pt;
    font-family: "Work Sans Semi-Bold", sans-serif;
}

li > a:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.5s;
}


#divfundo {
    z-index: -1;
    margin-top: 50px;
    position: fixed;
    max-width: 100%;
}


#social {
    position: fixed;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    top: 60%;
    margin-left: 40px;
    width: 70px;
    height: 200px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 10px;
}
#trip {
    height: 55px;
    width: 55px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    transition: box-shadow 0.2s;
}

#face {
    height: 55px;
    width: 55px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    transition: box-shadow 0.2s;
}
#insta {
    height: 55px;
    width: 55px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    transition: box-shadow 0.2s;
}

#face:hover {
    box-shadow: 0 0 20px white;
    transition: box-shadow 0.2s;
}

#insta:hover {
    box-shadow: 0 0 20px white;
    transition: box-shadow 0.2s;
}
#trip:hover {
    box-shadow: 0 0 20px white;
    transition: box-shadow 0.2s;
}
#inicio {
    display: grid;
    grid-template-rows: repeat(16,60px);
    grid-template-columns: repeat(3,1fr);
}

#inicio>img {
    grid-area: 8/2/span 1/span 1;
}

#inicio>p {
    color: #f04e23;
    font-family: "Work Sans", sans-serif;
    font-size: 17pt;
    grid-area: 6/2/span 1/span 1;
    text-align: center;
}

#sobrenos {
    position: relative;
    z-index: 4;
    padding-top: 100px;
    height: 1050px;
    background-color: #222222;
    color: #f04e23;
    text-align: center;
    box-shadow: 0px 0px 20px #222222;
}

#titulosobrenos {
    color: #f04e23;
    font-family: "Work Sans SemiBold", sans-serif;
    font-size: 30pt;
}

#textosobrenos {
    color: white;
    font-family: "Work Sans Light", sans-serif;
    font-size: 11pt;
}





#jogos {
    position: relative;
    z-index: 3;
    background-color: #F04E23;
    height: 2300px;
    display: grid;
    grid-template-rows: repeat(45,60px);
    grid-template-columns: repeat(7,1fr);
    box-shadow: 0px 0px 20px #222222;

}

#jogos>#titulojogos {
    color: white;
    font-family: "Work Sans SemiBold", sans-serif;
    font-size: 30pt;
    text-align: left;
    grid-area: 2/2/span 2/span 3;
    margin-left: 80px;
}

#img1 {
    grid-area: 5/2/span 3/span 3;
    margin-left: 80px;
}

#img2 {
    grid-area: 12/2/span 3/span 3;
    margin-left: 80px;
}

#img3 {
    grid-area: 18/2/span 3/span 3;
    margin-left: 80px;
}

#img4 {
    grid-area: 25/2/span 3/span 3;
    margin-left: 80px;
}
#img5 {
    grid-area: 33/2/span 3/span 3;
    margin-left: 80px;
}

#titulo1 {
    color: white;
    font-family: "Work Sans Medium", sans-serif;
    grid-area: 5/4/span 1/span 3;

}

#titulo2 {
    color: white;
    font-family: "Work Sans Medium", sans-serif;
    grid-area: 12/4/span 2/span 2;
}

#titulo3 {
    color: white;
    font-family: "Work Sans Medium", sans-serif;
    grid-area: 18/4/span 2/span 2;
}
#titulo4 {
    color: white;
    font-family: "Work Sans Medium", sans-serif;
    grid-area: 25/4/span 2/span 3;
}
#titulo5 {
    color: white;
    font-family: "Work Sans Medium", sans-serif;
    grid-area: 33/4/span 2/span 3;
}

#jogos>p {
    color: white;
    font-size: 11pt;
    line-height: 18px;
}

#texto1 {
    font-family: "Work Sans Light", sans-serif;
    grid-area: 6/4/span 5/span 3;

}
#texto2 {
    font-family: "Work Sans Light", sans-serif;
    grid-area: 13/4/span 5/span 3;

}

#texto3 {
     font-family: "Work Sans Light", sans-serif;
     grid-area: 19/4/span 5/span 3;

 }
#texto4 {
    font-family: "Work Sans Light", sans-serif;
    grid-area: 26/4/span 5/span 3;

}

#texto5 {
    font-family: "Work Sans Light", sans-serif;
    grid-area: 34/4/span 5/span 3;

}

#FAQ {
    position: relative;
    z-index: 2;
    background-color: #C44536;
    height: 900px;
    display: grid;
    grid-template-rows: repeat(16,60px);
    grid-template-columns: repeat(7,1fr);
    box-shadow: 0px 0px 20px #222222;
}

#titulofaq {
    color: white;
    font-family: "Work Sans SemiBold", sans-serif;
    font-size: 30pt;
    text-align: center;
    grid-area: 2/3/span 2/span 3;
}


/* Styles for page */
.container1{ width: 70%; margin-left:100px;
    margin-top: 30px;
    grid-area: 4/2/span 20/span 20;
}



section {
    margin-bottom: 90px;
}




span{ letter-spacing:0px;
color: white}



.toggle {
    grid-area: 1/1/span 20/span 20;
     border-bottom: 1px solid white;
 }
.toggle-title {
    position: relative;
    display: block;
    margin-bottom: 6px;
}

h3 {
    font-size: 20px;
    margin: 0px;
    line-height: 1;
    cursor: pointer;
    font-weight:200;

}

.toggle-inner {
    color: white;
    padding: 7px 25px 10px 25px;
    display: none;
    margin: -7px 0 6px;
}



.title-name {
    display: block;
    padding: 25px 25px 14px;
}

h3>i {
    position: absolute;
    background: url('http://arielbeninca.com/Storage/plus_minus.png') 0px -24px no-repeat;
    width: 24px;
    height: 24px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin: 20px;
    right: 0;
}
.active i {
     background: url('http://arielbeninca.com/Storage/plus_minus.png') 0px 0px no-repeat;
 }

#mapa {
    position: relative;
    z-index: 1;
    background-color: #780116;
    height: 1000px;
    display: grid;
    grid-template-rows: repeat(16,60px);
    grid-template-columns: repeat(7,1fr);

}

.mapouter {
    margin-left: 30px;
    grid-area: 1/2/span 20/span 20;
    position: relative;
    text-align: right;
    height: 462px;
    width: 1056px;
}
.gmap_canvas {
    overflow: hidden;
    background: none !important;
    height: 462px;
    width: 1056px;
}

#contactos {
    grid-area: 10/4/span 2/span 1;
    text-align: center;
    color: white;
}

#ventos {
    grid-area: 15/4/span 2/span 1;
    text-align: center;


}
#ventos>a {
    color: #F04E23;
    text-decoration: none;
    border: 1px solid #f04e23;
    border-radius: 6px;
    padding: 10px;
}



#escolha {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 350px;
    background-color: #F9DBBD;
    box-shadow: 0px 0px 20px #222222;
}
#butoes {
    display: grid;
    grid-template-rows: repeat(5,60px);
    grid-template-columns: repeat(7,1fr);
}
#aveiro {
    grid-area: 2/2/span 3/span 3;
    margin-left: 100px;
}

#viseu {
    grid-area: 2/4/span 3/span 3;
    margin-left: 100px;
}

#butoes>a>img {
    background-color: rgba(0,0,0,0);
    width: 70%;
    box-shadow: 0px 0px 20px #222222;
    border-radius: 10px;
    transition: box-shadow 0.5s;
}

#butoes>a>img:hover {

    box-shadow: 0px 0px 40px #222222;
    transition: box-shadow 0.5s;

}

#cima {
    position: relative;
    z-index: 5;
    margin-top: 100px;
    width: 100%;
    height: 200px;
    top: 0;
    background-color: #222222;
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 20px #222222;
}

#cima>p {
    margin-top: 60px;
    font-family: "Work Sans Medium", sans-serif;
    font-size: 20pt;
    color: white;
}

#contactos2 {
    position: relative;
    z-index: 3;
    background-color: #780116;
    margin-top: -16px;
    height: 200px;
    color: white;
    display: flex;
    justify-content: center;
}
#contactos2>p {
    margin-top: 60px;
}

.linha {
    border-bottom: 1.5px solid white;
}

#linha1 {
    grid-area: 10/2/span 1/span 5;
}
#linha2 {
    grid-area: 16/2/span 1/span 5;
}
#linha3 {
    grid-area: 23/2/span 1/span 5;
}
#linha4 {
    grid-area: 31/2/span 1/span 5;
}

.sitio {
    font-size: 10pt;
    font-weight: normal;
}

#cima2 {
    position: relative;
    z-index: 5;
    margin-top: 100px;
    width: 100%;
    height: 200px;
    top: 0;
    background-color: #222222;
    box-shadow: 0px 0px 20px #222222;
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(7,1fr);

}
#cima2>p {
    font-family: "Work Sans Medium", sans-serif;
    font-size: 20pt;
    color: white;
    grid-area: 2/2/span 2/span 3;

}

#covid {
    position: relative;
    z-index: 4;
    width: 100%;
    height: 800px;
    background-color:#C44536;
    box-shadow: 0px 0px 20px #222222;
    display: grid;
    grid-template-rows: repeat(15,1fr);
    grid-template-columns: repeat(7,1fr);
    color: #222222;
}
#back {
    width: 80%;
    height: 580px;
    grid-area: 2/1/span 9/span 7;
    background-color: white;
    margin-left: 10%;
    border-radius: 30px;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.3);

}

#covid1T {
    grid-area: 3/2/span 2/span 2;
}
#covid1 {
    grid-area: 4/2/span 2/span 2;
}

#covid2T {
    grid-area: 3/5/span 2/span 2;
}
#covid2 {
    grid-area: 4/5/span 2/span 2;
}
#covid3T {
    grid-area: 6/2/span 2/span 2;
}
#covid3 {
    grid-area: 7/2/span 2/span 2;
}
#covid4T {
    grid-area: 6/5/span 2/span 2;
}
#covid4 {
    grid-area: 7/5/span 2/span 2;
}
#covid5T {
    grid-area: 9/2/span 2/span 2;
}
#covid5 {
    grid-area: 10/2/span 2/span 2;
    margin-top:30px;
}

#warning {
    background-color: white;
    width:100%;
    height:50px;
    position: fixed;
    bottom:0;
    z-index: 5;
    visibility: hidden;
    box-shadow: 0px 0px 20px #222222;
    display: flex;


}

#warning p {
    padding-left: 20px;
}

#warning button {
    background-color: rgb(200,200,200);
    height: 35px;
    border-radius: 15px;
    margin-top: 8px;
    margin-left: 10px;
    border: 0px;
    cursor: pointer;
    transition: box-shadow 0.5s;

}
#warning button:hover {
    box-shadow: 0px 0px 10px #222222;
    transition: box-shadow 0.5s;

}
#warning a{
    text-decoration: none;
}

#carimbo {
    position: absolute;
    top: 60%;
    right: 10%;
}

#bg {
    background-color: #222222;
    height: 700px;
    color: white;
}
#bg p {
    position: absolute;
    top:40%;
    left:20%;
    width: 60%;
    font-size: 15pt;
}
#viseu2 {
    margin-left: 10px;
}