@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap');
@font-face {
    font-family: 'Creo';
    src: url('font/Creo-ExtraBold.eot');
    src: url('font/Creo-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('font/Creo-ExtraBold.woff2') format('woff2'),
        url('font/Creo-ExtraBold.woff') format('woff'),
        url('font/Creo-ExtraBold.ttf') format('truetype'),
        url('font/Creo-ExtraBold.svg#Creo-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Creo';
    src: url('font/Creo-Light.eot');
    src: url('font/Creo-Light.eot?#iefix') format('embedded-opentype'),
        url('font/Creo-Light.woff2') format('woff2'),
        url('font/Creo-Light.woff') format('woff'),
        url('font/Creo-Light.ttf') format('truetype'),
        url('font/Creo-Light.svg#Creo-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Creo';
    src: url('font/Creo-Thin.eot');
    src: url('font/Creo-Thin.eot?#iefix') format('embedded-opentype'),
        url('font/Creo-Thin.woff2') format('woff2'),
        url('font/Creo-Thin.woff') format('woff'),
        url('font/Creo-Thin.ttf') format('truetype'),
        url('font/Creo-Thin.svg#Creo-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

 :root {
    --lgreen: #76BC21;
    --dgreen: #007853;
    --lgreen-rgb: 118,188,33;
    --dgreen-rgb: 0,120,83;
    --gray: #c2c2c2;
    --blue: #007BC4;

    --nav-height: 180px;
    --footer-height: 56px;
}

#sz2020 {position:fixed;right:-1rem;bottom:-1rem;z-index:9999}

/* basics */
body {font-family: 'Montserrat', sans-serif;color: var(--dgreen)}
body.skyline {color: black;font-family: 'Creo';font-weight: 300;}
main.greenline {
    background:url('imgs/bg.png');
    background-repeat:repeat-y;
    background-size:100% auto;
}
.gekko {
    position:absolute;
    z-index:-1;
    top:-16%;
    left:-6%;
    opacity:.15
}
a, a:link, a:visited {color: var(--lgreen)}
a:hover, a.active {color: var(--dgreen)}
a.rev, a.rev:link, a.rev:visited {color: var(--dgreen)}
a.rev:hover, a.rev.active {color: var(--lgreen)}
.d-grid {display: grid}
small {font-weight: 300!important}
.skyline small {font-weight: 100!important}

/* color */
.bg-dgreen {background-color: var(--dgreen)}
.bg-lgreen {background-color: var(--lgreen)}
.bg-black {background-color: black}
.text-dgreen {color: var(--dgreen)!important}
.text-lgreen {color: var(--lgreen)!important}
.text-gray {color: var(--gray)!important}
a.text-gray, a.text-gray:link, a.text-gray:visited {color: var(--gray)!important}
a.text-gray:hover, a.text-gray.active {color: white!important}
.btn-transparent {
    color: var(--dgreen)!important;
    background-color: transparent;
    border: 0 none
}
.btn-transparent path {fill: var(--dgreen)}
.btn-transparent:hover, .btn-transparent.active {
    color: var(--dgreen)!important;
    background-color: var(--lgreen);
    border: 0 none
}
.btn-lgreen {
    color: white!important;
    background-color: var(--lgreen);
    border-color: var(--lgreen)
}
.btn-lgreen path {fill: white}
.btn-lgreen:hover, .btn-lgreen.active {
    color: white!important;
    background-color: var(--dgreen);
    border-color: var(--dgreen)
}
.btn-white {
    color: black!important;
    background-color: white;
    border-color: white
}
.btn-white path {fill: black}
.btn-white:hover, .btn-white.active {
    color: gray!important;
    background-color: white;
    border-color: white
}

.badge-lgreen {
    background-color: var(--lgreen);
    color: white;
}
.skyline .text-danger {color: white!important}
.skyline .text-muted {color: var(--gray)!important}

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

/* skyline */
#slogo, #sdrone, #sline {width: 300px}
#sline {height: 50vh;overflow: hidden}
#sline svg {width: 300px;height: auto}
#slogo {
    position: relative;
    height: 60vh;
    margin: 0 auto;
}
#sdrone {position: absolute;top: calc(30vh - 88px)}
#sline, #line-left {
    position: fixed;
    top: 0;
    z-index: -1
}
#line-left {width: 50px;height: 80vh;overflow: hidden;margin-left:100px;}
#line-left svg {width: 50px;height: auto}
.skyline main ul, .skyline main ol {padding-left:1rem;margin-left:100px;}
.skyline main ul svg, .skyline main ol svg {
    width: 2.5rem;
    height: auto;
    display: inline-block;
    margin-left: -4rem;
    margin-right: 1.5rem;
    vertical-align: top;
}
.skyline main ul li, .skyline main ol li {
    list-style: none;
    padding: 0 0 0 2rem;
    margin: 0 0 1rem -1.5rem;
}
.skyline main li span {
    display: inline-block;
    margin-top: .5rem;
}
.skyline .btn-field {position:relative}
.skyline .btn-field > div {position:absolute;bottom:1rem;}

/* navbar */
.navbar a.dropdown-item, .navbar a.dropdown-item:link, .navbar a.dropdown-item:visited {color: var(--dgreen)!important}
.navbar a.dropdown-item:hover {color: var(--lgreen)!important}
.navbar a {transition: all .7s}
.navbar .dropdown-menu {border-color: var(--dgreen)}
.navbar .dropdown-item:hover {background: rgba(var(--dgreen-rgb),.2)}
.navbar-brand svg {width: 200px;height:auto}

/* font */
.font-weight-100 {font-weight: 100}
.font-weight-700 {font-weight: 700}
.font-weight-800 {font-weight: 800}
.ls-1 {letter-spacing:.1rem}
.fs-0 {font-size: 0!important}
.fs-2 {font-size: 1rem!important}
.fs-3 {font-size: 1.25rem!important}
.article-text h2 {font-size: 1.5rem!important}
.fs-4 {font-size: 1.625rem!important}
.fs-5 {font-size: 2rem!important}
.fs-6 {font-size: 3rem!important}

/* liana */
#liana {opacity: .2}
#liana path {fill:var(--lgreen);stroke:var(--lgreen)!important}

/* side buttons */
body.default #skyline-side-btn, body.default #greenline-side-btn, body.default #solar-invest-side-btn {opacity:0}

/* main */
.default .navbar-brand {display: none}
.logo-div {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.logo-div {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.leadnode svg {width: 100%!important;height: auto!important}
#contact-lead-svg {height:45vh!important;width: auto!important}
/*#streetl-lead-svg {height:55vh!important;width: auto!important}*/
#emobility-lead-svg {height:65vh!important;width: auto!important}
#blogf-lead-svg {height:65vh!important;width: auto!important}

/* article */
body.article .container > .row {padding-bottom: 12rem}
.article-text h2 {
    padding-top: 3rem;
    padding-bottom: 1rem;
    font-weight: 700
}

/* 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;
}

/* button */
.bounce {
  animation: bounce 0.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

.pager {padding-bottom:3rem;}
.pager .page-link.active {background-color:var(--dgreen);color:white}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 32px, 0); }
}

@media screen and (max-width:1199px){
    #line-left, .skyline main ul, .skyline main ol {margin-left:64px}
}

@media screen and (max-width:768px){
    #line-left, .skyline main ul, .skyline main ol {margin-left:32px}
    .skyline main ul li, .skyline main ol li {margin-left: 0}
    .skyline .btn-field > div {position:relative;}
}

@media screen and (max-width:480px){
    .fs-2 {font-size: .875rem!important}
    .fs-3 {font-size: 1rem!important}
    .fs-4 {font-size: 1.25rem!important}
    .fs-5 {font-size: 1.5rem!important}
    .fs-6 {font-size: 1.75rem!important}
    .article-text h2 {font-size: 1.25rem}
    #liana path#inda {stroke-width:4px!important}
    #line-left, .skyline main ul, .skyline main ol {margin-left:0}
}

@media (max-width: 480px) and (orientation:portrait) {
    .logo-div {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .gekko {
        top:-8%;
    }
    #emobility-lead-svg {height:auto!important;width: 100%!important}
    #blogf-lead-svg {height:auto!important;width: 100%!important}
}

@media (max-width: 768px) and (orientation:landscape) {
    .ln-svg svg {height:60vh!important;width:auto!important}
}