body {
background:var(--dark);
opacity: 0; font-family: "Source Sans 3", sans-serif;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
overflow-x: hidden;
}
::-moz-selection {
color: rgba(255,255,255,0.2);
}
::selection {
color: rgba(255,255,255,0.2);
}
img {
display: block;
}
a:focus, button:focus, input:focus {
outline:none;
}
:root {    
--black: #000000;
--dark: #0F0F0F;
--white: #ffffff;
--light: #f7f7f7;
--dark-grey: #212224;
--grey: #cdcdcd;
--max-width: 1440px;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
background: var(--white);
border-radius: 10px;
border:solid 5px var(--dark);
}
::-webkit-scrollbar-track {
background: var(--dark);
}
@-moz-document url-prefix() {
.site-title p {
left: 4px !important;
}
}
p, .site-content li {
font-size: 22px;
line-height: 1.4;
letter-spacing: 0.6px;
font-weight: 400;
}
.site-content ul {
padding-left: 20px;
margin:0;
} 
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
margin-top:0;
font-family: "Libre Baskerville", serif;
}
h1 {
font-size: 74px;
line-height: 1.15;
margin-bottom: 20px;
}
h2 {
font-size:52px;
line-height: 1.2;
position: relative;
max-width: 991px;
margin-top: 0;
margin-bottom: 80px;
}
h2:after {
content: '';
background: var(--white);
width: 40px;
height: 2px;
position: absolute;
bottom: -35px;
left: 0;
}
h3 {
font-size: 36px;
}
h4 {
font-size: 32px;
margin-bottom: 0;
}
img {
width:100%;
}
.post, .page {
margin:0;
} #headercontainer {
position: fixed;
height:120px; 
background: var(--dark);
width:100%;
max-width: 100%;
z-index: 9999;
transition: 0.2s all ease-in-out;
}
.site-header {
max-width: var(--max-width);
margin:0 auto;
position: relative;
height:120px;
transition: 0.2s all ease-in-out;
}
.site-title {
position: absolute;
left: 60px;
top: 50%;
transform: translateY(-50%);
}
.site-title img {
width: 300px;
height: auto;
transition: 0.2s all ease-in-out;
}
.site-title p {
position: absolute;
bottom: -36px;
margin: 0;
font-family: "Libre Baskerville", serif;
color: var(--white);
font-size: 18px;
left: 0;
}
.site-header-active {    
height: 120px !important;
}
.hide-header {
margin-top: -140px;
height: 120px !important;
}
.show-header {
margin-top: 0;
height: 120px !important;   
} ul#primary-menu { 
margin: 10px 0;
}
.main-navigation {
position: absolute;
right:340px;
top:50%;
transform: translateY(-50%);
border-right: solid 1px rgba(255,255,255,0.2);
padding-right: 50px;
}
.main-navigation ul li {
list-style-type: none;
display: inline-block;
position: relative;
margin: 0 22px;
cursor:pointer;
}
.main-navigation ul li:last-of-type {
margin-right: 0;
}
.main-navigation ul li a {  
text-decoration: none;
color:var(--white);
padding:8px 0;
font-weight:500;
font-size:18px;
letter-spacing: 0.4px;    
opacity: 0.7;
position: relative;
transition: 0.2s all ease-in-out;
}
.main-navigation ul li:after {
content: '';
position: absolute;
width: 0;
height: 2px;
display: block;
bottom: -8px;
right: 0;
background: var(--white);
transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
}
.main-navigation ul li:hover:after {
background: var(--white);
width: 100%;
left: 0;
}
.main-navigation ul li a:hover {
opacity: 1 !important;
}
.current-menu-item a {
opacity: 1 !important;
}
.current-menu-item:after {
width: 100% !important;
} .mobile-menu {  
display: none;
position: absolute;
right: 60px;
top: 50%;
transform: translateY(-50%);
z-index: 102;
transition: all 300ms ease-in-out;
}
#nav-icon {
width: 32px;
height: 18px;
position: relative;
z-index: 100; 
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 2px;
width: 32px;
background: var(--white);
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 8px;
}
#nav-icon span:nth-child(4) {
top: 16px;
width:16px;
}
#nav-icon.open span:nth-child(1) {
top: 14px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 14px;
width: 0%;
left: 50%;
} .overlay {
height: 100%;
width: 100%;
max-width:100%;
position: fixed;
z-index: 101;
top: 0;
left:0;
background: var(--dark) !important;        
opacity: 0;
visibility: hidden;
transition: 0.3s;
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% - 80px);
transform: translate(-50%,-50%);
text-align: left;
transition: 0.2s all ease-in-out;
}
.overlay ul {
padding:0;
margin:0;
}
.overlay ul li {
padding:0;
margin:0;
cursor:pointer;
list-style-type: none;
position: relative;
}
.overlay ul li a {
position: relative;
display: inline-block;
text-decoration: none;
color:var(--white);
font-size: 18px;
letter-spacing: 0.6px;
line-height: 32px;
font-weight: 500;
padding:10px 0px;
text-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
transition: 0.2s all ease-in-out;
}
.overlay ul ul {
display: none !important;
}
.open-menu {
opacity: 1;
visibility: visible;
} img.banner-logo {
position: absolute;
bottom: 10%;
z-index: 0;
opacity: 0.02;
height: 28vh;
width: auto;
left: 50%;
transform: translateX(-50%);
}
.banner-content {
padding-top:180px !important;
}
.banner-content .flex-40:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 20px;
left: 20px;
border-radius: 20px;
background: linear-gradient(to bottom, #060302, #0b0603);
}
.contact-container.flex-40:before {
display: none;
}
.banner-content img {
height: 65vh;
min-height: 700px;
width: 100%;
max-width: 100%;
object-fit: cover;
border-radius: 20px;
object-position: top center;
}
.banner-content iframe {
border-radius: 10px;
margin-top:10px;
}
img.award {
width: 180px !important;
height: auto !important;
min-height: unset !important;
}
a.cta {
display: inline-block;
margin-top: 10px;
color:var(--white);
background: transparent;
border:solid 1px var(--white);
text-decoration: none;
padding:16px 42px;
font-size: 18px;
border-radius: 10px;
letter-spacing: 0.4px;
height: 57px;
} .white-container {
background:var(--white);
position: relative;
}
.white-container a {
color:var(--black);
}
.white-container h1, .white-container h2, .white-container h3, .white-container h4, .white-container h5, .white-container h6, .white-container p, .white-container li {
color:var(--black);
}
.light-container {
background:var(--light);
position: relative;
}
.light-container h1, .light-container h2, .light-container h3, .light-container h4, .light-container h5, .light-container h6, .light-container p, .light-container li {
color:var(--black);
}
.dark-container {
background:var(--dark);
position: relative;
overflow-x: hidden;
}
.dark-container h1, .dark-container h2, .dark-container h3, .dark-container h4, .dark-container h5, .dark-container h6, .dark-container p, .dark-container li, .dark-container td, .dark-container th, .dark-container tr {
color:var(--white);
}
.image-container {
background: linear-gradient(rgb(15 15 15),rgb(15 15 15 / 90%), rgb(15 15 15)),url(https://kimmohelen.com/wp-content/uploads/2023/09/Kimmo-Helen-9.jpg) no-repeat;
background-size: cover;
background-position: center;
margin-bottom: -1px;
overflow-x: hidden;
}
.image-container h1, .image-container h2, .image-container h3, .image-container h4, .image-container h5, .image-container h6, .image-container p, .image-container li, .image-container td, .image-container th, .image-container tr  {
color:var(--white);
}
.site-content {
max-width: var(--max-width);
padding:80px 60px;
margin:0 auto;
position: relative;
z-index: 2;
}
.no-right {
padding-right:0 !important;
}
.no-left {
padding-left:0 !important;
}
.no-top {
padding-top:0 !important;
}
.no-bottom {
padding-bottom:0 !important;
}
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-start {
justify-content: start;
}
.flex-end {
justify-content: end;
}
.align-top {
align-items: flex-start;
}
.align-center {
align-items: center;
}
.align-end {
align-items: flex-end;
}
.flex-100 {
width:100%;
position: relative;
}
.flex-80 {
width:80%;
position: relative;
}
.flex-75 {
width:calc(75% - 60px);
position: relative;
}
.flex-66 {
width:calc(66.66% - 60px);
}
.flex-60 {
width:calc(60% - 60px);
position: relative;
}
.flex-50 {
width: calc(50% - 20px);
margin-bottom: 40px;
}
.flex-40 {
width:calc(40% - 60px);
position: relative;
}
.flex-33 {
width:calc(33.33% - 60px);
}
.flex-25 {
width:calc(25% - 40px);
}
.flex-20 {
width:20%;
}
.text-box {
background: var(--dark-grey);
padding: 40px;    
border-radius: 20px;
}
.song-iframe {
margin-bottom: 30px;
opacity: 0.8;
transition: 0.4s all ease-in-out;
}
.song-iframe:hover {
opacity: 1;
} .gallery {
padding: 0 !important;
margin: 0;
list-style-type: none;
}
.gallery li {
position: relative;
width:calc(33.33% - 20px);
margin-top:30px;
}
.gallery li:nth-of-type(1) {
margin-top:0;
width:calc(50% - 15px);
}
.gallery li:nth-of-type(2) {
margin-top:0;
width:calc(50% - 15px);
}
img.download-button {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: auto;
background: rgb(15 15 15 / 70%);
padding: 10px;
transition: 0.2s all ease-in-out;
}
img.download-button:hover {
background: rgb(15 15 15 / 90%);
}
p.photos {
float: right;
font-size: 18px;
margin-top: 20px;
} .js-flickity {
overflow: hidden;
outline: none;
position: relative;
z-index: 1;
}
.flickity-viewport {
width: 100%;
}
.slider-element {
width: 400px;
margin-right: 20px;
position: relative;
cursor: grab;
padding: 20px;
transition: 0.4s all ease-in-out;
transform: scale(0.92);
opacity: 0.5;
}
.slider-element img {
width: 100%;
object-fit: cover;
z-index: 1;
border-radius: 20px;
}
.slider-element.is-selected {
border: solid 1px rgba(255,255,255,0.2);
transform: scale(1);
opacity: 1;
border-radius: 35px;
}
.slider-element.align-center.flex-container.is-selected:before {
content: '';
background: var(--dark);
height: calc(100% + 4px);
width: calc(100% - 100px);
position: absolute;
left: 50px;
z-index: 0;
}
.slider-element.align-center.flex-container.is-selected:after {
content: '';
background: var(--dark);
height: calc(100% - 100px);
width: calc(100% + 4px);
position: absolute;
left: -2px;
z-index: 0;
}
.flickity-button {
background: transparent;
border: solid 1px rgba(255,255,255,0.2);
height: 60px;
width: 60px;
margin-top: 40px;
cursor: pointer;
position: relative;
transition: 0.2s all ease-in-out;
border-radius: 50%;
}
.flickity-button:hover {
background: rgba(255,255,255,0.2);
}
.flickity-button.flickity-prev-next-button.next {
margin-left: 10px;
}
.flickity-button svg path {
display: none;
}
.flickity-button svg.flickity-button-icon {
width: 10px;
height: 16px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.previous svg.flickity-button-icon {
background: url(https://kimmohelen.com/wp-content/themes/kimmohelen/assets/arrow-right-white.svg) no-repeat;
transform: translate(-50%,-50%) rotate(180deg);
}
.next svg.flickity-button-icon {
background: url(https://kimmohelen.com/wp-content/themes/kimmohelen/assets/arrow-right-white.svg) no-repeat;
} .wpforms-container .wpforms-field {
padding: 10px 0 !important;
}
.wpforms-field-large {
background: var(--dark-grey) !important;
font-size: 22px !important;
height: 70px !important;
border-radius: 10px !important;
padding-left: 24px !important;
border: none !important;
color:var(--white) !important;
position: relative !important;
z-index: 2 !important;
}
.wpforms-field-medium {
background: var(--dark-grey) !important;
font-size: 22px !important;
height: 300px !important;
border-radius: 10px !important;
padding-left: 24px !important;
padding-top: 24px !important;
border: none !important;
color:var(--white) !important;
position: relative !important;
z-index: 2 !important;
}
.wpforms-submit {
display: inline-block !important;
color:var(--white) !important;
background: var(--dark) !important;
border:solid 1px var(--white) !important;
text-decoration: none !important;
padding:16px 42px !important;
font-size: 18px !important;
border-radius: 10px !important;
letter-spacing: 0.4px !important;
height: 57px !important;
position: relative !important;
z-index: 2 !important;
}   
.wpforms-submit:hover {
background: var(--white) !important;
color: var(--dark) !important;
}
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder {
color: var(--white) !important;
opacity: 1;
}
.wpforms-form input::-webkit-input-placeholder,
.wpforms-form textarea::-webkit-input-placeholder {
color: var(--white) !important;
}
.wpforms-form input::-moz-placeholder,
.wpforms-form textarea::-moz-placeholder {
color: var(--white) !important;
}
.wpforms-form input:-ms-input-placeholder,
.wpforms-form textarea:-ms-input-placeholder {
color: var(--white) !important;
}
.contact-info {
margin-top:20px;
} .show-reel {
margin-top:40px;
}
.show-reel iframe {
border-radius: 20px;
} .table-wrapper {
margin: auto;
background: var(--dark-grey);
padding: 40px;
border-radius: 20px;
}
table {
width:100%;
border-collapse:collapse;
}
thead th {
text-align:left;
font-size:24px;
padding:12px 10px;
border-bottom:2px solid rgba(255,255,255,0.1);
}
tbody td {
padding:10px;
vertical-align:top;
font-size:20px;
border-bottom:1px solid rgba(255,255,255,0.1);
}
tbody tr:last-child td {
border-bottom:none;
}
.year {
width:20%;
}
.title {
width:30%;
}
.director {
width:20%;
}
.notes {
width:30%;
} .footercontainer {
background:var(--dark);
border-top:solid 1px rgba(255,255,255,0.1);
}
.footercontainer .flex-50 {
text-align: right;
width:calc(50% + 80px);
}
.footercontainer h4 {
margin-bottom: 32px;
color:var(--white);
font-weight: 400;
}
.footercontainer ul {
margin:0;
padding:0;
list-style-type: none;
}
.footercontainer ul li {
font-size:18px;
line-height: 30px;
color:var(--white);
opacity: 0.7;    
}
.footercontainer ul li:hover {
opacity: 1;
}
.footercontainer ul li a {
color:var(--white);    
text-decoration: none;
}
.some-container img {
height: 20px;
max-width: 28px;
margin-left:30px;
transition:0.2s all ease-in-out;
}
.some-container img:hover {
filter:brightness(0.6);
}
.site-header .some-container {
position: absolute;
top: 50%;
right: 60px;
transform: translateY(-50%);
}
.overlay .some-container {
margin-top:60px;
}
.overlay .some-container img {
margin-right:30px;
margin-left: 0;
}
.smallprint {
border-top: solid 1px rgba(255, 255, 255, 0.1);
margin-top: 40px;
padding-top: 40px;
}
.smallprint p {
margin:0;
font-size:18px;
line-height: 30px;
opacity: 0.7;   
} .page-template-thank-you .banner-content h1 {
font-size: 3.5vw;
line-height: 3.5vw;
} @media(max-width:1920px){   
.flex-75 {
width:calc(75% - 40px);
}
}
@media(max-width:1450px){ 
h1 {
font-size: 56px;
}
h2 {
font-size: 42px;
}
p, .site-content li {
font-size: 20px;
}
.wpforms-field-large {
font-size: 20px !important;
}
.wpforms-field-medium {
font-size: 20px !important;
} 
.site-title img {
width: 240px;    
}
.flex-40 {
width: calc(40% - 40px);
position: relative;
}
.flex-60 {
width: calc(60% - 40px);
position: relative;
}
.flex-50.text-box {
width: 100%;
}
.flex-50 .flex-50.song-iframe {
width: 100%;
}
.footercontainer .flex-25 {
width: calc(50% - 40px);     
}
.footercontainer .flex-50 {
text-align: left;
margin-top: 120px;
}
.some-container.flex-container.flex-end {
justify-content: start;
}
.footercontainer .some-container img {
margin-left: 0;
margin-right: 30px;
}
}
@media(max-width:1367px){ 
.main-navigation ul li {
margin:0 14px;
}
.site-title img {
width: 200px;
}
}
@media(max-width:1200px){
.main-navigation {
display: none;
}
.mobile-menu {
display: block;
}
.site-header .some-container {
right:140px;
}
}
@media(max-width:991px){
h1 {
font-size: 42px;
}
h2 {
font-size: 34px;
}
h3 {
font-size: 28px;
}
p, .site-content li {
font-size: 18px;
}
thead th {
font-size: 18px;
}
tbody td {
font-size: 16px;
}
.wpforms-field-large {
font-size: 18px !important;
}
.wpforms-field-medium {
font-size: 18px !important;
}
.site-title {
left:40px;
}
.mobile-menu {
right:40px;
}
.banner-container {
height: unset;
min-height: unset;
}
.banner-content {
padding-top: 120px !important;
padding:40px;
}
.banner-content .flex-60 {
margin-top:40px;
background: linear-gradient(rgba(0,0,0,0), var(--dark));
}
.banner-content .flex-40:before {
display: none;
}
.flex-40 {
width: 100%;
}
.flex-60 {
width: 100%;
}
.flex-25 {
width: 100%;
}
.footercontainer .flex-25 {
width: 100%;
margin-bottom: 60px;
}
.flex-33 {
width: 100%;
}
.flex-66 {
width: 100%;
}
.flex-75 {
width: 100%;
}
.site-content {
padding: 60px 40px;
}
}
@media(max-width:768px){
.site-header .some-container {
display: none;
}
.banner-content img {
height: 50vh;
min-height: 400px;
}
}
@media(max-width:520px){
.site-title p {     
bottom: -26px;
font-size: 14px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
p, .site-content li {
font-size: 16px;
}
thead th {
font-size: 16px;
}
tbody td {
font-size: 14px;
}
.wpforms-field-large {
font-size: 16px !important;
}
.wpforms-field-medium {
font-size: 16px !important;
}
.wpforms-submit {
font-size: 16px !important;
}  
.banner-content {
padding:30px;
}
.banner-content .flex-60 {
margin-top: 30px;
padding: 0;
}
.banner-content img {
height: 40vh;
max-height: 500px;
min-height: 350px;
}
.site-content {
padding:60px 30px;
}
.text-box {     
padding: 30px;
}
.slider-element {
width: 240px;
margin-right: 0;
}
.gallery li {
width: 100% !important;
margin-bottom: 30px;
margin-top:0 !important;
}
.gallery li:last-of-type {
margin-bottom: 0;
}
img.award {     
margin-top: 60px;
margin-bottom: 60px;
}
.wpforms-container .wpforms-field {
padding: 10px 0 !important;        
}
.wpforms-field-large {
height: 55px !important;
}
.footercontainer ul li {
font-size: 16px;
line-height: 26px;
}
.table-wrapper {
padding:15px;
}
.smallprint p {
font-size:16px;
line-height: 28px;
}
}.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}