/* Custom CSS for Schreinerei Seeberger */

html,
body {
height: 100%;
}
html {
font-size: 100%;
}
body {
padding-top: 60px;
font-family: 'Arial', sans-serif;
font-size: 1.2rem;
font-weight: normal;
}
img {
max-width: 100%;
}
/* Links */
a {
color: #493cf5;
text-decoration: none;
}
a:hover,
a:focus {
color: #1a0bd9;
text-decoration: underline;
}
h1 {
font-size: 2rem;
font-weight: bold;
}
h2 {
font-size: 1.8rem;
font-weight: bold;
}
h3 {
font-size: 1.6rem;
font-weight: bold;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.4rem;
}
h6 {
font-size: .8rem;
}
/* Buttons */
.btn-primary {
color: #fff;
background-color: #493cf5;
border-color: #3224f4;
}
.btn-primary:hover,
.btn-primary:focus {
color: #fff;
background-color: #1c0cf2;
border-color: #180bd0;
text-decoration: none;
}
/*Navbar*/
.navbar {
border-radius: 0;
}
.navbar-brand {
height: 60px;
padding: 0;
}
.navbar-brand > img {
height: 100%;
padding: 8px;
}
#hauptnav > ul > li > a {
padding-top: 20px;
padding-bottom: 20px;
font-size: 1rem;
font-weight: bold;
}
.navbar-toggle {
padding-top: 15px;
padding-bottom: 15px;
}
.dropdown-menu {
border: none;
}
/*Intro*/
#stage {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
width: 100%;
height: 100%;
color: white;

-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
#stage-caption {
max-width: 50rem;
padding: 3rem;
margin: 0 auto;
color: white;
text-align: center;
background: rgba(255, 255, 255, .7);
}
/*Sections*/
.section {
padding: 3rem 0 3rem 0;
}
.section-dark {
color: white;
background: #222;
}
.overlay {
padding: 1rem;
background-color: rgba(0, 0, 0, .7);
border-radius: 10px;
}
.page-heading {
padding-top: 2rem;
font-weight: bold;
text-align: center;
}
.section-heading {
font-weight: bold;
text-align: center;
}
.section-caption {
padding-bottom: 1rem;
text-align: center;
}
#team {
text-align: center;
}
.float-right {
text-align: right;
}
.row>div>h6, .row>div>h3 {
    margin-top: 0.5rem;
    }
/* Cards*/
.text-end {
margin-bottom: 2rem;
}
.card {
position: relative;
display: block;
margin-bottom: 1.75rem;
background-color: #fff;
border-radius: .25rem;
}
.card-img {
border-radius: .25rem;
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
border-radius: .25rem;
}
.card-title {
position: absolute;
z-index: 1;
float: left;
padding: 0 15px 0 30px;
margin: 2rem 0 0 -35px;
color: white;
text-align: center;
background: #493cf5;
border-radius: 0;
}
.card-title > a > h3 {
margin-top: 4px;
margin-bottom: 2px;
}
.card-title > a > h3 {
color: white;
}
.card-title:hover {
background-color: #1c0cf2;
}
.card-title::before {
left: 0;
border-color: transparent black transparent transparent;
border-width: 7px 20px 0 0;
}
.card-title::before {
position: absolute;
top: -7px;
display: block;
width: 0;
height: 0;
content: '';
border-style: solid;
}
.card-text {
padding: 1.25rem;
padding-top: 5rem;
color: #fff;
text-align: left;
}
.card-button {
position: absolute;
right: 1rem;
bottom: .25rem;
}
/* Tiles*/
.tiles {
padding-bottom: 2rem;
}
/*Titel overlay*/
.label {
position: absolute;
z-index: 1;
float: left;
padding: 0 15px 0 30px;
margin: 50px 0 0 -20px;
color: white;
text-align: center;
background: #493cf5;
border-radius: 0;
}
.label > h4 {
margin-top: 4px;
margin-bottom: 2px;
}
.label::before {
left: 0;
border-color: transparent white transparent transparent;
border-width: 7px 20px 0 0;
}
.label::before {
position: absolute;
top: -7px;
display: block;
width: 0;
height: 0;
content: '';
border-style: solid;
}
/* Caption Hover */
.col-md-6 figure {
position: relative;
overflow: hidden;
font-size: 1rem;
text-align: center;
border-radius: .25rem;
}
.col-md-6 figure figcaption {
color: #fff;

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.col-md-6 figure figcaption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
figure.caption-hover figcaption {
top: auto;
bottom: 0;
height: auto;
padding: 3px 5px 3px 5px;
color: black;
background: #fff;
-webkit-transition: -webkit-transform .35s;
-webkit-transition: -webkit-transform .35s, -webkit-transform .35s;
-o-transition:      -o-transform .35s;
transition: -webkit-transform .35s;
transition:         transform .35s;
transition:         transform .35s, -webkit-transform .35s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
figure.caption-hover:hover figcaption {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*Kontaktdaten*/
.contact {
padding-top: 2rem;
text-align: center;
}
hr {
width: 60px;
margin-left: auto;
margin-right: auto;
border-color: #088a08;
border-width: 4px 0 0;
opacity: 1;
}
.devider {
width: 100%;
border-color: white;
border-width: 1px 0 0;
}
.service-icon {
font-size: 2.5rem;
color: #493cf5;
}
/*Material*/
.col-md-2 .download {
position: relative;
overflow: hidden;
font-size: 4rem;
text-align: center;
}
.download figcaption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
background: rgba(0, 0, 0, .55);
opacity: 0;
-webkit-transition: opacity .4s ease;
transition: opacity .4s ease;

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.download figcaption a {
color: white;
}
.download figcaption span {
padding-top: 50%;
}
.download:hover figcaption {
opacity: 1;
}
/* Google Map */
#map {
width: 100%;
height: 800px;
}
.info-window {
font-family: 'Arial', sans-serif;
color: darkblue;
}
.info-content {
font-size: .9rem;
color: black;
}
/* Footer */
#main-footer {
padding-top: 2rem;
padding-bottom: 2rem;
font-size: 1rem;
color: white;
background: #222;
}
#main-footer > h5 {
color: #3239a9;
}
#main-footer > a {
color: #493cf5;
}
/*Kontaktformular*/
.form-navigation ul {
padding: 0;
margin-top: 20px;
list-style-type: none;
}
.neos-nodetypes-form .required {
display: none;
}
/* Back to top Button */
.back-to-top {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
display: none;
cursor: pointer;
opacity: .9;
}
/*Picture maintain aspect ratio in carousels*/
.carousel-item img,
.carousel-item a img {
width: 100%;
height: 85vh;
object-fit: contain;
background-color: #222; /* Match modal background */
}
/*Modal*/
.modal-content {
background: #222;
}
.modal-title {
color: white;
text-align: center;
}
.modal {
text-align: center;
}
.modal-dialog {
display: inline-block;
width: auto;
}
.modal-body {
padding: 0;
}
/*Modal Impressum*/
.modal-impressum .modal-content {
background: #fff;
}
.modal-impressum .modal-title {
color: #000;
text-align: center;
}
.modal-impressum .modal-dialog {
display: inline-block;
width: auto;
}
.modal-impressum .modal-body {
padding: 2rem;
text-align: left;
}
/* Media Queries */
@media screen and (max-width: 991px) {
.section-img {
padding: 2rem 0 2rem 0;
}
/*Sections*/
.section {
padding: 1rem 0 1rem 0;
}
}
@media screen and (max-width: 480px) {
.card-title {
margin: 1rem 0 0 -20px;
}
.card-title > a > h3 {
font-size: 1.1rem;
}
.card-text {
padding-top: 3rem;
}
.card-text,
figcaption {
font-size: .9rem;
line-height: 1rem;
}
.download figcaption {
font-size: 5rem;
}
.carousel-caption {
display: none;
}
.modal-title {
font-size: 80%;
}
.label {
margin: 30px 0 0 -20px;
}
.carousel-item img,
.carousel-item a img {
width: 100%;
height: 85vh;
object-fit: contain;
background-color: #222;
}
}
/*Section img vertical align: middle*/
@media screen and (min-width: 991px) {
.section-content .col-md-5 {
height: 400px;

-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.section-img {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.modal-lg {
width: 80%;
max-width: 1600px;
margin-top: 5rem;
}
}

/* Carousel controls with Bootstrap Icons */
.carousel-control-prev,
.carousel-control-next {
width: 5%;
opacity: 0.5;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
opacity: 0.9;
}
.carousel-control-prev .bi,
.carousel-control-next .bi {
font-size: 2rem;
color: #fff;
}