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

.header-bx{
	padding: 20px 40px;
	box-sizing:border-box;
	box-shadow: 0 0 20px 0 #000;
	-webkit-box-shadow:0 0 20px 0 #000;
	-moz-box-shadow:0 0 20px 0 #000;
	height: 140px;
	background-color: #fff;
	z-index:1;
	position:relative;
}

.header-bx .header-limiter {
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
}

/* Logo */

.header-bx .header-limiter h1{
	float: left;
	margin: 0;
}

.header-bx .header-limiter h1 a {
	display:block;
	height:100px;
	max-height:100px;
	width:200px;
	background-image:url(img/logo_cel.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}

/* The header links */

.header-bx .header-limiter a {
	color: #5c616a;
	text-decoration: none;
}

.header-bx .header-limiter nav{
	font:16px 'Roboto Slab',serif;
	line-height: 100px;
	float: right;
}

.header-bx .header-limiter nav a{
	display: inline-block;
	padding: 0 7px;
	opacity: 0.9;
	text-decoration:none;
	color: #bc2d18;
	line-height:1;
	text-decoration:none;
}

.header-bx .header-limiter nav a:hover {
	color: #555;
	text-decoration:underline;
}

/* mobi menu icon  */

#mobi_menu-icon {
 display:none;
 width: 40px;
 height: 30px;
 position: relative;
 float:right;
 margin:-10px 15px 0; 
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: .5s ease-in-out;
 -moz-transition: .5s ease-in-out;
 -o-transition: .5s ease-in-out;
 transition: .5s ease-in-out;
 cursor: pointer;
}

#mobi_menu-icon span {
 display: block;
 position: absolute;
 height: 6px;
 width: 100%;
 background: #aaa;
 border-radius: 6px;
 opacity: 1;
 left: 0;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: .25s ease-in-out;
 -moz-transition: .25s ease-in-out;
 -o-transition: .25s ease-in-out;
 transition: .25s ease-in-out;
}

#mobi_menu-icon span:nth-child(1) {
 top: 0px;
}

#mobi_menu-icon span:nth-child(2) {
 top: 12px;
}

#mobi_menu-icon span:nth-child(3) {
 top: 24px;
}

#mobi_menu-icon.open span:nth-child(1) {
 top: 18px;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);
}

#mobi_menu-icon.open span:nth-child(2) {
 opacity: 0;
 left: -60px;
}

#mobi_menu-icon.open span:nth-child(3) {
 top: 18px;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
}


/* mobi menu */

#mobi_menu_bx.fadein,
#mobi_menu_bx.fadeout{
opacity: 0;
visibility: hidden;
padding:0 40px; 
max-height:0;
height:0;
-moz-transition: visibility 0.5s, opacity 0.5s ease-in-out, max-height 0.5s ease-out;
-o-transition: visibility 0.5s, opacity 0.5s ease-in-out, max-height 0.5s ease-out;
-webkit-transition: visibility 0.5s, opacity 0.5s ease-in-out, max-height 0.5s ease-out;
transition: visibility 0.5s, opacity 0.5s ease-in-out, max-height 0.5s ease-out;
overflow-y: hidden;
}

#mobi_menu_bx.fadein{
max-height:150px;
}

#mobi_menu_bx ul{
margin:0;
padding:0;
list-style-type:none
}

#mobi_menu_bx li{
margin:12px 0;
padding:0;
 font:18px 'Roboto Slab',serif;
 line-height:145%;
}

#mobi_menu_bx li a,
#mobi_menu_bx li a:visited{
text-decoration:underline;
font-weight:bold;
color: #bc2d18;
}

#mobi_menu_bx li a:hover{
text-decoration:none;
color:#555;
}



/* Making the header responsive. */

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

	.header-bx {
		padding:15px 0;
		height:auto;
	}

	.header-bx .header-limiter h1 {
		float: none;
		margin:10px 0;
	}

	.header-bx .header-limiter h1 a{
		margin: 0 auto;
	}

	.header-bx .header-limiter nav {
	 	display:none;
	}
	
	#mobi_menu-icon {
		display:block;
	}

	#mobi_menu_bx.fadein,
	#mobi_menu_bx.fadeout{
	height:auto;
	}

	#mobi_menu_bx.fadein{
	margin:30px 0 0 0;
	padding:20px 40px; 
	visibility: visible;
	opacity: 1;
	height:auto;
	}
	
	.header-bx .header-limiter h1 a.fadein, 
	.header-bx .header-limiter h1 a.fadeout{
	-moz-transition: max-height 0.5s ease-out;
	-o-transition: max-height 0.5s ease-out;
	-webkit-transition: max-height 0.5s ease-out;
	transition: max-height 0.5s ease-out;
	}
	
	.header-bx .header-limiter h1 a.fadein{
	max-height:0;
	}
}

/* For the headers to look good, be sure to reset the margin and padding of the body */

body {
	margin:0;
	padding:0;
}

div.footer{
width:100%;
padding:40px 0;
margin:0;
background-color: #555;
}

div.foot_in{
 max-width:1160px;
 text-align:center;
 margin:0 auto;
 padding:0 20px;
 font:18px 'Roboto Slab',serif;
 color:#fff;
 line-height:145%;
}