/* -------------------------------------------- */
/* ------------------Reset--------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;vertical-align:top;}ol, ul {list-style:none;}blockquote, q {quotes:none;}table, table td {padding:0;border:none;border-collapse:collapse;}img {vertical-align:top;}embed {vertical-align:top;}
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
input, textarea {border:0; padding:0; margin:0; outline: 0;}
iframe {border:0; margin:0; padding:0;}
input, textarea, select {margin:0; padding:0px;}

/* -------------------------------------------- */
/* ------------------Font---------------------- */

 @font-face{ 
	font-family: 'Bebas';
	src: url('fonts/bebas-webfont.eot');
	src: url('fonts/bebas-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/bebas-webfont.ttf') format('truetype'),
         url('fonts/bebas-webfont.svg#bebas_neueregular') format('svg');
}


/*Hyster Colours

#ffe34b = Yellow
#000000 = black
#3e4545 = gray
#9e1c20 = red

*/
/* -------------------------------------------- */
/* ------------------Style--------------------- */
html, body {width:100%; padding:0; margin:0;}
/*body {color: #9d9d9d;font: 16px/20px Arial, Helvetica, sans-serif; background:#000 url(../images/body-background.gif) no-repeat center top;}*/
body {color: #9d9d9d;font: 16px/20px Arial, Helvetica, sans-serif; background:#000 url(../images/Main_Textures_06.jpg) no-repeat center top;}

.ButtonClickMe {
  background-color: #ffe34b;
  -webkit-border-radius: 10px;
  border-radius: 0px;
  border: none;
  color: #ffe34b;
  cursor: pointer;
  display: inline-block;
  font-family: Helvetica ;
  font-size: 20px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}
@-webkit-keyframes glowing {
  0% { background-color: #444444; -webkit-box-shadow: 0 0 3px #444444; }
  50% { background-color: #999999; -webkit-box-shadow: 0 0 40px #999999; }
  100% { background-color: #444444; -webkit-box-shadow: 0 0 3px #444444; }
}

@-moz-keyframes glowing {
  0% { background-color: #444444; -moz-box-shadow: 0 0 3px #444444; }
  50% { background-color: #999999; -moz-box-shadow: 0 0 40px #999999; }
  100% { background-color: #444444; -moz-box-shadow: 0 0 3px #444444; }
}

@-o-keyframes glowing {
  0% { background-color: #444444; box-shadow: 0 0 3px #444444; }
  50% { background-color: #999999; box-shadow: 0 0 40px #999999; }
  100% { background-color: #444444; box-shadow: 0 0 3px #444444; }
}

@keyframes glowing {
  0% { background-color: #444444; box-shadow: 0 0 3px #444444; }
  50% { background-color: #999999; box-shadow: 0 0 40px #999999; }
  100% { background-color: #444444; box-shadow: 0 0 3px #444444; }
}




a{color: #474747; text-decoration: none;}
a:hover { text-decoration: none;}

a.button{cursor: pointer;color: #151514;line-height: 14px;font-family: Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;	background: #3F3F3F; display: inline-block;text-decoration: none;padding: 10px; }
a.button:hover{}

a.button2{cursor: pointer;line-height: 14px;font-family: Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold; color:#151514 !important; background: #f5d947 url(../images/black-arrow.gif) no-repeat right; display: inline-block;text-decoration: none;padding: 10px 30px 10px 20px; text-transform:uppercase;}
a.button2:hover{}

.clear{content: "\0020"; display: block; height: 0; clear: both; visibility:hidden; }

h1 {font-family: 'Bebas'; font-size:25px; line-height:30px; color:#fff; margin:0;  display:inline-block; width:100%; padding:5px 0 5px 0;}
h2 { display:block;  width:100%; font-weight:bold; font-family: 'Bebas'; letter-spacing:-0.5px; word-spacing:5px;}
h3 {font-family: 'Bebas';  color:#fff; font-size:18px; margin:20px 0 20px 0;}
h4 {color:#e32332;  font-size:12px; font-weight:normal; margin-left:10px;}

h1 sup, h2 sup{font-size:10px; line-height:5px;}

p sup, li sup {font-size:13px !important;line-height:5px;}

ul.nospace {margin-top:0px; padding-top:0px}

li.nospace {margin-top:0px; padding-top:0px}

p.nospace {margin-bottom:0px; padding-bottom:0px}

table th {color:black;}
table td {color:black;text-align:center;}

NavBanner { background-color: #ffe34b;}
h2.NavBanner { background-color: #ffe34b;}




/* Create two columns/boxes that floats next to each other */
.navpanel {
  float: left;
  width: 30%;
  height: 750px; /* only for demonstration, should be removed */
  padding: 20px;
}

.LayoutTable {
  border-collapse: collapse;
  width: 100%;
  column-width: auto;
}

.LayoutTable td, .LayoutTable th {
  
  padding: 8px;
  width: 50%;
  text-align:center;
}


.LayoutTable tr:nth-child(even){}

.LayoutTable tr:hover {}

.LayoutTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
 
}

.article {
  float: right;
  padding: 20px;
  width: 1060px;
  top: 150px;
  height: 750px; /* only for demonstration, should be removed */
  
}

/* Clear floats after the columns */
.section:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  .navpanel, .article {
    width: 100%;
    height: 1000px;
  }
}


.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border: 1px solid #999;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  background-color: #b9bdbd;
  border-top: none;
}

/* -------------------------------------------- */
/* ------------------Header-------------------- */
header {background:#343434 url(../images/header.gif) bottom repeat-x;}
header .wrap-header{/*height: 106px;*/ padding-top:15px; }
header .wrap-header h1 {color:#fff; font-size:25px; display:block; height:55px; line-height:60px; margin-left:0;}

.wrap-bar {height:4px; background:#2b2b2b; clear:both; color:#fff; font-size:18px; font-weight:bold; }
.wrap-bar-content {max-width:960px; margin:0 auto; }

header #logo {/*position:absolute; top:10px; padding:5px 5px 5px 0; max-width:214px;*/}



nav {}
nav .wrap-nav{/*position:absolute; top:40px; right:0px; height: 37px;*/ }

/*.menu ul {list-style: none;margin: 0;padding: 0;}*/
/*.menu  ul li {position: relative; float: left; padding: 6px 24px 0px 0;}*/
/*.menu  ul li:hover {}
.menu  ul li a {font-size: 12px; text-transform:uppercase; line-height:18px;color: #f5d947;display: block;padding: 6px 0 10px 0;margin-bottom: 5px;z-index: 6;position: relative; font-weight:bold;}
.menu  ul li:hover a {color:#fff;}
.menu  ul .active a {color:#fff;}


.minimenu{display:none;}
.minimenu{position: relative;margin: 0px;background:#007d32;}
.minimenu div{overflow: hidden;position: relative;font-size: 18px;color: #fff;text-align:center;text-transform:uppercase;font-weight:bold;}
.minimenu select{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%; opacity: 0;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);	cursor: pointer;}*/

/* -------------------------------------------- */
/* ------------------Featured---------------- */

/*.featured{ background:#fff; }
.featured .wrap-featured{}
.featured .wrap-featured .slider{}
.featured .wrap-featured img {width:100%; height:auto; vertical-align:middle;}
.featured .text {background-color:rgba(0,0,0,0.8);   color:#fff; bottom:0; position:absolute;}
.featured .content {width:100%; position:absolute; margin:0 auto; background:#B51315; height:auto;}*/


.flex-caption {
    position:absolute;
    left:50;right:50;bottom:0;
    background:rgba(0, 0, 0,0.8);
    z-index:1;padding:20px;
	color:#fff;
 }

.flex-control-nav {display:none;}

/* -------------------------------------------- */
/* ------------------Content------------------- */
#content {}
#content .wrap-content{ /*margin-top: 30px;*/}

.summary {background:#2b2b2b; padding:30px 0 30px 0;}
.advantages {background:#fff; color:#494449;}
.advantages h1, .advantages h3 {color:#000;}
.breakdown {padding:30px 0 0 0;}

.summary2 {background:#fff; padding:30px 0 30px 0;  color:#494449;}
.summary2 h1, .summary2 h3 {color:#000;}
.advantages2 {background:#2b2b2b url(../media/faded-example.jpg) no-repeat top left;  background-size:contain; padding:30px 0 30px 0;}


.block01 { padding-bottom:10px;}
.block01 img{}
.block01 h2{ line-height:30px; background:#1d1d1d; color:#fff;  margin:0; height:30px; display:inline-block; width:100%; padding:5px 0 5px 0; }
.block01 h2 a {font-size:20px !important; background-image:none !important; padding-left:15px !important;}
.block01 h2 a, .block01 h2 a:hover {color:#fff;}
.block01 h2 span{padding-left:15px !important; font-size:20px;}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 200px;
  background-color: #ffe34b;
  border-radius: 8px;
  margin: 5px;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


.button1 {
    border-radius: 0px;
    background-color: #3e4545;
  
}

.button2 {
    border-radius: 0px;
    background-color: #931c20;
  
}


.button3 {
  border-radius: 0px;
  width:50;
  height:30;
  padding: 3px 3px;
  background-color:black;
  color:white
}

.button4 {
  border-radius: 0px;
  width:50;
  height:30;
  padding: 3px 3px;
  background-color:#3e4545;
  color:white
}

.button:hover {
  background-color: #000000; /* Green */
  color: white;
}

.slidecontainer{
      width: 95%; /* Width of the outside container */
      padding: 8px 8px;
  
}

/* The slider itself */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 0px;   
  background: #d3d3d3;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  background: rgb(62,69,69);
  transition: opacity .2s;
  
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 45px;
  height: 25px;
  border-radius: 0%; 
  background: rgb(158,28,32);
  cursor: pointer;
 
}

.slider::-moz-range-thumb {
  width: 45px;
  height: 25px;
  border-radius: 0%;
  background: rgb(158, 28,32);
  cursor: pointer;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1.0; /* Fully shown on mouse-over */
  background: rgb(198, 28,32);
}







.Radiocontainer {
  display: block;
  position: relative;
  padding-left: 5px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  width: 95%;
  left: 5%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.Radiocontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.Radiocontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.Radiocontainer input:checked ~ .checkmark {
  background-color: rgb(158, 28, 32);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.Radiocontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.Radiocontainer .checkmark:after {
 top: 6px;
left: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}





.FixedScreenDiv_background table {
  width:90%;
  border: 1px solid black;
  background-color: #ffe34b;
}















.block01 .col-1-4 .wrap-col img { }
.block01 .yellow-border {border:solid 1px #ffe34b;}
.block01 .col-1-4 .yellow-border h2 a{font-size:18px; font-weight:normal; }
.block01 .col-1-4 .wrap-col h3 {font-family:arial; text-transform:uppercase; margin-top:0; font-size:16px;}
.block01 .col-1-4 .wrap-col .links {background:#141414; padding:15px; min-height:120px; }
.block01 .col-1-4 .wrap-col .links a {font-size:14px; font-weight:bold; display:block; color:#fff; text-transform:uppercase; background:url(../images/yellow-arrow.gif) left 3px no-repeat; padding-left:15px; }
.block01 .col-1-4 .wrap-col .links a:hover {text-decoration:underline;}

.block01 .col-1-3 .wrap-col .links {background:#141414; padding:15px; /*border:solid 1px #f5d947;*/ min-height:140px;}
.block01 .col-1-3 .wrap-col .links a {font-size:14px; font-weight:bold; display:block; color:#fff; text-transform:uppercase; background:url(../images/yellow-arrow.gif) left 3px no-repeat; padding-left:15px; }
.block01 .col-1-3 .wrap-col .links a:hover {text-decoration:underline;}
.block01 .col-1-3 .wrap-col .links span {font-size:14px; font-weight:bold; display:block; color:#fff; text-transform:uppercase;  }

/*.block01 .col-2-4 div {padding:5px ;  background:#1d1d1d; }
.block01 .col-2-4 h2{ line-height:30px;color:#fff;  height:auto; margin:0;  width:100%;  }
.block01 .col-2-4 h2 a {font-size:20px !important; background-image:none !important; padding-left:0!important;}*/
.block01 .col-2-4 div {padding:5px ;  background:#ffe34b; }
.block01 .col-2-4 h2{ line-height:28px; height:auto; margin:0;  width:100%;  background:none;}
.block01 .col-2-4  a {display:block; text-transform:uppercase; line-height:26px; font-size:18px !important; color:#000;  font-weight:bold; background:url(../images/yellow-arrow-2.gif) no-repeat right center !important; padding-left:0!important; font-family:arial; }

.block02 {/*background:#141414;*/ padding-top:10px; padding-bottom:10px;}
.block02 ul li {background:url(../images/bullet.gif) no-repeat  10px 8px ; padding-left:30px;}
.block02 .right-align-image {float:right;}
.block02 .padding {margin:10px;}

.block02 table { color:#444444; margin-top:20px;}
.block02 table th {background:#eeeeee; padding:10px; border:solid 0px #dddddd;}
.block02 table td { padding:5px 10px 5px 10px; border:solid 0px #dddddd; width:50%; font-size:16px; }
.block02 table tr:nth-child(even) {background:url(../images/table-row.gif) repeat-x bottom;}

.block02 .col-1-full a {color:#ffe34b;}

/* -------------------------------------------- */
/* ------------------Footer-------------------- */
footer {background-color:#202020; margin-top:15px; font-size:12px;}
footer .wrap-footer{padding:10px 0px; color:#9d9d9d;}
footer .box{}
footer .heading{ padding:5px; border-bottom:3px solid #FFFFFF;}
footer .content{padding:5px}
footer .content a{color:#DA251D; text-decoration:none;}
footer .content .gallery img{ float:left; padding:5px; border:1px solid #CCC; margin:5px;}

.copyright{ margin:10px 0;}
.copyright span{margin:0 0 0 20px;}
.copyright a{color:#ffffff; text-decoration:none !important;}

.signoff {margin:10px auto; max-width:960px; width:100%; font-size:11px; line-height:17px;}
.signoff a {color:#fff !important;}




#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  /*font-family: Montserrat, sans-serif;*/
  /*background: #333333;*/
}
#cssmenu > ul > li {
  float: left;
  z-index:1000;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
  
}
#cssmenu > ul > li > a {
  padding: 12px 24px 12px 0;
  font-size: 12px;
  /*letter-spacing: 1px;*/
  text-decoration: none;
  color: #ffe34b;
  font-weight: bold;
  text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 25px;
}
/*#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}*/
/*#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}*/
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  /*content: '';*/
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  /*content: '';*/
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
	z-index:1000;
	background:#2b2b2b;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
	
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
	padding-left:17px;
	
  }
  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: #dddddd;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 17px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }
}