* {
    margin: 0;
    padding: 0;
}
body {
    background: url('style/images/background.jpg') 	no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    margin: 0;
    padding: 0;
    font-family: roboto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y:hidden;
	background-color:#5b5554;
}
.bg-flower {
    background: url('style/images/bg_flower.png') no-repeat 46% 0;
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0;
    z-index: -1;
}
.main-overlay {
    position: absolute;
    width: 100%;
    display: block;
    top: 54px;
    z-index: 150;
    overflow: hidden;
    opacity: 0.8;
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 1%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 1%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 1%,rgba(0,0,0,0.9) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 1%,rgba(0,0,0,0.9) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 1%,rgba(0,0,0,0.9) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#e6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.main-overlay-blur {
    position: absolute;
    width: 100%;
    display: block;
    top: 52px;
    z-index: 100;
    opacity: 0.5;
    overflow: hidden;
    background: rgba(0,0,0,0.7) url(style/images/glass2.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#demo_bar {
    width: 100%;
    height: 58px;
    background: url('style/images/bar_bg.png') repeat-x;
    z-index: 200;
    top: 0;
    position: fixed;
}
#demo_bar_inner {
    width: 1000px;
    height: 58px;
    margin: 0 auto;
    position: relative;
}
#s5_logo {
    width: 200px;
    height: 50px;
    float: left;
    display: block;
    background: url('style/images/s5_logo.png') no-repeat;
}
#demo_bar_system_select {
    height: 55px;
    float: left;
    display: block;
	margin-left: -19px;
    position: relative;
}

#demo_bar_system_select_drop {
    position: absolute;
    top: 5px;
    right: 0px;
    height: 40px;
    width: 32px;
    display: block;
    background: url('style/images/dropdownarrows.png') no-repeat 0 0;
}
#demo_bar_system_select_drop.active {
    background-position: 0 -50px;
}

#demo_bar_system_select ul,  #demo_bar_responsive_buttons{
    list-style: none;
    padding-right:30px;
    margin-top: 6px;
    height: 38px;
    float: left;
    display: block;
    background: #343434;
    border: 1px solid #545454;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

}

#demo_bar_responsive_buttons{
	-webkit-border-radius: 3px;
   -moz-border-radius:3px;
    border-radius:3px;}


#demo_bar_system_select ul li {
	padding-left: 19px;
    padding-right: 19px;
    margin-top: 1px;
    height: 36px;
    float: left;
    display: block;
    margin-left: 1px;
    margin-right: 2px;
    line-height: 35px;
    cursor: pointer;
    color: #E0E0E0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    background: transparent;
    text-shadow: none;
}
#demo_bar_system_select ul li:hover, #demo_bar_system_select ul li.active {
    background:#24abce;
    color: #ffffff;

}
#demo_bar_buttons {
    position: absolute;
    top: 4px;
    right: 0;
    height: 46px;
}
#s5_demo_frame_close {
    position:relative;
	float:right;
	margin-top:-42px;
	margin-right:20px;
}
#bottom_bar {
    background: url('style/images/bot_bar.png') repeat-x;
    height: 7px;
    width: 100%;
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 100;
}


.close-icon {
    background: url('style/images/close-icon.png');
    height: 23px;
    width: 23px;
    display: block;
	cursor:pointer;
}



.win-button {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    color: #383838;
}

li.active .win-button {
 
}


.win-button.small {
    display: block;
    float: left;
    height: 18px;
    margin-left: 12px;
    position: relative;
    top: 4px;
    padding: 0 5px;
    line-height: 18px;
    font-size: 11px;
    font-weight: bold;
	text-shadow: -1px -1px #089a21;
	text-transform: uppercase;
}
.win-button.big {
    display: block;
    float: left;
    height: 36px;
    margin-left: 12px;
    position: relative;
    top: 5px;
    padding: 0 5px;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
}
.win-button.green {
    color: #ffffff;
    background: #55b439;

}
.win-button.blue {
    color: #ffffff;
    background: #24abce;
  
}



.demo-main-wrap {
    display: block;
    height: 100%;
    margin: 0 auto;
    position: relative;
    width: 960px;
}
.system-link-wrap {
    height: 357px;
    width: 595px;
	margin-left: 2px;
    position: fixed;
	padding: 25px !important;
    background: #3f3f3f;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	-webkit-box-shadow: 0px 4px 11px 4px rgba(0, 0, 0, 0.2); 
	box-shadow: 0px 4px 11px 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:0px 4px 11px 4px rgba(0, 0, 0, 0.2); 	
    padding: 15px;
    z-index: 999;
    margin-top: 15px;
    border-top: 1px solid #494949;
    opacity: 0;
    visibility: hidden;
}
.system-link-wrap.menu-init {
  display: none;
}
.system-link-wrap.active-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
}
.system-link-wrap .system-link-wrap-close {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
}

.system-link-wrap span.type {
    padding: 5px 15px;
	text-shadow: -1px -1px transparent;
    height: 24px;
    display: block;
    margin-left: 0px;
	margin-top: -1px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    margin-right: 5px;
    background: transparent;
    border-top: 1px solid transparent;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}


.system-link-wrap span.active {

}


.system-link-wrap span.type:hover, .system-link-wrap span.type.active {
    background: #2e2e2e;    
}
.system-link-wrap .type-list {
    position: absolute;
    display: block;
    top: 79px;
    width: 336px;
    height: 250px;
    list-style: none;
    border: 1px solid #4d4d4d;
    background: #3f3f3f url('style/images/year-shadow.png') repeat-y 256px 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

}
.system-link-wrap .list-Extensions{
     
    background-image:none !important;
   
}
.system-link-wrap .list-Extensions ul li.link-class span.link-round {
 
  width:300px;
}
.system-link-wrap .list-Plugins{
     
    background-image:none !important;
   
}
.system-link-wrap .list-Plugins ul li.link-class span.link-round {
 
  width:300px;
}
.system-link-wrap .type-list .type-list-window {
    height: 245px;
    position: relative;
    width: 310px;
}
.system-link-wrap .type-list .type-list-window ul {
    top: 0;
    list-style: none;
    position:relative;
    top:0;
    float:left;
}
.system-link-wrap ul li.link-class {
    width: 100%;
	font-size: 13px;
    height: 35px;
    cursor: pointer;
    position: relative;
    line-height: 38px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    float: left;
}
.system-link-wrap ul li.link-class span.link-round {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: block;
    height: 28px;
    margin: 0 5px;
    line-height: 28px;
    padding-left: 5px;
    float: left;
    width: 240px;
    color: #E0E0E0;
	text-shadow: -1px -1px #303030;
}
.system-link-wrap ul li.link-class:hover span.link-round, .system-link-wrap ul li.link-class.active span.link-round {
    background: #2e2e2e;
    color: #ffffff;	
}


.system-link-wrap ul li.link-class span.link-class-title {
    padding-left: 5px;
    float: left;
}
.system-link-wrap ul li.link-class span.link-class-month {
    float: right;
    padding-right: 10px;
}
.system-link-wrap ul li.link-class span.link-class-year {
    display: block;
    float: left;
    height: 35px;
	 margin-top: -6px;
    width: 54px;
    text-align: center;
    color: #E0E0E0;
}
.slider-bar {
    display: block;
    position: absolute;
    margin-top: 5px;
    padding-bottom: 5px;
    right: 0;
    top: 0;
    width: 21px;
    float: left;
}
.slider-bar .slider-bar-handle {
    width: 8px;
    background: #555;
    margin-left: 2px;
    left: 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #252525;
    
}
.demo-center .slider-bar {
    margin-top: 7px;
}

.system-wrap {
    width: 960px;
    display: block;
    float: left;
}
.type-wrap {
    width: 960px;
    display: block;
    float: left;
}
.year-wrap {
    width: 960px;
    display: block;
    float: left;
}
.system-wrap-preview {
    height: 330px;
    width: 210px;
    float: right;
    top: 10px;
    position: relative;
	margin-right: 22px;
	margin-top:-5px;
}
.system-wrap-preview-inner {
    height: 251px;
    width: 100%;
    float: left;
    margin-top: 11px;
    position: relative;
	margin-left:6px;
    clear: both;
    text-align: center;
}
.system-wrap-preview-title, .system-wrap-preview-buttons {
    float: left;
    position: relative;
    clear: both;
	font-size: 16px;
	margin-left:6px;
	color:#ffffff;
    width: 100%;
	top: 2px;
}

.system-wrap-preview-inner img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.system-wrap-preview-inner img.isTemplate {
 
}
.system-wrap-preview-inner img.isExt {
    top: 50px;
    position: relative;
}
.preview-block-loading img {
	    -webkit-box-shadow:none;
    -moz-box-shadow: none;
    box-shadow: none;}

.preview-block-overlay {
    display: block;
    opacity: 0;
    position: absolute;
    z-index: 100;
    width: 100%;
}
.preview-block-overlay .preview-block-loading {
	height: 26px;
    margin: 120px auto 0;
    overflow: hidden;
    position: relative;
    width: 26px;
	-webkit-border-radius: 109px;
	-moz-border-radius: 109px;
	border-radius: 109px;
}
.preview-block-overlay .preview-block-loading img {
    -webkit-border-radius: 109px;
	-moz-border-radius: 109px;
	border-radius: 109px;
    margin-left: -3px;
    margin-top: -3px;
}
.preview-block-overlay .preview-block-loading span {
    position: relative;
    width: 100%;
    display: none;
    margin-top: 5px;
	color: #858585;
	font-size:12px;
    text-align: center;
}
.system-wrap-preview-buttons {
    margin-top: 10px;
}
.system-wrap-preview-description {
    bottom: -25px;
    color: #878686;
    font-size: 12px;
    left: -370px;
    margin-left: 7px;
    max-height: 40px;
    height: 40px;
    max-width: 328px;
    overflow: hidden;
    position: absolute;
}

#s5_demo_frame_holder {
    display: block;
    overflow: hidden;
    position: fixed;
    top: 54px;
    z-index: 100;
}

#s5_demo_frame {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    -webkit-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);
    -moz-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);
    -o-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);
    transform: rotate(0deg) scale(0) skew(0deg) translate(0px);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
}
#s5_demo_frame.frameEffect {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

#s5_demo_loader {
    background: #444 url('style/images/preloader.gif') no-repeat center center;
    z-index: 10;
    font-size: 24px;
	margin-left:16px;
    color: transparent;
    font-size: 12px;
	-webkit-box-shadow: 0 0 61px 5px rgba(0, 0, 0, 0.9);
	-moz-box-shadow: 0 0 61px 5px rgba(0, 0, 0, 0.9);
	box-shadow: 0 0 61px 5px rgba(0, 0, 0, 0.9); 
    -webkit-border-radius: 109px;
    -moz-border-radius: 109px;
    border-radius: 109px;
    position: absolute;
    width: 49px;
    height: 49px;
	text-indent:-400px;
    overflow: hidden;
	padding-top: 0px;	
}



		

#s5_demo_loader div {
    margin: 0 10px;
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 80px;
}
#demo_iframe {
    z-index: 5;
}


.page-wrap {
    overflow: auto;
    position: relative;
    top: 54px;
}
.demo-center .slider-pane {
    margin: 0 auto 80px;
}

.demo-wrap {
    margin: 0 auto 80px;
    width: 1000px;
    display: block;
    position: relative;
}
.demo-wrap-inner {
    margin: 0 auto;
	overflow:hidden;
    position: relative;
	width:998px;
}




/* Blocks */
.demo-block {
    width: 100%;
    float: left;
    color: #ffffff;
    margin: 5px 0;
}
.demo-block.hos {
    
}
.demo-block.ver {
    
}
.demo-block-type-title {
	line-height: 24px;
    display: block;
    font-size: 24px;
	margin-bottom: -12%;
    margin-top: 6%;
    padding: 7px 0 7px 16px;
	font-weight:300;
	font-family:roboto;

}

.title-system-bold {
	font-weight:bold;}


.demo-block-type-wrap {
    
} 
.demo-block-type-wrap.hos {
    position: relative;
    float: left;
    width: 100%;
	margin-left: 12px;
	margin-top: 10%;
}

.Joomla .demo-block-type-wrap.hos {
margin-left:0px;
margin-right:12px;
}


.demo-block-type-wrap.hos .demo-block-wrap {
    float: left;
}
.Joomla .demo-block-type-wrap.hos .demo-block-wrap {
float:right;
}
.demo-block-type-wrap.ver {
    
}
.demo-block-type-wrap.ver .demo-block-wrap {
    
}


.demo-block-wrap {
    width: 288px;
    height: 370px;
    position: relative;
   margin: 33px 15px 50px;
}
.demo-block-wrap .demo-block-title {
    position: relative;
    float: left;
    width: 100%;
	font-weight: bold;
	font-family: roboto;
	font-size: 19px;
	margin-bottom: 3px;
}
.demo-block-wrap .demo-block-date {
    position: relative;
    float: left;
    width: 100%;
	color: #D0D0D0;
    font-size: 15px;
}
.demo-block-wrap .demo-block-inner {
    position: relative;
    float: left;
    width: 100%;
    height: 330px;
    text-align: center;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    overflow: hidden;
	margin-top: 25px;
}
.demo-block-inner:hover .demo-block-overlay, .demo-block-inner.active .demo-block-overlay {
    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
    background: none repeat scroll 0 0 #000000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    opacity: 0.6;
}
.demo-block-inner:hover .demo-block-icons-wrap, .demo-block-inner.active .demo-block-icons-wrap {
    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
    opacity: 1;
    display: block;
    z-index: 100;
}

.demo-block-inner .preview-block-loading {
    position: absolute;
    width: 80%;
    text-align: center;
    margin: 35px 28px;
    height: 75px;
    z-index: 150;
    -webkit-box-shadow: 0 0 5px 0 #262626;
    -moz-box-shadow: 0 0 5px 0 #262626;
    box-shadow: 0 0 5px 0 #262626;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #454545;
    bottom: 0;
}
.demo-block-inner .preview-block-loading img {
    margin-top: 10px;
}
.demo-block-inner .preview-block-loading span {
    position: relative;
    width: 100%;
    display: block;
    margin-top: 5px;
    text-align: center;
}

.demo-block-wrap .demo-block-inner img {
    z-index: 50;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.demo-block-wrap .demo-block-inner img.isExt {
    top: 90px;
    position: relative;
}
.demo-block-wrap .demo-block-hover {
    position: absolute;
    width: 100%;
    height: 330px;
    z-index: 90;
    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
	background:transparent;
}
.demo-block-wrap .demo-block-overlay {
    position: absolute;
    width: 100%;
    height: 330px;
    z-index: 90;
    top: 0;
    left: 0;
    -webkit-transition: all 300ms ease-in;
    -moz-transition: all 300ms ease-in;
    -o-transition: all 300ms ease-in;
    transition: all 300ms ease-in;
}

.demo-block-wrap .demo-block-icons-wrap {
    display: none;
    left: 0;
    height: 330px;
    position: absolute;
    width: 288px;
}
.demo-block-wrap .demo-block-icons-wrap.c-1 .demo-block-demo-icon-wrap {
    cursor: pointer;
    float: left;
    margin-left: 110px;
	font-size: 14px;
    line-height: 4px;
    margin-top: 76px;
    text-align: center;
}
.demo-block-wrap .demo-block-icons-wrap.c-2 .demo-block-demo-icon-wrap {
    cursor: pointer;
    float: left;
    margin-left: 41px;
    margin-top: 76px;
    text-align: center;
}
.demo-block-wrap .demo-block-icons-wrap.c-2 .demo-block-readmore-icon-wrap {
    cursor: pointer;
    float: left;
    margin-left: 54px;
    margin-top: 76px;
    text-align: center;
}
.demo-block-wrap .demo-block-icons-wrap.c-1 .demo-block-demo-icon {
    background: url('style/images/zoominout.png') no-repeat scroll -64px 1px transparent;
    height: 64px;
    margin-top: 24px;
    padding-bottom: 8px;
    width: 63px;
}
.demo-block-wrap .demo-block-icons-wrap.c-2 .demo-block-demo-icon {
    background: url('style/images/zoominout.png') no-repeat scroll -64px 1px transparent;
    height: 64px;
    margin-top: 24px;
    padding-bottom: 8px;
    width: 63px;
}
.demo-block-wrap .demo-block-icons-wrap .demo-block-demo-icon:hover {
    background-position: -64px -63px;
}
.demo-block-wrap .demo-block-icons-wrap.c-2 .demo-block-readmore-icon {
    background: url('style/images/zoominout.png') no-repeat scroll 1px 2px transparent;
    height: 64px;
    margin-top: 24px;
    padding-bottom: 8px;
    width: 63px;
}
.demo-block-wrap .demo-block-icons-wrap .demo-block-readmore-icon:hover {
    background-position: 1px -64px;
}




.demo-block-wrap .demo-block-system {
    background: url('style/images/cms-logos.png') no-repeat 0 0 transparent;
    height: 34px;
    width: 34px;
    display: block;
    top: 0;
    right: 0;
    position: absolute;
}
.demo-block-wrap .demo-block-system.Wordpress-icon {
    background-position: 0 0;
}
.demo-block-wrap .demo-block-system.Joomla-icon {
    background-position: -34px 0;
}
.demo-block-wrap .demo-block-system.Drupal-icon {
    background-position: -68px 0;
}

.demo-block-wrap .demo-block-newest {
    height: 125px;
    margin-bottom: -125px;
    margin-left: 163px;
    position: relative;
    width: 125px;
    z-index: 100;
}
.demo-block-wrap .demo-block-newest.newest-Joomla.Templates {
    background: url("style/images/newest_joomla_template.png") no-repeat scroll right top transparent;
}
.demo-block-wrap .demo-block-newest.newest-Wordpress.Themes {
    background: url("style/images/newest_wordpress_theme.png") no-repeat scroll right top transparent;
}
.demo-block-wrap .demo-block-newest.newest-Drupal.Themes {
    background: url("style/images/newest_drupal_theme.png") no-repeat scroll right top transparent;
}

.demo_button_big {
	font-size: 12px;
    float: left;
    padding: 5px 10px;
    margin: 5px 10px 5px 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    color: #ffffff;
	 height: 19px;
    line-height: 18px;
}

.demo_button {
	font-size: 12px;
    background: #55b439;
    float: left;
    padding: 5px 10px;
    margin: 5px 10px 5px 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    color: #ffffff;
	font-weight:normal;
	 height: 19px;
    line-height: 18px;
}
.demo_button.blue {
    background: url("style/images/dblue_big.png")  repeat-x scroll 0 0 transparent;
}
.demo_button.cream {
    background: url("style/images/cream_big.png")  repeat-x scroll 0 0 transparent;
    color: #404040;
}

.demo_button.small.blue {
    background: #55b439;
}
.demo_button.small.cream {
    background: #e5e5e5;
}
.demo_button span {
    background: url("style/images/icons.png") no-repeat scroll right top transparent;
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
	right: 8px;
    top: 7px;
}
.demo_button.help {
    height: 26px;
	float: right;
	font-size: 15px;
    line-height: 25px;
    padding: 5px 17px 5px 18px;
}

.demo_button.help:hover {
	background:#333333;}


.demo_button.help span {
    background-position: 0 0;
    left: 10px;
}
.demo_button.arrow {
    background: #24abce;
    height: 25px;
	float: right;
	font-size: 15px;
    line-height: 24px;
    padding: 5px 17px 5px 18px;
}

.demo_button.arrow:hover {
	background:#333333;}


.demo_button.arrow span {
    background-position: -20px 0;
}

.type-list-window {
margin-top:6px;}

.system-link-wrap .type-list {
overflow:hidden;}
.fl-right {
    float: right;
    margin-right: -11px;
}

@media screen and (max-width: 980px){

	#demo_bar_inner {
	width:94% !important;
	}

}

@media screen and (max-width: 840px){

	#demo_bar_buttons .help {
	display:none;
	}

}


@media screen and (max-width: 720px){

	#demo_bar_system_select {
	display:none;	}
	

}


@media screen and (max-width: 1080px){

	#s5_demo_frame_close {
	display:none !important;
	}

}


.system-wrap-preview-version {
display:block;
height:39px;
width:223px;
}



.version-box {
    display: block;
    width: 219px;
    height: 34px;
    border: 1px solid #474747;
    background: #343434;
    -webkit-border-radius: 3px;
    -moz-border-radius:3px;
    border-radius: 3px;
	margin-left:5px;
	padding-top:1px;
	padding-bottom:2px;
	padding-right:2px;
	position: relative;
    top: -7px;
}

.version-box-inner {
	background:url('style/images/dropdownarrows.png') no-repeat 190px -4px;
	padding-top:3px;
	display: block;
    width: 220px;
    height: 33px;
}

.version-box a {
background:url('style/images/question-mark.png') no-repeat left center;
color:#24ABCE;
text-shadow:-1px -1px #303030;
text-decoration:none;
font-size:8pt;
padding-left:27px;
margin-left:12px;
padding-top:8px;
padding-bottom:8px;
float:left;
font-weight:bold;
}

.version-box a:hover {
text-decoration:underline;
}


/* Responsive Buttons */	

#demo_iframe {
	-webkit-box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.2); 
	margin-left: auto !important;
	position: absolute !important;
    margin-right: auto !important;
	left:0 !important;
	right:0 !important;}
	
#s5_demo_frame.frameEffect {
	background: #dfdfdf;}
	
#demo_bar_responsive_buttons {
	width:160px;
	background:#343434;
	padding-right: 0px;
	height:38px;
	padding-left: 0px;
	margin-left: 22px;
	float:left;}
	
.demo_responsive_buttonwrap	{
	float:left;
	height:58px;
	margin-top: 2px;
	padding-left:2px;
	padding-right:0px;}
	
.demo_responsive_smalltxt {
	-moz-opacity: .0 !important;
	-khtml-opacity: .0 !important;
	filter:alpha(opacity=0) !important;
	opacity:.0 !important;
	background: none repeat scroll 0 0 #000000;
    color: #bababa;
    font-family: arial;
    font-size: 10px;
    padding: 5px 9px 5px 9px;
	display:block;
    position: absolute;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;	
	margin-left: -4px;
    top: 51px;
	-webkit-box-shadow:0 3px 3px 1px rgba(0, 0, 0, 0.4);
	-moz-box-shadow:0 3px 3px 1px rgba(0, 0, 0, 0.4);
	box-shadow:0 3px 3px 1px rgba(0, 0, 0, 0.4); }
	
	.demo_responsive_smalltxt.normal {
		margin-left:-8px;}
	
	.demo_responsive_smalltxt.tablevert {
		margin-left:-25px;}
		
	.demo_responsive_smalltxt.tablehorz {
		margin-left:-34px;}	
		
	.demo_responsive_smalltxt.mobilevert {
		margin-left:-25px;}
		
	.demo_responsive_smalltxt.mobilehorz {
		margin-left:-36px;}	
		
	
	#d_response_100 {
		height: 36px;
		margin-left: -1px;
		margin-top: -1px;
		width: 30px;
		cursor:pointer;
		display:block;
		background: url("style/images/demoicon_desktop.png")   no-repeat scroll center 5px rgba(0, 0, 0, 0);}
		
	#d_response_100:hover, #d_response_100.r_demo_active {
		background: url("style/images/demoicon_desktop.png")   no-repeat scroll 3px -39px rgba(0, 0, 0, 0);}	
	
	#d_response_tabletvert {
		height: 36px;
		margin-top: -1px;
		width: 30px;
		cursor:pointer;
		float:left;
		background: url("style/images/demoicon_tabletvert.png")   no-repeat scroll center 5px rgba(0, 0, 0, 0);}
		
	#d_response_tabletvert:hover, #d_response_tabletvert.r_demo_active {	
		background: url("style/images/demoicon_tabletvert.png")   no-repeat scroll center -39px rgba(0, 0, 0, 0);}
	
	#d_response_tablethorz {
		height: 36px;
		margin-top: -1px;
		width: 30px;
		cursor:pointer;
		float:left;
		background: url("style/images/demoicon_tablethorz.png")   no-repeat scroll center 5px rgba(0, 0, 0, 0);}
		
	#d_response_tablethorz:hover, #d_response_tablethorz.r_demo_active {	
		background: url("style/images/demoicon_tablethorz.png")   no-repeat scroll center -39px rgba(0, 0, 0, 0);}
		
	
	#d_response_mobilevert {
		height: 36px;
		margin-top: -1px;
		width: 30px;
		cursor:pointer;
		float:left;
		background: url("style/images/demoicon_mobilevert.png")   no-repeat scroll center 5px rgba(0, 0, 0, 0);}
		
	#d_response_mobilevert:hover, #d_response_mobilevert.r_demo_active {	
		background: url("style/images/demoicon_mobilevert.png")   no-repeat scroll center -39px rgba(0, 0, 0, 0);}
	
	#d_response_mobilehorz {
		height: 36px;
		margin-top: -1px;
		width: 30px;
		cursor:pointer;
		float:left;
		background: url("style/images/demoicon_mobilehorz.png")   no-repeat scroll center 5px rgba(0, 0, 0, 0);}
	
	#d_response_mobilehorz:hover, #d_response_mobilehorz.r_demo_active {
		background: url("style/images/demoicon_mobilehorz.png")   no-repeat scroll center -39px rgba(0, 0, 0, 0);}

	.demo_responsive_buttonwrap:hover .demo_responsive_smalltxt {
		-moz-opacity: 1 !important;
		-khtml-opacity: 1 !important;
		filter:alpha(opacity=100) !important;
		opacity:1 !important;}
		
	
	.demo_fullwidth {
		height:100% !important;
		width:100% !important;}

	.demo_tabletvert {
		height:929px !important;
		width:768px !important;}
		
	.demo_tablethorz {
		height:768px !important;
		width:1024px !important;}	
		
	.demo_mobilevert {
		height:504px !important;
		width:320px !important;}		
		
	.demo_mobilehorz {
		height:320px !important;
		width:504px !important;}		
	
	.demo_fullwidth, .demo_tabletvert, .demo_tablethorz, .demo_mobilevert, .demo_mobilehorz, .demo_responsive_smalltxt    {
		-webkit-transition:  all 200ms ease-in 0s;
		-moz-transition:  all 200ms ease-in 0s;
		-o-transition: all 200ms ease-in 0s;
		transition:  all 200ms ease-in 0s;}
		
	
	#d_response_100:hover, #d_response_tabletvert:hover, #d_response_tablethorz:hover, #d_response_mobilevert:hover, #d_response_mobilehorz:hover, .r_demo_active {
		background-color:#24abce !important;
		color: #ffffff;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;}
			
		
		
@media screen and (max-width: 980px){

	#demo_bar_responsive_buttons {
	display:none !important;
	}

}	
	
	
	
#demo_bar_system_select ul li {
	font-weight:normal !important;
	font-size:14px !important;}
	

	
.demo-block.Joomla {
	float:left;
	padding-right:15px;
    width: 484px;}
	
.demo-block.Wordpress {
	float:left;
	padding-left:15px;
	width: 484px;}


.demo-block-wrap .demo-block-system {
	display:none;}
	
.demo-block-date {
	font-family:roboto;
	font-weight:300;}
	

		
		
		.demo-block-wrap.hidetitleandyear .demo-block-title, .demo-block-wrap.hidetitleandyear .demo-block-date {
		-webkit-transition:  all 200ms ease-in 0s;
		-moz-transition:  all 200ms ease-in 0s;
		-o-transition: all 200ms ease-in 0s;
		transition:  all 200ms ease-in 0s;
		-moz-opacity: .0 ;
		-khtml-opacity: .0;
		filter:alpha(opacity=0);
		opacity:.0;	}
		
		
		
		
		#theme-preview-1 .demo-block-title, #theme-preview-1 .demo-block-date, #theme-preview-4 .demo-block-title, #theme-preview-4 .demo-block-date, #theme-preview-2 .demo-block-title, #theme-preview-2 .demo-block-date , #theme-preview-3 .demo-block-title, #theme-preview-3 .demo-block-date, #theme-preview-5 .demo-block-title, #theme-preview-5 .demo-block-date, #theme-preview-6 .demo-block-title, #theme-preview-6 .demo-block-date, .demo_button.arrow, .demo_button.help, .lowopacity, .fulopacity  {
		-webkit-transition:  all 200ms ease-in 0s;
		-moz-transition:  all 200ms ease-in 0s;
		-o-transition: all 200ms ease-in 0s;
		transition:  all 200ms ease-in 0s; }



#theme-preview-1 {
	position:relative;
	z-index:2;}
	
	#theme-preview-1:hover {
		z-index:3;}
	
	
	#theme-preview-1 .demo-block-title {
		text-align: right;
		text-indent:-4000px;
		top: 442px;}
		
	#theme-preview-1 .demo-block-date {
        text-align: right;
		text-indent:-4000px;
		top: 440px;}
		
	#theme-preview-1:hover .demo-block-title, #theme-preview-1:hover .demo-block-date {
		-moz-opacity: 1 !important;
		-khtml-opacity: 1 !important;
		filter:alpha(opacity=100) !important;
		opacity:1 !important;
	}		
	
	

#theme-preview-2 {
	position:relative;
	top: -411px;
	height: 365px;
	left: -91px;
	z-index:1;}	
	
	
	#theme-preview-2 .demo-block-inner {
		height:288px;}
	
	#theme-preview-2:hover {
		z-index:3;}
	
	#theme-preview-2 .demo-block-title {
		-moz-opacity: .0 ;
		-khtml-opacity: .0;
		filter:alpha(opacity=0);
		opacity:.0;
		text-align: right;
		right: -91px;
		top: 400px;}
		
	#theme-preview-2 .demo-block-date {
		-moz-opacity: .0 ;
		-khtml-opacity: .0;
		filter:alpha(opacity=0);
		opacity:.0;
        text-align: right;
		right: -91px;
		top: 398px;}
		
		#theme-preview-2:hover .demo-block-title, #theme-preview-2:hover .demo-block-date {
			-moz-opacity: 1;
		-khtml-opacity: 1;
		filter:alpha(opacity=100);
		opacity:1;
	}	
	
	
#theme-preview-3 {
	position:relative;
	top: -811px;
	height: 317px;
	left:-168px;
	z-index:0;}	
	
	#theme-preview-3 .demo-block-inner {
		height:240px;}
		
	#theme-preview-3:hover {
		z-index:3;}
	
	
	#theme-preview-3 .demo-block-title {
		-moz-opacity: .0 ;
		-khtml-opacity: .0;
		filter:alpha(opacity=0);
		opacity:.0;
		text-align: right;
		right: -167px;
		top: 352px;}
		
	#theme-preview-3 .demo-block-date {
		-moz-opacity: .0 ;
		-khtml-opacity: .0;
		filter:alpha(opacity=0);
		opacity:.0;
        text-align: right;
		right: -168px;
		top: 350px;}
	
		#theme-preview-3:hover .demo-block-title, #theme-preview-3:hover .demo-block-date {
			-moz-opacity: 1;
		-khtml-opacity: 1;
		filter:alpha(opacity=100);
		opacity:1;
	}	
	
	
	
#theme-preview-4 {
	position:relative;
	z-index:2;}
	
	#theme-preview-4:hover {
		z-index:3;}
	
	
	#theme-preview-4 .demo-block-title {
		text-align: left;
		top: 442px;}
	
	#theme-preview-4 .demo-block-date {
        text-align:left;
		top: 440px;}
		
	#theme-preview-4:hover .demo-block-title, #theme-preview-4:hover .demo-block-date {
		-moz-opacity: 1 !important;
		-khtml-opacity: 1 !important;
		filter:alpha(opacity=100) !important;
		opacity:1 !important;}		
		
	

#theme-preview-5 {
	position:relative;
	top: -411px;
	height: 365px;
	right: -91px;
	z-index:1;}	
	
	#theme-preview-5 .demo-block-inner {
		height:288px;}
	
	
	
	#theme-preview-5:hover {
		z-index:3;}
	
	
	#theme-preview-5 .demo-block-title {
		-moz-opacity: .0 ;
		-khtml-opacity: .0;
		filter:alpha(opacity=0);
		opacity:.0;
		text-align: left;
		left: -91px;
		top: 400px;}
	
	#theme-preview-5 .demo-block-date {
		-moz-opacity: .0 ;
		-khtml-opacity: .0;
		filter:alpha(opacity=0);
		opacity:.0;
        text-align:left;
		left: -91px;
		top: 398px;}
	
	#theme-preview-5:hover .demo-block-title, #theme-preview-5:hover .demo-block-date {
		-moz-opacity: 1;
		-khtml-opacity: 1;
		filter:alpha(opacity=100);
		opacity:1;}	
	
	
#theme-preview-6 {
	position:relative;
	top: -811px;
	height: 317px;
	right:-168px;
	z-index:0;}		
	
	#theme-preview-6 .demo-block-inner {
		height:240px;}
	
	#theme-preview-6:hover {
		z-index:3;}
	
	#theme-preview-6 .demo-block-title {
		-moz-opacity: .0 ;
		-khtml-opacity: .0;
		filter:alpha(opacity=0);
		opacity:.0;
		text-align: left;
		left: -167px;
		top: 352px;}
	
	#theme-preview-6 .demo-block-date {
		-moz-opacity: .0 ;
		-khtml-opacity: .0;
		filter:alpha(opacity=0);
		opacity:.0;
        text-align:left;
		left: -167px;
		top: 350px;}
	
	#theme-preview-6:hover .demo-block-title, #theme-preview-6:hover .demo-block-date {
		-moz-opacity: 1;
		-khtml-opacity: 1;
		filter:alpha(opacity=100);
		opacity:1;}	
	
	
.demo-wrap-inner .Joomla .demo-block-type-title {
	float:right;
    padding-right: 45px;
	margin-right:12px;
	text-align: right;
	background:url('style/images/cms-logos.png') no-repeat right -2px;}
	

.demo-wrap-inner .Wordpress .demo-block-type-title {
	margin-left: 12px;
    padding-left: 48px;
	text-align: left;
	background:url('style/images/cms-logos.png') no-repeat left -158px;}
		
.lowopacity {		
	-moz-opacity: .2;
	-khtml-opacity: .2;
	filter:alpha(opacity=20);
	opacity:.2;}
	
	
.fulopacity {		
	-moz-opacity: 1;
	-khtml-opacity: 1;
	filter:alpha(opacity=100);
	opacity:1;}	


#bottom_bar {
display:none !important;
}


.demo-wrap {
width:100% !important;
margin-left:auto !important;
margin-right:auto !important;
}


#boxscroll, .demo-wrap {
height:auto !important;
}


.link-class-month, .demo-block-date {
display:none;
}