/* ---------------------------------------------- (1) Main (html, body) -(1)- */
:root {
    --main-padding: 200px;
    --testborder: 1px solid black;
}

body, html {min-height: 100%; max-width:3000px;border: 0px solid red;}

body {font-family:"Comfortaa",sans-serif; color:#000000; background-color:#ffffff; overflow:hidden; max-width:100%; margin:0 auto;}

        /* ---------------- Hide scrollbar for Chrome, Safari and Opera -(1)- */
html::-webkit-scrollbar {
    display: none;
}

html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.hide_scroll::-webkit-scrollbar {
    display: none;
}

        /* -------------------- Hide scrollbar for IE, Edge and Firefox -(1)- */
.hide_scroll {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
        /* -------------------------------------------- General classes -(1)- */
.mySlides {display: none}

.no-show {display: none}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
    
.google-maps {
    position: relative;
    padding-bottom: 75%; /* This is the aspect ratio */
    height: 0;
    overflow: hidden;
    }
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }
        /* -------------------------------------- General media queries -(1)- */
        /* --- Toggle menu ---*/
/* Mobile menu */
@media only screen and (max-width: 1185px ) {
/*    .large {display: none;} */
    }

/* Desktop menu */
@media only screen and (min-width: 1186px ) {
/*    .small {display: none;} */
    }

        /* --- Main width of website --- */
/* Small devices (phones, 805px and down) */
@media only screen and (max-width: 784px ) {
    :root {--main-padding: 0;}
    }

/* Small devices (phones, 805px and down) */
@media only screen and (min-width: 785px ) {
    :root {--main-padding: 50px;}

/* Small devices (phones, 805px and down) */
@media only screen and (min-width: 1000px ) {
    :root {--main-padding: 50px;}
    }
    
/* Small devices (phones, 805px and down) */
@media only screen and (min-width: 1350px ) {
    :root {--main-padding: 100px;}
    }

/* Large devices (portrait tablets and large phones, 806px and up) */
@media only screen and (min-width: 1706px) {
    :root {--main-padding: 15%;}
    }

        /* ------------ Main page frames (Top, bottom and main content) -(1)- */

#navigation_bar {
    position: relative;
    width: 100%;
    margin-top: 0;
}

#banner {
    padding-left: var(--main-padding);
    padding-right: var(--main-padding);
}

#menu {
    padding-left: var(--main-padding);
    padding-right: var(--main-padding);
}

#page_content {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--main-padding);
    padding-right: var(--main-padding);
}

#footer {
    position: absolute;
    width: 100%;
    margin-bottom: 0px;
    padding-left: var(--main-margin);
    padding-right: var(--main-margin);
}

        /* ----------------------------------------- Main functionality -(1)- */                     
.btn:hover {
    color: red;
    cursor: pointer;
}

.social-icon {
    margin-right:40px;
    font-size: 22px;
}

.pointer {cursor: pointer;}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  -moz-user-select: none; /*Firefox?*/
  user-select: none; /* Standard syntax */
}

.frame { /* --_ 1px red frame --- 1. main */
    border: 0px solid red;
}

.justify-text {
  text-align: justify;
  text-justify: inter-word;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.justify {
  margin-left: auto;
  margin-right: auto;    
}




/* ---------------------------------------------------------------- 3. events */

/* ----------------------------------------------------------------- 4. whois */
#whois_content {
    margin-left: auto;
    margin-right: auto;
}    
/* --------------------------------------------------------------- 5. contact */
#contact-container {
    margin-left: auto;
    margin-right: auto;
}

#subscribe-form {
    margin-left: auto;
    margin-right: auto;
}

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
}

.distance {
    margin-top:20px;
    margin-bottom:20px;
}

@media only screen and (max-width: 805px ) {
    .toggle-text {font-size: large;}
}

@media only screen and (min-width: 806px ) {
    .toggle-text {font-size: xx-large;}
}