@charset "utf-8 ";
html{height:100%;}
body{font-family: "Syne Mono",sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal;font-size:0.8em;margin:0;padding:0;color:rgb(127, 134, 132);}
body{background: linear-gradient(to right, rgba(64, 85, 84, 0.2)),linear-gradient(to right, rgba(54, 59, 57, 0.92), rgba(68, 75, 75, 0.79), rgba(68, 75, 75, 0.79),rgba(68, 75, 75, 0.79),rgba(54, 59, 57, 0.92)),repeating-linear-gradient(to bottom,rgba(137,90,67,0.46) 0px,rgba(194,118,94,0.44) 76px,rgba(172,109,84,0.47) 145px,rgba(148,90,71,0.46) 181px,rgba(193,117,93,0.44) 196px,rgba(166,114,81,0.45) 279px,rgba(148,101,72,0.52) 302px,rgba(160,103,78,0.51) 329px,rgba(201,127,97,0.51) 398px,rgba(131,89,64,0.46) 472px,rgba(197,134,96,0.49) 536px,rgba(155,112,75,0.51) 551px,rgba(144,99,69,0.47) 597px,rgba(145,91,69,0.47) 617px,rgba(140,88,68,0.46) 665px,rgba(173,106,82,0.45) 725px,rgba(173,109,82,0.51) 763px,rgba(172,107,82,0.46) 829px,rgba(143,93,68,0.49) 876px,rgba(130,94,62,0.49) 895px,rgba(160,98,77,0.53) 959px,rgba(165,105,79,0.52) 961px,rgba(195,133,94,0.44) 995px,rgba(190,134,91,0.48) 1006px,rgba(177,116,86,0.51) 1023px,rgba(173,121,82,0.5) 1095px,rgba(161,102,78,0.49) 1135px,rgba(179,127,88,0.52) 1216px,rgba(136,94,67,0.52) 1263px,rgba(141,95,69,0.53) 1346px,rgba(193,132,93,0.45) 1363px,rgba(191,117,91,0.52) 1433px,rgba(148,94,71,0.51) 1473px,rgba(175,114,82,0.5) 1499px,rgba(167,114,79,0.5) 1541px,rgba(179,112,85,0.46) 1609px,rgba(196,119,92,0.51) 1624px,rgba(155,107,74,0.49) 1678px,rgba(202,131,99,0.44) 1731px,rgba(134,95,63,0.48) 1782px,rgba(193,136,91,0.52) 1862px),url("https://www.8times8.site/images/setup/concreteFloor_lanza2.jpeg");background-size:cover;}

.syne {
  font-family: "Syne", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.syne-mono-regular {
  font-family: "Syne Mono", monospace;
  font-weight: 400;
  font-style: normal;
}


a.back-to-top{display:none;padding:3px 0 0 5px;width:35px;height:35px;position:fixed;z-index:999;right:7px;bottom:20px;background:transparant;}
/* LINKS */
a{color:rgba(141, 150, 149, 0.86);text-decoration: none;}
.overwriteLNKSection{color:rgba(127, 144, 140, 0.88);}
a:focus,a:active{color:rgb(74, 82, 81);text-decoration:none;}
a:hover{color:rgba(156, 168, 167, 0.87) !important;text-decoration:none;}


*:focus {outline: none!important;}
::-moz-selection{color:rgba(198, 204, 204, 0.86);background:rgba(122, 130, 121, 0.87);}
::selection{color:rgba(198, 204, 204, 0.86);background:rgba(122, 130, 121, 0.87);}
::-moz-placeholder { /* Firefox 19+ */color: darkgrey !important;}

/* CLASSES */
.column{padding-left:0;padding-right:0;}
.row{margin:0;}
.pad0{padding:0;}
.spacebottom{margin-bottom:1em;}
.wrapper{width:99%;margin:0 auto;}
.marginauto{margin:0 auto;}
.clearfix:after{clear:both;display:block;content: " ";visibility:hidden;height:0;}
.red{color:coral;}
.neutral{color:darkseagreen;}
.green{color:forestgreen;}
.container, .is-container {padding:0;width: 100%;}
.space{min-heigth:27px;}
.allControl{}
.allControlTop{background:transparent;padding:0;margin-top:53px;}/* margin top = height navbar */
.allControlMain{margin:;} 
.allControlMain:after{content: "";display: block;clear: both;}
.footer{background-color:rgba(57, 63, 61, 0.53) !important; color:rgb(157, 178, 170) !important; font-size:0.7em !important;opacity:0.88;}
.lgCustmd,.lgCustsm{font-weight:bold;}
.lgCustmd{font-size:clamp(2vw, 8vw, 10vw);}
.lgCustsm{font-size:clamp(2vw, 5vw, 7vw);}
.languageBTNS{font-size:0.7em;margin-top:-4.7em;}

.brandLogo{padding:0;}
.navbar-brand{margin:0;}
/* positioning logo on navbar */
.navbar-brand{position:absolute;transform:translateX(-50%);left:50%;top:;}.navbar{color:rgb(164, 170, 174);background-color:rgba(172, 192, 188, 0);padding:0 1em 0 1em;height: 53px;border:none;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;padding:0 5px 0 5px;margin:3px 0 0 0;}
.navbar-nav>li>a,.dropdown-menu>li>a{color:rgb(141, 150, 149);font-weight:normal;font-size:1em; }
.navbar-nav li a:hover{font-weight:normal;color:rgb(175, 184, 182);font-size:1em;background-color: rgba(0, 0, 0, 0);}
.navbar-nav>a:visited{}
.navbar-toggler{border:none; outline:0 none;}
#Nav{-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.navbar-nav>li>a,#ulnav .dropdown-menu>li>a{color:rgb(141, 150, 149);font-weight:normal;font-size:1em; }
#Nav .navbar-nav>.mdisabled>a{color: crimson;}
#Nav .menuActive{font-weight:0;color:rgb(203, 233, 233);font-size:1em;}
.dropdown-menu{background-color: rgba(51, 57, 55, 0.92);border-color:rgba(28, 32, 31, 0.59);}
.dropdown-menu.bg-light{background-color: rgba(51, 57, 55, 0.92);}
.dropdown-menu.text-dark{color:rgb(141, 150, 149);}
.dropdown-divider{border-top-color:rgba(28, 32, 31, 0.59);}
a.text-dark:focus,a.text-dark:hover{color:rgb(141, 150, 149);}
a.bg-light:focus,a.bg-light:hover{background-color: rgba(51, 57, 55, 0.92);}

.burger_icon{width:30px;height:20px;position:relative;margin:0px;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;}
.burger_icon span{display:block;position:absolute;height:1px;width:100%;border-radius:0px;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;outline:none;}
.burger_icon span{background-color:rgb(216, 228, 224);}
.burger_icon span:nth-child(1){top:0px;}
.burger_icon span:nth-child(2),.burger_icon span:nth-child(3){top:10px;}
.burger_icon span:nth-child(4){top:20px;}
.burger_icon.burger_open span:nth-child(1){top:11px;width:0%;left:50%;}
.burger_icon.burger_open span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
.burger_icon.burger_open span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
.burger_icon.burger_open span:nth-child(4){top:11px;width:0%;left:50%;}

.sub-arrow{}/*border:none!important;*/

.btn{background-color:rgba(0, 0, 0, 0);color:rgb(183, 193, 192);font-size:1.3em;border:1px solid rgb(140,143,134);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
/*overwrite bootstrap standard bg-colors*/
.btn-default{background-color:rgba(0, 0, 0, 0);}
.btn-primary{background-color:rgb(179, 203, 215);}
.btn-secondary{background-color:rgb(158, 162, 161);}
.btn-success{background-color:rgb(89, 172, 128);}
.btn-warning{background-color:rgb(215, 187, 131);}
.btn-danger{background-color:rgb(154, 55, 55);}
.btn-info{background-color:rgb(172, 233, 233);}


/* OVERLAY */
.overlay {height: 100%;width: 0;position: fixed;z-index: 100;top: 53px;left: 0;background-color:rgba(119, 127, 125, 0.86);overflow-x: hidden;transition: 0.5s;}
.overlay-content {position: relative;top: 10%;width: 100%;text-align: center;}
.overlay .closebtn {position: absolute;top: 20px;right: 45px;}

/* SEARCH-CURTAIN with outside close */ 
.searchcurtain{height: 0%;width: 100%;position: fixed;top: 53px;left: 0;overflow-x: hidden;transition: 0.5s;display: none;z-index: 1100;background-color: rgba(119, 127, 125, 0.86);}
.searchCurtainUnder{height: 0%;width: 100%;position: fixed;top: 0;left: 0;overflow-x: hidden;transition: 0.5s;display: none;z-index: 1099;background-color:rgba(208, 230, 218, 0.21);}
.searchcurtain-content {position: relative;top: 27%;width: 100%;text-align: center;}
.searchcurtain .closebtn {position: absolute;top: 20px;right: 35px;}



/* ELEMENTS */



/*                                              3 DOTS CYCLING */
@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.saving span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.saving span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.saving span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}




/*********************************************************************************************************************************************************/
/*MEDIA QUERIES*/
/*********************************************************************************************************************************************************/
/* example

Hide an element when the browser's width is 600px wide or less:
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

*/


/* styles for browsers smaller than 1290px; */
@media screen and (max-width:1290px){


}
/* styles for browsers smaller than 1181px; */
@media screen and (max-width: 1181px){

}

/*tablets*/
/* Medium devices (tablets, less than 992px)*/
@media screen and (max-width: 991.98px) {
    .wrapper{}
    .navbar{}
    #navbarNavDropdown{max-height: 513px;overflow-y: auto;padding-left: 1rem;}
    .navbar-collapse{background-color: rgba(73, 77, 76, 0.97);}
    .navbar-toggler{height: 53px;}
    .navbar-header {float:none;}

}

@media screen and (max-width: 768px){
    .wrapper{}
    .logo{/* left: 25%;margin: 0 auto;*/} 
    .navbar{border:none;}
    .navbar-right{margin-right:0px;}
    .navbar{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}
    .navbar-header,.navbar{background-color: rgba(172, 192, 188, 0);color: rgb(164, 170, 174);}
    .navbarMedia{margin: 0 auto;}
    .dropdown-menu{background-color:rgba(73, 77, 76, 0.97);}
    .searchcurtain a {font-size: 20px}
    .searchcurtain .closebtn {top: 15px;right: 25px;} 

    /* OVERLAY SEARCH */ 
    .overlaySearchWindow {height: 100%;width: 0;position: fixed;z-index: 100;top: 53px;left: 0;overflow-x: hidden;transition: 0.5s;}
    .overlay-content {position: relative;top: 10%;width: 100%;text-align: center;}
    .overlaySearchWindow {position: absolute;top: 20px;right: 45px;}

}

/*mobiles*/
@media screen and (max-width: 480px){
    .wrapper{}
    .overlay a {font-size: 20px;}
    .overlay .closebtn {font-size: 40px;top: 15px;right: 35px;}
    .overlaySearchWindow a {font-size: 20px}
    .overlaySearchWindow {font-size: 40px;top: 15px;right: 35px;}

}

/*mobiles*/
@media screen and (max-width: 320px){
    .wrapper{}
    .fullwidthPhone{max-width: 320px;}

}

/*mobiles*/
@media screen and (max-width: 240px){   

}




/* EXPLENATION CSS */
/*To REMEMBER: which css will be rendered? cascade = waterfall: read from top to bottom, but even more important is the prioity and even more important is the !important tag = this is it Basically,
every selector has its own numerical 'weight':  
10000 points for the !important 
1000 point inline style 
100 points for IDs 
10 points for classes, pseudo-classes and attributes 
1 point for elements, tag selectors and pseudo-elements  
example: 
.class h1 {...   10+1=11 priority score 
h1 {...   1 priority score, not enough to override #myCustomID h1 {...  100+1=101 priority score: will override even if its before in reading order  */