html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0; padding:0; list-style-type: none; box-sizing: border-box;}
@font-face{font-family:fthsc;src:url(../fonts/fthsc.eot?3g7yy4); font-display:block; src:url(../fonts/fthsc.eot?3g7yy4#iefix) format('embedded-opentype'),url(../fonts/fthsc.woff?3g7yy4) format('woff'),url(../fonts/fthsc.svg?3g7yy4#fthsc) format('svg');font-weight:400;font-style:normal}[class*=" fthsc-"],[class^=fthsc-]{font-family:fthsc!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fthsc-alarm:before{content:"\e900"}.fthsc-arama:before{content:"\e901"}.fthsc-asagi:before{content:"\e902"}.fthsc-asagi-bold:before{content:"\e903"}.fthsc-at:before{content:"\e904"}.fthsc-ayarlar:before{content:"\e905"}.fthsc-behance:before{content:"\e906"}.fthsc-detay:before{content:"\e907"}.fthsc-detay-yatay:before{content:"\e908"}.fthsc-doc:before{content:"\e909"}.fthsc-ekle:before{content:"\e90a"}.fthsc-ekle-bold:before{content:"\e90b"}.fthsc-eposta:before{content:"\e90c"}.fthsc-eposta-bold:before{content:"\e90d"}.fthsc-ev:before{content:"\e90e"}.fthsc-facebook:before{content:"\e90f"}.fthsc-fax:before{content:"\e910"}.fthsc-gizle:before{content:"\e911"}.fthsc-goster:before{content:"\e912"}.fthsc-harici-link:before{content:"\e913"}.fthsc-harici-link-bold:before{content:"\e914"}.fthsc-hata:before{content:"\e915"}.fthsc-indir:before{content:"\e916"}.fthsc-instagram:before{content:"\e917"}.fthsc-jpg:before{content:"\e918"}.fthsc-kalem:before{content:"\e919"}.fthsc-kalp:before{content:"\e91a"}.fthsc-kamera:before{content:"\e91b"}.fthsc-kapat:before{content:"\e91c"}.fthsc-kapat-bold:before{content:"\e91d"}.fthsc-konum:before{content:"\e91e"}.fthsc-link:before{content:"\e91f"}.fthsc-linkedin:before{content:"\e920"}.fthsc-lokasyon:before{content:"\e921"}.fthsc-menu:before{content:"\e922"}.fthsc-messenger:before{content:"\e923"}.fthsc-mobil:before{content:"\e924"}.fthsc-mobil-bold:before{content:"\e925"}.fthsc-onay-bold:before{content:"\e926"}.fthsc-pdf:before{content:"\e927"}.fthsc-pinterest:before{content:"\e928"}.fthsc-play:before{content:"\e929"}.fthsc-ppt:before{content:"\e92a"}.fthsc-rar:before{content:"\e92b"}.fthsc-saat:before{content:"\e92c"}.fthsc-sag:before{content:"\e92d"}.fthsc-skype:before{content:"\e92e"}.fthsc-sol:before{content:"\e92f"}.fthsc-takvim:before{content:"\e930"}.fthsc-telefon:before{content:"\e931"}.fthsc-telefon-bold:before{content:"\e932"}.fthsc-tiff:before{content:"\e933"}.fthsc-twitter:before{content:"\e934"}.fthsc-whatsapp:before{content:"\e935"}.fthsc-xls:before{content:"\e936"}.fthsc-xml:before{content:"\e937"}.fthsc-yildiz:before{content:"\e938"}.fthsc-yon:before{content:"\e939"}.fthsc-youtube:before{content:"\e93a"}.fthsc-yukari:before{content:"\e93b"}.fthsc-yukle:before{content:"\e93c"}.fthsc-yukleme:before{content:"\e93d"}.fthsc-zip:before{content:"\e93e"}
* {font-family: "Sarabun", sans-serif;box-sizing: border-box!important;}
.mobilmenu,.fthsc-menu{display:none;}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 5px; /* width of the entire scrollbar */
}
::-webkit-scrollbar-track {
background: rgb(79, 79, 79); /* color of the tracking area */
}
::-webkit-scrollbar-thumb {
background-color: rgb(185, 185, 185); /* color of the scroll thumb */
border-radius: 10px; /* roundness of the scroll thumb */
border: 1px solid rgb(79, 79, 79); /* creates padding around scroll thumb */
}
.main-container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
overflow-x: hidden;
height: 100svh;
}
.section {
height: 100vh;
scroll-snap-align: start;
position: relative;
z-index: 0;
}
/* .subpage {
padding-bottom: 50px;
} */
.footer {
scroll-snap-align: start;
position: relative;
bottom: 0;
z-index: 0;
}
* {
box-sizing: border-box;
scroll-behavior: smooth;
outline-offset: 2px;
transition: all ease .5s;
transition-delay: 0ms;
font-family: 'Kanit', sans-serif;
}
/*:hover {
cursor: pointer;
}*/
.selector-for-some-widget {
box-sizing: content-box;
}
.multiply {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
left: 0;
top: 0;
z-index: -1;
}
.mt30 {
margin-top: 30px;
}
.bgb40 {background-color: rgba(0, 0, 0, 0.4);}
.mt50 {
margin-top: 50px;
}
.mt100 {
margin-top: 100px;
}
.pb100 {
padding-bottom: 100px;
}
ul,ol {list-style-type: none; margin: 0; padding: 0;}
header {
width: 100%;
height: 50px;
padding: 0 20px;
display: flex;
flex-flow: row wrap;
inline-size: 100%;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
position: relative;
top: 50px;
left: 0;
z-index: 10;
transition: all ease .5s;
}
.sub {
position: absolute;
top: 0;
}
header:hover {
background-color: #ffffff;
transition: all ease .5s;
}
header:hover > .nav > li > a {
color: #000000;
transition: all ease .5s;
}
header:hover > div.user-bar > a > img {
filter: invert(1);
transition: all ease .5s;
}
.inset {
width: 1280px;
margin: auto;
}
header figure.logo {
width: 160px;
height: 45px;
margin: 0;
display: flex;
background-image: url(../assets/logo/logo-white.svg);
position: relative;
z-index: 20;
}
/* Yeni logo yapısı için stiller */
header h1.logo {
margin: 0;
display: flex;
align-items: center;
position: relative;
z-index: 20;
}
header h1.logo img {
transition: all 0.3s ease;
}
/* Header hover olmadığında beyaz logo */
header h1.logo img {
content: url(../assets/logo/logo-white.svg);
}
/* Header hover olduğunda siyah logo */
header:hover h1.logo img {
content: url(../assets/logo/logo-black.svg);
}
.mobileHeader {
display:none;
}
/* Mobil header logo hover efektleri */
.mobileHeader .logo img {
transition: all 0.3s ease;
}
/* Mobil header hover olmadığında beyaz logo */
.mobileHeader .logo img {
content: url(../assets/logo/logo-white.svg);
}
/* Mobil header hover olduğunda siyah logo */
.mobileHeader:hover .logo img {
content: url(../assets/logo/logo-black.svg);
}
.logo {
font-size: 30px;
color: #000000;
}
.nav {
display: flex;
height: 50px;
}
.nav > li {
padding: 0px 15px;
display: flex;
flex-wrap: nowrap;
align-items: center;
height: 50px;
}
.nav a {
font-size: 18px;
color: #ffffff;
text-decoration: none;
}
.nav:hover a {
color: #000000;
}
.nav > li:hover {
background-color: #f2f2f2;
border-radius: 3px;
}
.nav > li:hover a {
color: #000000;
}
header:has(.nav>li:hover) {
background-color: #ffffff;
}
header:has(.nav>li:hover a) {
color: #000000;
}
header:hover figure.logo {
width: 160px;
height: 45px;
margin: 0;
display: flex;
background-image: url(../assets/logo/logo-black.svg);
position: relative;
z-index: 20;
transition-delay: 5ms;
}
/* MAIN PAGE */
.hero {
height: 100svh;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
}
.hero h1 {
font-size: 3.5rem;
font-weight: bold;
}
.hero p {
font-size: 1.5rem;
font-weight: 300;
}
.section-title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1.5rem;
}
.model-card img {
height: 200px;
object-fit: cover;
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1440px;
}
.blog-post img {
height: 150px;
object-fit: cover;
}
.carousel-p1000 {
height: 630px!important;
}
.carousel-indicators [data-bs-target] {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
}
.carousel-item {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.carousel-item .carousel-img {
height: 100svh;
object-fit: cover;
object-position: center center;
}
.carousel-caption {
background: rgba(0, 0, 0, 0.5);
padding: 1rem;
border-radius: 5px;
}
.model-buttons {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}
.model-buttons button {
background: none;
border: none;
color: white;
font-size: 1rem;
text-transform: uppercase;
cursor: pointer;
}
.model-buttons button:hover {
text-decoration: underline;
}
.headermenu {
position: absolute;
z-index: 11;
left: 0;
right: 0;
top: 0;
width: 100%;
}
.bgvid {
width: 100svw;
height: 100svh;
position: relative;
left: 0;
top: 0;
z-index: -1;
object-fit: cover;
margin: 0px;
padding: 0px;
overflow: hidden;
display: block;
}
.hero:before {
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
top:0;
bottom: 0;
width: 100%;
height: 100svh;
background-color: rgba(0, 0, 0, 0.3);
}
.videotext {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 40%;
text-align: center;
}
.font-thin {
font-weight: 100!important;
}
.videotext h2 {
font-size: 45px;
margin:0px;
}
.videotext p {
font-size: 30px;
margin-top: 0px;
}
.headermenu nav a {
text-decoration: none;
}
.heroabsolute {
height: 200px;
position: relative;
background-color: #1c1c1e;
z-index: 11;
padding: 30px 0;
}
.heroabsolute > .container {
height: 200px;
}
.heroabsolute .card {
text-align: left;
padding: 10px 50px;
border-radius: 0px;
border:none;
background-color: #1c1c1e;
opacity: 1;
color:#fff;
height: auto;
border-right: 2px solid #2f2f34;
}
.brn {
border-right: 0!important;
}
.heroabsolute .card p {
font-weight: 100;
line-height: 56px;
}
.heroabsolute .card-body {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
flex: auto;
padding: 0;
}
.heroabsolute .col-md-4:last-child .card-body {
border-right: none;
}
.btn-pilotcar {
color:#fff;
border-radius: 5px;
padding: 7px 30px;
font-weight: normal;
background-color: transparent;
border:2px solid #fff;
font-size: 14px;
}
.btn-pilotcar:focus, .btn-pilotcar:hover {
background-color:#fff;
color: #222;
}
.btn-pilotcar-black {
color:#222;
border-radius: 5px;
padding: 7px 30px;
font-weight: normal;
background-color: transparent;
border:2px solid #222;
font-size: 14px;
}
.btn-pilotcar-black:focus, .btn-pilotcar-black:hover {
background-color:#222;
color: #fff;
}
.short-links {
display: block;
padding: 30px ;
width: 100%;
text-decoration: none;
border: 1px solid #dededc;
background-color: transparent;
color: #222;
border-radius: 3px;
}
.short-links img {
height: 42px;
object-fit: contain;
}
.short-links:focus, .short-links:hover {
background-color: #1c1c1e;
color: #fff;
}
.short-links:focus img, .short-links:hover img {
filter: brightness(0) invert(1);
}
.section-yenilik h2 span {
font-weight: 200;
}
.section-yenilik p {
font-weight: 300;
}
.section-model h2 span {
font-weight: 200;
}
/*
.section-model .carousel-item:before {
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
top:0;
bottom: 0;
width: 100%;
height: 100svh;
background-color: rgba(0, 0, 0, 0.3);
} */
.section-model .model-buttons {
max-width: 1280px;
margin: auto;
position: absolute;
z-index: 11;
left: 0;
right: 0;
bottom: 40px;
}
.section-model .carousel-caption {
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: transparent;
z-index: 10;
text-align: left;
max-width: 1280px;
margin: auto;
}
.section-model .carousel-caption .container {
margin-top:-85px;
}
.alpha {
background-color: rgb(0, 0, 0, .5);
padding: 50px;
width: fit-content;
border-radius: 25px;
}
.slserie h4 {
margin-top: 80px!important;
}
.serviceserie h5 {
margin-bottom: 0!important;
}
.serviceserie h4 {
margin-top: 80px!important;
}
.section-model .carousel-caption .container .alpha h5,
.section-model .carousel-caption .container .alpha h6 {
color: #ffffff;
}
.section-model .btn-pilotcar {
border:2px solid rgba(255, 255, 255, 0.6);
margin-top: 20px;
}
.section-model > .container-fluid > .carousel > .carousel-inner > .carousel-item > .carousel-caption > .container > h5 {
display: block;
}
.section-model .carousel-item h5 {
font-size: 56px;
display: block;
font-weight: 600;
float: left;
}
.section-model .carousel-item h5 img {
display: inline-block;
}
.section-model .carousel-item h5 span {
font-size: 56px;
font-weight: 100;
line-height: 60px;
display: inline-block;
}
.section-model .carousel-item h5 span:first-child {
font-size: 56px;
font-weight: 600;
line-height: 60px;
display: inline-block;
}
.section-model .carousel-item h5 span:nth-child(2) {
font-size: 56px;
font-weight: 600;
line-height: 60px;
display: inline-block;
}
.section-model .carousel-item h5 span:last-child {
font-size: 56px;
font-weight: 200;
line-height: 60px;
display: inline-block;
}
.section-model .carousel-item h5 span:first-child {
font-size: 56px;
font-weight: 100;
line-height: 60px;
display: inline-block;
}
.tal {
text-align: left!important;
}
.tar {
text-align: right!important;
}
.section-model .carousel-item h4 {
font-size: 36px;
font-weight: 700;
margin-bottom: 0px;
color: #ffffff;
margin-top: 170px;
}
.section-model .carousel-item p {
font-size: 20px;
font-weight: 200;
color: #ffffff;
margin-top: 10px;
}
.section-model .model-buttons button {
position: relative;
font-size: 16px;
font-weight: 200;
padding:0px;
width: 100%;
height: 40px;
text-align: left;
margin-top: 10px;
}
.section-model .model-buttons button:before {
content: '';
position: absolute;
z-index: 1;
left: 0;
top: -10px;
right: 0;
height: 1px;
width: 90%;
background-color: rgba(255, 255, 255, 0.7);
}
.section-model .model-buttons button.active:before {
content: '';
position: absolute;
z-index: 1;
left: 0;
top: -10px;
right: 0;
height: 3px;
width: 90%;
background-color: #fff;
}
.section-model .model-buttons button:hover, .section-model .model-buttons button:focus {
text-decoration: none;
}
.section-model .model-buttons button:hover:before, .section-model .model-buttons button:focus:before {
background-color: #fff;
height: 3px;
}
.section-model .modelpcsl .carousel-caption {
text-align: right;
}
.section-model .modelpcsl .carousel-item h5 {
float: right;
}
.section-blog img {
height: 400px;
object-fit: cover;
}
.section-blog .card {
border:none;
}
.section-blog .card-body {
padding:20px 0px;
}
.section-blog .blog-post a {
text-decoration: none;
color:#222;
}
.section-blog .blog-post a:hover img {
opacity: .7;
}
div.main-button-group {
position: absolute;
left: 50%;
z-index: 100;
transform: translate(-50%, 0);
bottom: 50px;
width: max-content;
height: fit-content;
}
div.main-button-group > a {
display: inline-block;
padding: 10px 100px;
font-size: 14px;
color: #ffffff;
text-decoration: none;
margin: 0 100px;
background-color: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
}
div.main-button-group > a:hover {
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.homefooter img {
height: 380px;
width: 100%;
object-fit: cover;
}
.homefooter .position-relative img {
height: auto;
}
.homefooterleft {
position: absolute;
z-index: 1;
right: 0;
top: 0;
width:50%;
height: 50%;
background-color: #1c1c1e;
color:#fff;
padding:70px 35px;
}
.homefooterleft h4 {
font-size: 33px;
line-height: 35px;
}
.homefooterleft p {
font-weight: 200;
margin-bottom: 25px;
}
.homefootercenter, .homefooterright {
padding:50px 30px;
}
.homefootercenter p, .homefooterright p {
display: block;
min-height: 100px;
}
.homefooter {
position: relative;
overflow: hidden;
}
.homefootercenter {
border-right: 1px solid #dededc;
height: 100%;
}
.homefotfooter {
padding-top:18px;
background-color: #1c1c1e!important;
}
.homefotfooter p {
display: inline-block;
}
.homefotfooter a {
text-decoration: none;
}
.homefotfooter a:hover, .homefotfooter a:focus {
opacity: .6;
}
.inovation-section {
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-items: center;
}
section.inovation {
width: 100%;
height: auto;
padding: 2em 0;
}
section.inovation > div.inset > h2 {
font-size: 2em;
font-weight: 600;
color: #000000;
text-align: center;
}
section.inovation > div.inset > h2 > span {
font-weight: 200;
}
section.inovation > div.inset > p {
font-size: 1em;
font-weight: 200;
color: #000000;
text-align: center;
}
section.inovation > div.inset > ul {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
margin: 2em auto;
}
section.inovation > div.inset > ul > li {
width: 33%;
height: auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: center;
text-align: center;
margin: 0 2em;
padding: 2em 0;
}
section.inovation > div.inset > ul > li > figure {
height: 75px;
}
section.inovation > div.inset > ul > li > figure > img {
height: 100%;
}
section.inovation > div.inset > ul > li > h5 {
font-size: 1.5em;
margin: 1.3em 0;
}
section.inovation > div.inset > ul > li > span {
font-size: 1em;
font-weight: 200;
margin: 1em 0;
}
section.inovation > div.inset > .main-direction-buttons {
width: 100%;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
section.inovation > div.inset > .main-direction-buttons > li {
width: 33%;
margin: auto 1.5em;
position: relative;
border: 1px solid #cfcfcf;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
padding: 1em 2em;
}
section.inovation > div.inset > .main-direction-buttons > li > a {
border: 1px solid #000000;
color: #000000;
display: block;
margin-top: 30px;
}
section.inovation > div.inset > .main-direction-buttons > li > a:hover {
border: 1px solid #000000;
color: #ffffff;
background-color: #000000;
display: block;
margin-top: 30px;
}
.mw600px {
max-width: 600px;
margin: auto;
}
.toonami {
font-family: toonamiregular;
}
.nakadai {
font-family: nakadairegular;
}
.controller {
font-family: "controller";
}
#modelCarouselP1000,
#modelCarouselSL,
#modelCarouselHizmet,
#modelCarouselP1000 > .carousel-inner,
#modelCarouselSL > .carousel-inner,
#modelCarouselHizmet > .carousel-inner {
height: 100vh!important;
margin: 0!important;
position: relative;
width: 100%;
}
#modelCarouselP1000 .inset {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
#modelCarouselP1000 .model-slider-content h5 {
font-size: 4em;
font-weight: 600;
color: #ffffff;
}
.spacer {
height: 50px;
}
section.main-blog {
padding: 10px 0;
}
section.main-blog img {
margin-bottom: 30px;
}
section.main-blog h5 {
font-size: 24px;
margin-bottom: 30px;
}
section.main-blog p {
font-size: 18px;
line-height: 24px;
}
section.main-blog time {
font-size: 18px;
margin-bottom: 10px;
text-transform: uppercase;
padding: 5px 15px;
border-top: 2px solid #000000;
margin-top: 20px;
display: inline-block;
}
section.main-blog > div.inset > a {
font-size: 16px;
color: #000000;
font-weight: 300;
display: block;
width: fit-content;
padding: 10px 35px;
text-decoration: none;
border: 1px solid #000000;
border-radius: 5px;
transition: all ease .3s;
margin: 30px auto 0 auto;
}
section.main-blog > div.inset > a:hover {
color: #ffffff;
background-color: #1c1c1e;
border: 1px solid #000000;
border-radius: 5px;
transition: all ease .3s;
}
section.main-blog > div.inset > h2 {
margin: 0 auto 30px auto;
text-align: center;
font-size: 36px;
color: #000000;
font-weight: 600;
}
.owl-theme .owl-nav.disabled+.owl-dots {
margin-top: 0!important;
}
.main-blog-link {
display: block;
padding: 10px 25px;
border: 1px solid #cfcfcf;
width: fit-content;
border-radius: 10px;
color: #000000;
text-decoration: none;
transition: all ease .3s;
margin-bottom: 20px;
}
.main-blog-link:hover {
background-color: #000000;
color: #ffffff;
transition: all ease .3s;
}
section.booter {
width: 100%;
height: 770px;
}
section.booter > div.be-a-seller {
width: 45%;
height: 770px;
float: left;
}
section.booter > div.be-a-seller > figure {
width: 100%;
height: 100%;
position: relative;
background-image: url(../assets/images/bayi.jpg);
background-position: 75%;
background-size: cover;
}
section.booter > div.be-a-seller > figure > div {
width: 440px;
height: 380px;
position: absolute;
background-color: #1f1f1f;
top: 0;
right: 0;
padding: 65px 45px;
}
section.booter > div.be-a-seller > figure > div > h4 {
font-size: 30px;
color: #ffffff;
font-weight: 500;
margin-bottom: 10px;
}
section.booter > div.be-a-seller > figure > div > p {
font-size: 18px;
color: #ffffff;
font-weight: 300;
margin-bottom: 30px;
width: 300px;
}
section.booter > div.be-a-seller > figure > div > a {
font-size: 18px;
color: #ffffff;
font-weight: 300;
padding: 7px 35px;
transition: all ease .3s;
border: 1px solid #ffffff;
border-radius: 5px;
text-decoration: none;
}
section.booter > div.be-a-seller > figure > div > a:hover {
background-color: #ffffff;
color: #1f1f1f;
transition: all ease .3s;
}
section.booter > div.service-points {
width: 25%;
height: 770px;
float: left;
}
section.booter > div.service-points > figure {
width: 100%;
height: 380px;
position: relative;
background-image: url(../assets/images/yetkili-servis.jpg);
background-position: 75%;
background-size: cover;
}
section.booter > div.service-points > div {
width: 100%;
height: auto;
padding: 70px 45px;
}
section.booter > div.service-points > div > h4 {
font-size: 30px;
color: #000000;
font-weight: 500;
margin-bottom: 35px;
}
section.booter > div.service-points > div > p {
font-size: 18px;
color: #000000;
font-weight: 300;
margin-bottom: 35px;
}
section.booter > div.service-points > div > a {
font-size: 18px;
color: #1f1f1f;
font-weight: 300;
padding: 7px 35px;
transition: all ease .3s;
border: 1px solid #1f1f1f;
border-radius: 5px;
text-decoration: none;
}
section.booter > div.service-points > div > a:hover {
background-color: #1f1f1f;
color: #ffffff;
transition: all ease .3s;
border: 1px solid #ffffff;
}
section.booter > div.ecatalogue {
width: 30%;
height: 770px;
float: right;
}
section.booter > div.ecatalogue > figure {
width: 100%;
height: 380px;
background-image: url(../assets/images/e-katalog.jpg);
background-position: 75%;
background-size: cover;
}
section.booter > div.ecatalogue > div {
padding: 70px 45px;
}
section.booter > div.ecatalogue > div > h4 {
font-size: 30px;
color: #000000;
font-weight: 500;
margin-bottom: 35px;
}
section.booter > div.ecatalogue > div > p {
font-size: 18px;
color: #000000;
font-weight: 300;
margin-bottom: 35px;
}
section.booter > div.ecatalogue > div > a {
font-size: 18px;
color: #1f1f1f;
font-weight: 300;
padding: 7px 35px;
transition: all ease .3s;
border: 1px solid #1f1f1f;
border-radius: 5px;
text-decoration: none;
}
section.booter > div.ecatalogue > div > a:hover {
background-color: #1f1f1f;
color: #ffffff;
transition: all ease .3s;
border: 1px solid #ffffff;
}
/* MAIN PAGE */
.models {
width: 100%;
left: 0;
}
.models > div > ul {
height: 270px!important;
}
.corporate {
width: 100%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.corporate > ul {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
}
.corporate > ul > li {
padding: 30px 20px;
}
.corporate > ul > li > h3 {
font-size: 16px;
font-weight: 600;
margin: 0;
display: inline-block;
color: #000;
text-decoration: none;
}
.corporate > ul > li > a,
.corporate > ul > li > ul > li > a {
font-size: 16px;
font-weight: 300;
margin: 0;
display: inline-block;
color: #000;
text-decoration: none;
}
.corporate > ul > li > a::after
.corporate > ul > li > ul > li > a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.corporate > ul > li > a:hover::after,
.corporate > ul > li > ul > li > a:hover::after {
width: 100%;
}
.corporate > ul > li > a::after,
.corporate > ul > li > ul > li > a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.corporate > ul > li > ul > li > a:hover::after {
width: 100%;
}
ul.nav > li > .megamenu {
position: absolute;
z-index: 20;
opacity: 0;
visibility: hidden;
height: 0;
top: 50px;
background-color: #ffffff;
transform: translateY(-42px);
transition: transform 0.3s, opacity 0.35s;
overflow: hidden;
cursor: pointer;
}
ul.nav > li:hover > .megamenu {
opacity: 1;
visibility: visible;
top: 50px;
height: auto;
z-index: 10;
transform: translateY(0);
transition: transform 0.5s, opacity 0.5s;
cursor: pointer;
}
.megamenu > .megamenu-col {
width: 300px;
height: auto;
padding: 15px;
position: relative;
z-index: 200;
border-right: 1px solid #1c1c1e;
float: left;
}
.megamenu > .megamenu-col > ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.megamenu > .megamenu-col > ul > li {
width: 100%;
display: block;
height: auto;
padding: 15px 10px;
border-radius: 5px;
cursor: pointer;
}
.megamenu > .megamenu-col > ul > li {
font-size: 18px;
font-weight: 300;
line-height: 30px;
color: #000000;
transition: all ease .3s;
transition-delay: 150ms;
transition-property: all;
}
.megamenu > .megamenu-col > ul > li:hover {
background-color: #f2f2f2;
border-radius: 10px;
transition: all ease .3s;
transition-delay: 150ms;
transition-property: all;
cursor: pointer;
}
.show {
display: flex!important;
transition: all ease .5s;
transition-delay: 150ms;
transition-property: all;
}
.megamenu > .megamenu-col-right {
width: auto;
height: auto;
float: right;
}
.megamenu > .megamenu-col-right > ul.megamenu-subcol {
width: auto;
height: auto;
position: absolute;
top: 0;
left: 310px;
opacity: 1;
z-index: 100;
transition: all ease .3s;
text-align: left;
display: flex;
display: none;
flex-direction: row;
/* transition-delay: .5s; */
padding: 10px;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.megamenu > .megamenu-col-right > ul.megamenu-subcol > li:hover {
left: 100%;
opacity: 1;
z-index: 20;
transition: all ease .3s;
/* transition-delay: .5s; */
}
.megamenu > .megamenu-col-right > ul.megamenu-subcol > li {
display: block;
padding: 5px 10px;
border-radius: 5px;
text-align: center;
transition: all ease .3s;
flex: 1;
max-width: 225px;
}
.megamenu > .megamenu-col-right > ul.megamenu-subcol > li > a > h2 {
font-size: 16px;
font-weight: 300;
}
.megamenu > .megamenu-col-right > ul.megamenu-subcol > li > a > figure {
/* width: 180px;
height: 110px; */
width: auto;
height: auto;
padding: 0;
margin: 15px 10px;
}
.megamenu > .megamenu-col-right > ul.megamenu-subcol > li > a > figure > img {
width: 100%;
height: 100%;
opacity: 1;
}
.megamenu > .megamenu-col-right > ul.megamenu-subcol > li > a > figure > img:hover {
opacity: .5;
}
.megamenu > .megamenu-col-right > ul.megamenu-subcol > li > a {
color: #212529;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
display: block;
padding: 10px;
}
.megamenu > .megamenu-col-right > ul.megamenu-subcol > li:hover > a {
color: #212529;
text-decoration: none;
font-size: 14px;
font-weight: 500;
}
.user-bar {
position: relative;
}
.user-bar a {
width: auto;
height: auto;
display: inline-block;
padding: 5px 5px;
}
.user-bar a:hover {
border-radius: 5px;
background-color: rgba(242, 242, 242, 0.2);
}
.user-bar a img {
width: auto;
height: 25px;
vertical-align: middle;
}
.toggle-container {
max-height: 400px;
overflow: hidden;
transition: max-height 0.5s ease;
position: absolute;
top: 43px;
right: 0;
background-color: #ffffff;
width: auto;
height: 0;
}
.toggle-container.open {
max-height: 400px; /* İçeriğin yüksekliğine göre ayarlayın */
position: absolute;
top: 43px;
right: 0;
height: auto;
width: auto;
}
.toggle-container.open ul {
width: auto;
height: auto;
display: flex;
flex-direction: column;
}
.toggle-container.open ul > li {
padding: 20px;
}
.toggle-container.open ul > li:hover {
background-color: #e5e5e5;
}
.toggle-container.open ul > li > a {
color: #000000;
text-decoration: none;
}
.bg-image {
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 0;
}
div.button-group {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: 30px;
width: max-content;
height: fit-content;
z-index: 1;
}
div.button-group > a {
display: inline-block;
padding: 10px 60px;
font-size: 14px;
color: #000000;
text-decoration: none;
margin: 0 20px;
border: none;
background-color: #ffffff;
border-radius: 10px;
}
div.button-group > a:hover {
color: #ffffff;
border: none;
background-color: #000000;
border-radius: 10px;
cursor: pointer;
}
section.model1 {
width: 100%;
height: 100vh;
background-image: url(../assets/main/model1.jpg);
}
section.model2 {
width: 100%;
height: 100vh;
background-image: url(../assets/main/model2.jpg);
}
section.model3 {
width: 100%;
height: 100vh;
background-image: url(../assets/main/model2.jpg);
}
footer {
position: relative;
z-index: -1;
height: 50px;
width: 100%;
background-color: #1c1c1e;
clear: both;
}
footer > .inset > ul {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
footer > .inset > ul > li {
width: 33%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
}
footer > .inset > ul > li:first-child {
justify-content: flex-start;
}
footer > .inset > ul > li:nth-child(2) {
justify-content: center;
}
footer > .inset > ul > li:last-child {
justify-content: flex-end;
}
footer > .inset > ul > li > nav {
height: 50px;
width: max-content;
}
footer > .inset > ul > li > nav > ul {
height: 50px;
width: max-content;
display: flex;
margin: auto;
align-items: center;
justify-content: space-evenly;
flex-wrap: nowrap;
flex-direction: row;
}
footer > .inset > ul > li > nav > ul > li {
height: 50px;
padding: 0 10px;
width: max-content;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-wrap: nowrap;
flex-direction: row;
}
footer > .inset > ul > li > span {
}
footer > .inset > ul > li > .social > a {
display: inline-block;
margin: 0 5px;
}
footer > .inset > ul > li > .social > a:hover i {
color: #a59c94;
}
footer > .inset > ul > li > span,
footer > .inset > ul > li > .social > a,
footer > .inset > ul > li > nav > ul > li > a {
font-size: 14px;
color: #cecece;
text-decoration: none;
}
footer > .inset > ul > li > nav > ul > li > a:hover,
footer > .inset > nav > ul > li > a:hover {
color: #ffffff;
}
/* SUBPAGES */
section.model-main {
width: 100%;
height: 100vh;
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
section.model-main > figure.model {
width: 100%;
height: 100vh;
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: -10;
top: 0;
left: 0;
}
section.model-main > iframe {
position: absolute;
width: 100vw;
top: 0;
z-index: -2;
}
.video-bg {
overflow: hidden;
}
section.model-main > div.inset {
padding-top: 110px;
}
.esbe {
font-family: eurostile-bold-ext;
}
section.model-main > div.inset > h1.main-title, section.model-main > div.inset > h2.main-title {
position: relative;
font-size: 40px;
font-weight: 600;
text-align: center;
margin: auto;
z-index: 1;
}
section.model-main > div.inset > h1.main-title > span:first-child, section.model-main > div.inset > h2.main-title > span:first-child {
position: relative;
font-size: 40px;
font-weight: 600;
text-align: center;
margin: auto;
z-index: 1;
}
section.model-main > div.inset > h1.main-title > span:last-child, section.model-main > div.inset > h2.main-title > span:last-child {
position: relative;
font-size: 40px;
font-weight: 200;
text-align: center;
margin: auto;
z-index: 1;
}
section.model-main > div.inset > span {
position: relative;
display: block;
font-size: 16px;
font-weight: 300;
color: #212529;
text-align: center;
margin: 30px auto;
}
div.icon-group {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: 80px;
width: max-content;
height: fit-content;
z-index: 1;
}
div.icon-group > ul {
width: max-content;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
}
div.icon-group > ul > li {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 20px 50px;
text-align: center;
}
div.icon-group > ul > li > figure {
width: 40px;
height: 40px;
margin-right: 20px;
}
div.icon-group > ul > li > figure > img {
width: auto;
height: 100%;
}
div.icon-group > ul > li > div {
display: flex;
flex-direction: column;
align-items: flex-start;
}
div.icon-group > ul > li > div > span {
font-size: 16px;
color: #ffffff;
font-weight: 400;
white-space: nowrap;
}
div.icon-group > ul > li > div > p {
font-size: 16px;
color: #ffffff;
font-weight: 200;
white-space: nowrap;
}
/* MODEL SUB */
section.model-sub {
width: 100%;
height: 100vh;
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
section.model-sub > figure.model {
width: 100%;
height: 100vh;
position: absolute;
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
z-index: -10;
top: 0;
left: 0;
}
section.model-sub > div.inset {
padding-top: 110px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
section.model-sub > div.inset > h1.main-title, section.model-sub > div.inset > h2.main-title {
position: relative;
font-size: 34px;
font-weight: 600;
color: #212529;
text-align: left;
margin: auto;
}
section.model-sub > div.inset > span {
position: relative;
display: block;
font-size: 16px;
font-weight: 300;
color: #212529;
text-align: left;
margin: 0 auto 30px auto;
}
/* MODELS SUB */
/* MODELS SPECTS */
.tab {
overflow: hidden;
width: auto;
float: right;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #000000;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px 10px;
transition: 0.3s;
font-size: 14px;
font-weight: 300;
color: #212529;
margin: 0 20px;
}
/* Change background color of buttons on hover */
.tab button:hover {
border-bottom: 1px solid #212529;
}
/* Create an active/current tablink class */
.tab button.active {
border-bottom: 3px solid #212529;
}
.tab1 {
overflow: hidden;
width: auto;
float: right;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #000000;
}
/* Style the buttons inside the tab */
.tab1 button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px 10px;
transition: 0.3s;
font-size: 14px;
font-weight: 300;
color: #212529;
margin: 0 20px;
}
/* Change background color of buttons on hover */
.tab1 button:hover {
border-bottom: 1px solid #212529;
}
/* Create an active/current tablink class */
.tab1 button.active {
border-bottom: 3px solid #212529;
}
/* Style the tab content */
.tabcontent {
display: none;
padding-top: 80px;
border-top: none;
}
.tabcontent {
animation: fadeEffect .3s; /* Fading effect takes 1 second */
}
.tabcontent1 {
display: none;
border-top: none;
}
.tabcontent1 {
animation: fadeEffect .3s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }
.model-spects {
background-color: #e1ddd9;
min-height: 100vh;
display: table;
}
h1.spects-title, h2.spects-title {
font-size: 28px;
color: #ffffff;
font-weight: 200;
}
h1.spects-title-black, h2.spects-title-black {
font-size: 28px;
color: #000000;
font-weight: 200;
}
figure.spect-figure {
width: 400px;
height: 400px;
float: right;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
figure.spect-figure > img {
width: 400px;
height: auto;
}
.dimensions-main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
justify-items: center;
align-content: flex-start;
align-items: flex-start;
}
.model-dimensions {
width: 100%;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.model-dimension-table {
width: 600px;
height: auto;
position: relative;
float: left;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 50px;
}
.model-dimension-table > span {
font-size: 14px;
display: block;
color: #1f1f1f;
font-weight: 200;
}
.model-dimension-table2 {
width: 100%;
height: auto;
position: relative;
}
.model-dimension-table p,
.model-dimension-table2 p {
margin: 0!important;
padding: 0!important;
}
.model-dimension-table > h3,
.model-dimension-table2 > h3 {
font-size: 18px;
font-weight: 400;
color: #000000;
}
.model-dimension-table > h3 > span,
.model-dimension-table2 > h3 > span {
font-size: 14px;
font-weight: 200;
color: #f2f2f2;
}
.model-dimension-table > ul {
display: flex;
width: 100%;
margin: auto;
margin: 10px 0px;
padding: 0;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: space-between;
flex-direction: column;
}
.model-dimension-table2 > ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
margin: auto;
margin: 10px 0px;
padding: 0;
}
.model-dimension-table2 > ul.measurements {
width: 100%;
margin: auto;
}
.model-dimension-table2 > figure.measurement-image {
width: 100%;
height: auto;
}
.model-dimension-table2 > figure.measurement-image > img {
width: 100%;
}
.model-dimension-table > ul > li {
padding: 15px 0;
font-size: 14px;
color: #242424;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: row;
white-space: nowrap;
border-bottom: 1px solid #777777;
}
.model-dimension-table2 > ul > li {
padding: 15px 30px;
font-size: 14px;
color: #242424;
display: flex;
justify-content: space-between;
align-items: center;
}
.model-dimension-table > ul > li:last-child,
.model-dimension-table2 > ul > li:last-child {
border-bottom: none;
}
/*
.model-dimension-table2 > ul.p-1000-m > li:nth-child(4),
.model-dimension-table2 > ul.p-1000-m > li:nth-child(5),
.model-dimension-table2 > ul.p-1000-m > li:nth-child(6),
.model-dimension-table2 > ul.p-1000-m > li:nth-child(7),
.model-dimension-table2 > ul.p-1000-m > li:nth-child(8),
.model-dimension-table2 > ul.p-1000-m > li:nth-child(9) {
border-top: 1px solid #cfcac3;
}
.model-dimension-table2 > ul.p-1000-m > li:nth-child(1),
.model-dimension-table2 > ul.p-1000-m > li:nth-child(2),
.model-dimension-table2 > ul.p-1000-m > li:nth-child(4),
.model-dimension-table2 > ul.p-1000-m > li:nth-child(5),
.model-dimension-table2 > ul.p-1000-m > li:nth-child(7),
.model-dimension-table2 > ul.p-1000-m > li:nth-child(8) {
border-right: 1px solid #cfcac3;
} */
.model-dimension-table > ul > li > label,
.model-dimension-table2 > ul > li > label,
.grid__item > label {
font-size: 14px;
display: block;
color: #777777;
font-weight: 400;
}
.model-dimension-table > ul > li > span,
.model-dimension-table2 > ul > li > span,
.grid__item > span {
font-size: 14px;
display: block;
color: #1f1f1f;
font-weight: 200;
text-align: right;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: hidden;
gap: var(--gap);
}
.grid__item {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
padding: 10px;
}
.grid {
margin-top: 30px;
--gap: 1em;
--line-offset: calc(var(--gap) / 2);
--line-thickness: 1px;
--line-color: #b8b0a7;
}
.grid__item::before,
.grid__item::after {
content: '';
position: absolute;
background-color: var(--line-color);
z-index: 1;
}
.grid__item::after {
inline-size: 100vw;
block-size: var(--line-thickness);
inset-inline-start: 0;
inset-block-start: calc(var(--line-offset) * -1);
}
.grid__item::before {
inline-size: var(--line-thickness);
block-size: 100vh;
inset-block-start: 0;
inset-inline-start: calc(var(--line-offset) * -1);
}
.model-hardware-table > h3 {
font-size: 24px;
color: #000000;
font-weight: 600;
}
.model-hardware-table > h3 > span {
font-weight: 300;
}
.masonry {
column-count: 3;
column-gap: 120px;
}
.masonry .mItem {
display: inline-block;
margin: 20px 0;
width: 100%;
}
.masonry .mItem > label {
font-size: 18px;
font-weight: 400;
color: #000000;
}
.masonry .mItem > span {
font-size: 14px;
font-weight: 200;
color: #6f6254;
}
.masonry .mItem > span ul {
list-style-type: disc!important;
}
.masonry .mItem > span ul > li {
list-style-type: disc!important;
margin-left: 20px;
line-height: 26px;
}
@media (max-width: 1199px) {
.masonry {
column-count: 3;
}
}
@media (max-width: 991px) {
.masonry {
column-count: 2;
}
}
@media (max-width: 767px) {
.masonry {
column-count: 1;
}
}
ul.min-table {
width: 65%;
float: left;
}
ul.min-table > li {
width: 50%;
float: left;
}
.w800 {
width: 800px!important;
}
.esbext {
font-family: eurostile-bold-ext;
}
.bt {
color: #212529;
}
.wt {
color: #ffffff;
}
.white {
background-color: #ffffff;
}
.red {
background-color: #951d1d;
}
.black {
background-color: #000000;
}
.gray {
background-color: #606060;
}
.navy {
background-color: #1f3c71;
}
/* Bootstrap MODAL REVISIONS */
/* .modal-content {
background-color: #3f3f3f!important;
} */
/*
.modal-header,
.modal-body {
width: 900px;
margin: auto;
color: #7d7d7d;
}
.modal-body > h3 {
font-weight: 300;
text-align: center;
margin-top: 30px;
}
.modal-body > ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 30px;
padding: 0;
}
.modal-body > ul > li {
padding: 20px 40px;
letter-spacing: 1px;
border-color: #7d7d7d!important;
}
.modal-body > ul > li:nth-child(1n) {
width: 667px;
text-align: left;
}
.modal-body > ul > li:nth-child(2n) {
width: 200px;
text-align: right;
} */
/* Bootstrap MODAL REVISIONS */
/* MODEL BOTTOM */
section.model-bottom {
width: 100%;
height: 100vh;
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
section.model-bottom > figure.model {
width: 100%;
height: 100vh;
position: absolute;
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
z-index: -10;
top: 0;
left: 0;
}
section.model-bottom > div.inset {
position: absolute;
right: 0;
bottom: 50px;
left: 0;
}
section.model-bottom > div.inset > h1.main-title, section.model-bottom > div.inset > h2.main-title {
position: relative;
font-size: 34px;
font-weight: 600;
color: #ffffff;
text-align: center;
margin: auto;
}
section.model-bottom > div.inset > span {
position: relative;
display: block;
font-size: 16px;
font-weight: 300;
color: #ffffff;
text-align: center;
margin: 30px auto;
}
/* MODELS BOTTOM */
/* MODEL GALLERY */
.model-gallery {
background-color: #000000;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.model-gallery > div.gallery-inset {
width: 1000px;
height: 800px;
margin: auto;
}
.model-gallery > div.gallery-inset > h3 {
text-align: center;
font-size: 34px;
position: absolute;
color: #ffffff;
left: 0;
right: 0;
top: 100px;
font-weight: 600;
}
.model-gallery > ul > li {
height: auto;
}
.model-gallery > ul > li:first-child {
width: 60%;
}
.model-gallery > ul > li:last-child {
width: 40%;
}
.carousel-other > .carousel-control-next, .carousel-control-prev {
height: 750px;
}
.carousel-p1000 > .carousel-control-next, .carousel-control-prev {
height: inherit;
}
.carousel-item {
height: 100svh;
}
.carousel-fade .carousel-item {
opacity: 0;
transition: opacity ease-out .7s;
height: 650px;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
.carousel-caption {
position: absolute;
right: 15%;
bottom: 0!important;
left: 15%;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.carousel-indicators [data-bs-target] {
width: 15px!important;
height: 15px!important;
border-radius: 50%!important;
background-color: #dddddd!important;
}
.model-parallax {
background-image: url(../assets/model/p-1000-kargo/9.jpg);
background-attachment: fixed;
background-size: cover;
background-position: bottom center!important;
}
/* MODEL GALLERY */
/* MODEL PAGE LAST */
section.model-last {
width: 100%;
height: 100vh;
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
section.model-last > figure.model {
width: 100%;
height: 100vh;
position: absolute;
background-repeat: no-repeat;
background-position: bottom center;
background-size: cover;
z-index: -10;
top: 0;
left: 0;
}
section.model-last > figure.model > video {
object-fit: cover;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
section.model-last > div.inset {
padding-top: 110px;
}
section.model-last > div.inset > h1.main-title, section.model-last > div.inset > h2.main-title {
position: relative;
font-size: 30px;
display: inline;
font-weight: 600;
text-align: center;
margin: auto;
}
section.model-last > div.inset > span {
position: relative;
display: block;
font-size: 26px;
display: inline;
font-weight: 300;
text-align: center;
margin: 30px auto;
}
.model-bottom-gallery {
width: 100%;
height: 100%;
}
.model-bottom-gallery #vanilla-slideshow-container {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.model-bottom-gallery #vanilla-slideshow .vanilla-slide {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.model-bottom-gallery #vanilla-slideshow .vanilla-slide.vanilla-active {
opacity: 1;
}
.model-bottom-gallery #vanilla-slideshow .vanilla-slide img {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
z-index: -10;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) {
.model-bottom-gallery #vanilla-slideshow .vanilla-slide img {
left: 50%;
margin-left: -512px;
}
.logo {
display: inline-block;
margin-top: 26px;
margin-left: 10px;
}
.logo img {
width:150px!important
}
.mobileHeader:hover .logo img {
content: url(../assets/logo/logo-white.svg);
}
}
/* Arrows */
.model-bottom-gallery #vanilla-slideshow-previous {
position: absolute;
left: 10px;
top: 50%;
width: 48px;
height: 50px;
background-position: 0 100%;
cursor: pointer;
opacity: 0.7;
z-index: 5;
display: none;
}
.model-bottom-gallery #vanilla-slideshow-next {
position: absolute;
right: 10px;
top: 50%;
width: 48px;
height: 50px;
background-position: 100% 100%;
cursor: pointer;
opacity: 0.7;
z-index: 5;
display: none;
}
.model-bottom-gallery #vanilla-slideshow-previous:hover, #vanilla-slideshow-next:hover {
opacity: 1;
}
/* Indicators */
.model-bottom-gallery #vanilla-indicators {
display: inline-block;
z-index: 5;
position: absolute;
bottom: 50px;
}
.model-bottom-gallery .vanilla-indicators {
box-shadow: 0 0 10px #333333;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #ffffff;
float: left;
margin-right: 3px;
cursor: pointer;
}
.model-bottom-gallery .vanilla-indicators.vanilla-active {
background-color: #ffffff;
}
/* Model OPT SLIDE */
.model-optSlide {
width: 100svw;
height: 100svh;
position: relative;
background-color: #e1ddd9;
padding-top: 1px;
}
/*
.model-optSlide #opt-slideshow-container {
width: 1000px;
height: 563px;
position: absolute;
text-align: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.model-optSlide #opt-slideshow .opt-slide {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.model-optSlide #opt-slideshow .opt-slide.opt-active {
opacity: 1;
}
.model-optSlide #opt-slideshow .opt-slide img {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
z-index: -10;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) {
.model-optSlide #opt-slideshow .opt-slide img {
left: 50%;
margin-left: -512px;
}
} */
/* Arrows */
/* .model-optSlide #opt-slideshow-previous {
position: absolute;
left: 10px;
top: 50%;
width: 48px;
height: 50px;
background-position: 0 100%;
cursor: pointer;
opacity: 0.7;
z-index: 5;
display: none;
}
.model-optSlide #opt-slideshow-next {
position: absolute;
right: 10px;
top: 50%;
width: 48px;
height: 50px;
background-position: 100% 100%;
cursor: pointer;
opacity: 0.7;
z-index: 5;
display: none;
}
.model-optSlide #opt-slideshow-previous:hover, #opt-slideshow-next:hover {
opacity: 1;
} */
/* Indicators */
/*
.model-optSlide #opt-indicators {
display: inline-block;
z-index: 5;
position: absolute;
bottom: 50px;
}
.model-optSlide .opt-indicators {
box-shadow: 0 0 10px #333333;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #ffffff;
float: left;
margin-right: 3px;
cursor: pointer;
}
.model-optSlide .opt-indicators.opt-active {
background-color: #ffffff;
} */
.opt-carousel {
width: 100%;
height: 100%;
}
.opt-carousel > div.carousel {
height: 100svh;
margin-top: 0;
}
.opt-carousel > div.carousel > ul.slides {
width: 100%;
height: 100svh;
}
.opt-carousel > div.carousel > ul.slides > li.slide-container > div.slide-image > video {
width: 100svw;
height: 100svh;
object-fit: cover;
}
.opt-carousel .carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
z-index: 999;
text-align: center;
}
.opt-carousel .carousel-dots .carousel-dot {
display: inline-block;
width: 30px;
height: 30px;
border-top: 3px solid #ffffff;
opacity: 1;
margin: 10px;
width: 265px;
padding-top: 20px;
color: #ffffff;
text-align: left;
}
.opt-carousel .carousel-dots .carousel-dot > span {
font-size: 20px;
font-weight: 500;
}
.opt-carousel .carousel-dots .carousel-dot > p {
font-size: 16px;
font-weight: 300;
}
/* Model OPT SLIDE */
/* SUB MODEL SLIDE */
.sm-carousel {
width: 100%;
height: 100%;
}
.sm-carousel > div.carousel {
height: 100svh;
margin-top: 0;
}
.sm-carousel > div.carousel > ul.slides {
width: 100%;
height: 100svh;
}
.sm-carousel > div.carousel > ul.slides > li.slide-container > div.slide-image > video {
width: 100svw;
height: 100svh;
object-fit: cover;
}
.sm-carousel .carousel-dots {
position: absolute;
bottom: 30%;
z-index: 999;
right: 50px;
text-align: right;
left: initial;
}
.sm-carousel .carousel-dots .carousel-dot {
display: block;
width: 30px;
height: auto;
border-top: none;
opacity: 1;
margin: 10px;
width: 265px;
padding-top: 20px;
color: #ffffff;
text-align: right;
}
.sm-carousel .carousel-dots .carousel-dot > span {
font-size: 20px;
font-weight: 500;
}
.sm-carousel .carousel-dots .carousel-dot > p {
font-size: 16px;
font-weight: 300;
}
.carousel-other {
height: 750px;
}
.carousel-p1000 {
height: inherit;
}
/* SUB MODEL SLIDE */
/* MODELS PAGE LAST */
/* CONTACT PAGE */
nav.page-navigation {
clear: both;
margin: 30px 0;
display: block;
}
.page-link {
color: #6b6b6b;
}
.page-link:hover {
color: #a6a6a6;
}
.page-item.active .page-link{
color: #fff;
background-color: #6b6b6b;
border-color: #6b6b6b;
}
.tabs {
display: flex;
flex-wrap: wrap;
max-width: 100%;
justify-content: center;
}
.input {
position: absolute;
opacity: 0;
}
.label {
width: 100%;
padding: 15px 50px;
margin: 0px 20px;
background: #ffffff;
cursor: pointer;
font-weight: 300;
font-size: 16px;
color: #000000;
border: 1px solid #000000;
transition: background 0.1s, color 0.1s;
border-radius: 10px;
}
.label:hover {
background: #ededed;
transition: background 0.1s, color 0.1s;
}
.label:active {
background: #ccc;
}
.input:focus + .label {
z-index: 1;
}
.input:checked + .label {
background: #000000;
color: #ffffff;
}
@media (min-width: 600px) {
.label {
width: auto;
}
}
.panel {
width: 100%;
display: none;
padding: 20px 30px 30px;
margin-top: 50px;
background: #fff;
}
@media (min-width: 600px) {
.panel {
order: 99;
}
}
.input:checked + .label + .panel {
display: block;
}
.accordion {
margin: auto;
width: 100%;
}
.accordion input {
display: none;
}
.box,
.box1 {
position: relative;
background: white;
height: 64px;
transition: all .15s ease-in-out;
}
.box::before,
.box1::before {
content: '';
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}
.box-title,
.box-title1 {
width: calc(100% - 40px);
height: 64px;
line-height: 64px;
padding: 0 20px;
display: inline-block;
cursor: pointer;
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.box-content,
.box-content1 {
width: calc(100%);
padding: 30px 20px;
font-size: 11pt;
color: rgba(0,0,0,.54);
display: none;
}
.box-close,
.box-close1 {
position: absolute;
height: 64px;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
input:checked + .box,
input:checked + .box1 {
height: auto;
margin: 16px 0;
box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
}
input:checked + .box .box-title,
input:checked + .box1 .box-title1 {
border-bottom: 1px solid rgba(0,0,0,.18);
}
input:checked + .box .box-content,
input:checked + .box .box-close,
input:checked + .box1 .box-content1,
input:checked + .box1 .box-close1 {
display: inline-block;
}
.arrows section .box-title,
.arrows section .box-title1 {
padding-left: 44px;
width: calc(100%);
}
.arrows section .box-title:before,
.arrows section .box-title1:before {
position: absolute;
display: block;
content: '\203a';
font-size: 18pt;
left: 20px;
top: -2px;
transition: transform .15s ease-in-out;
color: rgba(0,0,0,.54);
}
input:checked + section.box .box-title:before,
input:checked + section.box1 .box-title1:before {
transform: rotate(90deg);
}
/* DISTRIBUTORS */
.distributors {
width: 100%;
height: auto;
}
.distributors > h2 {
border-bottom: 1px solid #000000;
margin-bottom: 35px;
}
.distributors-accordion {
margin: auto;
width: 100%;
}
.distributors-accordion input {
display: none;
}
.distributors-box {
position: relative;
height: 90px;
transition: all .15s ease-in-out;
margin: 25px 0;
background-color: #ffffff;
border: 1px solid #dfdfdf;
}
.distributors-box::before {
content: '';
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
.distributors-box-title {
width: calc(100%);
height: 90px;
line-height: 90px;
font-size: 18px;
font-weight: 200;
padding-left: 65px;
display: inline-block;
cursor: pointer;
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.distributors-box-content {
width: calc(100%);
padding: 30px 60px;
font-size: 11pt;
color: rgba(0,0,0,.54);
display: none;
}
.distributors-box-content > h2,
.box-content1 > h2 {
font-size: 24px;
font-weight: 300;
color: #000000;
}
.distributors-box-content > ul,
.box-content1 > ul {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
margin: 30px 0;
}
.distributors-box-content > ul > li,
.box-content1 > ul > li {
padding: 5px 0;
}
.distributors-box-content > ul > li > p,
.box-content1 > ul > li > p {
font-size: 18px;
font-weight: 300;
color: #000000;
}
.distributors-box-content > ul > li > p > label,
.box-content1 > ul > li > p > label {
font-size: 18px;
font-weight: 600;
color: #000000;
margin-right: 10px;
}
.distributors-box-content > iframe,
.box-content1 > iframe {
margin: 20px 0 60px 0;
width: 100%;
height: 390px;
}
.distributors-box-close {
position: absolute;
height: 90px;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
input:checked + .distributors-box {
height: auto;
margin: 16px 0;
}
input:checked + .distributors-box .distributors-box-title {
/* border-bottom: 1px solid rgba(0,0,0,.18); */
}
input:checked + .distributors-box .distributors-box-content,
input:checked + .distributors-box .distributors-box-close {
display: inline-block;
}
.distributors-arrows section .box-title {
padding-left: 44px;
width: calc(100%);
}
.distributors-arrows section .distributors-box-title:after {
position: absolute;
display: block;
content: '\208a';
font-size: 30pt;
right: 40px;
top: -10px;
transition: transform .15s ease-in-out;
color: rgba(0,0,0,.54);
}
input:checked + section.distributors-box .distributors-box-title:after {
content: '\208b';
font-size: 30pt;
right: 40px;
top: -10px;
transition: transform .15s ease-in-out;
}
.distributors-box-content .box1 {
position: relative;
background-color: #ffffff;
height: 90px;
border-bottom: 1px solid #cfcfcf;
transition: all .15s ease-in-out;
}
.distributors-box-content .box1:last-child {
border-bottom: none;
}
.distributors-box-content .box1::before {
content: '';
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
box-shadow: none;
}
.distributors-box-content .box1 .box-title1 {
width: calc(100%);
height: 90px;
line-height: 90px;
font-size: 16px;
font-weight: 200;
color: #000000;
padding: 0 20px;
display: inline-block;
cursor: pointer;
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.distributors-box-content .box1 .box-content1 {
width: calc(100%);
padding: 30px 20px;
font-size: 11pt;
color: rgba(0,0,0,.54);
display: none;
border-bottom: 1px solid #cfcfcf;;
}
.distributors-box-content .box-close1 {
position: absolute;
height: 90px;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
.distributors-box-content input:checked + .box1 {
height: auto;
margin: 16px 0;
box-shadow: none;
}
.distributors-box-content input:checked + .box1 .box-title1 {
border-bottom: 1px solid rgba(0,0,0,.18);
}
input:checked + .box1 .box-content1,
input:checked + .box1 .box-close1 {
display: inline-block;
}
.distributors-box-content .box-title1 {
width: calc(100%);
}
.distributors-box-content .box-title1:before {
position: absolute;
display: block;
content: '\203a';
font-size: 18pt;
right: 20px;
top: -2px;
transition: transform .15s ease-in-out;
color: rgba(0,0,0,.54);
}
input:checked + .distributors-box-content section .box-title1:before {
transform: rotate(90deg);
}
/* CONTACT PAGE */
/* HR PAGE */
.human-resources {
width: 100%;
height: auto;
}
.human-resources > h2 {
border-bottom: 1px solid #000000;
margin-bottom: 35px;
}
.human-resources-accordion {
margin: auto;
width: 100%;
}
.human-resources-accordion input[type=radio] {
display: none;
}
.human-resources-box {
position: relative;
height: 90px;
transition: all .15s ease-in-out;
margin: 25px 0;
border: 1px solid #f1eeeb;
}
.human-resources-box::before {
content: '';
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
.human-resources-box-title {
width: calc(100%);
height: 90px;
line-height: 90px;
font-size: 18px;
font-weight: 200;
padding-left: 65px;
display: inline-block;
cursor: pointer;
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.human-resources-box-content {
width: calc(100%);
padding: 10px 30px;
font-size: 11pt;
color: rgba(0,0,0,.54);
display: none;
}
.human-resources-box-content > h2 {
font-size: 12px;
font-weight: 200;
color: #000000;
}
.human-resources-box-content > ul {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
margin: 30px 0;
}
.human-resources-box-content > ul > li {
padding: 5px 0;
}
.human-resources-box-content > ul > li > p {
font-size: 18px;
font-weight: 200;
color: #000000;
}
.human-resources-box-content > ul > li > p > label {
font-size: 18px;
font-weight: 200;
color: #000000;
margin-right: 10px;
}
.human-resources-box-close {
position: absolute;
height: 90px;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
input:checked + .human-resources-box {
height: auto;
margin: 16px 0;
}
input:checked + .human-resources-box .human-resources-box-title {
/* border-bottom: 1px solid rgba(0,0,0,.18); */
}
input:checked + .human-resources-box .human-resources-box-content,
input:checked + .human-resources-box .human-resources-box-close {
display: inline-block;
}
.human-resources-arrows section .box-title {
padding-left: 44px;
width: calc(100%);
}
.human-resources-arrows section .human-resources-box-title:after {
position: absolute;
display: block;
content: '\208a';
font-size: 30pt;
right: 40px;
top: -10px;
transition: transform .15s ease-in-out;
color: rgba(0,0,0,.54);
}
input:checked + section.human-resources-box .human-resources-box-title:after {
content: '\208b';
font-size: 30pt;
right: 40px;
top: -10px;
transition: transform .15s ease-in-out;
}
.hr-form-experience ul {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
}
.hr-form-experience ul > li {
padding: 20px;
width: 20%;
}
.hr-form-experience ul > li > input {
padding: 5px 20px;
width: 100%;
font-size: 14px;
color: #000000;
/* background-color: #f1eeeb; */
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #ddd8d4;
outline: none;
}
.hr-form-personal ul {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.hr-form-personal ul > li {
padding: 20px;
width: 50%;
}
.hr-form-personal ul > li:last-child {
width: 100%;
}
.hr-form-personal ul > li > input {
padding: 5px 20px;
width: 100%;
font-size: 14px;
color: #000000;
/* background-color: #f1eeeb; */
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #ddd8d4;
outline: none;
}
.hr-form-personal ul > li > select {
padding: 5px 20px;
width: 100%;
font-size: 14px;
color: #000000;
/* background-color: #f1eeeb; */
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #ddd8d4;
outline: none;
}
.hr-form-personal ul > li > textarea {
padding: 5px 20px;
width: 100%;
font-size: 14px;
color: #000000;
/* background-color: #f1eeeb; */
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #ddd8d4;
outline: none;
resize: none;
height: 100px;
}
.hr-form-education ul {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.hr-form-education ul > li {
padding: 20px;
width: 50%;
}
/* .hr-form-education ul > li:first-child {
width: 100%;
} */
.hr-form-education ul:nth-child(2) > li,
.hr-form-education ul:nth-child(3) > li,
.hr-form-education ul:nth-child(4) > li {
width: 25%;
}
.hr-form-education ul > li:nth-child(n + 14) {
width: 50%;
}
.hr-form-education ul > li > input {
padding: 5px 20px;
width: 100%;
font-size: 14px;
color: #000000;
/* background-color: #f1eeeb; */
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #ddd8d4;
outline: none;
}
.hr-form-education ul > li > select {
padding: 5px 20px;
width: 100%;
font-size: 14px;
color: #000000;
/* background-color: #f1eeeb; */
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #ddd8d4;
outline: none;
}
.hr-form-education ul > li > textarea {
padding: 5px 20px;
width: 100%;
height: 100px;
font-size: 14px;
color: #000000;
/* background-color: #f1eeeb; */
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #ddd8d4;
outline: none;
resize: none;
}
.hr-form-references ul {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.hr-form-references ul > li {
padding: 20px;
}
.hr-form-references ul > li:nth-child(-n + 12) {
width: 25%;
}
.hr-form-references ul > li:nth-child(n + 13) {
width: 100%;
}
.hr-form-references ul > li > input {
padding: 5px 20px;
width: 100%;
font-size: 14px;
color: #000000;
/* background-color: #f1eeeb; */
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #ddd8d4;
outline: none;
}
#hr {
margin-bottom: 50px;
}
#hr > h2 {
text-align: center;
font-size: 24px;
}
#hr > input[type=submit] {
width: 225px;
height: 55px;
font-size: 16px;
color: #000000;
background: transparent;
border: 1px solid #000000;
border-radius: 5px;
}
#hr > input[type=submit]:hover {
width: 225px;
height: 55px;
font-size: 16px;
color: #ffffff;
background: #000000;
border: 1px solid #000000;
border-radius: 5px;
}
.hr {
padding: 0 20px 50px 20px;
}
.hr > .inset > figure {
width: 115px;
margin: 0 auto 30px auto ;
}
.hr > .inset > figure > img {
width: 100%;
}
.hr > .inset > h2 {
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
.hr > .inset > p {
font-size: 16px;
text-align: center;
margin-bottom: 50px;
}
/* HR PAGE */
/* SUB PAGES */
section.subpage {
width: 100%;
height: auto;
min-height: 100%;
position: relative;
}
content.subpage {
width: 100%;
position: relative;
}
.head {
width: 100%;
height: 600px;
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.sub-head {
width: 100%;
height: 50px;
position: relative;
background-color: #1c1c1e;
}
figure.sponsorship {
background-image: url(../assets/sponsorship/main.jpg);
height: 600px;
position: relative;
}
figure.social-responsibility {
background-image: url(../assets/social-responsibility/main.jpg);
height: 600px;
position: relative;
}
figure.test-drive {
/* background-image: url(../assets/test-drive/main.jpg); */
height: 100svh;
position: relative;
}
figure.sustainability-tr {
background-image: url(../assets/sustainability/main-tr.jpg);
height: 100svh;
position: relative;
}
figure.sustainability-tr > div.inset > div.sustainability-text,
figure.sustainability-en > div.inset > div.sustainability-text,
figure.sustainability-de > div.inset > div.sustainability-text {
display: block;
width: 490px;
color: #ffffff;
font-weight: 200;
font-size: 16px;
line-height: 22px;
position: absolute;
bottom: 80px;
}
article.sustainability-tr-text {
display: none;
}
article.sustainability-en-text {
display: none;
}
article.sustainability-de-text {
display: none;
}
figure.sustainability-en {
background-image: url(../assets/sustainability/main-en.jpg);
height: auto !important;
min-height: 1100px;
position: relative;
background-size: 100%;
background-position: top;
background-color: #376f40;
}
figure.sustainability-de {
background-image: url(../assets/sustainability/main-de.jpg);
position: relative;
background-size: 100%;
background-position: top;
background-color: #376f40;
}
div.after-sales-icon {
width: 70px;
height: 70px;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 9999;
}
div.after-sales-icon a {
width: 100%;
height: 100%;
position: relative;
}
div.after-sales-icon a div.after-sales-title {
width: 0;
height: 70px;
white-space: nowrap;
position: absolute;
top: -20px;
right: -100px;
opacity: 0;
color: #ffffff;
font-size: 22px;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 20px;
}
div.after-sales-icon a:hover div.after-sales-title {
width: fit-content;
height: 70px;
position: absolute;
right: 100%;
opacity: 1;
transition-delay: .4s;
}
div.after-sales-icon a img {
width: 100%;
height: auto;
opacity: .5;
border-radius: 50%;
overflow: hidden;
}
div.after-sales-icon a:hover img {
width: 100%;
height: auto;
opacity: 1;
}
figure.after-sales-tr {
background-image: url(../assets/after-sales/main-tr.jpg);
height: auto !important;
min-height: 1100px;
position: relative;
background-size: 100%;
background-position: top;
background-color: #376f40;
}
figure.after-sales-tr > div.inset > div.after-sales-text,
figure.after-sales-en > div.inset > div.after-sales-text,
figure.after-sales-de > div.inset > div.after-sales-text {
display: block;
width: 340px;
color: #ffffff;
font-weight: 200;
font-size: 16px;
line-height: 22px;
position: absolute;
top: 120px;
}
figure.after-sales-tr > div.inset > div.after-sales-text p,
figure.after-sales-en > div.inset > div.after-sales-text p,
figure.after-sales-de > div.inset > div.after-sales-text p {
margin-top: 20px;
}
figure.after-sales-tr > div.inset > div.after-sales-text p a,
figure.after-sales-en > div.inset > div.after-sales-text p a,
figure.after-sales-de > div.inset > div.after-sales-text p a {
color: #ff9d45;
text-decoration: none;
font-weight: 600;
}
figure.after-sales-tr > div.inset > ul ,
figure.after-sales-en > div.inset > ul,
figure.after-sales-de > div.inset > ul {
width: auto;
color: #ffffff;
font-weight: 200;
font-size: 16px;
line-height: 22px;
position: absolute;
top: 710px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
figure.after-sales-tr > div.inset > ul li,
figure.after-sales-en > div.inset > ul li,
figure.after-sales-de > div.inset > ul li {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
margin-top: 30px;
width: 140px;
height: 150px;
margin: 0 20px;
}
figure.after-sales-tr > div.inset > ul li p,
figure.after-sales-en > div.inset > ul li p,
figure.after-sales-tr > div.inset > ul li strong,
figure.after-sales-en > div.inset > ul li strong {
text-align: center;
}
figure.after-sales-tr > div.inset > ul li figure,
figure.after-sales-en > div.inset > ul li figure,
figure.after-sales-de > div.inset > ul li figure {
height: 64px;
width: 64px;
margin-bottom: 10px;
}
figure.after-sales-tr > div.inset > ul li figure img,
figure.after-sales-en > div.inset > ul li figure img,
figure.after-sales-de > div.inset > ul li figure img {
height: 64px;
width: 64px;
}
article.after-sales-tr-text {
display: none;
}
article.after-sales-en-text {
display: none;
}
figure.after-sales-en {
background-image: url(../assets/after-sales/main-en.jpg);
height: auto !important;
min-height: 1100px;
position: relative;
background-size: 100%;
background-position: top;
background-color: #376f40;
}
figure.after-sales-de {
background-image: url(../assets/after-sales/main-de.jpg);
height: auto !important;
min-height: 1100px;
position: relative;
background-size: 100%;
background-position: top;
background-color: #376f40;
}
a.rate-us {
color: #325a31;
text-decoration: none;
position: fixed;
bottom: 180px;
right: 50px;
display: block;
width: auto;
height: auto;
padding: 10px 35px;
background-color: #ffffff;
border-radius: 5px;
}
a.rate-us:hover {
color: #ffffff;
background-color: #325a31;
}
div.as-form-mobile {
display: none;
}
div.as-form {
width: 1280px;
height: auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
position: absolute;
bottom: 180px;
}
div.as-form form {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
div.as-form input[type=text],
div.as-form input[type=email],
div.as-form input[type=phone],
div.as-form textarea {
width: 150px;
height: 40px;
border: none;
outline: none;
padding: 5px 20px;
font-size: 12px;
color: #000000;
background-color: #ffffff;
border-radius: 5px;
margin: 0 10px;
transition: all .2s ease-in-out;
}
div.as-form button {
width: 150px;
height: 40px;
border: none;
outline: none;
padding: 5px 20px;
font-size: 12px;
color: #ffffff;
background-color: #ff9d45;
border-radius: 5px;
margin: 0 10px;
}
div.as-form button:hover {
color: #000000;
background-color: #ffffff;
}
div.as-form input[type=text]::placeholder,
div.as-form input[type=email]::placeholder,
div.as-form input[type=phone]::placeholder,
div.as-form textarea::placeholder {
color: #000000;
font-size: 12px;
font-weight: 200;
padding: 5px;
}
div.as-form textarea {
width: 300px;
resize: none;
}
figure.register-reseller {
background-image: url(../assets/reseller/register.jpg);
height: 100svh;
position: relative;
}
figure.login-reseller {
/* background-image: url(../assets/reseller/login.jpg); */
height: 100svh;
position: relative;
}
figure.reseller {
background-image: url(../assets/reseller/main.jpg);
height: 600px;
position: relative;
}
figure.register-reseller > div.inset,
figure.login-reseller > div.inset,
figure.test-drive > div.inset {
position: relative;
height: 100svh;
}
figure.register-reseller > div.inset > div.head-title,
figure.login-reseller > div.inset > div.head-title,
figure.test-drive > div.inset > div.head-title {
width: 1280px;
height: auto;
position: absolute;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: auto;
left: 0;
right: 0;
bottom: 100px;
}
figure.register-reseller > div.inset > div.head-title > h5,
figure.login-reseller > div.inset > div.head-title > h5,
figure.test-drive > div.inset > div.head-title > h5 {
text-align: left;
}
figure.pr-head > div.inset {
position: relative;
height: 100svh;
}
figure.pr-head > div.inset > div.head-title {
width: 1280px;
height: auto;
position: absolute;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: auto;
left: 0;
right: 0;
bottom: 100px;
}
figure.pr-head > div.inset > div.head-title > h5 {
text-align: left;
}
figure.pr-head {
/* background-image: url(../assets/price-request/main.jpg); */
height: 100svh;
position: relative;
}
figure.service-points {
background-image: url(../assets/service-points/main.jpg);
}
figure.kvkk {
background-image: url(../assets/kvkk/main.jpg);
}
figure.owners {
background-image: url(../assets/owners/main.jpg);
}
figure.catalogs {
background-image: url(../assets/catalogs/main.jpg);
}
figure.contact {
background-image: url(../assets/contact/main.jpg);
}
figure.human-resources {
background-image: url(../assets/human-resources/main.jpg);
}
figure.news {
background-image: url(../assets/news/main.jpg);
}
figure.fairs {
background-image: url(../assets/fairs/main.jpg);
}
figure.blog {
background-image: url(../assets/blog/main.jpg);
}
figure.content {
height: 100vh;
width: 100%;
position: relative;
}
figure.content > video {
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
top: 0;
left: 0;
}
.head-title {
width: 1280px;
height: 100%;
margin: auto;
position: relative;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sub-head-title {
width: 1280px;
height: 100%;
margin: 50px auto;
position: relative;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.sub-head > .sub-head-title {
width: 1280px;
height: 100%;
margin: auto;
position: relative;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: center;
align-items: center;
}
.head-title > h1 {
font-size: 48px;
font-weight: 600;
color: #ffffff;
text-align: center;
margin-bottom: 15px;
}
.head-title > h5 {
font-size: 18px;
font-weight: 200;
color: #ffffff;
text-align: center;
margin-top: 15px;
}
.sub-head > .head-title > h1 {
font-size: 48px;
font-weight: 600;
color: #ffffff;
text-align: left;
margin-bottom: 15px;
}
.sub-head > .head-title > h5 {
font-size: 18px;
font-weight: 200;
color: #ffffff;
text-align: left;
margin-top: 15px;
}
.head-title > ul {
width: 100%;
height: 120px;
margin: auto;
position: absolute;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;
align-items: center;
bottom: 100px;
}
.head-title > ul > li {
width: auto;
min-width: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.head-title > ul > li > figure {
width: 50px;
height: 50px;
margin-bottom: 25px;
}
.head-title > ul > li > figure > img {
width: 50px;
height: 50px;
}
.head-title > ul > li > h4 {
font-size: 24px;
color: #ffffff;
font-weight: 600;
width: fit-content;
}
.head-title > ul > li > h5 {
font-size: 16px;
color: #ffffff;
font-weight: 300;
}
.content-area {
width: 1280px;
height: auto;
min-height: 400px;
margin: auto;
margin-top: 0;
position: relative;
}
.content-area > .inset > .tabs > .panel > h2 {
font-size: 24px;
color: #000000;
font-weight: 700;
padding: 20px 0;
border-bottom: 1px solid #a59c94;
}
.content-area > .inset > .tabs > .panel > ul {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
margin: 30px 0;
}
.content-area > .inset > .tabs > .panel > ul > li {
display: flex;
flex-direction: column;
width: 600px;
}
.content-area > .inset > .tabs > .panel > ul > li > h3 {
font-size: 24px;
font-weight: 500;
color: #000000;
margin-bottom: 30px;
}
.content-area > .inset > .tabs > .panel > ul > li > h4 {
font-size: 18px;
font-weight: 200;
color: #000000;
}
.content-area > .inset > .tabs > .panel > ul > li > address {
font-size: 18px;
font-weight: 200;
color: #000000;
margin-bottom: 30px;
}
.content-area > .inset > .tabs > .panel > ul > li > p {
font-size: 18px;
color: #000000;
font-weight: 200;
}
.content-area > .inset > .tabs > .panel > ul > li > p > label {
font-weight: 600;
display: inline;
}
.content-area > .inset > .tabs > .panel > ul > li > p > a {
color: #000000;
font-weight: 400;
display: inline;
text-decoration: none;
}
.content-area > .inset > .tabs > .panel > ul > li > p > a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
transition: width .3s;
}
.content-area > .inset > .tabs > .panel > ul > li > p > a:hover::after {
width: 100%;
}
.content-area > .inset > .tabs > .panel > ul > li > button {
padding: 15px 30px;
max-width: 450px;
text-align: left;
background-color: #000000;
color: #ffffff;
transition: all ease .3s;
border-radius: 10px;
margin-bottom: 15px;
display: block;
padding: 10px 30px;
}
.content-area > .inset > .tabs > .panel > ul > li > button:hover {
background-color: #ffffff;
color: #000000;
transition: all ease .3s;
border: 1px solid #000000;
}
.content-area > .inset > .tabs > .panel > ul > li > form {
margin-top: 30px;
}
.content-area > .inset > .tabs > .panel > ul > li > form > ul {
width: 100%;
height: auto;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.content-area > .inset > .tabs > .panel > ul > li > form > ul > li {
padding: 20px 0;
}
.content-area > .inset > .tabs > .panel > ul > li > form > ul > li > input {
width: 290px;
height: 45px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #cfcfcf;
outline: none;
}
.content-area > .inset > .tabs > .panel > ul > li > form > ul > li:last-child {
width: 100%;
}
.content-area > .inset > .tabs > .panel > ul > li > form > ul > li:last-child > textarea {
width: 100%;
height: 180px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #cfcfcf;
outline: none;
}
.content-area > .inset > .tabs > .panel > ul > li > form > input[type=submit] {
width: auto;
height: auto;
padding: 15px 30px;
border-radius: 10px;
background-color: #000000;
color: #ffffff;
}
.content-area > .inset > .tabs > .panel > ul > li > form > input[type=submit]:hover {
background-color: #ffffff;
color: #000000;
border: 1px solid #000000;
}
/* */
.distributor-form > ul {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: auto auto 100px auto;
align-items: stretch;
}
.distributor-form > ul > li {
width: 50%;
height: auto;
padding: 10px 20px;
}
.distributor-form > ul > li > ul {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.distributor-form > ul > li > ul > li {
width: 100%;
height: 70px;
padding: 10px 20px;
}
.distributor-form > ul > li:nth-child(2) > ul > li {
height: auto;
}
.distributor-form > ul > li > ul > li > select {
width: 100%;
height: 45px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #cfcfcf;
outline: none;
}
.distributor-form > ul > li > ul > li > input[type=text] {
width: 100%;
height: 45px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #cfcfcf;
outline: none;
}
.distributor-form > ul > li > ul > li > textarea {
width: 100%;
height: 180px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #cfcfcf;
outline: none;
resize: none;
}
.distributor-form > ul > li > ul > li > input[type=submit] {
width: auto;
height: auto;
padding: 15px 30px;
border-radius: 10px;
background-color: #000000;
color: #ffffff;
}
.distributor-form > ul > li > ul > li > input[type=submit]:hover {
background-color: #ffffff;
color: #000000;
border: 1px solid #000000;
}
.distributor-form > ul > li > ul > li > div > label {
font-size: 14px;
font-weight: 300;
color: #919191;
}
.map {
width: 100%;
height: 700px;
border: none;
outline: none;
/* -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); */
}
.news > .inset > nav.accordion {
font-size: 24px;
color: #000000;
}
.news > .inset > nav.accordion > input:checked + .box {
box-shadow: none;
}
.news > .inset > nav.accordion > section.box {
border: 1px solid #f1eeeb;
margin-bottom: 20px;
}
.news > .inset > nav.accordion > section.box::before {
box-shadow: none;
}
.news > .inset > nav.accordion > section.box > label.box-title {
font-size: 18px;
color: #000000;
font-weight: 200;
}
.news > .inset > nav.accordion > section.box > div.box-content {
padding: 50px;
}
.news > .inset > nav.accordion > section.box > div.box-content > figure {
width: 320px;
height: 320px;
display: flex;
background-color: #ffffff;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
float: left;
}
.news > .inset > nav.accordion > section.box > div.box-content > figure > a > img {
max-width: 320px;
max-height: 320px;
}
.news > .inset > nav.accordion > section.box > div.box-content > div.news-content {
width: 800px;
/* max-height: 320px;*/
float: left;
margin-left: 50px;
}
.news > .inset > nav.accordion > section.box > div.box-content > div.news-content > time {
display: block;
font-size: 16px;
font-weight: 300;
}
.news > .inset > nav.accordion > section.box > div.box-content > div.news-content > article {
max-width: 970px;
font-size: 18px;
font-weight: 400;
}
.news-lightbox {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.news-lightbox-content {
display: block;
margin: auto;
max-width: 80%;
max-height: 80%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.news-close {
position: absolute;
top: 15px;
right: 35px;
color: white;
font-size: 30px;
font-weight: bold;
transition: 0.3s;
}
.news-close:hover,
.news-close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.lightbox-nav {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.lightbox-nav button {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 24px;
padding: 10px;
}
.lightbox-nav .prev {
float: left;
}
.lightbox-nav .next {
float: right;
}
#news-lightbox:target .lightbox-nav {
display: block;
}
.blog .inset {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
/*.blog .inset li:first-child {
width: 820px;
height: auto;
float: left;
padding-right: 60px;
}*/
/*
.blog .inset li:last-child {
width: 460px;
height: auto;
float: right;
}*/
.blog .inset article {
width: 100%;
height: auto;
margin: 50px 0 90px 0;
position: relative;
}
.blog .inset article:first-child {
margin-top: 0px!important;
}
.blog .inset article img {
width: 100%;
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #f3f1f0;
position: relative;
margin-bottom: 30px;
}
.blog .inset article .time {
font-size: 18px;
font-weight: 300;
color: #555;
background-color: rgba(225, 221, 217, 0.6);
position: absolute;
display: flex;
width: auto;
height: 60px;
padding:30px;
left: 50px;
top: -30px;
border-radius: 10px;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
text-align: center;
text-transform: uppercase;
}
.blog .inset article h2 {
font-size: 24px;
font-weight: 600;
color: #000000;
}
.blog .inset article div.blog-content {
font-size: 18px;
font-weight: 300;
color: #000000;
margin-top: 30px;
line-height: 32px;
}
.blog .inset article div.blog-content h3 {
font-size: 20px;
font-weight: 600;
color: #000000;
margin: 10px 0;
}
.blog .inset article div.blog-content h3 strong {
font-size: 20px;
font-weight: 600;
color: #000000;
}
.blog .inset article div.blog-content h4 {
font-size: 18px;
font-weight: 600;
color: #000000;
margin: 10px 0;
}
.blog .inset article div.blog-content h4 strong {
font-size: 20px;
font-weight: 600;
color: #000000;
}
.blog .inset article div.blog-content p {
font-size: 18px;
font-weight: 300;
color: #000000;
margin: 10px 0;
}
.blog .inset article button {
background-color: #ffffff;
border: 1px solid #000000;
font-size: 18px;
font-weight: 300;
color: #000000;
margin-top: 25px;
padding: 10px 40px;
border-radius: 10px;
transition: all ease .3s;
}
.blog .inset article button:hover {
background-color: #000000;
border: 1px solid #000000;
color: #ffffff;
transition: all ease .3s;
}
.blog-div .time {
color:#555;
}
.blog .inset ul {
width: 100%;
height: auto;
background-color: #f3f1f0;
margin-top: 10px;
padding-bottom: 50px;
overflow: hidden;
}
.blog-detail .inset ul {
padding:inherit;
margin:0px;
background:transparent;
}
.blog-detail .diger-yazilar-div {
background:#f3f1f0;
}
.homeblogimg {
height: 390px;
object-fit: cover;
}
.blog-detail .inset ul li {
list-style: inside;
}
.blog-detail .inset article div.blog-content h2 {
font-size: 32px;
margin-top:15px;
}
.blog-detail .inset article div.blog-content h3 {
font-size: 28px;
margin-top:15px;
}
.blog-detail .inset article div.blog-content h4 {
font-size: 24px;
margin-top:15px;
}
.blog-detail .inset article div.blog-content h5 {
font-size: 20px;
margin-top:15px;
}
.blog-detail .inset article div.blog-content h6 {
font-size: 17px;
margin-top:15px;
}
.blog .inset .diger-yazilar-div ul li {
width: 100%;
height: auto;
padding: 15px 30px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
transition: all ease .3s;
}
.blog .inset ul > li > img {
width: 150px;
min-width: 150px;
height: 100px;
object-fit: cover;
margin-right: 20px;
}
.blog > .inset > ul > li:last-child > ul > li:first-child {
width: 100%;
height: auto;
padding: 30px;
}
.blog > .inset > ul > li:last-child > ul > li:first-child > h2 {
border-bottom: 1px solid #cfcfcf;
padding-bottom: 20px;
font-size: 24px;
color: #000000;
}
.blog > .inset > ul > li:last-child > ul > li:nth-child(2) > ul {
width: 100%;
height: auto;
}
.blog > .inset > ul > li:last-child > ul > li:nth-child(2) > ul > li {
width: 100%;
height: auto;
padding: 15px 30px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
transition: all ease .3s;
}
.blog > .inset > ul > li:last-child > ul > li:nth-child(2) > ul > li:hover {
background-color: #fdfdfd;
transition: all ease .3s;
}
.blog > .inset > ul > li:last-child > ul > li:nth-child(2) > ul > li > img {
width: 150px;
min-width: 150px;
height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #cecece;
margin-right: 20px;
}
.diger-yazilar-div h2 {
background-color:#f3f1f0;
padding: 30px;
font-size: 24px;
color: #000000;
}
.blog .inset ul > li > h3 {
font-size: 18px;
color: #000000;
font-weight: 300;
}
.blog-detail > .inset > ul {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.blog-detail > .inset > ul > li:first-child {
width: 820px;
height: auto;
float: left;
padding-right: 60px;
}
.blog-detail > .inset > ul > li:last-child {
width: 460px;
height: auto;
float: right;
}
.blog-detail > .inset > ul > li:first-child > article {
width: 100%;
height: auto;
margin: 0 0 130px 0;
}
.blog-detail > .inset > ul > li:first-child > article > figure {
clear: both;
width: 720px;
height: 405px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #f3f1f0;
position: relative;
margin-bottom: 50px;
}
.blog-detail > .inset > ul > li:first-child > article > time {
font-size: 16px;
font-weight: 300;
color: #000000;
clear: both;
text-align: left;
text-transform: uppercase;
margin: 20px 0;
}
.blog-detail > .inset > ul > li:first-child > article > h2 {
font-size: 24px;
font-weight: 600;
color: #000000;
width: fit-content;
float: left;
margin: 20px 0;
}
.blog-detail > .inset > ul > li:first-child > article > div.blog-content {
clear: both;
font-size: 18px;
font-weight: 300;
color: #000000;
margin-top: 30px;
width: 720px;
}
.blog-detail > .inset > ul > li:first-child > article > div.blog-content > h3 {
font-size: 20px;
font-weight: 600;
color: #000000;
margin: 20px 0;
}
.blog-detail > .inset > ul > li:first-child > article > div.blog-content > h3 > strong {
font-size: 20px;
font-weight: 600;
color: #000000;
}
.blog-detail > .inset > ul > li:first-child > article > div.blog-content > h4 {
font-size: 18px;
font-weight: 600;
color: #000000;
margin: 10px 0;
}
.blog-detail > .inset > ul > li:first-child > article > div.blog-content > h4 > strong {
font-size: 20px;
font-weight: 600;
color: #000000;
}
.blog-detail > .inset > ul > li:first-child > article > div.blog-content > p {
font-size: 18px;
font-weight: 300;
color: #000000;
margin: 10px 0;
}
.blog-detail > .inset > ul > li:first-child > article > button {
background-color: #ffffff;
border: 1px solid #000000;
font-size: 18px;
font-weight: 300;
color: #000000;
margin-top: 25px;
padding: 10px 40px;
border-radius: 10px;
transition: all ease .3s;
}
.blog-detail > .inset > ul > li:first-child > article > button:hover {
background-color: #000000;
border: 1px solid #000000;
color: #ffffff;
transition: all ease .3s;
}
.blog-detail > .inset > ul > li:last-child > ul {
width: 100%;
height: auto;
background-color: #f3f1f0;
margin-top: 100px;
padding-bottom: 50px;
}
.blog-detail > .inset > ul > li:last-child > ul > li:first-child {
width: 100%;
height: auto;
padding: 30px;
}
.blog-detail > .inset > ul > li:last-child > ul > li:first-child > h2 {
border-bottom: 1px solid #cfcfcf;
padding-bottom: 20px;
font-size: 24px;
color: #000000;
}
.blog-detail > .inset > ul > li:last-child > ul > li:nth-child(2) > ul {
width: 100%;
height: auto;
}
.blog-detail > .inset > ul > li:last-child > ul > li:nth-child(2) > ul > li {
width: 100%;
height: auto;
padding: 15px 30px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
transition: all ease .3s;
}
.blog-detail > .inset > ul > li:last-child > ul > li:nth-child(2) > ul > li:hover {
background-color: #fdfdfd;
transition: all ease .3s;
}
.blog-detail > .inset > ul > li:last-child > ul > li:nth-child(2) > ul > li > figure {
width: 150px;
min-width: 150px;
height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #cecece;
margin-right: 20px;
}
.blog-detail > .inset > ul > li:last-child > ul > li:nth-child(2) > ul > li > h3 {
font-size: 18px;
color: #000000;
font-weight: 300;
}
/* FAIRS */
#yearFilter {
width: 250px;
height: 50px;
border: 1px solid #cfcfcf;
border-radius: 5px;
}
#yearFilter > option {
text-align: center;
font-size: 18px;
color: #1c1c1e;
}
.fairs-accordion {
margin: auto;
width: 100%;
}
.fairs-accordion input {
display: none;
}
.fairs-box {
position: relative;
background: white;
height: 120px;
transition: all .15s ease-in-out;
margin: 25px 0;
border: 1px solid #f1eeeb;
}
.fairs-box::before {
content: '';
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
.fairs-box-title {
width: calc(100%);
height: 120px;
line-height: 120px;
display: inline-block;
cursor: pointer;
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.fairs-box-title > ul {
display: inline-flex;
flex-direction: column;
}
.fairs-box-title > ul > li {
}
.fairs-box-title > ul > li > h3 {
font-size: 18px;
font-weight: 200;
color: #000000;
}
.fairs-box-title > ul > li > h4 {
font-size: 16px;
font-weight: 200;
color: #000000;
}
.fairs-box-title > figure {
width: 180px;
height: 120px;
margin: 0 35px;
display: inline-block;
position: relative;
}
.fairs-box-title > figure:after {
content:"";
background: #ccc;
position: absolute;
bottom: 12.5%;
right: 0;
height: 75%;
width: 1px;
}
.fairs-box-title > figure > img {
width: 150px;
height: 78px;
}
.fairs-box-content {
width: calc(100% - 214px);
padding: 30px 40px;
font-size: 11pt;
color: rgba(0,0,0,.54);
display: none;
position: relative;
}
.fairs-box-content:before {
content:"";
background: #ccc;
position: absolute;
bottom: 12.5%;
left: 0;
height: 105%;
width: 1px;
}
.fairs-box-close {
position: absolute;
height: 120px;
width: calc(100% - 214px);
top: 0;
left: 0;
cursor: pointer;
display: none;
}
input:checked + .fairs-box {
height: auto;
margin: 16px 0;
}
input:checked + .fairs-box .fairs-box-title {
/* border-bottom: 1px solid rgba(0,0,0,.18); */
}
input:checked + .fairs-box .fairs-box-content,
input:checked + .fairs-box .fairs-box-close {
display: inline-block;
margin-left: 214px;
}
.fairs-arrows section .box-title {
padding-left: 44px;
width: calc(100%);
}
.fairs-arrows section .fairs-box-title:before {
position: absolute;
display: block;
content: '\208a';
font-size: 50pt;
right: 20px;
top: -40px;
transition: transform .15s ease-in-out;
color: rgba(0,0,0,.54);
}
input:checked + section.fairs-box .fairs-box-title:before {
content: '\208b';
font-size: 50pt;
right: 20px;
top: -40px;
transition: transform .15s ease-in-out;
}
.fair-gallery {
width: 100%;
height: auto;
margin: 30px 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.fair-gallery > a > img {
height: 100px;
display: block;
float: left;
width: auto;
margin: 10px;
padding: 5px;
border: 1px solid #e1e1e1;
}
/* .fair-gallery #vanilla-slideshow-container {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.fair-gallery #vanilla-slideshow {
width: 100%;
height: 100%;
}
.fair-gallery #vanilla-slideshow .vanilla-slide {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.vanilla-active {
opacity: 1!important;
}
.fair-gallery #vanilla-slideshow .vanilla-slide img {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
z-index: -10;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) {
.fair-gallery #vanilla-slideshow .vanilla-slide img {
left: 50%;
margin-left: -512px;
}
}
.fair-gallery #vanilla-slideshow-previous {
position: absolute;
left: 10px;
top: 50%;
width: 48px;
height: 50px;
background-position: 0 100%;
cursor: pointer;
opacity: 0.7;
z-index: 5;
display: none;
}
.fair-gallery #vanilla-slideshow-next {
position: absolute;
right: 10px;
top: 50%;
width: 48px;
height: 50px;
background-position: 100% 100%;
cursor: pointer;
opacity: 0.7;
z-index: 5;
display: none;
}
.fair-gallery #vanilla-slideshow-previous:hover, #vanilla-slideshow-next:hover {
opacity: 1;
}
.fair-gallery #vanilla-indicators {
display: inline-block;
z-index: 5;
position: absolute;
bottom: 50px;
}
.fair-gallery .vanilla-indicators {
box-shadow: 0 0 10px #333333;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #ffffff;
float: left;
margin-right: 3px;
cursor: pointer;
}
.fair-gallery .vanilla-indicators.vanilla-active {
background-color: #ffffff;
} */
/* Model OPT SLIDE */
.model-optSlide {
width: 100svw;
height: 100svh;
position: relative;
background-color: #e1ddd9;
padding-top: 1px;
}
.model-sub_modelSlide {
width: 100svw;
height: 100svh;
position: absolute;
background-color: #e1ddd9;
top: 0;
left: 0;
z-index: 0;
}
/* FAIRS */
.content-detail {
background-color: #e1ddd9;
}
.content-detail > article.content-area {
width: 100%;
margin-top: 0;
background-image: url(../assets/content/corporate-bg.jpg);
background-repeat: no-repeat;
background-position: center 70px;
background-size: contain;
height: auto;
}
.content-detail > article.content-area > div {
text-align: center;
height: 100svh;
padding-top: 100px;
}
@media only screen and (min-width: 1800px) {
.content-detail > article.content-area > div {
text-align: center;
height: 110svh;
padding-top: 100px;
}
}
.content-detail > article.content-area > div > h1.main-title, .content-detail > article.content-area > div > h2.main-title {
font-size: 36px;
font-weight: 600;
margin-bottom: 50px;
}
.content-detail > article.content-area > div > p {
font-size: 18px;
font-weight: 300;
line-height: 26px;
margin-bottom: 30px;
}
.content-detail > article.content-area > div > h3 {
font-size: 36px;
font-weight: 300;
line-height: 26px;
margin-top: 40px;
margin-bottom: 30px;
}
.content-detail > article.content-area > ul.content-list-item > li {
text-align: center;
position: relative;
width: 100%;
}
.content-detail > article.content-area > ul.content-list-item > li > h2 {
font-size: 36px;
font-weight: 600;
color: #000000;
}
.content-detail > article.content-area > ul.content-list-item > li:nth-child(2) {
height: 300px;
margin-top: 120px;
}
.content-detail > article.content-area > ul.content-list-item > li:nth-child(2) > ul {
width: 100%;
height: 300px;
display: flex;
margin: auto;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
}
.content-detail > article.content-area > ul.content-list-item > li:nth-child(2) > ul > li {
height: 300px;
min-width: 350px;
position: relative;
margin: 0 50px;
}
.content-detail > article.content-area > ul.content-list-item > li:nth-child(2) > ul > li > h5 {
font-size: 120px;
font-weight: 100;
color: #000000;
text-align: left;
}
.content-detail > article.content-area > ul.content-list-item > li:nth-child(2) > ul > li > div {
background-color: #e1ddd9;
position: absolute;
top: 85px;
text-align: left;
padding: 10px 0;
}
.content-detail > article.content-area > ul.content-list-item > li:nth-child(2) > ul > li > div > h6 {
font-size: 30px;
font-weight: 600;
color: #000000;
}
.content-detail > article.content-area > ul.content-list-item > li:nth-child(2) > ul > li > div > span {
font-size: 18px;
font-weight: 300;
color: #000000;
}
/* CONTENT CAROUSEL */
.carousel-indicators {
margin-bottom: 0!important;
display: none;
}
.carousel-control-prev {
left: -150px;
}
.carousel-control-next {
right: -150px;
}
.carousel {
margin-top: 100px;
height: 930px;
}
ul.slides {
display: block;
position: relative;
height: 737px;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
ul.slides input {
display: none;
}
.slide-container {
display: block;
}
.slide-image {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-size:cover;
top: 0;
opacity: 0;
transition: all .7s ease-in-out;
}
.slide-image img {
width: auto;
min-width: 100%;
height: 100%;
}
.carousel-controls {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 999;
font-size: 100px;
line-height: 600px;
color: #fff;
}
.carousel-controls label {
display: none;
position: absolute;
padding: 0 20px;
opacity: 0;
transition: opacity .2s;
cursor: pointer;
}
.slide-image:hover + .carousel-controls label{
opacity: 0.5;
}
.carousel-controls label:hover {
opacity: 1;
}
.carousel-controls .prev-slide {
width: 49%;
text-align: left;
left: 0;
}
.carousel-controls .next-slide {
width: 49%;
text-align: right;
right: 0;
}
.carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: -30px;
z-index: 999;
text-align: center;
}
.carousel-dots .carousel-dot {
display: inline-block;
width: 30px;
height: 30px;
border-top: 3px solid #565656;
opacity: 0.5;
margin: 10px;
width: 375px;
padding-top: 20px;
color: #000000;
text-align: left;
}
.carousel-dots .carousel-dot > span {
font-size: 24px;
font-weight: 500;
}
.carousel-dots .carousel-dot > p {
font-size: 14px;
font-weight: 300;
}
input:checked + .slide-container .slide-image {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .carousel-controls label {
display: block;
}
input#img-1:checked ~ .carousel-dots label#img-dot-1,
input#img-2:checked ~ .carousel-dots label#img-dot-2,
input#img-3:checked ~ .carousel-dots label#img-dot-3,
input#img-4:checked ~ .carousel-dots label#img-dot-4,
input#img-5:checked ~ .carousel-dots label#img-dot-5,
input#img-6:checked ~ .carousel-dots label#img-dot-6 {
opacity: 1;
border-top: 3px solid #000000;
}
input:checked + .slide-container .nav label { display: block; }
/* CONTENT CAROUSEL */
.corporate-middle {
margin-top: 130px;
}
.quality-certs {
margin-top: 100px;
}
.quality-certs > h2 {
text-align: center;
}
.quality-certs > ul {
height: 200px;
margin: 50px;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.quality-certs > ul > li {
}
.quality-certs > ul > li > figure {
}
.quality-certs > ul > li > figure > img {
width: auto;
height: 130px;
}
.owners-detail {
}
.owners-detail > article.content-area > div.inset > p {
font-size: 18px;
color: #000000;
font-weight: 300;
width: 900px;
line-height: 26px;
text-align: center;
margin: auto;
}
.owners-detail > article.content-area > div.inset > h2 {
font-size: 24px;
color: #000000;
font-weight: 600;
width: fit-content;
margin: 50px auto;
}
.owners-detail > article.content-area > div.inset > ul {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
}
.owners-detail > article.content-area > div.inset > ul > li {
width: 33%;
height: auto;
margin: 50px 0;
padding: 0 20px;
text-align: center;
position: relative;
z-index: 0;
}
.p1000 > li:nth-child(1) {border-right: none!important;}
.owners-detail > article.content-area > div.inset > ul > li:nth-child(1),
.owners-detail > article.content-area > div.inset > ul > li:nth-child(2),
.owners-detail > article.content-area > div.inset > ul > li:nth-child(4),
.owners-detail > article.content-area > div.inset > ul > li:nth-child(5) {
border-right: 1px solid #cfcbc6;
}
.owners-detail > article.content-area > div.inset > ul > li > figure {
position: relative;
z-index: -1;
}
.owners-detail > article.content-area > div.inset > ul > li > h3 {
font-size: 24px;
font-weight: 500;
color: #000000;
}
.owners-detail > article.content-area > div.inset > ul > li > span {
font-size: 18px;
font-weight: 300;
color: #000000;
display: block;
margin: 10px 0 20px 0;
}
.owners-detail > article.content-area > div.inset > ul > li > button {
font-size: 16px;
font-weight: 300;
color: #000000;
display: block;
padding: 10px 30px;
margin: auto;
background-color: #ffffff;
border: 1px solid #000000;
border-radius: 10px;
position: relative;
z-index: 0;
}
.owners-detail > article.content-area > div.inset > ul > li > button:hover {
color: #ffffff;
display: block;
padding: 10px 30px;
margin: auto;
background-color: #000000;
border: 1px solid #000000;
border-radius: 10px;
}
.owners-detail > article.content-area > div.inset > ul > li > figure > img {
width: 100%;
height: auto;
}
.p1000 > li:nth-child(2) {
border-right: none!important;
}
.vehicle-serie {
position: relative;
}
#vehicleSerie {
position: relative;
}
i.vehicleSerie {
position: absolute;
top: 20px;
right: 30px;
z-index: 20;
color: #000000;
}
i.vehicleSerie > img {
width: 0;
height: 0;
position: absolute;
transition: all ease .3s;
top: 40px;
right: 0;
z-index: 20;
opacity: 0;
z-index: -1;
}
i.vehicleSerie:hover > img {
width: 250px;
height: auto;
opacity: 1;
transition: all ease .3s;
z-index: 20;
}
.lightbox-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
justify-content: center;
align-items: center;
}
.lightbox-content {
background-color: white;
padding: 20px;
border-radius: 8px;
width: 60%;
max-width: 500px;
text-align: center;
}
.lightbox-content > .lightbox-header {
width: 100%;
height: 50px;
position: relative;
margin-bottom: 20px;
}
.lightbox-content > .lightbox-header > h2 {
font-size: 20px;
font-weight: 400;
color: #000000;
width: 100%;
position: absolute;
left: 0;
top: 0;
text-align: center;
}
.lightbox-content > .lightbox-header > .close-btn {
color: #000000;
border: none;
padding: 5px 10px;
cursor: pointer;
font-size: 12px;
border-radius: 5px;
position: absolute;
right: 0;
top: 0;
}
.catalogs-detail > article.content-area > div.inset > ul {
width: 100%;
height: auto;
margin: auto;
display: table;
}
.catalogs-detail > article.content-area > div.inset > ul > li {
width: 33%;
height: auto;
float: left;
margin: 50px 0;
padding: 0 20px;
text-align: center
}
.catalogs-detail > article.content-area > div.inset > ul > li > h3 {
font-size: 24px;
font-weight: 500;
color: #000000;
margin-top: 20px;
}
.catalogs-detail > article.content-area > div.inset > ul > li > span {
font-size: 18px;
font-weight: 300;
color: #000000;
display: block;
margin: 10px 0 20px 0;
}
.catalogs-detail > article.content-area > div.inset > ul > li > a {
font-size: 16px;
font-weight: 300;
color: #000000;
display: block;
padding: 10px 30px;
margin: auto;
background-color: #ffffff;
border: 1px solid #000000;
border-radius: 10px;
text-decoration: none;
}
.catalogs-detail > article.content-area > div.inset > ul > li > a:hover {
color: #ffffff;
display: block;
padding: 10px 30px;
margin: auto;
background-color: #000000;
border: 1px solid #000000;
border-radius: 10px;
}
.catalogs-detail > article.content-area > div.inset > ul > li > figure > img {
width: 100%;
height: auto;
}
.login-reseller-inset {
position: absolute;
bottom: 0;
width: 400px;
right: 0;
background-color: #1c1c1e;
padding: 50px;
z-index: 5;
}
.login-reseller-inset > form > ul {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: column;
}
.login-reseller-inset > form > ul > li {
width: 100%;
height: 55px;
height: auto;
padding: 10px 0;
text-align: left
}
.login-reseller-inset > form > ul > li > input {
width: 100%;
height: 55px;
padding: 10px;
color: #ffffff;
font-size: 18px;
background-color: #2e2e32;
border: 1px solid #000000;
margin-bottom: 10px;
}
.login-reseller-inset > form > ul > li > a {
color: #ffffff;
font-size: 18px;
font-weight: 300;
text-decoration: none;
}
.login-reseller-inset > form > ul > li > a:hover {
text-decoration: underline;
}
.login-reseller-inset > form > ul > li > span {
color: #ffffff;
font-size: 18px;
font-weight: 300;
text-decoration: none;
}
.login-reseller-inset > form > ul > li > input::placeholder {
color: #ffffff;
}
.login-reseller-inset > form > ul > li > input[type=submit] {
width: 100%;
height: 45px;
color: #1c1c1e;
background-color: #a59c94;
font-size: 24px;
border: none;
padding: 0;
}
.login-reseller-inset > form > ul > li > input[type=submit]:hover {
color: #a59c94;
background-color: #1c1c1e;
}
.login-reseller-inset > h3 {
color: #ffffff;
font-size: 18px;
font-weight: 300;
margin-bottom: 10px;
}
.login-reseller-inset > h2 {
color: #ffffff;
font-size: 30px;
font-weight: 600;
border-bottom: 1px solid #333337;
padding-bottom: 15px;
margin-bottom: 40px;
}
.reseller > .tabs > .panel > h2 {
font-size: 24px;
font-weight: 600;
padding: 20px 0;
border-bottom: 1px solid #1f1f1f;
}
.reseller > .tabs > .panel > ul {
width: 100%;
height: auto;
margin: 50px 0;
padding: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.reseller > .tabs > .panel > ul > li {
font-size: 18px;
font-weight: 300;
color: #1f1f1f;
float: left;
padding: 20px 0;
border-bottom: 1px solid #c6c6c6;
height: auto;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.reseller > .tabs > .panel > ul > li > button {
font-size: 18px;
color: #1f1f1f;
background-color: transparent;
border: none;
}
.reseller > .tabs > .panel > ul > li > button:hover {
font-size: 18px;
color: #a9a9a9;
}
.reseller > .tabs > .panel > ul > li > button > i {
font-size: 24px;
background-color: transparent;
border: none;
}
.error {color: #f78080;}
.logout-button {
width: 230px;
height: 60px;
font-size: 16px;
background-color: transparent;
border: 1px solid #000000;
color: #000000;
border-radius: 5px;
margin-top: 50px;
}
.logout-button:hover {
background-color: #000000;
color: #ffffff;
}
.register-reseller-inset {
position: absolute;
bottom: 0;
width: 400px;
right: 0;
background-color: #1c1c1e;
padding: 50px
}
.register-reseller-inset > form > ul {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.register-reseller-inset > form > ul > li {
width: 50%;
height: 45px;
height: auto;
padding: 10px 0;
text-align: left
}
.register-reseller-inset > form > ul > li:nth-child(1),
.register-reseller-inset > form > ul > li:nth-child(3),
.register-reseller-inset > form > ul > li:nth-child(5) {
padding-right: 5px;
}
.register-reseller-inset > form > ul > li:nth-child(9),
.register-reseller-insetr > form > ul > li:nth-child(10),
.register-reseller-inset > form > ul > li:nth-child(11),
.register-reseller-inset > form > ul > li:nth-child(12) {
width: 100%;
}
.register-reseller-inset > form > ul > li:nth-child(10) {
min-height: 80px;
padding: 0;
margin: 0;
height: 0;
}
.register-reseller-inset > form > ul > li > input[type=text],
.register-reseller-inset > form > ul > li > input[type=email],
.register-reseller-inset > form > ul > li > select {
width: 100%;
height: 45px;
padding: 10px;
color: #ffffff;
font-size: 18px;
background-color: #2e2e32;
border: 1px solid #000000;
}
.register-reseller-inset > form > ul > li > textarea {
width: 100%;
height: 60px;
padding: 10px;
color: #ffffff;
font-size: 18px;
background-color: #2e2e32;
border: 1px solid #000000;
}
.register-reseller-inset > form > ul > li > input[type=checkbox] {
width: 20px;
height: 20px;
margin: 5px;
accent-color: #2e2e32;
background-color: #2e2e32!important;
outline: none;
border: none;
}
.register-reseller-inset > form > ul > li > input[type=checkbox]::before {
background-color: #2e2e32!important;
}
.register-reseller-inset > form > ul > li > label {
display: inline;
color: #ffffff;
font-size: 18px;
background-color: #2e2e32;
border: 1px solid #000000;
margin-bottom: 15px;
vertical-align: super;
}
.register-reseller-inset > form > ul > li > span {
color: #ffffff;
font-size: 18px;
font-weight: 300;
text-decoration: none;
}
.register-reseller-inset > form > ul > li > a {
color: #ffffff;
font-size: 18px;
font-weight: 300;
text-decoration: none;
}
.register-reseller-inset > form > ul > li > a:hover {
text-decoration: underline;
}
.register-reseller-inset > form > ul > li > input::placeholder {
color: #ffffff;
}
.register-reseller-inset > form > ul > li > input[type=submit] {
width: 100%;
height: 45px;
color: #1c1c1e;
background-color: #a59c94;
font-size: 24px;
border: none;
}
.register-reseller-inset > form > ul > li > input[type=submit]:hover {
color: #a59c94;
background-color: #1c1c1e;
}
.register-reseller-inset > h3 {
color: #ffffff;
font-size: 18px;
font-weight: 300;
margin-bottom: 10px;
}
.register-reseller-inset > h2 {
color: #ffffff;
font-size: 30px;
font-weight: 600;
border-bottom: 1px solid #333337;
padding-bottom: 15px;
margin-bottom: 40px;
}
.price-request {
position: absolute;
bottom: 0;
width: 400px;
right: 0;
background-color: #1c1c1e;
padding: 50px;
z-index: 1;
}
.price-request > form > ul {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.price-request > form > ul > li {
width: 50%;
height: 45px;
height: auto;
padding: 10px 0;
text-align: left
}
.price-request > form > ul > li:nth-child(1),
.price-request > form > ul > li:nth-child(3) {
padding-right: 5px;
}
.price-request > form > ul > li:nth-child(5),
.price-request > form > ul > li:nth-child(6),
.price-request > form > ul > li:nth-child(7),
.price-request > form > ul > li:nth-child(8) {
width: 100%;
}
.price-request > form > ul > li:nth-child(10) {
padding: 0;
margin: 0;
height: 0;
}
.price-request > form > ul > li > input[type=text],
.price-request > form > ul > li > input[type=email],
.price-request > form > ul > li > select {
width: 100%;
height: 45px;
padding: 10px;
color: #ffffff;
font-size: 18px;
background-color: #2e2e32;
border: 1px solid #000000;
}
.price-request > form > ul > li > textarea {
width: 100%;
height: 100px;
padding: 10px;
color: #ffffff;
font-size: 18px;
background-color: #2e2e32;
border: 1px solid #000000;
}
.price-request > form > ul > li > input[type=checkbox] {
width: 20px;
height: 20px;
margin: 5px;
accent-color: #2e2e32;
background-color: #2e2e32!important;
outline: none;
border: none;
}
.price-request > form > ul > li > input[type=checkbox]::before {
background-color: #2e2e32!important;
}
.price-request > form > ul > li > label {
display: inline;
color: #ffffff;
font-size: 18px;
background-color: #2e2e32;
border: 1px solid #000000;
margin-bottom: 5px;
vertical-align: super;
}
.price-request > form > ul > li > span {
color: #ffffff;
font-size: 18px;
font-weight: 300;
text-decoration: none;
}
.price-request > form > ul > li > a {
color: #ffffff;
font-size: 18px;
font-weight: 300;
text-decoration: none;
}
.price-request > form > ul > li > a:hover {
text-decoration: underline;
}
.price-request > form > ul > li > input::placeholder {
color: #ffffff;
}
.price-request > form > ul > li > input[type=submit] {
width: 100%;
height: 45px;
color: #1c1c1e;
background-color: #a59c94;
font-size: 24px;
border: none;
}
.price-request > form > ul > li > input[type=submit]:hover {
color: #a59c94;
background-color: #1c1c1e;
}
.price-request > h3 {
color: #ffffff;
font-size: 18px;
font-weight: 300;
margin-bottom: 10px;
}
.price-request > h2 {
color: #ffffff;
font-size: 30px;
font-weight: 600;
border-bottom: 1px solid #333337;
padding-bottom: 15px;
margin-bottom: 40px;
}
/* SUB PAGES */
/* MODEL OPTIONS TABS*/
.fthsc-tabs {
display: flex;
flex-direction: row;
cursor: pointer;
margin-bottom: 20px;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: 1px solid #919191;
}
.fthsc-tab {
flex: 1;
/* padding: 10px; */
text-align: center;
white-space: no-wrap;
font-family: 'Kanit', sans-serif !important;
padding: 15px 0px;
/* margin: 0px 20px; */
cursor: pointer;
font-weight: 400;
font-size: 12px;
background: #000000;
color: #ffffff;
border-bottom: 0;
}
.fthsc-tab:hover {
color: #e1e1e1;
border-bottom: 2px solid #ffffff;
}
.fthsc-tab.active {
color: #e1e1e1;
border-bottom: 2px solid #ffffff;
}
.fthsc-tab-content {
display: none;
}
.fthsc-tab-content > .carousel {
margin-top: 0;
height: auto;
}
.fthsc-tab-content > h3 {
font-size: 30px;
color: #ffffff;
font-weight: 400;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
z-index: 10;
width: 50%;
position: absolute;
top: 125px;
}
.fthsc-tab-content > .carousel > .carousel-inner > .carousel-item {
height: auto;
}
.fthsc-tab-content > .carousel > .carousel-inner > .carousel-item > img {
margin-top: 20px;
}
.fthsc-tab-content.active {
display: block;
}
h5.fthsc-caption {
background-color: transparent;
position: relative;
top: -2px;
right: 0;
width: 100%;
z-index: 1000;
text-align: right;
height: fit-content;
font-size: 22px;
color: #ffffff;
font-family: 'Kanit', sans-serif!important;
font-weight: 200 !important;
}
.tabso {
display: flex;
flex-wrap: wrap;
max-width: 100%;
justify-content: space-between;
flex-direction: row;
}
.inputo {
position: absolute;
opacity: 0;
}
.labelo {
width: 100%;
padding: 15px 0px;
margin: 0px 20px;
cursor: pointer;
font-weight: 300;
font-size: 16px;
background: #000000;
color: #ffffff;
border-bottom: 1px solid #ffffff;
}
.labelo:hover {
border-bottom: 3px solid #ffffff;
}
.labelo:active:active {
background: #ccc;
}
.inputo:focus + .labelo {
z-index: 1;
}
.inputo:checked + .labelo {
background: #000000;
color: #ffffff;
border-bottom: 3px solid #ffffff;
position: relative;
z-index: 10;
}
@media (min-width: 600px) {
.labelo {
width: auto;
}
}
.opt-style {
top: 35px;
}
.panelo {
width: 100%;
height: 800px;
display: none;
padding: 20px 0 0 0;
position: relative;
}
.panelo:before {
content: "";
width: 100%;
position: absolute;
border-top: 3px solid #484848;
top: -3px;
z-index: 0;
}
.panelo > .carousel {
height: auto;
margin-top: 0px;
}
.panelo > .carousel > .carousel-indicators {
bottom: 280px;
display: none;
}
.panelo > .carousel > .carousel-inner > .carousel-item {
margin-top: 50px;
}
.panelo > .carousel > .carousel-inner > .carousel-item > .carousel-caption {
background: none;
top: -60px;
height: 70px;
text-align: right;
width: fit-content;
right: 0;
left: auto;
}
.panelo > .carousel > .carousel-inner > .carousel-item > .carousel-caption > h5 {
font-size: 22px;
color: #ffffff;
font-weight: 200!important;
}
.panelo > h3 {
font-size: 30px;
color: #ffffff;
font-weight: 400;
position: absolute;
left: 0;
top: 60px;
background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
z-index: 10;
width: 50%;
}
@media (min-width: 600px) {
.panelo {
order: 99;
}
}
.inputo:checked + .labelo + .panelo {
display: block;
}
/* MODEL OPTIONS TABS*/
/* SPONSORSHIP */
div.sponsorship > .inset > ul {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
div.sponsorship > .inset > ul > li {
width: 100%;
height: 300px;
border-bottom: 1px solid #a59c94;
padding: 17px 0;
}
div.sponsorship > .inset > ul > li:last-child {
width: 100%;
height: 300px;
border-bottom: none;
padding: 17px 0;
}
div.sponsorship > .inset > ul > li > figure {
width: 319px;
height: 266px;
}
div.sponsorship > .inset > ul > li > div.sponsorship-content {
width: 900px;
height: 266px;
display: flex;
flex-direction: column;
justify-content: center;
}
div.sponsorship > .inset > ul > li > div.sponsorship-content > h2 {
font-size: 24px;
font-weight: 700;
margin: 5px 0;
}
div.sponsorship > .inset > ul > li > div.sponsorship-content > time {
font-size: 16px;
font-weight: 200;
margin: 5px 0;
}
div.sponsorship > .inset > ul > li > div.sponsorship-content > article {
font-size: 18px;
font-weight: 300;
margin: 5px 0;
}
div.sponsorship > .inset > ul > li:nth-child(even) > figure {
float: right;
}
div.sponsorship > .inset > ul > li:nth-child(even) > div.sponsorship-content {
float: left;
}
div.sponsorship > .inset > ul > li:nth-child(odd) > figure {
float: left;
}
div.sponsorship > .inset > ul > li:nth-child(odd) > div.sponsorship-content {
float: right;
}
/* SPONSORSHIP */
/* social-responsibility */
div.social-responsibility > .inset > ul {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
div.social-responsibility > .inset > ul > li {
width: 100%;
height: 300px;
border-bottom: 1px solid #a59c94;
padding: 17px 0;
}
div.social-responsibility > .inset > ul > li:last-child {
width: 100%;
height: 300px;
border-bottom: none;
padding: 17px 0;
}
div.social-responsibility > .inset > ul > li > figure {
width: 319px;
height: 266px;
}
div.social-responsibility > .inset > ul > li > div.social-responsibility-content {
width: 900px;
height: 266px;
display: flex;
flex-direction: column;
justify-content: center;
}
div.social-responsibility > .inset > ul > li > div.social-responsibility-content > h2 {
font-size: 24px;
font-weight: 700;
margin: 5px 0;
}
div.social-responsibility > .inset > ul > li > div.social-responsibility-content > time {
font-size: 16px;
font-weight: 200;
margin: 5px 0;
}
div.social-responsibility > .inset > ul > li > div.social-responsibility-content > article {
font-size: 18px;
font-weight: 300;
margin: 5px 0;
}
div.social-responsibility > .inset > ul > li:nth-child(even) > figure {
float: right;
}
div.social-responsibility > .inset > ul > li:nth-child(even) > div.social-responsibility-content {
float: left;
}
div.social-responsibility > .inset > ul > li:nth-child(odd) > figure {
float: left;
}
div.social-responsibility > .inset > ul > li:nth-child(odd) > div.social-responsibility-content {
float: right;
}
/* social-responsibility */
/* LIGHTBOX */
.lightbox {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: white;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.lightbox.show {
display: block;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.overlay.show {
display: block;
}
/* LIGHTBOX */
.form-floating>label {
left: 20px;
}
.kvkk-list a {
display: block;
color: #000000;
text-decoration: none;
font-size: 18px;
font-weight: 200;
padding: 10px;
margin: 10px 0;
border-bottom: 1px solid #2e2e32;
}
.kvkk-list a:hover {
background-color: #ffffff;
}
.kvkk-list a i {
margin-right: 10px;
}
.form-slider {
position: absolute;
top: 0;
z-index: 0;
}
.modal-backdrop {z-index: -1;}
.cookie-consent {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
color: white;
text-align: center;
padding: 20px;
display: none;
z-index: 1000;
}
.cookie-consent > .inset {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.cookie-consent > .inset > .cookies-text {
font-size: 14px;
font-weight: 200;
color: #ffffff;
}
.cookie-consent > .inset > button#acceptCookies {
background-color: #6d6d6d;
color: #ffffff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.cookie-consent > .inset > button#acceptCookies:hover {
background-color: #a0a0a0;
}
.cookie-consent > .inset > button#rejectCookies {
background-color: #6d6d6d;
color: #ffffff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.cookie-consent > .inset > button#rejectCookies:hover {
background-color: #a0a0a0;
}
#lightbox {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: white;
text-align: center;
z-index: 1000;
transition: none;
}
#lightbox .lb-content {
max-width: 80%;
max-height: 80%;
background-color: #ffffff;
border-radius: 10px;
overflow: hidden;
position: absolute;
border: 1px solid #ffffff;
display: inline-block;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: fit-content;
height: fit-content;
margin: auto;
}
#lightbox .lb-content figure {
width: 500px;
height: fit-content;
max-height: 500px;
display: block;
margin: auto;
}
#lightbox .lb-content figure img {
width: auto;
height: 100%;
max-width: 100%;
max-height: 100%;
margin: auto;
}
#lightbox label {
position: absolute;
right: 20px;
bottom: 20px;
line-height: 20px;
color: #000000;
text-align: left;
}
#lightbox .lb-content button {
padding: 2px 8px;
background-color: #1c1c1e;
color: #ffffff;
right: 20px;
top: 20px;
position: absolute;
border-radius: 10px;
border: none;
z-index: 1002;
}
#lightbox .lb-content button,
#lightbox .lb-content input[type="checkbox"] {
margin-top: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}
.service-points-form > ul {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: auto auto 100px auto;
align-items: stretch;
}
.service-points-form > ul > li {
width: 50%;
height: auto;
padding: 10px 20px;
}
.service-points-form > ul > li > ul {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.service-points-form > ul > li > ul > li {
width: 100%;
height: 70px;
padding: 10px 20px;
}
.service-points-form > ul > li:nth-child(2) > ul > li {
height: auto;
}
.service-points-form > ul > li > ul > li > select {
width: 100%;
height: 50px;
border: 1px solid #a1a1a1;
border-radius: 5px;
font-size: 14px;
font-weight: 300;
color: #919191;
padding: 0 10px;
outline: none;
}
.service-points-form > ul > li > ul > li > input[type=text] {
width: 100%;
height: 50px;
border: 1px solid #a1a1a1;
border-radius: 5px;
font-size: 14px;
font-weight: 300;
color: #919191;
padding: 0 10px;
outline: none;
}
.service-points-form > ul > li > ul > li > textarea {
width: 100%;
height: 300px;
border: 1px solid #a1a1a1;
border-radius: 5px;
font-size: 14px;
font-weight: 300;
color: #919191;
padding: 20px;
outline: none;
resize: none;
}
.service-points-form > ul > li > ul > li > input[type=submit] {
width: 100%;
height: 50px;
border: 1px solid #a1a1a1;
border-radius: 5px;
font-size: 14px;
font-weight: 300;
color: #919191;
transition: all ease .3s;
background-color: #ffffff;
}
.service-points-form > ul > li > ul > li > input[type=submit]:hover {
width: 100%;
height: 50px;
border: 1px solid #a1a1a1;
border-radius: 5px;
font-size: 14px;
font-weight: 300;
color: #ffffff;
transition: all ease .3s;
background-color: #777777;
}
.service-points-form > ul > li > ul > li > div > label {
font-size: 14px;
font-weight: 300;
color: #919191;
}
.alert.alert-success {
position:fixed;
z-index:999;
display:block!important;
left:5%;
top:5%;
width:400px
}