body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Spartan', sans-serif;
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*######### nav mobile #############*/

nav,
.navbar-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

nav {
  position: fixed;
  z-index: 10;
  background-color: rgba(255,255,255, 0.90);
  width: 100%;
  height: 100%;
  text-align: center;
  display: table;
  color: #000000;
}

.nav-hide { display: none; }

nav ul {
  position: fixed;
  left: -12%;
  top: 60px;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

nav ul li { list-style: none; }

nav ul li a {
  font-size: 26px;
  color: inherit;
  font-weight: bolder;
  text-decoration: none;
  font-weight: 300;
  line-height: 200%;
  color: rgba(0,0,0,1.00)
}

#nav-desktop {display: none}

/*#############nav desktop ############`*/

@media (min-width: 960px) {
    
.menu {  position: fixed;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  background: rgba(255,255,255,0.9)
    }
    
.navbar-toggle, .nav-hide {display: none}
    
#nav-desktop ul {display: flex; justify-content: center; align-items: center; padding: 40px 0 20px 10px; background: url("../../media/bg-nav2.png"); background-repeat: no-repeat; background-position: left top;}

#nav-desktop ul li { flex-grow: 1; list-style: none; text-align: center;}
    
#nav-desktop ul li.rex-article-2, #nav-desktop ul li.rex-article-3, #nav-desktop ul li.rex-article-4, #nav-desktop ul li.rex-article-5, #nav-desktop ul li.rex-article-6, #nav-desktop ul li.rex-article-7, #nav-desktop ul li.rex-article-10 {  border-left-style: solid;}
    
#nav-desktop ul li a {  
  font-size: 0.9em;
  font-weight: bolder;
  text-decoration: none;
  font-weight: 500;
  line-height: 150%;
  color: rgba(0,0,0,1.00)}
    
}

nav ul li a:hover {
  color: rgba(153,153,102,1.00)
}

.navbar-toggle {
  position: absolute;
  top: 20px;
  left: 8%;
  width: 69px;
  height: 69px;
  z-index: 20;
  cursor: pointer;
}

@media (min-width: 960px) {

    #nav-desktop {display: block}
    
}

.bar1,
.bar2,
.bar3 {
  width: 100%;
  height: 8px;
  margin-bottom: 15px;
  background-color: #000000;
  transition: all 0.3s ease-in-out;
}

.navbar-on .bar1,
.navbar-on .bar2,
.navbar-on .bar3 { background-color: #000000 }

.navbar-on .bar1 {
  transform-origin: 5% 40%;
  transform: rotate(45deg);
}

.navbar-on .bar3 {
  transform-origin: 5% 40%;
  transform: rotate(-45deg);
}

.navbar-on .bar2 { background-color: transparent; }


.rex-current, a.rex-current {color: rgba(153,153,102,1.00)}

/*####### Layout #######*/

main {width: 100%; min-height: 400px; margin: 90px 0 0 0}

hr {width: 100%; padding: 4px 0; background: rgba(153,153,102,1.00); border: none; margin: 30px auto}

a.footer {font-size: 0.9em; text-decoration: none; color: #000000}

@media (min-width: 360px) {

h1 {color: rgba(144, 152, 147,1.00); margin: 0;  padding: 40px 0 0 0 !important; clear: both}
    
}

.hr_small {width: 100%; border-bottom: 1px rgba(0,0,0,0.70) solid}

@media (min-width: 960px) { 
    
main {width: 100%; min-height: 600px; margin: 120px 0 0 0}
    
h1 {color: rgba(144, 152, 147,1.00); margin: 0;  padding: 0 !important; clear: none}
    
}