@ -0,0 +1,216 @@ | |||
/* ++++++++++++ | |||
COLOR STYLE | |||
++++++++++++ */ | |||
span.highlight-texts{ | |||
color: #FFF; | |||
} | |||
span.highlight-text{ | |||
color: #111; | |||
} | |||
span.highlight-text-inverted{ | |||
color: #fff; | |||
} | |||
.button-solid{ | |||
background-color: #111111; | |||
} | |||
.button-solid:hover{ | |||
} | |||
.button-outline-light:hover{ | |||
background-color: #111111; | |||
} | |||
.button-outline-dark:hover{ | |||
background-color: #111111; | |||
} | |||
.button-outline-round-dark:hover{ | |||
background-color: #111111; | |||
} | |||
.btn-round{ | |||
background-color: #111111; | |||
} | |||
.btn-round:hover{ | |||
} | |||
.button-outline-round:hover{ | |||
} | |||
.blurb-icon-only i{ | |||
color: #111111; | |||
} | |||
.blurb-icon-only h3{ | |||
color: #111111 | |||
} | |||
.blurb-round-icon:hover .icon{ | |||
background-color: #111111; | |||
} | |||
.blurb-icon-left-square .icon:hover { | |||
background-color: #111111; | |||
} | |||
.blurb-round-icon:hover h3{ | |||
color: #FFF; | |||
} | |||
.blurb-icon-left-square:hover .blurb-text h3{ | |||
color: #111111; | |||
} | |||
.blurb-icon-left-square:hover .blurb-text h3:after{ | |||
background-color: #111111; | |||
} | |||
.main-menu .navbar-nav li a:hover, | |||
.main-menu .navbar-nav li.active a{ | |||
color: #c3c3c3; | |||
} | |||
.black-ed p{ | |||
color:#111; | |||
} | |||
.slider .sp-selected-button { | |||
background-color: #FFF; | |||
} | |||
.member-details h3{ | |||
color: #111111; | |||
} | |||
#scrollUp:hover { | |||
background-color: #111111; | |||
} | |||
/* --------- Featured Work ---------- */ | |||
.port-work-details .port-work-desc p a:hover{ | |||
color: #111111; | |||
} | |||
.port-work-details .port-work-desc h3{ | |||
color: #111111; | |||
} | |||
.port-work-details .port-work-desc .like-btn a:hover{ | |||
color: #111111; | |||
} | |||
.port-work-details .port-work-desc .like-btn a:hover i{ | |||
color: #111111; | |||
} | |||
.work-meta a { | |||
color: #111111; | |||
font-size: 45px; | |||
padding-top: 35px; | |||
} | |||
/* --------- Portfolio Style -----------*/ | |||
.portfolio-filter-btn-group ul li a.selected{ | |||
background-color: #089EF5; | |||
} | |||
.portfolio-item .portfolio-details h3{ | |||
color: #111111; | |||
} | |||
.portfolio-item .portfolio-details p a:hover{ | |||
color: #111111; | |||
} | |||
.portfolio-btn-wrapper a.portfolio-btn:hover{ | |||
color: #ffffff; | |||
background-color: #111111; | |||
border: 2px solid transparent; | |||
} | |||
.portfolio-details .portfolio-meta-btn ul li:hover { | |||
} | |||
.blurb-round-icon:hover { | |||
background-color: #323232; | |||
} | |||
.blurb-round-icon:hover .blurb-round-icon p:before{ | |||
color: #FFF !important; | |||
} | |||
.portfolio-filter-btn-group ul li a { | |||
border: 1px solid #089EF5; | |||
margin: 2px; | |||
color: #089EF5; | |||
} | |||
.custom-sec-text ul li i{ | |||
color: #111111; | |||
} | |||
.process-item:hover h3{ | |||
color: #111111; | |||
} | |||
.pricing-titles { | |||
background-color: #111111; | |||
padding: 20px; | |||
padding-top: 40px; | |||
} | |||
.pricing-plans a.signup-btn { | |||
background-color: #111111; | |||
} | |||
.pricing-plans a.signup-btn:hover{ | |||
opacity: 0.6; | |||
} | |||
.owl-theme .owl-controls .owl-page span { | |||
border: 1px solid #111111; | |||
} | |||
.owl-theme .owl-controls .owl-page.active span { | |||
background-color: #111111; | |||
} | |||
.footer-social-info li:hover { | |||
background-color: #111111; | |||
} | |||
/* ------- Contact Style ------ */ | |||
.contact-section .contact-form input[type="submit"] { | |||
background-color: #111111; | |||
} | |||
.contact-section .contact-form input[type="submit"]:hover { | |||
opacity: 0.6; | |||
} | |||
.contact-section .contact-address ul li i { | |||
background-color: #111111; | |||
} | |||
.contact-details i { | |||
color: #111111; | |||
} | |||
.hoverer:hover .pricing-titles{ | |||
background-color: #c9c9c9; | |||
} | |||
.hoverer:hover .pricing-titles h2{ | |||
color: #111; | |||
} | |||
.hoverer:hover .pricing-service-name{ | |||
background-color: #F0F0F0; | |||
} | |||
.hoverer:hover .bg-btn { | |||
background-color:#F0F0F0; | |||
} | |||
.hoverer:hover .pricing-service-name ul li{ | |||
color:#111; | |||
} |
@ -0,0 +1,375 @@ | |||
/* Magnific Popup CSS */ | |||
.mfp-bg { | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 1042; | |||
overflow: hidden; | |||
position: fixed; | |||
background: #0b0b0b; | |||
opacity: 0.8; | |||
filter: alpha(opacity=80); } | |||
.mfp-wrap { | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 1043; | |||
position: fixed; | |||
outline: none !important; | |||
-webkit-backface-visibility: hidden; } | |||
.mfp-container { | |||
text-align: center; | |||
position: absolute; | |||
width: 100%; | |||
height: 100%; | |||
left: 0; | |||
top: 0; | |||
padding: 0 8px; | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; } | |||
.mfp-container:before { | |||
content: ''; | |||
display: inline-block; | |||
height: 100%; | |||
vertical-align: middle; } | |||
.mfp-align-top .mfp-container:before { | |||
display: none; } | |||
.mfp-content { | |||
position: relative; | |||
display: inline-block; | |||
vertical-align: middle; | |||
margin: 0 auto; | |||
text-align: left; | |||
z-index: 1045; } | |||
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { | |||
width: 100%; | |||
cursor: auto; } | |||
.mfp-ajax-cur { | |||
cursor: progress; } | |||
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { | |||
cursor: -moz-zoom-out; | |||
cursor: -webkit-zoom-out; | |||
cursor: auto; | |||
} | |||
.mfp-zoom { | |||
cursor: pointer; | |||
cursor: -webkit-zoom-in; | |||
cursor: -moz-zoom-in; | |||
cursor: zoom-in; } | |||
.mfp-auto-cursor .mfp-content { | |||
cursor: auto; } | |||
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
user-select: none; } | |||
.mfp-loading.mfp-figure { | |||
display: none; } | |||
.mfp-hide { | |||
display: none !important; } | |||
.mfp-preloader { | |||
color: #CCC; | |||
position: absolute; | |||
top: 50%; | |||
width: auto; | |||
text-align: center; | |||
margin-top: -0.8em; | |||
left: 8px; | |||
right: 8px; | |||
z-index: 1044; } | |||
.mfp-preloader a { | |||
color: #CCC; } | |||
.mfp-preloader a:hover { | |||
color: #FFF; } | |||
.mfp-s-ready .mfp-preloader { | |||
display: none; } | |||
.mfp-s-error .mfp-content { | |||
display: none; } | |||
button.mfp-close, button.mfp-arrow { | |||
overflow: visible; | |||
cursor: pointer; | |||
background: transparent; | |||
border: 0; | |||
-webkit-appearance: none; | |||
display: block; | |||
outline: none; | |||
padding: 0; | |||
z-index: 1046; | |||
-webkit-box-shadow: none; | |||
box-shadow: none; } | |||
button::-moz-focus-inner { | |||
padding: 0; | |||
border: 0; } | |||
.mfp-close { | |||
width: 44px; | |||
height: 44px; | |||
line-height: 44px; | |||
position: absolute; | |||
right: 0; | |||
top: 0; | |||
text-decoration: none; | |||
text-align: center; | |||
opacity: 0.65; | |||
filter: alpha(opacity=65); | |||
padding: 0 0 18px 10px; | |||
color: #FFF; | |||
font-style: normal; | |||
font-size: 28px; | |||
font-family: Arial, Baskerville, monospace; } | |||
.mfp-close:hover, .mfp-close:focus { | |||
opacity: 1; | |||
filter: alpha(opacity=100); } | |||
.mfp-close:active { | |||
top: 1px; } | |||
.mfp-close-btn-in .mfp-close { | |||
color: #333; } | |||
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { | |||
color: #FFF; | |||
right: -6px; | |||
text-align: right; | |||
padding-right: 6px; | |||
width: 100%; } | |||
.mfp-counter { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
color: #CCC; | |||
font-size: 12px; | |||
line-height: 18px; | |||
white-space: nowrap; } | |||
.mfp-arrow { | |||
position: absolute; | |||
opacity: 0.65; | |||
filter: alpha(opacity=65); | |||
margin: 0; | |||
top: 50%; | |||
margin-top: -55px; | |||
padding: 0; | |||
width: 90px; | |||
height: 110px; | |||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); } | |||
.mfp-arrow:active { | |||
margin-top: -54px; } | |||
.mfp-arrow:hover, .mfp-arrow:focus { | |||
opacity: 1; | |||
filter: alpha(opacity=100); } | |||
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { | |||
content: ''; | |||
display: block; | |||
width: 0; | |||
height: 0; | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
margin-top: 35px; | |||
margin-left: 35px; | |||
border: medium inset transparent; } | |||
.mfp-arrow:after, .mfp-arrow .mfp-a { | |||
border-top-width: 13px; | |||
border-bottom-width: 13px; | |||
top: 8px; } | |||
.mfp-arrow:before, .mfp-arrow .mfp-b { | |||
border-top-width: 21px; | |||
border-bottom-width: 21px; | |||
opacity: 0.7; } | |||
.mfp-arrow-left { | |||
left: 0; } | |||
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a { | |||
border-right: 17px solid #FFF; | |||
margin-left: 31px; } | |||
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b { | |||
margin-left: 25px; | |||
border-right: 27px solid #3F3F3F; } | |||
.mfp-arrow-right { | |||
right: 0; } | |||
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a { | |||
border-left: 17px solid #FFF; | |||
margin-left: 39px; } | |||
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b { | |||
border-left: 27px solid #3F3F3F; } | |||
.mfp-iframe-holder { | |||
padding-top: 40px; | |||
padding-bottom: 40px; } | |||
.mfp-iframe-holder .mfp-content { | |||
line-height: 0; | |||
width: 100%; | |||
max-width: 900px; } | |||
.mfp-iframe-holder .mfp-close { | |||
top: -40px; } | |||
.mfp-iframe-scaler { | |||
width: 100%; | |||
height: 0; | |||
overflow: hidden; | |||
padding-top: 56.25%; } | |||
.mfp-iframe-scaler iframe { | |||
position: absolute; | |||
display: block; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | |||
background: #000; } | |||
/* Main image in popup */ | |||
img.mfp-img { | |||
width: auto; | |||
max-width: 100%; | |||
height: auto; | |||
display: block; | |||
line-height: 0; | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
padding: 40px 0 40px; | |||
margin: 0 auto; } | |||
/* The shadow behind the image */ | |||
.mfp-figure { | |||
line-height: 0; } | |||
.mfp-figure:after { | |||
content: ''; | |||
position: absolute; | |||
left: 0; | |||
top: 40px; | |||
bottom: 40px; | |||
display: block; | |||
right: 0; | |||
width: auto; | |||
height: auto; | |||
z-index: -1; | |||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); | |||
background: #444; } | |||
.mfp-figure small { | |||
color: #BDBDBD; | |||
display: block; | |||
font-size: 12px; | |||
line-height: 14px; } | |||
.mfp-figure figure { | |||
margin: 0; } | |||
.mfp-bottom-bar { | |||
margin-top: -36px; | |||
position: absolute; | |||
top: 100%; | |||
left: 0; | |||
width: 100%; | |||
cursor: auto; } | |||
.mfp-title { | |||
text-align: left; | |||
line-height: 18px; | |||
color: #F3F3F3; | |||
word-wrap: break-word; | |||
padding-right: 36px; } | |||
.mfp-image-holder .mfp-content { | |||
max-width: 100%; } | |||
.mfp-gallery .mfp-image-holder .mfp-figure { | |||
cursor: pointer; } | |||
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { | |||
/** | |||
* Remove all paddings around the image on small screen | |||
*/ | |||
.mfp-img-mobile .mfp-image-holder { | |||
padding-left: 0; | |||
padding-right: 0; } | |||
.mfp-img-mobile img.mfp-img { | |||
padding: 0; } | |||
.mfp-img-mobile .mfp-figure:after { | |||
top: 0; | |||
bottom: 0; } | |||
.mfp-img-mobile .mfp-figure small { | |||
display: inline; | |||
margin-left: 5px; } | |||
.mfp-img-mobile .mfp-bottom-bar { | |||
background: rgba(0, 0, 0, 0.6); | |||
bottom: 0; | |||
margin: 0; | |||
top: auto; | |||
padding: 3px 5px; | |||
position: fixed; | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; } | |||
.mfp-img-mobile .mfp-bottom-bar:empty { | |||
padding: 0; } | |||
.mfp-img-mobile .mfp-counter { | |||
right: 5px; | |||
top: 3px; } | |||
.mfp-img-mobile .mfp-close { | |||
top: 0; | |||
right: 0; | |||
width: 35px; | |||
height: 35px; | |||
line-height: 35px; | |||
background: rgba(0, 0, 0, 0.6); | |||
position: fixed; | |||
text-align: center; | |||
padding: 0; } | |||
} | |||
@media all and (max-width: 900px) { | |||
.mfp-arrow { | |||
-webkit-transform: scale(0.75); | |||
transform: scale(0.75); } | |||
.mfp-arrow-left { | |||
-webkit-transform-origin: 0; | |||
transform-origin: 0; } | |||
.mfp-arrow-right { | |||
-webkit-transform-origin: 100%; | |||
transform-origin: 100%; } | |||
.mfp-container { | |||
padding-left: 6px; | |||
padding-right: 6px; } | |||
} | |||
.mfp-ie7 .mfp-img { | |||
padding: 0; } | |||
.mfp-ie7 .mfp-bottom-bar { | |||
width: 600px; | |||
left: 50%; | |||
margin-left: -300px; | |||
margin-top: 5px; | |||
padding-bottom: 5px; } | |||
.mfp-ie7 .mfp-container { | |||
padding: 0; } | |||
.mfp-ie7 .mfp-content { | |||
padding-top: 44px; } | |||
.mfp-ie7 .mfp-close { | |||
top: 0; | |||
right: 0; | |||
padding-top: 0; } |
@ -0,0 +1,424 @@ | |||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ | |||
/** | |||
* 1. Set default font family to sans-serif. | |||
* 2. Prevent iOS and IE text size adjust after device orientation change, | |||
* without disabling user zoom. | |||
*/ | |||
html { | |||
font-family: sans-serif; /* 1 */ | |||
-ms-text-size-adjust: 100%; /* 2 */ | |||
-webkit-text-size-adjust: 100%; /* 2 */ | |||
} | |||
/** | |||
* Remove default margin. | |||
*/ | |||
body { | |||
margin: 0; | |||
} | |||
/* HTML5 display definitions | |||
========================================================================== */ | |||
/** | |||
* Correct `block` display not defined for any HTML5 element in IE 8/9. | |||
* Correct `block` display not defined for `details` or `summary` in IE 10/11 | |||
* and Firefox. | |||
* Correct `block` display not defined for `main` in IE 11. | |||
*/ | |||
article, | |||
aside, | |||
details, | |||
figcaption, | |||
figure, | |||
footer, | |||
header, | |||
hgroup, | |||
main, | |||
menu, | |||
nav, | |||
section, | |||
summary { | |||
display: block; | |||
} | |||
/** | |||
* 1. Correct `inline-block` display not defined in IE 8/9. | |||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. | |||
*/ | |||
audio, | |||
canvas, | |||
progress, | |||
video { | |||
display: inline-block; /* 1 */ | |||
vertical-align: baseline; /* 2 */ | |||
} | |||
/** | |||
* Prevent modern browsers from displaying `audio` without controls. | |||
* Remove excess height in iOS 5 devices. | |||
*/ | |||
audio:not([controls]) { | |||
display: none; | |||
height: 0; | |||
} | |||
/** | |||
* Address `[hidden]` styling not present in IE 8/9/10. | |||
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. | |||
*/ | |||
[hidden], | |||
template { | |||
display: none; | |||
} | |||
/* Links | |||
========================================================================== */ | |||
/** | |||
* Remove the gray background color from active links in IE 10. | |||
*/ | |||
a { | |||
background-color: transparent; | |||
} | |||
/** | |||
* Improve readability of focused elements when they are also in an | |||
* active/hover state. | |||
*/ | |||
a:active, | |||
a:hover { | |||
outline: 0; | |||
} | |||
/* Text-level semantics | |||
========================================================================== */ | |||
/** | |||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome. | |||
*/ | |||
abbr[title] { | |||
border-bottom: 1px dotted; | |||
} | |||
/** | |||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome. | |||
*/ | |||
b, | |||
strong { | |||
font-weight: bold; | |||
} | |||
/** | |||
* Address styling not present in Safari and Chrome. | |||
*/ | |||
dfn { | |||
font-style: italic; | |||
} | |||
/** | |||
* Address variable `h1` font-size and margin within `section` and `article` | |||
* contexts in Firefox 4+, Safari, and Chrome. | |||
*/ | |||
h1 { | |||
font-size: 2em; | |||
margin: 0.67em 0; | |||
} | |||
/** | |||
* Address styling not present in IE 8/9. | |||
*/ | |||
mark { | |||
background: #ff0; | |||
color: #000; | |||
} | |||
/** | |||
* Address inconsistent and variable font size in all browsers. | |||
*/ | |||
small { | |||
font-size: 80%; | |||
} | |||
/** | |||
* Prevent `sub` and `sup` affecting `line-height` in all browsers. | |||
*/ | |||
sub, | |||
sup { | |||
font-size: 75%; | |||
line-height: 0; | |||
position: relative; | |||
vertical-align: baseline; | |||
} | |||
sup { | |||
top: -0.5em; | |||
} | |||
sub { | |||
bottom: -0.25em; | |||
} | |||
/* Embedded content | |||
========================================================================== */ | |||
/** | |||
* Remove border when inside `a` element in IE 8/9/10. | |||
*/ | |||
img { | |||
border: 0; | |||
} | |||
/** | |||
* Correct overflow not hidden in IE 9/10/11. | |||
*/ | |||
svg:not(:root) { | |||
overflow: hidden; | |||
} | |||
/* Grouping content | |||
========================================================================== */ | |||
/** | |||
* Address margin not present in IE 8/9 and Safari. | |||
*/ | |||
figure { | |||
margin: 1em 40px; | |||
} | |||
/** | |||
* Address differences between Firefox and other browsers. | |||
*/ | |||
hr { | |||
box-sizing: content-box; | |||
height: 0; | |||
} | |||
/** | |||
* Contain overflow in all browsers. | |||
*/ | |||
pre { | |||
overflow: auto; | |||
} | |||
/** | |||
* Address odd `em`-unit font size rendering in all browsers. | |||
*/ | |||
code, | |||
kbd, | |||
pre, | |||
samp { | |||
font-family: monospace, monospace; | |||
font-size: 1em; | |||
} | |||
/* Forms | |||
========================================================================== */ | |||
/** | |||
* Known limitation: by default, Chrome and Safari on OS X allow very limited | |||
* styling of `select`, unless a `border` property is set. | |||
*/ | |||
/** | |||
* 1. Correct color not being inherited. | |||
* Known issue: affects color of disabled elements. | |||
* 2. Correct font properties not being inherited. | |||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome. | |||
*/ | |||
button, | |||
input, | |||
optgroup, | |||
select, | |||
textarea { | |||
color: inherit; /* 1 */ | |||
font: inherit; /* 2 */ | |||
margin: 0; /* 3 */ | |||
} | |||
/** | |||
* Address `overflow` set to `hidden` in IE 8/9/10/11. | |||
*/ | |||
button { | |||
overflow: visible; | |||
} | |||
/** | |||
* Address inconsistent `text-transform` inheritance for `button` and `select`. | |||
* All other form control elements do not inherit `text-transform` values. | |||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. | |||
* Correct `select` style inheritance in Firefox. | |||
*/ | |||
button, | |||
select { | |||
text-transform: none; | |||
} | |||
/** | |||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | |||
* and `video` controls. | |||
* 2. Correct inability to style clickable `input` types in iOS. | |||
* 3. Improve usability and consistency of cursor style between image-type | |||
* `input` and others. | |||
*/ | |||
button, | |||
html input[type="button"], /* 1 */ | |||
input[type="reset"], | |||
input[type="submit"] { | |||
-webkit-appearance: button; /* 2 */ | |||
cursor: pointer; /* 3 */ | |||
} | |||
/** | |||
* Re-set default cursor for disabled elements. | |||
*/ | |||
button[disabled], | |||
html input[disabled] { | |||
cursor: default; | |||
} | |||
/** | |||
* Remove inner padding and border in Firefox 4+. | |||
*/ | |||
button::-moz-focus-inner, | |||
input::-moz-focus-inner { | |||
border: 0; | |||
padding: 0; | |||
} | |||
/** | |||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in | |||
* the UA stylesheet. | |||
*/ | |||
input { | |||
line-height: normal; | |||
} | |||
/** | |||
* It's recommended that you don't attempt to style these elements. | |||
* Firefox's implementation doesn't respect box-sizing, padding, or width. | |||
* | |||
* 1. Address box sizing set to `content-box` in IE 8/9/10. | |||
* 2. Remove excess padding in IE 8/9/10. | |||
*/ | |||
input[type="checkbox"], | |||
input[type="radio"] { | |||
box-sizing: border-box; /* 1 */ | |||
padding: 0; /* 2 */ | |||
} | |||
/** | |||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain | |||
* `font-size` values of the `input`, it causes the cursor style of the | |||
* decrement button to change from `default` to `text`. | |||
*/ | |||
input[type="number"]::-webkit-inner-spin-button, | |||
input[type="number"]::-webkit-outer-spin-button { | |||
height: auto; | |||
} | |||
/** | |||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome. | |||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome. | |||
*/ | |||
input[type="search"] { | |||
-webkit-appearance: textfield; /* 1 */ | |||
box-sizing: content-box; /* 2 */ | |||
} | |||
/** | |||
* Remove inner padding and search cancel button in Safari and Chrome on OS X. | |||
* Safari (but not Chrome) clips the cancel button when the search input has | |||
* padding (and `textfield` appearance). | |||
*/ | |||
input[type="search"]::-webkit-search-cancel-button, | |||
input[type="search"]::-webkit-search-decoration { | |||
-webkit-appearance: none; | |||
} | |||
/** | |||
* Define consistent border, margin, and padding. | |||
*/ | |||
fieldset { | |||
border: 1px solid #c0c0c0; | |||
margin: 0 2px; | |||
padding: 0.35em 0.625em 0.75em; | |||
} | |||
/** | |||
* 1. Correct `color` not being inherited in IE 8/9/10/11. | |||
* 2. Remove padding so people aren't caught out if they zero out fieldsets. | |||
*/ | |||
legend { | |||
border: 0; /* 1 */ | |||
padding: 0; /* 2 */ | |||
} | |||
/** | |||
* Remove default vertical scrollbar in IE 8/9/10/11. | |||
*/ | |||
textarea { | |||
overflow: auto; | |||
} | |||
/** | |||
* Don't inherit the `font-weight` (applied by a rule above). | |||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X. | |||
*/ | |||
optgroup { | |||
font-weight: bold; | |||
} | |||
/* Tables | |||
========================================================================== */ | |||
/** | |||
* Remove most spacing between table cells. | |||
*/ | |||
table { | |||
border-collapse: collapse; | |||
border-spacing: 0; | |||
} | |||
td, | |||
th { | |||
padding: 0; | |||
} |
@ -0,0 +1,71 @@ | |||
/* | |||
* Core Owl Carousel CSS File | |||
* v1.3.3 | |||
*/ | |||
/* clearfix */ | |||
.owl-carousel .owl-wrapper:after { | |||
content: "."; | |||
display: block; | |||
clear: both; | |||
visibility: hidden; | |||
line-height: 0; | |||
height: 0; | |||
} | |||
/* display none until init */ | |||
.owl-carousel{ | |||
display: none; | |||
position: relative; | |||
width: 100%; | |||
-ms-touch-action: pan-y; | |||
} | |||
.owl-carousel .owl-wrapper{ | |||
display: none; | |||
position: relative; | |||
-webkit-transform: translate3d(0px, 0px, 0px); | |||
} | |||
.owl-carousel .owl-wrapper-outer{ | |||
overflow: hidden; | |||
position: relative; | |||
width: 100%; | |||
} | |||
.owl-carousel .owl-wrapper-outer.autoHeight{ | |||
-webkit-transition: height 500ms ease-in-out; | |||
-moz-transition: height 500ms ease-in-out; | |||
-ms-transition: height 500ms ease-in-out; | |||
-o-transition: height 500ms ease-in-out; | |||
transition: height 500ms ease-in-out; | |||
} | |||
.owl-carousel .owl-item{ | |||
float: left; | |||
} | |||
.owl-controls .owl-page, | |||
.owl-controls .owl-buttons div{ | |||
cursor: pointer; | |||
} | |||
.owl-controls { | |||
-webkit-user-select: none; | |||
-khtml-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |||
} | |||
/* mouse grab icon */ | |||
.grabbing { | |||
cursor:url(grabbing.png) 8 8, move; | |||
} | |||
/* fix */ | |||
.owl-carousel .owl-wrapper, | |||
.owl-carousel .owl-item{ | |||
-webkit-backface-visibility: hidden; | |||
-moz-backface-visibility: hidden; | |||
-ms-backface-visibility: hidden; | |||
-webkit-transform: translate3d(0,0,0); | |||
-moz-transform: translate3d(0,0,0); | |||
-ms-transform: translate3d(0,0,0); | |||
} | |||
@ -0,0 +1,79 @@ | |||
/* | |||
* Owl Carousel Owl Demo Theme | |||
* v1.3.3 | |||
*/ | |||
.owl-theme .owl-controls{ | |||
margin-top: 10px; | |||
text-align: center; | |||
} | |||
/* Styling Next and Prev buttons */ | |||
.owl-theme .owl-controls .owl-buttons div{ | |||
color: #FFF; | |||
display: inline-block; | |||
zoom: 1; | |||
*display: inline;/*IE7 life-saver */ | |||
margin: 5px; | |||
padding: 3px 10px; | |||
font-size: 12px; | |||
-webkit-border-radius: 30px; | |||
-moz-border-radius: 30px; | |||
border-radius: 30px; | |||
background: #869791; | |||
filter: Alpha(Opacity=50);/*IE7 fix*/ | |||
opacity: 0.5; | |||
} | |||
/* Clickable class fix problem with hover on touch devices */ | |||
/* Use it for non-touch hover action */ | |||
.owl-theme .owl-controls.clickable .owl-buttons div:hover{ | |||
filter: Alpha(Opacity=100);/*IE7 fix*/ | |||
opacity: 1; | |||
text-decoration: none; | |||
} | |||
/* Styling Pagination*/ | |||
.owl-theme .owl-controls .owl-page{ | |||
display: inline-block; | |||
zoom: 1; | |||
*display: inline;/*IE7 life-saver */ | |||
} | |||
.owl-theme .owl-controls .owl-page span{ | |||
display: block; | |||
width: 12px; | |||
height: 12px; | |||
margin: 5px 7px; | |||
filter: Alpha(Opacity=50);/*IE7 fix*/ | |||
opacity: 0.5; | |||
-webkit-border-radius: 20px; | |||
-moz-border-radius: 20px; | |||
border-radius: 20px; | |||
background: #869791; | |||
} | |||
.owl-theme .owl-controls .owl-page.active span, | |||
.owl-theme .owl-controls.clickable .owl-page:hover span{ | |||
filter: Alpha(Opacity=100);/*IE7 fix*/ | |||
opacity: 1; | |||
} | |||
/* If PaginationNumbers is true */ | |||
.owl-theme .owl-controls .owl-page span.owl-numbers{ | |||
height: auto; | |||
width: auto; | |||
color: #FFF; | |||
padding: 2px 10px; | |||
font-size: 12px; | |||
-webkit-border-radius: 30px; | |||
-moz-border-radius: 30px; | |||
border-radius: 30px; | |||
} | |||
/* preloading images */ | |||
.owl-item.loading{ | |||
min-height: 150px; | |||
background: url(AjaxLoader.gif) no-repeat center center | |||
} |
@ -0,0 +1,163 @@ | |||
/* | |||
* Owl Carousel CSS3 Transitions | |||
* v1.3.2 | |||
*/ | |||
.owl-origin { | |||
-webkit-perspective: 1200px; | |||
-webkit-perspective-origin-x : 50%; | |||
-webkit-perspective-origin-y : 50%; | |||
-moz-perspective : 1200px; | |||
-moz-perspective-origin-x : 50%; | |||
-moz-perspective-origin-y : 50%; | |||
perspective : 1200px; | |||
} | |||
/* fade */ | |||
.owl-fade-out { | |||
z-index: 10; | |||
-webkit-animation: fadeOut .7s both ease; | |||
-moz-animation: fadeOut .7s both ease; | |||
animation: fadeOut .7s both ease; | |||
} | |||
.owl-fade-in { | |||
-webkit-animation: fadeIn .7s both ease; | |||
-moz-animation: fadeIn .7s both ease; | |||
animation: fadeIn .7s both ease; | |||
} | |||
/* backSlide */ | |||
.owl-backSlide-out { | |||
-webkit-animation: backSlideOut 1s both ease; | |||
-moz-animation: backSlideOut 1s both ease; | |||
animation: backSlideOut 1s both ease; | |||
} | |||
.owl-backSlide-in { | |||
-webkit-animation: backSlideIn 1s both ease; | |||
-moz-animation: backSlideIn 1s both ease; | |||
animation: backSlideIn 1s both ease; | |||
} | |||
/* goDown */ | |||
.owl-goDown-out { | |||
-webkit-animation: scaleToFade .7s ease both; | |||
-moz-animation: scaleToFade .7s ease both; | |||
animation: scaleToFade .7s ease both; | |||
} | |||
.owl-goDown-in { | |||
-webkit-animation: goDown .6s ease both; | |||
-moz-animation: goDown .6s ease both; | |||
animation: goDown .6s ease both; | |||
} | |||
/* scaleUp */ | |||
.owl-fadeUp-in { | |||
-webkit-animation: scaleUpFrom .5s ease both; | |||
-moz-animation: scaleUpFrom .5s ease both; | |||
animation: scaleUpFrom .5s ease both; | |||
} | |||
.owl-fadeUp-out { | |||
-webkit-animation: scaleUpTo .5s ease both; | |||
-moz-animation: scaleUpTo .5s ease both; | |||
animation: scaleUpTo .5s ease both; | |||
} | |||
/* Keyframes */ | |||
/*empty*/ | |||
@-webkit-keyframes empty { | |||
0% {opacity: 1} | |||
} | |||
@-moz-keyframes empty { | |||
0% {opacity: 1} | |||
} | |||
@keyframes empty { | |||
0% {opacity: 1} | |||
} | |||
@-webkit-keyframes fadeIn { | |||
0% { opacity:0; } | |||
100% { opacity:1; } | |||
} | |||
@-moz-keyframes fadeIn { | |||
0% { opacity:0; } | |||
100% { opacity:1; } | |||
} | |||
@keyframes fadeIn { | |||
0% { opacity:0; } | |||
100% { opacity:1; } | |||
} | |||
@-webkit-keyframes fadeOut { | |||
0% { opacity:1; } | |||
100% { opacity:0; } | |||
} | |||
@-moz-keyframes fadeOut { | |||
0% { opacity:1; } | |||
100% { opacity:0; } | |||
} | |||
@keyframes fadeOut { | |||
0% { opacity:1; } | |||
100% { opacity:0; } | |||
} | |||
@-webkit-keyframes backSlideOut { | |||
25% { opacity: .5; -webkit-transform: translateZ(-500px); } | |||
75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } | |||
100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } | |||
} | |||
@-moz-keyframes backSlideOut { | |||
25% { opacity: .5; -moz-transform: translateZ(-500px); } | |||
75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } | |||
100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } | |||
} | |||
@keyframes backSlideOut { | |||
25% { opacity: .5; transform: translateZ(-500px); } | |||
75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } | |||
100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } | |||
} | |||
@-webkit-keyframes backSlideIn { | |||
0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } | |||
75% { opacity: .5; -webkit-transform: translateZ(-500px); } | |||
100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } | |||
} | |||
@-moz-keyframes backSlideIn { | |||
0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } | |||
75% { opacity: .5; -moz-transform: translateZ(-500px); } | |||
100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } | |||
} | |||
@keyframes backSlideIn { | |||
0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } | |||
75% { opacity: .5; transform: translateZ(-500px); } | |||
100% { opacity: 1; transform: translateZ(0) translateX(0); } | |||
} | |||
@-webkit-keyframes scaleToFade { | |||
to { opacity: 0; -webkit-transform: scale(.8); } | |||
} | |||
@-moz-keyframes scaleToFade { | |||
to { opacity: 0; -moz-transform: scale(.8); } | |||
} | |||
@keyframes scaleToFade { | |||
to { opacity: 0; transform: scale(.8); } | |||
} | |||
@-webkit-keyframes goDown { | |||
from { -webkit-transform: translateY(-100%); } | |||
} | |||
@-moz-keyframes goDown { | |||
from { -moz-transform: translateY(-100%); } | |||
} | |||
@keyframes goDown { | |||
from { transform: translateY(-100%); } | |||
} | |||
@-webkit-keyframes scaleUpFrom { | |||
from { opacity: 0; -webkit-transform: scale(1.5); } | |||
} | |||
@-moz-keyframes scaleUpFrom { | |||
from { opacity: 0; -moz-transform: scale(1.5); } | |||
} | |||
@keyframes scaleUpFrom { | |||
from { opacity: 0; transform: scale(1.5); } | |||
} | |||
@-webkit-keyframes scaleUpTo { | |||
to { opacity: 0; -webkit-transform: scale(1.5); } | |||
} | |||
@-moz-keyframes scaleUpTo { | |||
to { opacity: 0; -moz-transform: scale(1.5); } | |||
} | |||
@keyframes scaleUpTo { | |||
to { opacity: 0; transform: scale(1.5); } | |||
} |
@ -0,0 +1,827 @@ | |||
/*! | |||
* - v1.2.1 | |||
* Homepage: http://bqworks.com/slider-pro/ | |||
* Author: bqworks | |||
* Author URL: http://bqworks.com/ | |||
*/ | |||
/* Core | |||
--------------------------------------------------*/ | |||
.slider-pro { | |||
position: relative; | |||
margin: 0 auto; | |||
-moz-box-sizing: content-box; | |||
box-sizing: content-box; | |||
} | |||
.sp-slides-container { | |||
position: relative; | |||
} | |||
.sp-mask { | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.sp-slides { | |||
position: relative; | |||
-webkit-backface-visibility: hidden; | |||
-webkit-perspective: 1000; | |||
} | |||
.sp-slide { | |||
position: absolute; | |||
text-align: center; | |||
background: red; | |||
} | |||
.sp-image-container { | |||
overflow: hidden; | |||
} | |||
.sp-image { | |||
position: relative; | |||
display: block; | |||
border: none; | |||
} | |||
.sp-no-js { | |||
overflow: hidden; | |||
max-width: 100%; | |||
} | |||
/* Thumbnails | |||
--------------------------------------------------*/ | |||
.sp-thumbnails-container { | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.sp-top-thumbnails, | |||
.sp-bottom-thumbnails { | |||
left: 0; | |||
margin: 0 auto; | |||
} | |||
.sp-top-thumbnails { | |||
position: absolute; | |||
top: 0; | |||
margin-bottom: 4px; | |||
} | |||
.sp-bottom-thumbnails { | |||
margin-top: 4px; | |||
} | |||
.sp-left-thumbnails, | |||
.sp-right-thumbnails { | |||
position: absolute; | |||
top: 0; | |||
} | |||
.sp-right-thumbnails { | |||
right: 0; | |||
margin-left: 4px; | |||
} | |||
.sp-left-thumbnails { | |||
left: 0; | |||
margin-right: 4px; | |||
} | |||
.sp-thumbnails { | |||
position: relative; | |||
} | |||
.sp-thumbnail { | |||
border: none; | |||
} | |||
.sp-thumbnail-container { | |||
position: relative; | |||
display: block; | |||
overflow: hidden; | |||
float: left; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box; | |||
} | |||
/* Horizontal thumbnails | |||
------------------------*/ | |||
.sp-top-thumbnails .sp-thumbnail-container, | |||
.sp-bottom-thumbnails .sp-thumbnail-container { | |||
margin-left: 2px; | |||
margin-right: 2px; | |||
} | |||
.sp-top-thumbnails .sp-thumbnail-container:first-child, | |||
.sp-bottom-thumbnails .sp-thumbnail-container:first-child { | |||
margin-left: 0; | |||
} | |||
.sp-top-thumbnails .sp-thumbnail-container:last-child, | |||
.sp-bottom-thumbnails .sp-thumbnail-container:last-child { | |||
margin-right: 0; | |||
} | |||
/* Vertical thumbnails | |||
----------------------*/ | |||
.sp-left-thumbnails .sp-thumbnail-container, | |||
.sp-right-thumbnails .sp-thumbnail-container { | |||
margin-top: 2px; | |||
margin-bottom: 2px; | |||
} | |||
.sp-left-thumbnails .sp-thumbnail-container:first-child, | |||
.sp-right-thumbnails .sp-thumbnail-container:first-child { | |||
margin-top: 0; | |||
} | |||
.sp-left-thumbnails .sp-thumbnail-container:last-child, | |||
.sp-right-thumbnails .sp-thumbnail-container:last-child { | |||
margin-bottom: 0; | |||
} | |||
/* Right thumbnails with pointer | |||
--------------------------------*/ | |||
.sp-right-thumbnails.sp-has-pointer { | |||
margin-left: -13px; | |||
} | |||
.sp-right-thumbnails.sp-has-pointer .sp-thumbnail { | |||
position: absolute; | |||
left: 18px; | |||
margin-left: 0 !important; | |||
} | |||
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { | |||
content: ''; | |||
position: absolute; | |||
height: 100%; | |||
border-left: 5px solid #F00; | |||
left: 0; | |||
top: 0; | |||
margin-left: 13px; | |||
} | |||
.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { | |||
content: ''; | |||
position: absolute; | |||
width: 0; | |||
height: 0; | |||
left: 0; | |||
top: 50%; | |||
margin-top: -8px; | |||
border-right: 13px solid #F00; | |||
border-top: 8px solid transparent; | |||
border-bottom: 8px solid transparent; | |||
} | |||
/* Left thumbnails with pointer | |||
-------------------------------*/ | |||
.sp-left-thumbnails.sp-has-pointer { | |||
margin-right: -13px; | |||
} | |||
.sp-left-thumbnails.sp-has-pointer .sp-thumbnail { | |||
position: absolute; | |||
right: 18px; | |||
} | |||
.sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { | |||
content: ''; | |||
position: absolute; | |||
height: 100%; | |||
border-left: 5px solid #F00; | |||
right: 0; | |||
top: 0; | |||
margin-right: 13px; | |||
} | |||
.sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { | |||
content: ''; | |||
position: absolute; | |||
width: 0; | |||
height: 0; | |||
right: 0; | |||
top: 50%; | |||
margin-top: -8px; | |||
border-left: 13px solid #F00; | |||
border-top: 8px solid transparent; | |||
border-bottom: 8px solid transparent; | |||
} | |||
/* Bottom thumbnails with pointer | |||
---------------------------------*/ | |||
.sp-bottom-thumbnails.sp-has-pointer { | |||
margin-top: -13px; | |||
} | |||
.sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail { | |||
position: absolute; | |||
top: 18px; | |||
margin-top: 0 !important; | |||
} | |||
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { | |||
content: ''; | |||
position: absolute; | |||
width: 100%; | |||
border-bottom: 5px solid #F00; | |||
top: 0; | |||
margin-top: 13px; | |||
} | |||
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { | |||
content: ''; | |||
position: absolute; | |||
width: 0; | |||
height: 0; | |||
left: 50%; | |||
top: 0; | |||
margin-left: -8px; | |||
border-bottom: 13px solid #F00; | |||
border-left: 8px solid transparent; | |||
border-right: 8px solid transparent; | |||
} | |||
/* Top thumbnails with pointer | |||
------------------------------*/ | |||
.sp-top-thumbnails.sp-has-pointer { | |||
margin-bottom: -13px; | |||
} | |||
.sp-top-thumbnails.sp-has-pointer .sp-thumbnail { | |||
position: absolute; | |||
bottom: 18px; | |||
} | |||
.sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { | |||
content: ''; | |||
position: absolute; | |||
width: 100%; | |||
border-bottom: 5px solid #F00; | |||
bottom: 0; | |||
margin-bottom: 13px; | |||
} | |||
.sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { | |||
content: ''; | |||
position: absolute; | |||
width: 0; | |||
height: 0; | |||
left: 50%; | |||
bottom: 0; | |||
margin-left: -8px; | |||
border-top: 13px solid #F00; | |||
border-left: 8px solid transparent; | |||
border-right: 8px solid transparent; | |||
} | |||
/* Layers | |||
--------------------------------------------------*/ | |||
.sp-layer { | |||
position: absolute; | |||
margin: 0; | |||
box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
-webkit-box-sizing: border-box; | |||
-webkit-font-smoothing: subpixel-antialiased; | |||
-webkit-backface-visibility: hidden; | |||
} | |||
.sp-black { | |||
color: #FFF; | |||
background: rgb(0, 0, 0); | |||
background: rgba(0, 0, 0, 0.7); | |||
} | |||
.sp-white { | |||
color: #000; | |||
background: rgb(255, 255, 255); | |||
background: rgba(255, 255, 255, 0.7); | |||
} | |||
.sp-rounded { | |||
border-radius: 10px; | |||
} | |||
.sp-padding { | |||
padding: 10px; | |||
} | |||
/* Touch Swipe | |||
--------------------------------------------------*/ | |||
.sp-grab { | |||
cursor: url(images/openhand.cur), move; | |||
} | |||
.sp-grabbing { | |||
cursor: url(images/closedhand.cur), move; | |||
} | |||
.sp-selectable { | |||
cursor: default; | |||
} | |||
/* Caption | |||
--------------------------------------------------*/ | |||
.sp-caption-container { | |||
text-align: center; | |||
margin-top: 10px; | |||
} | |||
/* Full Screen | |||
--------------------------------------------------*/ | |||
.sp-full-screen { | |||
margin: 0 !important; | |||
background-color: #000; | |||
} | |||
.sp-full-screen-button { | |||
position: absolute; | |||
top: 5px; | |||
right: 10px; | |||
font-size: 30px; | |||
line-height: 1; | |||
cursor: pointer; | |||
-webkit-transform: rotate(45deg); | |||
-ms-transform: rotate(45deg); | |||
transform: rotate(45deg); | |||
} | |||
.sp-full-screen-button:before { | |||
content: '\2195'; | |||
} | |||
.sp-fade-full-screen { | |||
opacity: 0; | |||
-webkit-transition: opacity 0.5s; | |||
transition: opacity 0.5s; | |||
} | |||
.slider-pro:hover .sp-fade-full-screen { | |||
opacity: 1; | |||
} | |||
/* Buttons | |||
--------------------------------------------------*/ | |||
.sp-buttons { | |||
position: relative; | |||
width: 100%; | |||
text-align: center; | |||
padding-top: 10px; | |||
} | |||
.sp-button { | |||
width: 10px; | |||
height: 10px; | |||
border: 2px solid #000; | |||
border-radius: 50%; | |||
margin: 4px; | |||
display: inline-block; | |||
-moz-box-sizing: border-box; | |||
-webkit-box-sizing: border-box; | |||
box-sizing: border-box; | |||
cursor: pointer; | |||
} | |||
.sp-selected-button { | |||
background-color: #FFFFFF; | |||
} | |||
@media only screen and (min-width: 768px) and (max-width: 1024px) { | |||
.sp-button { | |||
width: 14px; | |||
height: 14px; | |||
} | |||
} | |||
@media only screen and (min-width: 568px) and (max-width: 768px) { | |||
.sp-button { | |||
width: 16px; | |||
height: 16px; | |||
} | |||
} | |||
@media only screen and (min-width: 320px) and (max-width: 568px) { | |||
.sp-button { | |||
width: 18px; | |||
height: 18px; | |||
} | |||
} | |||
/* Arrows | |||
--------------------------------------------------*/ | |||
.sp-arrows { | |||
position: absolute; | |||
} | |||
.sp-fade-arrows { | |||
opacity: 0; | |||
-webkit-transition: opacity 0.5s; | |||
transition: opacity 0.5s; | |||
} | |||
.sp-slides-container:hover .sp-fade-arrows { | |||
opacity: 1; | |||
} | |||
.sp-horizontal .sp-arrows { | |||
width: 100%; | |||
left: 0; | |||
top: 50%; | |||
margin-top: -15px; | |||
} | |||
.sp-vertical .sp-arrows { | |||
height: 100%; | |||
left: 50%; | |||
top: 0; | |||
margin-left: -10px; | |||
} | |||
.sp-arrow { | |||
position: absolute; | |||
display: block; | |||
width: 20px; | |||
height: 30px; | |||
cursor: pointer; | |||
} | |||
.sp-vertical .sp-arrow { | |||
-webkit-transform: rotate(90deg); | |||
-ms-transform: rotate(90deg); | |||
transform: rotate(90deg); | |||
} | |||
.sp-horizontal .sp-previous-arrow { | |||
left: 20px; | |||
} | |||
.sp-horizontal .sp-next-arrow { | |||
right: 20px; | |||
} | |||
.sp-vertical .sp-previous-arrow { | |||
top: 20px; | |||
} | |||
.sp-vertical .sp-next-arrow { | |||
bottom: 20px; | |||
} | |||
.sp-previous-arrow:before, | |||
.sp-previous-arrow:after, | |||
.sp-next-arrow:before, | |||
.sp-next-arrow:after { | |||
content: ''; | |||
position: absolute; | |||
width: 50%; | |||
height: 50%; | |||
background-color: #FFF; | |||
} | |||
.sp-previous-arrow:before { | |||
left: 30%; | |||
top: 0; | |||
-webkit-transform: skew(145deg, 0deg); | |||
-ms-transform: skew(145deg, 0deg); | |||
transform: skew(145deg, 0deg); | |||
} | |||
.sp-previous-arrow:after { | |||
left: 30%; | |||
top: 50%; | |||
-webkit-transform: skew(-145deg, 0deg); | |||
-ms-transform: skew(-145deg, 0deg); | |||
transform: skew(-145deg, 0deg); | |||
} | |||
.sp-next-arrow:before { | |||
right: 30%; | |||
top: 0; | |||
-webkit-transform: skew(35deg, 0deg); | |||
-ms-transform: skew(35deg, 0deg); | |||
transform: skew(35deg, 0deg); | |||
} | |||
.sp-next-arrow:after { | |||
right: 30%; | |||
top: 50%; | |||
-webkit-transform: skew(-35deg, 0deg); | |||
-ms-transform: skew(-35deg, 0deg); | |||
transform: skew(-35deg, 0deg); | |||
} | |||
.ie8 .sp-arrow, | |||
.ie7 .sp-arrow { | |||
width: 0; | |||
height: 0; | |||
} | |||
.ie8 .sp-arrow:before, | |||
.ie8 .sp-arrow:after, | |||
.ie7 .sp-arrow:before, | |||
.ie7 .sp-arrow:after { | |||
content: none; | |||
} | |||
.ie8.sp-horizontal .sp-previous-arrow, | |||
.ie7.sp-horizontal .sp-previous-arrow { | |||
border-right: 20px solid #FFF; | |||
border-top: 20px solid transparent; | |||
border-bottom: 20px solid transparent; | |||
} | |||
.ie8.sp-horizontal .sp-next-arrow, | |||
.ie7.sp-horizontal .sp-next-arrow { | |||
border-left: 20px solid #FFF; | |||
border-top: 20px solid transparent; | |||
border-bottom: 20px solid transparent; | |||
} | |||
.ie8.sp-vertical .sp-previous-arrow, | |||
.ie7.sp-vertical .sp-previous-arrow { | |||
border-bottom: 20px solid #FFF; | |||
border-left: 20px solid transparent; | |||
border-right: 20px solid transparent; | |||
} | |||
.ie8.sp-vertical .sp-next-arrow, | |||
.ie7.sp-vertical .sp-next-arrow { | |||
border-top: 20px solid #FFF; | |||
border-left: 20px solid transparent; | |||
border-right: 20px solid transparent; | |||
} | |||
/* Thumbnail Arrows | |||
--------------------------------------------------*/ | |||
.sp-thumbnail-arrows { | |||
position: absolute; | |||
} | |||
.sp-fade-thumbnail-arrows { | |||
opacity: 0; | |||
-webkit-transition: opacity 0.5s; | |||
transition: opacity 0.5s; | |||
} | |||
.sp-thumbnails-container:hover .sp-fade-thumbnail-arrows { | |||
opacity: 1; | |||
} | |||
.sp-top-thumbnails .sp-thumbnail-arrows, | |||
.sp-bottom-thumbnails .sp-thumbnail-arrows { | |||
width: 100%; | |||
top: 50%; | |||
left: 0; | |||
margin-top: -12px; | |||
} | |||
.sp-left-thumbnails .sp-thumbnail-arrows, | |||
.sp-right-thumbnails .sp-thumbnail-arrows { | |||
height: 100%; | |||
top: 0; | |||
left: 50%; | |||
margin-left: -7px; | |||
} | |||
.sp-thumbnail-arrow { | |||
position: absolute; | |||
display: block; | |||
width: 15px; | |||
height: 25px; | |||
cursor: pointer; | |||
} | |||
.sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow, | |||
.sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow { | |||
-webkit-transform: rotate(90deg); | |||
-ms-transform: rotate(90deg); | |||
transform: rotate(90deg); | |||
} | |||
.sp-top-thumbnails .sp-previous-thumbnail-arrow, | |||
.sp-bottom-thumbnails .sp-previous-thumbnail-arrow { | |||
left: 0px; | |||
} | |||
.sp-top-thumbnails .sp-next-thumbnail-arrow, | |||
.sp-bottom-thumbnails .sp-next-thumbnail-arrow { | |||
right: 0px; | |||
} | |||
.sp-left-thumbnails .sp-previous-thumbnail-arrow, | |||
.sp-right-thumbnails .sp-previous-thumbnail-arrow { | |||
top: 0px; | |||
} | |||
.sp-left-thumbnails .sp-next-thumbnail-arrow, | |||
.sp-right-thumbnails .sp-next-thumbnail-arrow { | |||
bottom: 0px; | |||
} | |||
.sp-previous-thumbnail-arrow:before, | |||
.sp-previous-thumbnail-arrow:after, | |||
.sp-next-thumbnail-arrow:before, | |||
.sp-next-thumbnail-arrow:after { | |||
content: ''; | |||
position: absolute; | |||
width: 50%; | |||
height: 50%; | |||
background-color: #FFF; | |||
} | |||
.sp-previous-thumbnail-arrow:before { | |||
left: 30%; | |||
top: 0; | |||
-webkit-transform: skew(145deg, 0deg); | |||
-ms-transform: skew(145deg, 0deg); | |||
transform: skew(145deg, 0deg); | |||
} | |||
.sp-previous-thumbnail-arrow:after { | |||
left: 30%; | |||
top: 50%; | |||
-webkit-transform: skew(-145deg, 0deg); | |||
-ms-transform: skew(-145deg, 0deg); | |||
transform: skew(-145deg, 0deg); | |||
} | |||
.sp-next-thumbnail-arrow:before { | |||
right: 30%; | |||
top: 0; | |||
-webkit-transform: skew(35deg, 0deg); | |||
-ms-transform: skew(35deg, 0deg); | |||
transform: skew(35deg, 0deg); | |||
} | |||
.sp-next-thumbnail-arrow:after { | |||
right: 30%; | |||
top: 50%; | |||
-webkit-transform: skew(-35deg, 0deg); | |||
-ms-transform: skew(-35deg, 0deg); | |||
transform: skew(-35deg, 0deg); | |||
} | |||
.ie8 .sp-thumbnail-arrow, | |||
.ie7 .sp-thumbnail-arrow { | |||
width: 0; | |||
height: 0; | |||
} | |||
.ie8 .sp-thumbnail-arrow:before, | |||
.ie8 .sp-thumbnail-arrow:after, | |||
.ie7 .sp-thumbnail-arrow:before, | |||
.ie7 .sp-thumbnail-arrow:after { | |||
content: none; | |||
} | |||
.ie8 .sp-top-thumbnails .sp-previous-thumbnail-arrow, | |||
.ie8 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow, | |||
.ie7 .sp-top-thumbnails .sp-previous-thumbnail-arrow, | |||
.ie7 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow { | |||
border-right: 12px solid #FFF; | |||
border-top: 12px solid transparent; | |||
border-bottom: 12px solid transparent; | |||
} | |||
.ie8 .sp-top-thumbnails .sp-next-thumbnail-arrow, | |||
.ie8 .sp-bottom-thumbnails .sp-next-thumbnail-arrow, | |||
.ie7 .sp-top-thumbnails .sp-next-thumbnail-arrow, | |||
.ie7 .sp-bottom-thumbnails .sp-next-thumbnail-arrow { | |||
border-left: 12px solid #FFF; | |||
border-top: 12px solid transparent; | |||
border-bottom: 12px solid transparent; | |||
} | |||
.ie8 .sp-left-thumbnails .sp-previous-thumbnail-arrow, | |||
.ie8 .sp-right-thumbnails .sp-previous-thumbnail-arrow, | |||
.ie7 .sp-left-thumbnails .sp-previous-thumbnail-arrow, | |||
.ie7 .sp-right-thumbnails .sp-previous-thumbnail-arrow { | |||
border-bottom: 12px solid #FFF; | |||
border-left: 12px solid transparent; | |||
border-right: 12px solid transparent; | |||
} | |||
.ie8 .sp-left-thumbnails .sp-next-thumbnail-arrow, | |||
.ie8 .sp-right-thumbnails .sp-next-thumbnail-arrow, | |||
.ie7 .sp-left-thumbnails .sp-next-thumbnail-arrow, | |||
.ie7 .sp-right-thumbnails .sp-next-thumbnail-arrow { | |||
border-top: 12px solid #FFF; | |||
border-left: 12px solid transparent; | |||
border-right: 12px solid transparent; | |||
} | |||
/* Video | |||
--------------------------------------------------*/ | |||
a.sp-video { | |||
text-decoration: none; | |||
} | |||
a.sp-video img { | |||
-webkit-backface-visibility: hidden; | |||
border: none; | |||
} | |||
a.sp-video:after { | |||
content: '\25B6'; | |||
position: absolute; | |||
width: 45px; | |||
padding-left: 5px; | |||
height: 50px; | |||
border: 2px solid #FFF; | |||
text-align: center; | |||
font-size: 30px; | |||
border-radius: 30px; | |||
top: 0; | |||
color: #FFF; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
background-color: rgba(0, 0, 0, 0.2); | |||
margin: auto; | |||
line-height: 52px; | |||
} | |||
/* CSS for preventing styling issues in WordPress | |||
--------------------------------------------------*/ | |||
.slider-pro img.sp-image, | |||
.slider-pro img.sp-thumbnail { | |||
max-width: none !important; | |||
max-height: none !important; | |||
border: none !important; | |||
border-radius: 0 !important; | |||
padding: 0 !important; | |||
-webkit-box-shadow: none !important; | |||
-mox-box-shadow: none !important; | |||
box-shadow: none !important; | |||
transition: none; | |||
-moz-transition: none; | |||
-webkit-transition: none; | |||
-o-transition: none; | |||
} | |||
.slider-pro a { | |||
position: static; | |||
transition: none !important; | |||
-moz-transition: none !important; | |||
-webkit-transition: none !important; | |||
-o-transition: none !important; | |||
} | |||
.slider-pro iframe, | |||
.slider-pro object, | |||
.slider-pro video, | |||
.slider-pro embed, | |||
.slider-pro canvas { | |||
max-width: none; | |||
max-height: none; | |||
} | |||
.slider-pro p.sp-layer { | |||
line-height: 1.4; | |||
width: 100% !important; | |||
} | |||
.slider-pro h1.sp-layer { | |||
font-size: 32px; | |||
line-height: 1.4; | |||
margin: 0; | |||
} | |||
.slider-pro h2.sp-layer { | |||
font-size: 24px; | |||
line-height: 1.4; | |||
margin: 0; | |||
} | |||
.slider-pro h3.sp-layer { | |||
font-size: 19px; | |||
line-height: 1.4; | |||
margin: 0; | |||
} | |||
.slider-pro h4.sp-layer { | |||
font-size: 16px; | |||
line-height: 1.4; | |||
margin: 0; | |||
} | |||
.slider-pro h5.sp-layer { | |||
font-size: 13px; | |||
line-height: 1.4; | |||
margin: 0; | |||
} | |||
.slider-pro h6.sp-layer { | |||
font-size: 11px; | |||
line-height: 1.4; | |||
margin: 0; | |||
} | |||
.slider-pro img.sp-layer { | |||
border: none; | |||
} | |||