/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.1
Text Domain: uncode
*/



/* IDLE STYLES */
html .timerPalautus {
	position:fixed;top:50%;left:50%;width:80%;z-index:1;
	text-align:center;color:#fff;text-shadow:0px 0px 10px rgba(0,0,0,0.5);
	opacity:0;display:block;transition:0.5s;font-size:50px;pointer-events:none;
	font-weight:600;transform:translate(-50%, -50%);
	letter-spacing: 0.00em;
    font-weight: 900;
    font-family: Roboto, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
html .box-wrapper {filter:brightness(1);transition:filter 0.2s;}
html.ending .box-wrapper {filter:brightness(0.6);}
html.ending .timerPalautus {display:block;opacity:1;}

.menu-container.style-color-xsdn-bg.menu-no-borders {width: 100%!important;}

/* MENU STYLES */
li.master-menu-item a {transition:0.2s;}
li.master-menu-item a:hover, li.master-menu-item a:active {
    transform: scale(1.1);
}
/*
.rekryBtn {
    font-weight: 900!important;
    padding: 30px 50px!important;
    font-size: 32px!important;
}
*/
/* REKRYSIVU */
.iconBoxes h3 {
    font-size: 20px!important;
    font-weight: bold;
}
.iconBoxes p {
    font-size: 14px!important;
    font-weight: light;
}

/* PRELOADER */
.box-wrapper {opacity:0;transition:opacity 0.5s;}
.box-wrapper.loaded {opacity:1;}

.row-menu-inner {padding: 36px 144px 0px 144px!important;}
.is_stuck .row-menu-inner {padding: 0px 144px 0px 144px!important;}

.tab-content.vertical .tab-pane.single-block-padding {padding-top: 0px;}
.nav-tabs > li > a span {white-space: break-spaces;}

.contactCarousel .tmb-img-ratio.tmb .t-entry-visual .t-entry-visual-cont > img, 
.contactCarousel .tmb-img-ratio.tmb .t-entry-visual .t-entry-visual-cont > a > img {
    position: absolute;
    top: 36px;
    bottom: 36px;
    left: 36px;
    right: 36px;
    border-radius: 100%;
    height: calc(100% - 72px);
	width: calc(100% - 72px);
}

/* harjulist */
ul.harjuList li {
    list-style: none;
	margin-bottom: 10px;
    position: relative;
    padding-left: 45px;
	margin-right:50px;
}
ul.harjuList li:before {
    font-family: 'uncodeicon' !important;
    content: '\f00c';
    background: #0071bb;
    color: #fff;
    margin-right: 18px;
    padding: 4px;
    border-radius: 100%;
    position: absolute;
    left: 10px;
    width: 27px;
    height: 27px;
    line-height: 26px;
    text-align: center;
    padding: 0px;
}


/* HACK KIOSK MODE */
body::-webkit-scrollbar {
  display: none;
}
.box-container {
    margin-left: 0px!important;
    width: 100%!important;
}

/* KEYBOARD */
#keyboard, #keyboard2, #keyboard3 {
  opacity:0.2;pointer-events:none;
  position:relative;margin:18px auto;width:80%;max-width:1200px;display:none;
}
#keyboard.active, #keyboard2.active, #keyboard3.active {
  opacity:1;pointer-events:all;
}
#keyboard .keyRow, #keyboard2 .keyRow, #keyboard3 .keyRow {clear:both;position:relative;font-size:0;}

#keyboard .keyRow.first span:first-child, #keyboard2 .keyRow.first span:first-child, #keyboard3 .keyRow.first span:first-child {margin-left:0%;}
#keyboard .keyRow.second span:first-child, #keyboard2 .keyRow.second span:first-child, #keyboard3 .keyRow.second span:first-child {margin-left:2.5%;}
#keyboard .keyRow.third span:first-child, #keyboard2 .keyRow.third span:first-child, #keyboard3 .keyRow.third span:first-child {margin-left:5%;}
#keyboard .keyRow.fourth span:first-child, #keyboard2 .keyRow.fourth span:first-child, #keyboard3 .keyRow.fourth span:first-child {margin-left:0%;}

#keyboard .keyRow span, #keyboard2 .keyRow span, #keyboard3 .keyRow span {
  display:inline-block;border-radius:4px;margin:0.3vw;
  width:7.0%;vertical-align:top;overflow:hidden;padding:0px;
  font-size:2vw;text-align:center;background:#fff;font-weight: 100;
  color:#000;position:relative;user-select: none;
}
#keyboard .keyRow span:hover, #keyboard2 .keyRow span:hover, #keyboard3 .keyRow span:hover,
#keyboard .keyRow span.active, #keyboard2 .keyRow span.active, #keyboard3 .keyRow span.active,
#keyboard .keyRow span:hover:after, #keyboard2 .keyRow span:hover:after, #keyboard3 .keyRow span:hover:after {
	cursor:pointer;transform:scale(1.01);
}

#keyboard .keyRow span, #keyboard2 .keyRow span {cursor:pointer;background:rgba(255,255,255,1);}
#keyboard .keyRow span.active, 
#keyboard .keyRow span:active, 
#keyboard2 .keyRow span.active, 
#keyboard2 .keyRow span:active, 
#keyboard3 .keyRow span.active, 
#keyboard3 .keyRow span:active {
	cursor:pointer;background:rgba(255,255,255,1);box-shadow: 0px 0px 0px 5px rgb(0 0 0 / 50%);
}

#keyboard .keyRow .backspace, 
#keyboard2 .keyRow .backspace, 
#keyboard3 .keyRow .backspace {
	width:16%;
}
#keyboard .keyRow svg, 
#keyboard2 .keyRow svg, 
#keyboard3 .keyRow svg {
  height:2vw;filter:brightness(0) invert(0);
  float:right;margin:1vw;
}
#keyboard .keyRow .shift:after, 
#keyboard2 .keyRow .shift:after, 
#keyboard3 .keyRow .shift:after {
    content: "\f0d8";
    font-family: 'uncodeicon' !important;
    display: block;
    font-size: 40px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}
	
    
#keyboard .keyRow .shift.left, 
#keyboard2 .keyRow .shift.left, 
#keyboard3 .keyRow .shift.left {
	width:8%;
}
#keyboard .keyRow .shift.active, 
#keyboard2 .keyRow .shift.active, 
#keyboard3 .keyRow .shift.active {
	filter:invert(1)
}

/* VISIBLE FORM ELEMENTS */
#email2, #email3, #phone2, #phone3, #email, #phone, #subject {display:none!important;}

#formFields span.wpcf7-not-valid-tip, 
#formFields2 span.wpcf7-not-valid-tip, 
#formFields3 span.wpcf7-not-valid-tip {
	color: #fff!important;
}
.your-competition span.wpcf7-list-item-label {
    font-weight: 100;
    font-size: 35px;
}

.formTitle {font-size: 70px!important;}
.formDescription {font-weight:100;font-size: 35px;}
.wpcf7-form .success {display:none;}
.wpcf7-form.sent .success {display:block;}
.wpcf7-response-output {display:none!important;}

/* hide form elements on success */
.wpcf7-form.sent #formFields, .wpcf7-form.sent #formFields2 {display:none!important;}
.wpcf7-form.sent #keyboard, 
.wpcf7-form.sent #keyboard2, 
.wpcf7-form.sent #keyboard3 {
	display:none!important;
}

#kilpaluform2 {display:none;}

#formFields, 
#formFields2, 
#formFields3 {
	display:table;width:90%;margin:36px 0px;font-size: 35px;border:none;
}
#formFields td, 
#formFields2 td, 
#formFields3 td {
	border:none;
}
#subjectFields {display:block;width:90%;margin:36px auto;font-size: 35px;}
#formFields > div, 
#formFields2 > div, 
#formFields3 > div {
	padding:0px;position:relative;display:table-cell;text-align:left;height:50px;
}
#subjectFields > div {display:block;}

#formFields .field, #subjectFields .field, #formFields2 .field, #formFields3 .field {width:40%;}
#formFields .middlefield, #formFields .submitfield, #formFields2 .middlefield, #formFields2 .submitfield {width:10%;padding:0px;}
#formFields .middlefield span, 
#formFields .submitfield span, 
#formFields2 .middlefield span, 
#formFields2 .submitfield span, 
#formFields3 .middlefield span, 
#formFields3 .submitfield span {
	width:100%;position:absolute;bottom:29px;margin:0px;font-weight: 100;text-align:center;
}
.reserveSpace {height: 20px!important;overflow:visible;position:relative;}
.reserveSpace span {position: absolute;width: 100%;}

#formFields .middlefield span, 
#formFields2 .middlefield span, 
#formFields3 .middlefield span {
	height:70px;line-height:70px;font-size:25px;padding:0px;display:block;text-align:center;
}
#formFields .middlefield, 
#formFields2 .middlefield, 
#formFields3 .middlefield {
	padding:0px;
}

td.field {
    vertical-align: top!important;
    padding: 0px;
}
.middleField {
    font-size: 26px;
    text-align: center;
    font-weight: 100;
    padding-top: 60px;
}

.field span.label {
    font-weight: 100;
    font-size: 30px;
}

span.wpcf7-spinner {
    width: 24px!important;
    margin-left: 20px!important;
}

#subjectFields .textField, 
#formFields .textField, 
#formFields .wpcf7-submit, 
#formFields2 .textField, 
#formFields2 .wpcf7-submit, 
#formFields3 .textField, 
#formFields3 .wpcf7-submit {
	color: #333;
    border-radius: 6px;
    transition: 0.2s;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    background: #fff;
    padding: 0px 15px;
    font-weight: 400;
}
#formFields .wpcf7-submit, 
#formFields2 .wpcf7-submit, 
#formFields3 .wpcf7-submit {
	background-image:url(https://messu.cron.fi/wp-content/uploads/2022/04/send-logo-icon-png-svg.png);
	background-position:center center;
	background-size:auto 80%;
	background-repeat:no-repeat;
	color:transparent;
	width:70px;margin: 51px auto 0px auto;
}

#formFields .textField, 
#formFields2 .textField, 
#formFields3 .textField, 
#subjectFields .textField {
	cursor:pointer;background:#fff;
}
#formFields .textField.active, 
#formFields2 .textField.active, 
#formFields3 .textField.active, 
#subjectFields .textField.active {
	cursor:pointer;background:rgba(255,255,255,1);box-shadow: 0px 0px 0px 5px rgb(0 0 0 / 50%);
}
#formFields .textField:hover, 
#formFields2 .textField:hover, 
#formFields3 .textField:hover, 
#subjectFields .textField:hover {
	cursor:pointer;transform:scale(1.01);
}
#formFields:after, 
#formFields2:after,
#formFields3:after, 
#subjectFields:after {
  content: "";
  display: table;
  clear: both;
}

.holder input[type=checkbox]:checked:before, .holder input[type=radio]:checked:before {
    line-height: 50px;
    font-size: 30px;
	color:#333;
	background:rgba(255,255,255,1);box-shadow: 0px 0px 0px 5px rgb(0 0 0 / 50%);
}
.holder input[type=checkbox], .holder input[type=radio] {
    width: 45px;
    height: 45px;
    background: #fff;
    margin: 5px;
}
.holder input[type=checkbox]:checked, .holder input[type=radio]:before {
	background:rgba(255,255,255,1);box-shadow: 0px 0px 0px 5px rgb(0 0 0 / 50%);
}

span.wpcf7-form-control-wrap.your-subject select {
    color: #333;
    border-radius: 6px;
    transition: 0.2s;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    background: #fff;
    padding: 0px 15px;
    font-weight: 400;
}

.style-dark select:not([multiple]) {
    background-image: url(https://messu.cron.fi/wp-content/uploads/2023/01/expand_more_FILL0_wght400_GRAD0_opsz48.svg)!important;
    background-repeat: no-repeat!important;
    background-position: right center!important;
}

/* CONTACT FORM OVERLAY STYLES */
div#contactForm, div#kilpailu, div#rekry {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    z-index: 9999;
	pointer-events:none;
	opacity:0;
	transition:0.3s;
}
.overlay-open.contactform div#contactForm {
	display:block!important;
	pointer-events:all;
	animation: showForm 0.3s forwards ease-in-out;
}
.overlay-open.arvontalomake div#kilpailu {
	display:block!important;
	pointer-events:all;
	animation: showForm 0.3s forwards ease-in-out;
}

.overlay-open.rekrylomake div#rekry {
	display:block!important;
	pointer-events:all;
	animation: showForm 0.3s forwards ease-in-out;
}

#contactForm .row, #kilpailu .row, #rekry .row  {padding: 0px 144px 0px 144px!important;}

@keyframes showForm { from {opacity:0;} to {opacity:1;} }


.overlay-open.contactform .menu-container a {z-index: 11;color: #fff!important;}
.overlay-open.arvontalomake .menu-container a {z-index: 11;color: #fff!important;}

/* toggle menu item visibility on overlay */
.master-menu-item {display:block!important;}
.closePopup {display:none!important;}
.overlay-open.contactform .master-menu-item, 
.overlay-open.arvontalomake .master-menu-item, 
.overlay-open.rekrylomake .master-menu-item  {
	display:none!important;
}
.overlay-open.contactform .closePopup, 
.overlay-open.arvontalomake .closePopup, 
.overlay-open.rekrylomake .closePopup {
	display:block!important;
}
.overlay-open.contactform  .menu-container, 
.overlay-open.arvontalomake .menu-container, 
.overlay-open.rekrylomake .menu-container {
	box-shadow: none!important;
}

/* adjust hover effects for contactGallery link */
.contactCarousel .owl-item .style-color-128533-bg {transition:0.2s;}
.contactCarousel .owl-item .style-color-128533-bg:hover {transform:scale(1.05);cursor:pointer;}
.contactCarousel .owl-item .style-color-128533-bg * {pointer-events:none;}

div#closePopup {
    position: fixed;
    top: 72px;
    font-size: 18px;
}
div#closePopup a:hover {
    color: #fff!important;
}
div#closePopup i.menu-icon {
    margin-right: 9px;
    line-height: 0px;
    position: relative;
    vertical-align: inherit;
}
.overlay-open .menu-container {
    display: none!important;
}

/* RESPONSIVE FOR LAPTOPS */
@media only screen and (max-width: 1500px) {
	
	.t-overlay-text.single-block-padding {padding: 0px;}
	#openArvonta img.size-full.wp-image-207.alignright {width: 100px;}
	.uncode_text_column {padding-right: 36px;}
	
}