/* Global Styles */
* {
    box-sizing: border-box;
}

a img {
    text-align: center;
}

body {
    background: #FAF9F6;
    margin: 0;
    padding: 0;
}

p {
    margin-bottom: 1em !important;
    margin: 0;
    padding: 0;
}

.caption-long {
    /* top | right | bottom | left */
    padding: 10px 5px 5px 5px;
    margin: 0 !important;
}

.card {
    width: 100%;
}

.clear-both {
    clear: both;
}

/* Content */
#content {
    height: 100%;
    margin: 0;
    padding: 0 2% 0 7%;
    width: 100%;
}

.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}
.column video {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

.container {
    width: 85%;
}

.container-fluid {
    background: #fdfdfd;
    width: 90%;
    padding: 5%;
}

.flex-container {
    display: flex;
    flex-direction: row;
    max-width: 100%;
}

.float-right {
    float: right;
}

.front-page {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
}

.futura {
    font-family: Futura;
    font-size: 64pt;
}

.header {
    padding: 32px;
    text-align: center;
}

html {
    scroll-behavior: smooth;
}

img {
    width: 100%;
    z-index: 1;
}

.left-column {
    background: black;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 60px;
}

.logo-container {
    background: black;
    display: block;
    width: 100%;
}

.logo-container img {
    opacity: 0.8;
    width: 100%;
}

.logo-container-mobile {
    display: none;
}

.mail-message {
    display: block;
    background: grey;
    color: white;
    height: 50%;
    width: 50%;
    margin: auto;
}

.menu-icon {
    display: block;
    margin: auto;
    margin-top: 20px;
    width: 3em;
}

.menu-links {
    display: flex;
    flex-direction: column;
    height: 70px;
    margin: auto;
}

#menu {
    background: black;
    width: 100%;
    z-index: 9;
}

#menu a {
    color: white;
    font-size: 8pt;
    text-decoration: none;
}

#menu li {
    display: block;
    margin: auto;
    padding: 0;
}

#menu p {
    text-align: center;
}

#menu ul {
    list-style-type: none;
    margin: auto;
    padding: 0;
}

.my-intro-image img {
    width: 100%;
}

.my-intro-text {
    height: 50vh;
}
.mySubmit {
    background: silver;
}
.page-contents a {
    text-decoration: none !important;
    color: gray;
    font-size: 1.2em;
    ;
}
#printpage {
    position: absolute;
    bottom: 20px;
    right: 10px;
    cursor: pointer;
}

#printpage img {
    width: 2.5em;
}
/* top | right | bottom | left */
.right-column {
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
    padding: 5px !important;
    width: 85%;
    margin: auto;
}
.my-col-3 {
    column-count: 3;
}
#scroll-controls {
    top: 43%;
    color: white;
    cursor: pointer;
    position: absolute;
    right: 10px;
    text-align: center;
    width: 2em;
    z-index: 99;
}

.section-title {
    border-bottom: 1px solid silver;
    padding-top: 10px;
}

.summary-list {
    line-height: 1.8;
    font-weight: 400;
}

.view-window {
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: white;
}
 input[type=text], input[type="email"], select, textarea {
         width: 100%;
         padding: 12px;
         border: 1px solid #ccc;
         border-radius: 4px;
         box-sizing: border-box;
         margin-top: 6px;
         margin-bottom: 16px;
         resize: vertical;
         }
         input[type=submit] {
         background-color: silver;
         color: white;
         padding: 12px 20px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         }
         .container {
         border-radius: 5px;
         background-color: #f2f2f2;
         margin: 0;
         width: 100%;
         padding: 20px;
         }
         .form-image {
         width: 100px;
         float: right;
         border-radius: 10px;
         }
         form {
         clear: both;
         }
         .text-counter {
             font-size: 10pt;
             margin-bottom: 16px;
             color: silver;
         }
         textarea {
            margin-bottom: 0;
         }
@media print {
    body {
        font-size: 10pt !important;
        /* background: white; */
    }
    h1 {
       font-size: 20pt;
    }
    h2 {
       font-size: 18pt;
    }
    h3 {
        font-size: 16pt;
    }
    h4 {
        font-size: 14pt;
    }
    .container {
        margin: auto;
        padding: 0;
        width: 100%;
    }
    .left-column {
        display: none !important;
    }
    #printpage {
        display: none;
    }
    .row {
        margin: auto;
        padding: 0;
    }
    #scroll-controls {
        display: none !important;
    }
    .right-column {
        overflow: visible !important;
        height: 100% !important;
    }
    .print-page-break {
        page-break-after: always !important;
    }
} 
  /* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
.icon-text {
        display: flex;
  align-items: center;
  justify-content: center;
    }
    #menu {
        position: absolute;
        top: 0;
        background: black;
        width: 100%;
        margin-bottom: 0;
        height: 75px;
    }
    #menu li {
        width: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #menu p {
        color: gray;
    }
    
    #scroll-controls {
        display: none;
    }
    
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .column {
        flex: 50%;
        max-width: 50%;
    }
    
    .container-fluid {
        width: 100% !important;
        padding: 0;
        margin: 0;
    }
    
    .flex-container {
        flex-direction: column;
    }
    
    .flex-row {
        flex-direction: column;
        max-width: 100%;
    }
    
    h1 {
        text-align: center;
    }
    
    img {
        width: 100%;
    }
    
    .left-column {
        width: 100%;
        height: initial;
        float: initial;
    }
    
    li.logo-container-mobile {
        margin-left: 0 !important;
        height: f;
    }
    
    .m-5 {
        padding: 0;
        margin: 0;
    }
    
    .margin-top {
        margin-top: 2vh !important;
    }
    
    .menu-icon {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }
 
    .menu-links {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }
    .menu-links li {
        height: 75px;
        width: 75px;
    }
    
    .my-intro {
        position: relative;
        padding: 0 !important;
        margin: 0;
        width: 100%;
    }
    
    .my-intro-image {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    .my-intro-text {
        margin: 0;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        width: 80%;
    }
    
    .right-column {
        width: 100%;
        float: none;
        padding: 80px 2% 0 3%;
    }
    
    .row {
        padding: 0;
        margin: 0;
    }
    
  }
@media (max-width: 600px) {
#menu {
    position: absolute;
    top: 0;
    margin-bottom: 0;
    background: black;
    width: 100%;
}

#menu li {
    width: 65px;
    text-align: center; 
}

#menu p {
    color: silver;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.column {
    flex: 100%;
    max-width: 100%;
    padding: 0;
}

.container-fluid {
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
    background: #FAF9F6;
}
.front-page {
    background: black;
}
.flex-container {
   padding: 0;
   margin: 0;
}
h1 {
    text-align: center;
}

img {
    width: 100%;
}

.left-column {
    width: 100%;
    height: initial;
    float: initial;
}

li.logo-container-mobile {
    margin-left: 0 !important;
}

.margin-top {
    margin-top: 5vh !important;
}

.menu-container {
    position: relative;
    width: 100%;
    float: right;
}

.menu-icon {
    /* width: 40px; */
    width: 3em;
}

.my-intro {
    position: relative;
    padding: 0 !important;
    height: 100%;
}

.my-intro-image {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.my-intro-text {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.right-column {
    width: 100%;
    float: none;
    /* top | right | bottom | left */
    padding: 70px 0 0 0 !important;
}
.right-column h1 {
    /* top | right | bottom | left */
    padding: 10px 0 0 0;
}

}