/* Theme Name: Art Lokaj Theme Author: IllyrianTech L.L.C. Author URI: https://illyriantech.com Description: Theme made for Artist Art Lokaj by IllyrianTech. Version: 1.0 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html */ @font-face { font-family: 'BAHNSCHRIFT'; src: url('https://artlokaj.com/wp-content/themes/artlokaj/fonts/BAHNSCHRIFT.TTF') format('truetype'); } * { box-sizing: border-box; font-family: 'BAHNSCHRIFT'; } body { /* background-color: #f9f9f9; */ /* font-family: BAHNSCHRIFT; */ overflow-x: hidden !important; overflow-y: scroll; width: 100%; background: #FFF; } /*h1, h2, h3, h4, h5 {color: #007cff !important ;}*/ /* html {overflow-x: hidden;} */ a.noStyelA {text-decoration: none !important; background: unset !important!;} .noStyelA:visited {text-decoration: none !important; background: unset !important!;} .noStyelA:active {text-decoration: none !important; background: unset !important!;} .noStyelA:hover {text-decoration: none !important; background: unset !important!;} .navbar {transition: .5s ease-in-out; color: white !important;} .navbar img { transition: .5s ease-in-out;} #navbar { height:120px; z-index: 99999; font-weight: 600; position: sticky; top:0; right:0; left:0;} .festival-date {position: absolute; left: calc(1vw + 47%); font-size: 14px; font-weight:600;} .navbar-collapse { padding: 20px 20px; } .navbar-toggler {color: #FFFFFF !important;} .mainWrapper { margin-top: -30px;} .mainBG { /* background: #00448c; */ /* background: rgba(18,117,203,1); */ background: #ee4624 !important; } /* Art Custom */ .homeImg img { height: 800px; padding: unset !important; width: 100% !important;} a.nav-link {color: rgb(200,45,180) !important;} .logo {width: 200px;} .wpcf7 {position: unset !important; min-width: 280px !important; max-width: 450px !important; } .wpcf7 input {width: 100% !important; border: 2px solid rgb(200,45,180) !important; border-radius: 15px; padding: 10px; } .wpcf7 input[type='submit'] { width: 88% !important; background: rgb(200,45,180) !important; color: #f1f1f1; font-weight:600;} .wpcf7 textarea {width: 100% !important; border: 2px solid rgb(200,45,180) !important; border-radius: 15px; padding: 10px;} .wpcf7 form.sent .wpcf7-response-output { width: 85%; border-radius: 12px; } .singleContent {z-index: 99 ;} .singleThumbnail {z-index: -1;} a.readMoreBrn { position:flex-end; top: 10px; text-decoration:unset !important; background: white; padding: 14px 20px; color: rgb(200,45,180) !important ; font-weight:600; width:auto; display: inline; text-align:right !important; transition: .2s ease-in-out;} a.readMoreBrn:hover {padding: 14px 22px; font-weight: 700; box-shadow: var(--bs-box-shadow); outline-style: 1px solid rgb(200,45,180);} .youTubeAlbum iframe { width: 100% !important; height: 450px;} .socialFooter .bi {font-size: 40px; margin-right: 10px; transition: .4s ease-in-out ;} .socialFooter .bi:hover { opacity: 0.7;} a.readMore {color: rgb(200,45,180);} .maxIframe iframe {width: 98% !important; } .mainText {color: rgb(200,45,180);} .dropdown-menu {background: #ee4624 !important; color: white !important; font-weight:600;} .mainHeading {font-size: calc(1vw + 3.4em) !important; letter-spacing: .2em; font-weight: 700; color: #ee4624; text-transform: capitalize !important; } .mainBtn {color: #ee4624; padding: 10px 30px; margin-top: 20px !important; border: 1px solid #ee4624; border-radius: 15px; text-decoration: none; transition: .2s ease-in-out; background: transparent;} .mainBtn:hover {padding: 10px 40px; font-weight: 600; border: 2px solid #ee4624; background: #ee4624; color: #FFFFFF;} .pageTitle { background: #18c691; /*background: #f62d38;*/ /*color: #f62d38;*/ /*padding: 10px 10px;*/ line-height: 1px; width: calc(1vw + 200px); border-radius: 0 0 20px 20px; margin-bottom: -30px; } .insightsBtn { border: 1px solid rgba(0,124,255,1); width: 300px !important; padding:10px 25px ; margin: 0 auto; border-radius: 12px; color: rgba(0,124,255,1) ; text-decoration: none; transition: .2s ease-in-out ;} .insightsBtn:hover { border: 2px solid rgb(0,124,255); padding:10px 25px ; border-radius: 12px; font-weight: 600; letter-spacing: 0.2px; } .aboutContent p {font-size: 18px; padding-left: 20px;} .whyUs {padding: 30px 30px; } .whyUs h4 {font-size: 28px; font-weight: 500px;} .whyUs p, .whyUs ol, .whyUs ul {font-size: 18px;} .whyUs p , .whyUs ol, .whyUs ul, .whyUs h4 { margin: 0 auto; padding: 20px; width:90%; } .whyUs:nth-child(1) { /*background: #00448c;*/ height: auto !important; background: #fcc12b; -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);; clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); color: white; box-shadow: var(--bs-box-shadow) !important; } .mainTxt {color: #007cff;} .mainMenu { text-align: right; } .announcment { width: auto; margin: 0 auto; padding: 5px 5px 5px 5%;} .postTitle { padding: 10px; margin-top: -50px ; z-index: 9999; background: #f1f1f1; } .postTitle a {background: #f1f1f1; padding: 10px; font-weight: 800;} .singleThumbnail { height: calc(1vw+550px) !important; width: calc(1vw+100%) !important; position: sticky; top: 70;} .singleThumbnail img { height: 550px !important; width: calc(1vw+100%) !important ; object-fit: cover; } .singleTitle {background: white; padding: 10px; font-weight: 800; width: auto; color: #000; margin-top: 30px !important; z-index: -1;} .singleContent {box-shadow: var(--bs-box-shadow); position: relative; background: white; margin-top: -120px !important; color: #000; padding: 40px 40px; height: auto; margin-bottom: 100px !important;} .singleSpotify iframe {position: absolute; top:20px; right: 7%; width: 400px; height: 220px ; z-index: 9;} .flex-control-nav { bottom: 20px !important;} /*.flex-control-paging {padding-bottom: 0px !important ;}*/ /*.flexslider {margin-bottom: -30px !important;}*/ .serviceImage img { clip-path: ellipse(440px 440px at 24% 25%); height: calc(1vw + 430px ); width: auto; box-shadow: var(--bs-box-shadow); margin-left: -90px; margin-bottom: 20px;} .callToActionBtn { border: 1px solid white; padding:10px 25px ; border-radius: 12px; color: white; text-decoration: none; transition: .2s ease-in-out ;} .callToActionBtn:hover { border: 2px solid white; padding:10px 25px ; border-radius: 12px; color: white; font-weight: 600; letter-spacing: 0.2px; } .thumbnailContainer { width: 100% ; overflow: hidden;} .teamList .thumbnailContainer img { width: 100%; height: 200px; object-fit: cover; transition: .2s ease-in-out ;} .postList .thumbnailContainer img { width: 100%; height: 200px; object-fit: cover; transition: .2s ease-in-out ;} .postList a { text-decoration: none ; color: black; line-height: 7px;} .more { margin-top: 3px; width: 10px !important; margin-left:5px; border-bottom: 2px solid black; transition: .2s ease-in-out ;} /*.readmore {width:140px;}*/ .postList:hover .thumbnailContainer img {width: 103%; height:210px; } .postList:hover .more { width: 14px !important;} .postList:hover a .readmore { font-weight: 600; } /*.postList:hover { box-shadow: var(--bs-box-shadow) ;}*/ .newsthumbnailContainer { width: 100% ; height: 260px; overflow: hidden;} .newsthumbnailContainer img {width: 100%; height: 270px; object-fit: cover; transition: .2s ease-in-out ; } .postList:hover .newsthumbnailContainer img {width: 110%; height: 110%; } .postList:hover { box-shadow: var(--bs-box-shadow) !important; } .teamList { margin-bottom: 50px;} .teamList .thumbnailContainer {height:300px; width: calc(1vw + 290px); border-radius: 50%; margin: 0 auto; transition: .4s ease-in-out ; margin-bottom: 10px;} .teamList .thumbnailContainer img { width: 100%; height: 300px; } .teamList:hover .thumbnailContainer {height:300px; width: calc(1vw + 290px); border-radius: 50%; border: 5px solid rgb(200,45,180); margin: 0 auto; margin-bottom: 30px; box-shadow: var(--bs-box-shadow) !important;} .sponsorList .thumbnailContainer { width: 100%; height: auto; text-align: center !imporant;} .sponsorList .thumbnailContainer img { object-fit: contain; margin: 0 auto; background: white; background-color: white;} .noOver {overflow: hidden !important;} .showZ { position: relative;} .eventPage {width: 750px !important;} .wpm-languages {padding-top: 5px;} .contactContent {margin-top: -60px !important; z-index:-1; margin-bottom: -150px;} /*.hideMe { display: none ;}*/ /*.showeMe:hover .hideMe {display: box ;}*/ /*.showeMe:focus .hideMe {display: box ;}*/ #footer a { text-decoration: none; } #footer a:visited { text-decoration: none;} #footer a:before { text-decoration: none;} .footerMenu { text-align: center !important; width: 100%; margin: 0 auto;} ul.footerMenu {display: inline; padding: 10px 10px; width: 20%; color: #ee4627 !important;} /* .footerMenu .sub-menu {display: none;} */ .footerMenu .menu-item { list-style-type: none; display: inline-flex; } .footerMenu a { text-decoration: none; color: black; transition: .15s ease-in-out ; padding: 15px 5px; color: white !important;} .footerMenu .dropdown-item {width: 100%; color: white !important;} .footerMenu h1 a { color: #ee4627 !important; margin-left: 20px;} .footerMenu a:hover { font-weight: 600; letter-spacing: 0.3px; } a.nav-link { transition: .3s ease-in-out; } a.nav-link:hover {font-weight: 700; letter-spacing: 0.2px; } .myClass a.dropdown-item {color: rgb(200,45,180) !important;} .myClass a.dropdown-item:hover { background: rgba(255,255,255, .2);} .nav-item .active {font-weight: 600; letter-spacing: 0.3px; } .my-logo, body > header > h1 > a { color: #ffffff; font-weight: 400; } article > header { } footer { margin-top: 4px; } a { text-decoration: none; color: rgb(200,45,180) ; } /* Animation */ .parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } } /*Shrinking for mobile*/ @media (max-width: 768px) { .waves { height:40px; min-height:40px; } .content { height:30vh; } h1 { font-size:24px; } } .top-line { /*position: absolute;*/ bottom: 0; height: 10px; background: linear-gradient(141deg, #18c691 20%, #197bd6 50%, #fcc12b 75%, #f62d38 100%); z-index: -1; } /*.contactContent form {z-index:999 !important;}*/ .wpcf7 { position: absolute; z-index: 999 !important; } .contactContent form input , .contactContent form textarea { /*position: relative;*/ border-style: unset; border-radius:10px; padding: 10px 20px; margin-bottom: -20px; z-index: 99999 !important; } /*Home Page */ .homePostConainer {display: inline;width: 100%; background: transparent; z-index: 999; transition: .3s ease-in-out; text-align: right; } .homePostConainer h1 {font-size: calc(1vw + 5.5em); text-align: right; transition: .7s ease-in-out ; font-weight: 800; } .homePostImageContainer {display: inline; width: 100% ; height: 200px; overflow: hidden; background: #f1f1f1; transition: .5s ease-in ; -webkit-animation: slide-in-right .5s cubic-bezier(.25,.46,.45,.94) both; animation: slide-in-right .5s cubic-bezier(.25,.46,.45,.94) both; transition: .4s ease-in-out !important; border-radius: 15px 15px 15px 15px; } /* .homePostImageContainer img { width: 100% !important; height: 680px !important; object-fit: contain; margin: 0 auto; margin-top: -120px; } */ .homeSingleContent { background: white; color: #000; height: auto; margin-bottom: -100px !important;} .musicFestival { font-size: 24px; font-weight: 600; line-height: none; margin-top: -200px; color: #ee4626; letter-spacing: .1em; text-shadow: #f1f1f1 .5px .7px; } /*.homePostImageContainer:hover img { clip-path: polygon(12% 7%, 85% 15%, 99% 89%, 14% 87%);}*/ .homeMainHover {margin-bottom: 150px; } .homeMainHover:hover h1 { font-size: calc(1vw + 5em) !important;} .homeDownArrow {display:block; font-size: 1.5em; color: #ee4626; font-weight: 700; position: absolute; bottom: 50px; left: 50%; -webkit-animation:bounce-top 1.2s ease-in both;animation:bounce-top 1.2s ease-in both; z-index: 999; background:#f1f1f1; border-radius: 50%; padding: 10px 10px} .homeMainHover:hover .homeDownArrow {display: block ; } /* */ /*Sponsors Carousel*/ /* */ /*.sponsorsWrapper { */ /* width: 400vw !important;*/ /* animation: unset;*/ /*}*/ /* sponsors coarousel */ .sponsorsCarousel { width: 100%; height: 250px; overflow: hidden; white-space: nowrap; overflow-x: hidden; animation: scroll-horizontal 35s linear infinite; /*animation-delay: 10s;*/ } .sponsorsCarousel:hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; } .cauroselSingle { display: inline-block; text-align: center; padding: 14px; width: 320px; height: 250px; } img.sponsorSingleHome { width: 200px; } .sponsorsW {width: 99% !important; overflow: hidden;} /* */ /* home Slider */ /* */ /* Slideshow container */ .slideshow-container { /* max-width: 1000px; */ min-width:320px !important; max-width:520px !important; position: absolute; top: 190px !important; height: 200px !important; right: 50px; transition: .4s ease-in-out; padding: unset !important; margin-bottom: -200px; } /* Hide the images by default */ .mySlides { display: none; width: 100%; height: 150px; padding: unset !important; /* overflow: hidden; */ /* margin-top: 40px; */ } .slideshow-container a, .slideshow-container a:link, .slideshow-container a:active, .slideshow-container a:hover { text-decoration: unset !important; color: rgb(200,45,180) !important; margin-bottom: -25px !important; } .mySlides img { object-fit: cover; width: 100%; height: 350px !important; margin-top: -120px;} /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { position:absolute; color: #f2f2f2; font-size: 14px; padding: 8px 12px; position: absolute; width: 100%; text-align: center; z-index: 9999; bottom: 82px; left: -20px; } .slideTitle { margin: 0 auto; position:absolute; max-height: auto; /* font-size: 18px; */ height:auto; z-index: 9999; bottom: 130px; left: 20px; transition: .3s ease-in-out; } .homeMainHover:hover .slideTitle { left: 40px;} .homeMainHover:hover .text { left: 40px;} .slideTitle a { color: #000; font-size: 18px; padding: 12px 28px; background: white !important; /* width: 100%; */ text-align: center; width: auto; box-shadow: var(--bs-box-shadow); text-decoration: none; font-weight: 600; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* home slider end */ @media screen and (max-width: 480px) { .newsthumbnailContainer { width: 100% ; height: 260px; overflow: hidden;} .newsthumbnailContainer img {width: 100%; height: 270px; object-fit: cover; transition: .2s ease-in-out ; opacity: .7; } .postList:hover .newsthumbnailContainer img {width: 110%; height: 110%; } .thumbnailContainer {width: 100%;} .thumbnailContainer img { width: 100%; height: 160px;} .teamList .thumbnailContainer {margin-left: -20px;} .teamList:hover .thumbnailContainer {margin-left: -20px;} .postList:hover .thumbnailContainer img {width: 110%; height:170px; } .serviceImage {width: 100%;} .slideshow-container {left: 15px; right: 15px; margin-top: 200px; height: 100% ; overflow-x: hidden;} .eventPage {width: 95% !important;} .mySlides {height: 100% !important;} .mainHeading {font-size: calc(1vw + 2.4em) !important; } .homeContent { top: 130px !important;} .homePostConainer { position: absolute; top: -80px;text-align: center; width: 100%; margin:0 auto; bottom: 0; padding: unset; overflow-y: hidden;} .musicFestival {margin-top: -30px; text-align: right;} .homeMainHover:hover .homeDownArrow { display:none !important; } /* .homeDownArrow { display: block; border-radius: 50%; margin-top: -20px;} */ .homePostConainer h1 {margin-top: 240px !important; font-size: 3em; margin-left:-40px;} .homePostConainer h5 {margin-left:-40px;} .festival-date {position: absolute; left: calc(1vw + 54%); font-size: 14px; font-weight:600; top: 40px;} .homeMainHover:hover h1 {font-size: 3.3em !important;} .homePostImageContainer { width: 100% !important; height: auto !important; position: flex ;} .sponsorsWrapper { overflow: hidden !important; margin: 0 auto;} .singleSpotify {width: 98% !important; text-align: center; position: relative !important;} .singleSpotify iframe {position: relative; width: 320px !important; height: 180px !important; z-index: 9;} .serviceImage img { height: auto; width: 130% ; clip-path: unset !important; border-radius:20px 0 0 20px; } .navbar-collapse { background-color: #FFFFFF; background: #FFFFFF !important; border-radius: 15px; padding: 20px; margin-top: 40px; box-shadow: var(--bs-box-shadow);} } /* ---------------------------------------------- * Generated by Animista on 2025-1-24 1:28:35 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /*.shake-bl{}*/ @-webkit-keyframes bounce-top{0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}@keyframes bounce-top{0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}} @-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}} @-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}} @-webkit-keyframes shake-bl{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}10%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}20%,40%,60%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}30%,50%,70%{-webkit-transform:rotate(4deg);transform:rotate(4deg)}80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}90%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}}@keyframes shake-bl{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}10%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}20%,40%,60%{-webkit-transform:rotate(-4deg);transform:rotate(-4deg)}30%,50%,70%{-webkit-transform:rotate(4deg);transform:rotate(4deg)}80%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}90%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}} @-webkit-keyframes scale-in-ver-center{0%{-webkit-transform:scaleY(0);transform:scaleY(0);opacity:1}100%{-webkit-transform:scaleY(1);transform:scaleY(1);opacity:1}}@keyframes scale-in-ver-center{0%{-webkit-transform:scaleY(0);transform:scaleY(0);opacity:1}100%{-webkit-transform:scaleY(1);transform:scaleY(1);opacity:1}} @-webkit-keyframes scroll-horizontal { 0% { transform: translate(10%, 0); } 100% { transform: translate(-100%, 0); } }