body {
  margin: 0 0 0 0 ;
  background-color: #ffffff;
  font-family: "lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
      letter-spacing: -0.03rem;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
      color: #666;
          line-height: 1.5;
  font-size: 1.2rem;
}

#body .padding {
    padding-top: 3rem;
    padding-right: 4rem;
    padding-left: 1rem;
}



a {
    background: transparent;
    text-decoration: none;
    color: #384d58;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
           transition: all 0.3s;
           transition-property: all;
           transition-duration: 0.3s;
           transition-timing-function: initial;
           transition-delay: initial;
}

a:hover {
    color: #949494;
}

a:focus { outline: none; }



h1, h2, h3, h4, h5, h6 {
    text-rendering: auto;
    line-height: 150%;
    letter-spacing: -0px;
}

h1 {
    text-align: center;
    letter-spacing: -3px;
    display: block;
    font-weight: 500;
    font-size: 4rem;
    border-bottom: 4px solid #F0F2F4;
}

h3 {
    text-align: center;
    letter-spacing: 1px;
    display: block;
    font-weight: 500;
    font-size: 2rem;
}

h5 {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 0.3rem!important;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0.85rem 0 1.7rem 0;
    text-rendering: optimizeLegibility;
}


.centered {
    width: 80%;
    margin: auto;
    text-align: center;
}

#sidebar h5.active a {
    background: #fff;
    color: #666 !important;
}

#header {
    background: #3c7faa;
    color: #fff;
    text-align: center;
    padding: 1rem;
}

#sidebar {
    font-family: "Roboto", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    background-color: #384D58;
    position: fixed;
    top: 0;
    width: 250px;
    bottom: 0;
    left: 0;
    font-weight: 500;
    font-size: 15px;
}

#sidebar h5 {
    margin: 0.8rem 0 0;
    position: relative;
    line-height: 2;
}



#footer {
    padding: 3rem 1rem;
    color: #a2a2a2;

  font-size: 13px;
}
#sidebar h5 a {
    display: block;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

#sidebar a {
    color: #bbbbbb;
}

#sidebar a:hover {
    color: #dbdbdb;
}


.error {
 color: red;
 background: yellow;
}


*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



.design {
  display: left;
  width: 96%;
  padding-top: -20px;
  margin-bottom: 10px;
  border-bottom: 4px solid #F0F2F4;
}

.design a {
  color: #666;
  font-weight: 600;
  font-size: 1.5rem;
  padding: 10px;

}

.design a:hover {
  color: #444;
}

.list {
 color: #f8f8f8;
}


.shownHovered{
display: none;
width: 260px;
background-color: #384D58;
color: #bbbbbb;
text-align: justify;
border-radius: 6px;
padding: 8px 8px;
margin-left: -20px;
margin-top: -50px;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
z-index: 90;
position: absolute;
font-size: 12px;
}

.showHover {
   color: #bbb;
   display:inline;
   font-size: 12px;
   margin-left:6px;
   vertical-align: super;
}


.showHover:hover .shownHovered{
display : block;
}


/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


.popupvisible #overlay {
    position: absolute;
    left: 0px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0);
    cursor: pointer;
}



@media only all and (min-width: 53.938em){
#body {
    margin-left: 300px;
}

#sidebar-toggle {
    display: none;
}

.smallDesign{
    margin-left: 8%;
    margin-right: 8%;
}

}



@media only all and (min-width: 100em){
#body-inner {
    margin-left: 12%;
    margin-right: 12%;
}

.smallDesign{
    margin-left: 12%;
    margin-right: 12%;
}
}

@media only all and (max-width: 53.938em){
#sidebar {
    width: 300px;
    left: -300px;
}

#body {
    margin-left: 0px;
    width: 100%;
}

#body .padding {
    padding: 1rem 2rem;
}


#sidebar-toggle {
    display: inline-block;
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
}

.sidebar-hidden #sidebar-toggle {
    display: inline-block;
    position: absolute;
    left: 310px;
    right: 310px;
    top: 10px;
    bottom: 10px;
}

.sidebar-hidden #body {
    margin-left: 300px;
    overflow: hidden;
}

.sidebar-hidden #sidebar {
    left: 0px;
}

.sidebar-hidden #overlay {
    position: absolute;
    left: 300px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

}




.normal {
   font-weight: 400;
   color: #fff;
   padding-left: 10px;
}


.listInfo:hover span:hover {
    color: #444;
}

.listInfo {
      font-family: "Roboto", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    margin: 0;
    padding-left: 20px;
    padding-bottom: 70px;

}

.listInfo a{
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 1rem;
    font-weight: 600;
    color: #384d58;
    user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
        transition: all 0.2s;
        transition-property: all;
        transition-duration: 0.2s;
        transition-timing-function: initial;
        transition-delay: initial;
}

.listInfo a:hover {
  color: #949494;
}

.info {
    margin: 0;
    text-align:right;
    color:#aaa;
    font-size: 11px;
}




.button {

    background: linear-gradient( #3f81ac, #3c7faa );
    border-radius: 3px;
    border: none;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-family: arial;
    font-size: 12px;
    padding: 3px 10px 5px;
    margin: 1px 0 6px 0;
    text-decoration: none;
    text-transform: lowercase;
    cursor: pointer;
    appearance: button;
    letter-spacing: 0.03rem;
}

.button:hover {

    background: linear-gradient( #3c7faa, #3070a0 );

}

.button:active {

    margin: 6px -2px 5px 2px;
    background: linear-gradient( #3c7faa, #3070a0 );
    color: #ddd;

}

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  margin: 1px 0 6px 0;
  cursor: inherit;
  background: linear-gradient( #6c92aa, #6587a0 );
  color: #ccc;
}

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

h1, h2, h3, h4, h5, h6 {
    line-height: 120%;
}

h1 {
   font-size: 3rem;
}

h3 {
    font-size: 1.4rem;
}

h5 {
    font-size: 1.0rem;
    font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0.5rem 0 1.0rem 0;
}


#body .padding {
    padding: 1rem 2rem;
}
}