/*
************************************************************
Styles:     flix//theme
Project:    flix-Base - Main CSS
Autor:      Yannik Boost
Copyright:  (c) 2020 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/

/*****************************************************************
*********** Document
******************************************************************/

html {
   height: 100%;
}

body {
   font-size:16px;
   font-family:"Arial";
}

/*****************************************************************
*********** Allgemeine Selectoren
******************************************************************/
h1 {
   font-size:26px;
}

h2 {
   /*   font-size: 22px;
      margin-bottom: 20px;
      color:#007cc4;*/
}

h3 {
   font-size:18px;
   margin-bottom: 15px;
}

h1,h2,h3 {
   font-family:"Arial";
}

p {
   font-size:16px;
   line-height: 21px;
}

span {
   /*   font-size:16px;
      line-height: 21px;*/
}

em {
   /*   font-size:16px;
      line-height: 21px;*/
}

strong {
   font-size:16px;
   line-height: 21px;
}

li {
   font-size: inherit;
   width: auto;
   height: auto;
   float: left;
   box-sizing: border-box;
}

ul {
   font-size:inherit;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
}

ol {
   font-size:inherit;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
}

a{
   /*   font-size:16px;
      line-height: 21px;
      text-decoration: none;*/
}

img {
   width:100%;
   height:auto;
   display:block;
}

.contentbox {
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   overflow: hidden;
   position: relative;
   padding-bottom: 28px;
}

.text {
   box-sizing:border-box;
}

/*****************************************************************
*********** Header
******************************************************************/

#head-canvas{
   width:100%;
   height:auto;
   box-sizing:border-box;
   /*overflow:hidden;*/
   position:relative;
   padding-left: 15px;
   padding-top: 15px;
}

#logo {
   width:100%;
   max-width:220px;
   overflow:hidden;
}

#logo img {
   width:100%;
   height:auto;
   display:block;
}

#head-image {
   position:relative;
   width:100%;
   height:auto;
   box-sizing:border-box;
}

#head-image img {
   filter:brightness(70%);
}

.head-text {
   box-sizing: border-box;
   display: block;
   text-align: center;
   position: absolute;
   top: calc(50% - 20px);
   left: 0;
   right: 0;
   margin: 0 auto;
}

.mainheadline {
   line-height:40px;
}

/*****************************************************************
*********** Footer
******************************************************************/

#footer-canvas{
   height: auto;
   width: 100%;
   box-sizing:border-box;
   overflow:hidden;
   position:relative;
   padding: 30px 15px;
   border-top: 2px solid #7c7b7b;
   border-bottom: 2px solid #7c7b7b;
}

#footer-canvas .column {
   width: calc(100% / 3);
   float: left;
   overflow: hidden;
   box-sizing: border-box;
   margin-left: 0;
}

#footer-bar {
   text-align: center;
   box-sizing: border-box;
   overflow: hidden;
   width: 100%;
   height: auto;
}

.nav-footer {
   width: auto;
   height: auto;
   text-align: center;
   display: inline-block;
   overflow: hidden;
}

#footer-canvas .copyright {
   margin-top:15px;
}

.nav-footer-item {
   width:auto;
   height:auto;
   float:left;
   margin-left:15px;
}

.nav-footer-link {
   font-size:18px;
   line-height:30px;
}

.social-media-link {
   display:block;
   width:25px;
   height:25px;
   overflow:hidden;
   float:right;
   margin-left:15px;
}

#youtube-link {
   background: url(/_images/icons/youtube.png)center center no-repeat;
   background-size: contain;
}

#facebook-link {
   background: url(/_images/icons/facebook.png)center center no-repeat;
   background-size: contain;
}

#twitter-link {
   background: url(/_images/icons/twitter.png)center center no-repeat;
   background-size: contain;
}

#instagram-link {
   background: url(/_images/icons/instagram.png)center center no-repeat;
   background-size: contain;
}

/*****************************************************************
*********** Content
******************************************************************/

#slider {
   width:100%;
   max-width:1400px;
   max-height:600px;
   display:block;
   overflow:hidden;
   height: 599px;
}

#slider .slick-slide {
   max-height:600px;
}

#slider .slick-slide div {
   max-height: 600px;
   display: inline-block;
}

.slick-next::before,
.slick-prev::before {
   content:'';
}

.slick-next,
.slick-prev{
   width: 24px;
   height: 46px;
   position: absolute;
   top: calc(50% - 23px);
   z-index:999;
   cursor:pointer;
}

.slick-next {
   right:25px;
   background:url(/_images/icons/slider-arrow-next.png)center center no-repeat;
   background-size:cover;
}

.slick-prev {
   left:25px;
   background:url(/_images/icons/slider-arrow-prev.png)center center no-repeat;
   background-size:cover;
}

.slick-slide img {
   width:100%;
   height: 600px;
   filter:brightness(70%);
}

.slick-dots {
   display:none;
}

.slider-caption {
   position: absolute;
   top: calc(50% - 105px);
   left: 0;
   right: 0;
   margin: 0 auto;
   height:210px;
}

.slider-caption span {
   display: block;
   text-align:center;
   font-size:70px;
   line-height:70px;
   color:#fff;
}

#main-canvas{
   width:100%;
   height:auto;
   box-sizing:border-box;
   overflow:hidden;
   position:relative;
}

#page-canvas{
   width:100%;
   height:auto;
   box-sizing:border-box;
   overflow:hidden;
   position:relative;
   max-width:1400px;
   margin:0 auto;
   /*border: 2px solid #7c7b7b;*/
   margin-top: 15px;
   margin-bottom: 15px;
}


.menu-button {
   display:inline-block;
   height: 40px;
   width: 35px;
   cursor: pointer;
   display: none;
}

.mobile-div {
   position: fixed;
   height: 100vh;
   width: 100vw;
   background-color: #798e31;
   overflow: hidden;
   z-index: 99999999;
   top: 0px;
   left: -100vw;
   transition: ease-in-out .6s;
}

.menu-line{
   width: 100%;
   height: 4px;
   border-radius: 3px;
   margin-bottom: 6px;
   background-color: #878787;
   transition: ease .3s;
}
.menu-button:hover .menu-line:nth-child(2){
   width: 80%;
}

.menu-button-close:hover .menu-line:nth-child(1), .menu-button-close:hover  .menu-line:nth-child(3){
   width: 80%;
}

.menu-button-close{
   height: 40px;
   width: 40px;
   position: absolute;
   top: 30px;
   right: 30px;
   cursor: pointer;

}


.mobile-menu{
   height: 100vh;
   width: 100%;
   display: none;
   background-color: #fff;
   top: 0px;
   left: 0px;
   transition: ease-in-out .6s;
   position: absolute;
   z-index: 99;
}

.nav1-mobile{
   width: auto;
   /*text-align: center;*/
   height: auto;
   overflow: hidden;
   position: absolute;
   top: 50%;
   transform: translate(0,-50%);

}
.nav1-mobile li{
   width: calc(100vw - 70px);
   color: white;
   font-family: 'Pacifico';
}
.nav1-mobile-link {
   font-size: 35px;
}

.mobile-menu{
   /*display: none;*/
}

/*****************************************************************
*********** Seitenelemente
******************************************************************/

/******************* contact-info *************************/

.contact-info {
   padding:15px;
}

.contact-info p {
   margin-bottom: 10px;
}

/******************* contactform *************************/

.contactform {
   padding-top: 10px;
   text-align: center;
   color: white;
}
.contactform .defaultform{
   width: 80%;
   padding: 50px 10%;
   text-align: center;
   font-family: 'Krub';

}
.contactform .textbox {
   height: 30px;
   width: 40%;
   padding: 4px 10px;
   margin-bottom: 15px;
}
.contactform #nachricht{
   width: 40%;
   height: 100px;
   padding: 10px;
}
.contactform .button-submit{
   width: 40%;
   height: 35px;
   margin-top: 25px;
   border: none;
   padding: 5px;
}
.contactform .form-label{
   width: 100px;
   display: inline-block;
}

/******************* downloads-info *************************/

.downloads-info {
   padding:15px;
}

.downloads-info .headline {

}

.downloads-info .downloads-list {
   overflow:hidden;
}

.download-item {
   margin-bottom: 10px;
}

.download-link {

}

.download-link {
   box-sizing: border-box;
   display: block;
   padding-left: 22px;
   /*   background: url(/_images/icons/ic_download.png)center center no-repeat;*/
   background-size: 13px;
   background-position-x: 0px;
   line-height: 22px;
}
.download-link::before {
   /*  font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f019";
     width: 25px;
     display: inline-block;*/
}

/******************* gallery-main *************************/

.gallery-main {

}

.gallery-image {
   float: left;
   width: calc(100%/4);
   max-width: 380px;
   max-height: 380px;
   box-sizing: border-box;
   overflow: hidden;
}

/******************* image-fullsize-main *************************/

.image-fullsize-main {

}

/******************* image-text-three-columns-main *************************/

.image-text-three-columns-main {
   padding: 30px 0px;
}

.image-text-three-columns-main .col {
   width: calc(100% / 3 - 10px);
   float: left;
   overflow: hidden;
   box-sizing: border-box;
   margin-left: 15px;
}

.image-text-three-columns-main .col img {
   margin-bottom: 20px;
}

.image-text-three-columns-main .col1 {
   margin-left:0;
}

/******************* info-teaser-main *************************/

.info-teaser-main {
   padding: 20px;
}
.info-teaser-main .info{
   width: calc(100% / 3);
   float: left;
   color: white;
}
.info-teaser-main .info h2{
   margin: 0px;
   font-size: 30px;
}
.info-teaser-main .info p{
   font-weight: 700;
   font-size: 20px;
}

/******************* map-main *************************/

.map-main {

}

/******************* overviewpages-main *************************/

.overviewpages-main {

}

.overviewpages-main .overview-item {
   height: auto;
   overflow: hidden;
   box-sizing: border-box;
   float: left;
   padding:15px;
}

.overviewpages-main .overview-item .detail-link {
   display: block;
}

.overviewpages-main .overview-item .teaser-image {
   margin-bottom: 20px;
}

/******************* text-image-list-main *************************/

.text-image-list-main {

}

.text-image-list-main .box {
   width: calc(100%/3);
   float: left;
   padding: 15px;
   box-sizing:border-box;
}

.text-image-list-main-image {
   margin-bottom:15px;
}

/******************* text-image-main *************************/

.text-image-main {

}

.text-image-main img {
   width:100%;
}

.text-image-main .right-column {
   width: 45%;
   overflow: hidden;
   float: right;
}

.text-image-main .left-column {
   width: 45%;
   overflow: hidden;
   float: left;
}

.text-image-main .left-column .text {
   box-sizing: border-box;
   /*padding: 15px;*/
}

/******************* text-main *************************/

.text-main .text {
   /*padding:15px;*/
}
.text-main ol,
.text-main ul {
   font-size: 28px;
   color: #000;
   line-height: 35px;
}
.text-main ol li,
.text-main ul li {
   font-size: 28px;
   color: #000;
   line-height: 35px;
   display: block;
   clear: both;
}

/******************* texteditor-info *************************/

.texteditor-info {
   padding: 15px;
}