/*General styles for body*/



/*Style for the first level menu bar*/
ul#menu{
  position:relative;
  width: auto;
  height: auto;
  margin:0px;
  padding:30px;
}

ul#menu > li{
  float:left;
  list-style-type:none;
  position:relative;
  width:24.7%;
}
@media screen and (max-device-width:600px), screen and (max-width:600px) {
ul#menu > li{
  float:left;
  list-style-type:none;
  position:relative;
  width:100%;
    margin:0px;
  padding:0px;

}}


label{
  position:relative;
  display:block;
  padding:0px;
  margin:0px 0px 30px 0px;
text-transform:uppercase;
  text-decoration: none;
  font-size: 15px;
  line-height:20px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  transition:background 0.3s;
  cursor:pointer;
    	opacity: 0.5;
		border-left:#999999 solid 1px;
		border-right:#999999 solid 1px;
}
@media screen and (max-device-width:600px), screen and (max-width:600px) {
label{
  position:relative;
  display:block;
  padding:0px;
  margin:0px 0px 30px 0px;
text-transform:uppercase;
  text-decoration: none;
  font-size: 15px;
  line-height:20px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  transition:background 0.3s;
  cursor:pointer;
    	opacity: 0.5;
		border:none;
}}



label:hover
{
  	opacity: 1;
}

input:checked ~ label:after{
}

/*hide the inputs*/
input{display:none;}

/*show the second levele menu of the selected voice*/
input:checked ~ ul.submenu{
  transition:max-height 0.5s ease-in;
}

/*style for the second level menu*/
ul.submenu, #icon1, #icon2, #icon3, #icon4{
  max-height:0;
  display:none;
  padding:0px;
  list-style-type:none;
  transition:max-height 0.7s ease-out;
  position: relative;
  min-width:405%;
}
@media screen and (max-device-width:600px), screen and (max-width:600px) {
ul.submenu, #icon1, #icon2, #icon3, #icon4{
  max-height:0;
  display:none;
  padding:0px;
  list-style-type:none;
  transition:max-height 0.7s ease-out;
  position: relative;
  min-width:310%;
}}


#icon2
{left:-100%;}
#icon3
{left:-200%;}
#icon4
{left:-300%;}

@media screen and (max-device-width:600px), screen and (max-width:600px) {
#icon2, #icon3, #icon4{left:0%;}}

ul.submenu li a{
  display:block;
    position: relative;
	float:left;

  clear:left;
  width: auto;
  padding:10px 12px 50px 12px;
  text-decoration:none;
  transition:background .3s;
  white-space:normal;
  text-align: justify;
    color: #bfbfbf;
  margin:0px;
  font-size: 15px;
  line-height:20px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  z-index:inherit;
  text-transform:none;
  border-bottom:#FF9900 2px solid;
}
@media screen and (max-device-width:600px), screen and (max-width:600px) {
ul.submenu li a{
  display:block;
    position: relative;
	float:left;

  clear:left;
  width:30%;
  padding:10px 12px 50px 12px;
  text-decoration:none;
  transition:background .3s;
  white-space:normal;
  text-align: justify;
    color: #bfbfbf;
  margin:0px;
  font-size: 15px;
  line-height:20px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  z-index:inherit;
  text-transform:none;
  border: none;
}}

ul.submenu li a:hover{
}

.responsive {
  width: 50%;
  height: auto;
}