html, body {font-family: 'montserrat', sans-serif;overflow-x: hidden;background: #202020;}
:root {
    --main-color:#2460AB;
    --main-color-flu: rgba(36,96,171,.8);
}
.footer-bottom-bordered a {color:#fff !important;font-weight:300}
.footer-bottom-bordered {
    margin-top: 60px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 18px;
    color: #fff !important;
}

#cerezPopup {position: fixed;left: 50px;bottom: 50px;background: #fff;-webkit-box-shadow: 0px 10px 23px 0px rgb(171 171 171 / 23%);-moz-box-shadow: 0px 10px 23px 0px rgba(171,171,171,0.23);box-shadow: 0px 10px 23px 0px rgb(171 171 171 / 23%);font-size: 16px;color: #000;font-weight: 300;width: 350px;padding: 30px;padding-top:40px;display: flex;align-items: flex-start;justify-content: center;flex-direction: column;border-radius: 20px;z-index: 999;transition: all .4s;visibility:hidden;opacity: 0;}
#cerezPopup:not(.active) {pointer-events: none;user-select: none;}
#cerezPopup.active {opacity: 1;visibility: visible;}
#cerezPopup a#kabulet {background: #e8412c;border-radius: 100px;padding: 8px 30px;color: #fff;font-weight: 400;display: inline-block;margin-top: 30px;}
#cerezPopup a#closebutton {position: absolute;top: 15px;right: 10px;z-index: 2;cursor: pointer;}
#cerezPopup a#closebutton svg{height: 15px;}
.logos {display:flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;gap: 15px;margin-bottom: 30px;}
.logos img {flex: 0 0 auto;margin-right: 20px;height: 50px;width: auto !important;filter: brightness(0) invert(1);opacity: .4;max-width: calc(40% - 7px);object-fit: contain}
.font-nycd {font-family: 'Caveat', cursive;font-size: 45px;}
.table-content{display: table; width: 100%; height: 100%;}
.table-cell-content{display: table-cell; vertical-align: middle; text-align: center;}
.table-content.left{display: table; width: 100%; height: 100%;}
.table-content.left .table-cell-content{display: table-cell; vertical-align: middle; text-align: left;}
.disp-block {display: block !important;}
#whatsapp {position: fixed;bottom: 50px;z-index: 9999;}
#whatsapp.left {left: 50px;}
#whatsapp.right {right: 50px;}
#whatsapp img{max-width: 70px;}
#whatsapp.left img{filter: drop-shadow(-10px 10px 4px rgba(0,0,0,0.1));}
#whatsapp.right img{filter: drop-shadow(10px 10px 4px rgba(0,0,0,0.1));}
.m0 {margin: 0 !important;}
.p0 {padding: 0;}
* {outline: none !important;}
.fl-r {float: right;}
.s-margin {margin: auto 120px;}
.df-center {display: flex;align-items: center;}
p.baslik{color: var(--main-color);font-size: 65px;font-family: 'Caveat', cursive;line-height: normal;font-weight: 200;}
p.baslik.small{font-size: 40px !important;}
p.baslik.big{font-size: 135px !important;}
.mt75 {margin-top: 75px !important;}
.mt50 {margin-top: 50px !important;}
.mt30 {margin-top: 30px !important;}
form {position: relative;}
.form-loading{background-repeat: no-repeat;width:100%;height: 100%;position: absolute;top:0;left: 0;background-color: rgb(32 32 32 / 80%);z-index: 2;background-position:center center;display: flex;align-items: center;justify-content: center;text-align: center;flex-direction:column;display:none;border-radius: 30px;margin-top: 0px;}
.form-loading p{font-size: 18px !important;padding: 0 30px !important;color: #fff !important;font-weight: 200 !important;display:none;margin: 0 !important;}
.form-loading img {max-width: 35% !important;max-height: 35% !important;object-fit: contain;}
.form-loading.send p{display: inline-table;}
.form-loading.send{background-image:none;display:flex;}
.form-loading.send img.loading-svg {display:none;}
.form-loading.send p:first-child {padding: 0 !important;}
.form-loading.send p img {
    max-width: 20% !important;
    margin-bottom: 30px !important;
}
.mobile-visible{display:none;}
.wp-mesaj {position: fixed;bottom: 30px;right: 30px;z-index: 5;}
.wp-mesaj img{max-width: 50px;}
a {text-decoration: none !important;}
.h-fix {height:1px; min-height: 100%;}
.h-full {height:100%;}
.img-box {width: 100%; position: relative; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; background-color: transparent;}
.img-box::after {display: block; padding-bottom: 100%; content: '';}
.img-box.h50::after {display: block; padding-bottom: 50% !important; content: '';}
.h-m100 {min-height: 100vh;}
.img-box p.type {padding: 8px 30px; color: #fff; font-weight: 500; letter-spacing: 1px; position: absolute;bottom: 30px; right: 0; border-radius: 100px 0 0 100px;}
.img-box p.type.satilik {background: #34db3a;}
.img-box p.type.kiralik {background: #dce50d; color: #000;}
.m0a {margin: 0 auto; display: inline-block;position: relative;left: 50%;transform: translateX(-50%);}
h1.head {font-weight: 400;font-size: 70px;color: #C4C4C4;}
p.text {font-size: 24px;color: #C4C4C4;font-weight: 400;line-height: 160%;}
.pl0 {padding-left: 0;}
.hidden {display: none !important;}
/* width */
::-webkit-scrollbar {width: 5px;}
/* Track */
::-webkit-scrollbar-track {background: #fff;}
/* Handle */
::-webkit-scrollbar-thumb {background: linear-gradient(90deg, #202020, #c4c4c4,#202020);}
.show {display: block !important;}
a.button {padding: 20px 40px;border-radius: 100px;border: 1px solid #C4C4C4;color: #FEFEFF;transition: all .4s;text-transform: uppercase;}
a.button:hover {background: #C4C4C4;color: #202020;}

body.white-page {background: #fff;}
body.white-page header {position: relative;}
body.white-page header img.logo {filter: none !important;}
body.white-page header ul li a {color: #202020 !important;font-weight: 400 !important;}
body.white-page h1.head {color: #444444;}
body.white-page p.text {color: #444444;}
body.white-page h2.product-head {color: #444444;}


header {display: flex;align-items: center;justify-content: space-between;padding:0 120px;position: absolute;top: 0;left: 0;width: 100%;height: 150px;z-index: 2;}
header img.logo {filter: brightness(0) invert(1)}
header ul {padding: 0;margin:0;list-style: none;}
header ul li{float: left;margin-right: 5px;}
header ul li a{font-size: 18px;color: #fff !important;font-weight: 300;border: 1px solid transparent;padding: 15px 25px;border-radius: 100px;transition: all .4s;}
header ul li a:hover {border-color: #c4c4c4;}


#callUs {position: fixed;bottom: 0;right: 0;padding:20px 70px;background: #058750;border-top-left-radius: 100px;display: flex;align-items: center;justify-content:center;flex-direction: column;z-index: 99999;min-height: 300px;transform: translateX(100%);transition: all .4s;}
#callUs.active {transform: translateX(0);}
#callUs h1 {width: auto;display: inline-block;margin: 0;border-bottom: 1px solid #fff;max-width: 60%;margin-bottom: 15px;padding-bottom: 15px;width: 100%;color: #fff;text-align: center;font-size: 28px;}
#callUs p {font-size: 15px;color: #fff;font-weight: 400;text-align: center;}
#callUs a {background: #000;color: #fff;border: 2px solid #000;transition: all .4s;border-radius: 100px;display: flex;align-items: center;justify-content: center;gap: 5px;font-size: 16px;font-weight: 600;padding: 10px 30px;margin-top: 10px;}
#callUs a img {height: 20px;}
#callUs a:hover {background: transparent;border-color: #fff;}
#callUs a.close {padding: 0;margin: 0;position: absolute;top: 30px;right: 30px;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;display: inline-flex;border-radius: 100px;}
#callUs a.close span{transform: translateY(-2px)}


.items-234 {display: flex;flex-wrap: wrap;align-items: stretch;justify-content: center;gap: 30px;}
.items-234 .item {border: 1px solid #dedede; padding: 50px;min-height: 250px;width: calc(33.3% - 20px)}
.items-234 .item h4 {font-size: 24px;color: #000;font-weight: 600;margin:0;margin-top: 20px;}
.items-234 .item p {font-size: 16px;color: #000;font-weight: 400;margin:0;margin-top: 15px;display: block;}

.items-235 {display: flex;flex-wrap: wrap;align-items: stretch;justify-content: center;gap: 30px;}
.items-235 .item {border: 1px solid #dedede; padding: 50px;min-height: 250px;text-align: center;display: flex;align-items: center;justify-content: center;flex-direction: column;width: 30%;}
.items-235 .item h4 {font-size: 24px;color: #000;font-weight: 600;margin:0;margin-top: 20px;text-align: center;max-width: 70%;}


#home {background: #202020;min-height: 100vh;padding: 0 120px;padding-top: 150px;position: relative;overflow: hidden;}
#home ul.ops {margin: 0;padding: 0;list-style: none;margin-top: 150px;position: relative;z-index: 3;}
#home ul.ops li{margin-bottom: 5px;font-weight: 100;font-size: 48px;color: #5E5E5E;transition: all .4s;cursor:default !important;text-align: left !important;}
#home ul.ops li:hover{color: #fff;}
#home {display: flex;align-content: stretch;justify-content: flex-start;}
#home .item {flex: 0 0 33.3%;position: relative;}
#home .item.img {flex: 0 0 33%;padding: 0 40px;position: relative;z-index: 1;}
#home .item {text-align: center;}
#home .item .home-center-img {border-radius: 500px;display: inline-block;width: 100%;transition: all .4s;}
#home .item .home-center-img:hover {background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4))}
#home .item .home-center-text {font-size: 80px;color: #fff;font-weight: 200;position: absolute;bottom: 200px;transform: scale(1.3);line-height: 100%;}
#home .item .home-center-text strong{font-weight: 700}
#home .item .scrolldown {font-size: 14px;color: #c5c5c5;transition:all .4s;font-weight: 500;letter-spacing: 14px;margin-top: 50px;display: inline-block;}
#home .item .scrolldown:hover {letter-spacing: 25px;}
#home::before {content: '';width: 55vw;height: 55vw;border: 3px solid #C5C5C5;border-radius: 700px;position: absolute;bottom: -30%;left: 50%;transform: translateX(-50%); z-index: 0}
#home::after {content: '';position: absolute;bottom: 0%;height: 100%;width: 100%;background: transparent url(/front/images/home-shadow.png) center center no-repeat;background-size: cover;background-position: top center;left: 0;z-index: 0;}


#about-page {padding-bottom: 200px;}
#about-page .about-head {padding: 200px 0;background:#202020 url(/front/images/about-back.jpg) center center no-repeat;background-size: cover;position: relative;min-height: 100vh;}
#about-page .about-head::after {content: '';position: absolute;bottom: 0;height: 100%;width: 100%;background: transparent url(/front/images/home-shadow.png) center center no-repeat;background-size: cover;background-position: top center;left: 0;z-index: 0;}
#about-page * {position: relative;z-index: 1;}
#about-page h1.head {font-size: 96px;}
#about-page h2.subhead {font-size: 24px;color: #c4c4c4;font-weight: 400;margin-top: 30px;}
#about-page h2.subhead + p.text {margin-top: 200px;font-size: 24px;font-weight: 300;}
#about-page .item {text-align: center;}
#about-page .item img{border-radius: 10px;}
#about-page .item p.item-head {font-size: 36px;color: #c4c4c4;font-weight: 600;margin-top: 30px;margin-bottom: 0px;}
#about-page .item p.item-content {font-size: 18px;color: #c4c4c4;font-weight: 400;margin-top: 30px;margin-bottom: 20px;padding: 0 50px;}
#about-page img {opacity: .5;transition: all .7s;}
#about-page img:hover {opacity: 1}
#about-page .twolastRow {margin-top: 150px;display: flex;align-items: stretch;justify-content: center;}
#about-page .twolastRow {margin-top: 150px;}
#about-page .twolastRow img {flex: 0 0 30%}
#about-page .twolastRow p {display: flex;align-items: center;justify-content: flex-start;flex-direction: column;flex: 0 0 30%;margin-left: 30px;}
#about-page h2.subhead {font-size: 48px;color: #C4C4C4;font-weight: 900;margin-top: 100px;margin-bottom: 50px;text-align: center;}
#about-page p.text span {display: block;margin-top: 100px;}
#about-page p.text span:first-child {margin-top: 50px;}



#about-page.partners-page .about-head {padding-bottom: 0;background-image: url(/front/images/partners-back.jpg) !important;}
#about-page.partners-page h2.subhead {font-size: 24px;color: #c4c4c4;font-weight: 400;margin-top: 20px;}
#about-page.partners-page h2.subhead + p.text {margin-top: 120px;}
#about-page.partners-page p.text strong {font-size: 48px;font-weight: 400;}
#about-page.partners-page p.text span {font-weight: 700;}


#kampagnen {min-height: 100vh;display: flex;align-items: stretch;justify-content: space-between;padding: 0 100px;padding-top: 150px;padding-bottom: 80px;}
#kampagnen .left {display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;flex: 0 0 30%;padding-bottom: 100px;}
#kampagnen .left div {position: sticky;top: 30px;}
#kampagnen .left h1.head {font-size: 32px;color: #959595;font-weight: 900;}
#kampagnen .left p {font-size: 18px;color: #959595;font-weight: 300;max-width: 80%;margin-top: 20px;line-height: 150%;}
#kampagnen .right  {flex: 0 0 65%;flex-wrap: wrap;display: flex;align-items: center;justify-content: space-between;}
#kampagnen .right .grid {position: relative;min-height: 100%;min-width: 100%;}
#kampagnen .right .grid .item {width: 25%;/* margin-bottom: 20px; */padding: 15px;}
#kampagnen .right .grid .item.w2 {width: 50%;}
#kampagnen .right .grid .item img {border-radius: 10px;max-width: 100%;width: 100%;transition: all .4s;}
#kampagnen .right .grid .item:hover img {opacity: .4;}

/*#kampagnen .right .item {flex: calc(30%);height: 220px;position: relative;border-radius: 20px;overflow:hidden;padding:20px;margin-bottom: 30px;margin-right: 30px;background-size: 103%;background-repeat: no-repeat;background-position: center center;cursor: pointer;transition: all .4s;filter: drop-shadow(0px 5px 22px rgba(0, 0, 0, 0.2));}*/
/*#kampagnen .right .item:hover {transform: scale(.85);}*/
/*#kampagnen .right .item .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: -webkit-linear-gradient(90deg,rgba(32,32,32,1),rgba(32,32,32,.9),rgba(32,32,32,.5), rgba(32,32,32,0));padding: 20px;display: flex;align-items: flex-end;justify-content: center;padding-bottom: 10px;}*/
/*#kampagnen .right .item .overlay .ftr {display: flex;align-items: center;justify-content: center;}*/
/*#kampagnen .right .item .overlay .ftr h2 {font-size: 16px;color: #fff;font-weight: 900;text-transform: uppercase;}*/
/*#kampagnen .right .item .overlay .ftr p {font-size: 14px;color: #fff;font-weight: 300;margin-top: 5px;}*/
/*#kampagnen .right .item .overlay .ftr .content {padding-left: 20px;}*/


#getanoffer {background: #fff;border-radius: 20px;padding: 50px;display: none;width: 600px;max-width: 90%;}
#getanoffer label {display: block;text-align: center;}
#getanoffer label.small {font-size: 16px;color: #555;font-weight: 300;margin:0;margin-top: 10px;}
#getanoffer label.small span {font-weight: 500;}
#getanoffer label.big {margin:0;font-size: 36px;color: #18458C;font-weight: 500;text-transform: uppercase;}
#getanoffer .flx {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;margin-top: 50px;}
#getanoffer .flx input {flex: 0 0 calc(49% - 3px);margin-bottom: 15px;border-radius: 15px;border: 0;background: #F4F4F4;font-size: 18px;color: #000;font-weight: 400;padding: 20px 30px;width: 100%;}
#getanoffer form textarea {flex: 0 0 calc(100%);margin-bottom: 15px;border-radius: 15px;border: 0;background: #F4F4F4;font-size: 18px;color: #000;font-weight: 400;padding: 20px 30px;width: 100%;height: 150px;}
#getanoffer form button {display: inline-block;border-radius: 100px;background: #F4F4F4;color: #000;padding: 10px;border: 0;font-size: 18px;font-weight: 300;padding-right: 40px;margin-top: 30px;transition: all .4s;}
#getanoffer form button:hover {transform: scale(1.15);}
#getanoffer form button img {margin-right: 15px;}
#getanoffer form *::placeholder {font-size: 16px;color: #000;font-weight: 400;opacity: .8;}


#about {padding: 0 120px;display: flex;align-content: stretch;justify-content: space-between;position: relative;z-index: 1;margin-top: 150px;}
#about .item {flex: 0 0 33.3%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
#about .item.big {flex: 0 0 60%;}
#about .item.big img{width: 100%;height: 100%;object-fit: cover;border-radius: 600px;}





#product {margin-top: 150px;}
#product p.text {line-height: 220%;margin-top: 30px;}
#product .item {padding: 70px 0;border-radius: 10px;transition: all .4s;}
#product .item:hover {background: #000;}
#product .item img{display: inline-block;border-radius: 200px;}
#product .item p.text{margin-top: 80px;text-align: center;}


#fragman .video-content {position: relative;margin-top: 100px; min-height: 750px;}
#fragman .video-content img {position:absolute;z-index: 3;top: 0;left: 0;cursor: pointer;transition: all .5s;width: 100%;height: 100%;object-fit: cover;}
#fragman .video-content img.active {transform: scale(3);transform-origin: center;opacity: 0;visibility: hidden;}
#fragman .video-content iframe {width: 100%;z-index: 2;display: block;position: absolute;top: 0;left: 0;height: 100%;}


#product-page h2.product-head {font-size: 48px;font-weight: 900;margin-top: 75px;margin-bottom: 50px;}
#product-page .items {display: flex;align-items: center;flex-wrap: wrap;justify-content: center;}
#product-page .items .item {flex: 0 0 30%;position: relative;border-radius: 10px;overflow: hidden;margin-right: 25px;margin-top: 30px;}
#product-page .items .item:nth-child(3n) {margin-right: 0;}
#product-page .items .item img{filter: brightness(.5);width: 100%;}
#product-page .items .item .overlay {display: flex;align-content: stretch;justify-content:space-between;position: absolute;padding: 50px;bottom: 0;text-align: left;width: 100%;}
#product-page .items .item .overlay .left p.product-name {font-size: 24px;color: #fff;font-weight: 900;margin: 0;margin-bottom: 10px;}
#product-page .items .item .overlay .left p.price {font-size: 36px;color: #fff;font-weight: 900;}
#product-page .items .item .overlay .left p.price span{display: block;font-size: 18px;font-weight: 400;}
#product-page .items .item .overlay .bestseller {font-size: 14px;font-weight: 400;padding: 20px 40px;border-radius: 100px;color: #FEFEFF;border: 2px solid #C4C4C4;}
#product-page .items .item .overlay .right {display: flex;align-items: flex-end;justify-content: flex-end;}
#product-page .items .item .overlay .left ul {/* opacity: 1; */}
#product-page .items .item:hover .overlay .left ul {}
#product-page .items .item p.content {font-size: 16px;color: #fff;font-weight: 400;padding-left: 20px;line-height: 1%;opacity: 0;transition: all .4s;}
#product-page .items .item:hover p.content {line-height: 130%;opacity: 1;padding: 20px 0;padding-left: 20px;}


#offer img{border-radius: 500px;margin:100px 0;}
#offer p.text {font-size: 24px;font-weight: 300;margin: 0;}
#offer h1.head + p.text {padding: 0 130px;margin-top: 30px;}
#offer h2.subhead {font-size: 48px;color: #444;font-weight: 900;margin:60px 0;}
#offer h3 {font-size: 24px;display:inline-block;color: #000;font-weight: 400;padding: 20px 40px;border-radius: 100px;border: 1px solid #c4c4c4;margin-top: 140px;margin-bottom: 30px;}
#offer form {display: flex;align-content: center;justify-content: space-between;flex-wrap: wrap;}
#offer form div {flex: 0 0 100%;text-align: center;}
#offer form input {flex: 0 0 45%;border:0;border-bottom: 1px solid #AAAAAA;font-size: 24px;color: #000;font-weight: 300;padding: 23px 60px; background: transparent;margin-top: 30px;}
#offer form input::placeholder {font-size: 24px;color: #aaa;font-weight: 400;}
#offer form textarea {flex: 0 0 100%;border:0;border-bottom: 1px solid #AAAAAA;font-size: 24px;color: #000;font-weight: 300;padding: 23px 60px; background: transparent;margin-top: 30px;}
#offer form textarea::placeholder {font-size: 24px;color: #aaa;font-weight: 400;}
#offer form button {padding: 20px 40px;font-size: 24px;color: #C4C4C4;font-weight: 300;border:2px solid #C4C4C4;border-radius: 100px;display: inline-block;background: transparent;transition: all .4s;margin-top: 50px;}
#offer form button:hover {background: #c4c4c4;color: #000;}
#offer form .buttonbox {flex: 0 0 100%;margin-top: 50px;text-align: center;}


ul.partnerUl {display: inline-block;margin-bottom: 50px;}
ul.partnerUl li {float: left;margin-right: 30px;}
ul.partnerUl li:last-child {margin-right: 0;}
ul.partnerUl li img {height: 70px;opacity: 1 !important;filter: brightness(0) invert(1)}

#product-page .items .item a {border: 1px solid #fff;padding: 10px 20px;border-radius: 100px;color: #fff;transition: all .4s;float: right;}
#product-page .items .item a:hover {color: #000;background: #fff;}
#product-page .items .item .overlay .left p.price {font-size: 28px;}
body.contact-body footer p a {color: #fff !important;font-weight: 700;}

#product-page .items .item .overlay .left {width: 100%;}
#product-page .items .item .overlay .left .price {float: left;}


.popup {background: transparent;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;z-index: 124;display: none;}
.popup.Iphone .items {grid-template-columns: repeat(1, 1fr) !important;}
.popup.Iphone .items .item {max-width: 100% !important;}
/*.popup.visible {display: flex !important;}*/
.popup .items .popup-close {position: absolute;top: 40px;right: 45px;z-index: 150;}
.popup .items {max-width: 70vw;position: relative;z-index: 111;max-height: 100vh;}
.popup .overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 110;background: rgba(0,0,0,.7)}
.popup p.hd {color: #fff;}
.popup .item {background: #fff;padding: 60px;flex: 1;height: 100%;max-height: 80vh;display: flex;align-items: center;justify-content: center;flex:0 0 50% !important;flex-direction: column;align-items: flex-start;border-radius: 50px;overflow: hidden;/* margin: 0 -37px; */}
.popup .item img{width: 100% !important;height: 100% !important;}
.popup .item.grey {background: #F4F5F6;display: flex;flex-direction: column;justify-content: space-between;padding: 0 !important;margin-right: -135px;}
.popup form input {flex: 0 0 45%;border:0;border-bottom: 1px solid #AAAAAA;font-size: 16px;color: #000;font-weight: 300;padding: 13px 40px;background: transparent;margin-top: 30px;}
.popup form input::placeholder {font-size: 16px;color: #aaa;font-weight: 400;}
.popup form textarea {overflow:hidden;flex: 0 0 100%;border:0;border-bottom: 1px solid #AAAAAA;font-size: 16px;color: #000;font-weight: 300;padding: 18px 40px;background: transparent;margin-top: 30px;width: 100%;/* border: 0; */}
.popup form textarea::placeholder {font-size: 16px;color: #aaa;font-weight: 400;}
.popup form button {padding: 20px 40px;font-size: 16px;color: #C4C4C4;font-weight: 300;border:2px solid #C4C4C4;border-radius: 100px;display: inline-block;background: transparent;transition: all .4s;flex-direction: row-reverse;align-items: center;justify-content: center;background: #fff;display: inline-flex;margin-top: 40px;float: right;}
.popup form button:hover {background: #c4c4c4;color: #000;}
.popup .item button img {margin-left: 15px;display: none;}
.popup .item p.address {width: 70%;font-size: 18px;color: #959596;font-weight: 300;}
.popup .item a.show-map {background: #959596;padding: 10px 30px;border-radius: 100px;display: flex;align-items: center;justify-content: center;font-size: 18px;color: #fff;font-weight: 300;border: 0;}
.popup .item a.show-map img {margin-right: 10px;}
.popup .item .bottom-flex {align-items: center;}
.popup .item .bottom-flex a.show-route {font-size: 18px;color: #959596;font-weight: 300;margin-left: 20px;}
.popup .items {display: grid;grid-template-columns: repeat(2, 1fr);grid-auto-rows: 1fr;grid-row-gap: 5px;}
.popup .items .item table tr td {font-size: 16px;color: #959596;font-weight: 300;}
.popup .hd.md {font-size: 36px;color: #444;font-weight: 200;line-height: 130%;}
.popup p.text-left {font-size: 16px;color: #444;font-weight: 200;margin-top: 20px;margin-bottom: 0;padding-right: 50px;}
.popup form {margin-top: 10px;}



#contact-page {padding-top: 150px;}
.contact-text {font-size: 18px;color: #fff;font-weight: 400;line-height: 170%;max-width: 50%;display: inline-block;margin-bottom: 80px;}

footer {background: #fff;}
footer .row:first-child {padding: 90px 0;}
footer p.text {font-weight: 100;color: #000;margin-top: 40px;margin-bottom: 70px;}
footer p.copy {padding: 50px 0;font-size: 18px;color: #c5c5c5;font-weight: 200;/* border-top: 1px solid #C4C4C4; *//* margin-top: 85px; */text-align: center;margin-bottom: 0;}
footer form {display: flex;align-content: center;justify-content: space-between;flex-wrap: wrap;}
footer form input {flex: 0 0 45%;border:0;border-bottom: 1px solid #AAAAAA;font-size: 24px;color: #000;font-weight: 300;padding: 23px 60px; background: transparent;margin-top: 30px;}
footer form input::placeholder {font-size: 24px;color: #aaa;font-weight: 400;}
footer form textarea {flex: 0 0 100%;border:0;border-bottom: 1px solid #AAAAAA;font-size: 24px;color: #000;font-weight: 300;padding: 23px 60px; background: transparent;margin-top: 30px;}
footer form textarea::placeholder {font-size: 24px;color: #aaa;font-weight: 400;}
footer form button {padding: 20px 40px;font-size: 24px;color: #C4C4C4;font-weight: 300;border:2px solid #C4C4C4;border-radius: 100px;display: inline-block;background: transparent;transition: all .4s;}
footer form button:hover {background: #c4c4c4;color: #000;}
footer form .buttonbox {flex: 0 0 100%;margin-top: 20px;text-align: right;}
body.contact-body footer form input {color: #fff !important;}
body.contact-body footer form textarea {color: #fff !important;}
body.contact-body footer .footer-logo {filter: brightness(0) invert(1) opacity(.3);flex: 0 0 30%;max-width: 100%;margin-right: 20px;height: 60px;object-fit: contain;}
body.contact-body footer p {color: #c4c4c4 !important;}
body.contact-body footer .row:first-child {padding:0;}
body.contact-body {background:#202020 url(/front/images/contact-back.jpg) center center no-repeat;background-size: cover;}
body.contact-body footer{background: transparent !important;}

@keyframes bounceIn {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}
@keyframes bounceOut {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}


@media screen and (max-width:768px)
{
    .contact-text {max-width: 100%;font-size: 13px;}
    .items-234 {flex-direction: column;}
    .items-235 {flex-direction: column;}
    .items-234 .item {width: 100%;}
    .items-235 .item {width: 100%;}
    .items-235 .item h4 {width: 100%;max-width: 100%;}
    .popup.Iphone {display: none !important;}
    #callUs {padding: 20px;min-height: 250px;border-top-left-radius: 50px;}
    #callUs a.close {width: 20px;height: 20px;top: 20px;right: 20px;}
    #callUs h1 {font-size: 22px;}
    #callUs p {font-size: 14px;}
    #callUs a.tel {font-size: 14px;}
    #kampagnen {padding-bottom: 30px;}
    #kampagnen .left {padding-bottom: 0;}
    #kampagnen .left h1.head {font-size: 22px !important;}
    #kampagnen .left p {margin-bottom: 50px !important;font-size: 14px !important;}
    #kampagnen .right .grid .item {width: 50%;padding: 10px;margin-bottom: 0;}
    #kampagnen .right .grid .item.w2 {width: 100%;}
    #cerezPopup {left: 50%;transform: translateX(-50%);}
    #whatsapp.right {right: 30px !important;bottom: 70px !important;}
    .mobile-hidden {display: none;}
    header {padding: 0 15px;height: 80px;}
    .s-margin {margin: auto 15px;}
    .outer-menu{display: block !important; top: 30px !important;}
    .outer-menu .menu > div > div > ul > li {line-height: 40px !important;}
    .outer-menu .menu > div > div > ul > li > a {font-size: 24px !important;}
    header img.logo {max-width: 150px;}
    #home {padding: 0 15px;flex-direction: column;}
    #home ul.ops li {font-size: 24px;text-align: center !important;}
    #home ul.ops{margin-top: 100px;margin-bottom: 30px;}
    #home .item .home-center-img {max-width: 350px;}
    #home .item .home-center-text {font-size: 37px;color: #fff;bottom: 100px;left: 60%;transform: scale(1.3) translateX(-50%);white-space: nowrap;}
    #home .item .home-center-img {width: 80%;}
    #home .item .scrolldown {font-size: 8px;letter-spacing: 12px;margin-top: 20px;}
    #about {flex-direction: column;padding: 0 15px;}
    h1.head {font-size: 36px;}
    p.text {font-size: 16px;margin-right: 0;}
    #about-page p.text {padding-right: 30px;margin: 30px 0;}
    a.button {padding:7px 30px;}
    #about .item.big {margin-top: 50px;}
    #product {margin-top: 40px;}
    #product .item {padding:40px 0;margin-bottom: 30px;}
    #product .item:last-child {margin-bottom:0;}
    #product .item img{max-width: 60%;}
    #product .item p.text {margin-top: 40px;}
    #fragman .video-content {margin-top: 40px;min-height: 60vh;}
    footer form input {padding: 15px 30px;font-size: 16px;flex: 0 0 100%;margin-top: 10px;}
    footer form input::placeholder {font-size: 16px;}
    footer form textarea {padding: 15px 30px;font-size: 16px;}
    footer form textarea::placeholder {font-size: 16px;}
    footer form button {font-size: 14px;padding: 10px 30px;}
    footer .row:first-child {padding: 50px 0;}
    footer p.copy {padding:20px 0;font-size:16px;margin-top: 30px;}
    header ul li a {border: none !important;}
    #about-page h1.head {font-size: 45px;}
    #about-page .about-head {padding: 100px 0;padding-bottom: 0 !important;}
    #about-page .about-head h2.subhead {font-size: 26px;}
    #about-page h2.subhead {font-size: 38px;margin-bottom: 70px;margin-top: 50px;}
    #about-page h2.subhead + p.text {margin-top: 50px;font-size: 16px;padding-right: 0;}
    #about-page .item p.item-content {margin-top: 10px;font-size: 14px;padding: 0 70px;}
    #about-page .item p.item-head {font-size: 24px;margin-top: 20px;}
    #about-page .item {margin-bottom: 50px;}
    #product-page h2.product-head {font-size: 26px;}
    #product-page .items {flex-direction: column;}
    #product-page .items .item {flex: 0 0 100%;margin-bottom:30px;}
    #product-page .items .item .overlay {padding:15px;flex-direction: column;}
    #product-page .items .item .overlay .left p.product-name {font-size: 20px;margin-bottom: 0;}
    #product-page .items .item p.content {font-size: 12px;padding: 5px 0;margin-bottom: 0;}
    #product-page .items .item .overlay .left p.price {font-size: 24px;}
    #product-page .items .item .overlay .left p.price span {font-size: 12px;}
    #product-page .items .item .overlay .right {justify-content: flex-start;margin-top: 20px;}
    #product-page .items .item .overlay .bestseller {padding: 5px 20px;}
    #product-page h2.product-head {font-size: 24px;margin-top: 15px;}
    #product-page .items .item {margin-right: 0;}
    body.white-page .outer-menu .hamburger > div{background: #000;}
    .outer-menu .checkbox-toggle:checked + .hamburger > div {background: #fff;}
    .outer-menu .menu > div > div > ul > li > a {color: #fff !important;}
    footer p.text {margin-bottom: 40px;}
    footer .footer-logo {margin-top: 50px;}
    footer .footer-logo + p.text + img {margin-bottom: 50px;}
    #offer h1.head + p.text {padding: 0 30px;}
    #offer p.text {font-size: 14px;}
    #offer img {margin:20px 0;}
    #offer h2.subhead {font-size: 28px;margin: 30px 0;}
    #offer h3 {font-size: 16px;padding:20px 30px;margin-top: 60px;margin-bottom: 20px;}
    #offer form input {padding: 15px 30px;font-size: 16px;flex: 0 0 100%;margin-top: 10px;}
    #offer form input::placeholder {font-size: 16px;}
    #offer form textarea {padding: 15px 30px;font-size: 16px;}
    #offer form textarea::placeholder {font-size: 16px;}
    #offer form button {font-size: 14px;padding: 10px 30px;}
    #about-page.partners-page {padding-bottom: 50px;}
    #about-page.partners-page h2.subhead + p.text {margin-top: 60px;}
    #about-page p.text span {margin-top: 30px;}
    #about-page.partners-page p.text strong {font-size: 30px;}
    #home::before {bottom: -10%;width: 90vw;height: 90vw}
    #product-page .items .item p.content br {display: block;margin-bottom: 0;font-size:1px;line-height:0;transition: all .4s;}
    #product-page .items .item:hover p.content br {display: block;margin-bottom: 2px;font-size:2px;line-height: 10px;}
    .popup .items {max-width: 90vw;max-height: 100vh;grid-template-columns:repeat(1, 1fr);/* padding: 20px 0; */}
    .popup .items .item{max-height: 100vh;width: 90vw;border-radius: 30px;}
    .popup .items .item.grey {display: none;}
    .popup form.mt75 {margin-top: 20px !important;width: 100%}
    .popup #citizenship {font-size: 12px !important;line-height: normal !important;margin-bottom: 20px;}
    .popup p.hd.md {font-size: 16px;max-width: 80%;font-weight: 900;margin-bottom: 0 !important;}
    .popup .item {padding: 30px;}
    .popup .item input {margin-bottom: 10px;}
    .popup .item input {font-size: 12px !important;width: 100% !important;padding: 10px 10px;margin-top: 0;}
    .popup .item input::placeholder {font-size: 12px !important;}
    .popup .item button {padding: 8px 23px;font-size: 14px;margin-top: 15px !important;}
    .popup .col-md-6 {max-width: 50%;display: inline-block;float: left;}
    .popup textarea {font-size: 12px !important;margin-top: 0 !important;padding: 10px 10px !important;}
    .popup textarea::placeholder {font-size: 12px !important;}
    #kampagnen {flex-direction: column;padding:0 20px;padding-top: 100px;}
    #kampagnen .right .item {flex: 100%;margin-right: 0 !important;}
    #kampagnen .left p {width: 100%;margin-bottom: 70px;font-size: 18px;max-width: 100%;}
    #getanoffer {padding:30px 20px;}
    #getanoffer .flx input {padding:10px 30px;}
    #getanoffer label.big {font-size: 22px;}
    #getanoffer label.small {font-size: 18px;margin-top: 10px;}
    #getanoffer form button {margin-top: 0;}
    #product-page h2.product-head {margin-top: 30px;margin-bottom: 30px;}
}

@media screen and (min-width: 769px) and (max-width: 1500px)
{
    header ul li {margin-right: 10px;}
    header ul li a {font-size: 16px;padding: 10px 20px;}
    #home ul.ops li {font-size: 32px;}
    #home .item .home-center-text {font-size: 50px;}
    #home .item .scrolldown {font-size: 12px;}
    #home .item .scrolldown:hover {letter-spacing: 15px;}
    #home .item .scrolldown {letter-spacing: 10px;}
    p.text {font-size: 18px}
    h1.head {font-size: 65px !important;}
    a.button {padding: 10px 40px;}
    #product .item img {max-width: 70%;}
    #product .item p.text {margin-top:40px;}
    #fragman .video-content {min-height: 600px;}
    footer form input {padding: 15px 30px;font-size: 16px;}
    footer form input::placeholder {font-size: 16px;}
    footer form textarea {padding: 15px 30px;font-size: 16px;}
    footer form textarea::placeholder {font-size: 16px;}
    footer form button {font-size: 18px;padding: 10px 30px;}
    footer p.copy {margin-top: 0;padding: 30px 0;font-size: 16px;}
    h1.head {font-size: 56px;}
    #about-page h2.subhead {font-size: 35px;margin-top: 50px;margin-bottom: 30px;}
    #about-page h2.subhead + p.text {margin-top: 90px;font-size: 18px;}
    #about-page .item p.item-head {font-size: 26px;}
    #about-page .item p.item-content {margin-top: 20px;font-size: 16px;padding: 0 30px;}
    #about-page {padding-bottom: 100px;}
    #product-page .items .item .overlay .bestseller {padding: 10px 20px;font-size: 13px;}
    #product-page .items .item .overlay .left p.price {font-size: 24px;}
    #product-page .items .item .overlay .left p.price span {font-size: 13px;}
    #product-page .items .item .overlay .left p.product-name {font-size: 16px;}
    #product-page .items .item .overlay {padding: 20px;}
    #product-page .items .item p.content {font-size: 14px;}
    #product-page h2.product-head {font-size: 36px;}
    #offer h1.head + p.text {padding: 0 50px;}
    #offer p.text {font-size: 18px;}
    #offer h3 {font-size: 18px;}
    #offer form input {padding: 15px 30px;font-size: 16px;}
    #offer form input::placeholder {font-size: 16px;}
    #offer form textarea {padding: 15px 30px;font-size: 16px;}
    #offer form textarea::placeholder {font-size: 16px;}
    #offer form button {font-size: 18px;padding: 10px 30px;}
    #offer h3 {margin-top: 80px;}
    #about {margin-top: 70px;}
    #product {margin-top: 70px;}
    #fragman .video-content {margin-top: 70px;}
    #about-page .about-head {padding: 150px 0;padding-bottom: 0;}
    #about-page .item p.item-head {font-size: 24px;}
    #about-page .item p.item-content {font-size: 16px;margin-top: 10px;}
    #about-page .item {margin-bottom: 30px;}
    #kampagnen .left h1.head {font-size: 40px !important;}
    #kampagnen .left p {font-size: 18px;}
}











.outer-menu {position: absolute; right: 76px; z-index: 1; display: none; margin-top: -11px; transition:margin .3s;}
.outer-menu .checkbox-toggle {position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; width: 60px; height: 60px; opacity: 0;}
.outer-menu .checkbox-toggle:checked + .hamburger > div {-webkit-transform: rotate(135deg); transform: rotate(135deg);}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before, .outer-menu .checkbox-toggle:checked + .hamburger > div:after {top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {opacity: 0;}
.outer-menu .checkbox-toggle:checked ~ .menu {pointer-events: auto; visibility: visible;}
.outer-menu .checkbox-toggle:checked ~ .menu > div {-webkit-transform: scale(1); transform: scale(1); -webkit-transition-duration: .75s; transition-duration: .75s;}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {opacity: 1; -webkit-transition: opacity 0.4s ease 0.4s; transition: opacity 0.4s ease 0.4s;}
.outer-menu .checkbox-toggle:hover + .hamburger {}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {-webkit-transform: rotate(225deg); transform: rotate(225deg);}
.outer-menu .hamburger {position: absolute; top: 0; left: 0; z-index: 1; width: 60px; height: 40px; padding: .5em 1em; cursor: pointer; -webkit-transition: box-shadow 0.4s ease; transition: box-shadow 0.4s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.outer-menu .hamburger > div {position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 100%; height: 2px; background: #FEFEFE; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after {content: ''; position: absolute; z-index: 1; top: -10px; left: 0; width: 100%; height: 2px; background: inherit; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.outer-menu .hamburger > div:after {top: 10px;}
.outer-menu .menu {position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.outer-menu .menu > div {width: 100%; height: 100%; color: #FEFEFE; background: rgba(0, 0, 0, 0.9); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-transform: scale(0); transform: scale(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.outer-menu .menu > div > div {text-align: center; max-width: 90vw; max-height: 100vh; opacity: 0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; overflow-y: auto; -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.outer-menu .menu > div > div > ul {list-style: none; padding: 0 1em; margin: 0; display: block; max-height: 100vh; overflow: hidden;}
.outer-menu .menu > div > div > ul > li {padding: 0; margin: 1em; font-size: 24px; display: block; text-align: center; width: 100%; padding: 0; margin: 0; line-height: 50px;}
.outer-menu .menu > div > div > ul > li > a {/*--0%-100% border bottom actived----position: relative;*/ display: inline; cursor: pointer; color:#fff; -webkit-transition: color 0.4s ease; transition: color 0.4s ease;}
.outer-menu .menu > div > div > ul > li > a:hover {color: #e5e5e5; text-decoration: none;}
.outer-menu .menu > div > div > ul > li > a:hover:after {width: 100%;}
.outer-menu .menu > div > div > ul > li > a:after {content: ''; position: absolute; z-index: 1; bottom: -0.15em; left: 0; width: 0; height: 2px; background: #e5e5e5; -webkit-transition: width 0.4s ease; transition: width 0.4s ease;}