/*
* Appica 2 HTML5 Theme
* Copyright 2015 8Guild.com
* All styles for iOS Version
*/
/** TABLE OF CONTENTS **/
/**
01. CSS Reset
02. Scaffolding
03. Typography
04. Social Buttons
05. Forms
06. Buttons
07. Intro
08. Main Content Wrap
09. Navbar
10. Off-Canvas Navigation
11. Fullwidth Backgrounds
12. Tabs/Filters
13. Feature Tabs
14. Modal
15. Icon Blocks
16. App Gallery
17. Gallery
18. News
19. Scroller
20. Split Block
21. Video Block
22. Twitter Feed
23. Press Reviews
24. Team/Team Grid
25. Pricing Plans
26. Blog (Posts)
27. Pagination
28. Masonry Grid
29. Comments
30. Timeline
31. Bar Charts
32. Clients Logos
33. Contacts
34. Footer
35. Preloader
36. Components Demo Styles
37. Portfolio
**/
/** Bootstrap Styles
**************************************/
@import'vendor/bootstrap.min.css';
/** Brand Icons (Social Networks)
*************************************/
@import'vendor/brand-icons.css';
/** Flaticon iOS Style Stroke Icons
************************************/
@import'vendor/flaticon.css';
/** Pixeden Stroke Icons 7
************************************/
@import'vendor/pe-icon-7-stroke.css';
/** Magnific Popup Plugin
************************************/
@import'vendor/magnific-popup.css';
/** Custom Scrollbar
************************************/
@import'vendor/jquery.mCustomScrollbar.css';
/** 01.CSS RESET
**********************************/
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/** 02.SCAFFOLDING
**********************************/
body {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
color: #3a3a3a;
background-color: #fff;
overflow-x: hidden;
}
.gray-bg {
background-color: #f5f5f5;
}
/* Vertical Space classes */
.space-top { margin-top: 24px; }
.space-top-2x { margin-top: 48px; }
.space-top-3x { margin-top: 72px; }
.space-bottom { margin-bottom: 24px; }
.space-bottom-2x { margin-bottom: 48px; }
.space-bottom-3x { margin-bottom: 72px; }
.padding-top { padding-top: 24px; }
.padding-top-2x { padding-top: 48px; }
.padding-top-3x { padding-top: 72px; }
.padding-bottom { padding-bottom: 24px; }
.padding-bottom-2x { padding-bottom: 48px;}
.padding-bottom-3x { padding-bottom: 72px;}
@media screen and (max-width: 768px) {
.space-top { margin-top: 16px; }
.space-top-2x { margin-top: 32px; }
.space-top-3x { margin-top: 48px; }
.space-bottom { margin-bottom: 16px; }
.space-bottom-2x { margin-bottom: 32px; }
.space-bottom-3x { margin-bottom: 48px; }
.padding-top { padding-top: 16px; }
.padding-top-2x { padding-top: 32px; }
.padding-top-3x { padding-top: 48px; }
.padding-bottom { padding-bottom: 16px; }
.padding-bottom-2x { padding-bottom: 32px;}
.padding-bottom-3x { padding-bottom: 48px;}
}
/* Clear floats */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* Links */
a {
color: #007aff;
text-decoration: none;
webkit-transition: all 0.3s;
transition: all 0.3s;
}
a.link-invert {
opacity: .5;
}
a:hover,
a:focus {
color: #4da3ff;
text-decoration: none;
outline: none;
}
a.link-invert:hover,
a.link-invert:focus {
color: #007aff;
opacity: 1;
}
hr {
width: 100%;
margin: 0;
border-top: 1px solid #f2f2f2;
}
.gray-bg hr {
border-top: 1px solid #cccccc;
}
strong {
font-weight: 600;
}
/* Responsive media by default */
img,
iframe,
embed {
max-width: 100%;
}
img {
height: auto !important;
}
/* Text Selection Color */
::selection { color: #fff; background: #3a3a3a; }
::-moz-selection { color: #fff; background: #3a3a3a; }
/** 03.TYPOGRAPHY
**********************************/
h1, h2, h3,
.h1, .h2, .h3 {
font-weight: 300;
line-height: 1.3;
}
h1, .h1 {
font-size: 48px;
margin-bottom: 30px;
}
@media screen and (max-width: 768px){
h1, .h1 {
font-size: 38px;
}
}
h2, .h2 {
font-size: 36px;
margin-bottom: 24px;
}
@media screen and (max-width: 768px){
h2, .h2 {
font-size: 30px;
}
}
h3, .h3 {
font-size: 24px;
margin-bottom: 20px;
}
h4, .h4 {
font-size: 18px;
font-weight: normal;
line-height: 1.2;
margin-bottom: 16px;
}
h5, .h5 {
font-size: 16px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 12px;
}
h6, .h6 {
font-size: 14px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 8px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
dl dd {
margin-bottom: 45px;
}
dl dt {
font-size: 24px;
font-weight: solid;
font-weight: 300;
text-transform: uppercase;
margin-bottom: 24px;
}
dl dt span {
margin-right: 11px;
color: #8e8e93;
}
dl dd {
font-size: 16px;
line-height: 1.5;
padding-left: 26px;
}
em {
font-style: italic;
}
.text-smaller {
font-size: 14px;
line-height: 1.58;
}
.lead {
font-size: 22px;
font-weight: 300;
}
.text-extra-big {
font-size: 72px;
font-weight: 300;
margin: 0 0 12px -3px;
}
@media screen and (max-width: 1200px) {
.text-extra-big {
font-size: 64px;
}
}
@media screen and (max-width: 991px) {
.text-extra-big {
font-size: 48px;
}
}
.color-gradient {
color: #8e8e93;
background: -webkit-linear-gradient(#aeaeb0, #68686e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.link:after {
font-family: "Flaticon";
content: "\e022";
font-size: 23px;
vertical-align: middle;
margin-left: 12px;
}
.text-right .link:after,
.link.text-right:after {
display: none;
}
.text-right .link:before,
.link.text-right:before {
font-family: "Flaticon";
content: "\e030";
font-size: 23px;
vertical-align: middle;
margin-right: 12px;
}
.text-light {
font-weight: 300 !important;
}
.text-normal {
font-weight: normal !important;
}
.text-semibold {
font-weight: 600 !important;
}
.text-bold {
font-weight: 700 !important;
}
figure figcaption {
text-align: right;
font-size: 12px;
color: #8e8e93;
margin-top: 13px;
}
/* Lists */
.unordered-list, ol,
.unstyled-list {
line-height: 1.8;
}
.unordered-list li {
position: relative;
padding-left: 20px;
}
.unordered-list li:before {
display: block;
position: absolute;
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #c4c4c4;
top: 12px;
left: 0;
}
.text-smaller.unordered-list li:before,
.text-smaller .unordered-list li:before {
top: 10px;
}
ol {
padding-left: 23px;
}
.unstyled-list {
list-style: none;
}
/* Page Heading */
.page-heading {
padding-top: 56px;
margin-bottom: 20px;
min-height: 120px;
}
.page-heading.no-content {
min-height: 100px;
padding-top: 0 !important;
}
.archive .page-heading {
min-height: 0;
margin-bottom: 40px;
}
@media screen and (max-width: 991px) {
.page-heading {
padding-top: 40px;
}
}
.page-heading .container {
position: relative;
}
.page-heading h1,
.page-heading h2,
.page-heading h3 {
width: 100%;
font-size: 24px;
font-weight: 300;
color: #8e8e93;
}
.page-heading .search-box-static {
position: absolute;
top: 0;
left: 15px;
}
@media screen and (max-width: 680px) {
.page-heading.text-right {
text-align: left !important;
margin-bottom: 10px;
}
.page-heading .search-box-static {
position: relative;
top: 0;
left: 0;
margin-bottom: 30px;
}
}
/* Block Heading */
.block-heading {
margin-bottom: 34px;
}
.block-heading h1,
.block-heading h2,
.block-heading h3 {
margin-bottom: 11px;
line-height: 1.4;
}
.block-heading span,
.block-heading p {
display: block;
font-size: 14px;
color: #8e8e93;
line-height: 1.5;
}
.light-color .block-heading span,
.light-color.block-heading span,
.light-color .block-heading p,
.light-color.block-heading p {
color: #fff;
font-weight: 300;
opacity: .5;
}
/* Badge */
.badge {
font-size: 12px;
color: #bebebe;
margin-bottom: 30px;
}
.badge .icon {
display: inline-block;
vertical-align: middle;
width: 36px;
height: 70px;
color: #fff;
text-align: center;
padding-top: 21px;
margin-right: 10px;
background: rgba(0,255,128,1);
background: -moz-linear-gradient(top, rgba(0,255,128,1) 0%, rgba(0,119,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,255,128,1)), color-stop(100%, rgba(0,119,255,1)));
background: -webkit-linear-gradient(top, rgba(0,255,128,1) 0%, rgba(0,119,255,1) 100%);
background: -o-linear-gradient(top, rgba(0,255,128,1) 0%, rgba(0,119,255,1) 100%);
background: -ms-linear-gradient(top, rgba(0,255,128,1) 0%, rgba(0,119,255,1) 100%);
background: linear-gradient(to bottom, rgba(0,255,128,1) 0%, rgba(0,119,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff80', endColorstr='#0077ff', GradientType=0 );
}
.badge .icon i:before,
.badge .icon i:before {
font-size: 28px;
}
.badge.alt-color .icon {
background: rgba(242,255,0,1);
background: -moz-linear-gradient(top, rgba(242,255,0,1) 0%, rgba(0,255,204,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,255,0,1)), color-stop(100%, rgba(0,255,204,1)));
background: -webkit-linear-gradient(top, rgba(242,255,0,1) 0%, rgba(0,255,204,1) 100%);
background: -o-linear-gradient(top, rgba(242,255,0,1) 0%, rgba(0,255,204,1) 100%);
background: -ms-linear-gradient(top, rgba(242,255,0,1) 0%, rgba(0,255,204,1) 100%);
background: linear-gradient(to bottom, rgba(242,255,0,1) 0%, rgba(0,255,204,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ff00', endColorstr='#00ffcc', GradientType=0 );
}
.badge.alt-color-2 .icon {
background: rgba(80,251,220,1);
background: -moz-linear-gradient(top, rgba(80,251,220,1) 0%, rgba(86,194,244,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(80,251,220,1)), color-stop(100%, rgba(86,194,244,1)));
background: -webkit-linear-gradient(top, rgba(80,251,220,1) 0%, rgba(86,194,244,1) 100%);
background: -o-linear-gradient(top, rgba(80,251,220,1) 0%, rgba(86,194,244,1) 100%);
background: -ms-linear-gradient(top, rgba(80,251,220,1) 0%, rgba(86,194,244,1) 100%);
background: linear-gradient(to bottom, rgba(80,251,220,1) 0%, rgba(86,194,244,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50fbdc', endColorstr='#56c2f4', GradientType=0 );
}
.badge.alt-color-3 .icon {
background: rgba(0,187,255,1);
background: -moz-linear-gradient(top, rgba(0,187,255,1) 0%, rgba(0,123,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,187,255,1)), color-stop(100%, rgba(0,123,255,1)));
background: -webkit-linear-gradient(top, rgba(0,187,255,1) 0%, rgba(0,123,255,1) 100%);
background: -o-linear-gradient(top, rgba(0,187,255,1) 0%, rgba(0,123,255,1) 100%);
background: -ms-linear-gradient(top, rgba(0,187,255,1) 0%, rgba(0,123,255,1) 100%);
background: linear-gradient(to bottom, rgba(0,187,255,1) 0%, rgba(0,123,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bbff', endColorstr='#007bff', GradientType=0 );
}
.badge.alt-color-4 .icon {
background: rgba(76,217,99,1);
background: -moz-linear-gradient(top, rgba(76,217,99,1) 0%, rgba(24,181,53,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,217,99,1)), color-stop(100%, rgba(24,181,53,1)));
background: -webkit-linear-gradient(top, rgba(76,217,99,1) 0%, rgba(24,181,53,1) 100%);
background: -o-linear-gradient(top, rgba(76,217,99,1) 0%, rgba(24,181,53,1) 100%);
background: -ms-linear-gradient(top, rgba(76,217,99,1) 0%, rgba(24,181,53,1) 100%);
background: linear-gradient(to bottom, rgba(76,217,99,1) 0%, rgba(24,181,53,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd963', endColorstr='#18b535', GradientType=0 );
}
.badge.badge-reverse {
text-align: right;
}
.badge.badge-reverse .icon {
margin-right: 0;
margin-left: 15px;
}
/* Text Alignment */
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
.text-justify {
text-align: justify !important;
}
/* Text Style */
.text-uppercase {
text-transform: uppercase !important;
}
.text-italic {
font-style: italic !important;
}
/* Light Text */
.light-color {
color: #fff !important;
}
.light-color a,
.light-color .link,
.light-color.link {
color: #fff !important;
opacity: .5;
font-weight: 300;
}
.light-color a:hover,
.light-color .link:hover,
.light-color.link:hover {
opacity: 1;
}
/* Text Color Variation */
.text-muted {
color: #c4c4c4 !important;
}
.text-gray {
color: #8e8e93 !important;
}
.text-primary {
color: #007aff !important;
}
.text-success {
color: #4cd964 !important;
}
.text-info {
color: #5ac8fa !important;
}
.text-warning {
color: #ffcc00 !important;
}
.text-danger {
color: #ff2d55 !important;
}
.light-color .text-muted,
.light-color .text-gray,
.light-color .text-primary,
.light-color .text-success,
.light-color .text-info,
.light-color .text-warning,
.light-color .text-danger {
font-weight: normal !important;
}
/** 04.SOCIAL BUTTONS
**********************************/
.social-buttons {
position: relative;
z-index: 10;
}
.social-buttons a {
display: inline-block;
font-size: 17px;
text-decoration: none;
margin: 5px 25px 10px 0;
opacity: .5;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-backface-visibility: hidden;
}
.social-buttons a:hover {
opacity: 1;
}
/* Behance */
.sb-behance { color: #1769ff; }
.sb-behance:hover { color: #1769ff; }
/* Bitbucket */
.sb-bitbucket { color: #205081; }
.sb-bitbucket:hover { color: #205081; }
/* CodePen */
.sb-codepen { color: #76daff; }
.sb-codepen:hover { color: #76daff; }
/* DeviantArt */
.sb-deviantart { color: #4e6252; }
.sb-deviantart:hover { color: #4e6252; }
/* Digg */
.sb-digg { color: #000000; }
.sb-digg:hover { color: #000000; }
/* Dribbble */
.sb-dribbble { color: #ea4c89; }
.sb-dribbble:hover { color: #ea4c89; }
/* Dropbox */
.sb-dropbox { color: #007ee5; }
.sb-dropbox:hover { color: #007ee5; }
/* Facebook */
.sb-facebook { color: #1283ff; }
.sb-facebook:hover { color: #1283ff; }
/* Flickr */
.sb-flickr { color: #0063dc; }
.sb-flickr:hover { color: #0063dc; }
/* Foursquare */
.sb-foursquare { color: #ef4b78; }
.sb-foursquare:hover { color: #ef4b78; }
/* GitHub */
.sb-github { color: #4183c4; }
.sb-github:hover { color: #4183c4; }
/* Google+ */
.sb-google-plus { color: #dd4b39; }
.sb-google-plus:hover { color: #dd4b39; }
/* Instagram */
.sb-instagram { color: #3f729b; }
.sb-instagram:hover { color: #3f729b; }
/* Jsfiddle */
.sb-jsfiddle { color: #4679bd; }
.sb-jsfiddle:hover { color: #4679bd; }
/* LastFM */
.sb-lastfm { color: #e31b23; }
.sb-lastfm:hover { color: #e31b23; }
/* LinkedIn */
.sb-linkedin { color: #0976b4; }
.sb-linkedin:hover { color: #0976b4; }
/* PayPal */
.sb-paypal { color: #253b80; }
.sb-paypal:hover { color: #253b80; }
/* Pinterest */
.sb-pinterest { color: #cc2127; }
.sb-pinterest:hover { color: #cc2127; }
/* Reddit */
.sb-reddit { color: #ff4500; }
.sb-reddit:hover { color: #ff4500; }
/* Skype */
.sb-skype { color: #00aff0; }
.sb-skype:hover { color: #00aff0; }
/* SoundCloud */
.sb-soundcloud { color: #f80; }
.sb-soundcloud:hover { color: #f80; }
/* Stack Overflow */
.sb-stackoverflow { color: #fe7a15; }
.sb-stackoverflow:hover { color: #fe7a15; }
/* Steam */
.sb-steam { color: #7da10e; }
.sb-steam:hover { color: #7da10e; }
/* StumbleUpon */
.sb-stumbleupon { color: #eb4924; }
.sb-stumbleupon:hover { color: #eb4924; }
/* Trello */
.sb-trello { color: #256a92; }
.sb-trello:hover { color: #256a92; }
/* Tumblr */
.sb-tumblr { color: #35465c; }
.sb-tumblr:hover { color: #35465c; }
/* Twitch */
.sb-twitch { color: #6441a5; }
.sb-twitch:hover { color: #6441a5; }
/* Twitter */
.sb-twitter { color: #55acee; }
.sb-twitter:hover { color: #55acee; }
/* Vimeo */
.sb-vimeo { color: #1ab7ea; }
.sb-vimeo:hover { color: #1ab7ea; }
/* Vine */
.sb-vine { color: #00b488; }
.sb-vine:hover { color: #00b488; }
/* VKontakte */
.sb-vk { color: #45668e; }
.sb-vk:hover { color: #45668e; }
/* WeChat */
.sb-wechat { color: #98d11c; }
.sb-wechat:hover { color: #98d11c; }
/* WordPress */
.sb-wordpress { color: #21759b; }
.sb-wordpress:hover { color: #21759b; }
/* XING */
.sb-xing { color: #026466; }
.sb-xing:hover { color: #026466; }
/* Yahoo! */
.sb-yahoo { color: #400191; }
.sb-yahoo:hover { color: #400191; }
/* Yelp */
.sb-yelp { color: #af0606; }
.sb-yelp:hover { color: #af0606; }
/* YouTube */
.sb-youtube { color: #e52d27;}
.sb-youtube:hover { color: #e52d27;}
/** 05.FORMS
**********************************/
.form-control {
width: 100%;
height: 48px;
font-size: 14px;
background: none;
border: none;
border-radius: 0;
border-bottom: 1px solid #007aff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.form-control:focus {
outline: none;
}
textarea.form-control {
padding-top: 12px;
}
.form-control::-moz-placeholder {
color: #007aff;
opacity: .5;
}
.form-control:-ms-input-placeholder {
color: #007aff;
opacity: .5;
line-height: 1.3;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.form-control::-webkit-input-placeholder {
color: #007aff;
opacity: .5;
line-height: 1.3;
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
}
.form-control:focus::-moz-placeholder {
opacity: 1;
}
.form-control:focus:-ms-input-placeholder {
opacity: 1;
}
.form-control:focus::-webkit-input-placeholder {
opacity: 1;
}
.form-group {
position: relative;
margin-bottom: 24px;
}
.form-group + .checkbox,
.form-group + .checkbox-inline,
.form-group + .radio,
.form-group + .radio-inline {
margin-top: 36px;
}
.helper-text {
font-size: 13px;
}
.helper-link {
position: absolute;
top: 50%;
right: 0;
font-size: 12px;
margin-top: -7px;
opacity: .5;
}
.helper-link:hover {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
/* Validation */
label.error {
display: none !important;
}
.form-control.error {
color: #ff2d55;
border-color: #ff2d55;
}
.form-control.error::-moz-placeholder {
color: #ff2d55;
}
.form-control.error:-ms-input-placeholder {
color: #ff2d55;
}
.form-control.error::-webkit-input-placeholder {
color: #ff2d55;
}
.form-control.valid {
border-color: #4cd964;
}
.form-control:focus ~ .helper-link,
.form-control.error ~ .helper-link,
.form-control.valid ~ .helper-link {
opacity: 0;
visibility: hidden;
}
.error-label,
.valid-label {
position: absolute;
top: 50%;
font-weight: 300;
right: 0;
font-size: 26px;
margin-top: -13px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.error-label:before,
.valid-label:before {
font-family: "Flaticon";
}
.error-label:before {
color: #ff2d55;
content: "!";
padding-right: 10px;
}
.valid-label:before {
color: #4cd964;
content: "\e07c";
}
.form-control.error ~ .error-label,
.form-control.valid ~ .valid-label {
opacity: 1;
visibility: visible;
}
.response-holder {
visibility: hidden;
opacity: 0;
padding: 12px 0;
font-size: 13px;
line-height: 1.8;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.response-holder.error,
.response-holder.success {
visibility: visible;
opacity: 1;
}
.response-holder.error {
color: #ff2d55;
}
.response-holder.success {
color: #4cd964;
}
/* Custom Checkboxes and Radios */
.checkbox,
.radio,
.checkbox-inline,
.radio-inline {
display: block;
font-size: 14px;
color: #8e8e93;
cursor: default;
margin-bottom: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label.hover {
cursor: pointer;
}
.checkbox-inline,
.radio-inline {
display: inline-block;
margin-right: 15px;
}
.text-right .checkbox-inline,
.text-right .radio-inline {
margin-left: 15px;
margin-right: 0;
}
.icheckbox,
.iradio {
position: relative;
display: inline-block;
margin-right: 6px;
width: 18px;
height: 18px;
vertical-align: middle;
margin-top: -2px;
border: 1px solid #007aff;
border-radius: 50%;
cursor: pointer;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.icheckbox,
.radio-alt .iradio {
padding: 2px 0 0 3px;
}
.icheckbox:before,
.radio-alt .iradio:before {
display: block;
font-family: "Flaticon";
content: '\e07c';
font-size: 11px;
color: #fff;
opacity: 0;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.icheckbox.checked,
.iradio.checked {
background-color: #007aff;
}
.iradio {
padding: 5px 0 0 5px;
}
.radio-alt .iradio {
padding: 2px 0 0 3px !important;
}
.iradio:before {
display: block;
content: '';
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 50%;
opacity: 0;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.radio-alt .iradio:before {
background-color: transparent;
width: auto;
height: auto;
}
.icheckbox.checked:before,
.iradio.checked:before {
opacity: 1;
}
.icheckbox.disabled,
.iradio.disabled {
border-color: #cccccc;
background-color: #cccccc;
cursor: default;
}
.checkbox.size-lg,
.radio.size-lg,
.checkbox-inline.size-lg,
.radio-inline.size-lg {
font-size: 16px;
font-weight: 300;
}
.checkbox-inline.size-lg,
.radio-inline.size-lg {
margin-right: 25px;
}
.text-right .checkbox-inline.size-lg,
.text-right .radio-inline.size-lg {
margin-left: 25px;
margin-right: 0;
}
.size-lg .icheckbox,
.size-lg .iradio {
width: 26px;
height: 26px;
border-width: 2px;
}
.size-lg .icheckbox,
.size-lg.radio-alt .iradio {
padding: 6px 0 0 5px !important;
}
.size-lg .icheckbox {
padding: 6px 0 0 6px !important;
}
.size-lg .iradio {
padding: 6px 0 0 6px;
}
.size-lg .icheckbox:before,
.size-lg.radio-alt .iradio:before {
font-family: "Flaticon";
content: '\e07c';
font-size: 13px;
-webkit-text-stroke-width: 1px;
-webkit-font-smoothing: antialiased;
}
.size-lg .iradio:before {
width: 10px;
height: 10px;
}
.light-color .checkbox,
.light-color .radio,
.light-color .checkbox-inline,
.light-color .radio-inline {
color: #fff;
}
.light-color .icheckbox,
.light-color .iradio {
border-color: #fff;
}
.light-color .icheckbox.checked,
.light-color .iradio.checked {
background-color: #fff;
}
.light-color .icheckbox:before,
.light-color .radio-alt .iradio:before {
color: #3a3a3a;
}
.light-color .iradio:before {
background-color: #3a3a3a;
}
.light-color .size-lg .iradio:before,
.light-color.size-lg .iradio:before {
background-color: #5e5e5e;
}
.light-color .size-lg .icheckbox:before,
.light-color.size-lg .icheckbox:before,
.light-color .size-lg.radio-alt .iradio:before,
.light-color.size-lg.radio-alt .iradio:before {
color: #5e5e5e;
}
.light-color .radio-alt .iradio:before {
background-color: transparent;
}
.icheckbox.disabled,
.iradio.disabled {
border-color: #fff;
background-color: #fff;
opacity: .6;
}
/** 06.BUTTONS
**********************************/
.btn {
display: inline-block;
height: 48px;
white-space: nowrap;
color: #3a3a3a;
text-decoration: none;
font-size: 14px;
font-weight: 600;
line-height: 46px;
text-align: center;
padding: 0 28px;
border: 1px solid #3a3a3a;
border-radius: 8px;
background-color: transparent;
vertical-align: middle;
margin: 10px 10px 10px 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn:hover,
.btn-round:hover {
color: #3a3a3a;
text-decoration: none;
outline: none;
box-shadow: none;
}
.btn:focus,
.btn-round:focus {
outline: none;
}
/* Button Variants */
.btn-default {
background: rgb(73,73,73);
background: -moz-linear-gradient(top, rgb(73,73,73) 0%, rgb(49,49,49) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgb(73,73,73)), color-stop(100%, rgb(49,49,49)));
background: -webkit-linear-gradient(top, rgb(73,73,73) 0%, rgb(49,49,49) 100%);
background: -o-linear-gradient(top, rgb(73,73,73) 0%, rgb(49,49,49) 100%);
background: -ms-linear-gradient(top, rgb(73,73,73) 0%, rgb(49,49,49) 100%);
background: linear-gradient(to bottom, rgb(73,73,73) 0%, rgb(49,49,49) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#313131', GradientType=0 );
border-color: rgb(73,73,73);
}
.btn-default:hover {
background: rgb(49,49,49);
background: -moz-linear-gradient(top, rgb(49,49,49) 0%, rgb(49,49,49) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgb(49,49,49)), color-stop(100%, rgb(49,49,49)));
background: -webkit-linear-gradient(top, rgb(49,49,49) 0%, rgb(49,49,49) 100%);
background: -o-linear-gradient(top, rgb(49,49,49) 0%, rgb(49,49,49) 100%);
background: -ms-linear-gradient(top, rgb(49,49,49) 0%, rgb(49,49,49) 100%);
background: linear-gradient(to bottom, rgb(49,49,49) 0%, rgb(49,49,49) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#313131', GradientType=0 );
border-color: rgb(49,49,49);
}
.btn-primary {
background-color: #007aff;
border-color: #007aff;
}
.btn-primary:hover {
background-color: #3396ff;
border-color: #3396ff;
}
.btn-success {
background-color: #4cd964;
border-color: #4cd964;
}
.btn-success:hover {
background-color: #74e286;
border-color: #74e286;
}
.btn-info {
background-color: #5ac8fa;
border-color: #5ac8fa;
}
.btn-info:hover {
background-color: #8dd9fb;
border-color: #8dd9fb;
}
.btn-warning {
background-color: #ffcc00;
border-color: #ffcc00;
}
.btn-warning:hover {
background-color: #ffd633;
border-color: #ffd633;
}
.btn-danger {
background-color: #ff2d55;
border-color: #ff2d55;
}
.btn-danger:hover {
background-color: #ff617e;
border-color: #ff617e;
}
/* Round Button */
.btn-round {
display: inline-block;
vertical-align: middle;
text-align: center;
width: 72px;
height: 72px;
border: 1px solid transparent;
border-radius: 50%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btn-round i {
font-size: 25px;
line-height: 70px;
}
.btn-round i.flaticon-correct7 {
font-size: 32px;
}
/* Ghost Buttons */
.btn-ghost {
background: transparent;
}
.btn-ghost.btn-default {
border-color: rgb(49,49,49);
color: rgb(49,49,49) !important;
}
.btn-ghost.btn-default:hover {
background-color: rgb(49,49,49);
}
.btn-ghost.btn-primary {
border-color: #007aff;
color: #007aff !important;
}
.btn-ghost.btn-primary:hover {
background-color: #007aff;
}
.btn-ghost.btn-success {
border-color: #4cd964;
color: #4cd964 !important;
}
.btn-ghost.btn-success:hover {
background-color: #4cd964;
}
.btn-ghost.btn-info {
border-color: #5ac8fa;
color: #5ac8fa !important;
}
.btn-ghost.btn-info:hover {
background-color: #5ac8fa;
}
.btn-ghost.btn-warning {
border-color: #ffcc00;
color: #ffcc00 !important;
}
.btn-ghost.btn-warning:hover {
background-color: #ffcc00;
}
.btn-ghost.btn-danger {
border-color: #ff2d55;
color: #ff2d55 !important;
}
.btn-ghost.btn-danger:hover {
background-color: #ff2d55;
}
.btn-default, .btn-primary, .btn-success,
.btn-info, .btn-warning, .btn-danger,
.btn-default:hover, .btn-primary:hover, .btn-success:hover,
.btn-info:hover, .btn-warning:hover, .btn-danger:hover,
.btn-ghost.btn-default:hover, .btn-ghost.btn-primary:hover, .btn-ghost.btn-success:hover,
.btn-ghost.btn-info:hover, .btn-ghost.btn-warning:hover, .btn-ghost.btn-danger:hover {
color: #fff !important;
}
/* Button Sizes */
.btn-lg {
height: 72px;
line-height: 70px;
border-radius: 12px;
padding: 0 34px;
}
.btn-sm {
height: 36px;
line-height: 34px;
border-radius: 4px;
}
.btn-xs {
height: 24px;
line-height: 22px;
font-size: 12px;
font-weight: normal;
border-radius: 2px;
}
/* Icons Alignment */
.btn i {
font-size: 16px;
}
.btn-xs i {
font-size: 14px;
}
.btn [class^="flaticon-"], .btn [class*=" flaticon-"],
.btn [class^="flaticon-"], .btn [class*=" flaticon-"] {
font-size: 19px;
vertical-align: middle;
margin-left: 0;
}
.btn i.icon-left {
margin-right: 1px;
}
.btn.icon-left [class^="flaticon-"], .btn.icon-left [class*=" flaticon-"],
.btn.icon-left [class^="flaticon-"], .btn.icon-left [class*=" flaticon-"] {
margin-right: 5px;
}
.btn i.icon-right {
margin-left: 1px;
}
.btn.icon-right [class^="flaticon-"], .btn.icon-right [class*=" flaticon-"],
.btn.icon-right [class^="flaticon-"], .btn.icon-right [class*=" flaticon-"] {
margin-left: 5px;
}
.btn.icon-left {
padding-left: 23px;
}
.btn.icon-right {
padding-right: 23px;
}
.btn-lg.icon-left {
padding-left: 28px;
}
.btn-lg.icon-right {
padding-right: 28px;
}
/* Special Buttons */
.btn-app-store {
padding: 10px 25px 12px 25px;
border-radius: 12px;
height: auto;
white-space: nowrap;
}
.btn-app-store i {
font-size: 36px;
vertical-align: middle;
margin-right: 8px;
}
.btn-app-store i:before {
margin: 0;
}
.btn-app-store div {
display: inline-block;
vertical-align: middle;
font-size: 23px;
font-weight: normal;
line-height: 1;
}
.btn-app-store div span {
display: block;
font-size: 14px;
font-weight: 300;
line-height: 1;
margin-bottom: 4px;
}
.btn-plus {
position: relative;
height: 48px;
line-height: 46px;
padding: 0 30px;
border-radius: 8px;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
}
.btn-plus:before {
position: absolute;
display: block;
content: "+";
top: -14px;
left: 5px;
font-size: 18px;
}
.btn.btn-light,
.btn-ghost.btn-light,
.light-color .btn-plus {
text-transform: uppercase;
font-size: 16px;
font-weight: normal;
border-color: #fff !important;
opacity: 1 !important;
}
.btn-plus.btn-sm {
height: 30px;
line-height: 28px;
padding: 0 20px;
border-radius: 4px;
}
.btn-plus.btn-sm:before {
top: -7px;
left: 3px;
font-size: 12px;
}
.btn.btn-light {
background-color: #fff;
color: #3a3a3a !important;
font-weight: normal;
}
.btn-light.btn-primary {
color: #007aff !important;
}
.btn-light.btn-success {
color: #4cd964 !important;
}
.btn-light.btn-info {
color: #5ac8fa !important;
}
.btn-light.btn-warning {
color: #ffcc00 !important;
}
.btn-light.btn-danger {
color: #ff2d55 !important;
}
.btn-ghost.btn-light {
color: #fff !important;
background-color: transparent;
}
.btn.btn-light:hover,
.light-color .btn-plus:hover {
background-color: rgba(255,255,255,0.2);
color: #fff !important;
}
.light-color .btn {
opacity: 1 !important;
}
.btn-block {
display: block;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
.downloadable {
display: inline-block;
max-width: 140px;
text-align: center;
color: #3a3a3a;
margin: 0 16px 40px 16px;
}
.downloadable img {
display: block;
max-width: 120px;
margin: 0 auto 25px auto;
}
.downloadable h5 {
font-weight: 300;
margin-bottom: 8px;
-webkit-text-stroke-width: .1px;
-webkit-font-smoothing: antialiased;
}
.downloadable p {
font-size: 12px;
color: #8e8e93;
margin-bottom: 0;
}
.load-more {
display: table;
margin: auto;
}
.load-more span {
display: block;
font-size: 14px;
color: #c4c4c4;
}
.load-more .shape {
margin: 10px auto;
opacity: 1;
-webkit-transition: opacity .25s;
transition: opacity .25s;
}
.load-more:hover .shape {
opacity: .5;
}
.load-more .shape,
.load-more .shape:before,
.load-more .shape:after {
position: relative;
display: block;
width: 8px;
height: 8px;
border: 1px solid #007aff;
border-radius: 50%;
}
.load-more .shape:before,
.load-more .shape:after {
position: absolute;
content: "";
top: -1px;
}
.load-more .shape:before {
left: -11px;
}
.load-more .shape:after {
right: -11px;
}
/** 07.INTRO
**********************************/
.intro,
.intro-slider {
position: fixed;
width: 100%;
min-height: 100%;
top: 0;
left: 0;
z-index: 1;
color: #fff;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-backface-visibility: hidden;
}
.intro-slider {
position: absolute;
min-height: initial;
z-index: 100;
}
.touch .intro,
.touch .intro-slider {
position: relative;
}
.fixed-footer .intro.transparent,
.fixed-footer .intro-slider.transparent {
opacity: 0;
}
.intro .gradient {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
min-height: 100%;
}
.intro .container,
.intro-slider .container, {
position: relative;
z-index: 10;
}
/* Social Buttons */
.intro .social-buttons,
.intro-slider .social-buttons,
.offcanvas-nav .social-buttons {
position: absolute;
top: 0;
padding-top: 36px;
}
.intro .social-buttons a,
.intro-slider .social-buttons a,
.offcanvas-nav .social-buttons a {
color: #fff;
}
/* Navi */
.intro .navi,
.intro-slider .navi {
position: absolute;
top: 36px;
right: 0;
text-align: right;
font-size: 14px;
}
.intro-slider .navi {
right: 15px;
}
.intro .navi a,
.intro-slider .navi a {
color: #fff;
opacity: .55;
-webkit-backface-visibility: hidden;
}
.intro .navi a:hover,
.intro-slider .navi a:hover {
opacity: 1;
}
.nav-toggle {
display: inline-block;
vertical-align: middle;
color: #fff;
cursor: pointer;
margin-left: 27px;
opacity: .55;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
.nav-toggle i {
font-size: 22px;
margin: 0;
}
.nav-toggle:hover {
opacity: 1;
}
.nav-toggle.nav-open {
opacity: 0;
}
/* Into Columns */
.column-wrap {
display: table;
width: 100%;
}
.intro .column,
.intro-slider .column {
position: relative;
display: table-cell;
vertical-align: bottom;
z-index: 10;
text-align: center;
}
.intro .column.c-left,
.intro .column.c-right,
.intro-slider .column.c-left,
.intro-slider .column.c-right {
width: 30%;
}
.intro .column.c-middle,
.intro-slider .column.c-middle {
width: 40%;
}
/* Logo */
.intro .logo {
text-align: center;
padding-top: 20px;
margin-bottom: -20px;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.intro .logo img {
display: block;
width: 100%;
max-width: 180px;
margin: 0 auto 30px auto;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.intro .logo span {
display: block;
font-size: 16px;
margin-top: 25px;
opacity: .5;
}
/* Phone */
.intro .phone {
position: relative;
width: 490px;
height: 892px;
background-image: url('../img/intro/iphone.png');
background-repeat: no-repeat;
background-size: cover;
padding: 151px 83px 0 84px;
margin: 0 auto -500px auto;
overflow: hidden;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-backface-visibility: hidden;
}
.intro .phone:after {
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
z-index: 10;
width: 490px;
height: 892px;
background-image: url('../img/intro/phone-reflection.png');
background-repeat: no-repeat;
background-size: cover;
}
.intro .phone img {
display: block;
width: 100%;
max-width: 100%;
}
.intro .intro-features {
-webkit-transform: translateY(-120px);
transform: translateY(-120px);
}
/* Scroll for More Btn */
.scroll-more {
display: inline-block;
height: 36px;
color: #fff;
text-decoration: none;
font-size: 14px;
-webkit-backface-visibility: hidden;
margin-bottom: 65px;
}
.scroll-more:hover,
.scroll-more:focus {
color: #fff;
text-decoration: none;
}
.scroll-more span {
display: inline-block;
vertical-align: middle;
opacity: .5;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.scroll-more:hover span {
opacity: 1;
}
.scroll-more .icon {
position: relative;
display: inline-block;
width: 36px;
height: 36px;
vertical-align: middle;
border: 1px solid #fff;
border-radius: 50%;
margin-right: 8px;
padding: 8px 0 0 12px;
}
.scroll-more .icon:before {
display: block;
width: 10px;
height: 18px;
content: "";
border: 1px solid #fff;
border-radius: 12px;
}
.scroll-more .icon:after {
position: absolute;
display: block;
top: 11px;
left: 16px;
width: 2px;
height: 4px;
content: "";
background-color: #fff;
-webkit-animation: scroll 1.2s infinite;
animation: scroll 1.2s infinite;
}
@-webkit-keyframes scroll {
0% { opacity: .8; -webkit-transform: translateY(0); }
60% { opacity: .6; }
100% { opacity: 0; -webkit-transform: translateY(8px); }
}
@-moz-keyframes scroll {
0% { opacity: .8; -moz-transform: translateY(0); }
60% { opacity: .6; }
100% { opacity: 0; -moz-transform: translateY(8px); }
}
@-ms-keyframes scroll {
0% { opacity: .8; -ms-transform: translateY(0); }
60% { opacity: .6; }
100% { opacity: 0; -ms-transform: translateY(8px); }
}
@keyframes scroll {
0% { opacity: .8; transform: translateY(0); }
60% { opacity: .6; }
100% { opacity: 0; transform: translateY(8px); }
}
.intro .intro-features .icon-block {
opacity: 0;
-webkit-transform: translateX(50px);
transform: translateX(50px);
-webkit-transition: opacity .5s, -webkit-transform .5s;
transition: opacity .5s, transform .5s;
}
/* Transform Animation */
.intro.transformed .logo {
-webkit-transform: translate(-75%, -40%);
transform: translate(-75%, -40%);
}
.intro.transformed .logo img {
max-width: 96px;
}
.intro.transformed .phone {
-webkit-transform: translateY(-55%) scale(0.75);
transform: translateY(-55%) scale(0.75);
}
.intro.transformed .intro-features .icon-block {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
/* Download Button */
.download {
margin-bottom: 35px;
}
.download p {
margin-bottom: 4px;
margin-left: -10px;
font-size: 14px;
opacity: .6;
}
@media screen and (max-height: 900px) {
.intro .phone {
margin-bottom: -550px;
}
.intro.transformed .logo {
-webkit-transform: translate(-75%, -15%);
transform: translate(-75%, -15%);
}
.intro.transformed .phone {
-webkit-transform: translateY(-50%) scale(0.75);
transform: translateY(-50%) scale(0.75);
}
.intro .intro-features {
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
}
}
@media screen and (max-height: 750px) {
.intro .phone {
margin-bottom: -580px;
}
.intro .intro-features {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
@media screen and (max-height: 660px) {
.intro .phone {
margin-bottom: -630px;
}
.intro .intro-features {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@media screen and (max-width: 1200px) {
.intro .logo {
margin-bottom: -20px;
font-size: 40px;
}
.intro .logo img {
max-width: 130px;
margin: 0 auto 20px auto;
}
.intro .logo span {
font-size: 16px;
margin-top: 15px;
}
.intro .phone {
width: 390px;
height: 709px;
padding: 121px 67px 0 68px;
margin-bottom: -420px;
}
.intro .phone:after {
width: 390px;
height: 709px;
}
.intro .column.c-left,
.intro .column.c-right,
.intro-slider .column.c-left,
.intro-slider .column.c-right {
width: 33.33%;
}
.intro .column.c-middle,
.intro-slider .column.c-middle {
width: 33.33%;
}
.intro .intro-features {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@media screen and (max-width: 991px) {
.intro .container,
.intro-slider .container {
width: 100%;
}
.intro.transformed .logo {
-webkit-transform: translate(-70%, -15%);
transform: translate(-70%, -15%);
}
}
@media screen and (max-width: 850px) {
.intro .column.c-left,
.intro .column.c-right,
.intro-slider .column.c-left,
.intro-slider .column.c-right {
width: 0px;
}
.intro .column.c-middle,
.intro-slider .column.c-middle {
width: 100%;
z-index: 1;
}
.intro .phone {
margin-bottom: -480px;
}
.intro .intro-features,
.intro .scroll-more,
.intro .download {
display: none;
}
.intro .social-buttons,
.intro .navi,
.intro-slider .social-buttons,
.intro-slider .navi {
position: fixed;
z-index: 10;
}
.touch .intro .social-buttons,
.touch .intro .navi,
.touch .intro-slider .social-buttons,
.touch .intro-slider .navi {
position: absolute;
white-space: nowrap;
}
.intro .navi,
.intro-slider .navi, {
right: 15px;
}
.modal-open .intro .navi,
.modal-open .intro-slider .navi {
right: 32px;
}
.mac .modal-open .intro .navi,
.touch .modal-open .intro .navi,
.mac .modal-open .intro-slider .navi,
.touch .modal-open .intro-slider .navi {
right: 15px;
}
.intro.transformed .logo {
-webkit-transform: none;
transform: none;
}
.intro.transformed .logo img {
max-width: 130px;
}
.intro.transformed .phone {
-webkit-transform: none;
transform: none;
}
.intro.transformed .intro-features .icon-block {
-webkit-transform: none;
transform: none;
}
}
@media screen and (max-width: 440px) {
.intro .logo {
margin-bottom: -20px;
font-size: 40px;
}
.intro .logo {
font-size: 35px;
}
.intro .logo img {
max-width: 100px;
margin: 0 auto 15px auto;
}
.intro.transformed .logo img {
max-width: 100px;
}
.intro .logo span {
font-size: 15px;
margin-top: 15px;
}
.intro .phone {
width: 320px;
height: 582px;
padding: 100px 55px 0 56px;
margin-bottom: -390px;
}
.intro .phone:after {
width: 320px;
height: 582px;
}
.intro .social-buttons,
.intro-slider .social-buttons {
display: none;
}
}
@media screen and (max-width: 330px) {
.intro .logo {
margin-left: -7px;
}
.intro .phone {
margin-left: -15px;
}
}
/** 08.MAIN CONTENT WRAP
**********************************/
.content-wrap {
position: relative;
z-index: 20;
background-color: #fff;
-webkit-backface-visibility: hidden;
}
/** 09.NAVBAR
**********************************/
.navbar {
position: relative;
z-index: 100;
width: 100%;
height: 96px;
background-color: #fff;
-webkit-backface-visibility: hidden;
}
.navbar.gray {
background-color: #fafafa;
}
.navbar.navbar-fixed-top {
position: fixed;
top: 0;
}
.navbar.navbar-fixed-top + * {
padding-top: 96px;
}
.navbar.navbar-fixed-top + .page-heading {
padding-top: 152px;
}
.navbar-sticky.stuck {
position: fixed;
top: 0;
}
.navbar:before,
.navbar:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.navbar:after {
clear: both;
}
.navbar .logo {
height: 48px;
font-size: 18px;
line-height: 94px;
font-weight: 300;
color: #8e8e93;
text-decoration: none;
margin-right: 40px;
}
.navbar .logo img {
display: inline-block;
width: 48px;
margin-right: 12px;
vertical-align: middle;
}
.navbar .social-buttons {
display: inline-block;
}
.navbar .toolbar {
float: right;
text-align: right;
padding-top: 14px;
}
.navbar .toolbar a {
font-size: 14px;
}
.navbar .toolbar span {
display: inline-block;
vertical-align: middle;
font-size: 12px;
color: #8e8e93;
margin-right: 15px;
}
.navbar .toolbar .action-btn {
position: relative;
margin: 0 27px 0 18px;
}
.navbar .toolbar .action-btn:hover {
opacity: 1;
}
.navbar .nav-toggle {
color: #007aff;
opacity: 1;
margin-left: 0;
}
.nav-toggle.nav-open {
opacity: 0;
}
.navbar .nav-toggle:hover {
color: #4da3ff;
}
@media screen and (max-width: 768px) {
.navbar .container {
padding: 0 15px;
}
}
/** 10.OFF-CANVAS NAVIGATION
*************************************/
.offcanvas-nav {
position: fixed;
z-index: 1000;
width: 385px;
min-height: 100%;
top: 0;
right: 0;
-webkit-box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.22);
-moz-box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.22);
box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.22);
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.785, 0.135, 0.150, 0.860), visibility 400ms;
-moz-transition: transform 400ms cubic-bezier(0.785, 0.135, 0.150, 0.860), visibility 400ms;
-o-transition: transform 400ms cubic-bezier(0.785, 0.135, 0.150, 0.860), visibility 400ms;
transition: transform 400ms cubic-bezier(0.785, 0.135, 0.150, 0.860), visibility 400ms; /* easeInOutCirc */
}
.offcanvas-nav.open {
visibility: visible;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.offcanvas-backdrop {
display: block;
position: fixed;
z-index: 995;
width: 100%;
min-height: 100%;
top: 0;
left: 0;
cursor: pointer;
}
.offcanvas-nav:before {
position: absolute;
display: block;
content: "";
width: 100%;
min-height: 100%;
top: 0;
left: 0;
background-image: url(../img/offcanvas-bg.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: .97;
}
.offcanvas-nav .nav-head,
.offcanvas-nav .nav-body {
position: relative;
z-index: 10;
padding: 30px 40px;
}
.offcanvas-nav .nav-body {
padding: 30px 0;
}
.offcanvas-nav .nav-body .inner {
padding: 0 40px;
}
.offcanvas-nav .nav-head {
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.offcanvas-nav .top-bar {
position: relative;
width: 100%;
margin-bottom: 35px;
}
.offcanvas-nav .nav-toggle {
margin-left: 0;
margin-right: 7px;
}
.search-box,
.search-box-static {
position: relative;
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 267px;
height: 36px;
}
.search-box input,
.search-box-static input {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
max-width: 0px;
height: 36px;
border: none;
background-color: #fff;
border-radius: 18px;
padding-left: 38px;
padding-right: 15px;
font-size: 14px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.search-box-static input {
position: relative;
opacity: 1;
visibility: visible;
max-width: 270px;
}
.search-box input:focus,
.search-box-static input:focus {
outline: none;
}
.search-icon {
position: relative;
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
border: 1px solid #007aff;
border-radius: 50%;
cursor: pointer;
}
.search-icon:before {
position: absolute;
display: block;
content: "";
width: 2px;
height: 7px;
background-color: #007aff;
bottom: -5px;
right: -2px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.offcanvas-nav .search-toggle.search-icon {
border-color: #fff;
}
.offcanvas-nav .search-toggle.search-icon:before {
background-color: #fff;
}
.search-box .search-toggle,
.search-box .search-btn,
.search-box-static .search-toggle,
.search-box-static .search-btn {
display: block;
position: absolute;
padding: 0;
left: 12px;
top: 10px;
}
.search-box .search-toggle {
z-index: 1;
opacity: 1;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.search-box .search-toggle:hover {
opacity: .7;
}
.search-box .search-btn,
.search-box-static .search-btn {
z-index: 3;
background: none;
border: none;
outline: none;
top: 7px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.search-box.open .search-btn,
.search-box.open input,
.search-box-static .search-btn {
opacity: 1;
visibility: visible;
}
.search-box.open input {
max-width: 267px;
}
.offcanvas-nav .search-box .search-toggle {
opacity: .5;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.offcanvas-nav .search-box .search-toggle:hover {
opacity: 1;
}
.offcanvas-nav .social-buttons {
z-index: 5;
top: 0;
right: 0;
padding-top: 6px;
}
.offcanvas-nav .social-buttons a {
margin: 5px 0 10px 12px;
}
.offcanvas-logo {
display: table;
width: 100%;
color: #fff;
margin-bottom: 30px;
}
.offcanvas-logo:hover,
.offcanvas-logo:focus {
color: #fff;
}
.offcanvas-logo .icon,
.offcanvas-logo .title {
display: table-cell;
vertical-align: middle;
}
.offcanvas-logo .icon img {
max-width: 96px;
}
.offcanvas-logo .title {
padding-left: 4px;
font-size: 24px;
font-weight: 300;
}
.offcanvas-logo .title span {
display: block;
font-size: 15px;
opacity: .5;
margin-top: 10px;
}
@media screen and (max-height: 500px) {
.offcanvas-logo {
display: none;
}
}
.offcanvas-nav .link {
color: #fff !important;
opacity: 0.5;
}
.offcanvas-nav .link:hover {
opacity: 1;
}
.offcanvas-nav .btn {
font-size: 14px;
font-weight: normal;
text-transform: none;
margin-right: 20px;
}
.offcanvas-nav .btn.icon-left {
padding-left: 23px;
}
.offcanvas-nav a.nav-link,
.offcanvas-nav .nav-link a {
font-size: 14px;
color: #fff;
opacity: .5;
margin-right: 15px;
font-weight: 300;
}
.offcanvas-nav a.nav-link:hover,
.offcanvas-nav .nav-link a:hover,
.offcanvas-nav .nav-link ul li.active a {
opacity: 1;
}
.offcanvas-nav .nav-link .scroll-nav {
display: inline-block;
margin-right: -5px;
}
.offcanvas-nav .nav-link ul {
display: inline-block;
vertical-align: top;
list-style: none;
padding: 0;
margin-left: 16px;
}
.offcanvas-nav .nav-link ul.pages a {
font-weight: 600;
}
.offcanvas-nav .nav-link ul:first-child {
margin-left: 0;
}
.offcanvas-nav .nav-link ul li {
margin-bottom: 8px;
}
.offcanvas-tabs {
margin: 30px -40px;
}
.offcanvas-tabs .nav-tabs {
padding: 0 40px;
margin-bottom: 5px;
}
.offcanvas-tabs .nav-tabs li {
display: block;
float: left;
width: 50%;
text-align: center;
margin: 10px 0;
}
.offcanvas-tabs .nav-tabs li a,
.offcanvas-tabs .nav-tabs li a:hover,
.offcanvas-tabs .nav-tabs li a:focus {
display: block;
text-transform: none;
color: #fff;
background-color: rgba(255,255,255,0.25);
font-weight: normal;
padding: 10px;
margin: 0;
opacity: 1;
}
.offcanvas-tabs .nav-tabs li a:after {
display: none;
}
.offcanvas-tabs .nav-tabs li.active a,
.offcanvas-tabs .nav-tabs li.active a:hover,
.offcanvas-tabs .nav-tabs li.active a:focus {
color: #3a3a3a;
background-color: #dbd9da;
}
.offcanvas-tabs .nav-tabs li:first-child a {
border-radius: 6px 0 0 6px;
}
.offcanvas-tabs .nav-tabs li:last-child a {
border-radius: 0 6px 6px 0;
}
.offcanvas-nav .offcanvas-tabs .twitter-feed {
padding: 0 40px;
}
.offcanvas-nav .twitter-feed .tweet:first-child {
margin-top: 10px;
}
.offcanvas-nav .twitter-feed .tweet {
margin: 35px 0;
}
.offcanvas-nav .twitter-feed .tweet a,
.offcanvas-nav .twitter-feed .tweet .author {
color: #fff;
font-weight: normal;
opacity: .6;
}
.offcanvas-nav .twitter-feed .tweet a:hover,
.offcanvas-nav .twitter-feed .tweet .author:hover {
color: #fff;
opacity: 1;
}
.offcanvas-nav .twitter-feed .tweet p {
color: #fff;
font-weight: 300;
}
.offcanvas-posts .post {
position: relative;
display: block;
padding: 20px 75px 20px 40px;
color: #fff;
font-weight: 300;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.offcanvas-posts .post:before {
position: absolute;
display: block;
font-family: "Flaticon";
content: "\e0d3";
font-size: 22px;
top: 20px;
right: 50px;
opacity: .5;
}
.offcanvas-posts .post:hover {
color: #fff;
background-color: rgba(255,255,255,0.15);
}
.offcanvas-posts .post span,
.offcanvas-posts .post p {
display: block;
opacity: .5;
font-size: 14px;
margin-top: 10px;
line-height: 1.5;
}
.offcanvas-instagram {
padding-bottom: 30px;
}
.offcanvas-instagram .instgr-row {
margin-bottom: 25px;
}
.offcanvas-instagram .instgr-row a {
display: block;
float: left;
width: 100%;
max-width: 85px;
margin-left: 25px;
opacity: .5;
-webkit-backface-visibility: hidden;
}
.offcanvas-instagram .instgr-row a:first-child {
margin-left: 0;
}
.offcanvas-instagram .instgr-row a:hover {
opacity: 1;
}
.widget {
margin: 40px 0;
}
.widget:first-child {
margin-top: 0;
}
.offcanvas-nav .widget {
margin: 25px 0;
}
.offcanvas-nav .widget:first-child {
margin-top: 25px;
}
.widget-title {
font-size: 16px;
color: #8e8e93;
line-height: 1.5;
margin-bottom: 20px;
}
.offcanvas-nav .widget-title {
color: #fff;
opacity: 0.5;
}
.offcanvas-posts > p {
color: #fff;
font-size: 14px;
}
@media screen and (max-width: 480px) {
.offcanvas-nav {
width: 280px;
}
.offcanvas-nav .nav-head,
.offcanvas-nav .nav-body {
padding: 22px 25px;
}
.offcanvas-nav .nav-body {
padding: 22px 0;
}
.offcanvas-nav .nav-body .inner {
padding: 0 25px;
}
.search-box,
.search-box.open input {
max-width: 195px;
}
.offcanvas-nav .top-bar {
margin-bottom: 30px;
}
.offcanvas-logo {
margin-bottom: 25px;
}
.offcanvas-logo .icon img {
max-width: 74px;
}
.offcanvas-logo .title {
padding-left: 15px;
font-size: 22px;
}
.offcanvas-logo .title span {
font-size: 14px;
}
.offcanvas-nav .btn {
margin-right: 10px;
}
.offcanvas-nav .btn > i {
display: none;
}
.offcanvas-nav .btn {
padding-left: 18px;
padding-right: 18px;
}
.offcanvas-nav a.nav-link,
.offcanvas-nav .nav-link a {
margin-right: 10px;
}
.offcanvas-nav .nav-link ul,
.offcanvas-nav .nav-link ul:first-child {
margin-left: 0;
margin-right: 20px;
}
.offcanvas-instagram {
padding-bottom: 15px;
}
.offcanvas-instagram .instgr-row {
margin-bottom: 15px;
}
.offcanvas-instagram .instgr-row a {
display: block;
float: left;
width: 100%;
max-width: 62px;
margin-left: 15px;
opacity: .5;
}
.offcanvas-instagram .instgr-row a:hover {
opacity: 1;
}
}
/** 11.FULLWIDTH BACKGROUNDS
*************************************/
.fw-bg {
position: relative;
width: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.fw-bg.bg-align-bottom {
background-position: center bottom;
}
.fw-bg.bg-align-top {
background-position: center top;
}
.fw-bg .container {
position: relative;
z-index: 10;
}
.fw-bg.overlay:before,
.fw-bg.partial-overlay:before {
position: absolute;
display: block;
z-index: 1;
content: "";
width: 100%;
min-height: 100%;
top: 0;
left: 0;
}
.fw-bg.partial-overlay:before {
width: 45%;
}
@media screen and (max-width: 1200px) {
.fw-bg.partial-overlay:before {
width: 55%;
}
}
@media screen and (max-width: 991px) {
.fw-bg.partial-overlay:before {
width: 67%;
}
}
@media screen and (max-width: 768px) {
.fw-bg.partial-overlay:before {
width: 100%;
}
}
.fw-bg.partial-overlay.right-aligned:before {
left: auto;
right: 0;
}
.fw-gray-bg,
.fw-white-bg {
position: relative;
width: 100%;
background-color: #f5f5f5;
}
.fw-white-bg {
background-color: #fff;
}
.fw-bg.bottom-shadow:after {
position: absolute;
display: block;
content: "";
z-index: 20;
width: 100%;
height: 70px;
bottom: 0;
left: 0;
opacity: .12;
filter: alpha(opacity=12);
background: -moz-linear-gradient(top, rgba(255,255,255,0.01) 0%, rgba(0,0,0,0.62) 50%, rgba(0,0,0,1) 81%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.01)), color-stop(50%,rgba(0,0,0,0.62)), color-stop(81%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(0,0,0,0.62) 50%,rgba(0,0,0,1) 81%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(0,0,0,0.62) 50%,rgba(0,0,0,1) 81%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(0,0,0,0.62) 50%,rgba(0,0,0,1) 81%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0.01) 0%,rgba(0,0,0,0.62) 50%,rgba(0,0,0,1) 81%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.fw-container {
display: table;
width: 100%;
}
.column {
position: relative;
display: table-cell;
vertical-align: top;
}
.column.w-60 {
width: 60%;
}
.column.w-40 {
width: 40%;
}
@media screen and (max-width: 768px) {
.fw-container, .column,
.column.w-60, .column.w-40 {
display: block;
width: 100%;
}
}
/** 12.TABS / FILTERS
**********************************/
.nav-filters {
padding: 12px 0;
}
.nav-tabs {
padding-bottom: 15px;
}
.nav-tabs > li,
.nav-filters > li {
float: none;
display: inline-block;
margin-right: 18px;
}
.text-right .nav-tabs > li,
.nav-filters.text-right > li {
margin-right: 0;
margin-left: 18px;
}
.text-center .nav-tabs > li,
.nav-filters.text-center > li {
margin-right: 9px;
margin-left: 9px;
}
.nav-tabs > li > a,
.nav-filters > li > a {
font-size: 14px;
text-transform: uppercase;
border-radius: 0;
padding: 5px 0;
opacity: .5;
}
.nav-tabs > li > a:after,
.nav-filters > li > a:after {
display: block;
content: "";
width: 0px;
height: 2px;
background-color: #007aff;
margin-top: 3px;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.nav-tabs,
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border: none;
background: none;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-filters > li > a:hover,
.nav-filters > li > a:focus,
.nav-filters > li.active > a,
.nav-filters > li.active > a:hover,
.nav-filters > li.active > a:focus {
opacity: 1;
color: #007aff;
}
.nav-tabs > li.active > a:after,
.nav-filters > li.active > a:after {
width: 100%;
opacity: 1;
}
.nav-tabs.nav-vertical > li,
.nav-filters.nav-vertical > li {
display: block;
margin: 12px 0;
}
.nav-tabs.nav-vertical > li > a,
.nav-filters.nav-vertical > li > a {
display: inline-block;
}
@media screen and (max-width: 768px) {
.nav-tabs.nav-vertical > li,
.nav-filters.nav-vertical > li {
display: inline-block;
margin: 0 18px 0 0;
}
.nav-tabs.nav-vertical > li > a,
.nav-filters.nav-vertical > li > a {
display: block;
}
.nav-tabs.text-right > li,
.nav-filters.text-right > li {
margin-right: 0;
margin-left: 18px;
}
}
.tab-pane {
padding-top: 10px;
}
.tab-pane img {
display: block;
margin: auto;
}
.transition.fade,
.fade {
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.scale.fade {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.scaleup.fade {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.scale.fade.in,
.scaleup.fade.in {
-webkit-transform: scale(1);
transform: scale(1);
}
.left.fade {
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
}
.right.fade {
-webkit-transform: translateX(40px);
transform: translateX(40px);
}
.left.fade.in,
.right.fade.in {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.top.fade {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
.bottom.fade {
-webkit-transform: translateY(40px);
transform: translateY(40px);
}
.top.fade.in,
.bottom.fade.in {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.flip.fade {
-webkit-transform: rotateY(-90deg) scale(1.1);
transform: rotateY(-90deg) scale(1.1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.flip.fade.in {
-webkit-transform: rotateY(0deg) scale(1);
transform: rotateY(0deg) scale(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
/** 13.FEATURE TABS
**********************************/
.feature-tabs {
padding: 90px 15px 0 20px;
}
.feature-tabs .devices {
position: relative;
float: left;
width: 56.4%;
max-width: 1025px;
}
.feature-tabs .tabs {
float: left;
width: 43.6%;
max-width: 550px;
padding-left: 7%;
margin-top: 80px;
}
.feature-tabs .devices img {
width: 100%;
height: auto;
}
.feature-tabs .tablet {
position: relative;
overflow: hidden;
}
.feature-tabs .phone {
position: absolute;
z-index: 10;
bottom: -6.5%;
right: -8%;
width: 34.5%;
max-width: 360px;
overflow: hidden;
}
.feature-tabs .nav-tabs {
text-align: center;
margin: 70px 0 25px 0;
padding: 0;
}
.feature-tabs .nav-tabs > li {
margin: 3px 16px;
}
.feature-tabs .nav-tabs > li > a > i {
font-size: 50px;
}
.feature-tabs .nav-tabs > li > a:after {
display: none;
}
.feature-tabs .tab-pane p {
font-size: 14px;
}
.light-color .tab-pane p,
.light-color.tab-pane p {
font-weight: 300;
}
.feature-tabs .light-color .tab-pane p,
.light-color .feature-tabs .tab-pane p {
opacity: .6;
}
.devices .tablet .mask,
.devices .phone .mask {
position: absolute;
overflow: hidden;
}
.devices .tablet .screens,
.devices .phone .screens {
list-style: none;
padding: 0;
margin: 0;
}
.devices .tablet .screens li,
.devices .phone .screens li {
position: absolute;
z-index: 1;
top: 0;
left: 0;
line-height: 0;
opacity: 0;
-webkit-transform: scale(1.15);
transform: scale(1.15);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.devices .tablet .screens li.active,
.devices .phone .screens li.active {
position: relative;
z-index: 5;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.devices .tablet .mask {
top: 6.5%;
left: 9.15%;
right: 9.05%;
}
.devices .phone .mask {
top: 17%;
left: 17.1%;
right: 17%;
}
.visible-when-stack {
display: none;
text-align: center;
}
@media screen and (max-width: 1440px) {
.feature-tabs .tabs,
.feature-tabs .nav-tabs {
margin-top: 40px;
}
}
@media screen and (max-width: 1200px) {
.feature-tabs {
padding-top: 50px;
}
.feature-tabs .nav-tabs > li {
margin: 3px 14px;
}
.feature-tabs .nav-tabs > li > a > i {
font-size: 45px;
}
.feature-tabs .devices {
margin-top: 40px;
}
}
@media screen and (max-width: 1050px) {
.feature-tabs {
padding: 70px 15px 60px 15px;
}
.feature-tabs .tabs,
.feature-tabs .devices {
width: 100%;
float: none;
}
.feature-tabs .devices {
margin-top: 15px;
padding-right: 4%;
overflow: hidden;
}
.feature-tabs .devices .phone {
right: -4.5%;
bottom: -7%;
}
.feature-tabs .tabs {
padding-left: 0;
margin: 40px auto 0 auto;
}
.visible-when-stack {
display: block;
}
.hidden-when-stack {
display: none;
}
}
@media screen and (max-width: 500px) {
.feature-tabs {
padding-top: 50px;
}
}
/** 14.MODAL
**********************************/
.modal {
background-color: #fff;
-webkit-backface-visibility: hidden;
}
.modal-dialog {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
.modal-content {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
}
.modal-dialog .container {
padding: 90px 15px 50px 15px;
}
.modal.fade {
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
opacity: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.modal.fade .modal-dialog {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.modal.fade.in {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.modal-backdrop {
display: none;
}
.modal-title {
font-size: 24px;
font-weight: 300;
color: #c4c4c4;
}
.modal-form {
width: 100%;
max-width: 380px;
margin: auto;
}
.modal-open .navbar.stuck,
.modal-open .navbar.navbar-fixed-top,
.modal-open .footer-fixed-bottom {
padding-right: 17px;
}
.modal-open .intro,
.modal-open .intro-slider {
width: calc(100% - 17px);
}
.modal-open .offcanvas-nav.open {
right: 17px;
}
.fake-scrollbar {
display: none;
position: fixed;
z-index: 100;
top: 0;
right: 0;
width: 17px;
min-height: 100%;
background-color: #f1f1f1;
}
.modal-open .fake-scrollbar {
display: block;
padding-right: 17px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.modal-open,
.modal-open .navbar.stuck,
.modal-open .navbar.navbar-fixed-top,
.modal-open .footer-fixed-bottom {
padding-right: 0 !important;
}
.modal-open .intro {
width: 100%;
}
.modal-open .offcanvas-nav.open {
right: 0;
}
.modal-open .fake-scrollbar {
display: none;
padding-right: 0;
}
}
.mac .modal-open,
.touch .modal-open,
.mac .modal-open .navbar.stuck,
.touch .modal-open .navbar.stuck,
.mac .modal-open .navbar.navbar-fixed-top,
.touch .modal-open .navbar.navbar-fixed-top,
.mac .modal-open .footer-fixed-bottom,
.touch .modal-open .footer-fixed-bottom {
padding-right: 0 !important;
}
.mac .modal-open .intro,
.touch .modal-open .intro {
width: 100%;
}
.mac .modal-open .offcanvas-nav.open,
.touch .modal-open .offcanvas-nav.open {
right: 0;
}
.mac .modal-open .fake-scrollbar,
.touch .modal-open .fake-scrollbar {
display: none;
padding-right: 0;
}
/** 15.ICON BLOCKS
**********************************/
.icon-block {
display: block;
margin-bottom: 40px !important;
}
.intro .icon-block {
margin-bottom: 10px;
}
a.icon-block {
text-decoration: none;
}
@media screen and (max-width: 768px) {
.icon-block {
margin-bottom: 30px;
}
}
.icon-block .icon {
display: block;
margin-bottom: 28px;
}
.icon-block .icon i {
font-size: 45px;
}
.icon-block .icon.icon-bigger i {
font-size: 72px;
}
.icon-block .icon img {
display: inline-block;
width: 100%;
max-width: 128px;
}
.icon-block .text p {
font-size: 14px;
}
.icon-block.icon-block-horizontal {
display: table;
}
.icon-block-horizontal.icon-block .icon {
display: table-cell;
padding: 0 38px;
}
.intro .icon-block-horizontal.icon-block .icon {
padding: 0 25px 0 0;
}
.icon-block-horizontal.icon-block .icon.va-middle {
vertical-align: middle;
}
.icon-block-horizontal.icon-block .text {
display: table-cell;
vertical-align: top;
}
.intro-features .icon-block-horizontal.icon-block .text {
text-align: left;
}
@media screen and (max-width: 1200px) {
.intro .icon-block .icon i {
font-size: 38px;
}
.intro .icon-block h3 {
font-size: 22px;
margin-bottom: 12px;
}
.intro .icon-block p {
font-size: 13px;
}
.intro .icon-block-horizontal.icon-block .icon {
padding: 0 20px 0 0;
}
}
@media screen and (max-width: 768px) {
.icon-block-horizontal.icon-block .icon {
padding: 8px 15px 0 15px;
}
}
.light-color .icon-block .text p,
.icon-block.light-color .text p,
.icon-block .text.light-color p,
.icon-block .text p.light-color {
font-weight: 300;
}
.appica-versions .icon-block .text {
margin-top: -15px;
}
.appica-versions .icon-block .text span {
display: block;
font-size: 12px;
margin-top: -10px;
}
@media screen and (max-width: 480px) {
.appica-versions .icon-block .text h3 {
font-size: 18px;
}
}
/** 16.APP GALLERY
**********************************/
.app-gallery .item {
display: inline-block;
max-width: 380px;
margin-right: 5px;
}
.app-gallery .item a {
position: relative;
display: block;
background-color: #007aff;
margin: 0 1px 5px 1px;
}
.app-gallery .item a:before {
display: block;
content: "";
position: absolute;
z-index: 1;
width: 100%;
min-height: 100%;
background-color: #007aff;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.app-gallery .item a:after {
position: absolute;
z-index: 2;
display: block;
content: "+";
top: 12px;
right: 12px;
line-height: 16px;
color: #fff;
font-size: 28px;
opacity: 0;
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.app-gallery .item a:hover:before {
opacity: .3;
}
.app-gallery .item a:hover:after {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
@media screen and (max-width: 991px) {
.app-gallery .item {
max-width: 320px;
}
}
@media screen and (max-width: 768px) {
.app-gallery .item {
max-width: 280px;
}
.gallery .block-heading,
.gallery .nav-tabs {
text-align: center !important;
}
.gallery .nav-tabs > li {
margin-right: 9px;
margin-left: 9px;
}
}
/** 17.GALLERY
**********************************/
.gallery-item,
.gallery-item figure {
position: relative;
display: block;
}
.gallery-item {
margin-bottom: 30px;
}
.gallery-item:before {
position: absolute;
z-index: 2;
display: block;
width: 50px;
height: 36px;
top: 50%;
left: 7.8%;
font-family: "Flaticon";
font-size: 50px;
color: #fff;
margin-top: -25px;
text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
-webkit-transition: all .3s;
transition: all .3s;
}
.gallery-item.image-item:before {
content: "\e060";
}
.gallery-item.video-item:before {
font-size: 26px;
line-height: 36px;
padding-left: 7px;
content: "\e0ea";
width: 36px;
border: 1px solid #fff;
border-radius: 50%;
margin-top: -18px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
}
.gallery-item figcaption {
display: block;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: #fff;
padding: 12% 18% 8% 28%;
text-align: left;
margin-top: 0;
overflow: hidden;
background-color: rgba(0,122,255,0.6);
visibility: hidden;
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s;
}
.gallery-item.video-item figcaption {
padding-left: 25%;
}
.gallery-item figcaption h3 {
opacity: 1;
margin-bottom: 8px;
-webkit-transition: all .3s;
transition: all .3s;
}
.gallery-item .title-only h3 {
position: absolute;
top: 50%;
margin-top: -17px;
}
/*.gallery-item.video-item .title-only h3 {
*/.gallery-item figcaption p {
font-size: 14px;
font-weight: 300;
}
.gallery-item:hover:before {
text-shadow: 2px 2px 5px rgba(0,0,0,0);
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0);
}
.gallery-item:hover figcaption {
visibility: visible;
opacity: 1;
}
.gallery-item.download-item figcaption {
visibility: visible;
opacity: 1;
padding-top: 25.5%;
}
.gallery-item.download-item:hover:before,
.gallery-item.download-item:hover figcaption h3 {
opacity: .7;
}
@media screen and (max-width: 991px) {
.gallery-item .title-only {
padding-left: 32%;
}
}
@media screen and (max-width: 500px) {
.gallery-item .title-only {
padding-left: 25%;
}
}
@media screen and (max-width: 350px) {
.gallery-item figcaption {
padding-right: 10%;
}
.gallery-item .title-only {
padding-left: 30%;
}
}
/** 18.NEWS
**********************************/
.news-block {
border-right: 1px solid #4cd964;
padding: 10px 40px 10px 0;
margin-bottom: 45px;
}
.news-block span {
display: block;
font-size: 14px;
color: #8e8e93;
margin-bottom: 25px;
}
.news-block .content {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
color: #8e8e93;
}
@media screen and (max-width: 768px) {
.news-block {
padding-right: 30px;
}
}
/** 19.SCROLLER
**********************************/
.scroller {
overflow: hidden;
/*white-space: nowrap;*/
}
.scroller .item {
display: inline-block;
}
/** 20.SPLIT BLOCK
*************************************/
.split-block {
margin-bottom: -2px;
margin-left: -15px;
margin-right: -15px;
}
.split-block .column {
display: inline-block;
vertical-align: top;
padding: 70px 15px 30px 4%;
}
.split-block.img-left .column:first-child,
.split-block.img-right .column:last-child {
width: 53%;
padding: 0;
}
.split-block.img-left .column:last-child .block-heading,
.split-block.img-left .column:last-child h1,
.split-block.img-left .column:last-child h2,
.split-block.img-left .column:last-child h3,
.split-block.img-left .column:last-child h4,
.split-block.img-left .column:last-child span,
.split-block.img-left .column:last-child p,
.split-block.img-left .column:last-child ul,
.split-block.img-left .column:last-child ol,
.split-block.img-right .column:last-child .block-heading,
.split-block.img-right .column:first-child h1,
.split-block.img-right .column:first-child h2,
.split-block.img-right .column:first-child h3,
.split-block.img-right .column:first-child h4,
.split-block.img-right .column:first-child span,
.split-block.img-right .column:first-child p,
.split-block.img-right .column:first-child ul,
.split-block.img-right .column:first-child ol {
max-width: 430px;
}
.split-block.img-right {
text-align: right;
}
.split-block.img-right .column:first-child {
text-align: right;
padding: 70px 4% 30px 15px;
}
@media screen and (max-width: 1510px) {
.split-block .column,
.split-block.img-right .column:first-child {
padding-top: 40px;
}
.split-block.img-left .column:first-child,
.split-block.img-right .column:last-child {
width: 53%;
padding: 0;
}
}
@media screen and (max-width: 1070px) {
.split-block .column {
display: block !important;
width: 100% !important;
}
.split-block.img-left .column:last-child .block-heading,
.split-block.img-left .column:last-child h1,
.split-block.img-left .column:last-child h2,
.split-block.img-left .column:last-child h3,
.split-block.img-left .column:last-child h4,
.split-block.img-left .column:last-child span,
.split-block.img-left .column:last-child p,
.split-block.img-left .column:last-child ul,
.split-block.img-left .column:last-child ol,
.split-block.img-right .column:last-child .block-heading,
.split-block.img-right .column:first-child h1,
.split-block.img-right .column:first-child h2,
.split-block.img-right .column:first-child h3,
.split-block.img-right .column:first-child h4,
.split-block.img-right .column:first-child span,
.split-block.img-right .column:first-child p,
.split-block.img-right .column:first-child ul,
.split-block.img-right .column:first-child ol {
max-width: 100%;
}
.split-block.img-left .column:last-child
.split-block.img-right .column:first-child {
padding-left: 15px;
padding-right: 15px;
}
}
/** 21.VIDEO BLOCK
**********************************/
.video-block {
padding: 150px 0;
text-align: center;
}
.video-block a {
display: inline-block;
color: #fff;
font-weight: 300;
opacity: 1;
}
.video-block a:hover {
opacity: .6;
}
.video-block a > i {
display: block;
width: 48px;
height: 48px;
font-size: 32px;
border: 2px solid #fff;
border-radius: 50%;
padding: 6px 0 0 5px;
margin: 0 auto 22px auto;
}
@media screen and (max-width: 768px) {
.video-block {
padding: 110px 0;
}
}
/** 22.TWITTER FEED
**********************************/
.twitter-feed .tweet {
font-size: 14px;
margin: 40px 0;
}
.twitter-feed .tweet a {
color: #8e8e93;
font-weight: 600;
}
.twitter-feed .tweet a:hover {
color: #007aff;
}
.twitter-feed .tweet .author {
color: #c4c4c4;
font-weight: normal;
display: block;
margin-bottom: 18px;
}
.twitter-feed .tweet p {
color: #8e8e93;
font-size: 14px;
}
/** 23.PRESS REVIEWS
**********************************/
.press-review {
max-width: 290px;
text-align: center;
margin: 0 auto 50px auto;
}
.press-review img {
display: block;
max-width: 180px;
margin: 0 auto 30px auto;
height: auto !important;
}
.press-review h3 {
margin-bottom: 24px;
}
.press-review p {
font-size: 14px;
line-height: 1.58;
margin-bottom: 0;
}
/** 24.TEAM / TEAM GRID
**********************************/
.team-member {
text-align: center;
}
.team-member span {
display: block;
color: #8e8e93;
margin-bottom: 25px;
}
.team-member .social-buttons a {
margin: 0 15px 10px 15px;
opacity: 1;
}
.team-member .social-buttons a:hover {
opacity: .5;
}
.team-member img {
display: block;
width: 100%;
height: auto !important;
max-width: 330px;
margin: 18px auto 0 auto;
}
@media screen and (max-width: 768px) {
.team-member {
margin-bottom: 50px;
}
.team-member:last-child {
margin-bottom: 0;
}
}
/* Team Grid */
.team-grid:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
.team-grid .item {
position: relative;
float: left;
width: 33.33%;
}
.team-grid .item img {
display: block;
}
.team-grid .item .overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(255,255,255,0.9);
padding: 14% 11% 0 11%;
-webkit-transition: opacity .35s;
transition: opacity .35s;
}
.team-grid .item:hover .overlay {
opacity: 1;
}
.team-grid .item h3 {
margin-bottom: 12px;
}
.team-grid .item span {
font-size: 14px;
color: #8e8e93;
}
.team-grid .item .social-buttons {
position: absolute;
width: 100%;
text-align: center;
left: 0;
bottom: 15%;
}
.team-grid .item .social-buttons a {
opacity: 1;
margin: 5px 20px 10px 0;
}
.team-grid .item .social-buttons a:hover {
opacity: .5;
}
.team-grid .item .social-buttons a:last-child {
margin-right: 0;
}
.facebook-tile,
.twitter-tile {
position: relative;
display: block;
width: 100%;
text-align: center;
}
.facebook-tile {
background-color: #007aff;
}
.twitter-tile {
background-color: #5ac8fa;
}
.facebook-tile .inner,
.twitter-tile .inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
color: #fff;
padding: 0 15px;
}
.facebook-tile .inner {
padding-top: 26%;
}
.facebook-tile i {
font-size: 50px;
}
.facebook-tile h3 {
display: block;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
margin-top: 26px;
}
.facebook-tile h3 span {
color: #5ac8fa !important;
font-size: 16px !important;
}
.twitter-tile .inner {
padding-top: 17%;
}
.twitter-tile .icon {
width: 100%;
max-width: 137px;
margin: 0 auto 32px auto;
}
.twitter-tile h3 {
font-size: 12px;
margin-bottom: 0;
}
@media screen and (max-width: 1200px) {
.twitter-tile .inner {
padding-top: 14%;
}
.twitter-tile .icon {
max-width: 115px;
margin: 0 auto 25px auto;
}
}
@media screen and (max-width: 991px) {
.facebook-tile .inner {
padding-top: 15%;
}
.twitter-tile .inner {
padding-top: 12%;
}
.twitter-tile .icon {
max-width: 90px;
margin: 0 auto 20px auto;
}
}
@media screen and (max-width: 768px) {
.team-grid .item {
width: 50%;
}
.facebook-tile .inner {
padding-top: 26%;
}
.twitter-tile .inner {
padding-top: 17%;
}
.twitter-tile .icon {
max-width: 120px;
margin: 0 auto 28px auto;
}
}
@media screen and (max-width: 680px) {
.facebook-tile .inner {
padding-top: 20%;
}
.twitter-tile .inner {
padding-top: 14%;
}
.twitter-tile .icon {
max-width: 100px;
margin: 0 auto 28px auto;
}
}
@media screen and (max-width: 580px) {
.facebook-tile .inner {
padding-top: 15%;
}
.twitter-tile .inner {
padding-top: 12%;
}
.twitter-tile .icon {
max-width: 90px;
margin: 0 auto 24px auto;
}
}
@media screen and (max-width: 530px) {
.team-grid .item {
float: none;
width: 100%;
max-width: 380px;
margin: auto;
}
.facebook-tile .inner {
padding-top: 26%;
}
.twitter-tile .inner {
padding-top: 17%;
}
.twitter-tile .icon {
max-width: 120px;
margin: 0 auto 28px auto;
}
}
@media screen and (max-width: 380px) {
.facebook-tile .inner {
padding-top: 19%;
}
.twitter-tile .inner {
padding-top: 14%;
}
.twitter-tile .icon {
max-width: 100px;
margin: 0 auto 26px auto;
}
}
/** 25.PRICING PLANS
**********************************/
.pricing-plan-switcher .label {
display: inline-block;
vertical-align: middle;
font-weight: 300;
opacity: .6;
margin-top: -3px;
line-height: 60px;
}
.pricing-plan-switcher span {
font-size: 12px;
font-weight: 300;
display: block;
margin-top: -3px;
}
.pricing-plan {
text-align: center;
margin-bottom: 40px;
}
.pricing-plan .icon {
margin-bottom: 20px;
}
.pricing-plan .icon i {
font-size: 48px;
}
.pricing-plan .icon i.flaticon-graduates1 {
display: block;
font-size: 70px;
margin-bottom: -22px;
}
.pricing-plan-title {
position: relative;
display: inline-block;
font-weight: 300;
font-size: 60px;
white-space: nowrap;
padding: 22px 0;
margin: 0 auto 35px auto;
}
.pricing-plan-title span {
position: absolute;
display: block;
font-size: 16px;
}
.pricing-plan-title .name {
top: 0;
left: 5px;
}
.pricing-plan-title .period {
bottom: 2px;
right: 5px;
opacity: .6;
}
.pricing-plan-description {
list-style: none;
padding: 0;
font-size: 16px;
font-weight: 300;
opacity: .6;
line-height: 1.5
}
.pricing-plan .btn {
display: block;
max-width: 170px;
margin: 0 auto 30px auto;
}
/** 26.BLOG (POSTS)
**********************************/
.post-tile {
width: 100%;
background-color: #fff;
margin-bottom: 30px;
}
.post-thumb {
position: relative;
display: block;
}
.post-thumb img {
display: block;
}
.post-thumb.colored {
background-color: #5ac8fa;
}
.post-thumb.colored img {
opacity: .5;
}
.post-thumb img {
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.post-thumb:hover img {
opacity: 1;
}
.post-thumb:before {
display: block;
content: "";
position: absolute;
z-index: 1;
width: 100%;
min-height: 100%;
background-color: #007aff;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-thumb:after {
position: absolute;
z-index: 2;
display: block;
content: "+";
top: 12px;
right: 12px;
line-height: 16px;
color: #fff !important;
font-size: 28px;
opacity: 0;
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.post-thumb:hover:before {
opacity: .3;
}
.post-thumb:hover:after {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.post-body {
padding: 45px 22px 15px 22px;
}
.post-title {
text-align: center;
}
.non-visible {
visibility: hidden !important;
opacity: 0 !important;
}
.post-title img,
.post-title .img {
display: block;
margin: 0 auto 5px auto;
}
.post-title a {
color: #3a3a3a;
}
.post-title a:hover {
color: #007aff;
}
.post-title h2,
.post-title h3 {
font-size: 24px;
font-weight: 300;
margin-bottom: 12px;
line-height: 1.5;
}
.post-title span,
.post-title p {
display: block;
font-size: 14px;
color: #c4c4c4;
margin-bottom: 25px;
}
.post-meta {
display: table;
width: 100%;
line-height: 2;
font-size: 14px;
color: #c4c4c4;
}
.post-tile .post-meta {
font-size: 12px;
}
.post-meta .column {
width: auto;
display: table-cell;
vertical-align: top;
}
.post-meta .social-buttons a {
margin: 5px 0 10px 12px;
opacity: 1;
}
.post-meta .social-buttons a:hover {
opacity: .5;
}
.post-meta .comment-count {
display: inline-block;
vertical-align: middle;
font-size: 14px;
color: #3a3a3a;
margin-right: 15px !important;
}
.post-meta .comment-count i {
font-size: 18px;
color: #8e8e93;
margin-right: 5px;
}
.post-meta .comment-count:hover,
.post-meta .comment-count:hover i {
opacity: 1 !important;
color: #007aff;
}
.scroller.posts .item {
margin-right: 25px;
}
.scroller .item .post-tile {
margin-bottom: 8px;
}
@media screen and (max-width: 991px) {
.scroller.posts .item {
max-width: 320px
}
}
@media screen and (max-width: 768px) {
.scroller.posts .item {
max-width: 280px;
}
}
@media screen and (max-width: 500px) {
.post-meta .social-buttons a {
margin: 5px 0 10px 7px;
}
.post-meta .comment-count {
margin-right: 9px !important;
}
}
@media screen and (max-width: 460px) {
.post-meta .column {
display: block;
width: 100%;
text-align: left !important;
}
.post-meta .column .text-right {
text-align: left !important;
}
.post-tile .post-meta .column {
display: table-cell;
width: auto;
}
.post-tile .post-meta .column .text-right,
.post-tile .post-meta .column.text-right {
text-align: right !important;
}
}
/* Tile Variations */
.tile-image-bg {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.tile-solid-bg.bg-primary {
background-color: #007aff;
}
.tile-solid-bg.bg-success {
background-color: #4cd964;
}
.tile-solid-bg.bg-info {
background-color: #5ac8fa;
}
.tile-solid-bg.bg-warning {
background-color: #ffcc00;
}
.tile-solid-bg.bg-danger {
background-color: #ff2d55;
}
.tile-image-bg .post-title p,
.tile-image-bg .post-title span,
.tile-image-bg .post-meta span,
.tile-solid-bg .post-title p,
.tile-solid-bg .post-title span,
.tile-solid-bg .post-meta span {
color: #fff;
opacity: .7;
}
.tile-image-bg a,
.tile-solid-bg a {
color: #fff;
opacity: 1;
}
.tile-image-bg a:hover,
.tile-image-bg a:focus,
.tile-solid-bg a:hover,
.tile-solid-bg a:focus,
.tile-image-bg .post-body .post-title a:hover,
.tile-image-bg .post-body .post-title a:focus,
.tile-solid-bg .post-body .post-title a:hover,
.tile-solid-bg .post-body .post-title a:focus {
color: #fff;
opacity: .8 !important;
}
/* Sidebar */
.sidebar {
width: 100%;
max-width: 320px;
}
/* Categories */
.categories {
position: relative;
padding-top: 10px;
margin-bottom: 38px;
}
.categories.with-grid-btn {
padding-left: 32px;
}
.categories ul {
list-style: none;
}
.categories ul li {
margin-bottom: 12px;
}
.categories ul li a {
font-size: 14px;
line-height: 1.6;
}
.grid-btn {
display: block;
position: absolute;
top: 12px;
left: 0;
opacity: 1;
-webkit-transition: opacity .25s;
transition: opacity .25s;
}
.grid-btn:hover {
opacity: .6;
}
.grid-btn:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
.grid-btn span {
display: block;
float: left;
width: 7px;
margin-right: 3px;
}
.grid-btn span:before,
.grid-btn span:after {
display: block;
content: "";
width: 7px;
height: 7px;
border: 1px solid #007aff;
margin-bottom: 3px;
}
/* Featured Posts */
.featured-post {
position: relative;
display: block;
padding: 20px 15px 22px 12px;
color: #fff;
background-position: center;
background-repeat: no-repeat;
}
.featured-post:hover {
color: #fff;
}
.featured-post h3 {
margin-bottom: 10px;
}
.featured-post p {
margin-bottom: 0;
font-size: 14px;
font-weight: 300;
opacity: .7;
}
.featured-post .content {
position: relative;
z-index: 2;
}
.featured-post:before {
display: block;
position: absolute;
z-index: 1;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .8;
}
.featured-post.bg-primary:before {
background-color: #007aff;
}
.featured-post.bg-success:before {
background-color: #4cd964;
}
.featured-post.bg-info:before {
background-color: #5ac8fa;
opacity: .85;
}
.featured-post.bg-warning:before {
background-color: #ff9500;
opacity: .85;
}
.featured-post.bg-danger:before {
background-color: #ff2d55;
}
.featured-post .arrow {
height: 0px;
padding-top: 10px;
overflow: hidden;
-webkit-transition: height .3s;
transition: height .3s;
}
.featured-post .arrow i {
font-size: 34px;
opacity: 0;
-webkit-transform: translateX(-40px);
transform: translateX(-40px)
-webkit-transition: all .3s .1s;
transition: all .3s .1s;
}
.featured-post:hover .arrow {
height: 75px;
}
.featured-post:hover .arrow i {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0)
}
/** 27.PAGINATION
**********************************/
.pagination {
position: relative;
width: 100%;
text-align: center;
}
.pagination .prev,
.pagination .next {
display: block;
position: absolute;
font-size: 14px;
top: 50%;
margin-top: -9px;
}
.pagination .prev {
left: 0;
}
.pagination .next {
right: 0;
}
.pagination .prev i,
.pagination .next i {
display: inline-block;
vertical-align: middle;
font-size: 18px;
margin-top: -3px;
}
.pagination .prev i {
margin-right: 5px;
}
.pagination .next i {
margin-left: 5px;
}
.pagination .page-numbers {
display: inline-block;
font-size: 14px;
margin: 0 8px;
}
.pagination .page-numbers.current {
color: #c4c4c4;
}
@media screen and (max-width: 570px) {
.pagination .prev,
.pagination .next {
display: block;
position: absolute;
font-size: 14px;
top: 100%;
margin-top: 20px;
}
.pagination {
margin-bottom: 70px;
}
}
/** 28.MASONRY GRID
**********************************/
.masonry-grid:after {
content: '';
display: block;
clear: both;
}
.masonry-grid .grid-sizer,
.masonry-grid .item {
width: 31.5%;
}
.masonry-grid .item {
float: left;
margin-bottom: 2.8%;
}
.masonry-grid .gutter-sizer { width: 2.5%; }
.masonry-grid .item.w2 {
width: 65.3%;
}
.masonry-grid .item .post-tile {
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
.masonry-grid .grid-sizer,
.masonry-grid .item {
width: 48%;
margin-bottom: 3.3%;
}
.masonry-grid .item.w2 {
width: 100%;
}
.masonry-grid .gutter-sizer { width: 2.8%; }
}
@media screen and (max-width: 500px) {
.masonry-grid .grid-sizer,
.masonry-grid .item,
.masonry-grid .item.w2 {
width: 100%;
margin-bottom: 5%;
}
.masonry-grid .gutter-sizer { width: 0px; }
}
/** 29.COMMENTS
**********************************/
.comment {
margin-bottom: 50px;
}
.depth-2 {
margin-top: 40px;
padding-left: 80px;
}
.comment .comment-meta {
display: table;
width: 100%;
font-size: 14px;
margin-bottom: 28px;
}
.comment .comment-meta .column {
display: table-cell;
vertical-align: middle;
width: 50%;
}
.comment .comment-meta .author a,
.comment .comment-meta .author span {
display: inline-block;
vertical-align: middle;
}
.comment .comment-meta span {
color: #c4c4c4;
}
.comment .comment-meta .fake-link {
color: #007aff;
}
.comment .comment-meta .author .ava {
margin-right: 18px;
}
.comment .comment-meta .author .ava,
.comment .comment-meta .author .ava img {
width: 48px;
height: 48px;
border-radius: 50%;
}
.comment .reply-btn:after {
display: inline-block;
vertical-align: middle;
font-family: "Flaticon";
content: "\e0d3";
font-size: 16px;
margin-left: 5px;
}
#comment-form .btn {
margin-right: 0;
padding-left: 40px;
padding-right: 40px;
}
@media screen and (max-width: 500px) {
.depth-2 {
padding-left: 30px;
}
.comment .comment-meta,
.comment .comment-meta .column {
width: 100%;
display: block;
}
.comment .comment-meta .column:last-child {
text-align: left !important;
padding-left: 68px;
}
}
/** 30.TIMELINE
**********************************/
.timeline .timeline-row {
display: table;
width: 100%;
}
.timeline .date {
display: table-cell;
position: relative;
width: 35%;
font-size: 14px;
color: #c4c4c4;
text-align: right;
border-right: 1px solid #ccc;
padding: 0 18px 70px 0;
}
.timeline-row:last-child .date,
.timeline-row:last-child .event {
padding-bottom: 0;
border: none;
}
.timeline .date:before {
display: block;
position: absolute;
content: "";
width: 13px;
height: 13px;
background-color: #ffcc00;
border-radius: 50%;
top: 0;
right: -7px;
}
.timeline .event {
display: table-cell;
width: 75%;
padding: 0 0 30px 28px;
font-size: 16px;
}
.light-color .timeline {
font-weight: 300;
}
.light-color .timeline .date {
color: rgba(255,255,255,0.6);
border-color: rgba(255,255,255,0.5);
}
/** 31.BAR CHARTS
**********************************/
.bar-charts {
position: relative;
}
.bar-charts .grid {
position: absolute;
z-index: 1;
width: 100%;
height: 1px;
left: 0;
top: 50%;
background-color: #e0e0e0;
}
.bar-charts .grid:before,
.bar-charts .grid:after {
position: absolute;
display: block;
content: "";
width: 100%;
height: 1px;
left: 0;
background-color: #e0e0e0;
}
.bar-charts .grid:before {
top: -48px;
}
.bar-charts .grid:after {
bottom: -48px;
}
.bar-charts .chart {
position: relative;
z-index: 10;
width: 100%;
height: 190px;
text-align: right;
padding: 32px 65px 0 0;
}
.bar-charts .chart .bar {
position: absolute;
display: block;
width: 24px;
border-radius: 12px 12px 0 0;
bottom: 0;
right: 0;
}
.bar-charts .chart.chart-primary .bar {
background-color: #007aff;
}
.bar-charts .chart.chart-success .bar {
background-color: #4cd964;
}
.bar-charts .chart.chart-info .bar {
background-color: #5ac8fa;
}
.bar-charts .chart.chart-warning .bar {
background-color: #ffcc00;
}
.bar-charts .chart.chart-danger .bar {
background-color: #ff2d55;
}
.bar-charts .chart h3 {
font-size: 60px;
margin-bottom: 6px;
}
.bar-charts .chart p {
font-size: 24px;
font-weight: 300;
padding-right: 6px;
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
.bar-charts .grid:before {
top: -43px;
}
.bar-charts .grid:after {
bottom: -43px;
}
.bar-charts .chart {
height: 170px;
padding: 44px 50px 0 0;
}
.bar-charts .chart h3 {
font-size: 40px;
margin-bottom: 12px;
}
.bar-charts .chart p {
font-size: 18px;
padding-right: 4px;
}
}
@media screen and (max-width: 580px) {
.bar-charts .grid:before {
top: -36px;
}
.bar-charts .grid:after {
bottom: -36px;
}
.bar-charts .chart {
height: 140px;
padding: 39px 50px 0 0;
}
.bar-charts .chart h3 {
font-size: 30px;
margin-bottom: 10px;
}
.bar-charts .chart p {
font-size: 16px;
}
}
@media screen and (max-width: 480px) {
.bar-charts .chart .bar {
width: 20px;
border-radius: 10px 10px 0 0;
}
.bar-charts .grid:before {
top: -32px;
}
.bar-charts .grid:after {
bottom: -32px;
}
.bar-charts .chart {
height: 120px;
padding: 42px 50px 0 0;
}
.bar-charts .chart h3 {
font-size: 18px;
margin-bottom: 15px;
}
.bar-charts .chart p {
font-size: 11px;
font-weight: normal;
padding-right: 0;
}
}
/** 32.CLIENT LOGOS
**********************************/
.client {
display: block;
width: 100%;
max-width: 170px;
margin: 20px auto 30px auto;
opacity: 1;
-webkit-transition: opacity .4s;
transition: opacity .4s;
}
.client:hover {
opacity: .6;
}
/** 33.CONTACTS
**********************************/
.google-map {
position: absolute;
width: 100%;
height: 100%;
min-height: 240px;
padding: 0;
top: 0;
left: 0;
}
.ie .google-map {
min-height: 526px;
}
.google-map #map-canvas {
position: absolute;
width: 100%;
height: 100%;
}
.contact-info {
width: 100%;
max-width: 380px;
padding-left: 50px;
padding-right: 15px;
}
.contact-info .nav-tabs:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
.contact-info .nav-tabs li:fisrt-child {
float: left;
}
.contact-info .nav-tabs li:last-child {
float: right;
margin-right: 0;
}
.contact-info .nav-tabs li a {
font-size: 24px;
text-transform: none;
font-weight: 300;
opacity: 1;
}
.contact-info .nav-tabs li a:hover {
opacity: .6;
}
.contact-info .nav-tabs li a:after {
display: none;
}
.contact-info .nav-tabs li.active a {
color: #c4c4c4;
}
.gmnoprint {
right: auto !important;
bottom: 10px !important;
}
@media screen and (max-width: 768px) {
.contact-info {
padding-top: 280px;
padding-bottom: 40px;
}
.ie .google-map {
min-height: 240px;
}
}
/** 34.FOOTER
**********************************/
.footer {
position: relative;
width: 100%;
z-index: 10;
background-color: #fff;
}
.fixed-footer .footer-fixed-bottom {
position: fixed;
left: 0;
bottom: 0;
}
.footer-head {
display: table;
width: 100%;
max-width: 370px;
margin: auto;
}
.footer-head .logo,
.footer-head .info {
display: table-cell;
vertical-align: top;
}
.footer-head .logo {
padding-top: 5px;
}
.footer-head .info {
padding-left: 30px;
}
.footer-head .info h1,
.footer-head .info h2,
.footer-head .info h3 {
line-height: 1.2;
}
.footer-head .info h1,
.footer-head .info h2,
.footer-head .info h3,
.footer-head .info p {
margin-bottom: 7px;
}
.footer-head .logo a {
display: block;
width: 120px;
}
.footer-head span {
display: block;
color: #8e8e93;
}
.footer-head .btn {
display: inline-block;
margin-top: 0;
}
.footer .rating {
display: inline-block;
font-size: 12px;
margin-right: 15px;
}
.footer .rating span {
display: inline;
}
.footer .rating i {
color: #ff9500;
margin: 0 1px;
}
.footer .rating i:before {
margin: 0;
}
.footer .rating span {
color: #8e8e93;
margin-left: 3px;
}
.footer .body {
display: table;
width: 100%;
}
.footer .body .column {
display: table-cell;
width: 33.3%;
vertical-align: bottom;
}
.footer .body .column.col-50 {
width: 50%;
}
.copyright p {
font-size: 14px;
color: #8e8e93;
margin-bottom: 30px;
}
.copyright a {
color: #8e8e93;
}
.copyright a:hover {
color: #007aff;
}
.footer .gadget {
width: 370px;
height: 192px;
background-image: url('../img/footer/ipad.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
padding: 48px 24px 0 25px;
margin: auto;
overflow: hidden;
}
.footer-nav ul {
padding: 0;
list-style: none;
text-align: right;
padding-bottom: 12px;
margin-bottom: 0;
}
.footer-nav ul li {
display: inline-block;
margin: 0 0 20px 15px;
}
.footer-nav ul li a {
font-size: 14px;
}
@media screen and (max-width: 768px) {
.footer-head,
.footer-head .logo,
.footer-head .info {
display: block;
text-align: center;
padding-left: 0;
}
.footer-head .logo a {
margin: 0 auto 20px auto;
}
.footer .body,
.footer .body .column,
.footer .body .column.col-50 {
display: block;
width: 100%;
text-align: center;
}
.footer-nav ul {
text-align: center;
}
.footer-nav ul li:first-child {
display: inline;
}
}
/** 35.PRELOADER
*****************************/
#preloader {
position: fixed;
z-index: 1600;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
opacity: 1;
visibility: visible;
-webkit-transition: all .9s;
transition: all .9s;
}
#preloader .logo {
position: absolute;
width: 120px;
left: 50%;
top: 50%;
text-align: center;
margin: -72px 0 0 -60px;
}
#preloader .logo img {
display: block;
max-width: 90px;
margin: 0 auto 25px auto;
}
#preloader .logo span {
font-size: 30px;
font-weight: 300;
color: #8e8e93;
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-done #preloader,
.pace-done #preloader .logo {
opacity: 0;
visibility: hidden;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #007aff;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
/** 36.COMPONENTS DEMO STYLES
*****************************/
.grid-demo figure {
display: block;
width: 100%;
height: 60px;
border: 2px solid #78d5ff;
background-color: #b8e9ff;
margin-bottom: 30px;
}
.icons-demo {
text-align: center;
color: #8e8e93;
}
.icons-demo i {
display: inline-block;
font-size: 50px;
margin: 12px 10px;
}
.tabs-demo .nav-tabs {
padding-bottom: 0;
}
.tabs-demo .nav-tabs.nav-vertical {
padding-bottom: 15px;
}
@media screen and (max-width: 768px) {
.tabs-demo .nav-tabs.text-right {
text-align: left !important;
}
.tabs-demo .nav-tabs.text-right li:first-child {
margin-left: 0;
}
}
/* Fix cool WP */
.admin-bar .navbar.stuck {
top: 32px;
}
.error-404 {
font-size: 150px;
font-weight: 300;
}
.offcanvas-nav .no-entries {
color: #fff;
font-size: 14px;
}
.offcanvas-tabs .no-entries {
padding: 0 40px;
}
.footer .rating {
margin-top: 12px;
}
.search-box.open {
z-index: 10;
}
/* Search field placeholder fix */
.search-field::-webkit-input-placeholder {
line-height: 1.4;
}
.search-field::-moz-placeholder {
line-height: 1.4;
}
.search-field:-ms-input-placeholder {
line-height: 1.4;
}
/* WordPress Widgets */
.widget_recent_comments li {
line-height: 2;
color: #c4c4c4;
font-size: 13px;
}
.widget_recent_comments li a {
font-size: 14px;
margin-left: 5px;
}
.widget_recent_comments li .comment-author-link {
margin-right: 5px;
}
.widget_pages {
line-height: 2;
}
.widget_nav_menu {
line-height: 2;
}
.widget_archive {
line-height: 2;
}
.widget_archive li {
color: #c4c4c4;
font-size: 14px;
}
.widget_archive li a {
margin-right: 5px;
}
.vc_progress_bar .vc_single_bar {
background: #e9e9e9;
-webkit-box-shadow: none;
box-shadow: none;
}
.vc_progress_bar .vc_single_bar .vc_label {
padding: 0.4em 1em;
font-size: 14px;
}
.vc_images_carousel .vc_carousel-indicators li {
border: 1px solid #fff;
background-color: transparent;
}
.vc_images_carousel .vc_carousel-indicators li.vc_active {
background-color: #fff;
}
.wpb_accordion .wpb_accordion_wrapper .ui-state-default .ui-icon,
.wpb_accordion .wpb_accordion_wrapper .ui-state-active .ui-icon {
width: 18px;
height: 18px;
opacity: 0.6;
background-image: url(../img/toggle_open.png);
}
.wpb_accordion .wpb_accordion_wrapper .ui-state-active .ui-icon {
background-image: url(../img/toggle_close.png);
}
.wpb_content_element .wpb_accordion_wrapper .wpb_accordion_header,
.wpb_content_element.wpb_tabs .wpb_tour_tabs_wrapper .wpb_tab {
background-color: transparent;
}
/*
* Visual Composer fix
*/
.wpb_single_image a {
opacity: 1 !important;
}
.vc_row .vc_row {
width: 100% !important;
left: auto !important;
}
.vc_row {
width: 100% !important;
}
.vc_row .vc_row .container {
width: 100%;
}
.appica-single-post .vc_row {
left: auto !important;
}
.google-map {
margin-left: -15px;
}
/*
* Contact Form 7 fix
*/
span.wpcf7-not-valid-tip {
font-size: 13px;
margin-top: 10px;
}
div.wpcf7-validation-errors {
display: none !important;
}
div.wpcf7-mail-sent-ok {
border: 0;
font-size: 13px;
color: #4cd964;
margin-left: 0;
padding-left: 0;
}
span.wpcf7-list-item {
margin-left: 0;
}
.intro-features .icon-block {
margin-bottom: 0 !important;
}
/* Google Maps fix */
#map-canvas img {
max-width: none !important;
}
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
word-wrap: break-word;
}
.bypostauthor {
display: block;
}
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin: 0 auto;
}
.wp-caption-text {
text-align: center;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
}
/* Fix blog search form */
.page-heading.no-title {
min-height: 200px;
}
.split-block img {
vertical-align: middle;
}
/* Fix Recent Posts shortcode */
.scroller.posts .item {
max-width: 360px;
}
.scroller.posts {
white-space: normal;
}
/* Page title fix for non-static front page */
.home .page-heading.no-title {
min-height: 120px
}
/* Fixes */
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 18px;
font-style: italic;
border-left: 5px solid #e1e1e1;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
margin-bottom: 0;
}
cite {
color: #8e8e93;
}
table {
width: 100%;
max-width: 100%;
margin-bottom: 30px;
}
table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
padding: 15px;
line-height: 1.42857143;
vertical-align: top;
border-bottom: 1px solid #ddd;
}
table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th {
font-weight: 600;
text-align: left;
}
table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
table > tbody + tbody {
border-top: 2px solid #ddd;
}
ul, ol {
line-height: 1.8;
padding-left: 23px;
margin-bottom: 20px;
}
ul ul,
ol ul,
ul ol,
ol ol {
margin-bottom: 0;
}
.unordered-list {
list-style: none;
}
address {
margin-bottom: 20px;
font-style: normal;
line-height: 1.42857143;
}
code,
kbd,
pre,
samp {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
pre code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border-radius: 0;
}
.post-thumb img {
width: 100%;
}
.post.sticky .post-tile {
border: 2px solid #dedede;
}
.featured-post {
background-color: #474747;
}
.categories > ul {
padding-left: 0;
}
.post-meta .column {
width: 50%;
}
.unstyled-list,
.unordered-list {
padding-left: 0
}
/* Container fix */
.container .vc_row .container {
width: 100%;
padding: 0;
}
.appica-portfolio .container .vc_row .container {
padding: 0 15px;
}
.navbar.navbar-fixed-top + .page.container {
padding-top: 130px;
}
.navbar + .page.container {
margin-top: 40px;
}
.page.container > .vc_row {
left: 15px !important;
}
.page.container {
padding-bottom: 40px;
}
/* fix widgets */
select {
width: 100%;
}
.widget_pages ul,
.widget_recent_comments ul,
.widget_nav_menu ul {
list-style: none;
}
.widget_pages > ul,
.widget_recent_comments > ul,
.widget_nav_menu .menu {
padding: 0;
}
.widget_pages li a,
.widget_nav_menu li a {
font-size: 14px;
}
.widget_recent_comments a {
text-transform: none;
}
.textwidget img,
.textwidget strong {
display: block;
margin-bottom: 10px
}
.widget_archive ul,
.widget_categories ul,
.widget_meta ul,
.widget_recent_entries ul,
.widget_rss ul {
list-style: none;
font-size: 14px;
}
.widget_archive > ul,
.widget_categories > ul,
.widget_meta > ul,
.widget_recent_entries > ul,
.widget_rss > ul {
padding-left: 0;
}
.widget_rss li {
margin-bottom: 20px;
}
.rss-date {
display: block;
font-weight: 600;
}
.widget_calendar table > thead > tr > th,
.widget_calendar table > tbody > tr > th,
.widget_calendar table > tfoot > tr > th,
.widget_calendar table > thead > tr > td,
.widget_calendar table > tbody > tr > td,
.widget_calendar table > tfoot > tr > td {
font-size: 14px;
padding: 10px;
}
.widget label {
display: block;
margin-bottom: 10px;
}
.widget select {
font-size: 14px;
height: 30px;
border: none;
}
textarea.form-control {
height: auto;
}
/*
* Revolution slider
*/
.tp-bannertimer { height: 6px !important; }
.tp-bullets.round .bullet,
.tp-bullets.custom .bullet,
.tp-bullets.preview1 .bullet,
.tp-bullets.preview2 .bullet,
.tp-bullets.preview3 .bullet,
.tp-bullets.preview4 .bullet,
.tp-bullets.round .bullet:hover,
.tp-bullets.custom .bullet:hover,
.tp-bullets.preview1 .bullet:hover,
.tp-bullets.preview2 .bullet:hover,
.tp-bullets.preview3 .bullet:hover,
.tp-bullets.preview4 .bullet:hover {
display: inline-block !important;
width: 8px !important;
height: 8px !important;
border: none !important;
border-radius: 50% !important;
background: #fff !important;
opacity: .5 !important;
margin: 0 6px 6px 0 !important;
-webkit-transition: opacity .25s;
transition: opacity .25s;
}
.tp-bullets.round .bullet.selected,
.tp-bullets.custom .bullet.selected,
.tp-bullets.preview1 .bullet.selected,
.tp-bullets.preview2 .bullet.selected,
.tp-bullets.preview3 .bullet.selected,
.tp-bullets.preview4 .bullet.selected,
.tp-bullets.round .bullet:hover.selected,
.tp-bullets.custom .bullet:hover.selected,
.tp-bullets.preview1 .bullet:hover.selected,
.tp-bullets.preview2 .bullet:hover.selected,
.tp-bullets.preview3 .bullet:hover.selected,
.tp-bullets.preview4 .bullet:hover.selected {
background: #fff !important;
opacity: 1 !important;
width: 8px !important;
height: 8px !important;
border: none !important;
}
/** 37.PORTFOLIO
**********************************/
.portfolio-grid {
position: relative;
overflow: hidden;
}
.portfolio-grid:after {
content: '';
display: block;
clear: both;
}
/* Gap width */
.portfolio-grid .gutter-sizer { width: 2.5%; }
/* Default item */
.portfolio-grid .grid-sizer,
.portfolio-grid .grid-item { width: 23.125%; }
.portfolio-grid .grid-item {
float: left;
overflow: hidden;
height: 268px;
margin-bottom: 30px;
}
/* Double width */
.portfolio-grid .grid-item.w2 { width: 48.75%; }
/* Double height */
.portfolio-grid .grid-item.h2 {
font-size: inherit;
font-weight: normal;
margin-left: 0;
height: 566px;
}
@media screen and (max-width: 1200px) {
.portfolio-grid .grid-item { margin-bottom: 25px; }
}
@media screen and (max-width: 991px) {
.portfolio-grid .grid-item {
height: 180px;
margin-bottom: 18px;
}
.portfolio-grid .grid-item.h2 { height: 378px; }
}
@media screen and (max-width: 768px) {
.portfolio-grid .grid-sizer,
.portfolio-grid .grid-item {
width: 48.5%;
height: 220px;
margin-bottom: 3%;
}
.portfolio-grid .grid-item.h2 { height: 400px; }
.portfolio-grid .grid-item.w2 { width: 100%; }
.portfolio-grid .gutter-sizer { width: 3%; }
}
@media screen and (max-width: 500px) {
.portfolio-grid .grid-sizer,
.portfolio-grid .grid-item,
.portfolio-grid .grid-item.w2 {
width: 100%;
margin-bottom: 5%;
}
.portfolio-grid .grid-item.h2 { height: 350px; }
.portfolio-grid .gutter-sizer { width: 0px; }
}
/* Tiles */
.portfolio-tile,
.portfolio-tile .tile-thumb {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.portfolio-tile .tile-thumb .overlay {
display: block;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,122,255,0.5);
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.portfolio-tile .tile-thumb .overlay .inner {
position: absolute;
width: 100%;
height: 120px;
color: #fff;
text-align: center;
left: 0;
top: 50%;
margin-top: -60px;
padding: 0 15px;
}
.portfolio-tile .tile-thumb .overlay .btns {
position: absolute;
width: 100%;
text-align: center;
top: 50%;
left: 0;
margin-top: -24px;
}
.portfolio-tile .tile-thumb .overlay .inner .btns {
position: relative;
top: 0;
margin: 0 0 20px 0;
}
.portfolio-tile .tile-thumb .overlay .btns a {
display: inline-block;
width: 48px;
height: 48px;
line-height: 44px;
font-size: 24px;
border-radius: 50%;
color: #007aff;
background-color: #fff;
margin: 0 4px;
opacity: .8;
-webkit-transform: translate(-20px, 0);
-ms-transform: translate(-20px, 0);
-o-transform: translate(-20px, 0);
transform: translate(-20px, 0);
-webkit-transition: all .3s;
transition: all .3s;
}
.portfolio-tile .tile-thumb .overlay .btns a i {
line-height: 48px;
}
.portfolio-tile .tile-thumb .overlay .btns a:last-child {
-webkit-transform: translate(20px, 0);
-ms-transform: translate(20px, 0);
-o-transform: translate(20px, 0);
transform: translate(20px, 0);
}
.portfolio-tile .tile-thumb:hover .overlay,
.portfolio-tile .tile-thumb .overlay .btns a:hover {
opacity: 1;
}
.portfolio-tile .tile-thumb:hover .overlay .btns a {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
/*
* Button loading animation
*/
.btn-loading i {
-webkit-animation: icon-spin 1s infinite linear;
animation: icon-spin 1s infinite linear;
}
@-webkit-keyframes icon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes icon-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}