以下是 华为荣耀3焦点图广告页面特效轮播滚动切换代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>华为荣耀3焦点图广告页面特效</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="JS代码,JS代码大全,JS广告代码,Banner广告代码,焦点图轮播切换,JS带动画图片轮播特效,jQuery焦点图" />
<meta name="author" content="">
<link href="css/settings.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<style>
*{margin:0;padding:0;}
</style>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" media="all" />
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="body-wrapper">
<div class="box box-border">
<div class="light-wrapper">
<div class="container inner">
<div class="wide-bannercontainer revolution">
<div class="wide-banner">
<ul>
<li data-transition="fade"> <img src="images/slider-bg1.jpg" alt="" />
<div class="caption sfl" data-x="510" data-y="195" data-speed="800" data-start="1200" data-easing="easeOutExpo"><img src="images/phone.png" alt="" /></div>
<div class="caption sfb" data-x="212" data-y="68" data-speed="800" data-start="100" data-easing="easeOutExpo"><img src="images/women.png" alt="" /></div>
<div class="caption sfl" data-x="20" data-y="237" data-speehttp://cdn.hi-honor.com/d="800" data-start="800" data-easing="easeOutExpo"><img src="images/glb.png" alt="" /></div>
<div class="caption lfr big white" data-x="560" data-y="130" data-speed="600" data-start="1400" data-easing="easeOutExpo">两栖飙机王</div>
</li>
<li data-transition="fade"> <img src="images/slider-bg2.jpg" alt="" />
<div class="caption sfl" data-x="0" data-y="0" data-speed="300" data-start="200" data-easing="easeOutSine"><img src="images/2-4.png" alt="" /></div>
<div class="caption lfr" data-x="631" data-y="39" data-speed="500" data-start="400" data-easing="easeOutSine"><img src="images/2-5.png" alt="" /></div>
<div class="caption lfb" data-x="center" data-y="195" data-speed="700" data-start="1000" data-easing="easeOutExpo"><img src="images/2-1.png" alt="" /></div>
<div class="caption lfb" data-x="center" data-y="236" data-speed="700" data-start="1200" data-easing="easeOutExpo"><img src="images/2-2.png" alt="" /></div>
<div class="caption lfb" data-x="center" data-y="300" data-speed="700" data-start="1300" data-easing="easeOutExpo"><img src="images/2-3.png" alt="" /></div>
</li>
</ul>
<div class="tp-bannertimer tp-bottom"></div>
</div>
<!-- /.wide-banner -->
</div>
<!-- /.wide-bannercontainer -->
<div class="divide30"></div>
</div>
</div>
<!--/.light-wrapper-->
</div>
<!--/.box-->
<script src="js/jquery.js"></script>
<script src="js/jquery.themepunch.plugins.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>
<script src="js/jquery.themepunch.showbizpro.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.hoverdir.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>JS代码(scripts.js):
/*-----------------------------------------------------------------------------------*/
/*FANCYBOX/*-----------------------------------------------------------------------------------*/
$(document).ready(function(){
$(".fancybox-media").fancybox({
arrows:true,padding:0,closeBtn:true,openEffect:'fade',closeEffect:'fade',prevEffect:'fade',nextEffect:'fade',helpers:{
media:{
}
,overlay:{
locked:false}
,buttons:false,thumbs:{
width:50,height:50}
,title:{
type:'inside'}
}
,beforeLoad:function(){
var el,id = $(this.element).data('title-id');
if (id){
el = $('#' + id);
if (el.length){
this.title = el.html();
}
}
}
}
);
}
);
/*-----------------------------------------------------------------------------------*/
/*ISOTOPE PORTFOLIO/*-----------------------------------------------------------------------------------*/
$(document).ready(function (){
var $container = $('.items');
$container.imagesLoaded(function (){
$container.isotope({
itemSelector:'.item',layoutMode:'fitRows'}
);
}
);
$('.filter li a').click(function (){
$('.filter li a').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter:selector}
);
return false;
}
);
}
);
/*-----------------------------------------------------------------------------------*/
/*SHOWBIZ/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function(){
jQuery('.showbiz-container').showbizpro({
dragAndScroll:"off",visibleElementsArray:[3,3,2,1],carousel:"off",heightOffsetBottom:0,mediaMaxHeight:[264,264,300,300],rewindFromEnd:"off",autoPlay:"off",delay:2000,speed:250}
);
}
);
/*-----------------------------------------------------------------------------------*/
/*FULLWIDTH SLIDER/*-----------------------------------------------------------------------------------*/
$(document).ready(function(){
if ($.fn.cssOriginal != undefined) $.fn.css = $.fn.cssOriginal;
$('.wide-banner').revolution({
delay:7000,startheight:500,startwidth:1000,hideThumbs:200,thumbWidth:100,// Thumb With and Height and Amount (only if navigation Tyope set to thumb !)thumbHeight:50,thumbAmount:5,navigationType:"bullet",// bullet,thumb,nonenavigationArrows:"verticalcentered",// nexttobullets,solo (old name verticalcentered),nonenavigationStyle:"round",// round,square,navbar,round-old,square-old,navbar-old,or any from the list in the docu (choose between 50+ different item),customnavigationHAlign:"center",// Vertical Align top,center,bottomnavigationVAlign:"bottom",// Horizontal Align left,center,rightnavigationHOffset:0,navigationVOffset:20,soloArrowLeftHalign:"left",soloArrowLeftValign:"center",soloArrowLeftHOffset:20,soloArrowLeftVOffset:0,soloArrowRightHalign:"right",soloArrowRightValign:"center",soloArrowRightHOffset:20,soloArrowRightVOffset:0,touchenabled:"on",// Enable Swipe Function:on/offonHoverStop:"on",// Stop Banner Timet at Hover on Slide on/offstopAtSlide:-1,// Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0,then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.stopAfterLoops:-1,// Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x,if set to -1 slide never stop automatichideCaptionAtLimit:0,// It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)hideAllCaptionAtLilmit:0,// Hide all The Captions if Width of Browser is less then this valuehideSliderAtLimit:0,// Hide the whole slider,and stop also functions if Width of Browser is less than this valueshadow:0,//0 = no Shadow,1,2,3 = 3 Different Art of Shadows (No Shadow in Fullwidth Version !)fullWidth:"on" // Turns On or Off the Fullwidth Image Centering in FullWidth Modus}
);
}
);
/*-----------------------------------------------------------------------------------*/
/*PORTFOLIO SLIDER/*-----------------------------------------------------------------------------------*/
$(document).ready(function(){
if ($.fn.cssOriginal != undefined) $.fn.css = $.fn.cssOriginal;
$('.portfolio-banner').revolution({
delay:7000,startheight:500,startwidth:1000,hideThumbs:200,navigationType:"bullet",// bullet,thumb,nonenavigationArrows:"verticalcentered",// nexttobullets,solo (old name verticalcentered),nonenavigationStyle:"round",// round,square,navbar,round-old,square-old,navbar-old,or any from the list in the docu (choose between 50+ different item),customnavigationHAlign:"center",// Vertical Align top,center,bottomnavigationVAlign:"bottom",// Horizontal Align left,center,rightnavigationHOffset:0,navigationVOffset:20,soloArrowLeftHalign:"left",soloArrowLeftValign:"center",soloArrowLeftHOffset:20,soloArrowLeftVOffset:0,soloArrowRightHalign:"right",soloArrowRightValign:"center",soloArrowRightHOffset:20,soloArrowRightVOffset:0,touchenabled:"on",// Enable Swipe Function:on/offonHoverStop:"on",// Stop Banner Timet at Hover on Slide on/offstopAtSlide:-1,// Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0,then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.stopAfterLoops:-1,// Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x,if set to -1 slide never stop automatichideCaptionAtLimit:0,// It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)hideAllCaptionAtLilmit:0,// Hide all The Captions if Width of Browser is less then this valuehideSliderAtLimit:0,// Hide the whole slider,and stop also functions if Width of Browser is less than this valueshadow:0,//0 = no Shadow,1,2,3 = 3 Different Art of Shadows (No Shadow in Fullwidth Version !)fullWidth:"off" // Turns On or Off the Fullwidth Image Centering in FullWidth Modus}
);
}
);
/*-----------------------------------------------------------------------------------*/
/*IMAGE HOVER/*-----------------------------------------------------------------------------------*/
$(document).ready(function(){
$('.overlay a').append('<div class="more"></div>');
$(' .overlay > a ').hoverdir();
}
);
jQuery(document).ready(function ($){
$(".clients li").css("opacity","0.70");
$(".clients li").hover(function (){
$(this).stop().animate({
opacity:1.0}
,"fast");
}
,function (){
$(this).stop().animate({
opacity:0.70}
,"fast");
}
);
}
);
/*-----------------------------------------------------------------------------------*/
/*PRETTIFY/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function (){
window.prettyPrint && prettyPrint()}
);
/*-----------------------------------------------------------------------------------*/
/*RETINA.JS/*-----------------------------------------------------------------------------------*/
(function (){
function t(e){
this.path = e;
var t = this.path.split("."),n = t.slice(0,t.length - 1).join("."),r = t[t.length - 1];
this.at_2x_path = n + "@2x." + r}
function n(e){
this.el = e,this.path = new t(this.el.getAttribute("src"));
var n = this;
this.path.check_2x_variant(function (e){
e && n.swap()}
)}
var e = typeof exports == "undefined" ? window:exports;
e.RetinaImagePath = t,t.confirmed_paths = [],t.prototype.is_external = function (){
return !!this.path.match(/^https?\:/i) && !this.path.match("//" + document.domain)}
,t.prototype.check_2x_variant = function (e){
var n,r = this;
if (this.is_external()) return e(!1);
if (this.at_2x_path in t.confirmed_paths) return e(!0);
n = new XMLHttpRequest,n.open("HEAD",this.at_2x_path),n.onreadystatechange = function (){
return n.readyState != 4 ? e(!1):n.status >= 200 && n.status <= 399 ? (t.confirmed_paths.push(r.at_2x_path),e(!0)):e(!1)}
,n.send()}
,e.RetinaImage = n,n.prototype.swap = function (e){
function n(){
t.el.complete ? (t.el.setAttribute("width",t.el.offsetWidth),t.el.setAttribute("height",t.el.offsetHeight),t.el.setAttribute("src",e)):setTimeout(n,5)}
typeof e == "undefined" && (e = this.path.at_2x_path);
var t = this;
n()}
,e.devicePixelRatio > 1 && (window.onload = function (){
var e = document.getElementsByTagName("img"),t = [],r,i;
for (r = 0;
r < e.length;
r++) i = e[r],t.push(new n(i))}
)}
)();
CSS代码(style.css):
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
:focus{outline:0 !important}
.fit-vids-style{display:none}
figure{margin:0;padding:0;}
figure img{width:100%}
iframe{border:none}
::selection{background:#c51b00;/* Safari */
color:#fff;}
::-moz-selection{background:#c51b00;/* Firefox */
color:#fff;}
/*-----------------------------------------------------------------------------------*/
/*GENERAL/*-----------------------------------------------------------------------------------*/
body{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;font-family:"Microsoft YaHei","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;overflow-x:hidden;background:#fff;font-size:14px;text-align:justify;text-justify:inter-ideograph;}
body,li,address{line-height:20px}
input,button,select,textarea{font-family:"Microsoft YaHei","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;font-size:14px;}
a{-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-moz-transition:all 200ms ease-in;color:#c51b00;}
a:hover,a:focus{color:#ffffff;text-decoration:none;}
h1,h2,h3,h4,h5,h6{letter-spacing:-1px;word-spacing:1px;margin-top:0;color:#5c5c5c;margin-bottom:10px;}
h1{font-size:30px;line-height:33px;}
h2{font-size:26px;line-height:32px;}
h3{font-size:24px;line-height:30px;}
h4{font-size:18px;margin-bottom:8px;}
h5{font-size:14px}
.page-title{font-weight:300}
.page-header{padding-bottom:10px;margin:0 0 50px 0;border-bottom:1px solid #dedede;}
.page-header:after{content:'';display:block;height:0;clear:both;visibility:hidden;}
.section-title{text-transform:uppercase;font-size:16px;}
.post-title a{color:#5c5c5c}
.post-title a:hover{color:#c51b00}
h1.post-title,h2.post-title{font-size:26px;margin:0;}
.post-title.portfolio{margin-bottom:10px}
.team h4 span{font-weight:normal;font-size:13px;letter-spacing:normal;color:#919191;margin-left:5px;}
h4.post-title{margin-bottom:10px}
h4.post-title a{color:#5c5c5c}
h4.post-title a:hover{color:#c51b00}
hr{border:0;position:relative;background:#fff;border-bottom:1px solid #dedede;margin:40px 0 60px;}
hr.arrow:after,hr.arrow:before{top:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
hr.arrow:after{border-color:rgba(255,255,255,0);border-top-color:#fff;border-width:7px;left:50%;margin-left:-7px;}
hr.arrow:before{border-color:rgba(0,0,0,0);border-top-color:#dedede;border-width:8px;left:50%;margin-left:-8px;}
blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:2px solid #dedede;border-left:2px solid rgba(0,0,0,0.11);}
.row{margin:0 auto;}
blockquote p{margin-bottom:0;font-size:17px;font-weight:300;line-height:27px;}
blockquote small{line-height:30px;color:#74c9be;}
.map iframe{display:block}
.dropcap{font-weight:900;display:block;float:left;font-size:45px;padding:0;margin:0;margin:10px 8px 0 0;text-transform:uppercase;}
.lead{font-size:17px;line-height:27px;font-weight:300;margin-bottom:25px;}
.intro{font-size:22px;line-height:32px;font-weight:300;margin-bottom:20px;}
.lite{color:#74c9be}
ul{list-style:circle;list-style-position:inside;}
ul,ol{padding:0;margin:0 0 10px 0;}
ul.check{list-style:none}
ul.check li:before{font-family:'fontello';content:"\2611";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;font-size:12px;padding-right:8px;color:#74c9be;}
.media{margin-top:0;}
.media > .pull-left{margin-right:20px}
i.large{color:#74c9be;font-size:40px;width:40px;height:40px;}
.media-wrapper{margin-bottom:10px}
/*-----------------------------------------------------------------------------------*/
/*LAYOUT/*-----------------------------------------------------------------------------------*/
.body-wrapper,.box{width:100%}
.light-wrapper{background:#fff}
.black-wrapper{background:#393939;color:#dedede;}
.black-wrapper a{color:#dedede}
.black-wrapper a:hover{color:#74c9be}
.black-wrapper h1,.black-wrapper h2,.black-wrapper h3,.black-wrapper h4,.black-wrapper h5,.black-wrapper h6{color:#74c9be}
.inner{}
.contact-info{margin:0;list-style:none;font-size:12px;}
.contact-info li{line-height:20px}
.contact-info i{margin-right:10px}
.contact-info a{color:#5c5c5c}
.contact-info a:hover{color:#74c9be}
/*-----------------------------------------------------------------------------------*/
/*DIVIDERS/*-----------------------------------------------------------------------------------*/
.divide0{width:100%;height:0px;}
.divide2{width:100%;height:2px;}
.divide3{width:100%;height:3px;}
.divide5{width:100%;height:5px;}
.divide10{width:100%;height:10px;}
.divide15{width:100%;height:15px;}
.divide20{width:100%;height:20px;}
.divide25{width:100%;height:25px;}
.divide30{width:100%;height:30px;}
.divide35{width:100%;height:35px;}
.divide40{width:100%;height:40px;}
.divide45{width:100%;height:40px;}
.divide50{width:100%;height:50px;}
.divide55{width:100%;height:55px;}
.divide60{width:100%;height:60px;}
.divide65{width:100%;height:65px;}
.divide70{width:100%;height:70px;}
.divide75{width:100%;height:75px;}
.divide80{width:100%;height:80px;}
.divide85{width:100%;height:85px;}
.rm0{margin-right:0px}
.rm1{margin-right:1px}
.rm2{margin-right:2px}
.rm5{margin-right:5px}
.rm10{margin-right:10px}
.rm15{margin-right:15px}
.rm20{margin-right:20px}
.rm25{margin-right:25px}
.rm30{margin-right:30px}
.rm40{margin-right:40px}
.lm0{margin-left:0px}
.lm1{margin-left:1px}
.lm5{margin-left:5px}
.lm7{margin-left:7px}
.lm10{margin-left:10px}
.lm15{margin-left:15px}
.lm20{margin-left:20px}
.lm25{margin-left:25px}
.lm30{margin-left:25px}
.lm40{margin-left:40px}
.rp10{padding-right:10px}
.rp20{padding-right:20px}
.rp30{padding-right:30px}
.lp10{padding-left:10px}
.lp20{padding-left:20px}
.lp30{padding-left:30px}
.tp5{padding-top:5px}
.tp10{padding-top:10px}
.tp20{padding-top:20px}
.tp30{padding-top:30px}
.tm4{margin-top:4px}
.tm5{margin-top:5px}
.tm7{margin-top:7px}
.tm10{margin-top:10px}
.tm15{margin-top:15px}
.tm20{margin-top:20px}
.mbm1{margin-bottom:-1px}
.bm0{margin-bottom:0 !important}
.bm5{margin-bottom:5px !important}
.bm10{margin-bottom:10px !important}
.bm15{margin-bottom:15px !important}
.bm20{margin-bottom:20px !important}
.nobottommargin{margin-bottom:0px !important}
.nobullets{list-style:none;margin-left:0;}
/*-----------------------------------------------------------------------------------*/
/*BUTTON/*-----------------------------------------------------------------------------------*/
.btn,.btn-group > .btn{color:#fff;background:#74c9be;margin-right:5px;margin-bottom:10px;padding:8px 18px;font-weight:900;font-size:13px;text-shadow:none;border:none;text-transform:uppercase;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-moz-transition:all 200ms ease-in;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:5px;border-radius:5px;}
.btn.btn-large{padding:13px 23px;font-size:14px;}
.btn.btn-green{background:#74c9be}
.btn.btn-blue{background:#82b7dd}
.btn.btn-purple{background:#9175ce}
.btn.btn-pink{background:#d487be}
.btn.btn-rose{background:#ce7581}
.btn.btn-orange{background:#ff7660}
.btn:hover,.btn:focus,.btn:active,.btn.active{background-color:#505050;color:#fff;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-moz-transition:all 200ms ease-in;}
.portfolio-filter .btn:hover,.portfolio-filter .btn:focus,.portfolio-filter .btn:active,.portfolio-filter .btn.active,.btn-group.open .btn.dropdown-toggle{background-color:#74c9be;color:#fff;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding-top:1px;padding-bottom:1px;border:0;}
.portfolio-filter .btn{margin:-1px 0 0 0}
/*-----------------------------------------------------------------------------------*/
/*PAGINATION/*-----------------------------------------------------------------------------------*/
.grid-blog .pagination{margin:0 0 0 20px}
.pagination ul{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.pagination ul > li{display:inline}
.pagination ul > li > a,.pagination ul > li > span{float:left;border:none;padding:8px 15px;font-size:13px;text-transform:uppercase;text-decoration:none;background-color:#74c9be;color:#fff;margin-right:5px;font-weight:900;-webkit-border-radius:5px;border-radius:5px;}
.pagination ul > li > a:hover,.pagination ul > li > a:focus,.pagination ul > .active > a,.pagination ul > .active > span{background-color:#505050;color:#fff;}
.pagination ul > li:first-child > a,.pagination ul > li:last-child > a{-webkit-border-radius:5px;border-radius:5px;}
a.meanmenu-reveal{display:none}
.mean-container .mean-bar{float:left;width:100%;position:relative;background:#313131;padding:4px 0;min-height:42px;z-index:999999;margin-bottom:20px;}
.mean-container a.meanmenu-reveal{width:22px;height:22px;padding:11px 13px 11px 13px;position:absolute;top:0;left:50% !important;margin-left:-22px;cursor:pointer;color:#d0d0d0;text-decoration:none;font-size:16px !important;line-height:22px;display:block;}
.mean-container .mean-nav{float:left;width:100%;background:#313131;margin-top:33px;}
.mean-container .mean-nav ul{padding:0;margin:0;width:100% !important;list-style-type:none;}
.mean-container .mean-nav ul li{position:relative;float:left;width:100%;}
.mean-container .mean-nav ul li a{display:block;float:left;width:100%;padding:10px 30px;margin:0;text-align:left;color:#d0d0d0;font-size:12px;font-weight:700;border-bottom:1px solid #3c3c3c;text-decoration:none;text-transform:uppercase;}
.mean-container .mean-nav ul li a .icn{display:none}
.mean-container .mean-nav ul li li a{width:100%;padding:10px 50px;border-bottom:1px solid #3c3c3c;text-shadow:none !important;visibility:visible;}
.mean-container .mean-nav ul li.mean-last a{border-bottom:none;margin-bottom:0;}
.mean-container .mean-nav ul li li li a{width:100%;padding:10px 70px;}
.mean-container .mean-nav ul li li li li a{width:100%;padding:10px 90px;}
.mean-container .mean-nav ul li li li li li a{width:100%;padding:10px 110px;}
.mean-container .mean-nav ul li a:hover{background:#2c2c2c}
.mean-container .mean-nav ul li a.mean-expand{width:26px;height:26px;border:none !important;padding:12px !important;text-align:center;position:absolute;right:0;top:0;z-index:2;font-weight:700;}
.mean-container .mean-nav ul li a.mean-expand:hover{background:none}
.mean-container .mean-push{float:left;width:100%;padding:0;margin:0;clear:both;}
.mean-nav .wrapper{width:100%;padding:0;margin:0;}
/*-----------------------------------------------------------------------------------*/
/*FOOTER/*-----------------------------------------------------------------------------------*/
.subfooter{background:#5d5d5d;color:#dedede;}
.subfooter .tleft{float:left;font-size:11px;}
.subfooter .tright{float:right;font-size:11px;color:#87da8f;}
.subfooter .tright a{color:#87da8f;}
.subfooter .tright a span{color:#fff;}
.subfooter a{color:#dedede}
.subfooter a:hover{color:#74c9be}
.subfooter .inner{padding-top:5px;padding-bottom:5px;}
.subfooter .inner p{margin:0;line-height:14px;}
i.contact{color:#74c9be;margin-right:5px;}
.widget .post-list{list-style:none;margin:0;}
.widget .post-list li{margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,0.15);}
.widget .post-list li:first-child{margin:0;padding:0;border:none;}
.widget .post-list li h6{font-size:13px;line-height:23px;font-weight:400;letter-spacing:normal;margin:0;}
.widget .post-list li em{color:#949494;font-size:11px;font-style:normal;}
.tagcloud{line-height:25px}
/*-----------------------------------------------------------------------------------*/
/*SOCIAL ICONS/*-----------------------------------------------------------------------------------*/
.social{height:30px;margin:0;padding:0;}
.social li{display:inline-block;font-family:'fontello-social';margin-right:1px;}
.social li a{display:table;-webkit-transform:translateZ() !important;-webkit-backface-visibility:hidden !important;-webkit-perspective:1000 !important;}
.social li a i{text-align:center;display:table-cell;vertical-align:middle;color:#FFF;width:30px;height:30px;-webkit-border-radius:50%;border-radius:50%;line-height:30px;display:inline-block;text-align:center;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-moz-transition:all 200ms ease-in;opacity:0.75;}
.social a:hover i{opacity:1}
.social .icon-s-pinterest{background-color:#c53942}
.social .icon-s-rss{background-color:#e86f04}
.social .icon-s-facebook{background-color:#4470cf}
.social .icon-s-twitter{background-color:#5daed5}
.social .icon-s-flickr{background-color:#ff0088}
.social .icon-s-dribbble{background-color:#d07ead}
.social .icon-s-behance{background-color:#098ffa}
.social .icon-s-linkedin{background-color:#3393c1}
.social .icon-s-vimeo{background-color:#099fc7}
.social .icon-s-youtube{background-color:#c8312b}
.social .icon-s-skype{background-color:#2ebbf0}
.social .icon-s-tumblr{background-color:#5d82a4}
.social .icon-s-delicious{background-color:#3274d1}
.social .icon-s-500px{background-color:#00a6df}
.social .icon-s-grooveshark{background-color:#f66c00}
.social .icon-s-forrst{background-color:#2f7935}
.social .icon-s-digg{background-color:#1b5891}
.social .icon-s-blogger{background-color:#fc6605}
.social .icon-s-klout{background-color:#d8390f}
.social .icon-s-dropbox{background-color:#016aab}
.social .icon-s-github{background-color:#4073a6}
.social .icon-s-songkick{background-color:#ff0030}
.social .icon-s-posterous{background-color:#eac954}
.social .icon-s-appnet{background-color:#0291c9}
.social .icon-s-gplus{background-color:#a84539}
.social .icon-s-stumbleupon{background-color:#eb4923}
.social .icon-s-lastfm{background-color:#be0c02}
.social .icon-s-spotify{background-color:#7cc011}
.social .icon-s-instagram{background-color:#a4765c}
.social .icon-s-evernote{background-color:#82d15c}
.social .icon-s-paypal{background-color:#2a608e}
.social .icon-s-picasa{background-color:#9864ae}
.social .icon-s-soundcloud{background-color:#ff680d}
/*-----------------------------------------------------------------------------------*/
/*REVOLUTION SLIDER/*-----------------------------------------------------------------------------------*/
.wide-bannercontainer{width:100% !important;position:relative;padding:0;max-height:500px !important;overflow:hidden;}
.portfolio-bannercontainer{width:100% !important;position:relative;padding:0;max-height:500px !important;overflow:hidden;margin-bottom:50px;}
.revolution ul{visibility:hidden;margin:0;list-style:none;}
.tp-caption.white{color:#FFF;}
.tp-caption.big{font-size:46px;line-height:33px;font-weight:900;letter-spacing:-1px;}
.tp-caption.small{font-size:24px;line-height:1 !important;font-weight:300;margin-bottom:25px;}
.tp-caption.white-bg{background:#FFF;padding:10px 15px;}
.tp-caption.dark-bg{background:rgba(0,0,0,0.8);color:#cbcbcb;padding:10px 15px;}
.tp-caption.boxshadow{-moz-box-shadow:0px 0px 5px rgba(0,0,0,0.3);-webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.3);box-shadow:0px 0px 5px rgba(0,0,0,0.3);}
.tp-loader{background:url(../image/loading.gif) no-repeat;background-color:#fafafa;margin:-15px -15px;top:50%;left:50%;z-index:10000;position:absolute;width:30px;height:30px;background-size:30px 30px;}
@media only screen and (-Webkit-min-device-pixel-ratio:1.5),only screen and (-moz-min-device-pixel-ratio:1.5),only screen and (-o-min-device-pixel-ratio:3/2),only screen and (min-device-pixel-ratio:1.5){.tp-loader{background-image:url(../image/loading@2x.gif)}
}
.tp-bannertimer{width:100%;height:10px;background:url(../image/timer.png);position:absolute;z-index:200;}
.tparrows:before{font-family:'fontello';font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;text-align:center;width:34px;height:34px;line-height:34px;font-size:20px;padding-top:3px;}
.tp-leftarrow.default,.tp-rightarrow.default{z-index:100;cursor:pointer;position:relative;top:50% !important;-webkit-border-radius:50%;border-radius:50%;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-moz-transition:all 200ms ease-in;background:#ececec;color:#747474;}
.tp-leftarrow.default:before{content:'\e75d';padding-left:3px;}
.tp-rightarrow.default:before{content:'\e75e';padding-left:7px;}
/* Firefox Fix */
@-moz-document url-prefix(){.tparrows:before{padding-top:2px}
.tp-leftarrow.default:before{padding-left:5px}
.tp-rightarrow.default:before{padding-left:9px}
}
.tparrows:hover{background:#74c9be;color:#fff;}
.tp-bullets.simplebullets.round .bullet{width:12px;height:12px;-webkit-border-radius:50%;border-radius:50%;margin-left:5px;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-moz-transition:all 200ms ease-in;background:#ececec;}
.tp-bullets.simplebullets.round .bullet.selected,.tp-bullets.simplebullets.round .bullet:hover{background:#c51b00}
.tp-bullets.hidebullets{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;}
/*-----------------------------------------------------------------------------------*/
/*SERVICES TABS/*-----------------------------------------------------------------------------------*/
.services .etabs{padding:0;overflow:inherit;width:90%;margin:0 auto;}
.services,.services .etabs{text-align:center}
.services .tab{display:inline-block}
.services .tab a{display:block}
.services .tab .icon{display:table;margin:0 auto 15px;position:relative;}
.services .tab .icon i.icn{text-align:center;display:table-cell;vertical-align:middle;width:100px;height:100px;-webkit-border-radius:50%;border-radius:50%;background:#ececec;color:#5c5c5c;line-height:1;font-size:35px;text-transform:uppercase;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-moz-transition:all 200ms ease-in;}
.services .tab:hover .icon i.icn,.services .tab.active .icon i.icn{background:#74c9be;color:#fff;}
.services .tab:hover h4,.services .tab.active h4{color:#74c9be}
.services .tab h4{margin:0}
.services .tab .icon:before{opacity:0;position:absolute;top:-5px;left:44px;content:"";border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #74c9be;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-moz-transition:all 200ms ease-in;}
.services .tab.active .icon:before{opacity:1}
.services.tabs .panel-container{width:90%;margin:0 auto 30px;}
.services.tab-container .panel-container p{margin:0;padding-bottom:10px;}
/*-----------------------------------------------------------------------------------*/
/*TABS ON TOP/*-----------------------------------------------------------------------------------*/
.tabs-top .etabs{margin:0;padding:0;overflow:inherit;}
.tabs-top.center .etabs{text-align:center}
.tabs-top .tab{margin:0;padding:0;display:inline-block;zoom:1;*display:inline;border:1px solid #dedede;border-bottom:none;top:1px;position:relative;z-index:1;margin-right:3px;}
.tabs-top .tab a{padding:13px 25px;display:block;background:#f7f7f7;color:#5c5c5c;font-size:14px;font-weight:700;}
.tabs-top.left .tab a{padding:10px 20px}
.tabs-top .tab i{margin-right:5px}
.tabs-top .tab.active{position:relative;z-index:3;}
.tabs-top .tab.active a{background:#fff}
.tabs-top .tab a:hover,.tabs-top .tab.active a{color:#74c9be}
.tabs-top.tab-container .panel-container{border-top:1px solid #dedede;position:relative;z-index:1;display:block;}
.tabs-top.tab-container .panel-container p{margin:0;padding-bottom:10px;}
.tabs-top.tab-container .panel-container .tab-block{padding-top:30px;padding-bottom:0;}
/*-----------------------------------------------------------------------------------*/
/*TABS ON SIDe/*-----------------------------------------------------------------------------------*/
.tabs-side:after{content:'';display:block;height:0;clear:both;visibility:hidden;}
.tabs-side .etabs{margin:0;padding:0;padding-top:10px;overflow:inherit;width:240px;float:left;}
.tabs-side .tab{margin:0;padding:0;display:block;zoom:1;border:1px solid #dedede;border-right:none;left:1px;position:relative;z-index:1;border-top:none;letter-spacing:-1px;}
.tabs-side .tab:first-child{border-top:1px solid #dedede}
.tabs-side .tab a{padding:15px 25px;display:block;background:#f7f7f7;color:#5c5c5c;font-size:14px;font-weight:700;}
.tabs-side .tab i{margin-right:5px}
.tabs-side .tab.active{position:relative;z-index:3;}
.tabs-side .tab.active a{background:#fff}
.tabs-side .tab a:hover,.tabs-side .tab.active a{color:#74c9be}
.tabs-side.tab-container .panel-container{border-left:1px solid #dedede;position:relative;z-index:1;display:block;width:700px;float:right;}
.tabs-side.tab-container .panel-container p{}
.tabs-side.tab-container .panel-container .tab-block{padding-left:30px}
/*-----------------------------------------------------------------------------------*/
/*BLOG/*-----------------------------------------------------------------------------------*/
.meta{font-size:11px;margin-bottom:10px;}
.meta,.meta a{color:#a6a6a6}
.meta a:hover{color:#74c9be}
.grid-blog .post figure{margin-bottom:20px}
.grid-blog .post{margin-bottom:43px}
.grid-blog hr{clear:left;display:none;margin-left:20px;margin-bottom:50px;}
.grid-blog.col2 hr:nth-child(3n){display:none}
.grid-blog.col2 hr:nth-child(4n){display:block}
.grid-blog.col3 hr:nth-child(3n){display:block}
.grid-blog hr:after,.grid-blog hr:before{display:none}
.classic-blog .post.media figure{width:220px;margin-bottom:53px;}
.classic-blog .post{width:450px;}
.classic-blog .postb{margin-bottom:50px;width:100%;}
.media-bodyb p{font-size:20px;line-height:30px;}
.classic-blog .wide .post figure{margin-bottom:20px}
/*-----------------------------------------------------------------------------------*/
/*SHOWBIZ/*-----------------------------------------------------------------------------------*/
.showbiz{position:relative}
.showbiz-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;position:relative;}
.showbiz-navigation{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;position:absolute;top:-40px;right:0;}
.sb-navigation-left,.sb-navigation-right{cursor:pointer;display:inline-block;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.sb-navigation-left:before,.sb-navigation-right:before{font-family:'fontello';font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;text-align:center;width:26px;height:26px;line-height:26px;font-size:14px;}
.sb-navigation-left,.sb-navigation-right{z-index:100;cursor:pointer;position:relative;top:50% !important;-webkit-border-radius:50%;border-radius:50%;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-moz-transition:all 200ms ease-in;background:#ececec;color:#747474;}
.sb-navigation-left:before{content:'\e75d'}
.sb-navigation-right:before{content:'\e75e'}
/* Firefox Fix */
@-moz-document url-prefix(){.sb-navigation-left:before{padding-right:1px}
.sb-navigation-right:before{padding-left:2px}
}
.sb-navigation-left:hover,.sb-navigation-right:hover{background:#74c9be;color:#fff;}
.sb-hidden{display:none}
.showbiz ul,.showbiz li{list-style:none;margin:0 0 -10px 0;padding:0;}
.showbiz ul li{position:relative;-webkit-transform:translateZ(10);-webkit-backface-visibility:hidden;-webkit-perspective:1000;margin-right:20px;}
.showbiz .overflowholder{overflow:hidden;position:relative;width:100%;z-index:2;}
.showbiz .overflowholder ul{width:100000px;position:absolute;top:0px;left:0px;}
.showbiz .overflowholder ul li{float:left !important;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;-ms-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;position:relative;}
.showbiz .mediaholder{position:relative;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:transparent;padding:0px;border:none;margin-bottom:15px;}
.showbiz .mediaholder_innerwrap{position:relative;overflow:hidden;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.showbiz .mediaholder img{width:100%;position:relative;}
/*-----------------------------------------------------------------------------------*/
/*SIDEBAR/*-----------------------------------------------------------------------------------*/
.sidebox{margin-top:50px;display:block;}
.sidebox h3{font-size:14px;margin-bottom:10px;text-transform:uppercase;}
.sidebox:first-child{margin:0}
.sidebox .post-list{padding:0;margin:0;}
.sidebox .post-list:after{content:'';display:block;height:0;clear:both;visibility:hidden;}
.sidebox .post-list li{clear:both;padding:0;margin-bottom:15px;display:block;overflow:hidden;}
.sidebox .post-list h6{font-size:15px;line-height:28px;margin:0;font-weight:normal;text-transform:none;letter-spacing:normal;}
.sidebox a{color:#5c5c5c}
.sidebox a:hover{color:#74c9be}
.sidebox .post-list .overlay{float:left;width:70px;height:70px;}
.sidebox .post-list .meta{margin-left:85px;overflow:hidden;}
.sidebox.widget form{margin:0}
.sidebox.widget .searchform input{margin:0}
.widget .list{list-style:none;margin:0;}
.border-list{list-style:none;margin:0;background:#f7f7f7;border:1px solid #dedede;}
.border-list li{border-top:1px solid #dedede;position:relative;}
.border-list li a{display:block;padding:7px 12px;color:#5c5c5c;}
.border-list li a:hover{color:#74c9be}
.border-list li:after{font-family:'fontello';font-style:normal;font-weight:normal;speak:none;display:block;text-decoration:inherit;content:"\e762";display:block;position:absolute;right:12px;top:8px;font-size:17px;}
.border-list li:first-child{border-top:none}
/*-----------------------------------------------------------------------------------*/
/*FORMS/*-----------------------------------------------------------------------------------*/
.forms{position:relative;padding:0;width:100%;}
.form-container .response{display:none}
.forms ol{margin:0;padding:0;}
.forms ol li{line-height:auto;list-style:none;}
.forms li.hidden-row{display:none}
input,textarea,.uneditable-input{width:100%}
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{display:inline-block;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;height:35px;padding:0 10px;margin-bottom:15px;font-size:13px;line-height:23px;color:#5c5c5c;resize:none;vertical-align:middle;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:1px solid #dedede;background:#fafafa;-webkit-border-radius:0;border-radius:0;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;-moz-transition:all 200ms ease-in;}
textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:1px solid #c2c2c2;}
textarea{height:100%;padding:5px 10px;margin-bottom:15px;min-height:150px;resize:vertical;}
.btn-submit{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
.forms li.error input,.forms li.error textarea{border:1px solid #d18282}
.forms span.error{display:none}
.forms .button-row span.error{padding:0;display:none;}
.forms label{display:block;float:left;width:95px;padding-top:7px;font-size:13px;clear:both;}
.comment-form div label{position:absolute;top:0;left:0;}
.form-container:after{content:'';display:block;height:0;clear:both;visibility:hidden;}
/*-----------------------------------------------------------------------------------*/
/*THUMBNAILS/*-----------------------------------------------------------------------------------*/
.thumbs{list-style:none;margin-bottom:-20px;}
.thumbs .media-wrapper{margin:0 0 20px 0}
.thumbs .thumb{margin-bottom:20px}
.clients .thumb{margin-bottom:20px}
.clients .media-wrapper{margin:0}
.thumbs .thumb .social{margin-bottom:40px}
/*-----------------------------------------------------------------------------------*/
/*PORTFOLIO/*-----------------------------------------------------------------------------------*/
#portfolio .thumbs .thumb{margin-bottom:40px}
.navigation .btn{margin:0 0 0 5px}
.navigation .btn.back{margin:0}
.navigation:after{content:'';display:block;height:0;clear:both;visibility:hidden;}
.item-details span{text-transform:uppercase;font-weight:900;color:#74c9be;letter-spacing:-1px;margin-right:5px;}
.item-details a{color:#5c5c5c}
.item-details a:hover{color:#74c9be}
.media-wrapper.portfolio{margin-bottom:50px}
.isotope,.isotope .item{-webkit-transition-duration:0.8s;-moz-transition-duration:0.8s;-ms-transition-duration:0.8s;-o-transition-duration:0.8s;transition-duration:0.8s;}
.isotope{-webkit-transition-property:height,width;-moz-transition-property:height,width;-ms-transition-property:height,width;-o-transition-property:height,width;transition-property:height,width;}
.isotope .item{-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-ms-transition-property:-ms-transform,opacity;-o-transition-property:top,left,opacity;transition-property:transform,opacity;}
/*-----------------------------------------------------------------------------------*/
/*DIRECTION AWARE HOVER/*-----------------------------------------------------------------------------------*/
.overlay a,.overlay a img{display:block;position:relative;}
.overlay a{overflow:hidden}
.overlay a div{position:absolute;width:100%;height:100%;}
.overlay a div:before{font-family:'fontello';font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;position:absolute;width:24px;line-height:1;height:24px;text-align:center;content:'\f517';font-size:24px;color:#FFF;top:50%;left:50%;margin:-12px 0 0 -12px;}
.portfolio .overlay a div:before{content:'\e744';width:26px;height:26px;font-size:26px;margin:-13px 0 0 -13px;}
.post-list .overlay a div{-webkit-box-shadow:inset 0 0 0 4px rgba(255,255,255,0.15);-moz-box-shadow:inset 0 0 0 4px rgba(255,255,255,0.15);box-shadow:inset 0 0 0 4px rgba(255,255,255,0.15);}
.post-list .overlay a div:before{width:18px;height:18px;font-size:18px;margin:-9px 0 0 -9px;}
.overlay a div.da-animate{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.da-slideFromTop{left:0px;top:-100%;}
.da-slideFromBottom{left:0px;top:100%;}
.da-slideFromLeft{top:0px;left:-100%;}
.da-slideFromRight{top:0px;left:100%;}
.da-slideTop{top:0px}
.da-slideLeft{left:0px}
/*-----------------------------------------------------------------------------------*/
/*ACCORDION/TOGGLE/*-----------------------------------------------------------------------------------*/
.accordion-heading h5{margin:0}
.accordion-heading a:hover h5{color:#74c9be}
.accordion-group{margin-bottom:5px;border:1px solid #dedede;background:#fafafa;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.accordion-heading .accordion-toggle{padding:11px 15px}
.accordion-inner{padding:12px 15px;border-top:1px solid #dedede;}
/*-----------------------------------------------------------------------------------*/
/*TABS/*-----------------------------------------------------------------------------------*/
.nav-tabs{border:none}
.nav-tabs > li{margin-bottom:-1px}
.nav-tabs > li > a{padding-top:8px;padding-bottom:8px;line-height:20px;font-weight:900;border:1px solid #dedede;border:1px solid rgba(0,0,0,0.13);border-bottom-color:transparent;}
.nav > li > a{color:#818181}
.nav > li > a:hover,.nav > li > a:focus{background:none;color:#74c9be;}
.nav-tabs > li > a{margin-right:4px;padding-right:15px;padding-left:15px;}
.nav-tabs > li > a:hover,.nav-tabs > li > a:focus{border-color:#dedede;border-color:rgba(0,0,0,0.13);border-bottom:transparent;}
.nav-tabs > .active > a,.nav-tabs > .active > a:hover,.nav-tabs > .active > a:focus{color:#74c9be;cursor:default;background-color:#ffffff;border:1px solid #ddd;border-bottom-color:transparent;}
.tab-content{background:#FFF;border:1px solid #ddd;padding:15px;}
/*-----------------------------------------------------------------------------------*/
/*FANCYBOX/*-----------------------------------------------------------------------------------*/
#fancybox-thumbs ul li img{max-width:none}
.fancybox-wrap{background:#FFF !important}
.fancybox-title,.fancybox-error{font-family:'Open Sans',sans-serif !important;font-size:13px !important;line-height:23px !important;}
.fancybox-title h2,.fancybox-title h3{color:#5c5c5c;margin-bottom:10px;line-height:22px;font-size:18px;}
.fancybox-skin{color:#5c5c5c !important}
.fancybox-title-inside-wrap{padding:20px !important}
.fancybox-nav span{width:34px !important;height:34px !important;margin-top:-17px !important;}
.fancybox-close{top:-17px !important;right:-17px !important;width:34px !important;height:34px !important;}
.fancybox-close:before,.fancybox-prev span:before,.fancybox-next span:before{font-family:'fontello';font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;margin-right:0 !important;margin-top:6px !important;text-align:center;width:34px !important;font-size:20px !important;}
/* Firefox Fix */
@-moz-document url-prefix(){.fancybox-close:before,.fancybox-prev span:before,.fancybox-next span:before{margin-top:5px !important}
}
.fancybox-close,.fancybox-prev span,.fancybox-next span{background:#ececec !important;color:#747474 !important;text-align:center;-webkit-transition:all 200ms ease-in !important;-o-transition:all 200ms ease-in !important;-moz-transition:all 200ms ease-in !important;-webkit-border-radius:50% !important;border-radius:50% !important;}
.fancybox-close:hover,.fancybox-prev span:hover,.fancybox-next span:hover{background:#74c9be !important;color:#fff !important;}
.fancybox-prev span:before{content:'\e75d'}
.fancybox-next span:before{content:'\e75e'}
.fancybox-close:before{content:'\2715'}
#fancybox-loading{margin-top:-12px !important;margin-left:-12px !important;background:#000 !important;padding:8px;opacity:1 !important;-webkit-border-radius:3px !important;border-radius:3px !important;}
#fancybox-loading div{width:24px !important;height:24px !important;background-image:url(../image/fancy-loading.gif) !important;}
media_tag_5{media_subcode:5}
/*-----------------------------------------------------------------------------------*/
/*TESTIMONIALS/*-----------------------------------------------------------------------------------*/
.arrow-box{position:relative;border:1px solid #dedede;margin-left:8px;padding:15px 20px;background-color:#fafafa;}
.arrow-box:after,.arrow-box:before{right:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.arrow-box:after{border-color:rgba(255,255,255,0);border-right-color:#fafafa;border-width:7px;top:22px;}
.arrow-box:before{border-color:rgba(0,0,0,0);border-right-color:#dedede;border-width:8px;top:21px;}
.testimonials .media > .pull-left{margin-right:10px}
.testimonials blockquote{padding:0;margin:0;border:none;}
.testimonials blockquote p{font-style:italic}
.testimonials blockquote small{font-style:normal}
.testimonials blockquote p,.testimonials blockquote small{font-size:13px;line-height:23px;font-weight:normal;}
/*-----------------------------------------------------------------------------------*/
/*PRICING TABLE/*-----------------------------------------------------------------------------------*/
.pricing{width:100%;overflow:hidden;text-align:center;padding-bottom:10px;display:block;}
.pricing .btn{margin:0}
.pricing .plan{border:1px solid #dedede}
.pricing .plan h3{font-size:18px;line-height:45px;margin:0;padding:5px 0;background:#fff;color:#5c5c5c;}
.pricing .plan h4{padding:20px 0;margin:0;background:#f5f5f5;}
.pricing .plan h4 span{color:#74c9be}
.pricing .plan h4 .amount{display:block;text-align:center;}
.pricing .plan h4 .amount{font-size:45px;padding-bottom:10px;}
.pricing .plan h4 .amount span{vertical-align:super;font-size:20px;font-weight:300;}
.pricing .plan li:nth-child(2n){background:#f5f5f5}
.pricing .plan ul{margin:0;list-style:none;}
.pricing .plan ul li{background:#fff;padding:15px 0;}
.pricing .plan h3{text-transform:uppercase}
.pricing .select{background:#f5f5f5;padding:18px 0;}
/*-----------------------------------------------------------------------------------*/
/*PROGRESS BAR/*-----------------------------------------------------------------------------------*/
.progress-list{margin:0;list-style:none;}
.progress-list li{margin-bottom:20px}
.progress-list li em{padding-left:8px;color:#74c9be;}
.progress-list li em:before{content:"-";padding-right:10px;display:inline-block;}
.progress.plain{height:15px;margin-bottom:0;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);background:#f5f5f5;-webkit-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.progress.plain .bar{float:left;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);width:0;height:100%;font-size:12px;color:#ffffff;text-align:center;text-shadow:none;background:#74c9be;-webkit-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
/*-----------------------------------------------------------------------------------*/
/*COMMENTS/*-----------------------------------------------------------------------------------*/
#comments{margin:0}
#comments ol.commentlist{list-style:none;margin:0;padding-bottom:15px;}
#comments ol.commentlist li{padding:20px 0 0 0;background:none;}
#comments .user{float:left;width:70px;height:70px;position:relative;}
#comments .message{overflow:hidden}
#comments .arrow-box{margin-left:20px}
#comments ul.children{margin:0;overflow:inherit;padding:0 0 0 55px;list-style:none;}
#comments ol.commentlist ul.children li{padding-right:0;border:none;}
#comments .info h2{font-size:14px;margin:0;display:inline;margin-right:5px;}
#comments .info{margin-bottom:12px}
#comments .info h2 a{color:#616161}
#comments .info h2 a:hover{color:#74c9be}
#comments .info .meta{display:inline}
#comments .info .meta:before{content:"-";display:inline-block;margin-right:10px;}
#comments a.reply-link{position:absolute;right:20px;top:20px;line-height:1;font-size:9px;color:#5c5c5c;text-transform:uppercase;}
#comments a.reply-link:hover{color:#74c9be}
.comment-form-wrapper p{padding-bottom:20px}
/*-----------------------------------------------------------------------------------*/
/*RETINA ICONS/*-----------------------------------------------------------------------------------*/
.retina-icons{list-style:none;margin:0;}
.retina-icons li{display:inline-block;font-size:25px;margin-bottom:10px;padding:0 10px;}
.retina-icons-code i{font-size:18px}
.retina-icons-code tr td:first-child,.retina-icons-code tr th:first-child{text-align:center}
.retina-icons-code code{color:#717171}
.table-bordered{border:1px solid #dedede;border-left:none;background:#fff;}
.table-bordered th,.table-bordered td{border-left:1px solid #dedede}
.table th,.table td{border-top:1px solid #dedede}
/* Firefox Fix */
@-moz-document url-prefix(){.menu ul li a,.item-details span,h1,h2,h3,h4,h5,h6,.tp-caption.big,.tabs-side .tab{letter-spacing:-0.7px}
}
/*-----------------------------------------------------------------------------------*/
/*RESPONSIVE/*-----------------------------------------------------------------------------------*/
@media (min-width:1000px){body{background:#fff;}
.row{width:960px;margin:0 auto;}
.media-body{width:210px;float:right;}
.body-wrapper{width:1000px;margin:0 auto;}
.box{width:1000px;margin-left:-1px;display:block;margin-bottom:50px;}
header{padding:25px 0 25px 99px;margin:0px auto;width:1140px;}
.postb figure{width:480px;}
}
@media (min-width:768px) and (max-width:999px){.tabs-side .etabs{width:224px}
.tabs-side.tab-container .panel-container{width:500px}
.services .etabs{width:100%}
.subfooter .tleft{float:none;text-align:center;font-size:11px;}
.subfooter .tright{float:none;text-align:center;font-size:11px;}
.classic-blog .post{width:100%;}
h1.post-title,h2.post-title{font-size:18px;margin:0;}
.classic-blog .postb{margin-bottom:50px;width:100%;}
.classic-blog .postb.media figure{width:220px;}
.media-bodyb p{font-size:14px;line-height:20px;}
.media-bodyb{}
}
@media (max-width:767px){body{padding-right:0px !important;padding-left:0px !important;}
h2.post-title{font-size:18px;margin:0;}
.subfooter .tleft{float:none;text-align:center;font-size:8px;}
.subfooter .tright{float:none;text-align:center;font-size:11px;}
.classic-blog .postb{margin-bottom:50px;width:100%;}
.classic-blog .postb.media figure{width:100%;}
.media-bodyb p{font-size:14px;line-height:20px;}
.media-bodyb{float:left;}
.classic-blog .post{width:480px;}
.contact-info{float:none;text-align:center;}
.contact-info li{display:inline;margin:0 10px;}
.menu{margin:0 auto}
[class*="span"],.uneditable-input[class*="span"],.row-fluid [class*="span"]{margin-bottom:30px;padding:0 !important;}
.tab{display:block !important;margin:0 !important;}
.tab:last-child{border:1px solid #dedede}
.services .etabs,.services.tabs .panel-container{width:100%}
.services,.services .etabs{text-align:center}
.services .tab a{display:inline}
.services .tab .icon{display:inline;margin:0;}
.services .tab .icon i.icn{text-align:left;display:inline;vertical-align:baseline;width:auto;height:auto;-webkit-border-radius:0;border-radius:0;background:transparent;color:#5c5c5c;line-height:1;font-size:16px;}
.services .tab:hover .icon i.icn,.services .tab.active .icon i.icn{background:none !important;color:#74c9be !important;}
.services .tab{margin:0;padding:0;display:inline-block;zoom:1;*display:inline;border:1px solid #dedede;border-bottom:none;top:1px;position:relative;z-index:1;margin-right:3px;}
.services .tab:last-child{border:1px solid #dedede}
.services .tab a{padding:13px 25px;display:block;background:#f7f7f7;color:#5c5c5c;font-size:14px;font-weight:700;}
.services .tab.active a{background-color:#fff}
.services .tab:hover h4,.services .tab.active h4{color:#74c9be}
.services .tab h4{margin:0;display:inline;font-size:14px;}
.services .tab .icon:before{display:none}
.services.tab-container .panel-container p{margin:0;padding-bottom:10px;}
.tabs-side .etabs{margin:0;padding:0;padding-top:10px;overflow:inherit;width:100%;float:none;}
.tabs-side .tab{margin:0;padding:0;display:block;zoom:1;border:1px solid #dedede !important;border-top:none !important;left:0;position:relative;z-index:1;border-top:none;letter-spacing:-1px;}
.tabs-side .tab:first-child{border-top:1px solid #dedede !important}
.tabs-side .tab a{padding:13px 25px;display:block;background:#f7f7f7;color:#5c5c5c;font-size:14px;font-weight:700;}
.tabs-side .tab i{margin-right:5px}
.tabs-side .tab.active{position:relative;z-index:3;}
.tabs-side .tab.active a{background:#fff}
.tabs-side .tab a:hover,.tabs-side .tab.active a{color:#74c9be}
.tabs-side.tab-container .panel-container{border-left:none;position:relative;z-index:1;display:block;width:100%;float:none;}
.tabs-side.tab-container .panel-container p{}
.tabs-side.tab-container .panel-container .tab-block{padding-left:0;padding-top:20px;}
.arrow-box{margin-left:0}
.arrow-box:after,.arrow-box:before{display:none}
.testimonials .media > .pull-left{margin:0;display:none;}
.grid-blog hr{display:block !important;margin-left:0;}
.grid-blog .post figure.pull-left{float:none;width:100%;}
.grid-blog .pagination{margin:0}
.subfooter p.pull-left,.subfooter .social.pull-right{float:none}
.subfooter p{padding-bottom:10px}
.subfooter .social li{margin:0 1px 0 0}
.classic-blog .post.media figure{width:100%;margin-bottom:20px;}
.media > .pull-left{float:none;}
#comments .user{margin-right:0;}
#comments ul.children{padding:0 0 0 20px}
#comments .arrow-box{margin-left:0}
#comments .info .meta{display:block}
#comments .info .meta:before{display:none}
.tabs-side img.pull-left,.tabs-side img.pull-right{float:none;margin-bottom:10px;}
.revolution .btn{display:none}
.page-header .pull-left,.page-header .pull-right{float:none;margin-bottom:10px;}
.navigation .pull-left,.navigation .pull-right{float:none;display:block;margin:0 0 10px 0 !important;}
.media-wrapper.portfolio{margin-bottom:30px}
.map iframe{height:300px !important}
}
@media (max-width:480px){.media-icons .media .pull-left{float:left}
.classic-blog .post{width:100%;}
.media-icons .media .pull-right{float:right}
.contact-info li{display:block}
.media > .pull-left{margin-right:0;}
}
/*-----------------------------------------------------------------------------------*/
/*DEMO ONLY/*-----------------------------------------------------------------------------------*/
a.changecolor,a.changebg{cursor:pointer;}
分享到QQ
分享到微博
微信扫一扫
