:root {
    --main-whte:#FEFEFE;
    --main-blck:#181818;
    --main-bege:#E3E1C1;
    --main-grey:#AAAAAA;
}
.castellar {font-family:'Castellar';}

.background-main-whte {background-color:var(--main-whte);}
.background-main-blck {background-color:var(--main-blck);}
.background-main-bege {background-color:var(--main-bege);}

.ctrmaxwidth {margin:0 auto; max-width:1100px;}

.color-whte {color:var(--main-whte);}
.color-blck {color:var(--main-blck);}
.color-bege {color:var(--main-bege);}
.color-grey {color:var(--main-grey);}

html {scroll-behavior:smooth;}
body {overflow-x:hidden; font-family:'Roboto'; font-size:17px; color:var(--main-blck); box-sizing:border-box; margin:0;}

h1 {font-size:3em; margin:0 0 0 0; padding:0; font-weight:normal; line-height:100%; letter-spacing:6px;}
h2 {font-size:2em; margin:0.5em 0 0 0; font-weight:normal; line-height:100%; letter-spacing:2px;}

div {box-sizing:border-box;}
a, a:link {text-decoration:underline; color:var(--main-blck);}
a:hover {text-decoration:none; color:var(--main-blck);}

div.menubnr {padding:1em 0; text-align:center; border-bottom:1px solid #181818;}

div.current {border-bottom:1px dotted #aaa;}

div.flexmenu {display:flex; justify-content:space-around;}
div.flexmenu div a {color:var(--main-blck); text-transform:uppercase; letter-spacing:1px; font-weight:bold; position:relative;}
div.flexmenu div a::after {content:''; position:absolute; width:100%; height:2px; bottom:-2px; left:0; background-color:currentColor; opacity:0; transition:opacity 0.3s ease;}

div.flexmenu div a:hover::after {opacity:1;}

button.hamburger-icon {display:none;}

.hamburger-icon {display:flex; flex-direction:column; justify-content:space-around; justify-self:center; width:3.5em; height:3em; background:transparent; border:none; cursor:pointer; padding:0;
z-index:1001;}
.hamburger-icon span {display:block; width:100%; height:3px; background-color:var(--main-blck); border-radius:3px; transition:all 0.3s ease-in-out;}

p {line-height:150%; font-size:1.2em;}

div.maintxt {padding:1em 2em; text-align:center;}
div.maintxt div p {padding:0; text-align:justify;}


 /**************************************************************************************************************************/
.header-black {width:100%; color:var(--main-orng); padding:2rem 3rem; display:flex; align-items:center; position:relative; box-sizing:border-box;}
.header-title {font-size:1.5rem; font-weight:bold; margin:0;}
a.meetmakers {color:var(--main-orng); margin-left:3em; text-transform:uppercase; font-size:1em; font-weight:bold; letter-spacing:1px; line-height:1.7em; border-bottom:2px solid rgba(235, 122, 0 ,0); transition:border-bottom 300ms;}
a.meetmakers:hover {border-bottom:2px solid rgba(235, 122, 0, 1);}
.slide-menu {position:fixed; top:0; left:-25%; width:25%; height:100%; background-color:#222; color:var(--main-whte); padding-top:90px; transition:left 0.3s ease-in-out; z-index:1000;}
.slide-menu.active {left:0; min-width:200px;}
.slide-menu ul {list-style:none; padding:0; margin:0;}
.slide-menu li a {display:block; font-size:1.3em; padding:1rem 1.5rem; text-decoration:none; color:var(--main-whte); border-bottom:1px solid #333; transition:background-color 0.2s ease-in-out;}
.slide-menu li a:hover {background-color:#444;}
.overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:999;}
.overlay.active {display:block;}
/**************************************************************************************************************************/


/***************************************************************************************************************************/
/* Info pages                                                                                                              */
div.infopage h3 {text-align:left;}
div.infopage p {margin:0.6em 0 0.3em 0.6em;}
div.infopage ul {list-style:none; text-align:left; margin-left:1em;}
div.infopage ul li {margin:0.3em 0; font-size:1.1em;}
/***************************************************************************************************************************/


/***************************************************************************************************************************/
/* Footer                                                                                                                  */
div.footer {padding:2em; font-size:0.8em;}
div.ftrflex {display:flex; justify-content:space-between;}
div.ftrtimes {color:var(--main-whte);}
div.ftrbhi img {max-width:280px;}
div.ftrdtls {color:var(--main-whte); padding-top:2em;}
div.ftrdtls p {font-size:1em; margin:0.5em;}
div.ftrdtls p a {color:var(--main-whte); text-decoration:underline;}
div.ftrdtls p a:hover {text-decoration:none;}
#table {display:table;}
#table .tr {display:table-row;}
#table .td {display:table-cell; text-align:left; padding:0.2em; min-width:1em;}
#table .tdr {display:table-cell; text-align:right;}
/***************************************************************************************************************************/


/***************************************************************************************************************************/
/* Contact Us                                                                                                              */
div.contact-div h2 {margin-bottom:1em;}
div.contact-div p {text-align:center !important;}
form#contact-form {margin-bottom:2em;}
form#contact-form fieldset {border:none; display:flex; flex-direction:column; gap:1.7em; margin:0; padding:0; font-size:0.9em;}
form#contact-form fieldset input[type=text], form#contact-form fieldset input[type=email], form#contact-form fieldset input[type=number], form#contact-form fieldset textarea {border:1px solid var(--main-ltgy); background-color:var(--main-whte); padding:1em; font-family:Roboto; font-size:1em; box-sizing:border-box; width:100%; max-width:600px;}
form#contact-form fieldset textarea {height:8em;}
form#contact-form fieldset input[type=text]::placeholder, form#contact-form fieldset input[type=email]::placeholder, form#contact-form fieldset input[type=number]::placeholder, form#contact-form fieldset textarea::placeholder {color:var(--main-grey);}
form#contact-form fieldset input[type=submit] {padding:0.7em 2em 0.6em 2em; background-color:var(--main-whte); color:var(--main-blck); font-size:1.1em; letter-spacing:2px; font-weight:bold;}
form#contact-form fieldset input[type=submit]:hover {color:var(--main-bege); cursor:pointer;}
form#contact-form div.g-recaptcha > div {margin:0 auto;}
/****************************************************************************************/

@media (max-width:900px) {
    div.theheader h1 {font-size:2.8em; letter-spacing:5px;}
    div.theheader h2 {font-size:1.8em; letter-spacing:1px;}
}

@media (max-width:850px) {
    div.theheader h1 {font-size:2.6em; letter-spacing:4px;}
    div.theheader h2 {font-size:1.6em;}
    div.ftrflex {flex-direction:column; align-items:center;}
    div.ftrflex {gap:2em;}
    div.ftrdtls {padding-top:0;}
}

@media (max-width:800px) {
    div.maintxt {padding:1em;}
    div.theheader h1 {font-size:2.4em; letter-spacing:3px;}
    div.theheader h2 {font-size:1.4em;}
}

@media (max-width:750px) {
    div.theheader h1 {font-size:2.2em; letter-spacing:2px;}
    div.theheader h2 {font-size:1.2em;}
}

@media (max-width:700px) {
    div.flexmenu {display:none;}
    button.hamburger-icon {display:flex;}
    div.maintxt div p {padding:0; text-align:left;}
}

@media (max-width:600px) {
    div.infopage ul {margin-left:0.2em;}
}
