/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
   background-color: #2a2829;
   color: #f4f2f1;
   min-height: 100vh;    
   display: flex;
   flex-direction: column;
   font-family: "Alegreya", "Raleway", Trebuchet MS, sans-serif;
}

.navbar {
   display: flex;
   color: #f4f2f1;
   background-color: #1F1C1D;
   width: 100%;
   font-size: 16px;
   padding: 0;
   /* max-width: 1000px; */
   align-items: center;
   justify-content: space-between;
   margin: auto;
}

.navbar a {
   padding: 0.6rem 1.5rem;
   text-decoration: none;
}

.dropdown {
   position: relative;
   display: inline-block;
}

.dropdown .dropbtn {
   border: none;
   outline: none;
   background-color: #1F1C1D;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #1F1C1D;
   width: 100%;
   min-width: 160px;
   z-index: 1;
}

.dropdown-content a {
   color: #f27473;
   padding: 0.5rem 1rem;
   display: block;
}

.dropdown-content a:hover {
   color: #2a2829;
   background-color: #f4f2f1;
}

.dropdown:hover .dropdown-content {
   display: block;
}

.container {
   max-width: 1000px;
   margin: auto;
}
.container-xxl {
   max-width: 1080px;
   margin: auto;
}

.row {
   max-width: 1000px;
   margin: auto;
}

/* parallax effect */
.bgimg-1 {
   /* background-attachment: fixed; */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: -2;
}

/* parallax image 1 */
.bgimg-1 {
   background-image: url('00 banner arched.jpg');
   min-height: 100%;
}

/* content containers */
.content-group {
   display: inline-block;
   width: 100%;
   padding: 1rem 1rem;
   margin-bottom: 1rem;
   text-align: left;
   background: #2a2829;
}

/* screen reader only */
.sr-only {
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
   width: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
 } 

h1,h2,h3 {
   font-family: "Grenze Gotisch", "Lora", serif;
   max-width: 1000px;
   margin: auto;
}
h4,h5,h6 {
   max-width: 1000px;
   margin: auto;
}
.subhead {
   font-family: "Alegreya", "Raleway", Trebuchet MS, sans-serif;
   font-size: 0.7em;
   color: #c8bbb6;
}

b {
   color: #f4f2f1;
}

p,ul,ol {
   margin-bottom: 1rem !important;
   max-width: 1000px;
   margin: auto;
}

a,a:active,.nav-link {
   color: #f27473;
   text-decoration: none;
}

a:hover,.nav-link:hover {
   color: white;
   text-decoration: none;
   transition: 0.3s;
}

.btn {
   margin: 0.15rem;
}

hr.inset {
   border: 0;
   height: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.4);
   border-bottom: 1px solid rgba(255, 255, 255, 0.6);
   width: 65vw;
   max-width: 1000px;
   margin: auto;
   margin-bottom: 1rem;
}

img {
   max-width: 100%;
   height: auto;
}

/* image gallery settings */
.gallery {
   display: block;
   text-align: center;
   max-width: 1200px;
   margin: auto;
}

.examples {
   max-width: 1200px;
   margin: 0rem -0.5rem;
}

.gallery img,.examples img {
   object-fit: cover;
   margin: 2px 1px;
   border-radius: 7px;
}

.gallery img:hover,.examples img:hover {
   transition: 0.3s;
   filter: brightness(0.4);
   cursor: pointer;
}

/* crop gallery image to 200x200 thumbnail */
.thumbnail {
   width: 200px;
   height: 200px;
   object-fit: cover;
}

/* mini thumbnail */
.thumb-mini {
   max-height: 100px;
   width: 150px;
   padding: 0rem .2rem;
   object-fit: contain;
}

.ff-form .ff-item .ff-help {
   color: #c8bbb6 !important;
}

.footer {
   left: 0;
   bottom: 0;
   width:100%;
   font-size: 14px;
   padding: 1rem;
   text-align: center;
   margin-top: auto;
}

@media only screen and (max-width: 768px) {
   .dropdown-content {display: block; position: absolute;}
}

@media only screen and (max-device-width: 600px) {
   /* for portrait tablets and large phones: */
   .thumbnail {width: 100px; height: 100px;}
   .thumb-mini {max-height: 90px; width: 30vw;}
   .bgimg-1,.bgimg-2,.bgimg-3 {padding: 2rem; max-height: 10%;}
}

@media only screen and (max-device-width: 1600px) {
   /* turn off parallax scrolling for tablets and phones
   .bgimg-1,.bgimg-2,.bgimg-3 {
     background-attachment: scroll;
     min-height: 200px;
   } */
}

/* Responsive layout – now via Bootstrap
.row::after {
   content: "";
   clear: both;
   display: table;
}

[class*="col-"] {
   width: 100%;
   float: left;
}

@media only screen and (min-width: 600px) {
   /* for portrait tablets and large phones:
   .col-sm-1 {width: 8.33%;}
   .col-sm-2 {width: 16.66%;}
   .col-sm-3 {width: 25%;}
   .col-sm-4 {width: 33.33%;}
   .col-sm-5 {width: 41.66%;}
   .col-sm-6 {width: 50%;}
   .col-sm-7 {width: 58.33%;}
   .col-sm-8 {width: 66.66%;}
   .col-sm-9 {width: 75%;}
   .col-sm-10 {width: 83.33%;}
   .col-sm-11 {width: 91.66%;}
   .col-sm-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
   /* for tablet:
   .col-md-1 {width: 8.33%;}
   .col-md-2 {width: 16.66%;}
   .col-md-3 {width: 25%;}
   .col-md-4 {width: 33.33%;}
   .col-md-5 {width: 41.66%;}
   .col-md-6 {width: 50%;}
   .col-md-7 {width: 58.33%;}
   .col-md-8 {width: 66.66%;}
   .col-md-9 {width: 75%;}
   .col-md-10 {width: 83.33%;}
   .col-md-11 {width: 91.66%;}
   .col-md-12 {width: 100%;}
}

@media only screen and (min-width: 992px) {
   /* for desktop:
   .col-1 {width: 8.33%;}
   .col-2 {width: 16.66%;}
   .col-3 {width: 25%;}
   .col-4 {width: 33.33%;}
   .col-5 {width: 41.66%;}
   .col-6 {width: 50%;}
   .col-7 {width: 58.33%;}
   .col-8 {width: 66.66%;}
   .col-9 {width: 75%;}
   .col-10 {width: 83.33%;}
   .col-11 {width: 91.66%;}
   .col-12 {width: 100%;}
} 
*/