@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(141,96,67,0.46) 0px,rgba(163,115,79,0.48) 57px,rgba(141,90,68,0.45) 108px,rgba(190,119,93,0.45) 132px,rgba(182,120,87,0.44) 198px,rgba(193,130,91,0.54) 211px,rgba(129,84,63,0.52) 272px,rgba(149,91,70,0.46) 313px,rgba(177,122,84,0.53) 323px,rgba(141,90,69,0.46) 359px,rgba(197,122,97,0.46) 381px,rgba(161,110,79,0.51) 447px,rgba(157,107,75,0.47) 464px,rgba(170,112,83,0.51) 534px,rgba(173,111,82,0.53) 589px,rgba(191,120,90,0.45) 625px,rgba(177,109,83,0.49) 661px,rgba(190,136,90,0.5) 674px,rgba(131,87,64,0.44) 738px,rgba(192,122,93,0.48) 814px,rgba(175,110,83,0.52) 853px,rgba(191,134,90,0.52) 931px,rgba(152,104,74,0.54) 1008px,rgba(204,138,97,0.5) 1048px,rgba(195,127,95,0.49) 1110px,rgba(177,126,85,0.5) 1169px,rgba(178,126,86,0.47) 1227px,rgba(139,94,66,0.5) 1299px,rgba(203,123,96,0.46) 1327px,rgba(150,91,72,0.46) 1359px,rgba(159,103,76,0.45) 1397px,rgba(134,88,64,0.51) 1427px,rgba(147,97,72,0.46) 1503px,rgba(201,133,96,0.54) 1520px,rgba(182,123,89,0.45) 1597px,rgba(155,109,73,0.51) 1635px,rgba(138,94,67,0.48) 1671px,rgba(167,117,79,0.5) 1697px,rgba(189,122,89,0.51) 1746px,rgba(167,104,79,0.51) 1771px,rgba(164,107,80,0.48) 1820px),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  */