body {
background:var(--dark);
opacity: 0;
font-family: 'ClashGrotesk-Regular';
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
::-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;
}    @font-face {
font-family: 'ClashGrotesk-Regular';
font-style: normal;
font-weight: 400;
src: url(//kimmohelen.com/wp-content/themes/kimmohelen/SF UI Text Semibold), url(https://kimmohelen.com/wp-content/themes/kimmohelen/fonts/ClashGrotesk-Regular.woff) format('woff');
} @font-face {
font-family: 'didot-regular';
src: url(https://kimmohelen.com/wp-content/themes/kimmohelen/fonts/Didot-Regular.ttf);
}
@font-face {
font-family: 'didot-medium';
src: url(https://kimmohelen.com/wp-content/themes/kimmohelen/fonts/Didot-Medium.ttf);
}
@-moz-document url-prefix() {
.site-title p {
left: 4px !important;
}
}
p, .site-content li {
font-size: 20px;
line-height: 34px;
letter-spacing: 0.6px;
font-weight: 400;
}
.site-content ul {
padding-left: 20px;
} 
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
margin-top:0;
font-family: 'didot-regular';
}
h2 {
font-size:56px;
line-height: 68px;
}
h3 {
font-size: 42px;
}
h4 {
font-size: 36px;
margin-bottom: 0;
}
img {
width:100%;
}
.post, .page {
margin:0;
} #headercontainer {
position: fixed;
height:140px;
background:var(--dark);
width:100%;
max-width: 100%;
z-index: 9999;
transition: 0.2s all ease-in-out;
}
.site-header {
max-width: calc(100% - 240px);
margin:0 auto;
position: relative;
height:140px;
transition: 0.2s all ease-in-out;
}
.site-title {
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
}
.site-title img {
width: 350px;
height: auto;
transition: 0.2s all ease-in-out;
}
.site-title p {
position: absolute;
bottom: -42px;
margin: 0;
font-family: 'times';
color: var(--white);
font-size: 22px;
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:280px;
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 28px;
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: 0;
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;
} .banner-container {
position: relative;
height:100vh;
min-height: 900px;
}
.banner-content {
position: absolute;
left: 50%;
top: 50%;
width:100%;
max-width: 1200px;
transform: translate(-50%,-50%);
}
.banner-content img {
height: 65vh;
width: auto;
max-width: 768px;
object-fit: cover;
}
.home .banner-content img {
object-position: 100% center;
}
.page-template-photos .banner-content img {
object-position: 100% center;
}
.banner-content h1 {
font-size: 5vw;
line-height: 4.5vw;
position: absolute;    
left:50%;
top:50%;
max-width: 600px;
transform: translateY(-50%);
margin: 0;
}
.low-opa {
opacity: 0.5;
}
.high-opa {
opacity: 1;
}
img.award {
width: 250px;
height: auto;
margin-top:80px;
margin-bottom: 120px;
} .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;
}
.dark-container h1, .dark-container h2, .dark-container h3, .dark-container h4, .dark-container h5, .dark-container h6, .dark-container p, .dark-container li {
color:var(--white);
}
.image-container {
background: linear-gradient(rgb(15 15 15),rgb(15 15 15 / 85%), 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;
}
.image-container h1, .image-container h2, .image-container h3, .image-container h4, .image-container h5, .image-container h6, .image-container p, .image-container li {
color:var(--white);
}
.site-content {
padding:180px 120px;
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:60%;
position: relative;
}
.flex-50 {
width: calc(50% - 20px);
margin-bottom: 40px;
}
.flex-40 {
width:40%;
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;    
}
.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%);
}
.large p {
font-size: 2vw;
line-height: inherit;
margin-top:0;
}
.large h2 {
position: relative;
font-size: 3.5vw;
line-height: 4vw;
max-width: 991px;
margin-top:0;
margin-bottom: 100px;
}
.large h2:after {
content: '';
background: var(--white);
width: 40px;
height: 2px;
position: absolute;
bottom: -35px;
left: 0;
}
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: 40px;
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;
}
.slider-element.is-selected {
border: solid 1px rgba(255,255,255,0.3);
transform: scale(1);
opacity: 1;
}
.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;
}
.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-field-large {
background: var(--white) !important;
height: 60px !important;
border-radius: 0px !important;
border:none !important;
}
.wpforms-field-medium {
background: var(--white) !important;
height: 300px !important;
border-radius: 0px !important;
border:none !important;
}
.wpforms-submit {
display: inline-block !important;
color:var(--white) !important;
background: transparent !important;
border:solid 1px var(--white) !important;
text-decoration: none !important;
padding:16px 42px !important;
font-size: 18px !important;
border-radius: 0px !important;
letter-spacing: 0.4px !important;
height: 57px !important;
}   
.wpforms-submit:hover {
background: var(--white) !important;
color: var(--dark) !important;
} .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;
}
.site-header .some-container {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.overlay .some-container {
margin-top:60px;
}
.overlay .some-container img {
margin-right:30px;
margin-left: 0;
} .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:1650px){
.banner-content {
max-width: 991px;
}
.contact-container .flex-50 {
width: 100%;
}
}
@media(max-width:1450px){ 
.site-header {    
max-width: calc(100% - 160px);
}
.site-title img {
width: 300px;    
}
.banner-container .some-container {
left:80px;
bottom:80px;
}
.banner-container a.cta {
right:80px;
bottom:80px;
}
.site-content {
padding: 120px 80px;     
}
.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 {
right:270px;
padding-right: 30px;
}
.main-navigation ul li {
margin:0 14px;
}
.site-title img {
width: 260px;
}
.site-title p {
font-size: 20px;
}
}
@media(max-width:1200px){
.main-navigation {
display: none;
}
.mobile-menu {
display: block;
}
.site-header .some-container {
right:100px;
}
.banner-content img {
margin:0 auto;
}
.banner-content h1 {
left:50%;        
transform:translate(-50%,-50%); 
text-align: center;
font-size: 8vw;
line-height: 8vw;
}
.flex-33 {
width: calc(33.33% - 40px);
}
.flex-66 {
width: calc(66.66% - 40px);
}
.flex-50.flex-container {
width: 100%;
}
.flex-50.song-iframe {
width: 100%;
}
}
@media(max-width:991px){
.site-header {
max-width: calc(100% - 80px);        
}
.banner-content img {        
max-width: calc(100% - 80pX);
}
.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: 80px 40px;
}
.large h2 {
font-size: 42px;
line-height: 56px;
margin-bottom: 80px;
}
p, .site-content li, .large p {
font-size: 18px;
line-height: 28px;
}
}
@media(max-width:768px){
.site-header .some-container {
display: none;
}
.banner-container {
min-height: unset;
}
.banner-content {
margin-top:40px;
}
.banner-content h1{
font-size: 11vw;
line-height: 11vw;
}
.banner-content img {
height: 50vh;
min-height: 400px;
}
}
@media(max-width:520px){
.site-header {
max-width: calc(100% - 60px);
}
.site-title img {
width: 220px;
} 
.site-title p {
font-size: 18px;
bottom:-36px;
}
p, .site-content li, .large p {
font-size: 16px;
line-height: 26px;
}
.site-content {
padding:60px 30px;
}
.large h2 {
font-size: 32px;
line-height: 40px;
margin-bottom: 80px;
}
h3 {
font-size: 38px;
}
h4 {
font-size: 28px;
}
.text-box {     
padding: 30px;
}
.slider-element {
width: 320px;     
}
.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;
}
}