@charset "utf-8";
/* CSS Document */


* {box-sizing: border-box; font-family: Arial;}

/*#jumborton1WebD7Header{*/
.paddingOuterColor{
		
    /*padding:35px;*/
    /*background-image:linear-gradient(to bottom, rgba(80, 80, 80, 1) 0%, rgba(80, 80, 80, 1) 100%), linear-gradient(to bottom, rgba(40, 40, 40, 1) 0%, rgba(40, 40, 40, 1) 100%);*/
	
	background-image:linear-gradient(to bottom, rgba(80, 80, 80, 1) 0%, rgba(80, 80, 80, 1) 100%), linear-gradient(to bottom, rgba(40, 40, 40, 1) 0%, rgba(40, 40, 40, 1) 100%);
	
    background-clip: content-box, padding-box;
}



/* sys header*/
.sys-header{ width:100%; height:40px; background-color:#222; position:fixed !important; top:0; left:0; z-index:545454454568; color:#FFF; }
.top-marging-header{ margin-top:40px;}
/* /sys header*/


/*right slide*/
.sidenav {
/*  height: 96%;*/	
height: calc(96% - 40px);
height: -moz-calc(96% - 40px);
height: -webkit-calc(96% - 40px);
height: -o-calc(96% - 40px);
	
  width: 0;
  position: fixed;
  z-index: 96;
	
/*top: 2%;*/
top: calc(2% + 40px);
top: -moz-calc(2% + 40px);
top: -webkit-calc(2% + 40px);
top: -o-calc(2% + 40px);
	
  right: 1%;
 background-color: #111;  
 /*  transition: 0.5s;*/
  padding-top: 60px;
/*overflow-x: hidden;*/
}

.sidenav-content-container{
	 height: 100%;
	 background-color: #222;
overflow-x: hidden;	
}

.sidenav-content-container::-webkit-scrollbar{width:10px;}
.sidenav-content-container::-webkit-scrollbar-track{background:#333;}
.sidenav-content-container::-webkit-scrollbar-thumb{background:#02A5CF;}
.sidenav-content-container::-webkit-scrollbar-thumb:hover{background:DodgerBlue;}

/*.sidenav-header{ width: 100%; height: 50px; background-color: #FB9495; }*/

.sidenav-content-container a, .sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
	
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav-content-container a:hover, .sidenav a:hover {
  color: #f1f1f1;
	  text-decoration: none!important;
}

.sidenav .closebtn-webd {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;  
}
.sidenav .expandbtn-webd {
  position: absolute;
  top: 0;
  right: 75px;
  font-size: 36px;  
}


#sideTitlename {
  position: absolute;
  top:20px;
  left:15px;
  font-size:14px;
/*  margin-left: 50px;*/
  color:#999!important;
	

}

/*@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}*/

/*Left - tablink*/
.left-tablink
{
	background: #333;
}

.left-tablink:hover {
  background-color: #444;
	outline: none;
}
.left-tablink:after {
 
	outline: none;
}
/*/Left - tablink*/


/*/right slide*/


/* Style right tab links */
.right-tablink {
  background-color: #333;
  /*color: white;*/
border-right: thin solid #000;
  float: left;
  border-left: none;
	border-bottom: none;
	border-top: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 12px;
  width: 25%;
	color: #999;
}

.right-tablink:hover {
  background-color: #444;
	outline: none;
}
.right-tablink:after {
 
	outline: none;
}

/*carousel tab link*/
.carousel-tablink {
  background-color: #444;
  /*color: white;*/
border-right: thin solid #000;
  float: left;
  border-left: none;
	border-bottom: none;
	border-top: none;
  outline: none;
  cursor: pointer;
  padding: 10px 16px;
  font-size: 12px;
 /* width: 25%;*/
	color: #999;
}

.carousel-tablink:hover {
  background-color: #555;
	outline: none;
}
.carousel-tablink:after {
 
	outline: none;
}
/*carousel tab link end*/




/* Style the tab content (and add height:100% for full page content) */
.right-tabcontent{
  color: white;
  display: none;
  padding: 70px 20px;
/*  height: 100%;*/
}
 .carousel-tabcontent {
  color: white;
  display: none;
 /*  height: 100%;*/
}

#Settings {background-color:#222; outline: none;}
#Animation {background-color: #222; outline: none;}
#Filters {background-color: #222;}
#Layers {background-color: #222;}

/* Style right tab links */


/*tool section*/
.tool-section
{
	width: 100%;
	margin: 10px 0px;
	padding: 10px 0px;	
	border-top: #333 groove 2px;
}

.tool-section-main-title
{ font-size: 12px;
color: #666;
	padding: 0px 0px 10px 0px;}

.tool-section-title
{ font-size: 14px;
color: #999;
	padding: 0px 0px 10px 0px;}

.tool-section-each
{
	width: 100%;
	height: auto;
	display: table;
	/*clear: both;*/
	padding:12px 0px;

}

.tool-section-each-50
{
	width:50%!important;
	height: auto;
	display:block;
	float: left;
	padding: 5%;

	/*opacity: 0.2;*/

}

.tool-section-bottom
{
	width: 100%;
	height:auto;
	float: left;
	
	margin: 0px 0px 5px;
	padding: 0px 0px 5px;	
	/*border-bottom: #333 groove 2px;*/
}

/*/tool section*/

/*btn style inside slide*/
.btn {
  background-color: #282828;
  border: none;
	display: block;
  color: white;
  padding: 12px 16px;
	margin:0px 4px 4px 0px;
  font-size: 16px;
	
  cursor: pointer;
	outline: none;
	float: left;
}
.btn:hover, .btnactive {
  background-color:#1e90ff;
	 border: none;
	outline: none;
}
/*/btn style inside slide*/


/*slidertool*/

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  /*width: 70%;*/ /* Full-width */
  
  	width: calc(100% - 80px);
/* Firefox */
width: -moz-calc(100% - 80px);
/* WebKit */
width: -webkit-calc(100% - 80px);
/* Opera */
width: -o-calc(100% - 80px);
/* Standard */
width: calc(100% - 80px);
  height: 25px; /* Specified height */
  background: #fff; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.9; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  float:left;
}
.sliderinp { width:62px; height:25px; float:left; margin:0px 0px 0px 10px; text-align:center; border: none; outline: none;}
/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background:#1e90ff; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background:#1e90ff; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/*/slidertool*/

/*color*/
.pick-color-box{
	width: 80px;
	height: auto;
	display: table;
	float: left;
}
.selected-color-box
{
	
  	width: calc(100% - 80px);
/* Firefox */
width: -moz-calc(100% - 80px);
/* WebKit */
width: -webkit-calc(100% - 80px);
/* Opera */
width: -o-calc(100% - 80px);
/* Standard */
width: calc(100% - 80px);
	
	min-height: 100px;
	border: thin solid #444;
	padding: 4px;
	height: auto;
	display: table;
	float: left;
	
	
}
.each-color-box{ width: 50px; height:40px; float: left; margin-left: 2px; cursor:copy; }
.each-color-box:hover{ border: 2px solid #fff;}

/*/color*/

.position-tool-container
{width: 126px;
height: 126px;
	margin: 0px auto;
	display: table;
	
}


.position-tool-each
{ width:32%;
height: 40px;
margin: 1px;
float: left;
	text-align: center;
	font-size: 12px;line-height: 45px;
	color: #666;
background: #333;
	cursor: pointer;
}
.position-tool-each:hover, .position-active{background:#1e90ff; color: #fff; }

.each-layer
{ width:100%;
height: 40px;
margin: 1px;
float: left;
	text-align: left;
	font-size: 12px;line-height: 45px;
	color: #ddd;
background: #333;
	cursor: pointer;
}
.each-layer:hover, .each-layer:hover .each-layer-thumb, .each-layer-thumb:hover, .each-layer-active{background:#1e90ff; color: #fff; }
.each-layer-icon
{ width:40px;
height: 40px;
	border-right: 2px solid #222;

float: left;
	text-align: center;
	font-size: 16px;line-height: 45px;
	color: #ccc;

background: #333;
	cursor: pointer;
}
.each-layer-thumb
{ width:60px;
height: 40px;
	
margin-right: 6px;
float: left;
	text-align: center;
	font-size: 14px;line-height: 45px;


	cursor: pointer;
}
.each-layer-thumb img {width: 80%;
height: 28px;
	margin-left: 0px;
	margin-bottom: 4px;
}

/*custom select - font style*/
/*the container must be positioned relative:*/
.custom-select-webd {
  position: relative;
 /* font-family: Arial;
	width: 100%!important;*/
	
		
	display: table;
	float: left;
	width: calc(100% - 80px)!important;
/* Firefox */
width: -moz-calc(100% - 80px)!important;
/* WebKit */
width: -webkit-calc(100% - 80px)!important;
/* Opera */
width: -o-calc(100% - 80px)!important;
/* Standard */
width: calc(100% - 80px)!important;
	font-size: 14px !important;
	

}

.custom-select-webd select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  /*background-color: DodgerBlue;*/
	background-color: #282828;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #1e90ff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #1e90ff transparent;
  top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #282828;
  top: 100%;
  left: 0;
  right: 0;
	/* add myself */
	height: 200px;
	overflow-y: scroll;
	/* /add myself */
  z-index: 99;
}

.select-items::-webkit-scrollbar{width:8px;}
.select-items::-webkit-scrollbar-track{background:#333;}
.select-items::-webkit-scrollbar-thumb{background:#02A5CF;}
.select-items::-webkit-scrollbar-thumb:hover{background:DodgerBlue;}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  /*background-color: rgba(0, 0, 0, 0.1);*/
	background-color: DodgerBlue;
}
/*/custom select - font style*/
.left-label-container{
	
	width: 80px;
	height: auto;
	display: table;
	float: left;
	font-size: 14px;
color: #999;
	line-height: 35px;
}


.padding-input-container{
	/*width: 120px;*/
	width: 100%;
	height: 105px;
	/*float: left;*/
	
	margin: 0px auto;
	display: block;	
}
.padding-input-row
{
	/*width: 120px;*/
	width: 100%;
	height: 35px;
}
.padding-input{width: 33.333%; height: 35px;}
.padding-input input{width: 100%; border: none; outline: none; background: #ddd; text-align: center;}
.padding-input label{font-size: 10px; color: #888; width: 100%; height: auto; display: block;text-align:center!important;  background: #444;}


/*thumb tool image*/

.img-container {
  position: relative;
  width: 100%;
}

.img-container .image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.img-container:hover .image {
  opacity: 0.3;
}

.img-container:hover .middle {
  opacity: 1;
}

.img-container .text {
  background-color: #1e90ff;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
	cursor: pointer;
}
.img-container .img-delete-btn {
  background-color: #1e90ff;
  color: white;
	width: 40px;
  font-size: 16px;
  padding: 16px 2px;
	cursor: pointer;
}
.img-gallery-number{
position:absolute; top:0; left: 0; background: #f60; width: 35px; padding: 5px; text-align: center; border-right: 4px solid #222;  border-bottom: 4px solid #222; }
/*/thumb tool image*/


/*Center Modal */

/* The Modal (background) */
.centermodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index:99; /* Sit on top */
  padding-top: 5%; /* Location of the box */
  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 */
}

/* Modal Content */
.centermodal-content {
  background-color: #fefefe;
  margin: auto;
  padding:0px 20px 20px;
  border: 1px solid #888;
	min-height: 400px;
  width: 80%;
	height: 90%;
}

/* The Close Button */
.centermodalclose {
  color: #aaaaaa;
  float: right;
  font-size: 45px;
/*  font-weight: bold;*/
}

.centermodalclose:hover,
.centermodalclose:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.centermodalclose_row{
	width: 100%;
	height: 60px;
	float: left;
	/*background: #222;*/
	border-bottom: #ccc thin solid;
}
/* / Center Modal */



/* Left Add Section */


	
.contact_btn_sidebar{position:fixed;left:40px;top:20%; z-index:98;}
.contact_form_sidebar{position:fixed;left:105px;top:20%; padding:20px;  width:500px;background-color:#494544; /* background: rgba(0, 0, 0, .4);*/ display:none; z-index:69 !important;}
.contact_form_sidebar input[type="text"], [type="email"], [type="tel"]{ width:100%; color:#cecdcd; border:1px solid #FFF; background-color:#494544!important; padding:10px; margin-bottom:10px; font-size:12px;}
.contact_form_sidebar select{ width:100%; font-size:12px; border:1px solid #FFF; color:#cecdcd; background-color:#494544!important;
 padding:10px;margin-bottom:10px; height:40px!important; border-radius:0px!important}
.contact_form_sidebar h2{ font-size:16px; margin:0px; color:#FFF; text-transform:uppercase; padding-bottom:20px;font-family:'AlrightSans-Bold';}
.contact_form_sidebar input[type="text"]:focus {  background-color:#494544!important; }
INPUT.default-btn{background-color:#108fa4;border-radius:20px;padding:10px 55px 7px 25px;font-size:12px!important;color:#FFF;display:inline-block;position:relative;text-transform:uppercase!important; background-image:url('../images/button-arrow.png'); background-position:80%; background-repeat:no-repeat; margin-top:10px;}
INPUT.default-btn:hover{color:#FFF;text-decoration:none; background-position:85%;}
#contactBtn_close{ cursor:pointer;}

.contact_form_sidebar .wpcf7-response-output
{
	display:none!important;
}
.contact_form_sidebar div.wpcf7 .screen-reader-response
{
	font-size:14px!important;
	color:#ffffff!important;
}

.contact_form_sidebar span.wpcf7-not-valid-tip
{
	padding-bottom:0px;
	font-size:11px!important;
	color:#FFF;
}

.inquiry_form input[type="email"] {
    display: block;
    background-color: transparent!important;
    border: 0;
    line-height: 1.4566;
    color: #555;
    font-size: 14px;
    padding: 5px;
}
.inquiry_form input[type="tel"] {
    display: block;
    background-color: transparent!important;
    border: 0;
    line-height: 1.4566;
    color: #555;
    font-size: 14px;
    padding: 5px;
}


/* Style the modal tab */
.modaltab {
  float: left;
 
  background-color: #f1f1f1;
  width: 30%;
	  min-height:400px!important;
	height: 90%;
	/* border: 1px solid #ccc;
	overflow-y: scroll;*/
  /*height:100%!important;*/
}

/* Style the buttons inside the tab */
.modaltab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  font-size: 17px;
}

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

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

/* Style the tab content */
.modaltabcontent {
  float: left;
  padding: 0px 12px;
  /*border: 1px solid #ccc;*/
  width: 70%;
  border-left: none;
	min-height: 400px;
  height: 90%;
	overflow-y: scroll;
  display: none;
	  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

.modaltabcontent::-webkit-scrollbar{width:10px;}
.modaltabcontent::-webkit-scrollbar-track{background:#ddd;}
.modaltabcontent::-webkit-scrollbar-thumb{background:#02A5CF;}
.modaltabcontent::-webkit-scrollbar-thumb:hover{background:DodgerBlue;}

/* Style the tab */
.tab {
  float: left;
 
  /*background-color: #f1f1f1;*/
  background-color: #444;
  width: 30%;
	  height:400px!important;
	/* border: 1px solid #ccc;
	overflow-y: scroll;*/
  /*height:100%!important;*/
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: #ccc;
  padding: 12px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
	
}

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

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

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  /*border: 1px solid #ccc;*/
  width: 70%;
  border-left: none;
  height: 400px;
	overflow-y: scroll;
  display: none;
	  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

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

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
		/*#Home {background-color:#FBCBCC;}
#News {background-color:#D9FFAD;}
#Contact {background-color:#C0D9FF;}
#About {background-color:#FFBF8E;}*/

#Home {background-color:#fff;}
#News {background-color:#fff;}
#Contact {background-color:#fff;}
#About {background-color:#fff;}

.tabcontent::-webkit-scrollbar{width:10px;}
.tabcontent::-webkit-scrollbar-track{background:#333;}
.tabcontent::-webkit-scrollbar-thumb{background:#02A5CF;}
.tabcontent::-webkit-scrollbar-thumb:hover{background:DodgerBlue;}

.thumb-box{ width: 90% !important; height:auto; background: #ddd; margin:5%; cursor: pointer; z-index:693500021222 !important;}
.thumb-box img{ width: 100% !important; height:auto;}
.thumb-box:hover{outline: #007CFF thin dashed;}

/* /Left Add Section */


.float-right{float: right!important;}
.float-left{float: left!important;}
.margin-left-40{margin-left: 33.333%!important;}

.margin-right-30{margin-right: 20px!important;}
.text-align-center{text-align: center;}
.opacity-2{opacity: 0.2;}




/*Component Items*/


/* .containerDrg { */
/*  position: relative;*/
/* } */

/*.componentItem {
  position: absolute!important;
left: 40%;
  top: 20%;
width: 250px; height: 50px; background: #666;
  font-size: 18px;
	z-index: 2;
}*/
	
.component2 {
  position: absolute!important;
 right: 60px;
  top: 20%;
width: 250px; height: 50px; background: #666;
  font-size: 18px;
	z-index: 2;
}	
	
	/*.component:after {
    content: ' \22EE';
}*/

	.sec { 
	  width: 100%;
		height: 450px;
		background:#ddd;
  position: relative;
/*  opacity: 0.3;*/
	}
	
	.seccss { 
	  width: 100%;
		height: 200px;
		background:#ccc;
  position: relative;
/*  opacity: 0.3;*/
	}
	
.ui-resizable-handle {
  width: 4px;
  height: 4px;
  background: #fff;
  border:2px solid #000;
}

/*component hover*/
.component-edit-container{ width:68px; height:36px;  position: absolute;
 right:0px;
  top: -36px; }
  
  .icon-component-container
{width:30px; height: 30px; float: left; font-size:18px; background-color:#39C; margin:3px 2px; text-align:center;  cursor:pointer;}

 .component-edit-icon
 {
	 font-size:18px !important;
	 line-height:30px!important;
	 color:#fff !important;
	}
	 
	  .icon-component-container:hover 
	  {
		background-color:DodgerBlue;
		    /*  background-color:#1e90ff;*/

		  }
 
 
/*/component hover*/

/*/Component Items*/

.topiconItem {
  position: absolute!important;
left: 40%;
  top: 20%;
width:atuo; height: 50px; background: #666;
display:none!important;
  font-size: 18px;
	z-index: 2;
}

.publish-btn{

	cursor: pointer;
	
}
.publish-btn:hover{
	color: dodgerblue;	
	
}
.btn-anim{ /*width: 110px!important; height: 100px; float: left; display: block;*/ overflow: hidden; text-overflow: clip; padding: 10px; }
.btn-anim-icon {font-size: 35px; color: #ccc; padding: 0px; margin: 0px;}



.smartphone {
  position: relative;
  width: 360px;
  height: 660px;
  margin: 100px auto;
  border: 2px #222 solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;

}

/* The horizontal line on the top of the device */
.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}
	  
	  
	  
	  .fullcontainer {
  width: 355px;
  height: 540px;
  background: white;
		  overflow-y: scroll;
	
}
	



.select-items div:nth-child(1)  {
	font-family:Arial; }
.select-items div:nth-child(2)  {
	font-family:Arial Black;}

.select-items div:nth-child(3)  {
	font-family:times New Roman;}

.select-items div:nth-child(4)  {
	font-family: Courier New;
}
.select-items div:nth-child(5)  {
	font-family:Courier;
}
.select-items div:nth-child(6)  {
	font-family:Verdana;
}
.select-items div:nth-child(7)  {
	font-family:Georgia;
}
.select-items div:nth-child(8)  {
	font-family:Palatino;
}
.select-items div:nth-child(9)  {
	font-family:Garamond;
}.select-items div:nth-child(10)  {
	font-family:Bookman;
}
.select-items div:nth-child(11)  {
	font-family:Comic Sans MS;
}
.select-items div:nth-child(12)  {
	font-family:Impact;
}
.select-items div:nth-child(13)  {
 	font-family:Roboto;
}


.layer-arrow
{
	font-size: 30px; color: dodgerblue; cursor: pointer;
}
.layer-arrow:hover
{
color:#ccc;
}




.btn-switch-bg {
  background-color: #333;
  border: none;
	border-radius: 0px;
	display: block;
  color: white;
  padding:6px 6px 0px 6px;
	margin:0px 0px 0px 0px;
  font-size: 16px;	
  cursor:default!important;
	outline: none;
	float: left;
}


.switch {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 40px;
	z-index: 60000;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #666;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider-switch:before {
  position: absolute;
  content: "";
  height: 32px;
  width: 32px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch > input:checked + .slider-switch {
  background-color: #2196F3;
}

.switch > input:focus + .slider-switch {
  box-shadow: 0 0 1px #2196F3;
}

.switch > input:checked + .slider-switch:before {
  -webkit-transform: translateX(70px);
  -ms-transform: translateX(70px);
  transform: translateX(70px);
}


.slider-switch.round {
  border-radius: 34px;
}

.slider-switch.round:before {
  border-radius: 50%;
}


/*------ ADDED CSS ---------*/
.slider-switch:after
{
 content:'LAYER OFF';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 60%;
 font-size: 11px;
 font-family: Verdana, sans-serif;
}

.switch > input:checked + .slider-switch:after
{  
  content:'LAYER ON';
	 transform: translate(-50%,-50%);
 top: 50%;
 left: 34%;
}

/*--------- END --------*/





.text-upper
{
	text-transform:uppercase;
}
.bg-layer-overlay
{
	background: #333;

	position:absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 6565656;
	display: block;
}