/*
 Theme Name:   Kroth Child
 Theme URI:    http://themeforest.net/user/VictorThemes
 Description:  Kroth Child Theme
 Author:       VictorThemes
 Author URI:   http://themeforest.net/user/VictorThemes/portfolio
 Template:     kroth
 Version:      2.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         one-column, two-columns, left-sidebar, right-sidebar, custom-menu, featured-images, post-formats, theme-options, translation-ready
 Text Domain:  kroth-child
*/

/* Primary CSS */

.bp-content a {color: #32a6d5 !important;}
.bp-content a:hover {color: #32a6d5 !important; text-decoration: underline !important;}

/* Kroth Elements CSS */

.krth-brand {padding: 12px 0;}
.navigation-bar, .krth-navigation .navbar-nav {float: right;}

.footer-widget-area {color: #777197; font-size: 15px;}
.footer-widget-area p {color: #777197; font-size: 15px !important; line-height: 30px;}
.footer-widget-area a {color: #777197;}
.footer-widget-area a:hover {color: #777197;}
.footer-widget-area ul {font-size: 15px !important;line-height: 36px; list-style: none; padding-left:0;}
.footer-widget-area li {}

.krth-copyright {color: #777197; font-size: 15px !important;}
.krth-copyright a {color: #777197;}
.krth-copyright a:hover {color: #777197;}

/* Size & Alignment Styles CSS */

.twenty {font-size: 20px !important;}
.twentysix {font-size: 26px !important;}
.thirtysix {font-size: 36px !important;}
.tm20 {margin-top: 20px;}
.tm60 {margin-top: 60px;}
.float-left {float: left !important;}
.float-center {margin: 0px auto 0px auto;}
.text-center {text-align: center !important;}
.hidden {visibility: hidden !important:}

/* Custom Styles CSS */

.violet {color: #3b3558;}
.blue {color: #32a6d5;}
.grey {color: #939598;}

.block-blue {padding: 20px 0px 20px 0px; color: #ffffff; background-color: #32a6d5;}
.block-blue H2 {color: #ffffff; font-size: 40px; font-weight: 500 !important;}

.block-paleblue {margin-top: -36px !important; padding: 10px 0px 10px 0px; background-color: #a7e6ff;}

.block-icons-blue {color: #32a6d5;}
.block-icons-blue H2 {color: #32a6d5;}
.block-icons-blue H3 {color: #32a6d5; font-size: 22px !important; margin-top: -16px !important;}
.block-icons-blue P {color: #32a6d5; line-height: 20px !important; margin-top: -16px !important;}

.block-violet {padding: 20px 0px 20px 0px; background-color: #3b3558;}
.block-violet H2 {color: #ffffff; font-size: 40px; font-weight: 500 !important;}

.box-violet {background-color: #3b3558; margin: 0px 10px 0px 10px; margin: 0px auto 0px auto; max-width: 570px!important;}
.box-violet H1 {color: #ffffff;}
.box-violet H2 {color: #ffffff;}
.box-violet H3 {color: #ffffff;}
.box-violet H4 {color: #ffffff;}
.box-violet P {color: #ffffff;}

.block-icons-violet {color: #3b3558;}
.block-icons-violet H2 {color: #3b3558;}
.block-icons-violet H3 {color: #3b3558; font-size: 22px !important; margin-top: -16px !important;}
.block-icons-violet P {color: #3b3558; line-height: 20px !important; margin-top: -16px !important;}

.block-white {padding: 20px 0px 20px 0px;}
.block-white H1 {color: #32a6d5; font-size: 40px; font-weight: 500 !important;}
.block-white H2 {color: #32a6d5; font-size: 40px; font-weight: 400 !important;}

.block-icons-white {color: #ffffff;}
.block-icons-white H2 {color: #ffffff;}
.block-icons-white H3 {color: #ffffff; font-size: 22px !important; margin-top: -16px !important;}
.block-icons-white P {color: #ffffff; line-height: 20px !important; margin-top: -16px !important;}

.block-grey {padding: 20px 0px 20px 0px; background-color: #f8f8f8;}
.block-grey H2 {color: #3b3558; font-size: 40px; font-weight: 500 !important;}

.block-yellow {padding: 20px 0px 0px 0px; background-color: #f8f81e;}

.block-green {padding: 60px 0px 40px 0px; background-color: #32d4a4;}
.block-green H2 {color: #ffffff; font-size: 45px; font-weight: 700 !important;}
.block-green H3 {color: #ffffff; font-size: 24px; font-weight: 600 !important;}

.block-pricing {background-color: #f8f8f8; display: flex !important; justify-content: center !important; column-gap: 20px !important;}
.block-pricing H2 {color: #3b3558; font-size: 32px; font-weight: 600 !important;}
.panel-pricing {width: 330px !important; background-color: #ffffff !important; padding: 0px 0px 0px 0px !important; margin-bottom: 20px; border: 2px; border-color: #32a6d5; !important; border-style: solid !important; border-radius: 10px !important;}

/* Homepage Styles */

.homehero {height: 878px; }
.homehero H1 {color: #ffffff; font-size: 32px; font-weight: 500; margin-top: -40px; text-shadow: 2px 1px #000000;}
.homehero H2 {color: #ffffff; font-size: 48px; font-weight: 600; margin-top: 180px; text-shadow: 2px 2px #000000;}
.promovideo {z-index:9999 ;}

#vimeo-holder .vc_single_image-wrapper {
	cursor:pointer;	
}

#vimeo-holder .vc_single_image-wrapper::after {
	content: "\f01d";
	font-family: 'FontAwesome';
	font-size: 180px;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -100px 0 0 -100px;
	line-height: 1;
	color: #ffffff;
	text-align: center;
	transition: all 0.3s;
	vertical-align: middle;
	padding-top: 10px;
	opacity: 0.7;
}

#vimeo-holder .vc_single_image-wrapper:hover::after {color: #3b3558; font-size: 200px; padding-top: 0; opacity: 1;}
#vimeo-holder > *:first-child {position:relative;}
#vimeo-holder > *:first-child:before, #vimeo-holder > *:first-child:after {height: 100%; width: 82px; position: absolute; top: 0; content: ''; background-repeat: no-repeat; background-position: top;}
#vimeo-holder > *:first-child:before {left:-82px; background-image: url('/wp-content/uploads/2022/03/Video-Shadow-Left.png');}
#vimeo-holder > *:first-child:after {right:-82px; background-image: url('/wp-content/uploads/2022/03/Video-Shadow-Right.png');}

/* Button Styles */

.btn-violet {font-size: 19px; font-weight: 800; text-align: center; color: #ffffff; width: 190px; height: 52px; background-color: #3b3558; display: table; border-radius: 6px; padding: 12px 6px 12px 6px;}
.btn-violet a {color: #ffffff;}
.btn-violet a:hover {color: #ffe400;}

.btn-yellow {font-size: 19px; font-weight: 800; text-align: center; color: #3b3558; width: 230px; height: 52px; background-color: #ffe400; display: table; border-radius: 6px; padding: 12px 6px 12px 6px;}
.btn-yellow a {color: #3b3558;}
.btn-yellow a:hover {color: #000000;}

.registerbtn {font-size: 16px; font-weight: 700; text-align: center; color: #3b3558; width: 190px; height: 36px; background-color: #ffe400; display: table; border-radius: 6px; padding: 6px 10px 6px 10px; margin-top: 8px;}
.registerbtn a {color: #3b3558 !important;}
.registerbtn a:hover {color: #000000 !important;}

.OZEVbtn {font-size: 19px; font-weight: 800; text-align: center; color: #3b3558; width: 340px; height: 52px; background-color: #ffe400; display: table; border-radius: 6px; padding: 12px 6px 12px 6px;}
.OZEVbtn a {color: #3b3558;}
.OZEVbtn a:hover {color: #000000;}

.hereobtn-apple {margin-top: 290px;}
.hereobtn-google {margin-top: 290px;}

/* Hide Google Recaptcha Badge */
.grecaptcha-badge {visibility: hidden !important;}

/* Contact Form 7 Styles */

#subscribe-form {max-width: 1160px; margin:0 auto; width: 100%;}
.form-row {width: 100%;}

.column-third {float: left; position: relative; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.clearfix: after {content: ""; display: table; clear: both;}

@media only screen and (min-width: 48em) {
	.column-third {width: 33%;}
}

.wpcf7 {font-size: 17px; color:#555;}
.wpcf7 select {-webkit-appearance: auto; -moz-appearance: auto; text-indent: unset; color: unset; min-height: unset;}
.wpcf7 input, .wpcf7 select {width: 98%; background-color: #ffffff; border: 2px solid #c7c8ca; border-radius: 6px;}
.wpcf7 input[type=submit] {width: 98%; background:#3b3558 !important; color: #ffffff; margin-top: 10px !important; border: 2px solid #3b3558; border-radius: 6px; font-size: 20px; font-weight: 800; display: block; margin: 0 auto;}
.wpcf7-checkbox input[type=checkbox] {position: relative; width: 20px; height: 20px; top: 0px; left: 0px;}
.wpcf7-response-output {color: #d62800; background-color: #ffffff; font-size: 17px; font-weight: bold; text-align: center; display: block;}
.wpcf7 textarea, .wpcf7 select {width: 98%; background-color: #ffffff; border: 2px solid #c7c8ca; border-radius: 6px;}
.wpcf7 select, .wpcf7 select {width: 98%; background-color: #ffffff; border: 2px solid #c7c8ca; border-radius: 6px;}

/* Table Styles */

table.GeneratedTable {
  width: 100%;
  background-color: #ffffff;
  border-collapse: collapse;
  border-width: 1px;
  border-color: #919191;
  border-style: solid;
  color: #000000;
}

table.GeneratedTable td, table.GeneratedTable th {
  border-width: 1px;
  border-color: #919191;
  border-style: solid;
  padding: 3px !important;
}

table.GeneratedTable thead {
  background-color: #dcfafb;
}

/*Ruaridh 20/12/23*/

.pop-up-img{
	padding-top: 30px;
}

.fb-close{
	padding: 8px;
}

.firebox-block-button-element:hover{
	height: 44px;
}

.pop-up-form > .sib-default-btn {
    font-family: 'Nunito'!important;
    font-weight: 600!important;
}

.pop-up-form{
    max-width: 90%;
    margin: auto;
}

.pop-up-form input{
    padding: 10px 20px!important;
    margin: 6px 0 0px!important;
}

.pop-up-form input::placeholder{
	color: #939598;
	font-weight: 600;
}

.grecaptcha-badge{
	width: 0!important;
	height: 0!important;
}

@media only screen and (max-width: 767px){

	.pop-up-img {
		padding-top: 37px;
	}

}

/*Ruaridh 08/04/24*/

.white{
	color: #fff!important;
}

.charger-rate-calculator{
    display: block;
    background: #32a6d5;
    padding: 2vw;
    border-top-left-radius: 1vw;
	border-top-right-radius: 1vw;
}

.charger-rate-calculator h3{
    text-align: center;
    color: #9fe3ff;
    margin-bottom: 3vh;
}

.charger-rate-calculator form ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.charger-rate-calculator li {
    margin-top: 1.5vh;
}

.charger-rate-calculator label {
    display: inline-block;
    text-align: left;
    color: #fff;
    font-size: 1.2vw;
    margin: 0;
}

.charger-rate-calculator label span{
	color: #fffc00;
}

.charger-rate-calculator form input{
    border: 2.5px solid #c7c8ca;
    border-radius: 0.3vw;
    margin: 0;
    font-size: 1vw;
}

.charger-rate-calculator form select{
    border-radius: 0.1vw;
    margin: 0;
    min-height: 56px;
    font-size: 1.1vw;
	color: #232323;
}

.charger-rate-calculator form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url( '/wp-content/uploads/2024/04/down-arrow.png' );
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 24px;
    background-size: 12px;
}

.charger-rate-output {
    background: #1d95c5;
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
    padding: 1.4vw 2vw 0.2vw 2vw;
    text-align: center;
}

.charger-rate-output h4{
	color: #fff;
}

.charger-rate-output h5{
    font-size: 3.5vw;
    font-weight: 700;
    color: #fff;
}

.charger-rate-output p{
    color: #fff;
    font-size: 3.5vw;
    font-weight: 700;
}

.markup-calculator {
    display: block;
    background: #3b3658;
    padding: 2vw 2vw 0vw 2vw;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
}

.markup-calculator form input{
    border: 2.5px solid #c7c8ca;
    border-radius: 0.3vw;
    margin: 0;
    font-size: 1vw;
}

.markup-calculator label {
    display: inline-block;
    text-align: left;
    color: #fff;
    font-size: 1.2vw;
    margin: 0;
}

.markup-calculator label span{
	color: #fffc00;
}

.markup-calculator form ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.markup-calculator h3{
    text-align: center;
    color: #9fe3ff;
    margin-bottom: 3vh;
}

.markup-calculator h5{
    text-align: center;
    color: #f5e501;
    font-size: 3.2vw;
    font-weight: 700;
}

.markup-calculator-slider{
    text-align: center;
    padding: 1.4vw 0;
}

.markup-calculator-slider img{
    width: 45%;
}

.markup-calculator-slider h3{
	margin-bottom: 0!important;
}

.markup-calculator-slider h4{
    font-size: 1vw;
    color: #abaaaf;
    font-weight: 700;
}

.dynamic-slider {
  width: 100%;
}

.dynamic-slider input{
	width: 52%;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 23px;
	height: 23px;
	border: 0;
	background-image: url( '/wp-content/uploads/2024/04/slider-icon.png' );
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	pointer-events: none;
	background-color: rgba( 255, 255, 255, 0.0);
}

.slider::-moz-range-thumb {
	width: 23px;
	height: 23px;
	border: 0;
	background-image: url( '/wp-content/uploads/2024/04/slider-icon.png' );
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	pointer-events: none;
	background-color: rgba( 255, 255, 255, 0.0);
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    height: 25px;
    background: none;
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.markup-calculator-output {
    background: #292639;
    display: block;
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
	padding: 2vw 0 0 0;
}

.markup-calculator-output h4,
.markup-calculator-output h5{
	color:#abaaaf;
}

.markup-calculator-output h4 {
    font-size: 1.1vw;
    font-weight: 700;
}

.markup-calculator-output h5{
    font-size: 2.5vw;
    font-weight: 700;
}

.markup-calculator-output p{
    color: #abaaaf;
    font-size: 0.7vw;
    text-align: center;
    padding: 0 0 1vw 0;
}


.mco-col-1,
.mco-col-2 {
    width: 50%;
    float: left;
    text-align: center;
}

@media only screen and (max-width: 767px){
	.charger-rate-calculator {
		padding: 5vw 4vw;
	}
	
	.charger-rate-calculator h3 {
		margin-bottom: 0vh;
		font-size: 4vw;
	}
	
	.charger-rate-calculator label {
		font-size: 3vw;
	}
	
	.charger-rate-calculator form input {
		font-size: 3vw;
		border-radius: 2vw;
	}
	
	.charger-rate-calculator form select {
		font-size: 3vw;
		border-radius: 2vw;
	}
	
	.charger-rate-output h4 {
		font-size: 4vw;
	}
	
	.charger-rate-output h5 {
		font-size: 8vw;
	}
	
	.markup-calculator {
		padding: 5vw 4vw 0vw 4vw;
	}
	
	.markup-calculator h3 {
		margin-bottom: 0vh;
		font-size: 4vw;
	}
	
	.markup-calculator label {
		font-size: 3vw;
	}
	
	.markup-calculator form input {
		font-size: 3vw;
		border-radius: 2vw;
	}
	
	.markup-calculator-slider {
		padding: 4vw 0 1vw 0px;
	}
		
	.markup-calculator h5 {
		font-size: 8vw;
	}
	
	.markup-calculator-slider h4 {
		font-size: 3vw;
	}
	
	.markup-calculator-output {
		padding: 3vw 0 0 0;
	}
	
	.markup-calculator-output h4 {
		font-size: 3vw;
	}
	
	.markup-calculator-output h5 {
		font-size: 5vw;
	}
	
	.markup-calculator-output p {
		font-size: 1.7vw;
	}
	
	.charger-rate-calculator form select {
		background-position-x: 96%;
	}
	
	.calculator-row{
		display: flex;
		flex-direction: column;
	}
	
	.calculator-row > div:nth-child( 1 ){
		order: 5;
	}
	.calculator-row > div:nth-child( 2 ){
		order: 1;
	}
	.calculator-row > div:nth-child( 3 ){
		order: 3;
	}
	.calculator-row > div:nth-child( 4 ){
		order: 2;
	}
	.calculator-row > div:nth-child( 5 ){
		order: 4;
	}


	.markup-calculator {
		border-top-left-radius: 3vw;
		border-top-right-radius: 3vw;
	}

	.markup-calculator-output {
		border-bottom-left-radius: 3vw;
		border-bottom-right-radius: 3vw;
	}
	
	.charger-rate-calculator{
		border-top-left-radius: 3vw;
		border-top-right-radius: 3vw;
	}	

	.charger-rate-output{
		border-bottom-left-radius: 3vw;
		border-bottom-right-radius: 3vw;
	}
}