@import url('https://fonts.googleapis.com/css2?family=Passion+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@400&display=swap');

@font-face {
font-family: 'Noteworthy Light';
font-style: normal;
font-weight: normal;
src: local('Noteworthy Light'), url('Noteworthy-Lt.woff') format('woff'),url('Noteworthy-Light.ttf') format('truetype');
}

@font-face {
font-family: 'Noteworthy Bold';
font-style: normal;
font-weight: normal;
src: local('Noteworthy Bold'), url('Noteworthy-Bold.woff') format('woff'),url('Noteworthy-Bold.ttf') format('truetype');
}
 
 

html, body {height:100%; margin:2%; padding:0;}

body {
font-family: 'Rokkitt',serif;
background-color:#fff;
text-align:justify;
margin-bottom:100px;
}

p {font-size: calc(2.5vw + .5rem); 
margin:.8rem;
}

p::first-letter {
    font-size: calc(2vw + .5rem);
}

hr {border:1px 0 0 0 solid black;}

input,textarea {max-width:95%;}

a {
text-decoration:none;
color:#000;
background:rgb(241,192,20);
background: linear-gradient(90deg, #fff 0%, rgba(241,192,20,.5) 25%, rgba(241,192,20,.5) 75%, #fff 100%);
background-position: 0 100%;
background-size: 100% 3px;
background-repeat: repeat-x;
}



.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0;
padding: 0 0 3% 0;
font-size:1em;
}



.grid, .news {
display: flex;
flex-direction: column;
align-items: center;
height: auto;
position: relative;
margin:1vh auto auto auto;
font-size: calc(1.2vmax + .5rem);
}


.grid {
flex-basis:25vmax;
flex-grow:1;
min-height:23vh;
padding:0 10px 0 10px;
}

.img-grid {
width:26vw;
height:23vw;
display: flex;
justify-content: center;
position:relative;
flex-direction: row;
}

.img-grid img, .photo {
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
box-shadow: 10px 10px 5px #ccc;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:4px solid #eee;
}

.img-grid img, .photo, .news, input, textarea {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.img-grid img {
transition: .5s ease;}


.facilities {
width:42vw;
height:auto;
display: flex;
justify-content: center;
position:relative;
flex-direction: row;
font-family: 'Noteworthy Light',sans;
text-align:left;
margin-top:1rem;
}

.facilities p {
line-height:4vmax;
font-size:1.75vmax;
font-weight:500;
}

.facilities p::first-letter {font-size:unset;}

.stars {width: 13vmin;}


.material-icons {color:#4aa5f9;}

span.material-icons-outlined {font-size:1.75vmax;}

.button{
height:4vmax;
padding:0;
padding-left:5px;
float:right;
top:0;
transition: .5s ease;
}
    
.photo {
width:auto;
max-height:15vmax;
}


.left {float:left;margin-right:18px;margin-bottom:0;margin-top:.6vw;
    }
.right {float:right;margin-left:18px;margin-bottom:0; margin-top:1.2vw;}
.large {max-height:22vmax;}
.small {max-height:10vmax;}
.tiny {max-height:5vmax; margin-top:.6vw;}

.news {
height:auto;
min-height:20vh;
border-radius:10px;
padding:0;
width:100%;
background-color: #fff;1
margin:2vh 0 2vh 0;
}

.newstext{
text-align: left;
padding:1vmax;
}

.newsimage {
//width:50%;
float:left;
max-height:16vmax;
border-radius:10px;
box-shadow:none;
border:1px solid #eee;
}

input, textarea {border:4px solid #eee;
    border-radius:10px;
    padding:12px;
}
input:focus, textarea:focus {
    z-index:10;
}

input[type=submit], input[type=file]::file-selector-button {
  border: 2px solid #eee;
  padding:12px;
  border-radius:10px;
  background-color: #f2c615;
  transition: 1s;
}

input[type=submit], input[type=file]::file-selector-button:hover {
  background-color: #f2c615;
  border: 2px solid #eee;
}


.ti {
width:100%;
margin-top:5vmax;
}


h1{
font-family: 'Noteworthy Bold',sans;
font-size:5.5vw;
padding:0;
color:#000;
text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
}


ti.h1 {display: inline-block;}

h2 {
font-size:1.7rem;
font-weight:500;
color: #3885c9; /*:#4aa5f9 */
text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}


.img-grid h2 {
position: absolute;
bottom: .5vh;
right: 2vw;
font-family:'Passion One', sans;
text-transform:uppercase;
color:rgb(201, 227, 252);
text-shadow: 2px 2px 5px rgb(0, 0, 0);
font-size:2.8vmax;
transition: .5s ease;
padding:0;margin:0;
}

.news h2 {
padding:0;margin:0;
position:relative;
}

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
}

.contact{
  display: grid;
}


/* --Timeline --------------------------------------------- */

.vtl {
  position: relative;
  padding: 10px 10px 10px 50px;
}

.vtl, .vtl * { box-sizing: border-box; }

.vtl::before {
  content: "";
  width: 5px;
  background-color: #de421a;
  position: absolute;
  top: 0; bottom: 0; left: 15px;
}

div.event {
  padding: 10px;
  background-color: #eff3ff;
  position: relative;
  text-align:left;
  border-radius: 6px;
  margin-bottom: 10px;
  width:100%;
}

p.date {
  font-size: 1.5em;
  font-weight: 700;
  color: #ff6a00;
  display:inline;
}
p.date::first-letter {font-size:unset;}

p.txt {
  display:inline;
  font-size: 1.2em;
  margin: 4px 0 0 0;
  color: #222;
}
p.txt::first-letter {font-size:unset;}

div.event::before {
  content: "";
  border: 10px solid transparent;
  border-right-color: #ffebeb;
  border-left: 0;
  position: absolute;
  top: 20%; left: -10px;
}

div.event::after {
  content: "";
  background: #fff;
  border: 4px solid #DE421A;
  width: 16px; height: 16px;
  border-radius: 50%;
  position: absolute;
  top: 20%; left: -44px;
}

/* -Desktop --------------------------------------------- */
@media(hover: hover) and (pointer: fine) {
 
     p {font-size: calc(1.2vw + .5rem);}

 
    a:hover {color: #f2c615;}

    a:hover img.button {transform: translate(0%, -10%);}

    .img-grid:hover h2 {
        font-size:5vmax;
        color:#f2c615;
    }
}