/* Normalize.css v2.1.2 */


/* Grid > 6 Column Mobile First
-------------------------------------------------------------- */
.container {
  /*
    The `max-width` property is the width governer.
  */
	max-width: 980px;
	width:92%;
	margin:0px auto;
	z-index:1000000000000000000 !important;
	
}

.row {
  clear: both;
}

@media screen and (min-width: 480px) {
  .container {
    width: 98%;
  }

  .grid-1,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-half,
  .grid-full,
  .grid-unit {
    float: left;
    width:96.969696969697%;
    margin:0 1.515151515152% 1em;
  }

  .gallery .grid-unit,
  .grid-half {
    width:46.969696969697%;
    margin: 0 1.515151515152% 1em;
  }

  .grid-flow-opposite{
    float:right
  }
  

}

@media screen and (min-width: 640px) {
  .grid-1     { width: 13.636363636364%; }
  .grid-2     { width: 30.30303030303%; }
  .grid-3,
  .grid-half  { width: 46.969696969697%; }
  .grid-4     { width: 63.636363636364%; }
  .grid-5     { width: 80.30303030303%; }
  .grid-6,
  .grid-full  { width: 96.969696969697%; }

  .text-right { text-align: right; }
  .text-right p { position: absolute; bottom: 10px; }

}

/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
For best results, use your favorite clearfix here.
-------------------------------------------------------------- */
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
.cf { zoom:1; } /* For IE 6/7 (trigger hasLayout) */


/* Helpers
-------------------------------------------------------------- */
.show-grid div[class*='grid-'] {
  background-color: #eee;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  text-align: center;
}

* {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
html, body { height: 100%; }
html { font-size: 100%; }
body { font-size: 1em; line-height: 1.4;  }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { }
h2 { }
h3 { }
h4 { }
h5 { }
h6 { }

a { color: #900;  font-size: 12px;}
a:focus,
a:hover { color: #000; }

p { font-weight: 300; }
img.aligncenter { margin: 3em auto; display: block; }

section { margin-bottom: 2.5em; }

.header { position: relative; margin: 0px auto; background: url('../img/121.jpg') no-repeat; background-size:cover; }
.header .welcome { }
.header .heavy { color: #333; font-size: 1.9em; line-height: 1.2; position: relative;  z-index: 100; font-weight: 300; }
.header .heavy span { font-size: 0.6em; }
.header .small { font-size: 0.9em; color: #fff; }
.header #carbonads-container { margin: 20px auto; width: 300px; }



h2.headline { border-bottom: 1px solid #d5d5d5; line-height: 1.5em; padding-bottom: 0.4em; font-weight: 600; }

.pow { }

.special { padding: 1em 0; width: 100%; }
p#curr_size {   font-size: 22px; position: relative; text-align: center; z-index: 3; margin: 1em 0; }
p#curr_size:after { border-bottom: 1px solid #f4f4f4; content: ""; left: 0; position: absolute; top: 16px; width: 100%; z-index: -1; }

p > a { color: #FC3; text-decoration: underline; }

p.center { text-align: center; }




/* ==  Examples
================================================= */

.holder { margin: 1.5em auto 1.5em; width: 300px; }

.box { border: 2px solid #ccc; padding: 0.3em 1em 1em;  margin: 0 0 2em 0; background-color: #fff; transition: 0.6s ease background-color; }
.box:hover { background-color: #fafafa; }
.box h3 { font-weight: bold; margin: 0 0 0.5em; }

.example { padding-bottom: 40px; }
.example img { margin-bottom: 20px; }

.description { font-family: Palatino, Georgia, Times, serif; background-color: #fff; color: #444; border: 1px solid #999; }
.description h3 {  font-family: inherit; border-bottom: 1px solid; }
.description h3 a { color: inherit; }
.pro {  }
.con {  }

h1.entry-title { font-weight: 400; margin-top: 1em; }

footer { text-align: center; font-size: .7em; }

@media all and (min-width:480px) {
	
	.header h1.heavy{ font-size: 2.2em;}
	
}

@media all and (min-width:600px){
  .header .heavy { margin: 1.5em 0 0 0; }
}

@media all and (min-width:885px) {
	
	.header .welcome { float: left; }
	.header h1.heavy{ font-size: 3.2em;  }
	.header #carbonads-container { margin-top: 100px; float: right;  }
	
}
<style>
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body { background-color: #fff; }

img { max-width: 100%; }

.container { max-width: 60em; margin: 0px auto; }

.head { position: relative; z-index: 99; }
.head .container { width: 100%; }
.head > h1 { text-align: center; }

.menu-link {
	display: none;
	float: right;
	text-decoration: none;
	padding: 12px 12px;
	z-index:1000000000000000000 !important;
}
.menu { 
	float: left; max-width: 60em;
	-webkit-transition: all 0.3s ease-out;  
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out; 
	z-index:1000000000000000000 !important;
}
.menu ul { 
	padding: 0px;
	margin: 0px;
	list-style: none;
	position: relative;
	display: inline-table;
	z-index:1000000000000000000 !important;
}
.menu > li > ul.sub-menu {
	min-width: 10em;
	padding: 4px 0;
	background-color: #f4f4f4;
	border: 1px solid #CCC;
	border: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	z-index:1000000000000000000 !important;
}
.menu ul:after {
	content: ""; clear: both; display: block;
}
.menu ul li {
	padding: 0px;
	z-index:1000000000000000000 !important;
}
.menu > ul > li { 
	display: inline-block;
	z-index:1000000000000000000 !important;
}
.menu ul li a { 
	display: block;
	text-decoration: none;
	color: #fff;
	font-size: .9em;
	border-right:1px solid #992200;
	text-transform:uppercase;
	z-index:1000000000000000000 !important;
	font: bold 13px Arial,Helvetica;
}
.menu ul li > a { 
	height:35px;
	padding: 12px 12px;	
	z-index:1000000000000000000 !important;
}
.menustopboarder{
	border-right:none !important;}
.menu ul ul { 
	display: none; 
	position: absolute; 
	top:100%;
	min-width: 160px;
	background-color: #f4f4f4;
	z-index:1000000000000000000 !important;
	border: 1px solid #CCC;
	border: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.menu ul li:hover > ul {
	display: block;
	z-index:1000000000000000000 !important;
}
.menu ul ul > li {
	position: relative;
	z-index:1000000000000000000 !important;
}
.menu ul ul > li a {
	padding: 10px 15px 10px 10px;
	height: auto;
	background-color: #900;
	-webkit-transition: background-color 0.2s ease-out;  
	-moz-transition: background-color 0.2s ease-out;
	-ms-transition: background-color 0.2s ease-out;
	-o-transition: background-color 0.2s ease-out;
	transition: background-color 0.2s ease-out; 
	text-transform:none;
	z-index:1000000000000000000 !important;
}

.menu ul ul > li a:hover {
	background-color: #F1AD0E;
	color: #fff;
	z-index:1000000000000000000 !important;
}
.menu ul ul ul {
	position: absolute; 
	left: 100%; 
	top:0;
	z-index:1000000000000000000 !important;
}


@media screen and (max-width: 768px) {
	.still{
			
			position:absolute;
			top:80px;
			width:100%;
			
			margin-right:20px;
			background-color: none !important;
		background-image: none !important; 
		background-image: none !important;
		background-image: none !important;	
		background-image: none !important;
		background-image: none !important;
		background-image: none !important;
		border: none!important;

		-moz-box-shadow: 0 1px 1px #990, 0 1px 0 #990 inset;
		-webkit-box-shadow: 0 1px 1px #990, 0 1px 0 #990 inset;
		box-shadow: 0 1px 1px #980000, 0 1px 0 #98000 inset;
		min-height:45px;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		border-radius: 0px;}
		
		.main{
	width: 100%; float: left; margin: 0px; padding: 0px; position: inherit;}
    
    a.menu-link {
		display: block;
		color: #fff;
		background-color: #900;
		z-index:1000000000000000000 !important;
		
	}
	.menu {
		clear: both;
		min-width: inherit;
		float: none;z-index:1000000000000000000 !important;
	}
	.menu, .menu > ul ul {
		overflow: hidden;
		max-height: 0;
		background-color: #f4f4f4;
		z-index:1000000000000000000 !important;
	}
	.menu > li > ul.sub-menu {
	padding: 0px;
	border: none;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	z-index:1000000000000000000 !important;
	}
	.menu.active, .menu > ul ul.active {
		max-height: 55em;
		z-index:1000000000000000000 !important;
	}
	.menu ul {
		display: inline;
		z-index:1000000000000000000 !important;
	}
	.menu > ul {
		border-top: 1px solid #808080;
		z-index:1000000000000000000 !important;
	}
	.menu li, .menu > ul > li {
		display: block;
		z-index:1000000000000000000 !important;
	}
	.menu li a {
		color: #000 !important;
		display: block;
		padding: 0.8em;
		border-bottom: 1px solid #808080;
		position: relative;
		z-index:1000000000000000000 !important;
	}
	.menu li.has-submenu > a:after {
		content: '+';
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		font-size: 1.5em;
		padding: 0.55em 0.5em;
		z-index:1000000000000000000 !important;
	}
	.menu li.has-submenu > a.active:after {
		content: "-";
		z-index:1000000000000000000 !important;
	}
	.menu ul ul > li a {
		background-color: #e4e4e4 !important;
		height:58px;
		padding: 19px 18px 19px 30px;
		z-index:1000000000000000000 !important;
	}
	.menu ul ul, .menu ul ul ul {
		display: inherit;
		position: relative;
		left: auto; top:auto;
		box-shadow: none; 
		border:none;
		z-index:1000000000000000000 !important;
	}
	.menu ul li a {
		background:#e3e3e3;
}
}
