.colpick {
 position: fixed!important;
 top: 207px!important;
}
.xily-style-selector-holder {
 position: fixed;
 top: 0;
 left: -270px;
 width: 270px;
 height: 100%;
 background-color: #fff!important;
 z-index: 900;
 transition: left 0.4s ease-out;
 -webkit-transition: left 0.4s ease-out;
 box-shadow: -3px 0px 50px -2px rgba(0,0,0,0.1);
 -webkit-box-shadow: -3px 0px 50px -2px rgba(0,0,0,0.1);
 -moz-box-shadow: -3px 0px 50px -2px rgba(0,0,0,0.1);
}
.xily-style-selector-holder.open {
 left: 0;
}
.xily-style-selector-toggle {
 position: absolute;
 top: 103px;
 right: -44px;
 width: 44px;
 height: 44px;
 background-color: #fff!important;
 color: #1d1d1d;
 font-size: 24px;
 line-height: 44px;
 text-align: center;
 cursor: pointer;
 border-radius: 0 5px 5px 0;
}
.xily-style-selector {
 height: 100%;	
 padding: 30px 20px;
 overflow-y: auto;
}
.xily-style-selector > .title {
 margin: 0 0 20px 0;	
 color: #1d1d1d;
 font-weight: 700;
 font-size: 16px;
 line-height: 26px;
 letter-spacing: 1px;
 text-transform: uppercase;
}
.xily-style-selector .line .title {
 margin: 0 0 10px 0;
 color: #999;
}
.xily-style-selector .line:not(.buttons) a {
 display: inline-block;
 margin: 0 8px 0 0;
 padding: 5px 12px;
 color: #333;
 font-size: 11px;
 line-height: normal;
 border-radius: 10px;
}
.xily-style-selector .line:not(.buttons) a.active,
.xily-style-selector .line:not(.buttons) a:hover {
 background-color: #eee;
 color: #333;
}
.xily-style-selector .line:not(.buttons) a:last-child {
 margin: 0;
}
.xily-style-selector .line.buttons {
 margin: 25px -20px 0 -20px;	
 padding: 25px 20px 0 20px;
 border-top: 1px solid #eee;
}
.xily-style-selector .line.buttons a {
 display: block;
 padding: 8px 15px;
 line-height: normal;	
 text-align: center;
 border-radius: 10px;
}
.xily-style-selector .line.buttons a.xily-style-selector-default {
 background-color: #eee;
}
.xily-style-selector .line.buttons a.xily-style-selector-get-settings {
 color: #fff;
}
.xily-style-selector .line.buttons a:hover {
 background-color: #333;
 color: #fff;
}
.xily-style-selector .line #colorsettings {
 width: 100%;	
 border: 1px solid #fff;
 border-right-width: 20px;
}
.xily-template-settings-holder {
 display: none;	
 position: fixed;
 top: 0;	
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.95);
 z-index: 2000;
}
.xily-template-settings-holder.open {
 display: block;
}
.xily-template-settings-holder a.close {
 position: absolute;
 top: 30px;
 right: 30px;
 color: #fff;
 font-size: 30px;
}
.xily-template-settings {
 display: table;
 width: 80%;
 margin: 0 auto;
}
.xily-template-settings .inner {
 display: table-cell;
 vertical-align: middle;
}
.xily-template-settings .form span {
 display: block;
 margin: 0 0 10px 0;
 color: rgba(255,255,255,0.8);
 font-size: 15px;
}
.xily-template-settings .form textarea {
 width: 100%;
}
.xily-template-settings .form textarea.css-code {
 height: 150px;
}
.xily-example-block-code {
 padding: 10px 15px;	
 background-color: #f7f7f9;
 border-radius: 4px;
}
.xily-example-block-code,
.xily-example-text code {
 color: #1d1d1d;
 font-family: Menlo,Monaco,Consolas,"Courier New",monospace; 
}
.xily-example-block-code .pt {
 color: #2f6f9f;
}
.xily-example-block-code .pc {
 color: #d44950;
}
.xily-example-block-code .pg {
 color: #999;
}
.xily-example-block-code a,
.xily-example-text a {
 text-decoration: underline;
}
.xily-example-title {
 color: #000;	
 font-weight: 700;
 font-size: 19px;
 line-height: 29px;
 text-transform: uppercase;
}
.xily-example-text {
 padding: 10px 0 10px 20px;	
 background-color: #f6f6f6;
 border-left: 5px solid #c7254e;	
 color: #333;	 
 line-height: 24px;
}
.xily-example-text b {
 font-weight: 600;
}
.xily-example-text code {
 padding: 2px 4px;
 background-color: #f9f2f4; 
 color: #c7254e; 
 border-radius: 4px;
}
.xily-example-text p {
 padding: 4px 0;
}
.xily-example-text p.first {
 margin: 0 0 5px 0;	
 padding: 0;
}
.xily-example-text p.last {
 margin: 5px 0 0 0;	
 padding: 0;
}
.xily-example-text p span {
 padding: 0 8px 0 0;
}
.dividers-list .col-sm-4:nth-child(3n+1) {
 clear: both;
}
.fontawesome-icon-list {
}
.fontawesome-icon-list .fa-hover {
 display: block;
 height: 32px; 
 color: #222222;
 line-height: 32px; 
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 cursor: pointer;
 border-radius: 4px;
}
.fontawesome-icon-list .fa-hover .fa {
 display: inline-block; 
 width: 32px;
 margin: 0 10px 0 0;
 font-size: 14px;
 text-align: right;
}
.xily-example-buttons-list.color {
 margin-left: -8px;
 margin-right: -8px;
}
.xily-example-buttons-list.color .example-item {
 float: left;
 width: 16.66666667%;
 margin: 0 0 10px 0;
 padding: 0 8px;
}
.xily-example-buttons-list.color .example-item a {
 width: 100%;
 text-align: center;
}
.xily-example-buttons-list .example-item {
 display: inline-block;
 margin: 0 20px 10px 0;
}
.xily-example-buttons-list .text-muted,
.example-social-icons-list .text-muted {
 margin: 5px 0 0 0;	
 font-size: 12px;
 text-align: center;	
}
.example-social-icons-list {
 margin-left: -10px;
 margin-right: -10px;
}
.example-social-icons-list li {	
 margin: 0 0 10px 0; 
 padding: 0 10px;
 text-align: center;
}
.example-social-icons-list li a {
 margin: 0!important;
 text-align: center!important;
}

span.future,
span.xily-new-update {
 display: inline-block;	
 margin: 0 0 0 3px;
 padding: 3px 7px;
 background-color: #d9534f;
 color: #fff;
 font-weight: 700;
 font-size: 9px;
 line-height: normal;
 text-transform: uppercase;
 border-radius: 2px;
}
span.xily-new-update {
 background-color: #5cb85c!important;
}

.buy-xily-now a {
 display: block;
 padding: 10px 20px;
 background-color: #fff;
 color: #fff;
 font-weight: 700;
 font-size: 15px;
 line-height: normal;
 text-transform: uppercase;
 text-align: center;
 border-radius: 3px;
}
.xily-style-selector .line.buttons a.xily-style-selector-get-settings {
 background-color: #fff;
}
.buy-xily-now a:hover,
.xily-style-selector .line.buttons a.xily-style-selector-get-settings:hover {
 background-color: #d1b17f;
 color: #fff;
}

@media (max-width: 768px) {

 .xily-example-buttons-list.color .example-item {
  width: 25%;
 }

}