/*------------------------------------------------------------------*/
/*                         EVENTS MAIN                              */
/*------------------------------------------------------------------*/

.content {
    margin-bottom: 100px;
}

/* Main content area */
.content h1 {
    position: sticky;
    top: 0;
    z-index: 1000;
    font-size: 30pt;
    margin-bottom: 30px;
    text-align: center;
    font-variant: small-caps;
    background-color: #111;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #eee;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    
}

.about p {
    text-align: justify;
}

.about {
    font-size: 14pt;
}

.about ul {
    list-style: decimal;
}

.soundbutton {
    cursor: pointer;
}

.soundbutton .soundbuttonsvg {
    opacity: 0.7;
    color: #111;
}

.soundbutton:hover .soundbuttonsvg {
    opacity: 1;
}

.soundbutton:active .soundbuttonsvg {
    color: #aaa;
}


/*------------------------------------------------------------------*/
/*                         EVENTS BY YEAR                           */
/*------------------------------------------------------------------*/

.yearheader {
    width: 100%;    
    margin-bottom: 20px;
    background-color: #111;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding-bottom: -4px;
    border: 5px solid #333;
}

.yearheaderleft {
    display: inline-block;
    position: relative;
    width: 76%;
}

.yearheaderleft img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.yearheaderright {
    margin: 0;
    padding: 0 0 0 0;
    display: inline-block;
    vertical-align: bottom;
    text-align: center;
    width: 23%;
    font-size: 140pt;
    color: #EEE;
    text-shadow: 2px 1px 3px rgba(0,0,0,0.69);
    line-height: 167px;    
    letter-spacing: -15px;
}

.yearheadersticky {
    position: fixed;
    top: 0;
    left: calc(280px - 60px + ((100% - 1080px) / 2));
    font-size: 30pt;
    line-height: 30pt;
    width: 50px;
    padding: 15px 0;
    text-align: center;
    background-color: #111;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: normal;
    opacity: 0;
    transition: opacity 0.3s;
    color: #EEE;
}

.yearheaderstickyvisible {
    opacity: 1;
}

/*------------------------------------------------------------------*/
/*                         EVENTS BY YEAR                           */
/*------------------------------------------------------------------*/

.monthmenu {
    position: sticky;
    top: 0;
    z-index: 1000;
    font-size: 11pt;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    transition: all 0.3s;
}

.monthmenu li {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.monthmenu li a {
    display: inline-block;
    color: #eee;
    background-color: #111;
    transition: all 0.3s;
    padding: 10px 11.48px;
}

.monthmenu li a:hover {
    color: #111;
    background-color: #eee;
    text-decoration: none;
}

/*------------------------------------------------------------------*/
/*                         EVENTS BY COUNTRY                        */
/*------------------------------------------------------------------*/

.countryheader {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;    
    margin-bottom: 20px;
    background-color: #111;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 5px solid #333;
}

.countryheaderleft {
    display: inline-block;
    position: relative;
    width: 31%;
}

.countryheaderleft img {
    width: 100%;
    height: 184px;
    vertical-align: bottom;
    border: 1px solid #999;
    object-fit: cover;
}

.countryheaderright {
    margin: 0 0 -4px 0;
    padding: 0 10px 0 0;
    display: inline-block;
    vertical-align: bottom;
    text-align: right;
    width: 68%;
    height: 100%;
    font-size: 55pt;
    color: #EEE;
    line-height: 90px;
    text-shadow: 2px 1px 3px rgba(0,0,0,0.69);
}

/*------------------------------------------------------------------*/
/*                         PAGINATION                               */
/*------------------------------------------------------------------*/

.paginationmenu {
    position: fixed;
    bottom: 0;
    width: 800px;
    height: 40px;
    background-color: #333333;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border-radius: 7px 7px 0 0;    
}

.previouspage {
    position: absolute;
    left: 5px;
}

.nextpage {
    position: absolute;
    right: 5px;
}

.previouspage a, .nextpage a {
    line-height: 40px;    
    font-size: 12pt;
    padding: 0 10px;
    font-variant: small-caps;
}


.pageselector {
    width: 400px;
    text-align: center;
    position: absolute;
    left: 200px;
    color: #eee;
    height: 40px;
    line-height: 40px;
}

.currentpage {
    font-size: 14pt;
    font-weight: bold;
    font-style: italic;
}

/*------------------------------------------------------------------*/
/*                         FORMS                                    */
/*------------------------------------------------------------------*/

.contactConfirmation {
    background-color: #FFFFFF74;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
    width: 100%;
    font-size: 14pt;
}

.formBox {
    margin: 20px 0;
    width: 100%;
    background-color: #FFFFFF74;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.formBoxSmall {
    margin: 20px auto;
    width: 400px;
    padding: 50px;
}

.formBox input {
    width: 300px;
    padding: 10px;
    font-size: 12pt !important;
    background-color: #FFFFFFAA;
    border: 1px solid #AAA;
}

.formBox textarea {
    width: calc(100% - 20px);
    height: 300px;
    padding: 10px;
    resize: none;
    background-color: #FFFFFFAA;
    border: 1px solid #AAA;
}

.errorBox {
    color: red;
    background-color: #FFFFFF74;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
}

.contactErrorBox {
    color: red;
    background-color: #FFFFFF74;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.contactErrorBox div {
    margin: 10px;
}

.successBox {
    background-color: #FFFFFF74;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
}

.formBox button {
    background: none;
    border: 1px solid #AAA;
    font-family: 'Garamond', 'Times New Roman', serif;
    font-size: 14pt !important;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.formBox button:hover {
    background-color: #111; /* Green */
    color: white;
  }

  .formBoxSmall a, .formBox a {
    color: #111 !important;
    font-size: 12pt !important;
  }