/*!
 * Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 
BARVE:
temno zelena: #5d7d37
svetlo zelena: #bfbc7f
temno siva #666666
svetlo siva #cccccc
svetlo plava: #d3dfdd
temno rjava: #5d4e46;
svetlo rjava:a59d8e;


 */

body {
    width: 100%;
    height: 100%;

}

body {
  font-family: 'Play', sans-serif;
  font-size: 15px;
  color: #000000;
}

html {
    width: 100%;
    height: 100%;
}

/* to velja za nemenujski napis v navbaru */
.navbar-brand {
  font-family: 'Play', sans-serif;
  text-shadow: 0;
  font-size: 24px;
}
/* to velja za menujske napise v navbaru */
.navbar-default .navbar-nav>li>a {
  font-family: 'Play', sans-serif;
  color: #5d7d37;
  text-shadow: 0;
  font-size: 15px; 
  text-outline: 0px 0px #ff0000;
  /*font-weight: bold;*/
  /*text-transform: uppercase;*/
}

.navbar-default .navbar-nav>li>a:hover {
  color:#bfbc7f;
  font-weight: bold;
}

.navbar-default .navbar-brand {
  color: #888b8d;
  text-shadow: 0;
}

.navbar-brand:hover {
  color: #ffffff !important;
  text-shadow: 0;
}

.navbar {
  opacity: 0.9;
  background:#5d4e46;
  border: 0;

}

/* to velja za aktivno ikono na menuju navbara AMPAK ZDAJ NE DELA
.navbar-default .navbar-nav .navbar-right .navbar> .active>a, .navbar-default .navbar-nav .navbar-right .nav>.active>a:hover, .navbar-default .navbar-nav .navbar-right .nav>.active>a:focus {
  background: #551a8b;
  color: #7bf41c;
  text-shadow: 0;
}*/


@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
        background:transparent;
        border-width: 0px;
        

    }

    .top-nav-collapse {
        padding: 0;
        background-color: #5d4e46;
    }
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    color: #bfbc7f;
    background-color: transparent;
    text-decoration: underline;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color: #bfbc7f;
    text-decoration: underline;
    background-color: transparent;

}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
color: #5BC2E7 !important;
background-color: #ff8c19;
}

.dropdown-menu {
  background:transparent;
  border: 0px;

}

.dropdown-menu li>a:hover{
  background:transparent;
  color: #5d7d37;
  font-weight: bold;
}

.dropdown-menu > li > a {
    background:transparent;
  color: #bfbc7f;
  
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: #666;
    text-decoration: underline;
    background-color: transparent;
    outline: 0;
}

.navbar-brand {
    padding: 5px;
}

.navbar-default .navbar-toggle {
border-color: #bfbc7f;
}

.navbar-default .navbar-toggle .icon-bar {
background-color: #bfbc7f;
}
.navbar-default .navbar-toggle:hover {
background-color: #a59d8e;
}

.navbar-default .navbar-collapse {
border-color: #bfbc7f;
}

@media (max-width: 767px){
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #bfbc7f;
}
}

@media (max-width: 767px){
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
color: #5d7d37;
background-color: transparent;
}
}


/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

/* ================================================================= F O N T I =================================================================  */


h1 {
  font-family: 'Play', sans-serif;
  color: #5d7d37; 
  text-align: left;
}

h3 {
  font-family: 'Play', sans-serif;
  color: #666; 
  text-align: justify;
}

hr {
    margin-top: 15px;
    margin-bottom: 15px;
    border: 0;
    border-top: 2px solid #5d7d37;
}

a {
    color: #5d7d37;
    text-decoration: none;
}

a:hover {
    color: #bfbc7f;
    text-decoration: none;
}


.btn.focus, .btn:focus, .btn:hover {
    color: #bfbc7f;
    text-decoration: none;
}





/* =================================================== U N T E R N E H M E N   S E C T I O N ===================================================  */

.unternehmen-section {
    width: 100%;
    height: 100%;
  min-height: 100%;
  overflow: auto;
  padding-top: 100px;
  padding-bottom: 10px;
}

.unternehmen-section:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../images/ecology.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bt {
float: right;
max-width: 50%;
padding-top: 10%;
margin: auto;
}

.btlogo {
   
    
}

.napis {
    padding-left: 15px; 
    
}

.znak {
  
}

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
   float: none;
   position: relative;
}

@media screen and (max-width: 1125px) {

  .bt {

max-width: 80%;
padding-top: 10%;
margin: auto;
float: none;
text-align: center;
}

.unternehmen-section h1 {
  font-family: 'Play', sans-serif;
  color: #5d7d37; 
  font-size: 30px !important;
  margin-bottom: 0;
  text-align: center;
}

.unternehmen-section h1 small {
    font-weight: 400;
    line-height: 1;
    color: #5d7d37;
    margin-bottom: 0;
}

.unternehmen-section h2 {
  font-family: 'Play', sans-serif;
  color: #666; 
  font-size: 20px !important;
  margin-bottom: 0;
  text-align: center;
}


  .btlogo {

max-width: 50%;
padding-top: 10%;
margin: auto;
float: none;
text-align: center;
}
}


.unternehmen-section h1 {
  font-family: 'Play', sans-serif;
  color: #5d7d37; 
  font-size: 45px;
  margin-bottom: 0;
}

.unternehmen-section h1 small {
    font-weight: 400;
    line-height: 1;
    color: #5d7d37;
    margin-bottom: 0;
}

.unternehmen-section h2 {
  font-family: 'Play', sans-serif;
  color: #666; 
  font-size: 30px;
  margin-bottom: 0;
}

.unternehmen-section .gumb {
    position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translate(-50%, -50%);
    margin:0px auto;
}


.scroll{
    width: 30px;
    height: 50px;
    position: absolute;
    bottom: 50%;
    left: 50%;
    cursor: pointer;
    margin-top: -25px;
    margin-left: -15px;
}
.scroll .mouse{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: 2px solid #5d7d37;
    border-radius: 20px;
}
.scroll .wheel{
    width: 4px;
    height: 4px;
    top: 10px;
    left: 50%;
    position: absolute;
    background: #5d7d37;
    display: block;
    border-radius: 50%;
    margin-left: -2px;
    animation-name: scroll-wheel;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes scroll-wheel{
    from{
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to{
        transform: translate3d(0, 10px, 0);
        opacity: 0;
    }
}

@media screen and (max-height: 736px) {
  .unternehmen-section .gumb
  {display:none;
  }
}

/* =================================================== T A T I G K E I T   S E C T I O N ===================================================  */

.tatigkeit-section {
    min-height: 50%;
    padding-top: 50px;
    text-align: justify;
    background: #a59d8e;
    padding-bottom: 20px;
}

/* =================================================== G E S C H A F T S F U H R U N G   S E C T I O N ===================================================  */

.geschaftsfuhrung-section {
    min-height: 50%;
    padding-top: 50px;
    padding-bottom: 20px;
    text-align: center;
    background: #fff;
}

/* =================================================== A R B E I T S M I T T E L  S E C T I O N ===================================================  */
.arbeitsmittel-section {
    height: auto !important;
    min-height: 100%;
    padding-top: 100px;
    text-align: center;
    overflow: auto;
  }

.arbeitsmittel-section {
  content: "";
  display: block;
  
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../images/instalacije.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.arbeitsmittel-section .podlaga{
    text-align: justify;
    background: #bfbc7f;
    padding: auto;
    padding-bottom: 50px;
    margin-bottom: 100px;
}

 .arbajtstekst{
    padding: 4%
    
}

/* =================================================== A N G E B O T  S E C T I O N ===================================================  */

.angebot-section {
    min-height: 100%;
    padding-top: 50px;
    text-align: center;
    background: #adadad;
}

.angebot-section ul  {
    list-style: none;
    text-align: left;
}

.angebot-section ul li:before {
    content:"\e067";
    font-family: 'Glyphicons Halflings';
    font-size: 25px;
    position: relative;
    margin-right: 10px;
    top: 3px;
    color: #5d7d37;
}

/* =================================================== S L O W E N I E N   S E C T I O N ===================================================  */

.slowenien-section {
    height: 100%;
    min-height: 100%;
    width: 100%;
    padding-top: 100px;
    text-align: center;
    overflow: auto;
    
}

.slowenien-section small { 
  font-size: smaller;
  font-size: 18px ;
  color: #5d7d37; 
}

.slowenien-section small:hover { 
  font-weight: bold;
  color: #5d4e46;
}

.slowenien-section h2 {
  font-family: 'Play', sans-serif;
  color: #5d7d37; 
  font-size: 30px;
  text-align: center;
  padding: 2px;
}

.slowenien-section h3 {
  font-family: 'Play', sans-serif;
  color: #5d7d37; 
  font-size: 15px !important;
  text-align: center;
  padding: 2px;
}

.slowenien-section .gumb {
    position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translate(-50%, -50%);
    margin:15px auto;
}

@media only screen and (max-height: 812px) and (max-device-width : 375px){
  .slowenien-section .gumb
  {display:none;
  }
}

.slowenien-section .jumbotron {
  text-align: justify;
  margin-top: 2%;  
  background: rgba(191, 188, 127, .85);
  padding: 5px 20px;
}

.slowenien-section .jumbotron p {

  font-family: 'Play', sans-serif;
  font-size: 16px;
}

.slowenien-section ul  {
    list-style: none;
    
}


.slowenien-section .slideshow
 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -3; 
  }

.slowenien-section  {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;

}
.slowenien-section .slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: -3;
  -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}

.slowenien-section .slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
}

.slowenien-section .slideshow li:nth-child(1) span { background-image: url(../images/slovenia-0.jpg) }
.slideshow li:nth-child(2) span {
    background-image: url(../images/slovenia-1.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.slowenien-section .slideshow li:nth-child(3) span {
    background-image: url(../images/slovenia-2.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.slowenien-section .slideshow li:nth-child(4) span {
    background-image: url(../images/slovenia-3.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

.slowenien-section .slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.slowenien-section .slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
  0% {
      opacity: 0;
      -webkit-animation-timing-function: ease-in;
  }
  8% {
      opacity: 1;
      -webkit-transform: scale(1.05);
      -webkit-animation-timing-function: ease-out;
  }
  17% {
      opacity: 1;
      -webkit-transform: scale(1.1);
  }
  25% {
      opacity: 0;
      -webkit-transform: scale(1.1);
  }
  100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
  0% {
      opacity: 0;
      -moz-animation-timing-function: ease-in;
  }
  8% {
      opacity: 1;
      -moz-transform: scale(1.05);
      -moz-animation-timing-function: ease-out;
  }
  17% {
      opacity: 1;
      -moz-transform: scale(1.1);
  }
  25% {
      opacity: 0;
      -moz-transform: scale(1.1);
  }
  100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
  0% {
      opacity: 0;
      -o-animation-timing-function: ease-in;
  }
  8% {
      opacity: 1;
      -o-transform: scale(1.05);
      -o-animation-timing-function: ease-out;
  }
  17% {
      opacity: 1;
      -o-transform: scale(1.1);
  }
  25% {
      opacity: 0;
      -o-transform: scale(1.1);
  }
  100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
  0% {
      opacity: 0;
      -ms-animation-timing-function: ease-in;
  }
  8% {
      opacity: 1;
      -ms-transform: scale(1.05);
      -ms-animation-timing-function: ease-out;
  }
  17% {
      opacity: 1;
      -ms-transform: scale(1.1);
  }
  25% {
      opacity: 0;
      -ms-transform: scale(1.1);
  }
  100% { opacity: 0 }
}
@keyframes imageAnimation { 
  0% {
      opacity: 0;
      animation-timing-function: ease-in;
  }
  8% {
      opacity: 1;
      transform: scale(1.05);
      animation-timing-function: ease-out;
  }
  17% {
      opacity: 1;
      transform: scale(1.1);
  }
  25% {
      opacity: 0;
      transform: scale(1.1);
  }
  100% { opacity: 0 }
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx   OVERLAY SECTION   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(93,78,70);
  background-color: rgba(93,78,70, 0.98);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content  {
  font-family: 'Play', sans-serif;
  font-size: 15px;
  color: #bfbc7f;
  line-height: 200%;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: left;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #5d7d37;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #bfbc7f;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 100px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}




/* =================================================== K O N T A K T   S E C T I O N ===================================================  
BARVE:
temno zelena: #5d7d37
svetlo zelena: #bfbc7f #bebd86;
temno siva #666666
svetlo siva #cccccc
svetlo plava: #d3dfdd
temno rjava: #5d4e46;
svetlo rjava:a59d8e; #958b7a;


 */

.kontakt-section {
    min-height: 100%;
    padding-top: 100px;
    text-align: center;
    background: #666;
}

.kontakt-section h1{
  color: #bfbc7f; 
}

.kontakt-section hr{
  border-top: 2px solid #bfbc7f;  
}

.kontakt-section h6{
  font-family: 'Play', sans-serif;
  color: #bfbc7f; 
  font-size: 20px;
}

.kontakt-section a{
  font-family: 'Play', sans-serif;
  color: black; 
  font-size: 15px;
}

.kontakt-section a:hover {
  font-family: 'Play', sans-serif;
  color: #5d4e46; 
  font-size: 15px;
}

.kontakt-section .btn-sq-lg {
color: #666;
background-color: #958b7a;
border-color: #958b7a;
}



.kontakt-section .btn.disabled, .btn[disabled], fieldset[disabled] .btn {

    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 1;

}

.zoom {
   transition: transform .2s; /* Animation */
   margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.5); 
}

#map {
  width: 100%;
  height: 400px;
  margin-top: 15px;
  overflow: hidden;
  
}
/* =================================================== L E I S T U N G E N   S E C T I O N ===================================================  */

.leistungen-section {
    min-height: 100%;
    padding-top: 100px;
    text-align: center;
    background: #a59d8e;
}

.leistungen-section .jumbotron p{
  font-family: 'Play', sans-serif;
  font-size: 15px;
  color: #000000;
  text-align: justify;
  
}

.leistungen-section .jumbotron {
  background-color: #bfbc7f;
}

.leistungen-section .glyphicon-ok{
  text-align: center;
  color: #5d7d37;
}

.leistungen-section th{
  text-align: center;
}

.opistabela {
  text-align: left ; 
}

.leistungen-section .table-hover tbody tr:hover td {
    background: #bfbc7f;
}

.leistungen-section tbody tr td{
    border-top-color: #5d4e46;
    border-bottom-color: #5d4e46;
    
  }

  .leistungen-section .table>thead>tr>th {    
  vertical-align: bottom;
  border-bottom: 2px solid #5d4e46;   
  }


/* =================================================== F E I E R T A G E   S E C T I O N ===================================================  */

.feiertage-section {
    min-height: 100%;
    padding-top: 100px;
    text-align: center;
    background: #fff;
    
}

.feiertage-section .row{
padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    justify-content: space-around;
    line-height:30px;

}

.feiertage-section .box1 h3{
    font-size: 28px;
    font-family: 'Helvetica Neue', arial, sans-serif;
    text-align: center;
    color: #bfbc7f;

    }

.feiertage-section .box1 h4{
    font-size: 24px;
    font-family: 'Helvetica Neue', arial, sans-serif;
    text-align: center;
    color: #bfbc7f;

    }

.feiertage-section .box2 h3{
    font-size: 28px;
    font-family: 'Helvetica Neue', arial, sans-serif;
    text-align: center;
    color: #5d7d37;

    }

.feiertage-section .box2 h4{
    font-size: 24px;
    font-family: 'Helvetica Neue', arial, sans-serif;
    text-align: center;
    color: #5d7d37;

    }

.feiertage-section .box1 {
    background: #a59d8e;
    margin: 5px;
    margin: 5px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    flex: 1 0 0px;
    min-width: 1.5em;
    
    
}

.feiertage-section .box2 {
    background: #5d4e46;
    margin: 5px;
    
    margin: 5px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    flex: 1 0 0px;
    min-width: 1.5em;
    
    
}

.box1:hover {
  background: #5d7d37;
}

.box2:hover {
  background: #5d7d37;
}

/* .feiertage-section .box2:before{

content: "";
  display: block;
  padding-top: 100%;
    float: left;
}

.feiertage-section .box1:before{

content: "";
  display: block;
  padding-top: 100%;
    float: left;
}


*/





.box_item{
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-family: 'Play', sans-serif;
    font-weight: 200;
    text-align: center;
    color: #bfbc7f;
  
  
  
  padding: 20px;
}

.box_item:hover{
  font-size: 0;
}

.box_item:hover:after{
  content: attr(data-hover);
  font-size: 24px;
  line-height: 28px;
  font-weight: 200;
  text-align: center;
  font-family: 'Play', sans-serif;  /*background-color: yellow; */
}





/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  FOOTER xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

footer  {
  background:  #5d4e46;
}