@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);




/*IF WE ARE ON SMALL SCREEN WE DO NOT WANT THE "COMPACT MENU" TO BE ALWAYS AT TOP OF SCREEN BECAUSE IT PREVENTS USER SCROLLING DOWN WHEN THEY CLICK INTO THE COMPACT MENU 
- HOWEVER ON NORMAL MENU (BIGGER SCREEN SIZES) WE WANT TO RETAIN THE STATIC TOP POSITION AND MAKE THE MENU ALWAYS BE AT TOP OF PAGE EVEN IF USER MOVES DOWN PAGE*/
@media (max-width: 768px) { /*if the viewport is 768 or LESS - If "min-width" specified then it would be 768 or WIDER */
     
    #cssmenu {
      font-family: verdana; /*"Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif*/
      font-size: 12px;
      line-height: 12px; 
      text-transform: uppercase;
      text-align: center;
      position:relative;
      z-index:9999;
      
    }                       
                            
}
@media (min-width: 768px) { /* if viewport is 769 or wider */
    
    #cssmenu {
      font-family: verdana; /*"Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif*/
      font-size: 12px;
      line-height: 12px; 
      text-transform: uppercase;
      text-align: center;
      /*position:relative;*/
      z-index:9999;
   
   
       position:fixed;
       top: 0;
       margin:auto;
       left: 0;
       right: 0;
       width: 100%;
  
    }

}







/*actual top menu strip*/
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #333333; /*this is the background colour of the whole menu strip*/
  opacity: 0.97;
  filter: alpha(opacity=97); /*for IE8 and earlier*/
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  
}
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */

}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  text-align: left;
  border: 1px none blue; /*test border*/
  margin-right:-4px; /*required to close the gap between top menu options*/
  
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul { /*this is the background sub menu color (not the color when hovered over but actual background)*/
  display: block;
  background: #333333;
  border-right: 4px solid #d9ced2; /*required to close the gap between the "hover over" blue and the overlap (created earlier above with the margin-right:-3px)*/
    border-left: 4px solid #d9ced2;
}

#cssmenu > ul li.has-sub ul {
  display: none;
  width: 260px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  /*
  background: #333333; /*this is the background colour of the sub menu options*/
  /*opacity: 0.95;
  filter: alpha(opacity=95);*/ /*for IE8 and earlier*/
  
  /*border: 1px solid #ece6e8;*/
  border-bottom: 4px solid #d9ced2;
  border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
  background-image: url('https://www.dmjbuildingandroofing.co.uk/files/cssmenu/images/caret.png');
  background-repeat: no-repeat;
  /*background-position: 90% -95%;*/
  background-position: 90% 195%; /*this makes the arrow appear white*/
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #6bc048 url('https://www.dmjbuildingandroofing.co.uk/files/cssmenu/images/caret.png') no-repeat;
  background-position: 90% 195%;
}
#cssmenu > ul li a {
  display: block;
  padding: 12px 24px 11px 24px;
  text-decoration: none;
  color: #fff; /*this controls the colour of the text in the menu*/
  /*text-shadow: 0px 1px 0px #fff;*/
}


.selected {
  background: #6bc048; /*this works*/
  
}


#cssmenu > ul li a.selected {
  /*color: #fff; /*this controls the colour of the text in the menu (WHEN A MENU OPTION IS THE CURRENTLY SELECTED ONE)*/
  /*background: #6bc048 url('https://www.dmjbuildingandroofing.co.uk/files/cssmenu/images/caret.png') no-repeat;
  background-position: 90% 195%;*/
  border-left: 0px solid #6bc048;
}

#cssmenu > ul li.has-sub a.selected {
  /*color: #fff; /*this controls the colour of the text in the menu (WHEN A MENU OPTION IS THE CURRENTLY SELECTED ONE)*/
  background: #6bc048 url('https://www.dmjbuildingandroofing.co.uk/files/cssmenu/images/caret.png') no-repeat;
  background-position: 90% 185%;
  border-left: 1px solid #6bc048;
}





#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #6bc048;
  color: #fff;
  /*text-shadow: 0px 1px 0px #000;*/
}

@media (max-width: 767px) { /*if the viewport is 768 or LESS - If "min-width" specified then it would be 768 or WIDER */
  #cssmenu > ul {
    width: auto;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
  }
  #cssmenu > ul li#responsive-tab a {
    background: url('https://www.dmjbuildingandroofing.co.uk/files/cssmenu/images/menu.png') no-repeat;
    background-position: 95% 185%;
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #6bc048;
    background-position: 95% 185%;
  }
  #cssmenu > ul li {
    display: none;
  }
  #cssmenu > ul li.right {
    float: none;
  }
  #cssmenu > ul li.has-sub {
    position: relative;
  }
  #cssmenu > ul li.has-sub ul {
    display: block; /*block - block displays all the expanded sub menus*/
    position: static;
    width: 100%;
    /*background: #333333;
    opacity: 0.95;
    filter: alpha(opacity=95); */ /*for IE8 and earlier*/
    border: 0 none;
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
  }
  #cssmenu > ul li.has-sub ul li a span {
    display: block;
    padding-left: 24px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
  }
}

/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 768px) { /* if viewport is 769 or wider */
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}











/*WE NO LONGER USE THE BELOW - IT HAS BEEN COMMENTED OUT IN MENU.ASP - WE USE THE HAMBURGER MENU LINK WHEN THE SCREEN IS REDUCED IN WIDTH TO 767 OR BELOW*/
/*HAMBURGER MENU*/
.menu a{
	color: #fff;
}

/*
.menu a:hover,
.menu a:focus{
	color: #fff;
	text-decoration:none;
	background-color: #6bc048;
	
}
*/

@media (max-width: 750px) { /*if the viewport is 650 or LESS - If "min-width" specified then it would be 600 or WIDER */
    .menu-toggle
    {
        display: none; /*hide the hamburger link if we are on a mobile, since the top menu will also be a hamburger link when it is reduced in size*/
	    /*
	    position: absolute;
	    right: 15px;
	    top: 15px;
	    font-size: 30px;
	    color: #666; /*this controls the color of the hamburger three "bars"*/
	    
    }
}


@media (min-width: 750px) { /* if viewport is 650 or wider */
    .menu-toggle{
	    position: absolute;
	    right: 15px;
	    top: 35px; /*was 35*/
	    font-size: 30px;
	    color: #666; /*this controls the color of the hamburger three "bars"*/
        z-index:1; /*always visible above everything else APART from the close toggle*/
    }
}


.menu-toggle a:hover{
	position: absolute;
	right: 15px;
	top: 35px; /*was 35*/
	font-size: 30px;
	color: #ffffff; /*this controls the HOVER color of the hamburger three "bars"*/
	
}




.menu{
	width: 300px;
	display: block;
	background: #555; /*background color of the hamburger popout menu*/
	height: 100%;
	top: 0;
	right: -300px;
	position: fixed;
	z-index: 100;
	text-align: left;
	transition: right 0.4s;
	opacity: 0.97;
    filter: alpha(opacity=97); /*for IE8 and earlier*/
}

.menu.nav-expanded{
	right: 0;
}

.menu .close{
	color: #fff;
	margin-right: 10px;
	margin-top:50px; /*this adjusts the position of the cross to close the hamburger menu*/
	font-size:40px;
	
}

/*
.menu .close a{
	color: #ffffff;
	
}
*/


.close a:hover,
.close a:focus{
	color: #ffffff;
	text-decoration:none;
	
	z-index:9999; /*always visible above everything*/
}


.menu h3{
	margin-top:50px;
	text-transform: uppercase;
	color: #fff;
}

.menu .nav{
	padding: 0;
	font-size:14px;
}

.menu .nav > li > a{
	color: #fff;
	text-align:left;
	font-size:14px;
	line-height:10px;
}

.menu .nav > li > a:hover,
.menu .nav > li > a:focus{
	
	background-color: #6bc048;
	text-decoration:none;
	
}


/*******************************/
.menu .nav_sub{
	padding: 0;
	font-size:11px;
	margin-left:25px;
	color: #fff;
	text-indent: 55px;
	
}

.menu .nav_sub > a{ /* li > */
	color: #fff;
	text-align:left;
	font-size:11px;
}

/*
ul.nav_sub{
	/*list-style-type: circle;*/
/*	list-style-image: url('https://www.dmjbuildingandroofing.co.uk/files/img/hamburger/globe_bullet.png');
}*/


.menu .nav_sub > a:hover, /* li > */
.menu .nav_sub > a:focus{ /* li > */
	
	background-color: #6bc048;
	text-decoration:none;
}
/*******************************/



.menu .social-icons{
	margin-top: 20px;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

.menu .social-icons li{
	margin-right: 10px;
	float: none;
	display: inline-block;
}

.menu .social-icons li:last-child{
	margin-right: 0;
}

.menu .social-icons > li > a{
	width: 30px;
	height: 30px;
	line-height: 30px;
}



/****************
SOCIAL MEDIA ICONS
*****************/
.menu ul.social-icons{
	list-style: none;
	padding: 0;
}

.menu ul.social-icons > li{
	float: left;
	margin-right: 25px;
}

.menu ul.social-icons > li > a{
	color: #f2f2f2; /*colour of the actual text in the social media icons*/
	width: 38px;
	height: 38px;
	line-height: 38px;
	border-radius: 100%;
	background: #333333;
	display: block;
	text-align: center;
	font-size:15px;
}

.menu ul.social-icons > li > a:hover{
	color: #fff; /*colour of the actual HOVER text in the social media icons*/
	background-color: #6bc048;
	/*box-shadow: 3px 3px 2px #888888;*/
}