:root {
    --header-bg: rgb(255, 255, 255);
    --text-def: rgb(37, 37, 37);
    --co-blue: #1E73BE;
    --st-red: #dd3333;
    --transparent:  rgba(255, 255, 255, 0);
}

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-def);
}

.container {
    max-width: 1170px;
    margin: auto;
    padding: 0 10px;
}

.flex {
    display: flex;
    flex-direction: column;
    
}

.center {
    justify-content: center;
    align-items: center;
}

.p-center {
    text-align: center;
    padding-bottom: 2em;
}

.ghwg, .gw, .ghsc, .g-ab, .g-co, .g-co2, .g-co3, .g-pr-ma, .g-pr-vid, .gf, .g-whelp {
    display: grid;
    grid-gap: 1em;
}

.g-ss, .g-cs {
    display: grid;
    grid-gap: 1em;
}

h1 {
    font-size: 3em;
    font-weight: 300;
}



h3 {
    font-size: 1.3em;
    font-weight: 500;
    text-transform: uppercase;
}

.read-more {
    display: none;
    font-size: 1.3em;
    color: #fff;
    background: #dd3333;
    padding: .4em;
}

.it-g-ss:hover > .read-more {
    display: block;
    position: relative;
    text-align: center;

}

span > .bold {
    font-weight: 500;
}

.p-text p {
    padding-bottom: 1em;
}

.padding-top-50px {
    padding-top: 50px;
}

.padding-bot-50px {
    padding-bottom: 50px;

}

/* cookie start */
.cookie-container {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: #272727;
    color: #fff;
    padding: 5px 30px;
}

.cookie-container.active {
    bottom: 0;
}

.cookie-btn {
    background: #dd3333;
    color: #fafafa;
    border: 0;
    width: auto;
    border-radius: 10px;
    padding: 7px 15px;
    margin: 5px 0;

}

/* cookeie end */

/* home hero START */

.vh90 {
    height: 90vh;
}

.h-hero {
    background: 
        linear-gradient(rgba(58, 58, 58, 0.5), rgba(58, 58, 58, 0.5)), 
        url(../images/home/h-hero.jpg)
        center;
    background-size: cover; 
        
}

.h1-hero {
    color: #fff;
    font-size: clamp(3rem, 4.5vw, 4rem);
    text-align: center;
 
}

.p-hero {
    font-size: clamp(1.5rem, 2vw, 1.8rem); 
    text-transform: uppercase;
    padding-top: 1rem;
    text-align: center;
    font-weight: 300;
    color: #ffffff;
}

a {
    text-decoration: none;
}

.g-home-hero-trans {
    display: grid;
    grid-template-columns: 3fr 1fr;
    height: 90vh;
}

.h-hero-trans {
    height: 90vh;
    background:
    url(../images/home/h-hero-trans.jpg) no-repeat 50% 0%;
    background-size: cover;
    box-shadow: 0px 15px 10px -15px rgba(17, 17, 17, 0.541);

}

.it-g-home-hero-trans {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -100px
}

.h1-hero-trans {
    font-size: 4em;
    font-weight: 700;
    padding-bottom: .5em;
    text-transform: uppercase;

}

.h1-hero-trans span {
    font-size: .9em;
    font-weight: 100;
    color: rgba(61, 61, 61, 0.836);
}

.p-hero-trans {
    font-size: 2em;
    text-transform: uppercase;
    color: #26C7CC;
}

.a-hero-trans {
    padding: 1em;
    background: #dd3333;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 3px;
}

.a-hero-trans:hover {
    background: rgba(255, 255, 255, 0.452);
    color:  #dd3333 ;
    border: 3px solid  #dd3333;
}

.btn-wrap {
    padding-top: 4em;
}


/* home hero END */

/* home why to choose Gestra START */

.h2-hp {
    font-size: 2.5em;
    font-weight: 400;
    text-transform: uppercase;
    color: #dd3333;
    padding-top: 1em;
    text-align: center;
}

.sub-h2 {
    padding: 1em 0 2.5em 0;
    text-align: center;
}

.h-why-G {
    padding: 2rem 0 5rem 0;
}

.ghwg {
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
}

.it-ghwg-img {
    grid-area: span 2 / span 1;
    display: flex;
}

.it-ghwg > h3 {
        font-weight: 600;
        padding-bottom: .5em;
}

/* home why to choose Gestra END */

/* home stone or concrete START */

.h-st-co {
    padding: 150px 0;
    background:
    linear-gradient(rgba(35, 35, 35, 0.45), rgba(35, 35, 35, 0.45)),
    url(../images/home/svareni.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0px 15px 10px -15px rgba(17, 17, 17, 0.541), 0px -15px 10px -15px rgba(17, 17, 17, 0.541);
}


.ghsc {
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    grid-gap: 10em;
}

.it-ghsc {
    min-height: 250px;
    color: var(--text-def);
    background-color: rgba(255, 255, 255, 0.637);
    text-align: center;
}

.it-ghsc > h3 {
    font-size: 2em;
    font-weight: 600;
}

.st {
    color: rgb(22, 22, 22) ;
}

.st:hover {
    background: var(--st-red);
    background-size: cover;
    text-align: center;
    transition-duration: 300ms;
    color: #fff;
}


.co {
    color: rgb(22, 22, 22) ;
}

.co:hover {
    background: var(--co-blue);
    background-size: cover;
    text-align: center;
    transition-duration: 300ms;
    color: #fff;
}

/* home stone or concrete END */

/* home what can we help you produce START */

.h-what {
    padding: 2rem 0 5rem 0;
}

.gw {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
}

.it-gw {
    min-height: 250px;
    color: rgba(0, 0, 0, 0);
}

.it-gw > h3 {
    font-size: 1.5em;
    font-weight: 200;
    text-align: center;
}

.it-gw:hover {
    color: #fff;
    background: #dd3333;
    transition-duration: 500ms;
    font-size: 1.4em;
}

.it-gw-pav {
    background: url(../images/home/dlazebni-kostky.jpg) center;
    background-size: cover;
}

.it-gw-bui {
    background: url(../images/home/stavebni-kameny.jpg) center;
    background-size: cover;
}

.it-gw-lar {
    background: url(../images/home/velke-kamenne-bloky.jpg) center;
    background-size: cover;
}

.it-gw-saw {
    background: url(../images/home/rezano-stipane-vyrobky.jpg) center;
    background-size: cover;
}

.it-gw-ven {
    background: url(../images/home/obkladove-kameny.jpg) center;
    background-size: cover;
}

.it-gw-con {
    background: url(../images/home/beton.jpg) center;
    background-size: cover;
}

.display-on-hover {
    display: none;
}

/* home what can we help you produce END */

/* home services START */

.h-services {
    background: #F7f7f7;
    box-shadow:0px -15px 10px -15px rgba(17, 17, 17, 0.3);
    padding-bottom: 3em;

}

.g-ser {
    padding: 3em 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-gap: 0.5em;
}

.it-g-ser {
    text-align: center;
    padding: 2em;
    color: #fff;
    font-weight: 400;
    min-height: 200px;
}


.it-g-ser h3 {
    font-weight: 600;
    font-size: 2em;
    padding-bottom: .7em;
}

.hp-top {
    padding-bottom: 1em;
    text-align: center;
    font-size: 2em;
}


.fair {
    background: #DD3333;
}

.fair-t {
    background: url(../images/home/veletrh.jpg) center no-repeat;
    background-size: cover;
}

.tour2 {
    background: #1E73BE;
}

.tour2-t {
    background: url(../images/home/exkurze.jpg) center no-repeat;
    background-size: cover;
}

.deli {
    background: rgb(167, 167, 167);
}

.deli-t {
    background: url(../images/home/expedice.jpeg) center no-repeat;
    background-size: cover;
}

.inst {
    background: #dd3333;
}

.inst-t {
    background: url(../images/home/montaz-s-jerabem.jpg) center no-repeat;
    background-size: cover;
}

.supp {
    background: #1E73BE ;
}

.supp-t {
    background: url(../images/home/servis.jpg) center no-repeat;
    background-size: cover;
}


.g-ser-l {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 1em;
    padding-top: 1em;
}

.g-ser-r {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em;
    padding-top: 1em;
}


/* home services END */

/* HOME PAGE END !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* pg title START*/

.pg-tit {
    font-size: 2.3em;
    padding: 1em 0;
    color: white;
    text-transform: uppercase;
}

.pg-title {
    padding: 53px 0 0 0;
    box-shadow: 0px 15px 15px -15px rgba(17, 17, 17, 0.541);
}

/* pg title END*/

/* Stone splitting pg - START*/

.ss {
    background-color: #dd3333;
}

.ss-text {
    padding: 3em 0;
}

/* Stone splitting - products grid - START*/

.g-ss {
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    padding: 1em 0;
}

.ss-products {
    padding: 2em 0;
}

.it-g-ss {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 200px;
    padding: 10px;
    color: #fff;
}

.it-g-ss:hover {
    color: rgba(255, 255, 255, 0);
}

.it-g-ss-lar {
    background: #1E73BE;

}

.it-g-ss-lar:hover {
    background: url(..//images/stone-splitting/SLP.png) no-repeat center;
    background-size: contain;
}

.it-g-ss-pav {
    background: #A7A7A7;

}

.it-g-ss-pav:hover {
    background: url(..//images/stone-splitting/HSM.png) no-repeat center;
    background-size: contain;
}

.it-g-ss-pal {
    background: #1E73BE;

}

.it-g-ss-pal:hover {
    background: url(..//images/stone-splitting/SLG13.png) no-repeat center;
    background-size: contain;
}

.it-g-ss-bui {
    background: #dd3333;
    grid-area: span 1 / span 3;

}

.it-g-ss-bui:hover {
    background: url(..//images/stone-splitting/SLG.png) no-repeat center;
    background-size: contain;
}

.it-g-ss-cut {
    background: #A7A7A7;

}

.it-g-ss-cut:hover {
    background: url(..//images/stone-splitting/SLD.png) no-repeat center;
    background-size: contain;
}

.it-g-ss-mas {
    background: #1E73BE;

}

.it-g-ss-mas:hover {
    background: url(..//images/stone-splitting/SHS.png) no-repeat center;
    background-size: contain;
}

.it-g-ss-lay {
    background: #A7A7A7;

}

.it-g-ss-lay:hover {
    background: url(..//images/stone-splitting/SLH.png) no-repeat center;
    background-size: contain;
}

.it-g-ss-man {
    background: #dd3333;

}

.it-g-ss-man:hover {
    background: url(..//images/stone-splitting/manipulator-MO2.png) no-repeat center;
    background-size: contain;
}

.it-g-ss-con {
    background: #A7A7A7;

}

.it-g-ss-con:hover {
    background: url(..//images/stone-splitting/conveyor-DTJN.png) no-repeat center;
    background-size: contain;
}

.it-g-ss-acc {
    background: #dd3333;

}

.it-g-ss-acc:hover {
    background: url(..//images/stone-splitting/container.png) no-repeat center;
    background-size: contain;
}

/* Stone splitting - products grid - START*/

/* Stone splitting pg - END*/


/* Concrete splitting pg - START*/

.cs {
    background-color: #1E73BE;
}

.cs-top {
    padding: 2em 0;
    text-align: center;
    font-size: 2em;
}

.bg-light-grey, .ab-quo {
    background-color: #ebebeb;
    padding: 1em;
}

.bg-light-grey > h2 {
    color: #1E73BE;
    padding: .5em 0 .3em 0;
}

.bg-light-grey > ul {
    list-style-position: inside;
}

.g-cs {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    min-height: 250px;
    padding: 2em 0;
}

.cs-products {
    padding: 2em 0;
}

.it-g-cs {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 200px;
    padding: 10px;
    color: #fff;
}

.it-g-cs:hover {
    color: rgba(255, 255, 255, 0);
}

.it-g-cs-semi {
    background: #1E73BE;

}

.it-g-cs-semi:hover {
    background: url(..//images/concrete-splitting/SLB-semi-automatic.jpg) no-repeat center;
    background-size: contain;
}

.it-g-cs-fully {
    background: #1E73BE;

}

.it-g-cs-fully:hover {
    background: url(..//images/concrete-splitting/SLB-fully-automatic.jpg) no-repeat center;
    background-size: contain;
}

.it-g-cs-special {
    background: #1E73BE;

}

.it-g-cs-special:hover {
    background: url(..//images/concrete-splitting/SLB-specialjpg.jpg) no-repeat center;
    background-size: contain;
}

.it-g-cs-roughing {
    background: #1E73BE;

}

.it-g-cs-roughing:hover {
    background: url(..//images/concrete-splitting/SLB-artificail-ageingjpg.jpg) no-repeat center;
    background-size: contain;
}



/* Concrete splitting pg - END*/

/* About us pg - START */

.ab {
    background-color: #dd3333;
}

.g-ab {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 2em 0;
}

.it-g-ab >h2 {
    color: #dd3333;
    font-weight: 500;
    padding: 0 0 .5em 0;
}

.ab-top {
    padding: 2em 0 1em 0;
}

.ab-text {
    padding: 2em 0;
}

.ab-quo {
    padding: 2em 0;
}

.g-guo {
    display: grid;
    grid-template-columns: 8fr 2fr;
    grid-gap: 1em;
}

.guo-img {
    background-size: cover;
    min-height: 200px;
}

.quote {
    font-size: 1.8rem;
}


.position {
    font-size: 1.3rem;
    padding: 1em 0;;
}

.ab-img-mv {
    max-height: 200px;
}

/* About us pg - END */


/* Contact us pg - START */

.contact {
    background: #1E73BE;
}

.co-details {
    padding: 4em 0;
}

.g-co {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
}

.g-co2 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
}

.it-g-co {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.co-regi {
    text-align: center;
    padding-top: 2em;
}

.it-g-co2 {
    text-align: center;
}

.it-g-co2 > h2  {
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 1em;
}

.it-g-co2 > p {
    line-height: 1.7em;
}

.g-co3 {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    padding: 2em 0;
}

.it-g-co3 {
    text-align: center;
    justify-content: center;
    align-items: center;
    padding-top: 4em;
}

.co-form {
    padding: 3em 0;
    box-shadow: 0px 15px 10px -15px rgba(17, 17, 17, 0.541), 0px -15px 10px -15px rgba(17, 17, 17, 0.541);
}

.c-g-form {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr;
    padding: 2em;
}

.c-g-form-it > input, textarea, button {
    display: inline-block;
    width: 100%;
    font-size: 18px;
    font-weight: 300;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-top: 1em;
}

.c-g-form-it > input, textarea {
    border: none;
    border-bottom: 2px solid grey;
}

.c-g-form-it > button {
    border: none;
    background: #DD3333;
    padding: 1em;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px;
}

.c-g-form-it > button:hover {
    background: #1E73BE;
    color: #fff;
}

.c-g-form-it p {
    text-align: center;
}


.full-width {
    grid-area: auto / auto / auto / span 2;
}

.con-foto {
    min-height: 200px;
    min-width: 200px;
    padding: 1em 0;
}

.MV {
    background: url(../images/about-us/MV.jpg) no-repeat;
    background-size: contain;
}

.RC {
    background: url(../images/about-us/RC.jpg) no-repeat;
    background-size: contain;
}

.MK {
    background: url(../images/about-us/MK.jpg) no-repeat;
    background-size: contain;
}

.LC {
    background: url(../images/about-us/LC.jpg) no-repeat;
    background-size: contain;
}


/* Contact us pg - END */


/* Products page - START */

#hero-vid {
    height: 80vh;
    width: 100%;
    background:  
    linear-gradient(rgba(58, 58, 58, 0.7), rgba(58, 58, 58, 0.7));
    background-size: cover;
    display: flex;
    align-content: center;
}

#hero-vid::after {
    height: 80vh;
    width: 100%;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10;
}

#hero-vid video {
    width: 100%;
    height: 80vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    object-fit: cover;
}

#hero-vid .caption {
    position: relative;
    z-index: 20;
}

.lar {
    background: 
        url(../images/stone-splitting/SLP/SLP-main.jpg) no-repeat center;
    background-size: cover;
}

.pam {
    background: 
    url(../images/stone-splitting/HSM/HSM-main.jpg) no-repeat center;
    background-size: cover;
}

.pal {
    background: 
    url(../images/stone-splitting/SLG+/SLG+-main.jpg) no-repeat center;
    background-size: cover;
}

.bui {
    background: 
    url(../images/stone-splitting/SLG/slg-main.jpg) no-repeat center;
    background-size: cover;
}

.cut {
    background: 
    url(../images/stone-splitting/SLD/SLD-main.jpg) no-repeat center;
    background-size: cover;
}

.stm {
    background: 
    url(../images/stone-splitting/SHS/SHS-main.jpg) no-repeat center;
    background-size: cover;
}

.lay {
    background: 
    url(../images/stone-splitting/SLH/SLH-main.jpg) no-repeat center;
    background-size: cover;
}

.slb-auto {
    background: 
    url(../images/concrete-splitting/SLB-auto/slb-auto-main.jpg) no-repeat center;
    background-size: cover;
    min-height: 400px;
}

.slb-semi {
    background: 
    url(../images/concrete-splitting/SLB-semi/slb-semi-main.jpg) no-repeat center;
    background-size: cover;
    min-height: 400px;
}

.slb-non {
    background: 
    url(../images/concrete-splitting/SLB-non/slb-non-main.jpg) no-repeat center;
    background-size: cover;
    min-height: 400px;
}

.slb-rou {
    background: 
    url(../images/concrete-splitting/SLB-rou/slb-rou-main.jpg) no-repeat center;
    background-size: cover;
    min-height: 400px;
}


.h1-product {
    color: #fff;
    font-size: clamp(3rem, 4.5vw, 4rem);
    text-align: center;
    text-transform: uppercase;
}

.pr-ma {
    padding: 5em 0;
}

.g-pr-ma {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr ))
}

.it-g-pr-ma > h2 {
    color: #dd3333;
    text-transform: uppercase;
    font-size: 2em;
}

.it-g-pr-ma > ul {
    list-style: none;
}

.it-g-pr-ma > ul > li {
    padding: .5em 0;
    font-size: 1.2em;
    font-weight: 500;
}

.pr-text {
    padding: 0 0 2em 0;
}

.pr-text-p > p {
    padding: 1em 0;
    line-height: 1.7em;
}

.pr-vid {
    padding: 5em 0;
    box-shadow: 0px -15px 15px -15px rgba(17, 17, 17, 0.541);
}

.g-pr-vid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
}

.pr-gal {
    padding-top: 70px;
}

.pr-gallery {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
}

.pr-vid, .pr-gal {
    background: #ececec;
}

/* Products page - END */

/* MCA page start */

.p-cont p {
    padding: .5em 0;
}

.mca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    grid-gap: .5em;
    padding: .5em;
}

.it-mca {
    text-align: center;
    padding: 1em;
    min-height: 280px;
    color: #fff;
}

.it-mca h2 {
    padding-bottom: 1em;
}

.mk {
    background: #DD3333;
}

.mk:hover {
    background: url(../images/stone-splitting/manipulators/MK-manipulator.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.mo {
    background: #575757;
}

.mo:hover {
    background: url(../images/stone-splitting/manipulators/MO-manipulator.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);

}

.mp {
    background: #1E73BE;
}

.mp:hover {
    background: url(../images/stone-splitting/manipulators/MP-manipulator.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);

}

.dtjn {
    background: #DD3333;
}

.dtjn:hover {
    background: url(../images/stone-splitting/conveyors/DTJN.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.ron {
    background: #575757;
}

.ron:hover {
    background: url(../images/stone-splitting/conveyors/RON.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.dpu {
    background: #1E73BE;
}

.dpu:hover {
    background: url(../images/stone-splitting/conveyors/DPU.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.doo {
    background: #575757;
}

.doo:hover {
    background: url(../images/stone-splitting/conveyors/DOG.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.dog {
    background: #1E73BE;
}

.dog:hover {
    background: url(../images/stone-splitting/conveyors/DOG.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.kra {
    background: #DD3333;
}

.kra:hover {
    background: url(../images/stone-splitting/conveyors/KRA.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}


.cont {
    background: #DD3333;
}

.cont:hover {
    background: url(../images/stone-splitting/accessories/cont.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.pede {
    background: #575757;
}

.pede:hover {
    background: url(../images/stone-splitting/accessories/pede.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.push {
    background: #1E73BE;
}

.push:hover {
    background: url(../images/stone-splitting/accessories/push.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.tipp {
    background: #575757;
}

.tipp:hover {
    background: url(../images/stone-splitting/accessories/tipp.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.slid {
    background: #1E73BE;
}

.slid:hover {
    background: url(../images/stone-splitting/accessories/slid.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.cros {
    background: #DD3333;
}

.cros:hover {
    background: url(../images/stone-splitting/accessories/cros.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.hopp {
    background: #DD3333;
}

.hopp:hover {
    background: url(../images/stone-splitting/accessories/hopp.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);
}

.spil {
    background: #575757;
}

.spil:hover {
    background: url(../images/stone-splitting/accessories/spil.png) no-repeat center;
    background-position: cover;
    color: rgba(255, 255, 255, 0);

}

/* MCA page end */

/* thin veneer saws start */

.g-vs, .g-vs2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(49%, 1fr));
    grid-gap: 1em;
    padding: 2em 0;
}

.thin-img {
    margin: auto;
}

.vs-h2 {
    padding-top: 2em;
}

.vs-p-top {
    padding: 3em 0;
}

.vs-p-pad-20px {
    padding-top: 15px;
}

/* thin veneer saws end */


.VOP {
    padding: 5em 0;
}

/* navbar - START ///// */

header {
    background: var(--header-bg);
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 999;
    box-shadow: 0px 15px 15px -15px rgba(17, 17, 17, 0.541);
}

.nav-logo-img {
    max-height: 30px;
    margin: 1em 0;
}

.nav-toggle {
    display: none;
}

.nav-toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 1em;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    background: rgb(26, 26, 26);
    height: 2px;
    width: 2em;
    border-radius: 2px;
    position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: '';
    position: absolute;
}

.nav-toggle-label span::before {
    bottom: 7px;
}

.nav-toggle-label span::after {
    top: 7px;
}

nav {
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0;
    background: var(--header-bg);
    width: 100%;
    transform: scale(1, 0);
    transform-origin: top;
    transition:  transform 400ms ease-in-out;
    overflow-y: auto;
    height: 100vh;

}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    padding: 1em;
    }

nav a {
    color: rgb(26, 26, 26);
    text-decoration: none;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

nav a:hover {
    color: #000;
}


.nav-toggle:checked ~ nav {
    transform: scale(1, 1)
}

.nav-toggle:checked ~ nav a {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
}

nav a:active {
    color: #dd3333;
}

nav a:hover {
    color: #dd3333;
}



.sub-menu {
    background: #f3f3f3;
    margin-top: .5em;
}



/* NAVBAR END */

/* language select START */

.banner {
    position: absolute;
    background: rgba(255, 255, 255);
    text-align: center;
    box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.5);
    padding: 0.5em 1em;
    border-radius: 3px;
    bottom: 7vh;
    right:  5vw;

}

.lang-banner-p {
    font-weight: 400;
    color: #212121;
    font-size: 1.2em;

}

.lang-banner-a {
    color: #212121;
    font-weight: 400;
    padding-left: 5px;
    font-size: 1.2em;
    display: flex;
    flex-direction: column;
}

.lang-img {
    padding: 10px 0 20px 0;
    max-width: 130px;
    margin: auto;
}

/* language select END */


/* footer start */

.we-help {
    background: #4b7080;
    box-shadow: 0px 15px 15px -15px rgba(17, 17, 17, 0.541), 0px -15px 15px -15px rgba(17, 17, 17, 0.541);
}

.g-whelp {
    grid-template-columns: 8fr 2fr;
    padding: 2em 0;
}

.we-help p {
    font-size: clamp(2rem, 2.5vw, 2.5rem);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.we-help .button {
    background: none;
    border: 3px solid #26C7CC;
}

.we-help .button:hover {
    background: #26C7CC;
    border: 3px solid #26C7CC;
}

.we-help a {
    color: #26C7CC;
    font-size: 1.2em;
    font-weight: 400;
    padding: 10px;
}

.we-help a:hover {
    color: #fff;
}

.fot-a {
    background: #F2F2F2;
    padding: 3em 0 2em 0;
    color: #616161;
}

.gf {
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
}

footer h2 {
    padding-bottom: 1em;
    color: #dd3333;
    font-weight: 400;
    text-transform: uppercase;
}

footer h3 {
    font-size: 1em;
}

.f-con p {
    padding: 0 0 1em 0;
    font-size: 0.8em;
    padding-top: 0.2em;
}

.f-con img {
padding-top: 0.2em;
}

.f-trades img {
    padding-bottom: 1em;
}

.f-machinery ul {
    list-style: none;
    text-decoration: none;
    padding-bottom: .5em;

}

.f-machinery a {
    color: #616161;
    font-size: 0.8em;
    padding-top: 0.2em;
}

.f-machinery a:hover {
    color: #dd3333;
}

.fot-b {
    padding: 1em 0;
    background: #ccc;
}

.fot-b p {
    color: #616161;
}


/* footer end */

/* youtube embed START */
.embed-container { 
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
    
.embed-container iframe, .embed-container video, .embed-container object, .embed-container embed { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* youtube embed END */

/* VOP podm9nky */

.vop {
    color: #F2F2F2;
}

.vop > a {
    color: #dd3333;
}

@media screen and (min-width: 950px) {
    .nav-toggle-label {
        display: none;
    }

    .hea-cont {
        max-width: 1170px;
        margin: auto;
        display: grid;
        grid-template-columns: auto minmax(600px, 1fr);
    }

    .logo {
        grid-column:  1 / span 1;
    }
    
    nav {
        all: unset;
        grid-column: 2 / 3;
        display: flex;
        justify-content:  flex-end;
        align-items: center;
        position: static;
        transform: none;
        height: auto;
    }

    nav ul {
        display: flex;
    }

    nav li {
        padding: 1em .35em;
        margin-left: .5em;
        margin-bottom: 0;
    }

    nav a {
        opacity: 1;
        font-size: 1rem;
    }

    .nav-logo-img {
        max-height: 40px;
        margin: .6rem;
    }

    .sub-menu {
        display: none;
        padding-top: 10px;   
    }
    
    .sub-start:hover .sub-menu {
        display: block;
        position: absolute;
        background: var(--header-bg);
        margin-top: 0px;
        margin-left: -15px;
        margin: .1em 0;
    }
    
    .sub-start:hover .sub-menu ul {
        display: block;
    }
    
    .sub-start:hover .sub-menu ul li {
        width: 280px;
        padding: 10px;
        text-align: left;
    }
}


@media screen and (max-width: 950px) {
    .it-g-ss-bui {
        grid-area: span 1 / span 1;
    }

    .g-whelp {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .g-ser, .g-cs {
        grid-template-columns: 1fr, 1fr;
    }

    .g-home-hero-trans {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .it-g-home-hero-trans {
        margin-top: 0;
    }
}


@media screen and (max-width: 768px) {
    .g-guo {
        grid-template-columns: 1fr;
        grid-gap: .2em;
    }

    .ghsc {
        grid-gap: 2em;
    }

    .g-ser, .g-cs {
        grid-template-columns: 1fr;
    }

    .tour {
        grid-area: span 1;
    }

    .g-ser-l, .g-ser-r {
        grid-template-columns: 1fr;
    }

    .h1-hero-trans {
        font-size: 3em;
    }

    .h1-hero-trans span {
        font-weight: 400;
    }

    .p-hero-trans {
        font-size: 1.6em;
    }

    .h-hero-trans {
        background: 
        linear-gradient(rgb(255, 255, 255, .8), rgb(255, 255, 255, .8)),
        url(../images/home/h-hero-trans.jpg) no-repeat 70% 0%
    }

    .g-co3 {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
    }

    .gw, .g-ss, .g-cs {
        grid-template-columns: 1fr 1fr;
    }

    .it-gw {
        min-height: 180px;
    }

    .h2-hp {
        font-size: 1.8em;
    }

    .mca-grid {
        grid-template-columns: 1fr 1fr;
    }

    .g-pr-vid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
    }
    

}

@media screen and (max-width: 425px) {
    .c-g-form {
        grid-template-columns: 1fr;
    }

    .full-width {
        grid-area: span 1;
    }

    .mca-grid {
        grid-template-columns: 1fr;
    }

    .h1-hero-trans {
        font-size: 2em;
    }

    .p-hero-trans {
        font-size: 1.2em;
    }

    .it-g-ser h3 {
        font-size: 1.3em;
    }

    .it-gw > h3 {
        font-size: 1.2em;
    }

    .it-g-ss, .it-g-cs > h2 {
        font-size: .8em;
        font-weight: 200;
    
    }

    .h1-product {
        font-size: 2.2em;
    }

    .g-co2 {
        grid-template-columns: 1fr;
    }


}