/*
Theme Name: Telmon
Author: Cormo
Author URI: http://cormo.pl/
Version: 2.0
*/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

html, body { font-family: 'Quicksand', sans-serif; color: #424242; } 
a, a:hover { color: inherit; text-decoration: none; }

.bg-primary { background: linear-gradient(111.34deg, #C80BE3 0%, #283890 100%); }
.text-primary { color: #C80BE3 !important; }
.bubble-primary { position: absolute; background: #7C21BC; filter: blur(25px); border-radius: 50%; z-index:1; }

.bg-secondary { background: linear-gradient(111.34deg, #283890 0%, #C80BE3 100%); }
.bubble-secondary { position: absolute; background: #283890; filter: blur(33px); border-radius: 50%; z-index:1; }

.fs-0 { font-size: 64px !important; line-height: 80px; font-weight: 400; }
.fs-vsmall { font-size: 14px; }
.fw-500 { font-weight: 500; }

.navbar-nav .nav-link { font-size: 18px; text-transform: lowercase; }
.navbar-nav .nav-link:hover { color: #6528B0; }
.navbar-nav .nav-link.active { font-weight: 600; color: #6528B0; }

#main-container { width: 1440px; margin: auto; }
.row .col { z-index: 2; }

.intro { font-weight: 500; }
.bg-intro {height: 500px; position: relative; z-index: 3; height: 700px; }
.intro .bubbles { position:absolute; left:0; top: -260px; z-index: 1; } 
.intro .woman { position:absolute; bottom: -133px; left: 0; z-index: 1; } 
.intro .benio { position:absolute; bottom: 133px; right: 100px; z-index: 1; transform:scale(300%); } 

.arrow-down { width: 0.7em; height: 0.7em; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 7.99999L14.59 6.58999L9 12.17L9 -7.93537e-06L7 -8.0228e-06L7 12.17L1.41 6.58999L-3.49691e-07 7.99999L8 16L16 7.99999Z' fill='white'/%3E%3C/svg%3E%0A"); background-size: cover; }
.arrow-right { width: 0.7em; height: 0.7em; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z' fill='%23C80BE3'/%3E%3C/svg%3E%0A"); background-size: cover; }
.arrow-left { width: 0.7em; height: 0.7em; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16L9.41 14.59L3.83 9L16 9L16 7L3.83 7L9.41 1.41L8 -6.99382e-07L6.99382e-07 8L8 16Z' fill='%23C80BE3'/%3E%3C/svg%3E"); background-size: cover; }
.arrow-right.white{ filter: brightness(0) saturate(100%) invert(97%) sepia(0%) saturate(13%) hue-rotate(234deg) brightness(104%) contrast(103%); }

.btn-outline-primary { border-color: #C80BE3; border-width: 2px; color: #C80BE3; font-weight: 500; }
.btn-outline-white { border-color: #FFF; border-width: 2px; color: #FFF; font-weight: 500; }
.btn:first-child:hover, :not(.btn-check) + .btn:hover { color: #FFF;  background-color:#C80BE3; border-color: #C80BE3 ; }
.btn:hover i { filter: brightness(0) saturate(100%) invert(78%) sepia(95%) saturate(0%) hue-rotate(130deg) brightness(108%) contrast(105%); }
.btn i { margin-left: 10px; }

body.home { position: relative; } 
body.home .header { position: absolute; top: 0; left: 0; right: 0; z-index :10; }
body.home .header-logo path { fill: #FFF; }
body.home .navbar-nav .nav-link { color: #FFF !important; }

.header-toggle { cursor: pointer; background: none; border: 0 !important; outline: none; box-shadow: none !important; }
.header-toggle span { display: block; height: 4px; margin-bottom: 5px; border-radius: 2px; background: #404040; width: 30px; transition: all 0.4s; }
.header-toggle span:nth-child(1) {  transform-origin: 4px 6px; }
.header-toggle span:nth-child(3) { width: 15px; float: right; }
.header-toggle:not(.collapsed) span:nth-child(1) { transform: rotate(45deg); }
.header-toggle:not(.collapsed) span:nth-child(2) { transform: rotate(-45deg); }
.header-toggle:not(.collapsed) span:nth-child(3) { opacity: 0; }

.navbar-toggler span { background: #C80BE3;  }

body.home .navbar-toggler span { background: #FFF; }

.number { background: #C80BE3; position: relative; border-radius: 100%; width: 122px; height: 122px; text-align: center; line-height: 122px; font-size: 104px; font-weight: 700; margin-bottom: 40px; margin-right: 20px; }
.number:after { content: ''; display: block; position: absolute; top: 105%; left: 0; right: 0; height: 38px; background: url(img/baza.svg) no-repeat; background-size: contain; }

.team-image { /* width: 200px; height: 200px; */ object-fit: cover; }
.partner-img { height: 125px; width: 100%; object-fit: scale-down; }

.section-header { height: 450px; background-size: cover; background-position: center; background-repeat: no-repeat;}

.section-header.o-nas { background-image: url("img/header-bg/o-nas.jpg"); }
.section-header.o-nas .bubbles { position: absolute; bottom: -133px; right: 0; }

.section-header.oferta { background-image: url("img/header-bg/oferta.jpg"); overflow: hidden; }
.section-header.oferta .b1 { position: absolute; bottom: -68px; left: -100px; width: 114px; height: 114px; border-radius: 50%; background: #FFF; }
.section-header.oferta .b2 { position: absolute; bottom: 50px; right: -34px; width: 68px; height: 68px; border-radius: 50%; background: #C80BE3; }

.section-header.kariera { background-image: url("img/header-bg/kariera.jpg"); }
.section-header.kariera .bubbles { position: absolute; bottom: -68px; right: 0; width: 120px; }

.section-header.centrum-wiedzy { background-image: url("img/header-bg/centrum-wiedzy.jpg"); }
.section-header.centrum-wiedzy .bubbles { position: absolute; bottom: -133px; right: 0; }

.section-header.kontakt { background-image: url("img/header-bg/o-nas.jpg"); overflow: hidden; }
.section-header.kontakt .b1 { position: absolute; bottom: -68px; left: -100px; width: 114px; height: 114px; border-radius: 50%; background: #FFF; }
.section-header.kontakt .b2 { position: absolute; bottom: 50px; right: -34px; width: 68px; height: 68px; border-radius: 50%; background: #C80BE3; }

.history-container { display: table; width: 90%; margin: auto; padding-top: 2rem; }
.history-container .label { width: calc(50% - 51px); }

.color-1 { filter: brightness(0) saturate(100%) invert(20%) sepia(56%) saturate(2679%) hue-rotate(234deg) brightness(85%) contrast(96%); }
.color-2 { filter: brightness(0) saturate(100%) invert(17%) sepia(58%) saturate(4186%) hue-rotate(261deg) brightness(90%) contrast(94%); }
.color-3 { filter: brightness(0) saturate(100%) invert(22%) sepia(56%) saturate(3521%) hue-rotate(264deg) brightness(85%) contrast(105%); }
.color-4 { filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(5111%) hue-rotate(280deg) brightness(85%) contrast(98%);  }

.circle-stat { width: 246px; height: 246px; border-radius: 50%; }
.circle-stat > div { background-color: #FFF; width: 80%; height: 80%; border-radius: 50%; font-size: 24px; }

.circle-stat.c1 { background-color: #C80BE3;}
.circle-stat.c1 > div > span:first-child {color: #C80BE3; font-size:48px; line-height:48px; }
.circle-stat.c1 > div > span:last-child {font-size:18px;}

.circle-stat.c2 { background-color: #9B18CC; }
.circle-stat.c2 > div > span:first-child { color: #9B18CC; font-size:48px; line-height:48px; }
.circle-stat.c2 > div > span:last-child {font-size:18px;}

.circle-stat.c3 { background-color: #7C21BC; }
.circle-stat.c3 > div > span:first-child { color: #7C21BC; font-size:48px; line-height:48px; }
.circle-stat.c3 > div > span:last-child {font-size:18px;}

.circle-stat.c4 { background-color: #6328AF; }
.circle-stat.c4 > div > span:first-child { color: #6328AF; font-size:48px; line-height:48px; }
.circle-stat.c4 > div > span:last-child {font-size:18px;}

.container .opinions p { font-size: 18px; }

.place img { width: 100%; height: auto; }

.offer-image { width: 130px; height: 130px; }

.offers-filter .active { color: #C80BE3; font-weight: 600; }

.wpcf7-form-control:not(.wpcf7-acceptance, .wpcf7-submit) { width: 100%; border:0; border-radius: 10px; background: #F5F5F5; color: #999999; font-weight: 400; font-size: 14px; line-height: 17.5px; padding:.5rem; }
.wpcf7-list-item {margin: 0;}
.form-check-input[type="checkbox"] { margin-top: 2px; }
.form-check-input, .form-check-input:checked { background-color: #F5F5F5; border: 0; width: 25px; height: 25px; margin-right: 5px; }
.form-check-input:checked[type="checkbox"] { margin-top: 0px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23C80BE3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") }
.wpcf7-list-item-label { font-size:14px; }
.wpcf7 .wpcf7-submit { position: relative; left: 25px; }
.wpcf7 .wpcf7-submit:disabled { color: #999999; border-color: #999999; }
.wpcf7-spinner { left: -150px; top: 10px; margin: 0; }
.wpcf7-not-valid-tip { font-size: 14px; padding-left: 5px;}
.wpcf7 form.invalid .wpcf7-response-output { border-color: red; color: red; margin: 1rem 0; border-radius: 10px; padding: .75rem;  }
.wpcf7 form.sent .wpcf7-response-output { color: #46b450;   margin: 1rem 0; border-radius: 10px; padding: .75rem; }

.post-image img { width: 100%; max-width: 100%; height: auto; border-radius: .5rem; cursor: not-allowed;}

.mix { position:absolute; top:-160px; }
.career-buttons .btn { width: 200px;  }

#section-pillars { overflow-x: hidden; }
#section-pillars .b0 { background: linear-gradient(139.93deg, #C80BE3 12.99%, #293891 91.95%); position: absolute;  width: 148px; height: 148px; right:100px; top: -140px; border-radius: 50%;}
#section-pillars .b1 { width: 180px; height: 180px; left: -90px; bottom: 0; }
#section-pillars .b2 { width: 310px; height: 310px; right: -270px; top: -500px; }
#section-pillars .container p { font-size: 18px; }

#section-offer-examples .b1 { width: 310px; height: 310px; left: -270px; bottom: 50px; }
#section-offer-examples .b2 { width: 180px; height: 180px; right: -120px; top: -550px; }
#section-footer p { font-size: 16px; }
#section-footer .copy { font-size: 14px; }
#section-footer .bubbles { position: absolute; bottom: -47px; right: -75px; }

.container.join-us p { font-size: 18px; }
.container .posts-block p { font-size: 16px; }

.bar-container{ display: block; height: 246px; width: 246px; margin: 2em auto; border-radius: 100%; position: relative;stroke-linecap: round; }
.bar-container:after{ position: absolute; display: block; height: 246px; width: 246px; left: 160px; top: 90px; margin-top: -80px;   margin-left: -80px; border-radius: 100%; line-height: 160px; font-size: 48px; font-weight: 500;}
.bar-container svg { transform: rotate(-90deg); }
.bar-container svg circle { stroke-dashoffset: 0; transition: stroke-dashoffset 2s ease-in-out; stroke: #666; stroke-width: 1.33em; }
.bar-container .description { position: absolute; bottom: 70px; left: 65px; font-size: 18px; font-weight:500; text-align: center }

#cont1:after { content: attr(data-pct)"%"; color: #C80BE3; }
#cont1 svg .bar { stroke: #C80BE3; stroke-dashoffset: 688; }

#cont2:after { content: attr(data-pct)"%"; color: #9B18CC; }
#cont2 svg .bar { stroke: #9B18CC; stroke-dashoffset: 655; }
#cont2.bar-container .description { left: 44px; }

#cont3:after { content: attr(data-pct)"%"; color: #7C21BC; }
#cont3 svg .bar { stroke: #7C21BC; stroke-dashoffset: 695; }
#cont3.bar-container .description { left: 60px; }

#cont4:after { content: attr(data-pct)"%"; color: #6328AF; }
#cont4 svg .bar { stroke: #6328AF; stroke-dashoffset: 580; }
#cont4.bar-container .description { left: 58px; }

.pagination * {margin: 0 7px; /* border: 1px solid #C80BE3; padding: 0 7px; */ }
.pagination .current {color: #C80BE3; font-weight: 600; }

@media(max-width: 1024px){
    .fs-0 { font-size: 48px !important; line-height: 60px;}
    .section-header { height: 400px; }
    .intro .woman { left: -200px; }
    .history-container { width: 100%; }
}

@media(max-width: 991px){
    .navbar-collapse { padding: 1rem; }
    body.home .navbar-collapse { background: #6528B0; }
}


@media(max-width: 768px){
    .intro .woman { left: -400px; }
    .mix { display: none; }
}

@media(max-width: 768px){
    .intro .woman { left: -500px; }
    .bubbles { display: none;}
}

@media(max-width: 480px){
    .fs-0 { font-size: 36px !important; line-height: 40px;}
    .section-header { height: 250px; }
    .bg-intro { height: 450px; }
    .intro .woman { display: none; }
    .history-container .label { width: calc(85% - 51px); }
}

@media(max-width: 320px){
    .fs-0 { font-size: 24px !important; line-height: 30px;}
    .section-header { height: 200px; }
}

@media(min-width: 1024px){
    .container p { font-size: 20px;}
    .container .career-offer p { font-size: 16px;}
}