@font-face {
    font-family: 'BebasNeue';
    src: url('font/bebas_neue/BebasNeue-Regular.eot'); /* IE9 Compat Modes */
    src: url('font/bebas_neue/BebasNeue-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('font/bebas_neue/BebasNeue-Regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('font/bebas_neue/BebasNeue-Regular.woff') format('woff'), /* Pretty Modern Browsers */
        url('font/bebas_neue/BebasNeue-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
    font-family: 'Superclarendon';
    src: url('font/superclarendon/Superclarendon-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
}

:root {
    --szp-green: #99c221; /* rgb(153, 194, 33) */
    --szp-black: #2D2926;
    --szp-white: #fff;
    --szp-green-light: rgba(153, 194, 33, .5);
    --szp-green-alert: rgba(153, 194, 33, .1);
    --szp-black-light: rgba(45, 41, 38, .5);
    --szp-green-secondary: rgba(153, 194, 33, .7);
    --szp-black-secondary: rgba(45, 41, 38, .7);
    --b10: rgba(0, 0, 0, .1);
    --w70: rgba(255, 255, 255, .7);
    --w80: rgba(255, 255, 255, .8);
    --w90: rgba(255, 255, 255, .9);

    --navbar: 57px;
    --navbar-sticky: 170px;
    --navbar-sticky-768: 126px;
    --navbar-sticky-480: 106px;
    --logo-h: 144px;
    --logo-h-768: 100px;
    --logo-h-480: 80px;
}

#product hr {margin-top:0}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--szp-black-light)!important;
    opacity: .5!important; /* Firefox */
}
/* Internet Explorer 10-11 */
:-ms-input-placeholder {color: var(--szp-black-light)!important}
/* Microsoft Edge */
::-ms-input-placeholder {color: var(--szp-black-light)!important}

.alert-szp-green {
    color: var(--szp-green);
    background-color: var(--szp-green-alert);
    border-color: var(--szp-green);
}
.bg-szp-green {background-color: var(--szp-green)}
.bg-szp-black {background-color: var(--szp-black)}

.text-szp-green {color: var(--szp-green)}
.text-szp-black {color: var(--szp-black)!important}
.text-szp-black-light {color: var(--szp-black-light)!important}
.text-b10 {color: var(--b10)}
.text-w70 {color: var(--w70)}

.border-szp-green {border-color: var(--szp-green) !important}
.border-szp-black {border-color: var(--szp-black) !important}

.dropdown-item.text-szp-green:hover {color: var(--szp-green-secondary)}
.dropdown-item.text-szp-black:hover {color: var(--szp-black-secondary)}

.nav-pills .nav-link.active, .badge-szp-green {
    color: var(--szp-white)!important;
    background-color: var(--szp-green);
}

.btn-szp-green {
    color: var(--szp-white);
    background-color: var(--szp-green);
    border-color: var(--szp-green)
}
.btn-szp-green path {fill: var(--szp-white)}
.btn-szp-green:hover {
    color: var(--szp-white);
    background-color: var(--szp-green-secondary);
    border-color: var(--szp-green-secondary)
}
.btn-szp-green.active {
    color: var(--szp-white);
    background-color: var(--szp-black-secondary);
    border-color: var(--szp-black-secondary)
}
.btn-outline-szp-green {
    color: var(--szp-green);
    border-color: var(--szp-green);
}
.btn-outline-szp-green path {fill: var(--szp-green)}
.btn-outline-szp-green:hover {
    color: var(--szp-green-secondary);
    border-color: var(--szp-green-secondary);
}
.btn-outline-szp-green.active {
    color: var(--szp-black);
    border-color: var(--szp-black);
    background-color: var(--szp-green);
}
.btn-szp-black {
    color: var(--szp-green);
    background-color: var(--szp-black);
    border-color: var(--szp-black)
}
.btn-szp-black path {fill: var(--szp-green)}
.btn-szp-black:hover {
    color: var(--szp-green);
    background-color: var(--szp-black-secondary);
    border-color: var(--szp-black-secondary)
}
.btn-outline-szp-black {
    color: var(--szp-black)!important;
    border-color: var(--szp-black);
}
.btn-outline-szp-black path {fill: var(--szp-black)}
.btn-outline-szp-black:hover {
    color: var(--szp-black-secondary)!important;
    border-color: var(--szp-black-secondary);
}
.btn-szp-white {
    color: var(--szp-black)!important;
    background-color: var(--w80);
    border-color: var(--szp-black)
}
.btn-szp-white path {fill: var(--szp-black)}
.btn-szp-white:hover {
    color: var(--szp-black-secondary)!important;
    background-color: var(--w80);
    border-color: var(--szp-black-secondary)
}
.btn-szp-white.active {
    color: var(--szp-green)!important;
    background-color: var(--w80);
    border-color: var(--szp-green)
}
.logo-szp-green path {fill: var(--szp-green)}
.logo-white path, .logo-white circle {fill: white}

a, a:visited, a:link, .btn-link {color: var(--szp-green)}
a:hover, .btn-link:hover {color: var(--szp-green-secondary)}

.qc-cmp2-persistent-link {background:var(--szp-green)!important;border-color:var(--szp-green);color:white!important}

.font-bebas-neue {font-family: 'BebasNeue', sans-serif;}
.font-superclarendon {font-family: 'Superclarendon', Times, serif;}
.fs-1 {font-size: .75rem}
.fs-2 {font-size: 1rem}
.fs-3 {font-size: 1.25rem}
.fs-4 {font-size: 1.5rem}
.fs-5 {font-size: 2rem}
.fs-6 {font-size: 3rem}
.fs-7 {font-size: 4rem}
.fs-8 {font-size: 10rem}
.fs-9 {font-size: 20rem}

.w-height {height:calc(100vh - var(--navbar) - var(--navbar-sticky))}
.w-min-height {min-height:calc(100vh - var(--navbar) - var(--navbar-sticky))}
.w-mt- {margin-top:calc(0px - var(--navbar) - var(--navbar-sticky))}
.w-mt {margin-top:calc(var(--navbar) + var(--navbar-sticky))}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.mt-sticky {margin-top:var(--navbar-sticky)}

.rounded-only-top {border-bottom-left-radius: 0 !important;border-bottom-right-radius: 0 !important}
.rounded-only-right {border-top-left-radius: 0 !important;border-bottom-left-radius: 0 !important}
.rounded-only-bottom {border-top-left-radius: 0 !important;border-top-right-radius: 0 !important}
.rounded-only-left {border-top-right-radius: 0 !important;border-bottom-right-radius: 0 !important}

body {color: var(--szp-black)}
#logo {
    width: auto;
    height: var(--logo-h);
}
.overlay {
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.overlay-w {
    background: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.place-shape.disabled .filled {
    background-color: var(--szp-black) !important;
    opacity: .4;
}

/* carousel */
#carousel .carousel-item {
    height: 400px;
    overflow: hidden;
}
.top-overlay {
    background: rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%) repeat scroll 0% 0%;
    height: 400px;
    z-index: 10;
    transform-origin: 50% 50% 0px;
    transform: rotate(180deg);
}
/* article image */
.article-img, .column-img {
    min-height: 400px;
    overflow: hidden;
}

/* footer */
.partner-logo {display:block;width:160px;height:auto}

/* sector map */
.all-sector h2 {text-align:center;padding:1rem 0;font-weight:bold}
.all-sector > div > div {position:relative}
.all-sector a {display:block;position:absolute;background:transparent;overflow:visible}
.all-sector .hover {display:grid;align-items:center;position:relative;width:100%;height:100%;text-align:center;z-index:1;background-color:var(--szp-black-secondary);color:white;font-size:2rem;opacity:0}
.all-sector .hover.vertical strong {transform:rotate(-90deg);white-space:nowrap;margin-left:-4rem}
.all-sector a:hover .hover {opacity:1}
.place-shape, .sector-svg, .all-sector .sector {position:absolute;font-size:0;overflow:visible}
.sector-svg svg {overflow:visible}
.place-shape > span {display:inline-block;border-color:var(--light)!important}
.fix {width:90%;margin-left:10%;position:relative}

/* google maps */
.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media screen and (max-width:1440px){
    .fs-4 {font-size: 1.25rem}
    .fs-5 {font-size: 2rem}
    .fs-7 {font-size: 4rem}
    .fs-9 {font-size: 15rem}
}
@media screen and (max-width:1024px){
    .fs-4 {font-size: 1.125rem}
    .fs-5 {font-size: 2rem}
    .fs-7 {font-size: 3rem}
    .fs-9 {font-size: 14rem}
    .navbar .hide {display: none}
}
@media screen and (max-width:768px){
    .fs-5 {font-size:1.5rem}
    .fs-7 {font-size: 2.5rem}
    .fs-9 {font-size: 12rem}
    #logo {height: var(--logo-h-768)}
    .w-height {height:calc(100vh - var(--navbar) - var(--navbar-sticky-768))}
    .w-min-height {min-height:calc(100vh - var(--navbar) - var(--navbar-sticky-768))}
    .w-mt- {margin-top:calc(0px - var(--navbar) - var(--navbar-sticky-768))}
    .w-mt {margin-top:calc(var(--navbar) + var(--navbar-sticky-768))}
    .mt-sticky {margin-top:var(--navbar-sticky-768)}
    #carousel .carousel-item,
    .top-overlay {height: 300px}
    .article-img, .column-img {min-height: 300px}
}
@media screen and (max-width:480px){
    .fs-5 {font-size: 1.5rem}
    .fs-7 {font-size: 2rem}
    .fs-9 {font-size: 10rem}
    #logo {height: var(--logo-h-480)}
    .w-height {height:calc(100vh - var(--navbar) - var(--navbar-sticky-480))}
    .w-min-height {min-height:calc(100vh - var(--navbar) - var(--navbar-sticky-480))}
    .w-mt- {margin-top:calc(0px - var(--navbar) - var(--navbar-sticky-480))}
    .w-mt {margin-top:calc(var(--navbar) + var(--navbar-sticky-480))}
    .mt-sticky {margin-top:var(--navbar-sticky-480)}
    #carousel .carousel-item {height: 200px}
    .article-img, .column-img {min-height: 250px}
    .top-overlay {
        background: rgba(255, 255, 255, .8);
        height: 200px}
    footer .container {padding-bottom:150px;}
}