/**
* Fonts, balises principales, messages d'alerte, popups
*
* CSS
*
* @category CSS
* @package  webroot/css
* @author   AMIOT Romain <webmaster@naboombu.fr>
* @license  http://opensource.org/licenses/gpl-license.php GNU Public License
* @link     http://naboombu.fr
*
*/

/*
* Déclaration des fonts
*/
@font-face {
    font-family:        'AntsValley-Regular';
    src:                url('../fonts/antsvalley/AntsValley-Regular.woff2') format('woff2'),
                        url('../fonts/antsvalley/AntsValley-Regular.woff') format('woff');
    font-weight:        normal;
    font-style:         normal;
}

@font-face {
    font-family:        'PlayfairDisplay-Regular';
    src:                url('../fonts/playfair/PlayfairDisplay-Regular.ttf') format('truetype');
    font-weight:        normal;
    font-style:         normal;
}

@font-face {
    font-family:        'Quicksand-Regular';
    src:                url('../fonts/quicksand/Quicksand-Regular.woff2') format('woff2'),
                        url('../fonts/quicksand/Quicksand-Regular.woff') format('woff');
    font-weight:        normal;
    font-style:         normal;
}

/*
* Animations
*/
.bounce{
    -webkit-transition: transform 0.2s ease;
    -moz-transition:    transform 0.2s ease;
    -ms-transition:     transform 0.2s ease;
    -o-transition:      transform 0.2s ease;
    transition:         transform 0.2s ease;
}

.bounce:hover{
    -webkit-transform:   scale(1.05);
    -moz-transform:      scale(1.05);
    -ms-transform:       scale(1.05);
    -o-transform:        scale(1.05);
    transform:           scale(1.05);
    cursor:              pointer;
}

@keyframes slideRight{
    0% {
        opacity:        0;
        transform:      translate(150px, 70px);
    }
    100%{
        opacity:        1;
        transform:      translate(0px, 0px);
    }
}

@keyframes slideLeft{
    0% {
        opacity:        0;
        transform:      translate(-150px, 70px);
    }
    100%{
        opacity:        1;
        transform:      translate(0px, 0px);
    }
}

@keyframes navbarSlideOn{
    0% {
        opacity:        0;
        transform:      translateX(150px);
    }
    100%{
        opacity:        0.8;
        transform:      translateX(0px);
    }
}

@keyframes navbarSlideOff{
    0% {
        opacity:        0.8;
        transform:      translateX(0px);
    }
    100%{
        opacity:        0;
        transform:      translateX(-150px);
    }
}

/*
* Architecture du site
*/
* {
    margin:             0;
    padding:            0;
    border:             0;
    outline:            0;
    vertical-align:     baseline;
    box-sizing:         border-box;
}

html{
    color:              #000000;
    font:               normal 1em "PlayfairDisplay-Regular", "Trebuchet MS", Arial, Helvetica, sans-serif;
    scroll-behavior:    smooth;
    width:              100%;
}

body{min-width:365px;width:100%;}

#header, #about, #plays, #agenda, #contact, #archives{
    display:            block;
    width:              100%;
    min-height:         100vh;
    position:           relative;
}

#about, #plays, #agenda, #contact, #archives{
    box-sizing:         border-box;
    padding:            150px 5% 40px 5%;
}

#about{background-image: url('../img/about-top.png');background-color: #F4F2E6;}
#agenda{background-image: url('../img/agenda-top.png');background-color: #1B2738;}
#contact{background-image: url('../img/contact-top.png');background-color: #7994A5;}
#archives{background-image: url('../img/archives-top.png');background-color: #F2F2F2;}
#plays{
    background-color: #F5F2F0;
    background-image: url('../img/plays-top.png'), url('../img/plays-bkg.jpg');
    background-repeat: repeat-x, repeat;
    background-position: top center;
}

.wrappers{
    position:           relative;
    z-index:            2;
    max-width:          1600px;
    margin:             0 auto;
}
.headband{
    background-position:center top;
    background-repeat:  repeat-x;
}
.thread{
    position:           absolute;
    width:              100%;
    height:             100%;
    background-position:30% 0px;
    background-repeat:  no-repeat;
    z-index:            1;
    overflow:           hidden;
    top:                0px;
    left:               0px;
}

.title{
    width:              auto;
    height:             auto;
    position:           relative;
    margin:             0px 0px 80px 0px;
}
.title h1{opacity:0;}
.title img{
    position:           absolute;
    width:              100px;
    left:               10px;
    opacity:            0;
}
.title-slide{
    animation:          slideRight 0.3s normal;
    animation-fill-mode:forwards;
}
.titleimg-slide{
    animation:          slideLeft 0.3s normal;
    animation-fill-mode:forwards;
}


/**
 * barre de navigation
 */
#smartphone-navbar-icon{display: none;}
#smartphone-navbar{display: none;}
#navbar{
    width:              auto;
    height:             auto;
    background:         #181f27 url('../img/logo.png') 10px 10px/30px no-repeat;
    position:           fixed;
    z-index:            10;
    right:              10px;
    top:                30px;
    border-radius:      5px;
    opacity:            0.8;
    padding:            10px 10px 10px 10px;
    color:              #fff;
    display:            none;
}
#navbar div{
    margin-bottom:      10px;
    padding-left:       35px;
    font-size:          1.4em;
    font-variant-caps:  small-caps;
}
#navbar a{
    display:            block;
    color:              #fff;
}
#navbar a:hover{background-color: #fff; color: #181f27;}
.navbar-slide-on{
    animation:          navbarSlideOn 0.3s normal;
    animation-fill-mode:forwards;
}
.navbar-slide-off{
    animation:          navbarSlideOff 0.3s normal;
    animation-fill-mode:forwards;
}

#actuality{
    z-index:            10;
    padding:            10px;
    border-radius:      5px;
    position:           fixed;
    bottom:             10px;
    right:              10px;
    background-color:   #c9dce4;
    color:              #327d9a;
    opacity:            0.5;
}

/**
 * Barre de navigation mobiles
 */
 #smartphone-navbar-icon{
    display:            none;
    position:           fixed;
    top:                0px;
    left:               0px;
    background:         url('../img/icons.png') 0px -210px no-repeat;
    width:              30px;
    height:             30px;
    z-index:            1001;
}
#smartphone-navbar-icon span{display: none;}
#smartphone-navbar-icon:hover #smartphone-navbar{
    display:            none;
    width:              100vw;
    height:             auto;
    top:                0px;
    left:               0px;
    cursor:             pointer;
    background:         #181f27;
    position:           fixed;
    z-index:            1000;
}
#smartphone-navbar a{
    display:        none;
    color:          #fff;
    padding:        10px;
}
#smartphone-navbar a:hover{background-color: #fff; color: #181f27;}

/**
 * Tag
 */
h1{
    color:              #1C1E22;
    font:               normal 5em 'Quicksand-Regular';
    position:           relative;
}
a, button{
    text-decoration:    none;
    font:               normal 1em 'Quicksand-Regular';
}
button:hover{cursor:pointer;}
label{
    position:           relative;
    display:            block;
    color:              #fff;
    margin-top:         10px;
}
input[type="text"], input[type="mail"], textarea{
    border-radius:      3px;
    padding:            10px;
    font:               normal 1em 'Quicksand-Regular';
}
input[type="text"]:hover, input[type="text"]:focus, input[type="mail"]:focus, input[type="mail"]:hover, textarea:hover{background-color: #F7CF6D;}
input[type="text"], input[type="mail"]{
    width:              100%;
    height:             30px;
}
textarea{
    min-width:          100%;
    min-height:         30vh;
    resize:             none;
    display:            block;
}
input[type="submit"]{
    background:         url('../img/contact-submit.png') center no-repeat;
    color:              #1B2738;
    width:              130px;
    height:             130px;
    font:               normal 1.9em 'Quicksand-Regular';
    text-align:         center;
    margin:             0 auto;
    display:            block;
    position:           relative;
}
blockquote{
    display:            inline-block;
    text-align:         justify;
    position:           relative;
    max-width:          90%;
    font-size:          1.1em;
}
blockquote::before, blockquote::after{
    content:            '';
    display:            block;
    background-image:   url('../img/icons.png');
    background-repeat:  no-repeat;
    width:              30px;
    height:             30px;
    position:           absolute;
}
blockquote::before{
    bottom:             -20px;
    left:               -35px;
}
blockquote::after{
    top:                -5px;
    right:              -40px;
}

/**
 * Header
 */
@-webkit-keyframes fade{
    0%{opacity: 1;}
    40%{opacity: 0.3;}
    100%{opacity: 1;}
}
#header, #header-moon{
    background-position:center 0px;
    background-size:    cover;
    background-repeat:  no-repeat;
    width:              100%;
}
#header{
    background-image:   url('../img/header-bkg-back.jpg');
    position:           relative;
    text-align:         center;
}
#header-moon{
    position:           absolute;
    height:             100%;
    background-image:   url('../img/header-bkg-front.png');
    animation:          fade 12s;
    animation-iteration-count: infinite;
}
#header-title{
    display:            block;
    position:           relative;
    font:               normal 8vw "AntsValley-Regular", "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:              #fff;
    padding-top:        10vh;
    text-align:         center;
    animation:          fade 8s;
    animation-iteration-count:infinite;
}
#header-word{
    padding:            10vh 20% 0% 20%;
    display:            block;
    color:              #fff;
    position:           relative;
}
#header-nav{
    position:           absolute;
    width:              94%;
    margin:             0 3% 0 3%;
    bottom:             10%;
}
#header-nav a{
    font:               normal 1.1em "Quicksand-Regular", "Trebuchet MS", Arial, Helvetica, sans-serif;
    display:            inline;
    color:              #fff;
    margin:             0 10px 0 10px;
    position:           relative;
    background:         linear-gradient(to top, #fff 2px, transparent 1px) no-repeat;
    background-size:    0 100%;
    transition:         background-size 0.3s;
}
#header-nav a:hover{background-size:100% 100%;}
#header-nav-icon{
    background:         url('../img/icons.png') 0px 0px no-repeat;
    display:            inline-block;
    width:              30px;
    height:             30px;
    vertical-align:     middle;
}


/**
 * Page about
 */
#about-thread{background-image: url('../img/about-thread.png');}
#about-title{float: right;}
#blockquote-wrapper{
    display:            inline-block;
    text-align:         center;
    margin-bottom:      50px;
}
#about blockquote::before{background-position: 0px -30px;}
#about blockquote::after{background-position: 0px -60px;}
#about-team-wrapper{text-align:center; clear: both;}
#about-team-profil{
    box-sizing:         border-box;
    width:              25%;
    min-width:          155px;
    height:             auto;
    display:            inline-block;
    margin:             0 2% 4% 2%;
    position:           relative;
    vertical-align:     top;
    text-align:         left;
}
#about-team-profil img{
    display:            inline-block;
    width:              70%;
}
#about-team-profil .team-name{
    display:            inline-block;
    writing-mode:       tb-rl;
    text-orientation:   sideways;
    font-size:          1.6em;
    transform:          rotate(180deg);
}
#about-team-profil .team-txt{text-align:justify;}
.team-website a{color: #000;}
.team-website a:hover{text-decoration: underline;}


/**
 * Page plays
 */
#plays-thread{background-image: url('../img/plays-thread.png');}
#plays blockquote::before{background-position: 0px -240px;}
#plays blockquote::after{background-position: 0px -270px;}
.plays-word{
    width:              auto;
    font-size:          2.5em;
}
.plays-word blockquote{max-width: 100%;}
#plays-wrapper{
    display:            flex;
    flex-wrap:          wrap;
    justify-content:    space-around;
}
.plays-box{
    flex:               1;
    min-width:          300px;
    margin:             1rem;
}
.plays-grid{
    display:            grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows: auto 0.6fr;
    grid-column-gap:    1.2rem;
    grid-row-gap:       1rem;
    grid-template-areas:"i t" "i l";
    position:           relative;
}
.plays-img{grid-area: i; align-self: flex-start; height: 100%;}
.plays-description{grid-area: t;}
.plays-links{grid-area: l;}
.plays-img img{width: 100%; object-fit: contain; height: 100%;}
.plays-button{
    width:              95%;
    display:            block;
    font-size:          0.9em;
    color:              #000;
    text-align:         center;
    background-repeat:  no-repeat;
    background-position:center;
    background-size:    contain;
    margin:             0 auto 5px auto;
    min-height:         40px;
    background-color:   transparent;
}
.plays-button a{color: #000;}
.plays-button:nth-child(even){background-image: url('../img/download-wrapper-right.png')}
.plays-button:nth-child(odd){background-image: url('../img/download-wrapper-left.png')}
.plays-name{font-size: 2.8em;}
.plays-text{
    font-size:          0.9em;
    text-align:         justify;
}


/**
 * Page agenda
 */
#agenda-thread{background-image: url('../img/agenda-thread.png');}
#agenda-title{float: right;}
#agenda-title h1{color: #F4F2F0;}
#agenda-wrapper{clear: both;}
#all-events-wrapper{
    display:            inline-block;
    width:              70%;
    vertical-align:     top;
    position:           relative;
}
#timeline{
    display:            block;
    width:              1px;
    height:             110%;
    background-color:   #00A99D;
    position:           absolute;
    left:               183px;
    top:                40px;
}
.event-wrapper{
    display:            block;
    margin-bottom:      10px;
}
.event-date, .event-description, .event-point{
    vertical-align:     middle;
    display:            inline-block;
    position:           relative;
}
.event-date{
    margin-right:       5px;
    text-align:         right;
    min-width:          160px;
    font:               normal 0.9em 'Quicksand-Regular';
    color:              #fff;
}
.event-description{
    background-color:   #F3F0EE;
    padding:            10px;
    margin-left:        25px;
    border-radius:      5px;
    width:              50%;
}
.event-description::before{
    content:            "";
    width:              20px;
    height:             26px;
    background:         url('../img/arrow-left.png') center no-repeat;
    position:           absolute;
    left:               -20px;
    top:                30px;
}
.event-description-canceled{
    color:              #fff;
    position:           absolute;
    right:              0px;
    bottom:             0px;
    background-color:   #CD5C5C;
    height:             100%;
    padding:            10px 20px 0 20px;
    border-radius:      0 5px 5px 0;
    opacity:            0.7;
}
.event-point{
    width:              30px;
    height:             30px;
    background:         url('../img/icons.png') 0px -90px no-repeat;
}
.event-description-title, #archived-event-title{
    color:              #00A99D;
    font-size:          1.3em;
    text-overflow:      ellipsis;
    overflow:           hidden;
    white-space:        nowrap;
}
.event-description-address, .event-description-price{
    font-size:          0.9em;
    text-overflow:      ellipsis;
    overflow:           hidden;
    white-space:        nowrap;
}

#archived-event-wrapper{
    display:            inline-block;
    background-color:   #F3F0EE;
    padding:            10px;
    border-radius:      5px;
    width:              25%;
    font-size:          0.9em;
    margin-top:         30px;
}


/**
 * Page contact
 */
#contact-title h1{color: #1B2738;}
#contact-thread{background-image: url('../img/contact-thread.png'); background-position:70%;}
#contact blockquote::before{background-position: 0px -300px;}
#contact blockquote::after{background-position: 0px -330px;}
#contact blockquote{color: #fff;}
.contact-box{
    background:         url('../img/icons.png') no-repeat;
    height:             30px;
    font-size:          1.1em;
    display:            inline-block;
    width:              30%;
    padding-left:       40px;
    margin-bottom:      10px;
}
#contact-box-wrapper{color: #fff;}
.contact-box p{
    font-size:          0.7em !important;
    color:              #F7CF6D;
    line-height:        10px;
}
#contact-box-phone{background-position:0px -150px;}
#contact-box-mail{background-position:0px -120px;}
#contact-box-facebook{background-position:0px -180px; display: none;}
#contact-form-wrapper{margin-top:40px;}


/**
 * Page archives
 */
#archives-thread{background-image: url('../img/archives-thread.png');}
#archives-title{float: right;}
#archives-flex{
    clear: both;
    display:            flex;
    flex-wrap:          wrap;
    justify-content:    space-around;
}
.archives-grid{
    flex:               1;
    display:            grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows: auto 0.6fr;
    grid-column-gap:    1.2rem;
    grid-row-gap:       1rem;
    grid-template-areas:"ai at" "ai al";
}
.archives-img{grid-area: ai;}
.archives-description{grid-area: at;}
.archives-links{grid-area: al;}
.archives-img img{width: 100%; object-fit: contain;}
.archives-button{
    width:              70%;
    display:            block;
    font-size:          0.9em;
    color:              #000;
    text-align:         center;
    background-repeat:  no-repeat;
    background-position:center;
    background-size:    contain;
    margin:             0 auto 3px auto;
    min-height:         40px;
    background-color:   transparent;
}
.archives-button a{color: #000;}
.archives-button-gallery{background-image: url('../img/download2-wrapper-right.png')}
.archives-button-newspapers{background-image: url('../img/download2-wrapper-left.png')}
.archives-title{font-size: 1.8em;}
.archives-text{
    font-size:          0.8em;
    text-align:         justify;
}

/**
 * Footer
 */
#footer{
    background-image:   url('../img/footer-top.png');
    background-color:   #191E21;
    display:            block;
    text-align:         center;
    position:           relative;
    width:              100%;
    padding:            120px 0px 80px 0px;
}
#footer-thread{background-image: url('../img/footer-thread.png');}
#footer-section-1, #footer-section-2, #footer-section-3{
    display:            inline-block;
    position:           relative;
    width:              25%;
    height:             auto;
    text-align:         left;
    vertical-align:     top;
    z-index:            2;
}
.footer-title{
    color:              #F7931E;
    font-size:          1.2em;
}
#footer-section-1 p, #footer-section-2 p, #footer-section-3 p{
    color:              #fff;
    font-size:          0.8em;
}
#footer-section-1{
    background:         url('../img/logo.png') left center no-repeat;
    padding-left:       90px;
}
#footer-section-1 button{
    color:              #fff;
    font-size:          0.8em;
    font-family:        "Quicksand-Regular";
    background-color:   transparent;
}
#footer-section-1 button:hover{text-decoration:underline;}
#footer a:hover{text-decoration: underline;}

/**
 * Mentions légales
 */
#legal-notice{
    display:            none;
    position:           fixed;
    top:                4%;
    left:               4%;
    width:              90%;
    max-height:         90%;
    z-index:            1000;
    background-color:   #f8f4f1;
    border-radius:      5px;
    color:              #000;
    padding:            1rem;
    overflow-y:         auto;
    font-size:          1em;
    box-shadow:         0px 0px 6px 2px rgba(0,0,0,0.5);
}
#legal-notice h1{font-size: 3em;}
#legal-notice p{text-align: justify;}

/**
 * Messages
 */
.alert-message{
    display:            block;
    position:           fixed;
    padding:            10px;
    border-radius:      5px;
    font:               normal 1.2em 'Quicksand-Regular';
    text-align:         justify;
    z-index:            100;
    top:                48%;
    left:               50%;
    transform:          translate(-50%, -50%);
    opacity:            0.8;
}
.alert-success{background-color:#5cb355;}
.alert-error{background-color:#e56a37;}


/**
* Media Queries
*/

/* breakpoints */
@media(max-width: 1161px){
    #about-team-profil .team-name{font-size: 1.2em;}
    .contact-box{width: 100%;}
}
@media(min-width: 1025px) and (max-width: 1380px){
    .plays-name{font-size: 1.8em;}
    .plays-description{max-height: 300px; overflow-y: scroll;}
}
@media(max-width: 450px){.plays-box{min-width: 300px; margin: 0 0 1rem 0;}}

/* Affichage tablette et mobile */
@media(max-width: 1024px){
    #all-events-wrapper{width: 100%;}

    #archived-event-wrapper{display: none;}
    #archives-flex{align-items: flex-start;align-content: space-around;justify-content: flex-start;flex-wrap: wrap;}
    .archives-img{grid-area: ai;}
    .archives-description{grid-area: at;}
    .archives-links{grid-area: al; text-align: center;}
    .archives-button{width: 50px;height: 50px;min-height: 30px;background: url('../img/icons.png') 0px -120px no-repeat;display: inline-block;object-fit: cover;margin-right: 10px;}
    .archives-button-gallery{background: url('../img/icons.png') 0px -360px no-repeat;}
    .archives-button-newspapers{background: url('../img/icons.png') 0px -410px no-repeat;}
    .archives-button:last-child{margin: 0;}
    .archives-button span{display: none;}
    .archives-img img{max-width: 100%; object-fit: contain;}
    .archives-title{font-size: 1.8em; background: linear-gradient(180deg, rgba(255,255,255,0) 70%, #ff7bac 70%); }
    .archives-title span{display: none;}
    .archives-text p{display: none;}
}

/* Affichage sur tablette */
@media(min-width: 541px) and (max-width: 1024px){
    #smartphone-navbar-icon, #smartphone-navbar-icon:hover #smartphone-navbar, #smartphone-navbar a, #smartphone-navbar-icon span{display:block;}
    #smartphone-navbar-icon{background: #181f27; border-radius: 4px; width: auto; height: auto; padding: 10px; top: 5px; left: 5px; color: #fff; font: normal 1.2em 'Quicksand-Regular';}

    h1{font-size:7vw;}
    .title img{width: 80px;}

    #about-team-profil .team-name{font-size: 0.8em;}
    #about-team-profil .team-txt{font-size: 0.8em;}

    .plays-box{min-width: 100%; margin: 0 0 1rem 0;}
    .plays-img img{height: 100%; object-fit: cover; background-position: left top;}
    .plays-img{align-self: normal; text-align: left;}
    .plays-text{font-size: 1em;}
    .plays-name{font-size: 2.5em; margin-top: -15px;}

    .event-description{width: 70%;}

    .archives-grid{grid-template-columns:0.8fr 1.2fr;grid-template-areas:"at at" "ai ai" "al al"; max-width: 33%; margin-bottom: 40px;}
    .archives-grid{margin-right: 1rem;}
    .archives-grid:last-child{margin-bottom:0; margin-right:0;}

    #footer-section-1, #footer-section-2, #footer-section-3{width: 32%;}
}

/* Affichage tablette et mobile */
@media(max-width: 640px){
    #footer{padding-bottom: 40px;}
    #footer-section-1, #footer-section-2, #footer-section-3{display: block; width: 100%; margin: 0; padding: 10px 1rem 10px 1rem;}
    #footer-section-1{background: url('../img/logo.png') right 1rem top no-repeat;padding: 0 1rem 10px 1rem;}
    #footer-section-1 p{display: inline-block; margin-right: 40px;}
    #footer-section-2 p{display: inline-block; margin-right: 40px;}
    #footer-section-3 p{display: inline-block; text-align: justify;}
}

/* breakpoints */
@media(max-width: 844px){.event-description{width: 60%;}}
@media(max-width: 634px){.event-description{width: 50%;}}


/* Affichage sur mobile */
@media(max-width: 540px){
    #smartphone-navbar-icon, #smartphone-navbar-icon:hover #smartphone-navbar, #smartphone-navbar a{display:block;}
    .title{margin-bottom: 20px;}

    #header{background-position: -300px top;}
    #header-word{font-size:0.8em;padding:8vh 5% 0% 5%;}
    #header-nav{font-size: 0.8em;}
    #header-nav a{line-height: 30px;}
    #header-nav-icon{display:block;margin:0px auto 10px auto;}

    h1{font-size:3.5em;}
    .title img{width: 50px;}
    #about, #plays, #agenda, #contact, #archives{padding:120px 10px 40px 10px;}
    blockquote{font-size: 0.9em}
    blockquote::before, blockquote::after{display: none;}

    #about-team-profil img{width: 65%;}
    #about-team-profil .team-name{font-size: 1em;}
    #about-team-profil .team-txt, .team-website{display: none;}

    .plays-box{margin: 0 0 1.4rem 0;}
    .plays-grid{grid-template-areas:"i l" "t t"; grid-column-gap:5px; grid-template-columns:1.4fr 0.6fr;}
    .plays-name{font-size: 1.7em; background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(118,198,226,1) 70%); display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .plays-links{display: flex; flex-direction: column;}
    .plays-button{background: #76c6e2; border-radius: 8px; flex: 1;}
    .plays-button:last-child{margin-bottom: 0;}
    .plays-text{font-size: 1em;}

    .event-wrapper{background-color: #F3F0EE; border-radius: 5px; padding: 5px;}
    #timeline, .event-point, .event-description::before{display: none;}
    .event-date{color: #1b2738; display: block; text-align: center; font-size: 0.8em;}
    .event-description{width: 100%; padding: 0; margin: 0;}
    .event-description-title{font-size: 1.1em;}
    .event-description-address, .event-description-price{font-size:0.8em}
    .event-description-canceled{border-radius:5px 5px 5px 5px;}

    #contact-form-wrapper{margin-top: 20px;}

    .archives-grid{grid-template-columns:0.8fr 1.2fr;grid-template-areas:"at at" "ai ai" "al al";min-width: 35%;max-width: 50%;margin-bottom: 40px;}
    .archives-grid:nth-child(odd){margin-right: 1rem;}
    .archives-grid:last-child{margin-bottom: 0px;}
}