/* LAYOUT */
html { margin:0; padding:0;}
body { font-family: 'psl_kanda_modern_extraregular'; font-size:16px; color:#000000; background:#ffffff; margin:0; padding:0; 
	
}

.clear { clear: both; }
.clearLeft { clear:left;}

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

h1 { font-family: 'psl_kanda_modern_extraregular'; font-size:16px; color:#ee2b33; line-height:18px;}
h2 { font-family: 'psl_kanda_modern_extraregular';  font-size:16px; color:#666666; margin:0; padding:20px 0 5px 0; line-height:14px;}
h3 { font-family: 'psl_kanda_modern_extraregular';  font-size:20px; color:#101010; font-weight:normal; margin:0; padding:0; }
h6 { font-family: 'psl_kanda_modern_extraregular'; font-size:16px; color:#000; line-height:18px; border-bottom:1px solid #dedede; display:block; margin:0 0 40px 0; padding:0 0 3px 0;}
h4 { font-family: 'psl_kanda_modern_extraregular'; font-size:24px; color:#000000; font-weight:normal; margin:0; padding:0; }
#wrapper { width:100%; margin:0; padding:0;}
#header { width:100%; margin:0; padding:10px 0; background: url(../images/bg/bg-line.jpg) repeat-x bottom left;}
.container { width:100%; background:#FFF;}
.header { width:945px; margin:0 auto; padding:0;}
.content { width:945px; margin:0 auto; padding:0;}

.txtIntro { text-align:center; padding:30px 0 350px 0; margin:0; }
.txtIntro img { width:inherit !important}
.txtbanner { width:140px; float:right; padding:30px 0 0 0; color:#FFF !important; }

.txtbanner span { font-size:18px; display:block; padding:20px 0 0 0; line-height:14px;}  
.txthead { padding:10px 30px; margin:0 0 30px 0; background:#000; font-size:20px; color:#FFF;  text-align:center; float:left;}
.topmenu { padding: 10px 10px 0px 10px; margin:10px 10px 10px 10px; background:#000;  color:#FFF;  text-align:center; float:right;}

/*.txthead_series { background:url(../images/bg/bg-serieB.png) no-repeat top left; width:391px; color:#FFF; padding:4px 0 20px 0; text-align:center; text-transform:uppercase; font-size:18px; margin:0 0 15px 0;}*/
ul.txthead_series { margin:0 0 15px 0; padding:0;}
ul.txthead_series li { padding:0 !important; height:35px; line-height:35px;  margin:0; display:block; float:left; text-align:center; text-transform:uppercase; font-size:16px;  list-style:none; color:#FFF; }

a.cd-top { background:#FFF; }
a.cd-top img { border-left:2px solid #ccc; border-right:2px solid #ccc; border-top:2px solid #ccc; border-radius:3px;}

.logo { float:left; width:360px;}
.call { float:left; width:400px; color:#626262; font-family:'kittithada_thin_35_p'; font-size:18px; font-weight: bold; padding:10; }
.call span {font-family:'kittithada_thin_35_p'; font-size:25px; font-weight: bold; color:#000000; display:block; margin:-10px 0 0 0 }
.call img { float:left; padding:15px 10px 0 0;}
.IDline { float:right; width:170px;}
.IDline span { font-family:'kittithada_thin_35_p'; font-size:20px; font-weight: bold; color:#000000; display:block; margin:20px 0 0 0 }
.IDline img { float:left; padding:15px 10px 0 0;}

#Intro { width:100%; margin:0 auto; padding:0; background:url(../images/banner-intro.jpg) no-repeat top center ; height:570px;}

ul.Maxlink {margin:0 0 0 -10px;padding:0;position:absolute;left:0;top: -130px;
}
ul.Maxlink li { margin:0 0 0 10px; list-style:none; display:block; float:left; padding:10px; width:288px; background:url(../images/bg/bg-btn-hover.png) no-repeat top left; color:#ffffff; font-size:20px; -webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;}
ul.Maxlink li:hover { background:url(../images/bg/bg-btn.png) no-repeat top left; color:#ffb900; -webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;}
ul.Maxlink li img { float:left; padding:0 10px 0 0;}
ul.Maxlink li span { display:block; font-size:25px; margin:-18px 0 0 0; display: block !important}
p.more { margin:-10px 0 0 0; padding:0  !important; font-size:13px; line-height:16px;}

span.arow { text-align:right !important; font-size:40px; padding:0 10px 0 0; color:#FFF;}
span.arow_ { font-size:16px; display: block !important; text-align:right;color:#FFF;}


.Maxother ul {margin:0 0 0 -10px !important; padding:0; }
.Maxother ul li { list-style:none; padding:10px; margin:0 0 0 10px !important;}
.Maxother ul li a { display:block; float:left; width:288px;  color:#FFF;}
.Maxother ul li a:hover { color:#ffb900;}
span { display:block; font-size:25px; margin:-18px 0 0 0;}
.Maxother ul li.Maxstyle { background:url(../images/banner-style.png) no-repeat top left;}
.Maxother ul li.Maxsportbar { background:url(../images/banner-sportbar.png) no-repeat top left;}
.Maxother ul li.Maxbumper { background:url(../images/banner-bumper.png) no-repeat top left;}
.Maxother ul li.Maxbumperguard { background:url(../images/banner-bumperguard.png) no-repeat top left;}
.Maxother ul li.Maxcover { background:url(../images/banner-cover.png) no-repeat top left;}
.Maxother ul li.Maxcover2 { background:url(../images/banner-cover2.png) no-repeat top left;}
.Maxother ul li.Maxreargarnish { background:url(../images/banner-reargarnish.png) no-repeat top left;}
.Maxother ul li.Maxtop { background:url(../images/banner-top.png) no-repeat top left;}
.Maxother ul li.Maxbox { background:url(../images/banner-box.png) no-repeat top left;}
.Maxother ul li.Maxliner { background:url(../images/banner-liner.png) no-repeat top left}
.Maxother ul li.Maxsidebox { background:url(../images/banner-sidebox.png) no-repeat top left}

ul.bannerPro { margin:20px 0 0 -12px; padding:0;}
ul.bannerPro li { margin:0; padding:0 0 0 12px; list-style:none; display:block; float:left; width:306px;}

.LinkCart { background:url(../images/bg/bg-order.png) no-repeat top center; width:804px; height:72px; margin:60px auto 20px auto; color:#FFF !important; padding:28px 0 0 0 ; position:absolute; left:70px;}
.LinkCart a { color:#FFF; text-decoration:none;}
.LinkCart span { font-size:20px;}
.LinkCart p { margin:-8px 0 0 0; padding:0;}
.LinkCart img { float:left; padding:0 20px 0 70px; margin:-10px 0 0 0}

/*column ContactUs*/
ul.ContactUs { margin:0 0 0 -37px; padding:20px 0 0 0;}
ul.ContactUs li { list-style:none; display:block; float:left; width:290px; margin:0 0 0 37px; font-family:'kittithada_thin_35_p';  font-weight: bold; line-height:18px; }

ul.Map { margin:5px 0 0 0; padding:0;}
ul.Map li { list-style:none; display:block; margin:0; padding:0 0 10px 0;}
ul.Map li:hover { opacity:0.7;}
ul.Map li img { float:left; padding:0 10px 0 0;}

/*listProduct*/
.listProduct { width:512px; float:right; margin:20px 0 0 0;}
.listProduct ul { margin:0; padding:0;}
.listProduct ul li { margin:0; padding:0; list-style:none; display:block; float:left; }

/*color*/
ul.listcolor { margin:0; padding:0;}
ul.listcolor li { margin:0; padding:10px; list-style:none; display:block; float:left; width:237px; border-left:1px solid #cccccc ; border-bottom:1px solid #cccccc ; border-right:1px solid #cccccc ; height:230px;}
ul.listcolor li p { margin:0 0 5px 0; padding:0; display:block;}
ul.listcolor li span { display:inline; font-size:13px; font-weight:bold;}
ul.listcolor li:hover { background:#eeeeee;}
ul.listcolor li img { margin:0 10px;}
ul.listcolor li a { text-decoration:none;}
ul.listcolor li a:hover { text-decoration:none;}


/*catagory*/
ul.catagory { margin:20px 0 0 -60px; padding:0;}
ul.catagory li { min-height: 550px; width:420px; list-style:none; display:block; float:left; margin:0 0 50px  60px; padding:0 0 20px 0;  border-radius:5px;-moz-border-radius:5px; -khtml-border-radius:5px;-webkit-border-radius:5px; box-shadow:2px 3px 8px #dedede; border:1px solid #dedede;  -webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;} 
ul.catagory li img { border-radius:5px;-moz-border-radius:5px; -khtml-border-radius:5px;-webkit-border-radius:5px;}
ul.catagory li a:hover { text-decoration:none; color:#F00 !important; opacity:0.7; -webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out; }
.txthead_catagory { font-size:18px; margin:30px 15px 10px 15px; line-height:18px;}
.txthead_catagory span { font-size:20px;}
.txtbrif_catagory { min-height:40px; padding:0 0 30px 0; line-height:20px;margin:10px 15px  0 15px; color:#636363; border-bottom:1px solid #dddddd;}
.clickOrder { margin:10px 0 0 0; padding:0 10px 0 10px; color:#5b5b5b; font-family:'kittithada_thin_35_p'; font-size:18px; font-weight: bold;}
.clickOrder img { float:left; padding:0 15px 0 0; margin:0;}

/*order*/
ul.wrap_series { width:100%; margin:0; padding:0;}
ul.wrap_series li { list-style:none; display:block; margin:0; padding:20px 0 0 0;}
ul.wrap_series li:nth-child(odd) { background:url(../images/bg/bg-line.jpg) repeat-x bottom left #e1e1e1;}
ul.wrap_series li:nth-child(even) { background:url(../images/bg/bg-line.jpg) repeat-x bottom left #ebebeb;}

#form h1 { margin:0; padding:45px 0; font-family: 'psl_kanda_modern_extraregular'; font-size:32px; font-weight:normal; }
#form h2 { margin:0; padding:0 0 20px 0; font-family: 'psl_kanda_modern_extraregular'; font-size:18px; font-weight:normal; text-decoration:underline; }
#form p span { color:#F00; }
#form h3 { margin:0; padding:0; font-family: 'psl_kanda_modern_extraregular'; font-size:13px; font-weight:normal; }
.step { margin:0; padding:0 0 45px 0; }

#form h4 { margin:0; padding:20px 0 0 0; font-family: 'psl_kanda_modern_extraregular'; font-size:13px; font-weight:normal; color:#F00; }

#form h5 { margin:0; padding:0 0 10px; font-family: 'psl_kanda_modern_extraregular'; font-size:13px; font-weight:normal; color:#F00; line-height:14px; }

#form table tr td.tdhead { font-family: 'psl_kanda_modern_extraregular'; margin:0; padding:10px 0; font-size:13px; color:#fff; }

#form strong { font-family: 'psl_kanda_modern_extraregular'; font-size:13px; font-weight:normal; }

#form table tr td h1 { font-family: 'psl_kanda_modern_extraregular'; margin:0; padding:0; font-size:22px; font-weight:normal;}

.location { border-right:3px solid #ff0000; border-bottom:1px solid #a9a9a9; border-top:1px solid #a9a9a9; border-left:1px solid #a9a9a9;}

ul.series { margin:0 0 0 -27px; padding:0;}
ul.series li { list-style:none; display:block; float:left; background:none !important ; margin:0 0 50px 27px; padding:0}

.orderDetail { margin:12px 0 0 0; padding:0; /*height:70px;*/}
.checkmodel { float:left; width: 30px;}
.orderDetail p { margin:0; padding:0; display:block; font-family:Tahoma, Geneva, sans-serif; font-size:20px; width: 420px;  height: 80px; float:left; line-height:18px; color:#2b2b2b;}
.price {color:#ee2b33; font-size:26px;  padding:0 0 0 20px; text-align:left;}

#form ol { margin:0; padding:10px 0 0 15px; }
#form ol li { margin:0; padding:10px 0; line-height:18px; font-family:Arial, Helvetica, sans-serif; font-size:13px; }
#form ol span { color:#616161; }
#form ol strong { font-family: 'psl_kanda_modern_extraregular'; font-size:13px; font-weight:normal; }

#BoxPrev { width:863px; margin:0 0 40px 0; padding:43px; background:#fff; border:1px solid #d5d5d5; }
#BoxPrev h1 { margin:0; padding:0 0 30px 0; font-size:20px; font-family: 'psl_kanda_modern_extraregular'; text-transform:uppercase; font-weight:normal; }
#BoxPrev h2 { margin:0; padding:0; font-size:22px; font-family: 'psl_kanda_modern_extraregular'; text-transform:uppercase; font-weight:normal; }

#BoxPrev table tr td p { margin:0; padding:0; color:#fff; font-weight:bold; }
#BoxPrev table tr td span { color:#F00; font-size:16px; display:inline; margin:0; padding:0; }
#BoxPrev table tr td { padding:5px 0;}

ul.model { margin:0; padding:0;}
ul.model li { margin:0; padding:0; list-style:none; background:url(../images/bg/line.jpg) no-repeat top right; display:block; float:left;}
ul.model li a { display:block; float:left; text-transform:uppercase; font-size:18px; padding:0 20px 30px 20px; line-height:14px !important; margin:0;color:#464646;}
ul.model li a:hover { color:#ffb900; text-decoration:none;}
ul.model li a.selectmodel { color:#ee2b33; background:url(bg-select.png)no-repeat bottom center; }

.colL { float:left ; width:940px;}
.colR { float:right; width:470px;}

/*Form*/
#form p { margin:0 10px 0 0; padding:0; font-family: 'psl_kanda_modern_extraregular'; font-size:13px; font-weight:normal; color:#003867; line-height:16px; }


.txtbox { margin:0; padding:7px; border:1px solid #b8b8b8; background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
.txtbox_alert { margin:0; padding:7px; border:1px solid #b8b8b8; border-right:3px solid #d70308; background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:12px; }

.btn { width:100%; margin:0; padding:80px 0 80px 0; text-align:right; }


/*#BoxPrev { width:863px; margin:0 0 40px 0; padding:43px; background:#fff; border:1px solid #d5d5d5; }
#BoxPrev h1 { margin:0; padding:0 0 30px 0; font-size:30px; font-family: 'psl_kanda_modern_extraregular'; text-transform:uppercase; font-weight:normal; }
#BoxPrev h2 { margin:0; padding:0; font-size:22px; font-family: 'psl_kanda_modern_extraregular'; text-transform:uppercase; font-weight:normal; }*/

/*#BoxPrev table tr td p { margin:0; padding:0; color:#fff; font-weight:bold; }
#BoxPrev table tr td span { color:#F00; }*/

.boxFrom { margin:0; padding:0; width:950px;}
.boxFrom { margin:0; padding:0;}
.boxFrom { list-style:none; display:block; float:left; }


/*footer*/
#footer { width:100%; margin:0; padding:0; background:#FFF;}
.footer { width:945px; margin:0 auto; padding:30px 0 30px 0;}
.copy { float:left; width:700px; font-family:Arial, Helvetica, sans-serif; font-size:13px; }
.social { float:right; width:245px;}
.social ul { margin:-10px 0 0 0; padding:0;} 
.social ul li { list-style:none; display:block; float: right; margin:0; padding:0 0 0 5px;} 
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #ed1c24;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}



/* Add animation to "page content" */



/* The botton */
.button {
    background-color: #ddd;
    border: none;
    color: black;
    padding: 10px 20px;
	
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
	font-size: 15px;
	width: 250px;
}

.button:hover {
    background-color: #f1f1f1;
}

/* The container */
.container_radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

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

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

/* When the radio button is checked, add a blue background */
.container_radio input:checked ~ .checkmark {
    background-color: #ab0000;
}

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

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

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


/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button {
    background-color: #ab0000;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    font-size: 20px;
}

button:hover {
    opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container_b {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 0px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    max-width: 980px; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

    .cancelbtn {
       width: 100%;
    }
}

/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #ed1c24;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: left;
}

/*PHOTO CIRCLE    */
.c_border{ 
    border-radius:15px;
	-moz-border-radius:15px;
	-khtml-border-radius:15px;
	-webkit-border-radius:15px;
	  border: 3px solid #fff; 
	 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
}

.text2 {
  color: #f2f2f2;
  font-size: 15px;
  padding: 5px 5px;
  position: absolute;
  bottom: 1px;
  width: 100%;
  text-align: center;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
}

.img_zoom:hover {
    -ms-transform: scale(1.3); /* IE 9 */
    -webkit-transform: scale(1.3); /* Safari 3-8 */
    transform: scale(2.3); 
}

.img_zoom_zoom:hover {
    -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari 3-8 */
    transform: scale(1.1); 
}

/* BG HEADER  */


.image-container {
  background-image: url("../bg.jpg");
  background-size: cover;
  position: relative;
  height: 800px;
 
}

.text {
  background-color: #000000;
  color: #ffffff;
  font-size: 7vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 3px;
  width: 95%;
  text-align: center;
  position:  absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  opacity: 0.3;
  filter: alpha(opacity=50); 
  border-radius: 25px;
}
.textlogo {

  margin: 0 auto;
  font-size: 6vw; 
  text-align: center;
  top: 40%;

 
}
/* -- SLIDE MENU --  */


.overlaymenu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.7);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlaymenu-content {
  position: relative;
  top: 10%;
  width: 10%;
  text-align: left;
  margin-top: 10px;
  

}
  ul.a {
  list-style-type: circle;
  color: #000000;
  
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
.overlaymenu a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlaymenu a:hover, .overlaymenu a:focus {
  color: #f1f1f1;
  display: flex;
}

.overlaymenu .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* -- MEUN  FIX Hamburger --  */

#navbar {
  overflow: hidden;
  padding: 5px 5px 5px 5px;
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
}

#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: dodgerblue;
  color: white;
}

#navbar-right {
  float: right;
}

/* -- MOBILE 

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  } -- */