.topphone .btn {
  display: block;
  width: 100%;
  max-width: 400px;
  background: #ff6347;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 16px 28px 15px 28px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 1px;
  text-decoration: none
}


.topphone {position: absolute;top: 12px;right: 10%;}
.topmenu {background: #333333;text-align: right}
.header {display: flex;flex-direction: column-reverse;border: none;background: #f0f0f0;z-index: 9;}
.header .conlogo {margin: 10px 24px 0 0;position: absolute;left: 10%;}
.header > div {position: relative;width: 100%}


.topmenu #cssmenu {padding:0}
#mainnav > ul {text-align: center;}
#mainnav > ul li {text-align: left;}
#mainnav ul {position: relative;}

#mainnav > ul > li {display: inline-block;}
#mainnav > ul > li > a {
	position: relative;
	font-size: 18px;
text-decoration: navajowhite;
padding: 28px 32px 28px 20px;
display: block;
font-weight: 600;
color: #000;
text-transform: uppercase;
letter-spacing: 1px;
}
#mainnav > ul > li > a:after {
  position: absolute;
  top: 31px;
right: 16px;
width: 8px;
height: 8px;
  border-bottom: 3px solid #333;
  border-right: 3px solid #333;
  content: "";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
#mainnav > ul > li > ul {
	display: none;
position: absolute;
left: 0;
top: 74px;
width: 100%;
background: #f0f0f0;
z-index: 999;
box-shadow: 0 3px 3px rgba(0,0,0,.1);
}

#mainnav > ul > li > ul.showmenu, #mainnav > ul > li:hover > ul {display: flex;}
#mainnav > ul > li > ul > li {
	padding: 24px;
display: block;
border-right: 1px solid #ccc;
flex-basis: 350px;
max-width: 100%;
}
#mainnav .title{
	color: #ea6822;
	font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
display: block;
border-bottom: 2px solid #ea6822;
padding: 0 0 8px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
#mainnav .title a {
	color: #ea6822;
	text-decoration: none
	
}
.image figure {
	position: relative;
	display:block;
	width: 280px;
	height: 350px;
	border-radius: 7px;
	background: #5d5f66;
	overflow: hidden
}
.image figure img {
	position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#mainnav > ul > li > ul > li > ul > li {
  margin: 0;
  display: block;
}
#mainnav > ul > li > ul > li > ul > li > a {
	display: block;
padding: 8px 0;
text-decoration: none;
color: #000;
font-size: 16px;
}
#mainnav .none {color: #b5a091}
#mainnav .green {color: #089717}

.mobilemenu {display: none}

@media (max-width:767px){
	.mobilemenu:before {
		content: '';
		position: absolute;
		top: 12px;
		right: 18px;
		display: block;
		width: 24px;
		height: 27px;
		border-top: 4px solid #fff;
		border-bottom: 4px solid #fff;
	}
	.mobilemenu:after {
		content: '';
		position: absolute;
		top: 23px;
		right: 18px;
		display: block;
		width: 30px;
		height: 4px;
		background: #fff;
	}
	.back:after{
		position: absolute;
		top: 16px;
		right: 16px;
		width: 23px;
		height: 23px;
		border-bottom: 4px solid #fff;
		border-right: 4px solid #fff;
		content: "";
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.mobilemenu, .back {
		display: block;
		width: 60px;
		height: 50px;
		background: #000000a1;
		position: absolute;
		top: 24px;
		z-index: 9999999;
		cursor: pointer
	}
	.mobilemenu {right: 0;border-radius: 30px 0 0 30px}
	.back {left: 0;border-radius: 0 30px 30px 0}
	.header {
		display: block;
		position: fixed;
		top: 0;
		left: 100%;
		width: 100%;
		height: 100%;
		z-index: 9999999;
		background: #f0f0f0;
		padding: 24px;
		transition: .2s;
	}
	.header.showmenu {left: 0%;overflow: auto}
	.header > div {position:initial}
	.header .conlogo {position: relative;margin: 10px 0;text-align: center;left: auto;}
	.topphone {
		position: relative;
		top: auto;
		right: auto;
		text-align: center;
		margin: 10px auto;
	}
	.topphone .btn {margin: 24px auto;font-size: 24px;letter-spacing: 3px;border: 2px solid #000;background: #fff;color: #000;}
	#mainnav > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 9px;
	}
	#mainnav > ul > li {
		width: calc(50% - 4.5px);
		flex-basis: calc(50% - 4.5px);
		height: 160px;
		box-shadow: 0 0 3px rgba(0,0,0,.2);
		background-color: #ccc;
		border-radius: 7px
	}
	#mainnav > ul > li > a::after {transform: rotate(315deg);}
	
	.topmenu {text-align: left;background: #5d5f66;border-radius: 7px;box-shadow: 0 0 3px rgba(0,0,0,.2);}
	
	#cssmenu > ul {display: block;background: transparent;}
	#cssmenu > ul > li > a, #cssmenu > ul > li > span.separator {padding: 12px 24px;}
	#mainnav > ul > li > ul {
		display: block;
		background: #ccc;
		position: fixed;
		top: 0;
		left: 100%;
		height: 100%;
		width: 100%;
		transition: .2s;
	}
	
	#mainnav > ul > li > ul.showmenu {display: block;left: 0%;overflow: auto}
	#mainnav > ul > li {
	  display: flex;
	  align-items: end;
	}
	#mainnav > ul > li > a {
		position: relative;
		font-size: 18px;
		text-decoration: none;
		padding: 8px 18px;
		display: block;
		font-weight: 600;
		color: #fff;
		text-transform: uppercase;
		letter-spacing: 0.2px;
		background: #ff6347;
		width: 100%;
		border-radius: 0 0 7px 7px;
	}
	#mainnav > ul > li > a:after {
		position: absolute;
		top: 12px;
		right: 16px;
		width: 10px;
		height: 10px;
		border-bottom: 3px solid #fff;
		border-right: 3px solid #fff;
		content: "";
	  -webkit-transform: rotate(315deg);
	  -moz-transform: rotate(315deg);
	  -ms-transform: rotate(315deg);
	  -o-transform: rotate(315deg);
	  transform: rotate(315deg);
	}
	
	
	#window-menu, #glass-menu, #door-menu, #commercial-menu {
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover
	}
	#mainnav > ul > li > ul > li.image {padding: 0}
	.image figure {width: 100%;height: 300px;border-radius: 0;}
	
	#window-menu {background-image: url("/images/blog/04_2019/main/how-often-should-windows-be-replaced.jpg");}
	#glass-menu  {background-image: url("/images/blog/05_2019/main/how-do-you-seal-a-cracked-window.jpg");}
	#door-menu  {background-image: url("/images/blog/01_2019/main/picture-window-repair-painting-and-caulking.jpg");}
	#commercial-menu  {background-image: url("/images/blog/01_2019/main/non-standard-wooden-window.jpg");}
	
}