@charset "utf-8";
/* CSS Document */

/*reset*/
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox, button{-webkit-appearance:none; border-radius:0;}

header, nav, article, aside, section, footer{display:block; overflow:hidden;}
header, section, footer{width:100%; height:auto; position:relative;}

/*template*/
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; font-family:'Franklin Gothic Book', sans-serif; font-size:1.8rem; line-height:1.8; color:#18484C; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

/*text*/
h1, h2, h3, h4, h5, h6{width:100%; height:auto; line-height:1.2; font-weight:normal; font-family:'Franklin Gothic Medium', sans-serif; color:#18484C;}
h1{font-size:3.0rem; margin-bottom:32px;}
h2{font-size:2.8rem; margin-bottom:32px;}
h3{font-size:2.6rem; margin-bottom:8px;}
h1.nomargin, h2.nomargin, h3.nomargin{margin:0px;}
p{margin:0px 0px 32px 0px;}
p.grey{color:#78B0B4;}
a, a *{color:#F36664; text-decoration:none;}
small{font-size:1.2rem;}
article ul,
article ol{list-style:disc outside; margin:0px 0px 30px 20px;}
article p:last-of-type{margin:0px;}

/*floats*/
.left{float:left;}
.right{float:right;}

/*reset apple*/
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

/*forms*/
form.form-grid{display:grid; grid-template-columns:200px auto; gap:16px; margin-top:32px;}
form.form-grid .wide{grid-column-end:span 2;}
form.form-grid h2{margin-top:35px; margin-bottom:0px; font-size:2.4rem;}
form.form-grid h3{margin-top:35px; margin-bottom:0px; font-size:2.0rem;}
form.form-grid div{padding:8px 0px;}
form.form-grid div.row{border-bottom:1px dotted #eae9e9;}
form.form-grid div.noborder{border-bottom:none !important;}
form.form-grid div.label{color:#2a2620;}
form.form-grid div label{margin-right:24px;}
form.form-grid div.row label.red{color:#e2001a;}
form.form-grid div span{display:block; height:32px; line-height:32px; color:#a3a3a3; font-size:1.2rem;}
form.form-grid div input[type="radio"]{margin-right:12px;}
form.form-grid div input[type="checkbox"]{margin-right:24px;}
form.form-grid div input[type="datetime-local" i],
form.form-grid div input[type="time" i],
form.form-grid div input[type="date" i]{color:#2a2620;}
form.form-grid div input[type="text"],
form.form-grid div input[type="number"],
form.form-grid div input[type="date"],
form.form-grid div input[type="time"],
form.form-grid div input[type="datetime-local"]{width:100%; height:24px; line-height:24px; padding:16px; border-radius:8px; border:1px solid #eae9e9; color:#2a2620; background:#ffffff;}
form.form-grid div select{width:100%; height:24px; line-height:24px; font-size:1.4rem; padding:16px; border-radius:8px; color:#2a2620; background:#ffffff; border:1px solid #eae9e9; font-family:'Ubuntu', sans-serif; color:#555555;}
form.form-grid div select{height:unset; line-height:unset; padding:8px 16px;}
form.form-grid div select option{color:#555555;}
form.form-grid div input[type="text"].red,
form.form-grid div input[type="number"].red,
form.form-grid div input[type="date"].red,
form.form-grid div input[type="time"].red,
form.form-grid div select.red,
form.form-grid div input[type="datetime-local"].red{border:1px solid #e2001a;}
form.form-grid div input[type="text"]:focus,
form.form-grid div input[type="number"]:focus,
form.form-grid div input[type="date"]:focus,
form.form-grid div input[type="time"]:focus,
form.form-grid div input[type="datetime-local"]:focus{border:1px solid #2a2620;}
form.form-grid div textarea{width:100%; height:300px; line-height:24px; padding:16px; border-radius:8px; background:#ffffff; color:#2a2620; border:1px solid #eae9e9} 
form.form-grid div textarea:focus{border:1px solid #303030;}
form.form-grid div.submit{display:grid; grid-template-columns:1fr 1fr;}
form.form-grid div.submit .button-left input[type=button],
form.form-grid div.submit .button-left input[type=submit]{border:0px; font-family:'Franklin Gothic Book', sans-serif; color:#555555; background-color:#eae9e9; font-size:1.8rem; padding:15px 25px; border-radius:5px; text-decoration:none; float:left; cursor:pointer;}
form.form-grid div.submit .button-right input[type=button],
form.form-grid div.submit .button-right input[type=submit]{border:0px; font-family:'Franklin Gothic Book', sans-serif; color:#ffffff; background-color:#78b0b4; font-size:1.8rem; padding:15px 25px; border-radius:5px; text-decoration:none; float:right; cursor:pointer;}
form.form-grid div.submit .button-right input[type=submit].grey{color:#f1f1f1; background-color:#444444;}

/*main-container*/
main{width:100%; max-width:1920px; min-height:100vh; margin:0px auto;}
.container{max-width:1440px; margin:0px auto; padding:0px 24px; position:relative;}
.menu{display:none;}

/*generals*/
section{padding:48px 0;}
.grid{display:grid; padding:0 80px;}
.padding{padding:80px;}
.margin{margin:32px 0;}
.bg-white{background:#ffffff;}
.bg-grey{background:#F8F6F2;}
.bg-green{background:#18484C;}
.button{width:100%; display:inline-block; padding:16px; text-align:center; font-size:2.0rem;text-decoration:none !important; color:#ffffff;}  
.button:hover{color:#18484C;}  
.button.pending{background:#918c8a;}
.button.pending:hover{background:#aeaaa8}
.button.open{background:#78b0b4;}
.button.open:hover{background:#9ec6c9}
.button.closed,
.button.full{background:#F36664;}
.button.full:hover{background:#F8F6F2; color:#F36664;}
.button.closed:hover{background:#F8F6F2; color:#F36664;}
.date{color:#F36664;}

/*header*/
header{height:100px;}
header .grid{display:grid; grid-template-columns:1fr 3fr; grid-gap:32px; height:100px;}
header .grid .logo{width:200px; height:80px; margin: auto 0;}
header .grid .logo img{width:100%; height:100%;object-fit:contain;}
header .grid nav ul{display:flex; justify-content:flex-end;}
header .grid nav ul li{font-size:1.8rem;line-height:100px; margin-right:32px; font-weight:bold;}
header .grid nav ul li a{color:#18484C;}
header .grid nav ul li a:hover,
header .grid nav ul li a.on{color:#F36664;}
header .grid .menu{display:none;}

section.slide{position:relative; bottom:0; left:0; padding-top:0px;}
section.slide .image{height:800px;}
section.slide .alinea{width:500px; clip-path:polygon(calc(100% - 80px) 0, 100% calc(0% + 80px), 100% 100%, 0 100%, 0 0); position:absolute; bottom:53px; left:0; border-bottom:2px solid rgba(168,168,168,.4);}
section.slide .alinea .shadetriangle{position:absolute; top:0; right:0px; height:80px; width:80px; border-left: 2px solid rgba(168,168,168,.4);  border-bottom: 2px solid rgba(168,168,168,.4);} 
section.slide .alinea .shadetriangle img{height:100%; width:100%; object-fit:cover;}

section.events .grid{grid-template-columns:1fr 1fr 1fr; grid-gap:32px;}
section.events .grid h2{grid-area:1/1/1/span 3; margin-bottom:0px;}
section.events .grid .event{width:100%; background:#ffffff; box-shadow:0px 3px 6px rgba(168,168,168,.4);}
section.events .grid .event .image{width:100%;height:250px; margin-bottom:32px;}
section.events .grid .event .image img{width:100%; height:100%;object-fit:cover;}
section.events .grid .event .alinea{padding:16px; min-height:240px;}
section.events .grid .event .alinea p{min-height:65px;}

section.detail .grid{grid-template-columns:1fr 1fr 1fr; grid-gap:32px;}
section.detail .grid article{grid-column-end:span 2;}
section.detail .grid .side .sidebar{display:block; position:relative; background:#ffffff; box-shadow:0px 3px 6px rgba(168,168,168,.4);}
section.detail .grid .side .sidebar .properties{padding:35px;}
section.detail .grid .side .sidebar .properties .property{display:grid; grid-template-columns:1fr 4fr; margin-bottom:35px;}
section.detail .grid .side .sidebar .properties .property:last-of-type{margin-bottom:0px;}
section.detail .grid .side .sidebar .properties .property i{font-size:17px; font-size:1.7rem; color:#f39c11;}
section.detail .grid .side .sidebar .properties .property span{color:#18484C;}
section.detail .grid .side .sidebar .properties .property strong{width:100%; font-size: 12px; font-weight:normal; display:block; color:#787371;}
section.detail .grid .side .sidebar .sign-up{width:100%; padding:15px; display:block; text-align:center; font-weight:bold; box-sizing:border-box; color:#ffffff; background:#f39c11;}
section.detail .grid .side .sidebar.closed .properties .property i{color:#F36664;}
section.detail .grid .side .sidebar.full .properties .property i{color:#F36664;}
section.detail .grid .side .sidebar.open .properties .property i{color:#78b0b4;}
section.detail .grid .side .sidebar.pending .properties .property i{color:#918c8a;}    
section.detail .grid .side .sidebar.closed .sign-up{background:#F36664; pointer-events:none; text-decoration:none;}
section.detail .grid .side .sidebar.full .sign-up{background:#F36664;}
section.detail .grid .side .sidebar.open .sign-up{background:#78b0b4;}
section.detail .grid .side .sidebar.pending .sign-up{background:#918c8a; pointer-events:none; text-decoration:none;}    
   
section.signup .container{width:80%; margin:0px auto;}
section.signup .form-progress-bar{width:100%; height:32px; background:#F8F6F2; border-radius:8px; margin-bottom:35px;}
section.signup .form-progress-bar .progress{height:32px; background:#78b0b4; color:#ffffff; padding:0px 8px; border-radius:8px; box-sizing:border-box; line-height:32px; font-size:14px; font-size:1.4rem;}
section.signup .form-error,
section.signup .form-warning{width:100%; height:auto; display:grid; grid-template-columns:35px 1fr; padding:15px; margin:35px 0px; box-sizing:border-box;}
section.signup .form-error *,
section.signup .form-warning *{color:#ffffff;}
section.signup .form-error i,
section.signup .form-warning i{margin-top:7px;}    
section.signup .form-error{background:#F36664;}
section.signup .form-warning{background:#E5AA3E;}
section.signup .resimage{} 

section.news .grid{grid-template-columns:1fr;}
section.news .grid .newsitem{display:grid; grid-template-columns:1fr 1fr; column-gap:64px; margin-bottom:32px;}
section.news .grid .newsitem .image{width:100%; height:fit-content;}
section.news .grid .newsitem .image img{width:100%; object-fit:contain; margin-top:0px;}
section.news .grid .newsitem:nth-of-type(even) .image{grid-area:1/2/1/3;}
section.news .grid .newsitem:nth-last-of-type{margin-bottom:0px;}
section.news .grid.double{grid-template-columns:300px auto; column-gap:64px; margin-bottom:32px;}
section.news .grid.double{grid-template-columns:300px auto; column-gap:64px; margin-bottom:32px;}
section.news .grid .image{width:100%; height:fit-content;}
section.news .grid .image img{width:100%; object-fit:contain; margin-top:0px;}

section.banner{padding:0px;}
section.banner .image{height:220px; width:100%;}
section.banner .image img{height:100%; width:100%; object-fit:cover;}

section.content .grid{grid-template-columns:1fr;}

section .album-overview{display:grid; grid-template-columns:repeat(3, 1fr); row-gap:15px; column-gap:50px;}
section .album-overview .album{padding:20px; background:#ffffff; text-decoration:none;}
section .album-overview .album .image{width:100%; height:calc(100% - 50px); display:block; overflow:hidden;}
section .album-overview .album .image img{width:100%; height:100%; object-fit:cover;}
section .album-overview .album .about{height:50px; display:block; font-weight:bold; line-height:50px; text-align:center; text-decoration:none; background:#ffffff;}
section .album-overview .album:hover .about{color:#d81a16;}

section .album-collection{width:100%; margin:35px 0px; display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-columns:max-content; grid-auto-flow:dense; grid-auto-rows:minmax(100px,auto); grid-gap:35px; }
section .album-collection figure{grid-column:span 1; grid-row:span 1;}
section .album-collection figure:nth-of-type(3n + 1){grid-column:span 2; grid-row:span 2;}
section .album-collection figure:nth-of-type(3n + 1) a{background:#1c5ca8;}
section .album-collection figure a{width:100%; height:100%; display:block; background:#d81a16;}
section .album-collection figure a img{width:100%; height:100%; object-fit:cover;}

footer *{color:#ffffff;}
footer{height:fit-content; clip-path:polygon(calc(0% + 80px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(0% + 80px)); padding-bottom:48px; margin-top:32px;}
footer .shadetriangle{position:absolute; top:0; left:0px; height:80px; width:80px; border-right: 2px solid rgba(168,168,168,.4);  border-bottom: 2px solid rgba(168,168,168,.4);}
footer .shadetriangle img{height:100%; width:100%;}
footer .grid{grid-template-columns:240px 240px 240px auto;margin:32px 0 auto 0; grid-gap:32px;}
footer .grid .logo{width:200px; height:60px; margin-left:16px;}
footer .grid .logo img{width:100%; height:100%; object-fit:contain;}
footer .grid div span{font-family:"Gothic Franklin Medium",sans-serif; font-weight:bold;}
footer .grid div ul li a:hover{color:#F36664;}
footer .grid .copyright{grid-area:2/2/2/span 3; font-size:1.2rem;}

/*laptop*/
@media only screen and (max-width:1024px) 
{  
    body{font-size:1.6rem;}
    
    section{padding:48px 0;}
    .grid{padding:0 24px;}
    .padding{padding:80px 80px 80px 24px;}
 
    header .grid .logo{width:150px;}
    section.news .grid{grid-gap:32px;}
    
    section.eventheader .image{height:400px;}

    footer{clip-path:polygon(calc(0% + 24px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(0% + 24px))}
    footer .shadetriangle{height:24px; width:24px;}
    footer .grid{grid-template-columns:170px 170px 170px auto; margin:32px 0 auto 0; grid-gap:32px;}
    footer .grid .logo{width:150px; margin-left:24px;}

}

/*tablet*/
@media only screen and (max-width:768px) 
{
    body{font-size:1.4rem; line-height:1.4;}
    p{margin:0 0 16px 0;}
    h1{margin-bottom:24px;}
    h2{font-size:2.4rem;}
    h3{font-size:2.2rem;}
    
    .button{width:100%; display:inline-block; padding:12px; text-align:center; font-size:1.6rem;text-decoration:none !important; color:#ffffff;}
    
    header .grid nav ul li{font-size:1.6rem;}
    
    section{padding:32px 0;}
    
    section.slide .alinea{bottom:0px; clip-path: polygon(calc(100% - 40px) 0, 100% calc(0% + 40px), 100% 100%, 0 100%, 0 0); padding:40px 40px 40px 24px;}
    section.slide .alinea .shadetriangle{height:40px; width:40px;} 
    section.slide .image{height:500px;}
    
    section.events .grid{grid-template-columns:1fr 1fr; grid-gap:24px;}
    section.events .grid h2{grid-area:1/1/1/span 2;}
    section.events .tablethide{display:none;}
    section.events .grid .event .image{margin-bottom:0px;}
    
    section.detail .grid .side .sidebar .properties{padding:16px;}
    section.detail .grid .side .sidebar .properties .property{margin-bottom:16px;}
    section.detail .grid .side .sidebar .properties .property i{font-size:1.5rem;}
  
    section .album-overview{column-gap:35px;}
    section.eventheader .image{height:300px;}
    
    footer .grid{grid-template-columns:repeat(4,1fr); grid-gap:16px;}
    footer .grid .logo{width:100px; height:40px; margin-left:16px; margin-top:0px;}
    footer .grid .copyright{grid-area:2/2/2/4;}
}

/*mobile l*/
@media only screen and (max-width:426px)
{

    h1{font-size:2.4rem;} 
    h2{font-size:2.0rem;}
    h3{font-size:1.8rem;}

    .margin{margin:24px 0;}
    form.smaller{width:100%;}
    form.form-grid{grid-template-columns:1fr;}
    form.form-grid .wide{grid-column-end:unset;}
    form.form-grid .label{border-bottom:0px !important}

    header{height:72px; overflow:visible;}
    header .grid{display:grid; grid-template-columns: 1fr 1fr; grid-gap:16px; height:72px;}
    header .grid .logo{width:100px; height:72px;}
    header .grid nav{width:100%; height:auto; display:block; float:none; left:0; top:-800px; position:absolute; -webkit-transform:translateY(-140%); transform:translateY(-140%); -webkit-transition:-webkit-transform 0.5s, visibility 0s 0.5s; transition:transform 0.5s, visibility 0s 0.5s;}
    header .grid .menu{display:unset; display:block; text-align:right;}
    header .grid .menu a{height:72px;}
    header .grid .menu a i{font-size:2.0rem; color:#18484C; line-height:72px;}    
    header .grid nav ul{width:100%; height:auto; display:block; position:relative; float:left; padding:24px; background:#F36664;}
    header .grid nav ul li{width:100%; height:auto; min-height:48px; display:flex; justify-content:flex-end; margin:0px; text-align:right;}
    header .grid nav ul li a{color:#ffffff; height:64px; font-size:1.4rem; line-height:64px; margin:unset;}
    header .grid nav ul li a:hover,
    header .grid nav ul li a.on{color:#18484C;}
    header .grid nav.open{width:100%; height:100vh; display:block; float:none; left:0px; top:72px; z-index:99; position:absolute; margin:0px !important; -webkit-transform:translateY(0%); transform:translateY(0%); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}

    section{padding:24px 0;}

    section.slide{display:flex; flex-direction:column-reverse;}
    section.slide .image{height:200px;}
    section.slide .image img{height:100%; width:100%; object-fit:cover;}
    section.slide .alinea{width:100%; clip-path: polygon(calc(100% - 24px) 0, 100% calc(0% + 24px), 100% 100%, 0 100%, 0 0); padding:24px 24px 24px 24px; position:relative; border-bottom: 2px solid rgba(168,168,168,.4); margin-top:-24px;}
    section.slide .alinea .shadetriangle{position:absolute; top:0; right:0px; height:24px; width:24px;}

    section.events .grid{grid-template-columns: 1fr; grid-gap:24px;}
    section.events .grid h2{grid-area:1/1/1/1;}
    section.events .grid .event .image{margin-bottom:16px;}
    section.events .grid .event .alinea{padding:12px;}

    section.detail .grid{grid-template-columns:1fr; grid-gap:32px;}
    section.detail .grid article{grid-column-end:unset;}    
    
    section.news .grid{grid-template-columns: 1fr; column-gap:64px; row-gap:24px;}
    section.news .grid h2{grid-area:1/1/1/1;}

    section .album-overview{grid-template-columns:repeat(2, 1fr); row-gap:15px; column-gap:35px;}
    section .album-overview .album{padding:15px;}
    section .album-overview .album .image{height:calc(100% - 35px);}
    section .album-overview .album .about{height:35px; line-height:35px;}
    
    section .album-collection{margin:15px 0px; grid-gap:15px; } 

    section.eventheader .image{height:250px;}

    footer {height:fit-content; clip-path: polygon(calc(0% + 24px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(0% + 24px));}
    footer .shadetriangle{position:absolute; top:0; left:0px; height:24px; width:24px; border-right: 2px solid rgba(168,168,168,.4);  border-bottom: 2px solid rgba(168,168,168,.4);}
    footer .shadetriangle img{height:100%; width:100%;}
    footer .grid{grid-template-columns:1fr 1fr;margin:24px 0 auto 0; grid-gap:12px;}
    footer .grid .logo{margin-left:0px;}
    footer .grid .copyright{grid-area:4/1/4/3;}
}

/*mobile m*/
@media only screen and (max-width:376px)
{
    h1{font-size:2.1rem; margin-bottom:16px;} 
    h2{font-size:1.8rem;}
    h3{font-size:1.6rem;}

    section.eventheader .image{height:200px;}
}

/*mobile s*/
@media only screen and (max-width:320px)
{
  
    h1{font-size:1.8rem;}
    
    section{padding:12px 0;}
 
    section.events .grid{grid-gap:16px;}
    section.events .grid .event .image{height:150px; margin-bottom:16px;}
    section.news .grid{grid-gap:16px;}
    
    section.eventheader .image{height:150px;}
}