@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
#navigation ul { list-style: none; margin: 0; padding: 0; line-height: 1; display: block; }
#navigation ul#menu:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }
#navigation ul li { display: inline-block; padding: 0; margin: 0px; }
#navigation.align-right ul li { float: right; }
#navigation.align-center ul { text-align: center; }
#navigation ul#menu>li a { color: #ffffff; text-decoration: none; display: block; padding: 43px 15px; font-family: 'Open Sans', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 0.9em; position: relative; transition: color .25s; }
#navigation ul#menu>li a:hover { color: #fff; background-color: #555; }
#navigation ul#menu>li a:hover:before { width: 100%; }
#navigation ul#menu>li a:after { content: " "; display: block; position: absolute; right: -3px; top: 19px; height: 6px; width: 6px; background: #ffffff; opacity: 0; }
#navigation ul#menu>li a:before { content: " "; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #ffffff; transition: width .25s; }
#navigation ul#menu>li.last > a:after,
#navigation ul#menu>li:last-child > a:after { display: none; }
#navigation ul#menu>li.active>a { color: #00A8FF; }
#navigation ul#menu>li.active>a:before { width: 100%; }
#navigation.align-right li.last > a:after,
#navigation.align-right li:last-child > a:after { display: block; }
#navigation.align-right li:first-child a:after { display: none; }

#navigation ul#menu>li ul.submenu{display:none; position: absolute; margin-left:-1em; background-color: #333; min-width:250px; box-sizing: border-box;}
#navigation ul#menu>li ul.submenu li{padding: 0; width: 100%; box-sizing: border-box;}
#navigation ul#menu>li ul.submenu li:hover{color:#00A8FF; background-color:#666;}
#navigation ul#menu>li ul.submenu li a{text-transform:none; padding: 20px  15px; background-color: transparent;}
#navigation ul#menu>li:hover ul.submenu{display:block;}


    @media screen and (max-width: 1000px) { 
	  header{top:0px;}
      #navigation ul#menu>li { display: block; }
      #navigation ul#menu>li a { font-size: 1.2em; padding: 15px 15px;}
      #navigation ul#menu { position: relative; top: 100px;}
	  #navigation ul#menu>li ul.submenu{display:block; position: relative; font-size: .8em; margin-left: 4em;}
	  #navigation ul#menu>li ul.submenu li {width: 100%; padding: 8px 5px;}
	  #navigation ul#menu>li ul.submenu li a{padding: 8px 5px;}
    }

    @media screen and (max-width: 450px) {
		.logo {width: 75%;}
	}
    @media screen and (max-width: 380px) { 
	  #navigation{width: 90%;}
      #navigation ul#menu>li a { font-size: 0.9em; padding: 0px;}
	  #navigation ul#menu>li ul.submenu{min-width:180px;}
	  #navigation ul#menu>li ul.submenu li {padding: 0px;}
      #navigation ul#menu { top: 70px;}
    }
	
	@media screen and (max-width: 380px &) { 
	  #navigation{width: 90%;}
      #navigation ul#menu>li a { font-size: 0.9em; padding: 0px;}
	  #navigation ul#menu>li ul.submenu{min-width:180px;}
	  #navigation ul#menu>li ul.submenu li {padding: 0px;}
      #navigation ul#menu { top: 70px;}
    }