@import url('https://fonts.googleapis.com/css?family=Open+Sans');

nav {
  font-size: 8px;
  line-height: 12px;
  color: #fff;
  margin: 0;
  padding: 0;
  word-wrap: break-word !important;
}

.navbar {
  margin: 0;
  padding: 0;
}

.navbar a {
  color: #FFF;
}

.navbar p {
  text-align: center;
}

#logo {
  display: block;
  padding: 0 4px;
  float: left;
}


#main-toggle {
  cursor: pointer;
  position: absolute;
  user-select: none;
  visibility: hidden;
  bottom: 4px;
  right: 0px;
}
  
nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  padding: 2px 0;
  border: 0;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  float: right;
  background-color: var(--main-color);
  height: 32px;
}

nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  text-decoration: none;
  vertical-align: middle;
}

nav ul li ul li:hover {
  text-decoration: underline;
}

nav ul li:hover {
  text-decoration: underline;
 }

nav ul ul {
  display: none;
  position: absolute;
  top: 24px;
}

nav ul li:hover>ul {
  display: inherit;
}

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -24px;
  left: 170px;
}

li>a:after {
  content: ' +';
}

li>a:only-child:after {
  content: '';
}

.menuv    {
		display: inline;
		height: 392px;
		transition: height 0.5s ease;
		overflow: hidden;

	}

.menunv    {
		display: inline;
		height: 0px;
		transition: height 0.5s ease;
		overflow: hidden;

	}

#MyMenu {
	display: none;
	width: 100%;
}

button:focus {
	outline: 0;
}
	
/* Media Queries
--------------------------------------------- */

@media all and (max-width: 300px) {

.hd1 {
	height: 40px;
}

nav a {
  font-size: 12px;
  line-height: 15px;
}

#main-toggle {
  visibility: visible;
}

.menuv    {
		height: 312px;
	}
	
  nav {
    margin: 0;
  }
  nav ul{
    float:none;
  }
 
  nav ul li {
    display: block;
	border-radius: 4px;
    width: 100%;
	margin-top: 2px;
	margin-bottom: 2px;
	height: 20px;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

  nav ul ul ul a {
    padding: 0 80px;
  }

  nav ul ul ul a {
    background-color: var(--main-color);
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: var(--main-color);
  }

  nav ul ul {
    float: none;
    position: static;
    color: #ffffff;
  }

  nav ul ul li:hover>ul,
  nav ul li:hover>ul {
    display: none;
  }

  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li {
    position: static;

  }
    #MyMenu {
	display: block;
}

  #logocontainer {
	 width: 35px;
 }
 
  #hamburgercontainer {
	 width: calc(100% - 35px);
 }
}

@media all and (min-width: 301px) and (max-width: 400px) {

.hd1 {
	height: 57px;
}

nav a {
  font-size: 16px;
  line-height: 23px;
}

.menuv    {
		height: 417px;
	}
	
#main-toggle {
  visibility: visible;
}

  nav {
    margin: 0;
  }
  nav ul{
    float:none;
  }
  
  nav ul li {
    display: block;
	border-radius: 4px;
    width: 100%;
	margin-top: 2px;
	margin-bottom: 2px;
	height: 28px;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

  nav ul ul ul a {
    padding: 0 80px;
  }

  nav ul ul ul a {
    background-color: var(--main-color);
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: var(--main-color);
  }

  nav ul ul {
    float: none;
    position: static;
    color: #ffffff;
  }

  nav ul ul li:hover>ul,
  nav ul li:hover>ul {
    display: none;
  }

  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li {
    position: static;

  }
  
  #MyMenu {
	display: block;
}
  #logocontainer {
	 width: 60px;
 }
 
  #hamburgercontainer {
	 width: calc(100% - 60px);
 }
}

@media all and (min-width: 401px) and (max-width: 500px) {

.hd1 {
	height: 57px;
}

nav a {
  font-size: 16px;
  line-height: 24px;
}

#main-toggle {
  visibility: visible;
}

.menuv    {
		height: 416px;
	}

  nav {
    margin: 0;
  }
  nav ul{
    float:none;
  }
  
   nav ul li {
    display: block;
	border-radius: 4px;
    width: 100%;
	margin-top: 2px;
	margin-bottom: 2px;
	height: 28px;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

  nav ul ul ul a {
    padding: 0 80px;
  }

  nav ul ul ul a {
    background-color: var(--main-color);
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: var(--main-color);
  }

  nav ul ul {
    float: none;
    position: static;
    color: #ffffff;
  }

  nav ul ul li:hover>ul,
  nav ul li:hover>ul {
    display: none;
  }

  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li {
    position: static;

  }
#MyMenu {
	display: block;
}

  #logocontainer {
	 width: 260px;
 }
 
  #hamburgercontainer {
	 width: calc(100% - 260px);
 }
}

@media all and (min-width: 501px) and (max-width: 809px) {

.hd1 {
	height: 80px;
}

#main-toggle {
  visibility: visible;
}

.menuv    {
		height: 470px;
	}

  nav {
    margin: 0;
  }
  nav ul{
    float:none;
  }
  
   nav ul li {
    display: block;
	border-radius: 4px;
    width: 100%;
	margin-top: 2px;
	margin-bottom: 2px;
	height: 32px;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

  nav ul ul ul a {
    padding: 0 80px;
  }

  nav ul ul ul a {
    background-color: var(--main-color);
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: var(--main-color);
  }

  nav ul ul {
    float: none;
    position: static;
    color: #ffffff;
  }

  nav ul ul li:hover>ul,
  nav ul li:hover>ul {
    display: none;
  }

  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li {
    position: static;

  }
#MyMenu {
	display: block;
}

  #logocontainer {
	 width: 260px;
 }
 
  #hamburgercontainer {
	 width: calc(100% - 260px);
 }
}
/*
@media all and (min-width: 769px) and (max-width: 884px) {

.hd1 {
	height: 80px;
}

#main-toggle {
  visibility: visible;
}

.menuv    {
		height: 468px;
	}

  nav {
    margin: 0;
  }
  nav ul{
    float:none;
  }
  
   nav ul li {
    display: block;
	border-radius: 4px;
    width: 100%;
	margin-top: 2px;
	margin-bottom: 2px;
	height: 32px;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

  nav ul ul ul a {
    padding: 0 80px;
  }

  nav ul ul ul a {
    background-color: var(--main-color);
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: var(--main-color);
  }

  nav ul ul {
    float: none;
    position: static;
    color: #ffffff;
  }

  nav ul ul li:hover>ul,
  nav ul li:hover>ul {
    display: none;
  }

  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li {
    position: static;

  }
#MyMenu {
	display: block;
}


}
*/