Template:Hamilton McMaster/css/style
/*----------------------------------------------------------------
Footer
*/
footer {
position: relative; z-index: 10; background-color: #363842; color: #545766;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
color: #fff;
}
footer a {
color: #545766; text-decoration: none;
}
footer a:hover {
color: #fff;
}
footer .meta-social ul li a {
border-color: #545766; color: #545766;
}
footer .meta-social ul li a:hover {
color: #fff;
}
- top-footer h4 {
margin-top: 1.34em;
}
- top-footer .widget {
margin-bottom: 0; font-size: 0.778em;
}
footer .row-content.buffer {
padding-top: 2%; padding-bottom: 0;
}
- bottom-footer {
font-size: 0.667em;
}
/*----------------------------------------------------------------
LineIcon font - Made with Fontastic.me - Icons: http://graphicburger.com/line-icon-set-for-ui/
*/
@charset "UTF-8";
@font-face {
font-weight: normal; font-style: normal; font-family: "lineicon"; src:url("fonts/lineicon.eot"); src:url("fonts/lineicon.eot?#iefix") format("embedded-opentype"), url("fonts/lineicon.woff") format("woff"), url("fonts/lineicon.ttf") format("truetype"), url("fonts/lineicon.svg#lineicon") format("svg");
}
[data-icon]:before {
content: attr(data-icon); text-transform: none !important; font-weight: normal !important; font-style: normal !important; font-variant: normal !important; font-family: "lineicon" !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
text-transform: none !important; font-weight: normal !important; font-style: normal !important; font-variant: normal !important; font-family: "lineicon" !important; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-images:before {
content: "\e000";
}
.icon-arrow-up:before {
content: "\e001";
}
.icon-arrow-right:before {
content: "\e002";
}
.icon-arrow-left:before {
content: "\e003";
}
.icon-arrow-down:before {
content: "\e004";
}
.icon-search:before {
content: "\e005";
}
.icon-camera:before {
content: "\e006";
}
.icon-video:before {
content: "\e007";
}
.icon-picture:before {
content: "\e008";
}
.icon-home:before {
content: "\e009";
}
.icon-outline-left-arrow:before {
content: "\e00a";
}
.icon-outline-left-dir:before {
content: "\e00b";
}
.icon-outline-left-right-arrow:before {
content: "\e00c";
}
.icon-outline-right-arrow:before {
content: "\e00d";
}
.icon-outline-right-dir:before {
content: "\e00e";
}
.icon-outline-enlarge:before {
content: "\e00f";
}
.icon-outline-close:before {
content: "\e010";
}
.icon-multiview:before {
content: "\e011";
}
.icon-load:before {
content: "\e012";
}
.icon-link-two:before {
content: "\e013";
}
.icon-link-one:before {
content: "\e014";
}
.icon-reload:before {
content: "\e015";
}
.icon-user:before {
content: "\e016";
}
.icon-users:before {
content: "\e017";
}
.icon-vertical-tag:before {
content: "\e018";
}
.icon-checked:before {
content: "\e019";
}
.icon-clip:before {
content: "\e01a";
}
.icon-download:before {
content: "\e01b";
}
.icon-equalizer:before {
content: "\e01c";
}
.icon-flag:before {
content: "\e01d";
}
.icon-gear:before {
content: "\e01e";
}
.icon-outline-menu:before {
content: "\e01f";
}
.icon-horizontal-tag:before {
content: "\e020";
}
.icon-archive:before {
content: "\e021";
}
.icon-bag:before {
content: "\e022";
}
.icon-battery-25:before {
content: "\e023";
}
.icon-battery-50:before {
content: "\e024";
}
.icon-battery-75:before {
content: "\e025";
}
.icon-battery-charged:before {
content: "\e026";
}
.icon-battery-dead:before {
content: "\e027";
}
.icon-bin:before {
content: "\e028";
}
.icon-brush:before {
content: "\e029";
}
.icon-connections:before {
content: "\e02a";
}
.icon-compass:before {
content: "\e02b";
}
.icon-comments:before {
content: "\e02c";
}
.icon-comment-two:before {
content: "\e02d";
}
.icon-comment-one:before {
content: "\e02e";
}
.icon-clock:before {
content: "\e02f";
}
.icon-cart:before {
content: "\e030";
}
.icon-calendar:before {
content: "\e031";
}
.icon-calc:before {
content: "\e032";
}
.icon-bulb:before {
content: "\e033";
}
.icon-crown:before {
content: "\e034";
}
.icon-cup:before {
content: "\e035";
}
.icon-diamond:before {
content: "\e036";
}
.icon-doc:before {
content: "\e037";
}
.icon-email:before {
content: "\e038";
}
.icon-eye:before {
content: "\e039";
}
.icon-film:before {
content: "\e03a";
}
.icon-flame:before {
content: "\e03b";
}
.icon-flash:before {
content: "\e03c";
}
.icon-folder:before {
content: "\e03d";
}
.icon-map:before {
content: "\e03e";
}
.icon-lock:before {
content: "\e03f";
}
.icon-inbox:before {
content: "\e040";
}
.icon-heart:before {
content: "\e041";
}
.icon-graph:before {
content: "\e042";
}
.icon-globe:before {
content: "\e043";
}
.icon-money:before {
content: "\e044";
}
.icon-news:before {
content: "\e045";
}
.icon-phone-one:before {
content: "\e046";
}
.icon-phone-two:before {
content: "\e047";
}
.icon-pin:before {
content: "\e048";
}
.icon-pocket:before {
content: "\e049";
}
.icon-wifi:before {
content: "\e04a";
}
.icon-unlock:before {
content: "\e04b";
}
.icon-scissors:before {
content: "\e04c";
}
.icon-stamp:before {
content: "\e04d";
}
.icon-star:before {
content: "\e04e";
}
.icon-target:before {
content: "\e04f";
}
.icon-tshirt:before {
content: "\e050";
}
.icon-tumbler:before {
content: "\e051";
}
.icon-pencil:before {
content: "\e052";
}
.icon-paperfly:before {
content: "\e053";
}
.icon-control-eject:before {
content: "\e054";
}
.icon-control-fastforward:before {
content: "\e055";
}
.icon-control-next:before {
content: "\e056";
}
.icon-control-pause:before {
content: "\e057";
}
.icon-control-play:before {
content: "\e058";
}
.icon-cassette:before {
content: "\e059";
}
.icon-control-prev:before {
content: "\e05a";
}
.icon-control-rec:before {
content: "\e05b";
}
.icon-control-rewind:before {
content: "\e05c";
}
.icon-control-shuffle:before {
content: "\e05d";
}
.icon-control-stop:before {
content: "\e05e";
}
.icon-crop:before {
content: "\e05f";
}
.icon-desktop:before {
content: "\e060";
}
.icon-disk:before {
content: "\e061";
}
.icon-headphones:before {
content: "\e062";
}
.icon-laptop:before {
content: "\e063";
}
.icon-layout:before {
content: "\e064";
}
.icon-leaf:before {
content: "\e065";
}
.icon-microphone:before {
content: "\e066";
}
.icon-megaphone:before {
content: "\e067";
}
.icon-music:before {
content: "\e068";
}
.icon-speaker-on:before {
content: "\e069";
}
.icon-speaker-off:before {
content: "\e06a";
}
.icon-smartphone:before {
content: "\e06b";
}
.icon-select:before {
content: "\e06c";
}
.icon-resize:before {
content: "\e06d";
}
.icon-umbrella:before {
content: "\e06e";
}
.icon-weather-changeable:before {
content: "\e06f";
}
.icon-weather-cloudy:before {
content: "\e070";
}
.icon-weather-rainy:before {
content: "\e071";
}
.icon-weather-snowy:before {
content: "\e072";
}
.icon-weather-stormy:before {
content: "\e073";
}
.icon-weather-sunny:before {
content: "\e074";
}
.icon-tablet:before {
content: "\e075";
}
.icon-arrow-down-simple:before {
content: "\e076";
}
.icon-arrow-left-simple:before {
content: "\e077";
}
.icon-arrow-right-simple:before {
content: "\e078";
}
.icon-arrow-up-simple:before {
content: "\e079";
}
.icon-close:before {
content: "\e07a";
}
.icon-plus:before {
content: "\e07b";
}
/*----------------------------------------------------------------
Align Fontawesome and LineIcon fonts
*/
.big-icon .icon, .small-icon .icon, .big-icon .fa, .small-icon .fa {
vertical-align: baseline;
}
.icon, .fa {
/* vertical-align: middle; */;
}
/*----------------------------------------------------------------
Hide icons underline
*/
.icon {
display: inline-block;
}
/*----------------------------------------------------------------
640px Breakpoint
*/
@media handheld, only screen and (max-width:40em) {
#intro .caption h2, #intro .caption-mockup h2 { font-size: 2.4em; }
#intro .caption p, #intro .caption-mockup p { font-size: 0.8em; }
.photocaption { display: none; }
}
/*----------------------------------------------------------------
768px Breakpoint
*/
@media handheld, only screen and (max-width:48em) {
header { position: relative !important; background-color: #fff !important; }
#brand a, nav a { color: #333 !important; }
nav a:hover { color: #fff !important; }
#brand, nav, #menu-toggle { display: block; }
#menu-toggle { float: right; clear: none; }
nav { float: none; clear: both; }
nav > ul { margin-top: 2em; }
#brand h1 { line-height: 1.8; }
nav > ul { display: none; }
nav > ul, nav > ul > li { float: none; }
.sub-arrow { display: none; }
nav > ul li > a { display: block; margin: 0; padding: 0.625rem 0; border-bottom: 1px solid #DDD !important; line-height: 1.250rem; }
nav > ul > li > a:hover { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }
nav > ul li.last > a, nav > ul li.last > a:hover { border-bottom: none !important; }
nav > ul > li.menu-item { padding: 0 !important; }
nav ul.sub-menu > li > a { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }
nav ul.sub-menu > li > a { color: #666 !important; font-size: 0.688rem; }
nav ul.sub-menu > li > a, nav ul li > a:hover { background-color: transparent !important; }
nav ul li > a:hover { color: #FD685B !important; }
nav > ul > li:hover > a { border-bottom: none; }
nav ul.sub-menu { position: static; display: block; padding: 0 0 0 1.5em; width: inherit; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#intro { position: relative; }
.more { display: none; }
.column .count-item { margin-bottom: 2em; }
.column.last .count-item { margin-bottom: 0; }
.carousel-item { text-align: center; }
.carousel-item img, .about-us img, .testimonial-img img { margin: 0 auto; }
.carousel-item img { max-width: 12.5em; }
.about-us img { max-width: 20em; width: 100%; }
.testimonial-img img { margin-bottom: 1em; max-width: 10em; width: 100%; }
.testimonial-slider { text-align: center; }
.blog.list-style article figure, .blog-section.list-style article figure, .search.list-style article figure { margin-bottom: 1em; }
}
/*----------------------------------------------------------------
320px Breakpoint - Fix some mockups
*/
@media handheld, only screen and (min-width:20em) and (max-width:20em) {
.side-mockup .ipad-slider { margin-left: -21px; }
.side-mockup .iphone-slider { margin-left: -18px; }
.side-mockup .dasktop-slider { margin-left: -29px; }
}
/*----------------------------------------------------------------
Lightbox
*/
- imagelightbox {
position: fixed; z-index: 9999; cursor: pointer;
}
- imagelightbox-loading,
- imagelightbox-overlay,
- imagelightbox-close,
- imagelightbox-nav {
-webkit-animation: fade-in .25s linear; -moz-animation: fade-in .25s linear; -o-animation: fade-in .25s linear; animation: fade-in .25s linear;
}
- imagelightbox-caption {
-webkit-animation: bottom-in .5s ease; -moz-animation: bottom-in .5s ease; -o-animation: bottom-in .5s ease; animation: bottom-in .5s ease;
}
@-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes bottom-in {
from { opacity: 0; -webkit-transform: translateY(50%); }
to { opacity: 1; -webkit-transform: translateY(0%); }
}
@-moz-keyframes bottom-in {
from { opacity: 0; -moz-transform: translateY(50%); }
to { opacity: 1; -moz-transform: translateY(0%); }
}
@-o-keyframes bottom-in {
from { opacity: 0; -o-transform: translateY(50%); }
to { opacity: 1; -o-transform: translateY(0%); }
}
@keyframes bottom-in {
from { opacity: 0; transform: translateY(50%); }
to { opacity: 1; transform: translateY(0%); }
}
- imagelightbox-overlay {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9998; background-color: #1b1f23; background-color: rgba(27, 31, 35, 0.95);
}
- imagelightbox-caption {
position: fixed; right: 0; bottom: 0; left: 0; z-index: 10001; background-color: rgba(255, 255, 255, 0.95); text-align: center;
}
- imagelightbox-caption h3 {
margin-top: 0.67em;
}
- imagelightbox-close i {
position: fixed; top: 1.5em; right: 1.5em; z-index: 10002; width: 1em !important; height: 1em !important; color: rgba(255,255,255,0.5); font-size: 2em; line-height: 1 !important; -webkit-transition: .3s ease; -moz-transition: .3s ease; -ms-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease;
}
- imagelightbox-close i:hover {
color: rgba(255,255,255,1);
}
.landing-els.lightbox {
position: fixed; z-index: 9997;
}
.landing-els.lightbox .spinner > div {
background-color: rgba(255,255,255,0.5);
}
/*----------------------------------------------------------------
Owl Carousel mockups
*/
.owl-item {
clear: none;
}
.owl-item > div {
padding: 10px;
}
- intro .owl-item > div,
.gallery .owl-item > div {
padding: 0;
}
.owl-theme .owl-controls .owl-buttons div,
- intro.owl-theme .owl-controls .owl-pagination {
position: absolute;
}
- intro.owl-theme .owl-controls .owl-pagination {
bottom: 1em; margin: 0 20%; width: 60%;
}
.slider .owl-theme .owl-controls .owl-buttons div {
color: #aaa;
}
.gallery.slider .owl-theme .owl-controls .owl-buttons div {
color: #fff;
}
.slider .owl-theme .owl-controls .owl-page span {
background: #aaa;
}
.owl-theme .owl-controls .owl-buttons .owl-prev {
top: 53%; left: 20px;
}
.owl-theme .owl-controls .owl-buttons .owl-next {
top: 53%; right: 20px;
}
.gallery .owl-theme .owl-controls .owl-buttons .owl-prev {
top: 0.944em; right: 0.333em; left: auto;
}
.gallery .owl-theme .owl-controls .owl-buttons .owl-next {
top: 2.222em; right: 0.333em;
}
.owl-item img {
display: block; width: 100%; height: auto;
}
.mockup {
pointer-events: none;
}
.slider {
display: none;
}
.slider .owl-wrapper-outer {
margin-bottom: 1em;
}
.iphone-slider .owl-carousel .owl-wrapper-outer, .ipad-slider .owl-carousel .owl-wrapper-outer, .desktop-slider .owl-carousel .owl-wrapper-outer {
overflow: visible;
}
.iphone-slider .owl-item, .ipad-slider .owl-item, .desktop-slider .owl-item {
overflow-y: hidden;
}
.iphone-slider {
margin: 0 auto;
}
.iphone-slider {
min-height: 800px; width: 416px;
}
.iphone-slider .owl-item {
margin: 100px 0; height: 568px;
}
.iphone-slider .owl-item div {
padding: 0 48px; height: inherit;
}
.iphone-slider .owl-item, .ipad-slider .owl-item, .desktop-slider .owl-item {
opacity: 0.3; -webkit-transition: opacity .2s ease; -moz-transition: opacity .2s ease; -ms-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease;
}
.iphone-slider .owl-item.active, .ipad-slider .owl-item.active, .desktop-slider .owl-item.active {
opacity: 1;
}
.iphone-mockup {
position: absolute; top: 0; left: 50%; margin-left: -200px; width: 400px;
}
.iphone-mockup, .iphone-slider .owl-wrapper-outer {
height: 800px;
}
.iphone-mockup, .iphone-mockup.black {
background: url("img/mockups/iphone-black.svg") no-repeat;
}
.no-svg .iphone-mockup, .no-svg .iphone-mockup.black {
background: url("img/mockups/iphone-black.png") no-repeat;
}
.iphone-mockup.white {
background: url("img/mockups/iphone-white.svg") no-repeat;
}
.no-svg .iphone-mockup.white {
background: url("img/mockups/iphone-white.png") no-repeat;
}
.iphone-mockup.grey {
background: url("img/mockups/iphone-grey.svg") no-repeat;
}
.no-svg .iphone-mockup.grey {
background: url("img/mockups/iphone-grey.png") no-repeat;
}
.iphone-mockup, .iphone-mockup.black, .iphone-mockup.white, .iphone-mockup.grey {
background-size: 400px 800px !important;
}
.iphone-slider .owl-theme .owl-controls .owl-buttons .owl-prev {
left: -30px;
}
.iphone-slider .owl-theme .owl-controls .owl-buttons .owl-next {
right: -30px;
}
.ipad-slider {
margin: 0 auto;
}
.ipad-slider {
min-height: 504px; width: 630px;
}
.ipad-slider .owl-item {
margin: 63px 0; height: 378px;
}
.ipad-slider .owl-item div {
padding: 0 63px; height: inherit;
}
.ipad-mockup {
position: absolute; top: 0; left: 50%; margin-left: -315px; width: 630px;
}
.ipad-mockup, .ipad-slider .owl-wrapper-outer {
height: 504px;
}
.ipad-mockup, .ipad-mockup.black {
background: url("img/mockups/ipad-black.svg") no-repeat;
}
.no-svg .ipad-mockup, .no-svg .ipad-mockup.black {
background: url("img/mockups/ipad-black.png") no-repeat;
}
.ipad-mockup.white {
background: url("img/mockups/ipad-white.svg") no-repeat;
}
.no-svg .ipad-mockup.white {
background: url("img/mockups/ipad-white.png") no-repeat;
}
.ipad-mockup.grey {
background: url("img/mockups/ipad-grey.svg") no-repeat;
}
.no-svg .ipad-mockup.grey {
background: url("img/mockups/ipad-grey.png") no-repeat;
}
.ipad-mockup, .ipad-mockup.black, .ipad-mockup.white, .ipad-mockup.grey {
background-size: 630px 504px !important;
}
.ipad-slider .owl-theme .owl-controls .owl-buttons .owl-prev {
left: -47px;
}
.ipad-slider .owl-theme .owl-controls .owl-buttons .owl-next {
right: -47px;
}
.desktop-slider {
margin: 0 auto;
}
.desktop-slider {
min-height: 462px; width: 664px;
}
.desktop-slider .owl-item {
margin: 26px 0; height: 315px;
}
.desktop-slider .owl-item div {
padding: 0 45px; height: inherit;
}
.desktop-mockup {
position: absolute; top: 0; left: 50%; margin-left: -315px; width: 630px; background: url("img/mockups/desktop.svg") no-repeat; background-size: 630px 462px !important;
}
.no-svg .desktop-mockup {
background: url("img/mockups/desktop.png") no-repeat;
}
.desktop-mockup, .desktop-slider .owl-wrapper-outer {
height: 462px;
}
.desktop-slider .owl-theme .owl-controls .owl-buttons .owl-prev {
left: -30px;
}
.desktop-slider .owl-theme .owl-controls .owl-buttons .owl-next {
right: -30px;
}
.side-mockup {
clear: none;
}
.side-mockup .owl-wrapper-outer {
overflow: hidden !important;
}
.side-mockup .iphone-slider .owl-item, .side-mockup .ipad-slider .owl-item, .side-mockup .desktop-slider .owl-item {
opacity: 1; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;
}
@media handheld, only screen and (max-width:48em) {
.iphone-slider { min-height: 600px; width: 300px; }
.iphone-slider .owl-item { margin: 75px 0; height: 426px; }
.iphone-slider .owl-item div { padding: 0 30px; }
.iphone-mockup, .iphone-mockup.black, .iphone-mockup.white, .iphone-mockup.grey { margin-left: -150px; width: 300px; background-size: 300px 600px !important; }
.iphone-mockup, .iphone-mockup.black, .iphone-mockup.white, .iphone-mockup.grey, .iphone-slider .owl-wrapper-outer { height: 600px; }
.ipad-slider { min-height: 240px; width: 310px; }
.ipad-slider .owl-item { margin: 30px 0; height: 180px; }
.ipad-slider .owl-item div { padding: 0 35px; }
.ipad-mockup, .ipad-mockup.black, .ipad-mockup.white, .ipad-mockup.grey { margin-left: -150px; width: 300px; background-size: 300px 240px !important; }
.ipad-mockup, .ipad-mockup.black, .ipad-mockup.white, .ipad-mockup.grey, .ipad-slider .owl-wrapper-outer { height: 240px; }
.desktop-slider { min-height: 220px; width: 326px; }
.desktop-slider .owl-item { margin: 12px 0; height: 151px; }
.desktop-slider .owl-item div { padding: 0 26px; }
.desktop-mockup { margin-left: -150px; width: 300px; background-size: 300px 220px !important; }
.desktop-mockup, .desktop-slider .owl-wrapper-outer { height: 220px; }
.iphone-slider .owl-theme .owl-controls .owl-buttons .owl-prev { left: -22px; }
.iphone-slider .owl-theme .owl-controls .owl-buttons .owl-next { right: -22px; }
.ipad-slider .owl-theme .owl-controls .owl-buttons .owl-prev { left: -28px; }
.ipad-slider .owl-theme .owl-controls .owl-buttons .owl-next { right: -28px; }
.desktop-slider .owl-theme .owl-controls .owl-buttons .owl-prev { left: -20px; }
.desktop-slider .owl-theme .owl-controls .owl-buttons .owl-next { right: -20px; }
}
@media (max-width:30em) {
.owl-buttons { display: none; }
.side-mockup .owl-buttons, .side-mockup .owl-pagination { display: block; }
}
/*----------------------------------------------------------------
Owl Carousel general
*/
.owl-theme .owl-controls {
margin-top: 0; text-align: center;
}
.owl-theme .owl-controls .owl-buttons div {
/* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); */ display: inline-block; color: #fff; font-size: 40px; line-height: 40px; opacity: 0.3; filter: Alpha(Opacity=30); -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; transition: opacity .3s ease; zoom: 1; *display: inline;
}
- intro-wrap .owl-controls .owl-buttons div {
text-shadow: none; font-size: 2.667em; opacity: 0; filter: Alpha(Opacity=0); ;
}
- intro-wrap:hover .owl-controls .owl-buttons div {
opacity: 0.3; filter: Alpha(Opacity=30); ;
}
- intro-wrap:hover .owl-controls .owl-buttons div:hover {
opacity: 1; filter: Alpha(Opacity=100); ;
}
.dark-controls .owl-theme .owl-controls .owl-buttons div {
color: #292929;
}
.white-controls .owl-theme .owl-controls .owl-buttons div {
color: #fff;
}
.owl-theme .owl-controls.clickable .owl-buttons div:hover {
text-decoration: none; opacity: 1; filter: Alpha(Opacity=100);
}
.owl-theme .owl-controls .owl-page {
display: inline-block; zoom: 1; *display: inline;
}
.owl-theme .owl-controls .owl-page span {
display: block; margin: 0.333em; width: 0.667em; height: 0.667em; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #fff; opacity: 0.3; filter: Alpha(Opacity=30);
}
.text-light .owl-theme .owl-controls .owl-page span, .text-light .testimonial-slider.owl-theme .owl-controls .owl-page span, .text-light .custom-carousel.owl-theme .owl-controls .owl-page span {
background: #fff; opacity: 0.3; filter: Alpha(Opacity=30);
}
.dark-controls .owl-theme .owl-controls .owl-page span, .testimonial-slider.owl-theme .owl-controls .owl-page span, .custom-carousel.owl-theme .owl-controls .owl-page span {
background: #aaa;
}
.white-controls .owl-theme .owl-controls .owl-page span {
background: #fff;
}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span, .text-light .owl-theme .owl-controls .owl-page.active span, .text-light .testimonial-slider.owl-theme .owl-controls .owl-page.active span, .text-light .custom-carousel.owl-theme .owl-controls .owl-page.active span {
opacity: 1; filter: Alpha(Opacity=100);
}
.owl-theme .owl-controls .owl-page span.owl-numbers {
padding: 2px 10px; width: auto; height: auto; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; color: #ccc; font-size: 12px;
}
.owl-item.loading {
min-height: 150px; background: url(img/AjaxLoader.gif) no-repeat center center;
}
.owl-theme .owl-controls .owl-buttons div {
margin-top: -20px; font-size: 40px;
}
.gallery .owl-controls .owl-buttons div {
font-size: 2em;
}
- intro-wrap .owl-carousel .owl-wrapper-outer,
- intro-wrap .owl-wrapper,
- intro-wrap .owl-carousel .owl-item {
height: inherit;
}
- intro-wrap .owl-carousel .owl-item {
overflow: hidden;
}
@media handheld, only screen and (min-width:48em) {
.owl-theme .owl-controls .owl-buttons div { margin-top: -25px; font-size: 50px; }
.gallery .owl-controls .owl-buttons div { font-size: 2em; }
.carousel-item h1, .carousel-item h2, .carousel-item h3, .carousel-item h4, .carousel-item h5, .carousel-item h6 { margin-top: 0.67em; }
.caption-mockup h2 { margin-top: 0; }
#intro .intro-mockup-wrapper { margin-top: 6em; }
.caption-mockup.caption-left, .caption-mockup.caption-right { margin-top: 2em; text-align: left; }
.caption-mockup.caption-left h2, .caption-mockup.caption-right h2 { font-size: 2.667em; }
aside.sidebar { margin-top: 3em; }
.blog.masonry-style article.three .blog-excerpt-inner:after, .blog.masonry-style article.four .blog-excerpt-inner:after, .blog-section.masonry-style article.three .blog-excerpt-inner:after, .blog-section.masonry-style article.four .blog-excerpt-inner:after { position: absolute; right: 0; bottom: 0; left: 0; margin: 0 0.556em 0.556em 0.556em; height: 0.333em; background: rgba(255, 255, 255, 0); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); content: " "; ; }
}
/*----------------------------------------------------------------
Core Owl Carousel CSS File v1.24 Customized for Beetle
*/
/* clearfix */ .owl-carousel .owl-wrapper:after {
display: block; visibility: hidden; clear: both; height: 0; content: "."; line-height: 0;
} /* display none until init */ .owl-carousel {
position: relative; display: none; width: 100%; -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper {
position: relative; display: none; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer {
position: relative; overflow: hidden; 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; -o-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */ .grabbing {
cursor: url(img/grabbing.png) 8 8, move;
}
/* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item {
-webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden;
}
/* CSS3 Transitions */
.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%; -ms-perspective: 1200px; -ms-perspective-origin-x: 50%; -ms-perspective-origin-y: 50%; -o-perspective: 1200px; -o-perspective-origin-x: 50%; -o-perspective-origin-y: 50%; perspective: 1200px; perspective-origin-x: 50%; perspective-origin-y: 50%;
} /* 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 {
z-index: 10; -webkit-animation: fadeIn .7s both ease; -moz-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease;
} /* backSlide */ .owl-backSlide-out {
z-index: -10; -webkit-animation: backSlideOut 1s both ease; -moz-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease;
}
.owl-backSlide-in {
z-index: 10; -webkit-animation: backSlideIn 1s both ease; -moz-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease;
} /* goDown */ .owl-goDown-out {
z-index: -10; -webkit-animation: scaleToFade .7s ease both; -moz-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both;
}
.owl-goDown-in {
z-index: 10; -webkit-animation: goDown .6s ease both; -moz-animation: goDown .6s ease both; animation: goDown .6s ease both;
} /* scaleUp */ .owl-fadeUp-in {
z-index: 10; -webkit-animation: scaleUpFrom .5s ease both; -moz-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both;
}
.owl-fadeUp-out {
z-index: -10; -webkit-animation: scaleUpTo .5s ease both; -moz-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both;
} /* scaleDown */ .owl-scaleDown-in {
z-index: 10; -webkit-animation: scaleDownFrom .7s ease both; -moz-animation: scaleDownFrom .7s ease both; animation: scaleDownFrom .7s ease both; -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s;
}
.owl-scaleDown-out {
z-index: -10; -webkit-animation: scaleDownTo .5s ease both; -moz-animation: scaleDownTo .5s ease both; animation: scaleDownTo .5s ease both;
} /* scaleDownRight */ .owl-scaleDownRight-in {
z-index: 10; -webkit-animation: scaleDownRightFrom .7s ease both; -moz-animation: scaleDownRightFrom .7s ease both; animation: scaleDownRightFrom .7s ease both;
}
.owl-scaleDownRight-out {
z-index: -10; -webkit-animation: scaleDownRightTo .6s ease both; -moz-animation: scaleDownRightTo .6s ease both; animation: scaleDownRightTo .6s ease both;
} /* scaleUpLeft */ .owl-scaleUpLeft-in {
z-index: 10; -webkit-animation: scaleUpLeftFrom .7s ease both; -moz-animation: scaleUpLeftFrom .7s ease both; animation: scaleUpLeftFrom .7s ease both;
}
.owl-scaleUpLeft-out {
z-index: -10; -webkit-animation: scaleUpLeftTo .6s ease both; -moz-animation: scaleUpLeftTo .6s ease both; animation: scaleUpLeftTo .6s ease both;
} /* fadeTop */ .owl-fadeTop-in {
z-index: 10; -webkit-animation: fadeTopFrom .7s ease both; -moz-animation: fadeTopFrom .7s ease both; animation: fadeTopFrom .7s ease both;
}
.owl-fadeTop-out {
z-index: -10; -webkit-animation: fadeTopTo .7s ease both; -moz-animation: fadeTopTo .7s ease both; animation: fadeTopTo .7s ease both;
} /* overlap */ .owl-overlap-in {
z-index: 10; -webkit-animation: overlapFrom .6s ease both; -moz-animation: overlapFrom .6s ease both; animation: overlapFrom .6s ease both;
}
.owl-overlap-out {
z-index: -10; -webkit-animation: overlapTo .7s ease both; -moz-animation: overlapTo .7s ease both; animation: overlapTo .7s 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); }
}
@-webkit-keyframes scaleDownFrom {
from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleDownFrom {
from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleDownFrom {
from { opacity: 0; transform: scale(1.5); }
}
@-webkit-keyframes scaleDownTo {
to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleDownTo {
to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleDownTo {
to { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes scaleDownRightFrom {
from { -webkit-transform: translateX(100%); }
}
@-moz-keyframes scaleDownRightFrom {
from { -moz-transform: translateX(100%); }
}
@keyframes scaleDownRightFrom {
from { transform: translateX(100%); }
}
@-webkit-keyframes scaleDownRightTo {
to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleDownRightTo {
to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleDownRightTo {
to { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes scaleUpLeftFrom {
from { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleUpLeftFrom {
from { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleUpLeftFrom {
from { opacity: 0; transform: scale(.8); }
}
@-webkit-keyframes scaleUpLeftTo {
to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes scaleUpLeftTo {
to { -moz-transform: translateX(-100%); }
}
@keyframes scaleUpLeftTo {
to { transform: translateX(-100%); }
}
@-webkit-keyframes fadeTopFrom {
from { opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes fadeTopFrom {
from { opacity: 0.3; -moz-transform: translateY(-100%); }
}
@keyframes fadeTopFrom {
from { opacity: 0.3; transform: translateY(-100%); }
}
@-webkit-keyframes fadeTopTo {
to { opacity: 0.3; -webkit-transform: translateY(100%); }
}
@-moz-keyframes fadeTopTo {
to { opacity: 0.3; -moz-transform: translateY(100%); }
}
@keyframes fadeTopTo {
to { opacity: 0.3; transform: translateY(100%); }
}
@-webkit-keyframes overlapFrom {
from { -webkit-transform: translateX(100%); }
}
@-moz-keyframes overlapFrom {
from { -moz-transform: translateX(100%); }
}
@keyframes overlapFrom {
from { transform: translateX(100%); }
}
@-webkit-keyframes overlapTo {
to { -webkit-transform: translateX(-25%); }
}
@-moz-keyframes overlapTo {
to { -moz-transform: translateX(-25%); }
}
@keyframes overlapTo {
to { transform: translateX(-25%); }
}
/*----------------------------------------------------------------
Layers CSS 1.0.2 responsive adjustments Released by Jerry Jäppinen under the MIT license http://eiskis.net/layers 2013-10-25 14:56 Europe/Helsinki
*/
@media handheld,only screen and (max-width:48em) {
.column.one,.column.two,.column.sixth,.column.three,.column.fourth,.column.four,.column.twosixths,.column.third,.column.five,.column.six,.column.half,.column.threesixths,.column.twofourths,.column.seven,.column.eight,.column.foursixths,.column.twothirds,.column.nine,.column.threefourths,.column.ten,.column.fivesixths,.column.eleven { float: none !important; clear: both !important; margin-right: 0 !important; margin-left: 0 !important; width: auto !important; }
}
@media handheld,only screen and (max-width:48em) {
body { font-size: 0.9em; -webkit-text-size-adjust: none; }
}
@-webkit-keyframes colorFade {
0%, 100% { background-color: #981A36; }
50% { background-color: #0DFFB7;
}
}
body {
text-rendering: optimizeLegibility;
}
h1 {
font-family: 'source sans pro', 'helvetica neue', 'helvetica', arial, sans-serif; font-size: 3em; line-height: 1.1; font-weight: 900; // Nice and thick to show off the color text-align: center; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #705993; // fallback color (static) background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 90%); // loop the background along each line of text background-size: 110% 5em; // 1em because line-height is 1 background-repeat: repeat-y; -webkit-animation: colorFade 6s infinite;
}