@charset "UTF-8";
.navigation {
 
  background: #fff;
color: #603813;

}

.brand {  
	max-width: 220px;
	float: left;
	padding-left: 5px;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}


.brand h1{
	padding: 5px 0 0;
	
}

.brand h2{
	padding: 10px 0 0;
	color: #009245;
	font-size: 11px;
	line-height: 1.3;
}


.top_tel{
	float: right;
	text-align: right;
	
	
}
.tel{
	
	display: inline-block;
	height: 85px;
	width: 120px;
	margin-right: 2px;
	vertical-align: top;
}

.tel a{
	font-size: 12px;
	color: #603813;
	background:#8cc63f url("../images/tel_white.png") no-repeat bottom 11px center/19px auto;
	padding:10px 0 0;
	border-radius: 0 0 15px 15px;
	height: 85px;
	width: 100%;
	display: block;
	text-align: center;
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.tel_icon{
	display: none;
}

.mail {
	display: inline-block;
	height: 85px;
	width: 110px;
	vertical-align: top;
}

.mail a{
	font-size: 12px;
	color: #603813;
	background:#f7931e url("../images/mail_white.png") no-repeat bottom 14px center/25px auto;
	padding:10px 0 0;
	border-radius: 0 0 15px 15px;
	height: 85px;
	width: 100%;
	display: block;
	text-align: center;
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
	
}
.mail_icon{display: none;
}

.letter{
	line-height: 1.2;
}

.letter02{
		display: block;
		font-size: 14px;
		margin-top: 5px;
	font-weight: bold;
	}

.number.letter02{
		
		margin-top: 8px;
	font-size: 15px;	
	line-height: 1.2;
	
	
	}
.number.letter02 span{
	
}


/* navigation */
.nav-container {
  max-width: 1100px;
  margin: 0 auto;
	padding: 0 0;
	z-index: 2;
	
}

nav {
	display: block;
	float: left;
	margin-top: 15px;
	text-align: center;
	width: calc(100% - 500px);
	
	
  
}
nav>ul {
  list-style: none;
  margin: 0 0 0 0;
  padding: 0 5px;
	display: block;
	box-sizing: border-box;
	text-align: right;
	width: 100%;
	
}
nav>ul>li {
  position: relative;
	font-size: 14px;
	text-align: center;
	display: inline-block;
	
}
nav>ul>li>a,
nav>ul>li>a:visited {
  display: block;
	width: 100%;
  padding: 40px 10px 10px;
  font-weight: bold;
color: #603813;
  text-decoration: none;

	
}
nav ul li a:hover,
nav ul li a:visited:hover {

color: #603813;
}


.btn01 a{
	 background: url("../images/btn01.png") no-repeat center top 5px/auto 20px;
}
.btn02 a{
	 background: url("../images/btn02.png") no-repeat center top 5px/auto 20px;
}
.btn03 a{
	 background: url("../images/btn03.png") no-repeat center top 5px/auto 24px;
}
.btn04 a{
	 background: url("../images/btn04.png") no-repeat center top 5px/auto 20px;
}


.btn01 a:hover,.btn02 a:hover,.btn03 a:hover,.btn04 a:hover{
	 transform:scale(1.05,1.05);
	
}




/* Mobile navigation */
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  height: 70px;
  width: 60px;
	
}

.nav-mobile p{
	position: absolute;
	bottom: 9px;
	left: 10px;
	font-weight: bold;
	font-size: 9px;
	 
}


@media only screen and (max-width: 999px) {
	nav{
		margin-top: 0;
	}
	
	nav ul li.spnomi.icon{
		width: 200px;
		margin: 40px auto 0;
		display: flex;
	}
	
	nav ul li.spnomi a.sptel img,nav ul li.spnomi a.spmail img{
		width: 18px;
	}
	
	nav ul li.spnomi a.sptel,nav ul li.spnomi a.spmail{
		display: inline-block;
		width: 55px;
		height: 55px;
		border-radius: 50%;
		padding: 15px 0 0 0;
		text-align: center;
		background-color: #8cc63f;
		vertical-align: top;
	}
	
	nav ul li.spnomi a.spmail{
		padding: 13px 0 0 0;
	}
	
	nav ul li.spnomi a.spmail{
		background-color: #f7931e;
		padding: 20px 0 0 0;
		
	}
	nav ul li.spnomi a img{
		width: 200px;
	}
	
	nav ul li.spnomi a{
		text-align: left;
		padding: 0 0 20px;
	}
	
	.nav-container {
height: 65px;
	
}
	.brand {
		width: 220px;
	}
	
	.brand h2{
	padding: 5px 0 0 0;
	font-size: 10px;
}
	.brand img{
		width: 190px;
	}
	
	.top_tel{
	float: none;
	margin-top: 0;
	text-align: center;
	width: 120px;
	height: 70px;	
		position: absolute;
		top: 0;
		right: 60px;
	
}
	
.tel_icon{
		display: block;
	}
	.number{
		display: none;
	}
.tel{
	text-align: center;
	margin-right: 0px;
	position: absolute;
		top: 0;
		right: 0;
	width: 55px;
}

.tel a{
	text-align: center;
	padding-left: 0;
	height: 70px;
	width: 55px;
	display: block;
	padding: 18px 0;
	box-sizing: border-box;
	background:#8cc63f url("../images/tel_white.png") no-repeat bottom 21px center/19px auto;
}
	
.tel a img {
		width: 30%;
		margin: auto;
	}

.mail {
	height: 70px;
	width: 55px;
	position: absolute;
		top: 0;
		right: 55px;
}

.mail a{
	max-width: 55px;
	font-size: 15px;
	height: 70px;
	display: block;
	color: #fff;
	text-align: center;
	padding: 25px 0;
	line-height: 1.2;
	margin-top: 0px;
	box-sizing: border-box;
	background: #f7931e url("../images/mail_white.png") no-repeat bottom 25px center/25px auto;
	
}
	
	.mail a img{
		width: 40%;
	}

	
	
	.mail_icon{
		display: block;
	}
	.letter,.letter02{
		display: none;
	}
	
  .nav-mobile {
    display: block;
	 
  }

  nav {
    width: 100%;
    padding: 0;
	 
	  z-index: 2;
	  
  }

  nav>ul {
    display: none;
	  position: fixed;
	  top: 0;
	   z-index: 2;
	  padding: 80px 0 0;
	  height: 100vh;
	  background: rgba(246,247,232,0.98) url("../images/trees.png") no-repeat bottom 100px center / 90% auto;
	  
  }
  nav ul li {
    float: none;
	  width: 100%;
	  text-align: left;
	  
	 
	  
  }
  nav ul li a {
    padding: 15px 0 15px 50px;
    line-height: 20px;
	  width: 200px;
	  display: block;
	  margin: auto;
	  box-sizing: border-box;
	  font-size: 14px;
	  
	  
  }
	
	nav>ul>li {
	background: none;
}
  nav ul li ul li a {
    padding:20px 0 20px 45%;
	  text-align: left;
  }

  .nav-dropdown {
    position: static;
  }
	
.btn01 a,.btn01 a:hover{
	 background: url("../images/btn01.png") no-repeat left 10px center/18px auto;
}
.btn02>a,.btn02>a:hover{
	 background: url("../images/btn02.png") no-repeat left 8px center/18px auto;
}
.btn03 a,.btn03 a:hover{
	 background: url("../images/btn03.png") no-repeat left 12px center/13px auto;
}
.btn04 a,.btn04 a:hover{
	 background: url("../images/btn04.png") no-repeat left 10px center/16px auto;
}

	
	

}
@media screen and (min-width: 1000px) {
	
	
	
  .nav-list {
    display: block !important;
  }
}
#nav-toggle,#nav-toggle02 {
  position: absolute;
  left: 14px;
  top: 17px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
	z-index: 100;
}



#nav-toggle span,#nav-toggle02 span,
#nav-toggle span:before,#nav-toggle02 span:before,
#nav-toggle span:after,#nav-toggle02 span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 32px;
  background: #603813;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before,#nav-toggle02 span:before {
  top: -10px;
}
#nav-toggle span:after,#nav-toggle02 span:after {
  bottom: -10px;
}
#nav-toggle.active span,#nav-toggle02.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after,
#nav-toggle02.active span:before, #nav-toggle02.active span:after{
  top: 0;
}
#nav-toggle.active span:before,#nav-toggle02.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after,#nav-toggle02.active span:after {
  transform: rotate(-45deg);
}
.nav-mobile a:after {
		content: "MENU";
		position: absolute;
		bottom: -16px;
		left: 0px;
		font-weight: bold;
		font-size: 9px;
		color: #603813;
		letter-spacing: 1px;
	}
	.fixed .nav-mobile a:after {
		bottom: -12px;
		left: 0px;
		font-size: 10px;
	}
	.nav-mobile.open a:after {
		content: "CLOSE";
	}


a#nav-toggle{
	font-size: 9px;
	color: #603813;
}


