body                            { margin: 0; padding: 0; font-family: "Abel", Helvetica, Arial, sans-serif; font-weight: 400; width: 100%; min-height: 100%; line-height: 130%; font-size: 17px; line-height: 28px; font-weight: 200; background-color: white; position: relative; }

a                               { color: inherit; }
a:hover                         { cursor: pointer; }

h1                              { color: #000; }
h2                              { color: #000; font-size: 27px; margin: 0; margin-bottom: 10px; font-weight: normal; }
h3                              { color: #000; }

page                            { display: block; min-height: calc(100vh - 235px); height: 100%; position: relative; overflow: auto; }


.noselect                       { -webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; /* Safari */-khtml-user-select: none; /* Konqueror HTML */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge */user-select: none; /* Non-prefixed version, currentlysupported by Chrome and Opera */ }


/* ########## Header ########## */

pageheader                      { display: block; width: 100%; height: 100px; background: rgba(255,255,255,0.85); color: #666666; background: rgba(255,255,255,0.85); }
.header-title                   { font-size: 30px;  display: inline-block; font-family: "Kanit", Helvetica, Arial, sans-serif; font-weight: 700; transition: .3s; letter-spacing: 0.5px; }
.header-title:hover             { color: #000; }

mainNav                         { display: inline-block; float: right; }
mainNav ul                      { margin: 0; padding: 0; list-style: none!important; font-size: 18px; }
mainNav ul li                   { float: left; padding: 0 15px; }
mainNav ul li a                 { text-decoration: none; }
mainNav ul li a.a_1_active      { color: #000; }
mainNav ul li a:hover           { color: #000; }


.headerimage                   { height: 300px; color: #fff; font-family: "Kanit", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 26px; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; }
.headerimage-title             { display: inline-block; position: absolute; bottom: 0; width: 100%; background-color: rgba(0,0,0,0.4); padding-bottom: 20px; padding-top: 13px; }

/* ############################ */




/* ########## Footer ########## */

footer                          { display: block; width: 100%; height: 235px; position: page; bottom: 0; background: #323232; color: #fff; line-height: 23px; }
footer a                        { text-decoration: none; }
.footer-title                   { font-size: 34px; margin-bottom: 12px; display: inline-block; }
.footer-desc                    { font-size: 18px; color: rgba(255, 255, 255, 0.6); margin-bottom: 12px; display: inline-block; }
.footer-phone                   { font-size: 34px; font-weight: bold; margin-bottom: 12px; background-image: url('/typo3conf/sites/tom/graphik/phone.svg'); background-repeat: no-repeat; padding-left: 37px; display: inline-block; }


dutyNav                         { position: absolute; right: 0; top: 0; }
dutyNav ul                      { list-style: none!important; margin: 0; padding: 0; color: rgba(255, 255, 255, 0.6); }
dutyNav ul li                   { float: left; padding: 0 10px; font-size: 18px; transition: .3s; }
dutyNav ul li:hover             { color: #fff; }


scrollTop                       { width: 50px; height: 0px; background: #25395f; z-index: 200; position: fixed; bottom: 0px; right: 20px; cursor: pointer; transition: .5s; background-image: url("/typo3conf/sites/tom/graphik/up-arrow.svg"); background-repeat: no-repeat; background-size: 60%; background-position-x: center; background-position-y: 5px;  }

/* ############################ */



.burgerIcon { display: none; width: 35px; height: 35px; background-image: url("/typo3conf/sites/tom/graphik/burger_icon.svg"); float: right; background-repeat: no-repeat; }



/* TRIO */

.trio-frame                     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; -webkit-column-gap: 30px; grid-column-gap: 30px; }
.trio-container                 {  }
.trio-container a               { display: block; }

.trio-image                     { width: 100%; padding-top: 70%; background-repeat: no-repeat; background-size: cover; background-position: center; margin-bottom: 30px; }
.trio-title                     { font-family: "Kanit", Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 400; letter-spacing: 0.5px; line-height: 1; }
.trio-subheader                 { font-family: "Kanit", Helvetica, Arial, sans-serif; font-size: 140px; font-weight: 600; letter-spacing: 0.5px; color: rgba(0,0,0,0.05); height: 0; position: relative; top: 10%; left: -20px; }
.trio-text                      {  }
.trio-link                      { font-family: "Kanit", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; margin-top: 30px; display: inline-block; }
.trio-link a                    { text-decoration: none; display: inline-block; }


/**/





/* REFERENZEN */

.ref-frame                                  { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.ref-item                                   { color: #fff; width: 100%; position: relative; padding-top: 75%; background-size: 100%; background-repeat: no-repeat; background-position: center; transition: 1s;  }
.ref-item:hover .ref-title                  { opacity: 1; }
.ref-item:hover                             { background-size: 120%; }
.ref-item .ref-title                        { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; transition: .5s; background: rgba(0,0,0,0.5); opacity: 0; text-transform: uppercase; }
.ref-item .ref-title .ref-center            { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }



.ref-home-control-container                 { width: 100%; display: inline-block; position: relative; margin-bottom: 30px; }
.ref-home-control-container ul              { list-style: none!important; margin: 0; padding: 0; display: inline-block; }
.ref-home-control-container ul li           { float: left; border: 2px solid #182649; color: #182649; padding: 5px 20px; margin: 0 5px; cursor: pointer; transition: .3s; }
.ref-home-control-container ul li:hover     { color: #fff; background-color: #182649; }
.ref-home-control-container ul li.active    { color: #fff; background-color: #182649; }


.ref-detail-container                       { display: grid; grid-template-columns: 1fr 2fr; gap: 100px; column-gap: 100px; grid-column-gap: 100px; -webkit-column-gap: 30px; }
.ref-detail-side                            {  }
.ref-detail-title                           { font-family: "Kanit", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0.5px;  }
.ref-detail-bigimage                        { width: 100%; padding-top: 75%; background-repeat: no-repeat; background-size: cover; background-position: center;  }
.ref-detail-bigimage-frame                  { padding: 10px; border: 1px solid #bababa; }



.ref-detail-imagepicker-container           { display: flex; margin-top: 5px; justify-content: center; }
.ref-detail-imagepicker-frame               { height: 75px; width: 100px; border: 1px solid #bababa; margin: 5px; padding: 6px; cursor: pointer; }
.ref-detail-imagepicker-frame.active        { padding: 5px; border: 2px solid #25395f; }
.ref-detail-imagepicker-image               { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; }


/**/




/* FLEXSLIDER */

.flexslider                                 { border: 0; }
.flexslider .caption-wrapper                { position: absolute; top: 100px; width: 1200px; }


.slick-slide img {width: 100%; object-fit: cover; }


/**/




/* KONTAKTFORMULAR */

.contact-form                               { margin-bottom: 15px; }
.contact-form .control-label                { display: none; }
.contact-form .contact-field                { margin-bottom: 12px; }
.contact-form .contact-field-textarea       { margin-top: 16px; }
.contact-form input                         { width: 100%; box-sizing: border-box; font-family: "Abel", Helvetica, Arial, sans-serif; font-size: 16px; padding: 2px 7px; border: 1px solid #ccc; }
.contact-form textarea                      { width: 100%; box-sizing: border-box; font-family: "Abel", Helvetica, Arial, sans-serif; font-size: 14px; padding: 2px 7px; border: 1px solid #ccc; resize: vertical; min-height: 120px; }
.contact-form button                        { width: 50%; box-sizing: border-box; font-family: "Abel", Helvetica, Arial, sans-serif; font-size: 14px; padding: 2px 7px; border: 1px solid #25395f; background-color: #25395f; color: #fff; margin-top: 10px; cursor: pointer; }
.contact-form button:hover                  { background-color: #fff; color: #25395f; }


.contact-form .text-1           { float: left; width: 48%; margin-right: 2%; }
.contact-form .text-2           { float: left; width: 48%; margin-left: 2%; }
.contact-form .email-1          { clear: both; float: left; width: 48%; margin-right: 2%; }
.contact-form .telephone-1      { float: left; width: 48%; margin-left: 2%; }

.contact-split-container        { display: grid; grid-template-columns: 1fr 2px 1fr; gap: 50px; column-gap: 50px; -webkit-column-gap: 50px; }
.contact-split-line             { background: #ccc; }

/**/




header                          { font-family: "Kanit", Helvetica, Arial, sans-serif; font-size: 30px; text-align: center;  }
header h2                       { font-family: "Kanit", Helvetica, Arial, sans-serif; font-size: 30px; text-align: center; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 30px; }

pageblock                       { display: block; width: 100%; }
pagewrap                        { display: block; width: 1200px; margin: 0 auto; position: relative; height: 100%; }
.pageblock-padding              { padding: 30px 0; }
.pageblock-padding-2            { padding: 60px 0; }
.pageblock-flexslider           { position: relative; max-height: 1100px; }
.pageblock-headerimage          { position: relative; top: -100px; margin-bottom: -100px; z-index: -1; }
.pageblock-home-header          { position: absolute; top: 0; z-index: 100; }


pageblock ul                    { list-style-type: square; }

strong                          { font-weight: 600; }

.height-100                     { height: 100%; }
.width-100                      { width: 100%; }
.right-0                        { right: 0; }
.position-center-y              { position: absolute; top: 50%; transform: translateY(-50%); }
.position-center-x              { position: absolute; left: 50%; transform: translateX(-50%); }
.position-center-relative-x     { position: relative; left: 50%; transform: translateX(-50%); }
.position-center                { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.overflow-hidden                { overflow: hidden; }

.display-flex                   { display: flex; }

.parallax-dummy                 { width: 100%; height: 150px; background: #7a7a7a; background-image: url("/fileadmin/user_upload/IMG_5478.JPG"); background-repeat: no-repeat; background-size: cover; background-position-x: center; background-position-y: 0; }
.dummy-1                        { background-image: url("/fileadmin/user_upload/IMG_5478.JPG"); }
.dummy-2                        { background-image: url("/fileadmin/user_upload/IMG_3081.jpg"); }




.flex-prev, .flex-next                      { font-size: 0; background-size: contain; background-repeat: no-repeat; }
.flex-prev                                  { background-image: url("../../graphik/flexslider_left_2.png"); }
.flex-next                                  { background-image: url("../../graphik/flexslider_right_2.png"); }

.flex-direction-nav                         { position: absolute; top: calc((100% * 0.444) + 72px); width: 100%; }
.flex-direction-nav a::before               { content: none; top: 20px; position: relative; }
.flex-direction-nav a.flex-next::before     { content: none; }
.flex-direction-nav a                       { width: 20px; }


.tx-ws-flexslider .caption-title        { margin-top: 0; }


#headerLogoSmall                        { display: none;  }
#headerLogoSmall img                    { height: 45px; width: 73.24px; }
.hidden                                 { display: none; }


@media only screen and (max-width: 1300px) { 

    pagewrap                            { width: initial; margin: 0 50px; }

    .trio-title                         { font-size: 2vw; line-height: 2.4vw; }
    .trio-subheader                     { font-size: 10.76vw; top: 3vw; left: -1.6vw; }
    .trio-link                          { margin-top: 2vw; }
    .ref-detail-imagepicker-frame       { height: 7.5vw; width: 10vw; }

 }


@media only screen and (max-width: 1000px) { 
    .ref-detail-container               { grid-template-columns: 1fr; gap: 0; column-gap: 0; -webkit-column-gap: 0; }

 }


@media only screen and (max-width: 760px) { 

    .ref-frame                          { grid-template-columns: 1fr 1fr; }
    .tx-ws-flexslider .caption-text     { width: 250px; font-size: 14px; }

    .footer-title, .footer-desc         { width: 100%; text-align: center; }
    .footer-phone                       { position: absolute; left: 50%; transform: translateX(-50%); }
    .footer-text-container              { top: 45%; }
    dutynav                             { margin-top: 7vw; display: inline-block; position: relative; left: 50%; transform: translateX(-50%); }

    .pageblock-flexslider               { height: calc(100vw * 0.48); }


    footer                              { height: calc(100vw * 0.5); }
    page                                { min-height: calc(100vh - calc(100vw * 0.5)); }

    .footer-text-container              { top: 50%; }

    .contact-split-container                        { grid-template-columns: 1fr; gap: 20px; column-gap: 20px; -webkit-column-gap: 20px; }
    .contact-split-containe .contact-split-line     { display: none; }



 }


@media only screen and (max-width: 660px) { 

    .ref-frame                              { grid-template-columns: 1fr; }
    .tx-ws-flexslider .caption-text         { display: none; }
/*    .tx-ws-flexslider .flex-direction-nav   { display: none; }*/
    .tx-ws-flexslider .flex-direction-nav   { top: calc((100% * 0.444) + 10px); }
    mainnav                             { display: none; }
    #headerLogo                         { display: none; }
    #headerLogoSmall                    { display: inline-block; }
    pagewrap                            { margin: 0 25px; }
    pageheader                          { height: 75px; }

    .burgerIcon                         { display: inline-block; }

    .trio-frame                         { grid-template-columns: 1fr; }
    .trio-title                         { font-family: "Kanit", Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 400; letter-spacing: 0.5px; line-height: 1; }
    .trio-subheader                     { font-family: "Kanit", Helvetica, Arial, sans-serif; font-size: 140px; font-weight: 600; letter-spacing: 0.5px; color: rgba(0,0,0,0.05); height: 0; position: relative; top: 10%; left: -20px; }

    footer                              { line-height: 4vw; }
    .footer-title                       { font-size: 6vw; }
    .footer-desc                        { font-size: 3vw; }
    dutynav ul li                       { font-size: 3vw; }
    .footer-phone                       { font-size: 4.4vw; padding-left: 6vw; }

    .parallax-dummy                     { background-size: calc(100% + 150vw); }

    .ref-home-control-container ul li   { float: initial; display: block; text-align: center; margin-bottom: 10px; }


    .pageblock-flexslider               { height: calc(100vw * 0.51); top: 75px; margin-bottom: 75px; }
    .headerimage                        { font-size: 5vw; }

 }