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

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

html {
    height: 100%;
}

body {
    height: 100%;
    font-size:16px;
    /*font-family:"Arial";*/
}

/*****************************************************************
*********** Allgemeine Selectoren
******************************************************************/
h1 {
    font-size:36px;
    font-family: 'Lato Bold';
}

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

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

h1,h2,h3 {
    /*font-weight: 800;*/
}

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

span {
    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 {

}

.text ol, .text ul{
    margin-left: 10%;
    padding: 10px 0px;
}

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

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

.contentbox {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    overflow: hidden;
    position: relative;
}

.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;*/
    height: 60px;
    background-color: #fff;
}

#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%);
}

#main-canvas.start_template .head-text{
    padding-left: 30px;
}

.head-text {
    box-sizing: border-box;
    display: block;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
    padding: 20px 0px 20px 290px;

}

.mainheadline {
    line-height:40px;
}

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

#footer-canvas{
    height: auto;
    width: 100%;
    box-sizing:border-box;
    overflow:hidden;
    position:relative;
    padding: 30px 15px 10px 15px;
}

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

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

#footer-canvas .center-column{
    text-align: center;
}
#footer-canvas .left-column{
    padding-left: 15px;
}
.nav-footer {
    width: auto;
    height: auto;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}

#footer-canvas .copyright {
    margin-top:15px;
    text-align: center;
}
.copyright.footer-bar {
    display: inline-block;
    line-height: 30px;
    float: left;

}
.nav-footer-item {
    width:auto;
    height:auto;
    float:left;
    margin-left:15px;
    list-style: none;
}
.nav-footer{
    float: left;
}
.nav-footer-link {
    font-size:18px;
    line-height:30px;

}
#footer-bar{
    position: relative;
    padding: 10px 0px;
}
.footer-bar-content{
    display: inline-block;
}
#footer-canvas .column.center-column{
    text-align: center;
}
.social-media-link {
    display:block;
    width:30px;
    height:30px;
    overflow:hidden;
    float:right;
    /*margin-left:10px;*/
    font-size: 30px;
    font-family: 'Font Awesome 5 Brands';
    padding: 5px;
}


#instagram-link {

}

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

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

#sliderStatisch{
    width:100%;
    max-width:1400px;
    max-height:550px;
    display:block;
    overflow:hidden;
}

#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;

    /*padding-right: 280px;*/
}

#content-canvas.standard{
    width: calc(100% - 580px);
    padding: 0px 10px;
}
#main-canvas.standard_no_info{
    padding-right: 0px;
}

#content-canvas.standard_no_info{
    width: calc(100% - 280px);
    padding-left: 10px;
}
#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;
}

#nav2-canvas{
    width: 280px;
    min-height: 4px;
    display: inline-block;
    float: left;
    height: auto;
    overflow: hidden;
}
#info-canvas{
    width: 280px;
    float: right;
}

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

.mobile-div {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: white;
    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: #2C2727;
    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: auto;
    width: auto;
}

.nav1-mobile{
    width: 100vw;
    transition: ease-in-out .6s;
    height: auto;
    overflow: hidden;
    position: fixed;
    top: 60px;
    z-index: 999;
    height: calc(100vh - 60px);
    left: -100vw;
}
.nav1-mobile li{
    width: 100%;
    color: white;
    /*font-family: 'Pacifico';*/
    padding: 0px 50px;
    box-sizing: border-box;
}


.nav2-mobile-link {
    line-height: 30px;
}
.nav1-mobile-link span{
    font-size: 24px;
    /*margin-bottom: 5px;*/
}

.nav2-mobile-link span{
    font-size: 20px;
    /*margin-bottom: 5px;*/
}

.nav1-mobile-link, .nav2-mobile-link{
    padding: 15px 20px;
    display: block;
    margin-bottom: 7px;
}
/*****************************************************************
*********** Seitenelemente
******************************************************************/

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


.text-main p {
    margin-bottom: 10px;
}


/******************* 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 0px;
    text-align: left;
    /*font-family: 'Krub';*/

}
.contactform .textbox {
    height: 30px;
    width: 60%;
    padding: 4px 10px;
    margin-bottom: 15px;
}
.contactform #nachricht{
    width: 60%;
    height: 100px;
    padding: 10px;
    resize: none;
}
.contactform .button-submit{
    width: 40%;
    /*height: 35px;*/
    margin-top: 25px;
    border: none;
    padding: 15px;
    cursor: pointer;

}
.contactform .form-label{
    /*   width: 100px;
       display: inline-block;*/

    display: block;
    width: 100%;
    padding-bottom: 5px;
}

.email2{
    display: none;
}


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

.downloads-info {
    padding:15px;
}

.downloads-info .headline {

}

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


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

ul.download-list {
    list-style: none;
}

.download-link {

}

.download-link {
    box-sizing: border-box;
    display: block;;
    /*   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: 10px 0px;
    display: flex;
    justify-content: space-around;
}
.info-teaser-main .info{
    /*width: calc((100% - 10px) / 3);*/
    /*float: left;*/
    text-align: center;
    /*padding: 40px 0px;*/
    /*margin-right: 5px;*/
    box-sizing: border-box;
    width: calc((100% - 100px) / 3);
    padding: 40px 30px;


}
.info-teaser-main .info:nth-child(4) {
    margin-right: 0px;
}
.info-teaser-main .info h2{
    margin: 0px;
    font-size: 30px;
    margin-bottom: 10px;
}
.info-teaser-main .info p{
    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:20px 15px;;*/
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 5px;
}

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

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

/******************* 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 *************************/

#content-canvas.start_template .text-image-main .left-column.text-column,
#content-canvas.start_template .text-image-main .right-column.text-column{
    padding-left: 30px;
    /*padding-top: 25px;*/
    box-sizing: border-box;
}


.text-image-main {

}

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

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

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

.text-image-main .left-column .text {
    box-sizing: border-box;
    padding: 0px 25px 25px 0px;
}

/******************* image-info *************************/

.pageElement-image-info{
    width: 100%;
    display: block;
    padding: 0px 15px;
    box-sizing: border-box;
    max-width: 250px;
}

.pageElement-image-info .text{
    margin-top: 5px;
    font-size: 14px;
    display: block;
}
/******************* text-main *************************/
#content-canvas.start_template .text-main .text{
    padding: 15px 30px 15px;
}


.text-main .text {
    padding:15px 0px;
}
.text-main .text.center{
    text-align: center;
}
/******************* texteditor-info *************************/

.texteditor-info {
    padding: 15px;
}



/*#### Main Navigation ###*/

#main-navigation{
    display: block;
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
}


/*### nav-1 ###*/
.nav1{
    display: block;
    overflow: hidden;
}
.nav1-item{
    display: inline-block;
}

.nav1-link{
    display: inline-block;
    padding: 20px 20px;
}

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



/*####### text-image ##########*/
.left-column.text-column, .right-column.text-column{
    display: block;
    position: relative;
    /*top: 50%;*/
    /*transform: translate(0, -50%);*/
}

.right-column.text-column{
    right: 0px;
    padding: 0px 25px 25px 25px;
    box-sizing: border-box;
}
.text-image-main{
    position: relative;
}


/*########################### multipager #####################*/



.text-image-main{
    /*text-align: center;*/
}



.margin-main-height{
    display: block;
    width: 100%;
    min-height: 5px;
}






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

.contactform {
    padding-top: 10px;
    /*text-align: center;*/
    color: white;
    padding-bottom: 25px;
    color: #000;
}
.contactform .defaultform{
    width: 80%;
    /*padding: 50px 10%;*/
    /*text-align: center;*/

}
.contactform .email2{
    display: none;
}
.contactform .textbox {
    height: 30px;
    width: 100%;
    padding: 2px 6px;
    margin-bottom: 15px;
    max-width: 300px;
}
.contactform #nachricht{
    width: 300px;
    height: 100px;
    padding: 10px;
}
.contactform .button-submit{
    width: 225px;
    height: 35px;
    margin-top: 25px;
    border: none;
    padding: 5px;
    /*background-color: #007cc4;*/
    color: #fff;
    cursor: pointer;
    margin-left: 103px;
}
.contactform .button-submit:hover{
    cursor: pointer;
    /*background-color: #0072BB;*/
}
.contactform .form-label{
    width: 100px;
    display: inline-block;
}

.em
#email2, .email{
    display: none;
}
.contactform .form-info, .contactform .title{
    /*margin-left: 100px;*/
}
.form-row.nachricht {
    display: flex;
    justify-content: center;
}

.contactform .form-row label{
    display: inline-block;
    width: 100px;
    color: #000;
}
.contactform .form-row label[for="nachricht"]{
    float: left;
}
.contactform .anrede{
    height: 45px;
    line-height: 40px;
}
.contactform .form-label {
    text-align: left;
}
.contact-form-table{
    width: 100%;
}

.contactform .td-label label{
    line-height: 36px;
}

@media only screen and (max-width: 340px) {
    .contactform .textbox{
        margin-left: 15px;
        width: 64%;
    }  
}