/*
Theme Name: Klein Group Theme
Template: twentytwenty
Author: Jorden
Author URI: https://www.tandemcreate.co.za/
Tags: blog,one-column,custom-background,custom-colors,custom-logo,custom-menu,editor-style,featured-images,footer-widgets,full-width-template,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready,block-patterns,block-styles,wide-blocks,accessibility-ready
Version: 1.0.1622111636
Updated: 2021-05-27 10:33:56

*/


/**======================================================================
 *
 * Index
 *
 * xx - Fonts
 * 00 - HTML Elements
 * 01 - Header Elements
 * 02 - Navigation Elements
 * 03 - Unified Elements
 * 04 - Text Styling
 * 05 - Forms
 * 06 - Footer Element
 * 07 - Loader
 * 08 - Buttons
 * 09 - padding and alignment
 * 10 - effects
 * 11 - news
 * 12 - Documents
 * 13 - @media Elements
 *
======================================================================**/


/*----------------------------------------------------------------xx - Fonts-----------------------------*/
@font-face {
    font-family: Montserrat-Thin;
    src: url(fonts/Montserrat-Thin.ttf);
}

@font-face {
    font-family: Montserrat;
    src: url(fonts/Montserrat-Regular.ttf);
}

@font-face {
    font-family: Montserrat-Bold;
    src: url(fonts/Montserrat-Bold.ttf);
}

@font-face {
    font-family: Montserrat-Black;
    src: url(fonts/Montserrat-Black.ttf);
}

@font-face {
    font-family: Montserrat-Medium;
    src: url(fonts/Montserrat-Medium.ttf);
}

@font-face {
    font-family: Montserrat-Semi-Bold;
    src: url(fonts/Montserrat-Semi-Bold.ttf);
}

/*----------------------------------------------------------------00 - HTML Elements-----------------------------*/
body {
    background-image: url(/wp-content/uploads/2021/06/Klein-Group-Grey-Slash-BG-01-scaled.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Montserrat !Important;
}

.socialFoot {
    display: none !important;
}

/*----------------------------------------------------------------01 - Header Elements-----------------------------*/
.pcHide {
    display: none;
}

.mobHide {
    display: block;
}

.pcHide2 {
    display: none;
}

.mobHide2 {
    display: block;
}

.sharePopTitle h2 {
    color: #000000 !important;
    text-align: center !important;
    padding-bottom: 5% !important;
}

#sharePopUp {
    background-color: #EFEFEF !important;
    border: 3px solid #D9183B !important;
    border-radius: 25px !important;
    width: 50vw !important;
    position: fixed !important;
    top: 25vh !important;
    left: 25vw !important;
    text-align: center !important;
}

#hazy {
    background-color: rgba(46, 49, 49, 0.5) !important;
    width: 100vw !important;
    height: 100vw !important;
    position: fixed !important;
    z-index: 9999 !important;
    display: none;
}

.shareButRevi {
    padding-top: 10px;
    padding-left: 20px;
    width: 43px;
    height: auto;
}

.homeHead {
    height: 100vh;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.homeHead2 {
    width: 40%;
    min-height: 100vh;
    padding-left: 10% !important;
}

.homeHead3 {
    width: 60%;
    min-height: 100vh;
}

.homeimg {
    min-height: 100vh !important;
}

.noMargB {
    margin-bottom: 0px !important;
}

.noMargT {
    margin-top: 0px !Important;
}

.headPaddingR {
    padding-right: 10%;
}

.headPaddingT {
    padding-top: 30vh !important;
}

.headSlash:after {
    content: "";
    position: absolute;
    display: block;
    background-image: url(/wp-content/uploads/2021/06/Klein-Dash-Red-01.png);
    height: 65%;
    top: 18vh;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left 39% center;
    pointer-events: none;
    animation-name: home-slash;
    animation-duration: 2s;
}

@keyframes home-slash {
    from {
        background-position: left 0 center;
    }

    to {
        background-position: left 39% center;
    }
}

.homeHeadTit h2 {
    font-family: Montserrat-Bold !important;
    font-weight: bold !important;
}

.b {
    background-color: #ffffff !important;
}

#documents-header {}

.document-background {
    background: url('/wp-content/uploads/2021/06/Documents-Banner.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: calc(10% + 8rem) 0 15rem 0;
}



/*----------------------------------------------------------------02 - Navigation Elements--------------------------*/

.navBlock {
    padding-top: 1% !important;
    padding-bottom: 1% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    background-color: rgba(235, 235, 235, 0.8) !Important;
    position: fixed !Important;
    /*----------------------------------------------------------------------------------------------------temp change back to fixed-------*/

}

.menuTxtCol {}

#menu-1-cbcda6a {
    margin-left: auto !important;
    margin-right: auto !important;
}

#menu-1-cbcda6a li {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#menu-1-f0b58c0 {
    float: right !Important;
    margin-left: auto !important;
    margin-right: 0px !important;
}

#menu-item-296 a {
    padding-right: 0px !important;
}

.elementor-widget-navigation-menu .menu-item.current-menu-item a.hfe-menu-item {
    color: #000000 !Important;
    font-weight: bold !important;
}

.elementor-widget-navigation-menu #menu-1-cbcda6a>.menu-item.current-menu-item:after {
    content: "";
    position: absolute;
    display: block;
    background-image: url(/wp-content/uploads/2021/06/Klein-Dash-Red-01.png);
    height: 40%;
    top: 12px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    right: -92%;
}

.elementor-widget-navigation-menu .menu-item a.hfe-menu-item {
    color: #3C3C3C !Important;
    font-weight: normal !important;
}

.elementor-widget-navigation-menu .menu-item a.hfe-menu-item:hover {
    color: #D9183B !important;
}

.sub-menu a {
    font-family: Montserrat !important;
    font-weight: normal !important;
}

.sub-menu a:hover {
    color: #D9183B !important;
}

/*----------------------------------------------------------------04 - Text Styling--------------------------------*/


/*----------------------------------------------------------------POST PAGE----------------------------------------*/

.postBlock {
    background-color: #ffffff !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
}

.postCol {
    max-width: 70% !important;
    padding-left: 5% !important;
}

.postPic {
    text-align: left !important;
}

.postHead h6 {
    color: #000000 !important;
    text-align: left !important;
}

.postSubHead {
    color: #000000 !important;
    text-align: left !important;
}

.postText {}

.readMore {}

/*----------------------------------------------------------------POST PAGE END------------------------------------*/
.blankLinker {
    color: #7A7A7A !important;
}

.blck h1,
h2,
h3,
h4,
h5,
h6 {
    color: #3C3C3B !important;
}

.blck {
    color: #3C3C3B !important;
}

.blckFix h5 {
    color: #3C3C3B !important;
    font-family: Montserrat-Bold !Important;
    text-align: left !important;
}

.blckFixC h5 {
    color: #3C3C3B !important;
    font-family: Montserrat-Bold !Important;
    text-align: center !important;
}

.wht {
    color: #ffffff !Important;
}

.contSubHeadL {
    text-align: center !important;
    font-family: Montserrat-Bold !Important;
}

.contSubHeadLeft {
    text-align: left !important;
    font-family: Montserrat-Bold !Important;
}

.contTxt {
    color: #3C3C3B !important;
}

.contTxtJust {
    text-align: justify !important;
}

.ital {
    font-style: italic !important;
}

.contBlock {
    padding-right: 10% !important;
    padding-left: 10% !important;
    text-align: center !important;
}

.contPadSet {
    padding-right: 10% !important;
    padding-left: 10% !important;
}

.homeTileHeading h5 {
    text-align: left !important;
    font-family: Montserrat-Bold !Important;
    color: #ffffff !important;
}

.homeTileBlock {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.homeTileSlash {
    text-align: left !important;
    max-height: 40px !important;
    max-width: 50px !important;
}

.homeTileCol {
    transition: all 0.5s ease;
}

.homeTileCol:hover {
    background-color: rgba(193, 19, 52, 1) !Important;
    mix-blend-mode: multiply;
}

.homeTileTripad:before {
    content: "";
    width: 50px;
    height: 40px;
    background-image: url('/wp-content/uploads/elementor/thumbs/Klein-Dash-white-p7yyq98jrr23drgm5d7h7b2n0ikivt5994in2stnv4.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    top: -60px;
    left: -60px;
    opacity: 0;
    transition: all 0.5s ease;
}

.homeTileTripad:after {
    content: "→";
    width: 50px;
    height: 40px;
    /*background-image: url('/wp-content/uploads/elementor/thumbs/Klein-Dash-white-p7yyq98jrr23drgm5d7h7b2n0ikivt5994in2stnv4.png');*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    bottom: -17.3vh;
    left: -60px;
    opacity: 0;
    transition: all 0.5s ease;
}

.homeTileCol:hover .homeTileTripad:before {
    content: "";
    width: 50px;
    height: 40px;
    background-image: url('/wp-content/uploads/elementor/thumbs/Klein-Dash-white-p7yyq98jrr23drgm5d7h7b2n0ikivt5994in2stnv4.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    top: -60px;
    left: 0;
    opacity: 1;
}

.homeTileCol:hover .homeTileTripad:after {
    content: "→";
    width: 50px;
    height: 40px;
    /*background-image: url('/wp-content/uploads/elementor/thumbs/Klein-Dash-white-p7yyq98jrr23drgm5d7h7b2n0ikivt5994in2stnv4.png');*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    bottom: -17.3vh;
    left: 0;
    color: #fff;
    opacity: 1;
    font-size: 26px;
    font-weight: 800;
}

.homeTileCol .elementor-icon path {
    fill: rgba(193, 19, 52, 1) !Important;
    transition: all 0.5s ease;
}

.homeTileCol:hover .elementor-icon path {
    fill: #fff !Important;
}

.homeTileCol {
    padding-top: 5% !important;
    padding-bottom: 5% !important;
    padding-left: 3% !Important;
    padding-right: 3% !important;

}

.Color1 {
    background-color: rgba(58, 58, 58, 0.1) !Important;
}

.Color2 {
    background-color: rgba(58, 58, 58, 0.2) !Important;
}

.Color3 {
    background-color: rgba(58, 58, 58, 0.3) !Important;
}

.Color4 {
    background-color: rgba(58, 58, 58, 0.4) !Important;
}

.Color5 {
    background-color: rgba(58, 58, 58, 0.5) !Important;
}

.homeTileTripad {
    margin-top: 55px !Important;
}

.homeBottomImg {
    padding-left: 10% !important;
    padding-right: 10% !important;
}

.homeBottomImgTxt h3 {
    font-family: Montserrat-Bold !Important;
    color: #ffffff !important;
    line-height: 1.3em !Important;
}

.serviceHeader {
    padding-top: 10% !important;
}

.serviceHeader img.attachment-medium.size-medium {
    filter: grayscale(1) contrast(1) brightness(2);
}

.servPadBigTxt {
    padding-top: 5% !important;
}

.aboutHeadCol {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.aboutHeadTxt h2 {
    font-family: Montserrat-Bold !important;
    font-weight: border !important;
    color: #ffffff !important;
}

.aboutHeader {
    padding-top: 10% !important;
}

.aboutPic {
    width: 120px !Important;
    height: 120px !important;
    display: inline-block !important;
    text-align: right !important;
}

.about2ndImageTxt h3 {
    color: #ffffff !important;
    text-align: center !important;
    font-weight: bold !important;
}


.about2ndImageTxt h3 {
    color: #ffffff !important;
    text-align: center !important;
    font-weight: bold !important;
}

.about3rdImageTxt h3 {
    color: #ffffff !important;
    text-align: center !important;
    font-weight: bold !important;
    font-family: Montserrat-Bold !important;
}

.valuesSubH h2 {
    font-family: Montserrat-Bold !important;
    font-weight: bold !important;
}

.valueSlash {
    width: 100px !important;
    height: 90px !important;
}

.slashBox {
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.slashAuto {
    width: auto !important;
}

.dropTxt {
    margin-bottom: -60px !important;
}

.csiImgHeadTxt h2 {
    color: #ffffff !important;
    text-align: center !important;
    font-family: Montserrat-Bold !important;
}

.csiLowSlash:before {
    content: "";
    position: absolute;
    display: block;
    background-image: url(/wp-content/uploads/2021/06/Klein-Dash-Red-01.png);
    height: 100%;
    max-height: 162px;
    top: 0;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    left: -172px;
}

.contPinkBanTxt h2 {
    text-align: center !important;
    color: #ffffff !important;
    font-family: Montserrat !important;
}

.poliHeadTxt h2,
h3,
h4,
h5 {
    color: #ffffff !important;
    font-family: Montserrat !important;
    text-align: center !important;
}

.poliHeadTxt:before {
    content: "";
    position: absolute;
    display: block;
    background-image: url(/wp-content/uploads/2021/06/Klein-Dash-Red-01.png);
    height: 500%;
    top: -80px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    left: -172px;
}

.poliHeadingMini {
    color: #000000 !important;
    text-align: left !important;
    font-family: Montserrat-Bold;
}

.servicePic {
    width: 600px !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*----------------------------------------------------------------05 - Forms---------------------------------------*/

.contFrmFeild input {
    padding-top: 4% !important;
    box-shadow: 0px 0px !important;
    text-align: center !important;
    color: #000000 !important;
    font-family: Montserrat !important;
    line-height: 1.4 !important;
    background-color: #ffffff !important;
    border-bottom: 1.5px solid #CFCFCF !important;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
}

.contFrmFeildBtmPad {
    padding-bottom: 4% !important;
}

.contFrmFeild textarea {
    box-shadow: 0px 0px !important;
    text-align: center !important;
    color: #000000 !important;
    font-family: Montserrat !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    border-bottom: 0px solid #CFCFCF !important;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
}


.formBlockPad {
    padding-left: 25% !important;
    padding-right: 25% !important;
}

/*.newsFrmFeild input{
    padding-top: 4% !important;
    box-shadow: 0px 0px !important;
    text-align: center !important;
    color: #000000 !important;
    font-family: Montserrat !important;
    line-height: 1.4 !important;
    background-color: #ffffff !important;
    border-bottom: 1.5px solid #CFCFCF !important;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important; 
}*/

.newsFrmCol {
    height: 500px !Important;
    background-color: #706F6F !Important;
    position: fixed !important;
    top: 25vh;
    right: 0;
}

.newsFrmTit {
    color: #ffffff !important;
    font-family: Montserrat-Bold !important;
    text-align: left !important;
}

.justifyPls {
    text-align: justify !important;
    text-justify: inter-word !Important;
}

/*----------------------------------------------------------------06 - Footer Element------------------------------*/
.footPinkBlck {
    background-color: #D9183B !Important;
    padding-top: 5% !important;
    padding-bottom: 1% !important;
    padding-left: 10% !Important;
    padding-right: 10% !important;
}

.footYellowBlck {
    background-color: #E68500 !Important;
    padding-top: 5% !important;
    padding-bottom: 1% !important;
    padding-left: 10% !Important;
    padding-right: 10% !important;
}

.footBlueBlck {
    background-color: #385A65 !Important;
    padding-top: 5% !important;
    padding-bottom: 1% !important;
    padding-left: 10% !Important;
    padding-right: 10% !important;
}

.footWhtSubH h6 {
    color: #ffffff !important;
    font-family: Montserrat-Thin !Important;
}

.footPinkBlck .elementor-widget:not(:last-child) {
    margin-bottom: 0px !important;
}

.footYellowBlck .elementor-widget:not(:last-child) {
    margin-bottom: 0px !important;
}

.footBlueBlck .elementor-widget:not(:last-child) {
    margin-bottom: 0px !important;
}

.icoFoot {
    text-align: center !important;
    float: left !important;
    margin-right: auto !important;
}

.tpPadFoot {
    padding-top: 20px !important;
}

.btmPadFoot {
    padding-bottom: 20px !important;
}

.footWhtBlk {
    background-color: #ffffff !Important;
    padding-left: 10% !important;
    padding-right: 10% !important;
    padding-top: 0px !Important;
    padding-bottom: 0px !Important;
    margin-top: 1% !Important;
    margin-bottom: 0px !important;
}

.whtIcoFoot {
    width: 20px;
    height: 30px;
    display: inline-block !important;
    margin-right: 20px !important;
    margin-left: 20px !important;
}

.rColFootWht {
    margin-left: auto !important;
}

.mailNCall {
    text-align: right !Important;
}

.mailNCall a {
    color: grey !important;
}

.shareNeg {
    margin-top: -7% !important;
}

.whiteDash {
    width: 20px !Important;
    height: 30px !important;
    text-align: left !important;
}

.servBigTxt p {
    font-family: Montserrat-Bold !important;
    text-align: center !important;
    font-weight: bold !important;
}

/*----------------------------------------------------------------08 - Buttons-------------------------------------*/

.pinkButton.elementor-widget-button .elementor-button {
    color: #3C3C3B !important;
    background-color: transparent !important;
    border: solid !important;
    border-width: 2px !important;
    border-color: #D9183B !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: normal !important;
}

.pinkButton.elementor-widget-button .elementor-button:hover {
    color: #ffffff !important;
    background-color: #D9183B !important;
}

.pinkButtonW.elementor-widget-button .elementor-button {
    color: #ffffff !important;
    background-color: transparent !important;
    border: solid !important;
    border-width: 2px !important;
    border-color: #D9183B !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: normal !important;
    font-family: Montserrat-Bold !important;
}

.pinkButtonW.elementor-widget-button .elementor-button:hover {
    background-color: #D9183B !important;
}

.yellowButton.elementor-widget-button .elementor-button {
    color: #3C3C3B !important;
    background-color: transparent !important;
    border: solid !important;
    border-width: 2px !important;
    border-color: #E68500 !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: normal !important;
}

.yellowButton.elementor-widget-button .elementor-button:hover {
    color: #ffffff !important;
    background-color: #E68500 !important;
}

.blueButton.elementor-widget-button .elementor-button {
    color: #3C3C3B !important;
    background-color: transparent !important;
    border: solid !important;
    border-width: 2px !important;
    border-color: #385A65 !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: normal !important;
}

.blueButton.elementor-widget-button .elementor-button:hover {
    color: #ffffff !important;
    background-color: #385A65 !important;
}

.frmButton {
    margin-top: 4% !important;
    align-items: center !important;
    color: #000000 !important;
    background-color: transparent !important;
    border: solid !important;
    border-width: 2px !important;
    border-color: #D9183B !important;
    font-size: 15px !important;
    font-weight: normal !important;
    margin-bottom: 5% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    display: block !important;
}

.frmButton:hover {
    color: #ffffff !important;
    background-color: #D9183B !important;
    border-color: #D9183B !important;
    font-weight: normal !important;
    transition: 0.7s ease !important;
    text-decoration: none !important;
}

.standardBut.elementor-widget-button .elementor-button {
    color: #3C3C3B !important;
    background-color: transparent !important;
    border: solid !important;
    border-width: 2px !important;
    border-color: #D9183B !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: normal !important;
    width: 150px !important;
}

.standardBut.elementor-widget-button .elementor-button:hover {
    color: #ffffff !important;
    background-color: #D9183B !important;
}

.standardButSolo {
    color: #3C3C3B !important;
    background-color: transparent !important;
    border: solid !important;
    border-width: 2px !important;
    border-color: #D9183B !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: normal !important;
    width: 150px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-right: 39px !important;
    padding-left: 39px !important;
}

.standardButSolo:hover {
    color: #ffffff !important;
    background-color: #D9183B !important;
}

.popButton {
    color: #000000 !important;
    background-color: transparent !important;
    border: solid !important;
    border-width: 2px !important;
    border-color: #D9183B !important;
    border-radius: 25px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    margin-top: 5% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 200px !Important;
}

.popButton:hover {
    color: #ffffff !important;
    background-color: #D9183B !important;
    text-decoration: none !important;
}

.homeTileCol:hover {
    cursor: pointer;
}

/*----------------------------------------------------------------09 - padding and alignment-----------------------*/
.center {
    text-align: center !important;
}

.bottomMultiBlkPad {
    padding-bottom: 7% !important;
}

.topMultiBlkPad {
    padding-top: 7% !important;
}

.padFix {
    padding-left: 45vw !important;
}

.homeNegMagHead {
    margin-top: -20px !important;
}

.aboutTxtPad {
    padding-top: 2% !important;
}

.noPadT {
    padding-top: 0px !important;
}

.noPadB {
    padding-bottom: 0px !Important;
}

.aboutTopPad {
    padding-top: 40px !Important;
}

.aboutBotPad {
    padding-bottom: 40px !important;
}

.twoColL {
    padding-right: 3% !important;
}

.twoColR {
    padding-left: 3% !important;
}

.negMagHead {
    margin-left: -30% !important;
}

.negMagHeadValues {
    margin-left: -35% !important;
}

.mapPad {
    padding-top: 0px !important;
    padding-bottom: 5% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
}

.nextoMapPad {
    padding-left: 5% !important;
}

.contHeadTxt h2 {
    color: #ffffff !important;
    font-family: Montserrat-Bold !important;
}

.contHeadTxt :before {
    content: "";
    position: absolute;
    display: block;
    background-image: url(/wp-content/uploads/2021/06/Klein-Dash-Red-01.png);
    height: 200%;
    top: -40px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    left: -80px;
}

.contTxtDetsSub {
    color: #000000 !important;
    font-weight: bold !important;
}

.aboutHeadTxt2 h2 {
    color: #ffffff !important;
    font-family: Montserrat-Bold !important;
}

.aboutHeadTxt2 :before {
    content: "";
    position: absolute;
    display: block;
    background-image: url(/wp-content/uploads/2021/06/Klein-Dash-Red-01.png);
    height: 250%;
    top: 0px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    left: -130px;
}

.valueHeadTxt2 h2 {
    color: #ffffff !important;
    font-family: Montserrat-Bold !important;
}

.valueHeadTxt2 :before {
    content: "";
    position: absolute;
    display: block;
    background-image: url(/wp-content/uploads/2021/06/Klein-Dash-Red-01.png);
    height: 250%;
    top: 0px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    left: -130px;
}

.headPadFixN {
    padding-left: 8% !Important;
}

/*----------------------------------------------------------------11 - News--------------------------------------*/

.klein-news-inner {
    display: grid;
    grid-template-columns: 70% 30%;
    grid-column-gap: 50px;
}

.news-item .title h3 {
    margin: 0;
}

.news-item {
    margin-bottom: 25px;
}

.signup {
    width: 100%;
    max-width: 342px;
}

.signup div#caldera_form_1 {
    background: #6F6E6F;
    padding: 25px;
}

.signup div#caldera_form_1 h2 {
    color: #fff !important;
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 150%;
}

.signup .caldera-grid .form-control {
    margin: 0 0 35px 0 !important;
}

.signup input#fld_7908577_1 {
    background: transparent;
    width: 100%;
    border: 1px solid #d9183b;
    color: #fff;
}

.klein-news-outer-tax .klein-news-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.klein-news-outer-tax .news-item .feat-img {
    width: 100%;
    display: block;
}

.klein-news-outer-tax .news-item .feat-img img {
    width: 100%;
    display: block;
    max-width: 100%;
}

.klein-news-outer-tax .banner {
    background: url(/wp-content/uploads/2021/06/Documents-Banner.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: calc(10% + 8rem) 0 15rem 0;
}

.klein-news-outer-tax section {
    padding: 0;
    margin-bottom: 10%;
}

.klein-news-outer-tax .banner h4 {
    position: relative;
    display: table;
    margin: 0 auto;
}

.klein-news-outer-tax .banner h4:before {
    content: "";
    position: absolute;
    display: block;
    background-image: url(/wp-content/uploads/2021/06/Klein-Dash-Red-01.png);
    height: 450%;
    top: -80px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    translate: (-100%, 0);
    animation-name: red-line-tax;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    transition: all 0.5s ease;
}

ul.years {
    padding: 0;
    margin: 0;
}

ul.years li {
    list-style: none;
    position: relative;
}

ul.years li a {
    position: relative;
}

ul.years li a:after {
    content: "->";
    position: absolute;
    height: 21px;
    width: 128%;
    display: block;
    right: -45px;
    top: -3px;
    text-align: right;
}

ul.years li a:hover:after {
    animation-name: year-hover;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;

}

.news-sidebar {
    width: 100%;
}

@keyframes year-hover {
    0% {
        right: -45px;
    }

    100% {
        right: -65px;
    }
}

@keyframes red-line-tax {
    0% {
        transform: translate(-1000%, 0rem);
    }

    100% {
        transform: translate(-80%, 0rem);
    }
}

@media screen and (max-width: 768px) {
    .klein-news-outer-tax .banner h4:before {
        height: 150%;
        height: 120%;
        top: 70px;
    }

    @keyframes red-line-tax {
        0% {
            transform: translate(-100%, 0rem);
        }

        100% {
            transform: translate(40%, 0rem);
        }
    }
}

/*----------------------------------------------------------------12 - Documents-----------------------------------*/

:root {
    --gap-spacing-1: 5px;
    --gap-spacing-2: 10px;
    --gap-spacing-3: 15px;
    --gap-spacing-4: 20px;
    --gap-spacing-5: 25px;
}

body.post-type-archive-klein_documents {
    background: #fff !important;
}

#document-body {
    max-width: 80%;
    margin: 5rem auto;
}

.klein-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.klein-col-1 {
    width: 100%;
}

.klein-gap-1 .klein-col-1 {
    width: calc(100% - var(--gap-spacing-1) * 2);
}

.klein-gap-2 .klein-col-1 {
    width: calc(100% - var(--gap-spacing-2) * 2);
}

.klein-gap-3 .klein-col-1 {
    width: calc(100% - var(--gap-spacing-3) * 2);
}

.klein-gap-4 .klein-col-1 {
    width: calc(100% - var(--gap-spacing-4) * 2);
}

.klein-gap-5 .klein-col-1 {
    width: calc(100% - var(--gap-spacing-5) * 2);
}

.klein-col-2 {
    width: 50%;
}

.klein-gap-1 .klein-col-2 {
    width: calc(50% - var(--gap-spacing-1) * 2);
}

.klein-gap-2 .klein-col-2 {
    width: calc(50% - var(--gap-spacing-2) * 2);
}

.klein-gap-3 .klein-col-2 {
    width: calc(50% - var(--gap-spacing-3) * 2);
}

.klein-gap-4 .klein-col-2 {
    width: calc(50% - var(--gap-spacing-4) * 2);
}

.klein-gap-5 .klein-col-2 {
    width: calc(50% - var(--gap-spacing-5) * 2);
}

.klein-col-3 {
    width: 33.3%;
}

.klein-gap-1 .klein-col-3 {
    width: calc(33.3% - var(--gap-spacing-1) * 2);
}

.klein-gap-2 .klein-col-3 {
    width: calc(33.3% - var(--gap-spacing-2) * 2);
}

.klein-gap-3 .klein-col-3 {
    width: calc(33.3% - var(--gap-spacing-3) * 2);
}

.klein-gap-4 .klein-col-3 {
    width: calc(33.3% - var(--gap-spacing-4) * 2);
}

.klein-gap-5 .klein-col-3 {
    width: calc(33.3% - var(--gap-spacing-5) * 2);
}

.klein-col-4 {
    width: 25%;
}

.klein-gap-1 .klein-col-4 {
    width: calc(25% - var(--gap-spacing-1) * 2);
}

.klein-gap-2 .klein-col-4 {
    width: calc(25% - var(--gap-spacing-2) * 2);
}

.klein-gap-3 .klein-col-4 {
    width: calc(25% - var(--gap-spacing-3) * 2);
}

.klein-gap-4 .klein-col-4 {
    width: calc(25% - var(--gap-spacing-4) * 2);
}

.klein-gap-5 .klein-col-4 {
    width: calc(25% - var(--gap-spacing-5) * 2);
}

.klein-col-8 {
    width: 66.6%;
}

.klein-gap-1 .klein-col-8 {
    width: calc(66.6% - var(--gap-spacing-1) * 2);
}

.klein-gap-2 .klein-col-8 {
    width: calc(66.6% - var(--gap-spacing-2) * 2);
}

.klein-gap-3 .klein-col-8 {
    width: calc(66.6% - var(--gap-spacing-3) * 2);
}

.klein-gap-4 .klein-col-8 {
    width: calc(66.6% - var(--gap-spacing-4) * 2);
}

.klein-gap-5 .klein-col-8 {
    width: calc(66.6% - var(--gap-spacing-5) * 2);
}

.klein-gap-0 {
    gap: 0;
    justify-content: space-between;
}

.klein-gap-1 {
    gap: calc(var(--gap-spacing-1) * 2);
    justify-content: space-between;
}

.klein-gap-2 {
    gap: calc(var(--gap-spacing-2) * 2);
    justify-content: space-between;
}

.klein-gap-3 {
    gap: calc(var(--gap-spacing-3) * 2);
    justify-content: space-between;
}

.klein-gap-4 {
    gap: calc(var(--gap-spacing-4) * 2);
    justify-content: space-between;
}

.klein-gap-5 {
    gap: calc(var(--gap-spacing-5) * 2);
    justify-content: space-between;
}

.vertical-center {
    align-items: center;
}

.vertical-top {
    align-items: start;
}

.vertical-bottom {
    align-items: end;
}

.horizontal-left {
    justify-content: start;
    display: flex;
}

.horizontal-center {
    justify-content: center;
    display: flex;
}

.horizontal-right {
    justify-content: end;
    display: flex;
}

.tb-margin-1 {
    margin: 5rem 0;
}

.doc-content {
    display: block;
    margin: 2rem 0;
    white-space: pre-wrap;
}

.doc-buttons a.standardButSolo {
    padding: 0 !important;
    display: flex;
    text-align: center !important;
    justify-content: center;
    align-items: center;
    height: 4rem;
    margin: 1rem 0;
    text-decoration: none;
}

.doc-img {
    max-height: 142px;
    max-width: 96px;
}

.document-background h4 {
    position: relative;
    display: table;
    margin: 0 auto;
}

.document-background h4:before {
    content: "";
    position: absolute;
    display: block;
    background-image: url(/wp-content/uploads/2021/06/Klein-Dash-Red-01.png);
    height: 450%;
    top: -80px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    translate: (-100%, 0);
    animation-name: red-line;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    transition: all 0.5s ease;
}

.doc-title h3 {
    text-transform: uppercase;
    color: #000 !important;
    font-size: 2.3rem;
    text-align: left !important;
}

@keyframes red-line {
    0% {
        transform: translate(-100%, 0rem);
    }

    100% {
        transform: translate(-28%, 0rem);
    }
}

@media screen and (max-width: 768px) {
    .document-background h4:before {
        height: 150%;
        height: 120%;
        top: 70px;
    }

    @keyframes red-line {
        0% {
            transform: translate(-100%, 0rem);
        }

        100% {
            transform: translate(40%, 0rem);
        }
    }
}

/*----------------------------------------------------------------13 - @media--------------------------------------*/

/**Older Laptops**/
@media only screen and (max-width: 1440px) {}


@media only screen and (max-width: 1366px) {
    .homeTileCol:hover .homeTileTripad:after {
        bottom: -27vh;
        left: 0;
        font-size: 26px;
        font-weight: 800;
    }

    .shareNeg {
        margin-top: -11% !important;
    }

}

/**Laptop with MDPI screen**/
@media only screen and (max-width: 1280px) {

    .elementor-260 .elementor-element.elementor-element-cbcda6a .menu-item a.hfe-menu-item {
        padding-left: 5px;
        padding-right: 5px;
    }

    .homeHead2 {
        width: 40%;
        min-height: 100vh;
        padding-left: 2% !important;
    }

    .homeTileHeading h5 {
        font-size: 120%;
    }
}

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


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

    .elementor-widget-navigation-menu #menu-1-cbcda6a>.menu-item.current-menu-item:after {
        height: 40%;
        top: 12px;
        width: 100%;
        background-position: right 25px center;
        right: 0%;
    }

    .homeTileHeading h5 {
        font-size: 100%;
    }

    .homeHead2 {
        width: 40%;
        min-height: 100vh;
        padding-left: 0% !important;
    }

    .padmeMob {
        padding-left: 5% !important;
    }

    .homeBottomImgTxt h3 {
        font-size: 180%;
        line-height: 1.3em !Important;
    }

    .formBlockPad {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .footPinkBlck {
        padding-top: 5% !important;
        padding-bottom: 1% !important;
        padding-left: 2% !Important;
        padding-right: 2% !important;
    }

    .footYellowBlck {
        padding-top: 5% !important;
        padding-bottom: 1% !important;
        padding-left: 2% !Important;
        padding-right: 2% !important;
    }

    .footBlueBlck {
        padding-top: 5% !important;
        padding-bottom: 1% !important;
        padding-left: 2% !Important;
        padding-right: 2% !important;
    }
}


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

/**Tablet Optimisation**/
@media only screen and (max-width: 800px) {


    .logoMob {
        width: 100% !important;
    }

    .menuTxtCol {
        width: 100% !important;
        padding-top: 2% !important;
    }

    .mobCol1 {
        width: 50% !Important;
        padding-top: 2% !important;
    }

    .mobCol2 {
        width: 50% !Important;
        padding-top: 2% !important;
    }

    .navBlock {
        position: relative !Important;
    }

    .sharePopTitle h2 {
        padding-bottom: 5% !important;
        font-size: 180% !important;
    }

    .headSlash:after {
        height: 30%;
        top: 30vh;
        width: 100%;
        background-position: left 70% center;
    }

    .homeTileCol {
        width: 100% !important;
    }

    .homeTileHeading h5 {
        font-size: 250%;
    }

    .contPadSet {
        padding-right: 1% !important;
        padding-left: 5% !important;
    }

    .padFix {
        padding-left: 5% !important;
    }

    .slashBox {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .dropTxt {
        margin-bottom: 0px !important;
    }

    .mapPad {
        padding-top: 0px !important;
        padding-bottom: 3% !important;
        padding-left: 3% !important;
        padding-right: 1% !important;
    }

    .nextoMapPad {
        padding-left: 1% !important;
    }

    .mobFootCol {
        text-align: center !important;
    }

    .mobFootBlock {
        padding-top: 2% !important;
        padding-bottom: 2% !important;
    }

    .mobFootIcoCol {
        width: 25% !important;
    }

    .pcHide {
        display: block;
    }

    .mobHide {
        display: none;
    }

    .footWhtSubH h6 {
        color: #ffffff !important;
        font-family: Montserrat-Thin !Important;
        padding-bottom: 2%;
    }

    .footWhtBlk {
        padding-left: 3% !important;
        padding-right: 3% !important;
        padding-top: 0px !Important;
        padding-bottom: 0px !Important;
        margin-top: 1% !Important;
        margin-bottom: 0px !important;
    }
}

/** mobile Optimisation **/

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

    .mobCol1 {
        width: 100% !Important;
        padding-top: 0.5% !important;
        text-align: center !important;
    }

    .mobCol2 {
        width: 100% !Important;
        padding-top: 0.5% !important;
        text-align: center !important;
        padding-right: 4% !important;
    }

    #menu-1-f0b58c0 {
        float: none !Important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-right: 4% !important;
    }

    .menuTxtCol {
        width: 100% !important;
        padding-top: 0.5% !important;
    }

    .sharePopTitle h2 {
        padding-bottom: 2% !important;
        font-size: 100% !important;
    }

    .shareButRevi {
        padding-top: 10px;
        padding-left: 20px;
        width: auto;
        height: auto;
    }

    #sharePopUp {
        border: 2px solid #D9183B !important;
        width: 90vw !important;
        top: 40vh !important;
        left: 5vw !important;
    }

    #hazy {
        background-color: transparent !important;
        width: 100vw !important;
        height: 100vw !important;
        position: fixed !important;
        z-index: 9999 !important;
        display: none;
    }

    .homeHead2 {
        width: 100%;
        min-height: 100vh;
        padding-left: 10% !important;
    }

    .homeTileHeading h5 {
        font-size: 150%;
    }

    .homeBottomImg {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .homeBottomImgTxt h3 {
        font-size: 150%;
        line-height: 1.3em !Important;
    }

    .homeBtmImgTxtColMob h3 {
        text-align: left !important;
    }

    .mobLeft {
        text-align: left;
    }

    .negMagHead {
        margin-left: 30% !important;
    }

    .aboutHeader {
        padding-top: 5% !important;
    }

    .mobButPads {
        padding-bottom: 4% !important;
    }

    .csiImgHeadTxt h2 {
        font-size: 150% !important;
    }

    .headPadFixN {
        padding-left: 30% !Important;
    }

    .mobDocImgPad {
        padding-bottom: 5% !important;
    }

    .mobDocTxtCol {
        text-align: center !important;
    }

    .poliHeadingMini {
        text-align: center !important;
    }

    .contPinkBanTxt h2 {
        font-size: 150% !important;
    }

    .disclaim {
        font-size: 80% !important;
    }

    .klein-news-inner {
        display: block;
        grid-template-columns: 70% 30%;
        grid-column-gap: 50px;
    }

    .klein-news-inner {
        /* direction: ltr; */
        grid-template-columns: 100%;
        grid-column-gap: 0;
    }

    .klein-news-inner>div {
        padding-left: 1rem;
        padding-right: 1rem;
        direction: rtl;
    }

    .news-item .feat-img img {
        margin: 0 auto;
    }

    .headSlash:after {
        height: 20%;
        top: 9vh;
        width: 100%;
        background-position: left 28% center;
        animation-name: hSlashMob;
    }

    .contHeadTxt :before {
        height: 150%;
        top: -10px;
        width: 100%;
        left: -55px;
        animation-name: contSlashMob;
    }

    .poliHeadTxt:before {
        height: 150%;
        top: 60px;
        width: 100%;
        left: 130px;
        animation-name: poliSlashMob;
    }

    .valueHeadTxt2 :before {
        height: 250%;
        top: 0px;
        width: 100%;
        left: -80px;
        animation-name: aboutSlashMob;
    }

    .aboutHeadTxt2 :before {
        height: 250%;
        top: 0px;
        width: 100%;
        left: -80px;
        animation-name: aboutSlashMob;
    }

    .mapPad {
        padding-top: 0px !important;
        padding-bottom: 5% !important;
        padding-left: 0% !important;
        padding-right: 0% !important;
    }

    .pcHide2 {
        display: block;
    }

    .mobHide2 {
        display: none;
    }

}

@media only screen and (max-width: 450px) and (min-height: 900px) {}

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

@media only screen and (max-width: 400px) and (min-height: 800px) {}