body{
position: relative;
width: 100%;
}
/*-------------------------------------------------*/
/* =  General
/*-------------------------------------------------*/

.clearfix {
  *zoom: 1;
}
section{
	position: relative;
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

.clear {
  clear: both;
}

.oh { overflow: hidden; }

.mt0 {margin-top: 0px !important; }
.mt10 {margin-top: 10px !important; }
.mt20 {margin-top: 20px !important; }
.mt30 {margin-top: 30px !important; }
.mt40 {margin-top: 40px !important; }
.mb0 {margin-bottom: 0px !important; }
.mb10 {margin-bottom: 10px !important; }
.mb15 {margin-bottom: 15px !important; }
.mb20 {margin-bottom: 20px !important; }
.mb30 {margin-bottom: 30px !important; }
.mb40 {margin-bottom: 40px !important; }
.mb50 {margin-bottom: 50px !important; }
.mb60 {margin-bottom: 60px !important; }
.ml0 {margin-left: 0 !important; }
.mr10 {margin-right: 10px !important; }
.b0 { border: 0 !important;}

.color-white {
  color: #fff !important;
}


a {
    text-decoration:none;
    transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    outline: none;
color: #f1501a;
text-decoration: none;
}
a:hover {
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.left {
  float: left;
}

.right {
  float: right;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Dosis', sans-serif;
  background: #fff;
  outline: 0;
  overflow-x: hidden;
  background: #d0d0d0
}
.container{
	width: 960px !important; padding: 0px !important;
}
.header{
	background: #333e47; 
	height: 80px; 
	line-height: 70px; 
	position: fixed; 
	width: 100%; 
	left: 0px; 
	bottom:0px;
	z-index: 3001;
	border-top: solid 10px #1f2428;
	font-family: 'Dosis', sans-serif !important;
}
.logo{
	margin-left: 30px; 
	margin-top: -2px;
}

.preview{
	color:#fff; text-transform: uppercase; margin-left: 45px; font-family: 'Dosis', sans-serif !important;
}
.preview span{
	margin-right: 10px
}
.preview img{
	margin-right: 3px;
}
.mainnav{
	float: right; margin: 0px; padding: 0px; display: block;
}
.mainnav li{
	 display: block;  float: left; border-left: solid 1px #1f2428 !important;
}
.mainnav li a{
	padding: 0px 20px; font-size: 15px; text-decoration: none; color: #fff; text-transform: uppercase; display: block; transition: all .2s ease-out;
}
.mainnav li a:hover{
	background-color:#1f2428;
}

.tool{
	position: fixed; 
	left: 0px; 
	bottom:80px;  
	background: #e2e5e4; 
	width: 335px; z-index:1000; 
	transition: all .1s ease-out;
	border-right: solid 3px #1f2428;
	font-family: 'Dosis', sans-serif !important;
}
.tool.col{
	width:0px;
}
.navbar{
z-index: 999 !important;
}
.tool .nav{
	margin: 0px; padding: 0px; display: block; height: 33px;  
}
.tool .nav li{
	display: block; 
	float: left; 
	box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	width: 33.3%; text-align: center; padding: 0px; border: 0px;
}
.tool .nav li:first-child{
	border: none;
}
.tool .nav li a{
	 font-size: 15px; 
	 text-decoration: none; 
	 color: #fff; 
	 text-transform: uppercase; 
	 display: block; 
	 line-height: 33px; 
	 background: #1f2428;
	 padding: 0px;
	  
}
.tool .nav li a:hover{
background-color: #333e47;
color: #ffffff;
}
.tool .nav li a.active{
	color: #fff;
	  background: #333e47;
}
.design_pattern{
	overflow-y: auto;
}

.design_pattern ul{
	display: block; padding: 0px; margin: 0px;
}
.design_pattern ul li{
	display: block; padding: 8px; padding-bottom: 4px;
}
.design_pattern ul li img{
	max-width: 90%;
	margin-left:15px;
	min-height:15px;
}
.framewrapper{
	margin-left: 0px; padding: 0px 0px; margin-top: 0px; margin-bottom: 80px;
}
.framewrapper .content{
	display: block; padding: 0px; margin: 0px;
}
.framewrapper .content li{
	display: block; position: relative; padding: 0px; margin: 0px;
}
.framewrapper .content li .btn_del{
	position: absolute; right: -20px; display: block; width: 36px; height: 32px; top:0px;
}
.framewrapper .content li img{
	width: 100%
}
#allSection{
	display:none
}
.navbar {
  border-radius:0px !important; margin-bottom: 0px;
}
.delbtn{
	position: absolute; right: 0px; display: block; width: 36px; height: 32px; top:20%; z-index: 3000; 
}
#target .delbtn{display:none}
#target:hover .delbtn{display:block}

.bgbtn{
	position: absolute; right: -36px; display: block; width: 36px; height: 32px; top:70px; display:none !important;
}
#pages li{
	font-size: 14px; font-weight: bold; cursor: pointer; 
	padding: 8px; color: #fff !important;
	transition: all .2s ease-out;
	text-transform: uppercase;
	font-weight: 200;
	border-bottom: #d6d6d6 solid 1px;
}
#pages li input{
	padding: 0px 5px; outline: none; opacity: 0.7;
}
#pages li.active, #pages li:hover{
	 background-color: #d6d6d6 !important;
	 color:#ffffff !important;
}

#pages li a{
	 font-size: 15px;  margin-top: -10px; display: inline-block;
	text-decoration: none;
	color: #000;
}

.XtremepagepageButtons{
	 display: block; float: right; margin-top: 5px;
}
.XtremepagepageButtonsleft{
	 display: block; float: left; margin-top: 5px;
}
.XtremepagepageButtonsleft .edit{
	height: 19px; width: 16px; background: url(../builder%20assets/edit_icon.png) no-repeat; display: inline-block;
	margin-right: 5px;
}
.XtremepagepageButtons  a{
	margin-left: 3px;
}
.XtremepagepageButtons .search{
	height: 19px; width: 24px; background: url(../builder%20assets/search-icon.png) no-repeat; display: inline-block;
}
.XtremepagepageButtons .dublicate{
	height: 19px; width: 20px; background: url(../builder%20assets/plus_icon.png) no-repeat; display: inline-block;
}
.XtremepagepageButtons .substract{
	height: 19px; width: 19px; background: url(../builder%20assets/del_icon.png) no-repeat; display: inline-block;
}
.sideButtons {
	text-align: right;
 
  
}
.sideButtons .btn{
	  background: #707588;
  color: #fff;
  border-radius: 0px;
  display: block;
  font-size: 24px;
  text-transform: uppercase;
}
.data-icon-title:before, .data-img-title:before, .data-text-title:before, .data-link-title:before, .data-slide-title:before {
  content: attr(data-menutitle);
  display: block;
  position: absolute;
  top: -30px;
  right: 0;
  left: -1px;
  background: #333e47;
  padding: 2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  display:none;
}

.iconlist{
	display:block;
}
.iconlist li{
	display: inline-block; margin-bottom: 5px; cursor: pointer;
}
.iconlist li.active .icon-md{
	color:#373f5f ; background: rgba(152, 152, 152, 0.4)
}
.icondiv, .imgdiv{
	display: inline-block;
}
.PopUp{
font-family: 'Dosis', sans-serif !important;
}
.PopUp input, .PopUp select{
	width: 100%; padding: 5px; height: auto; background: #c8cad3; border: none; outline: none
}
.PopUp p{
	display:block; margin:0px; margin-bottom: 10px; position: relative; 
}
.PopUp p .uploadbtn{
	width: 160px; padding: 3px; background: #232a46; font-size: 20px; position: absolute; right:0px; bottom:0px; color: #fff; border: 0px; outline: none;
	
}
.PopUp label{
	color: #dbdbdb; display: block; font-size: 16px; margin-top: 15px !important;
}
.PopUP a: hover{
text-decoration: none !important;
}
#ExportPopUp p, #ResetPopUp p{
 display: block; color: #fff; padding: 20px; font-size:18px; margin: 0px;
}
#LoadPopUp h1{
	font-size: 24px; text-transform: uppercase; display: block; color: #fff; padding-left: 30px;
}
#LoadPopUp ul{
	display: block; padding: 0px; margin: 0px;
}
#LoadPopUp ul li{
	display: block; border-bottom: 3px double #6d7288
}
#LoadPopUp ul li:first-child{
	border-top: 3px double #6d7288; 
}
#LoadPopUp ul li a{
	color: #fff; display: block; padding: 10px 30px; font-size: 16px;
}
#LoadPopUp ul li a:hover{
	background: #2a3048;
	text-decoration: none !important;
}
#LoadPopUp.ui-dialog-content{
	padding:0px;
}

.carousel-inner>.item{
	
}
.carousel .carousel-content{
	position: absolute; left: 0px; top:50px; width: 100%; box-sizing: border-box; padding: 0px 20px; text-align: center;
}
.carousel-inner > .item.active > img, .carousel-inner > .item.active > a > img{
	border-radius:0px
}
.slide1 .hidden-xs {
  position: absolute;
  top: 50%;
  background: rgba(0,0,0,.5);
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 30px; margin-top: -25px;
}
.slide1 .prev.hidden-xs {
 left: 20px; 
}
.slide1 .next.hidden-xs {
	 right: 20px;
}
.carousel-inner img{
	width: 100%
}
.stylehead{
	border-bottom:1px solid #ccc; font-size: 16px; font-family: 'Roboto'; padding: 10px; font-weight: 700;
}
.typoul{
	display: block; margin:0px; margin-bottom: 10px;
}
.typoul li{
	display: block; padding: 5px 10px .!important;  cursor: pointer; color:#000000;
	transition: all .2s ease-out;
	background-color: transparent !important;
	border-bottom: solid 1px #d6d6d6;
}
.typoul li.active, .typoul li:hover{
	background: #d6d6d6 !important; 
}
.typoul li img{
float: right;
margin-top: -3px;
width: 200px;
height: 20px;
}
.framewrapper .container *:hover, .slide1 *:hover{
	outline: 1px dashed #000
}
.carousel .item a{
	background: #fff
}

#preloader {
  background: #fff;
  display: block;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100000;
}
/******************************** LOADER ********************************/
#preloader { background:#fff; display: block; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 999999;}
.pulse{	margin: -25px 0 0 -25px; border-radius: 100px; position: absolute; left: 50%; top: 50%; z-index: 10; background-color: #000; opacity: 1; width: 50px; height: 50px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; border-radius: 100px;  -webkit-animation: pulse 2s linear infinite; -moz-animation: pulse 2s linear infinite; border-image: initial;}
@-webkit-keyframes pulse  { 0% {-webkit-transform: scale(0); opacity: 0;} 8% {-webkit-transform: scale(0); opacity: 0;} 15% {-webkit-transform: scale(0.1); opacity: 1;} 30% {-webkit-transform: scale(0.5); opacity: 1;} 100% {opacity: 0; -webkit-transform: scale(1);}}
@-moz-keyframes pulse { 0% {-moz-transform: scale(0); opacity: 0;} 8% {-moz-transform: scale(0); opacity: 0;} 15% {-moz-transform: scale(0.1); opacity: 1;} 30% {-moz-transform: scale(0.5); opacity: 1;}100% {opacity: 0; -moz-transform: scale(1);}}

.separator {
  height: 2px;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  background: #ccc;
}

.colEx{
	position: absolute; right: -36px; top:0px; z-index: 99999;
	
}
.col .collf{
	display:none !important
}
.framewrapper.col{
	margin-left: 0px !important;
}

.framewrapper section .carousel .imgdiv{
	display: block;
}
.typoul li img{
	margin-left: 10px;
}
#preview iframe{
	width: 100%; height: 100%;
}
#previewmargin{
	margin:0 auto; position: relative; height: 100%;
}
#previewmargin.mobile{
	 height: 80%; margin-top: 5%;  width: 400px;
}
#previewmargin.tab{
	width: 1024px;
}
.pclose{
	position: absolute; right: 5px; top:5px;  z-index: 9999999; border: 1px dashed #fff; cursor: pointer; 
}
#ELEMENTS ul li{
	cursor: pointer;
}
@media(max-width:768px){
	.carousel-content h2{
	 font-size: 20px;
}
.carousel-content p{
	 font-size: 14px;
}
.carousel .carousel-content {
  
  top: 25px;
  
}
}

.imgbg .bghide, .imgbgsec .bghide{
	display: none
}
.PopUp .bghiden{
	display: none
}

#ImagePopUp #imageselectbg, #ImagePopUp #imageselecsectbg{
	display: none
}
 #imageselectbg, #imageselecsectbg{
	display: none !important
}
.imgbg #imageselectbg{
	display: inline-block !important;
	border-right: solid 1px #1f2428;
}
.imgbgsec #imageselecsectbg{
	display: inline-block !important;
	border-right: solid 1px #1f2428;
}
.imgbg #imageselect, .imgbg #imageselecsectbg{
	display: none !important
}
.imgbgsec  #imageselect{
	display: none  !important
}
#addPage.btn{
width: 100%;
}

#IconPopUp i{
font-size: 20px;
width: 25px;
height: 25px;
color: #fff;
}
#IconPopUp i:hover{
color: #a6a6a6 !important;
}
 #IconPopUp i:pressed{
color: #1f2428 !important;
}


#fileupload span{
display: block;
}
.tooldiv input{
width: 100px;
border: 0px;
color: #000000;
}

a#addPage.btn{
color: #fff !important;
border-bottom: solid 1px #d6d6d6;
font-size: 15px;
background-color: #333e47;
padding-top: 15px;
padding-bottom: 15px;
}
a#addPage.btn:hover{
background-color: 1f2428 !important;
}


#pages > li.active > a.pagelink{
color: #000 !important;
text-transform: uppercase;
font-weight: 200;
}

#welcomeModal{
	z-index: 10000;
	box-shadow: none;
	border-radius: 0px !important;
    padding: 20px;
	overflow: visible;
	
}

#welcomeModal .modal-content{
	background-color: #333e47 !important;
	border: solid 10px #1f2328 !important;
	color: #fff !important;
	text-align: center;
}

.PopUp h1{
  font-family: 'Dosis', sans-serif !important;
}

.modal-backdrop
{
    opacity:0.7 !important;
}