/*/
/***********************************************************************************************************/
/*DELPo CSS STYLES***********************************************************************************/
/****************************************************************************/
/*for /public-html/~delpo***************************************************************
/***********************************************************************************************************/


/*__________________COLOR PALETTE____________________*/
/****Deep blue base with green and yellow accents****/

:root {
   --base: #264d73;
   --light: #204060;
   --lighter: #336699;
   --lighter-lighter: #6699cc;
   --dark: #19334d;
   --darker: #132639;
   --dark-soft: #19334d;

   --accent: #ff9933;
   --accent-lighter: #ffe066;
   --accent-lighter-lighter: #ffe680;
   --accent-superlight:#ffffb3;
   --accent-lighter-transp: #ffffe6;
   --accent-pale:  rgb(255, 230, 153, 0.2);

   --alert: #ff3333;
   --alert-soft: #ff9966;

   --green: #66cc99;
   --green-soft: rgb(204, 255, 204, 0.5);
   --green-strong: #339966;

   --black-transp: rgb(0, 0, 0, 0.5);
   --white-transp: rgb(255, 255, 255, 0.5);

   --offwhite:#e6e6e6;

   }

/*______________COLOR PALETTE end_______________*/


/*/
/*********************************************************************************************************/
/*Html styles******************************************************************************************/
/*********************************************************************************************************/

/*set root font size; works better if font sizes are set with rem (not em)*/
html {font-size:16px;}

        /*/////////////////////////////*/
        /*SMALL SCREENS*/
        /*MAKE base font smaller*/
        @media screen
        and (max-width: 800px)
                {html {font-size:14px;}
            }
        /*/////////////////////////////*/

/*/
/*********************************************************************************************************/
/*body styles******************************************************************************************/
/*********************************************************************************************************/

body {
 margin: 0;
 padding: 0;
 background-color: var(--dark-soft);
 color: #111;
 font-family: 'Ubuntu', sans-serif;
}

    /*default body link styles*********************************************************/

    a:link {text-decoration: none;}
    a:visited {text-decoration: none;}
    a:hover {text-decoration: none; background: transparent;}
    a.plain {text-decoration: none;}


    /*default body header styles******************************************************/

    h1 {
       font-weight: normal;
       text-align: left;
       font-size: 2rem;
    }

    h1 a:hover {
     color: #cccccc;
     text-decoration: none;
     background: #ffffff;
    }

    h2 {
       font-weight: normal;
       text-align: left;
       font-size: 1.7rem;
    }

    h3 {
       font-weight: normal;
       text-align: left;
       font-size: 1.4rem;
    }

    h4 {
       font-weight: normal;
       text-align: left;
       font-size: 1rem;
    }

    h5 {
       font-weight: normal;
       text-align: left;
       font-size: 0.9rem;
    }

    h6 {
       font-weight: normal;
       text-align: left;
       font-size: 0.8rem;
    }

    hr {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: solid;
        border-width: 0.5px;
        border-color: #d9e6f2;
      }

    .accent {color: #ffe066;}

/*/
/*********************************************************************************************************/
/*DIV styles*************************************************************************************************/
/*********************************************************************************************************/

/*DIVs syntax to level 3***************/

    /*/[1]#Content////////////////////////*/
    /*////[2]#Header//////////////////////*/
    /*///////[3]#Navbar///////////////////*/
    /*////[2]#Main///////////////////*/
    /*///////[3]#Entry_1/////////////*/
    /*///////[3]#Entry_2/////////////*/
    /*///////[3]#Sidebar/////////////*/
    /*/[1]#Footer////////////////////////*/

/*********************************************************************************************************/
/*FIRST LEVEL DIVS*************************************************************************************************/
/*********************************************************************************************************/

#Content {
   position: relative;
   float: left;
   width: 100vw;
   height: auto;
   margin:0;
   background-color: var(--dark-soft);
}

#edit_content {
 position: absolute;
 right: 0;
 z-index: 2000;
 height: 20px;
 padding: 15px;
 margin-right: 50px;
 margin-top: 20px;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 font-size: 0.7rem;
 text-transform: uppercase;
 background-color: #ffffff;
 box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.5);

 }

    #edit_content a:link {color: #000000; background-color:transparent; text-decoration: none; }
    #edit_content a:visited {color: #000000;  background-color:transparent; text-decoration: none; }
    #edit_content a:hover {color: #ffffff;  background-color:transparent; text-decoration: none; }
    #edit_content:hover {background-color: var(--accent-lighter); color: #ffffff;}

           /*//////////////////////////////////*/
           @media screen and (max-width: 800px) {
               #edit_content {display: none;}
           }
           /*//////////////////////////////////*/

#Main {
       position: relative;
       float: left;
       clear: none;
       width: 100vw;
       height: auto;
       padding-left: 2em;
       border: 1px solid transparent;
       }

           /*//////////////////////////////////*/
           @media screen and (max-width: 800px) {
               #Main {
                   width: 95%;
                   padding-left: 0.3em;
                   }
           }
           /*//////////////////////////////////*/

#Footer {
 position: relative;
 float: left;
 clear: both;
 width: 100vw;
 height: 100%;
 background-color: #000000;
 margin: 50px 0px 0px 0px;
 padding: 0;
 font-family: Verdana, 'Arial', Sans-serif;
 color: #ffffff;
 font-size: 75%;
}

/*#Content children****************************************************************/

/*------------TOP MENUS THAT FIX ON SCROLLING THE PAGE*-----------/
**
    /*#TopMenu WAS HiddenMenu---------------------------------------/

    /*To make this menu appear only when page scrolls 200px,
      add class -WithHiddenmenu to #Header, #*/

#TopMenu {
    position: fixed;
    top: 0;
    z-index:1;
    width: 100vw;
    height: 50px;
    background-color: var(--dark-soft);
    box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.3);
    }

        /*/////////////////////////////*/
        /*At 50 top and z-index 3 to appear always*/
        /*In this case add class DropdownNavbar-WithHiddenMenu to Dropdown in Header
         *As a result, normal Dropdown will hide in small screens*/

        @media screen
        and (max-width: 800px) {
                #TopMenu {
                    top: 50;
                    z-index:100;
                    height: 50px;
                    width: 80vw;
                    background-color: transparent;
                    background: none;
                    box-shadow: none;
                    }
                }
        /*Do not activate the margin when there is .php .long*/
        @media screen
        and (max-width: 800px) {
                #TopMenu.withlongdropdown {
                    top: 0;
                    z-index:3;
                    }
                }
        /*/////////////////////////////*/


/*Normal #Content children************************************************/

/*#Header***************************************************************************/

#Header {
        position: relative;
        float: left;
        text-align: left;
        width: 100vw;/*100%;*/
        height: 181px; /*****added*****/
        background-color: var(--dark-soft);
        border: 1px solid transparent;
        }

            /*/////////////////////*/
              @media screen
              and (max-width: 800px) {
                #Header {
                  padding-top: 0vw;
                  width: 80vw;
                  }
              }
            /*/////////////////////*/

/*Header classes******************************/

/*This makes HiddenMenu 'hide'*/
#Header.WithHiddenMenu {
      position:absolute;
      top: 0;
      left:0;
      right:0;
      width: 100vw;
      z-index:2;
    }

        /*/////////////////////////////*/
        /*This makes HiddenMenu always visible*/
        @media screen
        and (max-width: 800px) {
                #Header.WithHiddenMenu
                {margin-top: 50px;
                padding-top: 30px;
                height: 120px;
                z-index: 2;
                }
        }
        @media screen
        and (max-width: 650px) {
                #Header.WithHiddenMenu
                {margin-top: 69px;
                padding-top: 30px;
                height: 100px;
                z-index: 2;
                }
        }
        /*/////////////////////////////*/


/*Header children and styles************************************************************/

#Header-Image {
       position: relative;
       float: left;
       clear: none;
       width: 120px;
       height: 120px;
       margin-top: 0px;
       margin-right: 0px;
       margin-bottom: 10px;
       margin-left: 0px;
       background-image: url("https://delpo.prp.usp.br/Images/delpo_logo.png");
       background-repeat: no-repeat;
       background-position: center;
       background-size: 100px 100px;
       background-color: transparent;
       border: 1px solid transparent;
      }

      /*/////////////////////////////*/
      @media screen
        and (max-width: 650px) {
                #Header-Image {
                  width: 70px;
                  height: 70px;
                  margin-top: 5px;
                  margin-right: 0px;
                  margin-bottom: 10px;
                  margin-left: 0px;
                  background-size: 70px 70px;
                }
        }
        /*/////////////////////////////*/

#Header-Title {
       position: relative;
       float: left;
       clear: none;
       width: auto;
       height: 120px;
       padding-top: 5px;
       padding-bottom: 0px;
       margin-top: 0px;
       margin-right: 0px;
       margin-bottom: 5px;
       margin-left: 0px;
       text-align: left;
       border: 1px solid transparent;
    }

         /*/////////////////////////////*/
         /*Set height to Header-Title*/
         @media screen
         and (max-width: 800px) {
                 #Header-Title {
                  height: 120px;
                  padding-top: 0;
                  padding-bottom: 0;
                  margin-top:0;
                  margin-bottom: 10px;
                 }
             }
         @media screen
         and (max-width: 650px) {

                 #Header-Title {
                     height: 90px;
                     width: 265px;
                     margin-left: 5px;
                     margin-top: 0 !important; /*to override type.less 9*/
                     padding-top: 0;
                 }
             }
             @media screen
             and (max-width: 320px) {

                     #Header-Title {
                         height: 90px;
                         width: 230px;
                         margin-left: 5px;
                         margin-top: 0 !important; /*to override type.less 9*/
                         padding-top: 0;
                     }
                 }
         /*/////////////////////////////*/

        /*Header elements styles***********************************************************/

        #Header-Title h1  {
         padding-left: 0.2rem;
         padding-top: 0px;
         padding-bottom: 0px;
         margin-bottom: 1px;
         font-size: 1.6rem;
         font-weight: normal;
         text-align: left;
        }

         #Header-Title p {
         padding-left: 0.2rem;
         padding-top: 0px;
         padding-bottom: 0px;
         margin-top: 0px;
         font-size: 1.2rem;
         font-weight: normal;
         text-align: left;
        }

        /*/////////////////////////////////////////////////*/
        @media screen
              and (max-width: 800px) {
                #Header-Title h1 {font-size: 1.15rem;}
                #Header-Title p {font-size: 0.8rem;}
                }
        @media screen
              and (max-width: 320px) {
                #Header-Title h1 {font-size: 1rem;}
                #Header-Title p {font-size: 0.7rem;}
                }
         /*/////////////////////////////////////////////////*/

        /*Header-Title color classes************************************************************/

        #Header-Title.black {color: #000000;}
        #Header-Title.black h1 {color: #000000;}
        #Header-Title.black p {color: #333333;}
        #Header-Title.white  {color: #ffffff;}
        #Header-Title.white h1 {color: #ffffff;}
        #Header-Title.white p {color: var(--offwhite);}

       /*Header-Title elements*****************************************************/

        #Header-Title a:link {
            color: #ffffff;
            text-decoration: none;
           }
        #Header-Title   a:visited {
            color: #ffffff;
            text-decoration: none;
           }
        #Header-Title   a:hover {
            color: #ffffff;
            text-decoration: none;
            background: transparent;
           }
         .h1link a:link {
            background-color: transparent;
            color:  #ffffff;
            text-decoration: none;
            }
         .h1link a:visited {
            background-color: transparent;
            color:  #ffffff;
            text-decoration: none;
            }
         .h1link a:hover {
            background-color: transparent;
            color: #ffffff;
            text-decoration: none;
            }


/*#Header child : Navbar ************************************************************************************************************************/

#Navbar {
 float: left;
 padding-left: 0em;
 background-color: transparent;
 }

/*#Navbar classes******************************************************************/


/*DropdownNavbar
*/
/*Basic structure :
/*
/DropdownNavbar
//////dropdown
///////////falsebutton
///////////a
///////////i
////////////////a
*/

/*.DropdownNavbar*******************************************************************/


/*[1] CONTAINERS:==================================================================*/
/*Sizes, positions, colors==============================================================*/

/******************************/
/*Container I - DropdownNavbar*/

.DropdownNavbar  {
  overflow: hidden;
  z-index: 5;
  width: 100vw;
  padding-top: 0px;
  padding-bottom: 0px;
  height: 50px;
  font-size: 0.7rem;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  }

  .DropdownNavbar.shadowbottom {box-shadow: 0px 10px 25px -5px rgba(0,0,0,0.3);}
  .DropdownNavbar.borderbottom {border-bottom: 1px solid #333333;}

                /*/////////////////////////////////*/
                @media screen
                and (max-width: 800px) {
                .DropdownNavbar {
                    font-size: 0.75rem;
                    margin-bottom: 0;
                   }
                }
                /*TO HIDE DropdownNavbar in small screens
                when there is a HiddenMenu*/
                @media screen
                and (max-width: 800px) {
                        .DropdownNavbar.WithHiddenMenu {display: none;}
                        }
                /*/////////////////////////////*/

.DropdownNavbar.NH {
    margin: 0;
    background-color: var(--base);
    color: #ffffff;
    }

/* Dropdown content inside a #HiddenMenu(hidden by default) */
.DropdownNavbar.TopMenu {
    background-color: var(--dark-soft);
    }

.DropdownNavbar.falsehidden {
    z-index: 5000;
    }

    /*///////////////////////*/
    @media screen
    and (max-width: 800px) {
            .DropdownNavbar.TopMenu,
            .DropdownNavbar.falsehidden {
              width: 100vw;
              height: 50px;
              padding-top: 20px;
              background-color: var(--dark-soft);
              background: var(--dark-soft);
              box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.3);
              }
    }
    @media screen
    and (max-width: 800px) {
            .DropdownNavbar.long {
              width: 190px;
              }
    }
    /*///////////////////////*/



/****************************************/
/*Container II - DROPDOWN***************/

/*Size, position of the dropdown sub-container*/
/*dropdown class renamed to dropdown-1 to overide bootstrap less.css*/

.dropdown-1 {
    overflow: hidden;
    float: left;
    height: 50px;
    margin: 0;
    padding: 0;
    background-color: inherit;
}
  .dropdown-1.floatright {float: right;}

  /*/////////////////////////////////*/
  @media screen
  and (max-width: 800px) {
  .dropdown.TopMenu,
  .dropdown.falsehidden {background-color: transparent;}
  }

.dropdown-2 {
    overflow: hidden;
    float: left;
    height: 50px;
    margin: 0;
    padding: 0;
    background-color: inherit;
}

/****************************************/
/*Container III - DROPDOWN-CONTENT*******/

.dropdown-content,
.dropdown-content-2 {
  display: none;
  position: absolute;
}

/*.dropdown-active class: always display*/
.dropdown-content.dropdown-active {
  display: block;
  position: absolute;
}

.dropdown-content.NH.horizontal {
   z-index: 1;
   width: auto;
   height: 50px;
   margin-left: 130px;
   margin-top: -80px;
   background-color: var(--green-soft);
   box-shadow: 15px -10px 16px -10px rgba(0,0,0,0.5);
}

            /*/////////////////////////////////*/
            /*To turn horizontal to vertical; includes IPAD landscape set to 1120px*/
            @media screen
            and (max-width: 1024px) {
            .dropdown-content.NH.horizontal {
               z-index: 100;
               margin-top: -30px;
               margin-left: 0px;
               width: 150px;
               height: auto;
               background-color: #ffffff;
               box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
              }
            }

   /*FALSEBUTTON NH on hover - to go with content above*/
   .dropdown-content:hover .falsebutton.withcontent.NH.horizontal,
   .DropdownNavbar.NH .dropdown-1:hover .falsebutton.withcontent.NH.horizontal {
       background-color: var(--accent-lighter);
       box-shadow: -15px -5px 16px -10px rgba(0,0,0,0.5);
       }

.dropdown-content.NH.vertical {
  overflow: hidden;
  margin-top: -30px;
  width: 130px;
  height: auto;
  background-color: rgb(255,255,255,0.9);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
  }

            /*/////////////////////////////////*/
            /*To fix transparency problem in IPAD landscape*/
            @media screen
            and (max-width: 1024px) {
            .dropdown-content.NH.vertical {
                 background-color: #ffffff;
                 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
              }
            }

   /*FALSEBUTTON NH on hover - to go with content above*/
   .dropdown-content:hover .falsebutton.withcontent.NH.vertical,
   .DropdownNavbar.NH .dropdown-1:hover .falsebutton.withcontent.NH.vertical {
       background-color: var(--accent-lighter);
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
       }
            /*/////////////////////////////////*/
            @media screen
            and (max-width: 800px) {
            .dropdown-content.NH {
                height: auto;
                margin-left: 0;
                margin-top: 0;
              }
            }
            /*/////////////////////////////////*/


   /*FALSEBUTTON NH on hover - to go with content above*/
   .dropdown-content:hover .falsebutton.withcontent.NH.specialmenu,
   .DropdownNavbar.NH .dropdown-1:hover .falsebutton.withcontent.NH.specialmenu {
       background-color: var(--green-soft);
       box-shadow: -15px -5px 16px -10px rgba(0,0,0,0.5);
       }


/*SPECIAL MENUS*/

.dropdown-content.NH.with2 {
   z-index: 100;
   width: 150px;
   height: auto;
   margin-top: -30px;
   margin-left: 0px;
   background-color: rgb(255,255,255,0.9);
   box-shadow: 15px -10px 16px -10px rgba(0,0,0,0.5);
}

/*hover behavior*/
.dropdown-content.with2:hover .falsebutton.withcontent.NH.specialmenu,
.DropdownNavbar.NH .dropdown-1:hover .dropdown-content.with2 .falsebutton.withcontent.NH.specialmenu {
    background-color:  rgb(255,255,255,0.9);
    box-shadow: -15px -5px 16px -10px rgba(0,0,0,0.5);
    }

/*different margin*/
.dropdown-content-2.vertical {
  overflow: hidden;
  margin-top: 0px;
  width: 100px;
  height: auto;
  background-color: rgb(255,255,255,0.9);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
  }

            /*/////////////////////////////////*/
            /*To fix transparency problem in IPAD landscape*/
            @media screen
            and (max-width: 1024px) {
            .dropdown-content-2.vertical {
               background-color: #ffffff;
               box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
              }
            }
            /*to make dropdown-content 2 larger and move to the right*/
            /*only in small screens (green menu)*/
            @media screen
            and (max-width: 1024px) {
            .dropdown-content-2.vertical {
               width: 150px;
               margin-left: 150px;
               margin-top: -50px;
              }
            }
            /*to make dropdown-content 2 larger and move to the right*/
            /*always (in with-2 menus)*/
            .dropdown-content-2.vertical.always {
               width: 150px;
               margin-left: 148px;
               margin-top: -50px;
              }

.dropdown-content.TopMenu,
.dropdown-content.falsehidden {
    overflow-y: auto;
    z-index: 100;
    width: 130px;/*100vw;*/
    margin-top: 50px;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-left: 1px solid #999999;
    background-color: var(--dark-soft);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
  }

            /*///////////////////////*/
            @media screen
            and (max-width: 800px) {
                    .dropdown-content.TopMenu,
                    .dropdown-content.falsehidden {
                        width: 160px;
                        background:rgba(255,255,255);
                    }
            }
            /*///////////////////////*/

.dropdown-content.TopMenu.NH,
.dropdown-content.falsehidden.NH {
    overflow-y: auto;
    width: 115px;
    margin-top: 50px;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    background-color: var(--dark-soft);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
  }


.dropdown-content.long.NH {
    z-index: 5;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 50px;
    width: 180px;
    height: 80vh;
    border-right: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-left: 1px solid #999999;
    background-color: #ffffff;
    background:rgba(255,255,255, 1);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
}

                /*/////////////////////////////////*/
                @media screen and (max-width: 800px) {
                .dropdown-content.long {
                  width: inherit;
                  background-color: #ffffff;
                  background:rgba(255,255,255, 0.9);
                  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
                }
            }

/*Styled scrollbar for dropdown-content*/
.dropdown-content.long::-webkit-scrollbar-track {
  	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  	border-radius: 10px;
  	background-color: #F5F5F5;
}

.dropdown-content.long::-webkit-scrollbar {
  	width: 8px;
  	background-color: #F5F5F5;
}

.dropdown-content.long::-webkit-scrollbar-thumb {
  	border-radius: 10px;
  	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  	background-color: var(--base);
}

/******************************/
/*Sub-Containers: FALSEBUTTONS*/
/*Size and position*/

.falsebutton {
    height: 50px;
    width: 55px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0;
    font-size: inherit;
}
            /*///////////////////////*/
            @media screen
            and (max-width: 800px) {
                    .falsebutton {width: 45px;}
            }
            /*///////////////////////*/

.falsebutton.NH {
   width: 85px;
   text-align: left;
   }

.falsebutton.TopMenu.NH,
.falsebutton.falsehidden.NH {
   width: 50px;
   text-align: left;
   }

.falsebutton.NH {text-align: center;}

.falsebutton.TopMenu,
.falsebutton.falsehidden {
  float: left;
  text-align: left;
  background-color: transparent;
}

            /*/////////////////////////*/
            @media screen
            and (max-width: 800px) {
              .falsebutton-long {
                  width: 100%;
                  height: 45px;}
                  }
                .falsebutton.TopMenu.NH,
                .falsebutton.falsehidden.NH {
                  width: width: 45px;}
                  }
            /*/////////////////////////*/

/*Width of falsebuttons with content*/

.falsebutton.withcontent {
    width: 70px;
    background-color: transparent;
}
.falsebutton.withcontent.NH {
    width: 100px;
    background-color: transparent;
}
.falsebutton.withcontent.TopMenu,
.falsebutton.withcontent.falsehidden {
    width: 60px;
    background-color: transparent;
}
                /*///////////////////////*/
                @media screen
                and (max-width: 800px) {
                        .falsebutton.withcontent
                        {width: 60px;
                        background-color: var(--base)}
                }
                /*///////////////////////*/

 .falsebutton.withcontent.specialmenu.NH,
 .falsebutton.specialmenu.NH {
    min-width: 100px;
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

            /*/////////////////////////////////*/
            /*to make buttons larger, covering the dropdown-content*/
            @media screen
            and (max-width: 1024px) {
                .falsebutton.withcontent.specialmenu.NH,
                .falsebutton.specialmenu.NH {
                   min-width: 150px;
                  }
            }

/*========================================*/
/*[2] LINKS ==============================*/
/*    Link sizes and positions   */

.DropdownNavbar a {
  font-family: inherit;
  text-decoration: inherit;
  text-transform: inherit;
  font-size: inherit;
}
            /*/////////////////////////*/
             @media screen
            and (max-width: 800px) {
            .DropdownNavbar a {font-size: inherit;}
            }
            /*//////////////////////////*/

.DropdownNavbar.NH a {
  float: left;
  text-align: left;
}
            /*/////////////////////////*/
             @media screen
            and (max-width: 800px) {
            .DropdownNavbar a {float: left;}
            }
            /*//////////////////////////*/

.falselink:link {
    text-transform: none;
    color: #999999;
}

/* Links inside the dropdown */

                /*////////////////////////////////////////////*/
                /*Less padding, for button to fit on bar*/
                @media screen
                and (max-width: 800px) {
                .DropdownNavbar-long a {
                    display: block;
                    color: inherit;
                    padding-top: 2px;
                    padding-bottom: 1px;
                    padding-left: 0.3125em;
                    padding-right: 0.3125em;
                    text-decoration: none;
                    text-transform: uppercase;
                    font-size: inherit;
                    }
                }
                /*////////////////////////////////////////////*/



/* Links inside the dropdown-content */

.dropdown-content a,
.dropdown-content-2 a  {
    text-align: left;
    padding-top: 17px;
    padding-bottom: 18px;
    padding-left: 15px;
    padding-right: 15px;
}

.dropdown-content.NH a {
  display: inline-block;
  float: none;
}

.dropdown-content.NH.vertical a,
.dropdown-content-2.NH.vertical a {
  width: 100%;
  padding-left: 10px;
}

      @media screen and (max-width: 1120px) {
          .dropdown-content.NH.horizontal a {
            width: 100%;
            padding-left: 10px;
          }
        }

.dropdown-content.TopMenu a,
.dropdown-content.falsehidden a {
    display: block;
    float: none;
}
            /*/////////////////////////////////*/
            @media screen and (max-width: 800px) {
             .dropdown-1:hover .dropdown-content.NH a,
             .dropdown-1:hover .dropdown-content.HD a,
             .dropdown-1:hover .dropdown-content.MAP a
             {display: block; }
            }
            /*/////////////////////////////////*/

.dropdown-content.long a {
  display: block;
  float: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0.6250em;
  padding-right: 0.3125em;
  width: 100%;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
                /*///////////////////////////////////////////*/
                /*to normalize dropdown-content links padding*/
                @media screen
                and (max-width: 800px) {
                .dropdown-content.long a {
                    padding-top: 20px;
                    padding-bottom: 20px;
                    }
                }
                /*///////////////////////////////////////////*/

/*=======================================*/
/*HOVER BEHAVIOURS=======================*/
/*=======================================*/


/*LINKS: COLORS AND HOVER COLORS=================*/

/*Links in the navbar========================*/

.DropdownNavbar.NH a:link {
  background-color: transparent;
  color: #000000;
}

.DropdownNavbar.NH a:visited {
  background-color: transparent;
  color: #000000;
}

.DropdownNavbar.NH a:hover {
  background-color: var(--accent-lighter);
  color: #ffffff;
}

/*Links in the dropdown content========================*/

.DropdownNavbar.NH .dropdown-content.NH.horizontal a:link {
  background-color: transparent;
  color: #000000;
}

.DropdownNavbar.NH .dropdown-content.NH.horizontal a:visited {
  background-color: transparent;
  color: #000000;
}

.DropdownNavbar.NH .dropdown-content.NH.horizontal a:hover {
  background-color: var(--accent-lighter);
  color: #000000;
}

.DropdownNavbar.NH .dropdown-content.NH.vertical a:link {
  background-color: transparent;
  color: #000000;
}

.DropdownNavbar.NH .dropdown-content.NH.vertical a:visited {
  background-color: transparent;
  color: #000000;
}

.DropdownNavbar.NH .dropdown-content.NH.vertical a:hover {
  background-color: var(--accent-lighter);
  color: #000000;
}

            /*/////////////////////////*/
            @media screen
            and (max-width: 800px) {
                        .DropdownNavbar a:hover
                        {color: #999999; background-color: #ffffff;}
            }

.dropdown-content.NH .activelink {
      background-color: transparent;
      color: #ffffff;
    }
        /*////////////////////////////////////////////*/
        @media screen
        and (max-width: 800px) {
                .DropdownNavbar.NH .dropdown-content.NH a:link,
                .DropdownNavbar.NH .dropdown-content.NH a:visited
                {text-decoration: none; color: #000000;}
                }

        @media screen
        and (max-width: 800px) {
                .DropdownNavbar.NH .dropdown-content a:hover
                {text-decoration: none; color: #999999; background-color: #ffffff}
                }
        /*///////////////////////////////////////////*/

/*Links in the navbar
 * in HIDDEN and FALSEHIDDEN navbars********************/

    .DropdownNavbar.TopMenu a:link,.
    .dropdown-1.TopMenu a:link,
    .falsebutton.TopMenu a:link,
    .falsebutton.withcontent.TopMenu,
    .falsebutton.TopMenu,
    .TopMenuLink a:link {
          text-decoration: none;
          color: #ffffff;
          background: transparent;
          }

    .DropdownNavbar.TopMenu a:visited,
    .dropdown-1.TopMenu a:visited,
    .falsebutton.TopMenu a:visited,
    .falsebutton.withcontent.TopMenu,
    .falsebutton.TopMenu,
    .TopMenuLink a:visited {
          text-decoration: none;
          color: #ffffff;
          background: transparent;
          }

    .DropdownNavbar.TopMenu a:hover,
    .dropdown-1.TopMenu a:hover,
    .falsebutton.TopMenu a:hover,
    .falsebutton.withcontent.TopMenu,
    .falsebutton.TopMenu,
    .TopMenuLink a:hover {
          text-decoration: none;
          color: #ffffff;
          background: transparent;
          }

/*SPECIAL MENU*/
    .falsebutton.withcontent.specialmenu,
    .falsebutton.specialmenu {
          text-decoration: none;
          color: #ffffff;
          background: var(--green-soft);
    }

    .falsebutton.withcontent.specialmenu:hover,
    .falsebutton.specialmenu:hover {
          text-decoration: none;
          color: #ffffff;
          background: var(--accent);
    }

    .dropdown-1.specialmenu a:link,
    .dropdown-1.specialmenu.withcontent a:link,
    .falsebutton.specialmenu a:link {
          text-decoration: none;
          color: #ffffff;
          background-color: var(--green-soft);
          }
    .dropdown-1.specialmenu a:visited,
    .dropdown-1.specialmenu.withcontent a:visited,
    .falsebutton.specialmenu a:visited {
          text-decoration: none;
          color: #ffffff;
          background-color: var(--green-soft);
          }
    .dropdown-1.specialmenu a:hover,
    .dropdown-1.specialmenu.withcontent a:hover,
    .falsebutton.specialmenu a:hover {
          text-decoration: none;
          color: #ffffff;
          background-color: var(--accent);
          }

    .dropdown-2.always a:link,
    .dropdown-content-2.always a:link {
          text-decoration: none;
          color: #000000;
          background-color: transparent;
          }

    .dropdown-2.always a:visited,
    .dropdown-content-2.always a:visited {
          text-decoration: none;
          color: #000000;
          background-color: transparent);
          }

    .dropdown-2.always a:hover,
    .dropdown-content-2.always a:hover {
          text-decoration: none;
          color: #ffffff;
          background-color: var(--accent);
          }

    .dropdown-content.with2 .dropdown-2.always .falsebutton.withcontent.specialmenu,
    .dropdown-content.with2 .dropdown-2.always .falsebutton.specialmenu {
          text-decoration: none;
          color: #000000;
          background: transparent;
    }
    .falsebutton.withcontent.specialmenu.with2:hover,
    .falsebutton.specialmenu.with2:hover {
          text-decoration: none;
          color: #ffffff;
          background: var(--accent-lighter);
    }


/*Links in the dropdown content
  --in HIDDEN and FALSEHIDDEN navbars ********************/

    .dropdown-content.TopMenu a:link {
          text-decoration: none;
          color: #999999;
          background: transparent;
          }

    .dropdown-content.TopMenu a:visited {
          text-decoration: none;
          color: #999999;
          background: transparent;
          }

    .dropdown-content.TopMenu a:hover {
          text-decoration: none;
          color: var(--accent-light);
          background: #ffffff;
          }

    .DropdownNavbar.falsehidden a:link,
    .dropdown-1.falsehidden a:link,
    .falsebutton.falsehidden a:link {
          text-decoration: none;
          color: #ffffff;
          background: transparent;
          }

    .DropdownNavbar.falsehidden a:visited,
    .dropdown-1.falsehidden a:visited,
    .falsebutton.falsehidden a:visited {
          text-decoration: none;
          color: #ffffff;
          background: transparent;
          }

    .DropdownNavbar.falsehidden a:hover,
    .dropdown-1.falsehidden a:hover,
    .falsebutton.falsehidden a:hover {
          text-decoration: none;
          color: #ffffff;
          background: transparent;
          }

    .dropdown-content.falsehidden a:link {
          text-decoration: none;
          color: #999999;
          background: transparent;
          }

    .dropdown-content.falsehidden a:visited {
          text-decoration: none;
          color: #999999;
          background: transparent;
          }

    .dropdown-content.falsehidden a:hover {
          text-decoration: none;
          color: var(--accent-light);
          background: #ffffff;
          }

            /*////////////////////////////////////////////*/
            @media screen
            and (max-width: 800px) {
                    .dropdown-content.TopMenu a:link,
                    .dropdown-content.TopMenu a:visited
                    {text-decoration: none; color: #000000;}
                    }
            @media screen
            and (max-width: 800px) {
                    .dropdown-content.TopMenu a:hover
                    {text-decoration: none; color: #999999;}
                    }

            @media screen
            and (max-width: 800px) {
                     .DropdownNavbar.TopMenu a:link,
                     .dropdown-1.TopMenu a:link,
                     .falsebutton.TopMenu a:link,
                     .falsebutton.withcontent.TopMenu {
                           text-decoration: none;
                           color: #ffffff;
                           background-color: transparent;
                           }

                     .DropdownNavbar.TopMenu a:visited,
                     .dropdown-1.TopMenu a:visited,
                     .falsebutton.TopMenu a:visited,
                     .falsebutton.withcontent.TopMenu {
                           text-decoration: none;
                           color: #ffffff;
                           background-color: transparent;
                           }

                     .DropdownNavbar.TopMenu a:hover,
                     .dropdown-1.TopMenu a:hover,
                     .falsebutton.TopMenu a:hover,
                     .falsebutton.withcontent.TopMenu a:hover{
                           text-decoration: none;
                           color: #ffffff;
                           background-color: #ffffff;
                           }
            }

            @media screen
            and (max-width: 800px) {
                    .dropdown-content.falsehidden a:link,
                    .dropdown-content.falsehidden a:visited
                    {text-decoration: none; color: #000000;}
                    }

            @media screen
            and (max-width: 800px) {
                    .dropdown-content.falsehidden a:hover
                    {text-decoration: none; color: #999999;}
                    }

            @media screen
            and (max-width: 800px) {
                     .DropdownNavbar.falsehidden a:link,
                     .dropdown-1.falsehidden a:link,
                     .falsebutton.falsehidden a:link,
                     .falsebutton.withcontent.falsehidden {
                           text-decoration: none;
                           color: #ffffff;
                           background-color: transparent;
                           }

                     .DropdownNavbar.falsehidden a:visited,
                     .dropdown-1.falsehidden a:visited,
                     .falsebutton.falsehidden a:visited,
                     .falsebutton.withcontent.falsehidden {
                           text-decoration: none;
                           color: #ffffff;
                           background-color: transparent;
                           }

                     .DropdownNavbar.falsehidden a:hover,
                     .dropdown-1.falsehidden a:hover,
                     .falsebutton.falsehidden a:hover,
                     .falsebutton.withcontent.falsehidden a:hover{
                           text-decoration: none;
                           color: #ffffff;
                           background-color: #ffffff;
                           }
            }

/*Links in the dropdown content
 *  --with LONG class********************/


.DropdownNavbar.TopMenu .dropdown-content.NH.long a:link,
.DropdownNavbar.falsehidden .dropdown-content.NH.long a:link {
  background-color: transparent;
  color: #000000;
}

.DropdownNavbar.TopMenu .dropdown-content.NH.long a:visited,
.DropdownNavbar.falsehidden .dropdown-content.NH.long a:visited {
  background-color: transparent;
  color: #000000;
}

.DropdownNavbar.TopMenu .dropdown-content.NH.long a:hover,
.DropdownNavbar.falsehidden .dropdown-content.NH.long a:hover {
  background-color: var(--accent-lighter);
  color: #000000;
}


/*///////////////////////////////////////////*/


/*CONTAINER HOVER BEHAVIOURS=======================================================*/
/*dropdown, falsebutton, dropdown-content*/

/*DISPLAY x NOT DISPLAY dropdown-content*/

        /* Show the dropdown menu on hovering the dropdown or dropdown-content*/
        .DropdownNavbar .dropdown-1:hover .dropdown-content,
        .DropdownNavbar .dropdown-1 .dropdown-content:hover,
        .DropdownNavbar .dropdown-1:hover
        {display: block;  z-index: 10000;}

        /* Show the dropdown menu on hover */
        .DropdownNavbar .dropdown-2:hover .dropdown-content-2,
        .DropdownNavbar .dropdown-2 .dropdown-content-2:hover,
        .DropdownNavbar .dropdown-2:hover
        {display: block;   z-index: 10000;}

/*COLORS*/
/*these styles supersede the simple a styles above*/

        /*Make active button turn white
              when others are hovered*/

        .DropdownNavbar:hover .falsebutton.active,
        .dropdown-1:hover .falsebutton.active {
          background: none;
          background-color: transparent;
          color:#000000;
        }

        /*Makes .hold button show a border
              when dropdown-content is shown*/

        .falsebutton.withcontent.hold {width: 130px;}
        .falsebutton.withcontent.hold.NH {width: 86px;}
        .falsebutton.withcontent.hold.long {width: 150px;}
        .falsebutton.withcontent.TopMenu.hold.long {width: 150px;}
        .falsebutton.withcontent.falsehidden.hold.long {width: 150px;}

                /*//////////////////////////////*/
                @media screen
                and (max-width: 800px) {
                            .falsebutton.withcontent.hold {width: 130px;}
                              }
                /*//////////////////////////////*/


        /*Makes a border around the .hold button
        when the dropdown content is shown */
        /*goes with a dropdown-content with the same borders*/
        .dropdown-1:hover .falsebutton.hold {
            background-color: #ffffff;
            border-top: 1px solid #cccccc;
            border-right: 1px solid #cccccc;
            border-left: 1px solid #cccccc;
        }

        /*PLUS:
         makes the text turn black
        when the dropdown content is shown - class HIDDEN and FALSEHIDDEN*/
        /*goes with a dropdown-content with the same borders*/
        .dropdown-1:hover .falsebutton.TopMenu.hold,
        .dropdown-1:hover .falsebutton.falsehidden.hold {color: #000000;}


        /*Makes button text white, falsebutton.withcontent
              and keep white on hover, all*/

        .falsebutton.HD:hover {color: #ffffff; background-color: var:(--accent);}
        .falsebutton.TopMenu:hover {color: var(--accent-light); background-color: transparent;}
        .falsebutton.falsehidden:hover {color: #ffffff; background-color: transparent;}
        .falsebutton.withcontent.specialmenu:hover {color: #ffffff; background-color: var(--accent);}

                     /*//////////////////////////////*/
                    @media screen
                    and (max-width: 800px) {
                     .falsebutton.TopMenu:hover {color: #ffffff; background-color: transparent;}
                     .falsebutton.falsehidden:hover {color: #ffffff; background-color: transparent;}

                    }

        /*preparation in a:link styles*/
        .falsebutton.active a:link {color: inherit; background-color: transparent;}
        .falsebutton.active a:visited {color: inherit; background-color: transparent;}
        .falsebutton.active a:hover {color: inherit; background-color: transparent;}

        .falsebutton.withcontent a:link {color: inherit; background-color: transparent;}
        .falsebutton.withcontent a:visited {color: inherit; background-color: transparent;}
        .falsebutton.withcontent a:hover {color: inherit; background-color: transparent;}

        .falsebutton:hover a:link {color: inherit; background-color: transparent;}
        .falsebutton:hover a:visited {color: inherit; background-color: transparent;}
        .falsebutton:hover a:hover   {color: inherit; background-color: var:(--accent);}


        /*For the blue hidden navbar*/
        .falsebutton.withcontent.TopMenu a:link {color: #ffffff; background-color: transparent;}
        .falsebutton.withcontent.TopMenu a:visited {color: #ffffff; background-color: transparent;}
        .falsebutton.withcontent.TopMenu a:hover {color: #ffffff; background-color: transparent;}

        .falsebutton.TopMenu:hover a:link {color: #ffffff; background-color: transparent;}
        .falsebutton.TopMenu:hover a:visited {color: #ffffff;/ background-color: transparent;}
        .falsebutton.TopMenu:hover a:hover {color: #ffffff; background-color: var:(--accent);}

        .falsebutton.specialmenu:hover a:link {color: #ffffff; background-color: transparent;}
        .falsebutton.specialmenu:hover a:visited {color: #ffffff; background-color: transparent;}
        .falsebutton.specialmenu:hover a:hover {color: #000000; background-color: transparent;}


        /*Controls colors in button texts on dropdown hover*/
        /*falsebuttons, falsebuttons.withcontent*/

        .DropdownNavbar.NH .dropdown-1 .falsebutton:hover,
        .DropdownNavbar.NH .dropdown-1:hover {color: #000000;}

        /*.DropdownNavbar.TopMenu .dropdown.TopMenu .falsebutton.TopMenu:hover,*/
        .DropdownNavbar.TopMenu .dropdown-1.TopMenu:hover {color: #ffffff;}

        /*for horizontal  button on hover*/
        .DropdownNavbar.NH .dropdown-1:hover .falsebutton.withcontent {
            color: #000000;
            box-shadow: -2px 20px 48px -10px rgba(0,0,0,0.1);
            background-color: var(--green-soft);
        }

        /*for specialmenu button on hover*/
        .DropdownNavbar.NH .dropdown-1.specialmenu:hover .falsebutton.withcontent.specialmenu,
        .DropdownNavbar.NH .dropdown-2.specialmenu:hover .falsebutton.withcontent.specialmenu {
            color: #000000;
            box-shadow: -2px 20px 48px -10px rgba(0,0,0,0.1);
            background-color: var(--accent-lighter);
        }

                /*//////////////////////////////*/
                    @media screen
                    and (max-width: 800px) {
                        .DropdownNavbar.NH .dropdown-1 .falsebutton:hover,
                        .DropdownNavbar.NH .dropdown-1:hover {
                            color: #000000;
                            background: none;
                            box-shadow: none;
                        }
                    }
                     @media screen
                     and (max-width: 800px) {
                        .dropdown-1:hover .falsebutton.hold.NH {
                         color: #000000;
                         background-color: #ffffff;
                         border-top: 1px solid #cccccc;
                         border-right: 1px solid #cccccc;
                         border-left: 1px solid #cccccc;
                        }
                    }

                /*Adds border to falsebutton.withcontent on hover*/
                @media screen
                and (max-width: 800px) {
                    .DropdownNavbar.NH .dropdown-1 .falsebutton.withcontent:hover {
                        border-top: 1px solid #999999;
                        border-left: 1px solid #999999;
                        border-right: 1px solid #999999;
                        width: 100px;
                    }
                }
                /*/////////////////////////////////*/


/*For shadows*/
/*=Adds dark shadow around white dropdown navbar on hover*/
.DropdownNavbar.NH .dropdown-1.NH:hover {box-shadow: -2px 10px 20px -5px rgba(0,0,0,1); }

                /*//////////////////////////////*/
                /*Hover on dropdown - no shaddow*/
                @media screen
                and (max-width: 800px) {
                            .DropdownNavbar.NH .dropdown-1.HD:hover,
                            .DropdownNavbar.NH .falsebutton.HD:hover
                            {box-shadow: none;}
                }

                /*with styles: white transparent bg, WHITE hover*/
                /*may be left out > menus on dropbox-container will simply never show*/

                @media screen and (max-width: 800px) {
                    .DropdownNavbar.NH .dropdown-1:hover .dropdown-content.NH {
                      display: block;
                      width: 130px;
                      margin-top: -33px;
                      margin-left: 0;
                      background: rgba(255,255,255, 0.9);
                      border-left: 1px solid #999999;
                      border-right: 1px solid #999999;
                      border-bottom: 1px solid #999999;
                    }
                }

                /*Makes a border around the button
                when the dropdown content is shown */
                /*goes with a dropdown-content with the same borders*/
                 @media screen and (max-width: 800px) {
                    .dropdown-content:hover .falsebutton.withcontent.NH,
                    .DropdownNavbar.NH .dropdown-1:hover .falsebutton.withcontent.NH {
                        width: 100px;
                        border-top: 1px solid #999999;
                        border-right: 1px solid #999999;
                        border-left: 1px solid #999999;
                        }
                 }

                /*Turns right arrow into down arrow*/
                 @media screen and (max-width: 800px) {
                           .falsebutton.withcontent.NH .right {
                               transform: rotate(45deg);
                               -webkit-transform: rotate(45deg);
                               }
                        }
              /*//////////////////////////////*/



        /* BUG!*/
        /* Remove extra black hover color in falsebutton link, HD and HD/MAP pages  */
        .falsebutton a:hover,
        .falsebutton.withcontent a:hover {
          background-color: transparent;
        }


      .falsebutton.withcontent.specialmenu.NH.veryfalse {
       background: none;
       background-color: transparent;
       color: #ffffff;
       box-shadow: box-shadow: -2px 20px 48px -10px rgba(0,0,0,0.0);
      }

       .falsebutton.withcontent.specialmenu.NH.veryfalse:hover {
       background: none;
       background-color: transparent;
       color: #ffffff;
       box-shadow: box-shadow: -2px 20px 48px -10px rgba(0,0,0,0.0);
      }


      /*******************************************************************************/
      /*special menu 'with-2'
       *overrides*/

      .dropdown-content.NH.with2 {
          z-index: 100;
          width: 147px;/*100vw;*/
          margin-top: -30px;
          margin-left: 0px;
          background-color: rgb(255,255,255,0.8);
          box-shadow: 15px 5px 16px -10px rgba(0,0,0,0.5);
          text-align: left;
      }

      /*hover behavior*/
      .dropdown-content.with2:hover .falsebutton.withcontent.NH.specialmenu,
      .DropdownNavbar.NH .dropdown-1:hover .dropdown-content.with2 .falsebutton.withcontent.NH.specialmenu {
        background-color: transparent;
        background: transparent;
        box-shadow: 15px 5px 16px -10px rgba(0,0,0,0.5);
      }

      .dropdown-content.with2 .falsebutton.withcontent.NH.specialmenu:hover,
      .DropdownNavbar.NH .dropdown-1 .dropdown-content.with2 .falsebutton.withcontent.NH.specialmenu:hover {
        background-color: var(--accent-lighter);
        background: var(--accent-lighter);
        box-shadow: 15px 5px 16px -10px rgba(0,0,0,0.5);
      }

      .dropdown-content-2.vertical.with2 {
        overflow: hidden;
        margin-top: 0px;
        width: 100px;
        height: auto;
        background-color: rgb(255,255,255,0.8);
        background: rgb(255,255,255,0.8);
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
      }

      /*to make dropdown-content 2 larger and move to the right*/
      /*always (in with-2 menus)*/
      .dropdown-content-2.vertical.with2 {
        width: 147px;
        margin-left: 148px;
        margin-top: -50px;
      }

      .falsebutton.with2 {width: 100%;}

      .dropdown-content.with2 a {
        display: inline-block;
        float: left;
        width: 117px;
      }

      .dropdown-2.with2 a:link,
      .dropdown-content-2.with2 a:link,
      .falsebutton.specialmenu.with2 a:link,
      .specialmenu.with2 a:link {
        text-decoration: none;
        color: #000000;
        background: transparent;
        background-color: transparent;
      }

      .dropdown-2.with2 a:visited,
      .dropdown-content-2.with2 a:visited
      .falsebutton.specialmenu.with2 a:visited,
      .specialmenu.with2 a:visited {
        text-decoration: none;
        color: #000000;
        background: transparent;
        background-color: transparent;
      }

      .dropdown-2.with2 a:hover,
      .dropdown-content-2.with2 a:hover,
      .falsebutton.specialmenu.with2 a:hover
      .specialmenu.with2 a:hover {
        text-decoration: none;
        color: #000000;
        background: var(--accent-lighter);
        background-color:  var(--accent-lighter);
      }

      .falsebutton.withcontent.specialmenu.with2,
      .falsebutton.specialmenu.with2 {
        text-decoration: none;
        color: #ffffff;
        background: transparent;
        background-color: transparent;
      }
      .falsebutton.withcontent.specialmenu.with2:hover,
      .falsebutton.specialmenu.with2:hover {
        text-decoration: none;
        color: #ffffff;
        background: var(--accent-lighter);
        background-color:  var(--accent-lighter);
      }

/*DropdownNavbar styles END============================================================================*/
/*=============================================================================================*/




/*#Main classes*********************************************************************/

/*Classes to alter the background*/
/*To change only background colors use
 *.fullwhite, . fullblack, .transp below*/


/*background*/

#Main.NH {background-color: var(--dark-soft);}


/*Classes to alter the float propreties*/

/*for pages with a sidebar*/
#Main.Float {
    overflow: hidden;
    position: relative;
    float: left;
    clear: none;
    }

/*Classes to alter width and padding*/
/*see FULLWIDTH below (also for MainEntry)*/

/*Class to alter the top margin***********************/
/*Go with hidden menu*/

/*This makes HiddenMenu hide and adjusts the inside of #Main*/
#Main.WithHiddenMenu {
    position:relative;
    float: left;
    z-index: auto;
    margin-top: 130px;
    padding-top: 50px;
	}
        /*/////////////////////////////*/
        /*This makes Hidden manu always show*/
        @media screen
        and (max-width: 800px) {
                #Main.WithHiddenMenu {
                    margin-top: 69px;
                    padding-top: 150px;
                }
            }
        @media screen
        and (max-width: 650px) {
                #Main.WithHiddenMenu {
                    margin-top: 69px;
                    padding-top: 130px;
                }
            }
        /*/////////////////////////////*/


/*#Main children***********************************************************************/

        /*#Sidebar floats to the left; its sister #Entry must be class .MainEntry-Float*/
        /*#Sidebar is predicted as transparent; background styles must be classes*/
        /*#Sidebar floats and is predicted for one #Entry on the left only*/

        #Sidebar {
            float: left;
            position: relative;
            width: 27vw;
            }

/*#Sidebar classes*******************************************************************/

        .SidebarWidget {padding: 2vw;}

                  /*///////////////////////////////////////*/
                  /*TO MAKE #Sidebar float below the Entry*/
                  /*(to hide sidebar widget with the tagcloud, just put {display: none})*/

                    @media screen and (max-width: 800px) {
                        #Sidebar {width: 85vw;}
                        }

                     /*TO MAKE .SidebarWidget fit in the wider #Sidebar*/
                    @media screen and (max-width: 800px) {
                        .SidebarWidget {
                            padding-top: 4vw;
                            padding-right: 0vw;
                            padding-bottom: 3vw;
                            padding-left: 1vw;
                            }
                        }
                 /*///////////////////////////////////////*/

/*#Entry classes*******************************************************************/

        /*Size, borders, paddings; default background*/
        .MainEntry {
            padding-top: 1vw;
            padding-right: 1vw;
            padding-bottom: 1vw;
            padding-left: 1vw;
            width: 55vw;
        }

            /*//////////////////////////////////*/
            @media screen and (max-width: 800px) {
            .MainEntry {
                    width: 85vw;
                    padding-top: 1vw;
                    padding-right: 1vw;
                    padding-bottom: 1vw;
                    padding-left: 1vw;
                    }
            }
            /*//////////////////////////////////*/

/*BG COLOR classes*/
/*Also used in #Main*/

        /*Opacque white background*/
        .fullwhite {
            background-color: #ffffff;
            background: rgba(255,255,255, 1);
            background-image: none;
             }

            /*link colors for fullwhite content*/
            .MainEntry.fullwhite a:link {color: var(--lighter); background-color: transparent;}
            .MainEntry.fullwhite a:visited {color: var(--light); background-color: transparent;}
            .MainEntry.fullwhite a:hover {color: var(--accent); background-color: transparent;}

        /*Black background*/
        .fullblack {
            background-color: #000000;
            background: rgba(0,0,0, 1);
            background-image: none;
             }

        /*Strip off background, borders and paddings*/
        .transp {
             background: none;
             background-color: transparent;
             background-image: none;
             color: var(--offwhite);
             }

         .withborder {border: 1px solid #666666;}

#Main.transp {border-bottom: 1px solid #333333;}

#Main.NH .transp h1 {color: var(--offwhite);}
#Main.NH .transp h1.OnBlue {color: #ffffff; padding: 0; margin: 0;}
#Main.NH .transp h2 {color: var(--offwhite);}

         .maincolor {
             background: none;
             background-color: transparent;
             background-image: none;
             color: var(--base);
             }

/*SIZE AND PADDING classes*/

        .fullwidth {
            width: 88vw;
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            }

#Main.fullwidth {
      width: 100%;
      padding-top: 0;
      padding-right: 0;
      padding-bottom: 5px;
      padding-left: 0;
            }

        /*///////////////////////////*/
        @media screen
        and (max-width: 800px) {
        #Main.fullwidth  {
             width: 90vw;
             margin-top: 230px;
            }
         #Main.fullwidth.WithHiddenMenu  {
             width: 90vw;
             margin-top: 230px;
            }
        }
        /*///////////////////////////*/


/*Control floating*******************************/


        /*MainEntry when there are floating divs inside*/
        .MainEntry.Float {
             float: left;
             position: relative;
             clear: both;
             padding: 1vw;
             width: 90vw;
             }

            /*For a smaller div inside MainEntryFloat*/
            .smalldiv {
              width: 600px;
              height: auto;
              padding: 20px;
             }

            /*//////////////////////////////*/
            /*TO MAKE MainEntry-Float proportionally WIDER*/
            @media screen and (max-width: 800px) {
                .MainEntry.Float {
                  width: 80vw;
                padding: 2vw 2vw 2vw 2vw; }
            }

            /*TO MAKE smaller div proportionally WIDER*/
            @media screen and (max-width: 800px) {
                .smalldiv {
                  width: 300px;
                  padding: 10px; }
            }
            /*//////////////////////////////*/


        /*MainEntry floating left*/
        /*.Main.Float*/
        .MainEntry.FloatLeft {
             float: left;
             position: relative;
             clear: none;
             padding-top: 1vw;
             margin-right: 0.5rem;
             width: 40vw;
             }

        /*MainEntry floating right*/
        /*.Main.Float*/
        .MainEntry.FloatRight {
             float: left;
             position: relative;
             clear: none;
             margin-left: 0.5rem;
             margin-right: 0.5rem;
             width: 50vw;
             }

            /*////////////////////////////////////*/
            @media screen
            and (max-width: 800px) {
               .MainEntry.FloatLeft {
                float: none;
                width: 80vw;
                margin-left: 7vw;
                margin-bottom: 10px;
                }
            }
            /*smaller margin left, for formulas*/
            @media screen
            and (max-width: 800px) {
               .MainEntry.FloatLeft.transp {
                float: none;
                width: 80vw;
                margin-left: 2px;
                margin-bottom: 10px;
                }
            }

            @media screen
            and (max-width: 800px) {
               .MainEntry.FloatRight {
                float: none;
                width: 80vw;
                margin-left: 7vw;
                margin-top: 5px;}
           }
           /*////////////////////////////////////*/

/*p in MainEntry floating right*/
        .MainEntry.FloatRight p {color: rgb(190,190,190);}


/*MainEntry elements*******************************************************************/

            .MainEntry h1 {
                 color: #666666;
                 text-align: left;
            }

            .MainEntry h2 {
                 color: #666666;
                 text-align: left;
            }

            .MainEntry h3 {
                 color: #666666;
                 text-align: left;
            }

            .MainEntry p {
                 color: #000000;
                 text-align: justify;
            }

            .MainEntry li {
                 color: #000000;
                 text-align: justify;
                 padding-bottom: 0.75em;
            }

            .MainEntry a:hover, .MainEntry-Float a:hover {
                 color: var(--accent-lighter);
                 text-decoration: none;
                 background: #ffffff;
            }


            /*//////////////////////////////////////////*/
            /*TO MAKE MainEntry p ALIGN LEFT*/
            @media screen
            and (max-width: 800px) {
                .MainEntry p {text-align: left;}
            }
            /*TO MAKE MainEntry li ALIGN LEFT*/
            @media screen
            and (max-width: 800px) {
                .MainEntry li {text-align: left;}
            }
            /*////////////////////////////////////////////*/



/*********************************************************************************************************/
/*#Footer classes and children: #**************************************************************************************************/
/*********************************************************************************************************/

    /*#Footer classes: none*/

    /*#Footer children**************************************************************/

    #footer_1 {
     position: relative;
     float: left;
     width: 50vw;
     height: 100%;
     margin: 0;
     padding-left: 2em;
     padding-top: 0.6250em;
    }

    #footer_2 {
     position: relative;
     float: right;
     height: 100%;
     margin: 0;
     padding-right: 2em;
     padding-top: 0.6250em;
    }

    /*#Footer children classes**************************************************************/

    .footer_left {
     color: #ffffff;
     text-align: left;
     background-color: #000000;
    }

    .footer_right {
     color: #ffffff;
     text-align: right;
     background-color: #000000;
    }

    /*.footer_1 and .footer_2 styles*/

    #footer_1 a:link, #footer_2 a:link {color: #cccccc; text-decoration: none;}
    #footer_1 a:visited, #footer_2  a:visited {color: #cccccc; text-decoration: none; }
    #footer_1 a:hover, #footer_2 a:hover {color: #ff9900; text-decoration: none; background: transparent;}

    /*/////////////////////////////////////////////////*/
    /*TO MAKE Footers preserve floating (smaller fonts)*/
                @media screen and (max-width: 800px) {
                .footer_left {font-size: 90%;}
                .footer_right {font-size: 90%;}
                }
    /*/////////////////////////////////////////////////*/


/*/
/*********************************************************************************************************/
/*Elements in varied DIVs - styles ************************************************************************/
/*********************************************************************************************************/

/*ul menu******************************************************************************************************/

    ul.menu {
     margin: 0;
     padding: 0;
    }

    ul.menu li {
     margin: 0;
     padding: 0;
     padding-left: 0px;
     display: inline;
     text-transform: uppercase;
     font-size: 80%;
    }

    ul.menu li.current {
     font-weight: bold;
    }

    ul.menu a {
     font-size: 80%;
     text-transform: uppercase;
     text-decoration: none;
      padding-top: 0.6250em;
      padding-bottom: 0.6250em;
      padding-left: 0.6250em;
      padding-right: 0.6250em;
    }

    ul.menu a:hover {
        background-color: #666666;
        color: #ffffff;
    }


/*ul menu-inEntry***********************************************************************************************/

    ul.menu-inEntry {
         margin-top: 10px;
         margin-right: 0px;
         margin-bottom: 10px;
         padding: 10px;
         box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.7);
    }

    ul.menu-inEntry .ListHeading {
        padding-top: 10px;
        padding-left: 1px;
        display: inline;
        text-transform: uppercase;
        font-family: Verdana, Arial, sans-serif;
        font-size: 70%;
    }

    .menu-inEntry-box {
         margin-top: -25px;
         margin-left: 70px;
    }

    ul.menu-inEntry li {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
        margin: 0;
        display: block;
        text-transform: uppercase;
        font-family: Verdana, Arial, sans-serif;
        font-size: 70%;
        border: 1px solid transparent;
    }

    ul.menu-inEntry a:link,
    ul.menu-inEntry a:visited {
        text-decoration: none;
        color: #666666;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
    }

    ul.menu-inEntry a:hover {
        background-color: transparent;
        color: #000000;
    }

    ul.menu-inEntry li:hover {
        background-color: #ffffff;
        color: #000000;
        border: 1px solid #999999;
        background: rgba(255,255,255, 0.7);
        box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
    }

/*ul menu-simple***********************************************************************************************/

    ul.menu-simple {
        margin: 0;
        padding: 0;
    }

    ul.menu-simple li {
        padding-left: 0;
        padding-right: 0;
        display: inline;
        text-transform: uppercase;
        font-size: 75%;
        color: #333333;
    }

    ul.menu-simple li.current {font-weight: bold;}

    ul.menu-simple a {
        text-transform: uppercase;
        text-decoration: none;
        padding-top: 1.5em;
        padding-bottom: 1.5em;
        padding-left: 0.6250em;
        padding-right: 0.6250em;
        border-top: 1px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        color: #000000;
    }

    ul.menu-simple a:hover {
        background-color: #000000;
        color: #ffffff;
        border-top: 1px solid #666666;
        border-left: 1px solid #666666;
        border-right: 1px solid #666666;
    }


/*ul menu-simple-toppest****************************************************************************************/

    ul.menu-simple-toppest {
       margin: 0;
       padding: 0;
    }

    ul.menu-simple-toppest li {
       padding-left: 0em;
       padding-right: 0em;
       display: inline;
       text-transform: uppercase;
       font-size: 70%;
       color: #ffffff;
    }

    ul.menu-simple-toppest li.current {font-weight: bold;}

    ul.menu-simple-toppest a {
        color: #ffffff;
        font-size: 80%;
        text-transform: uppercase;
        text-decoration: none;
        padding-top: 0.9375em;
        padding-bottom: 0.9375em;
        padding-left: 0.6250em;
        padding-right: 0.6250em;
        border-bottom: 1px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
    }

    ul.menu-simple-toppest a:hover {
          background-color: #ffffff;
          color: #000000;
          border-bottom: 1px solid #ffffff;
          border-left: 1px solid #666666;
          border-right: 1px solid #666666;
    }




/*/
/*********************************************************************************************************/
/* ARROWS and CLOSE */
/*Menu down and left arrow, triangle and circle*****************************************************************/
/*********************************************************************************************************/

/*CLOSE*/

.close {
    position: relative;
    color: #000000;
    opacity: 0.2;
}

.close:hover {
    color: #000000;
    opacity: 1;
}

.close:before, .close:after {
    position: absolute;
    top: 2px;
    left: 130px;
    : ' ';
    height: 10px;
    width: 2px;
    background-color: #333;
}
.close:before {transform: rotate(45deg);}
.close:after {transform: rotate(-45deg);}


/*triangle*/

#down-triangle {
  	float: left;
  	width: 0;
   	height: 0;
   	margin-top: 8px;
    margin-right: 0.6250em;
   	border-top: 10px solid #666666;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

#down-triangle:hover {
  	float: left;
  	width: 0;
   	height: 0;
   	margin-top: 8px;
    margin-right: 0.6250em;
   	border-top: 10px solid transparent; /*triangle 'disappears' on hover*/
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

/*down arrow, right arrow*/

    i.NH {
        border: solid #cccccc;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        margin-top: 3px;
    }

    i.NH:hover {
        border: solid var(--accent); /*arrow is hidden; activate hover #ffffff for arrow*/
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
    }

    /*right arrow*/
    .right.NH {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }

    /*left arrow*/
    .left.NH {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        }

    /*down arrow*/
    .down.NH {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

    /*up arrow*/
    .up.NH {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

/*circle*/

    .circle {
            float: left;
            display: inline;
            width: 0.6250em;
            height: 0.6250em;
            margin-top: 1px;
            margin-right: 0.6em;
            border: 2px solid #ffffff;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
    }

    .circle:hover {
            float: left;
            display: inline;
            width: 0.6250em;
            height: 0.6250em;
            margin-top: 1px;
            margin-right: 0.6em;
            border: 2px solid #ffffff;
            background-color: #ffffff;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
    }

    /*//////////////////////////////////////////*/
    /*TO MAKE circle FIT INTO NAVBAR SMALL SCREENS*/

    @media screen
    and (max-width: 800px) {
        .circle {
            margin-top: 1px;
            margin-right: 0.4em;
            border: 2px solid #ffffff;
            }
        }

    @media screen
    and (max-width: 800px) {
        .circle:hover {
            margin-top: 1px;
            margin-right: 0.4em;
            border: 2px solid #ffffff;
            background-color: #ffffff;
            }
        }
    /*//////////////////////////////////////////*/


/*=========================================================================*/
/*=========================================================================*/
/*OVERRIDES================================================================*/
/*styles to override all other .css files (bootstrap, formoid, etc)========*/
/*must stay here at end of file============================================*/
/*=========================================================================*/
/*=========================================================================*/


/********************************************************************/
/*Link styles overrides
/********************************************************************/

/*================================================================*/
/*TO OVERRIDE style_sandybox.css=======================================*/


#pre_cabecalho {
     position: fixed;
     top: 0;
     right: 0;
     z-index: 2000;
     overflow: hidden;
     width: auto !important;
     height: 50px !important;
     padding: 15px;
     margin-right: 10px;
     font-size: 0.7rem;
     text-transform: uppercase;
     color: #ffffff !important;
     background-color: transparent !important;
     }

     .Login {
          font-size: 0.7rem;
          text-transform: uppercase;
          color: #ffffff !important;
          background-color: transparent !important;
          }

.Login a:link {color: #ffffff; background-color: transparent;}
.Login a:visited {color: #ffffff; background-color: transparent;}
.Login a:hover {color: : --accent); background-color: transparent;}


/*to style div class .conteudo left from old pages*/
.conteudo {
    position: relative;
    float: left;
    clear: none;
    width: 80vw;
    height: auto;
    padding: 2vw 5vw 2vw 4vw;
    margin-right: 10px;
    margin-top: 30px;
    margin-left:10px;
    margin-bottom:30px;
    text-align: justify;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.conteudo.white {
    width: 80vw;
    padding-top: 2vw;
    padding-right: 8vw;
    padding-bottom: 2vw;
    padding-left: 5vw;
    margin-right: 10px;
    margin-left:10px;
    margin-bottom:30px;
    background-color: #ffffff;
    text-align: justify;
 }

        /*//////////////////////////////////*/
        @media screen and (max-width: 800px) {
             .conteudo,
             .conteudo.white {
                width: 92%;
                padding-top: 2vw;
                padding-left: 2vw;
                padding-bottom: 2vw;
                margin-right: 0;
                text-align: left;
                }
        }
        /*//////////////////////////////////*/

.conteudo a:link {color: var(--lighter); background-color: transparent;}
.conteudo a:visited {color: var(--lighter); background-color: transparent;}
.conteudo a:hover {color: var(--accent); background-color: transparent;}

.conteudo h1,
.conteudo h2,
.conteudo h3,
.conteudo h4,
.conteudo h5,
.conteudo h6 {color: #ffffff;}

.conteudo.white h1,
.conteudo.white h2,
.conteudo.white h3,
.conteudo.white h4,
.conteudo.white h5,
.conteudo.white h6 {color: #666666;}

/*overrides for forms*/
/*To make a small margin below the last forms, before the #footer
  */
.results {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5%;
}

.results > center > p {color: #ffffff;}

.supresultdireito {
    margin-right: 50px !important;
}


/*TO HIDE any old menus left in old pages*/
.cssmenu {display: none;}


/*TO OVERRIDE WEBKIT LINK*/
a:-webkit-any-link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

/*TO OVERRIDE WEBKIT BOXSIZE >> or falsebuttons in Navbar WILL NOT WORK*/
* {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}


/**TO OVERRIDE INSERT_STYLES.CSS*/
 #antes_obra {
    display: inline-block;
    float: left;
    position: relative;
    left: 0px !important;
    margin-top: 2%;
}

/*TO OVERRIDE BLUEISH-GRAY BGCOLOR IN ORIGINAL PHP FILES
              and line-height in scaffolding.css*/
body {
     background-color: var(--dark-soft) !important;
     line-height: normal !important;
     margin: 0 !important;
     font-family:'Ubuntu', sans-serif !important; /*to override scaffolding.less.css 36*/
 }

img {max-width: 90vw;}


/*A FEW TRICKS*/

/*for any content to be hidden in small screens*/
@media screen and (max-width: 1100px) { .large_screens {display: none;}}
@media screen and (max-width: 1400px) { .large_large_screens {display: none;}}


/*ALL TOP DIV and their wide children WIDTHS*/
/*this is to adjust any inconsistencies overlooked above*/


#TopMenu, .DropdownNavbar,
#Content
{max-width: 100%; min-width: 100%;}

#Header, #Header.WithHiddenMenu, .Navbar,
#Main,
#Footer
{max-width: 100%; min-width: 100%;}

.DelpoHidden > p > a:link,
.DelpoHidden > p > a:visited {background-color: transparent; color: var(--darker);}
.DelpoHidden > p > a:hover {background-color: transparent; color: #ffffff;}

/*/
/*********************************************************************************************************/
/*delpo CSS END**************************************************************************************/
/*********************************************************************************************************/