/*------------------------------------------------------------------
Theme Name: TRENDY
Version: 1.0
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[TABLE OF CONTENTS]
1. Global Styles
2. Header
2.1. Menu Styles
3. Slider
4. Services
5. Blog Styles
6. Portfolio
6.1. Portfolio 2
7. Pricing Table
8. Clients
9. Promo Box
10. Icons Wrap
11. Newsletter
12. Toggle Styles
13. Skills Bar
14. Team
15. Testimonials
16. Timeline
17. Contact Page
18. Twitterfeed
19. Info Wrap
20. Footer
21. Sidebar
22. Subpage Extras
-------------------------------------------------------------------*/
/* 1. Global Styles */
body {
font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #000;
background: #e2e6ed;
width: 100%;
overflow: hidden;
position: relative;
height: 100%;
}
p {
line-height: 21px;
}
a,
a:hover,
a:focus,
a:active,
a.active {
outline: 0;
color: #404040;
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
}
.bt-clearfix{
clear: both;
}
.container {
padding: 0;
}
.ts-main-left {
background: #fff;
padding: 40px 40px 40px 40px;
}
.ts-main-right {
padding: 0;
}
/* 2. Header */
header {
}
.logo h3 {
margin: 0;
}
.ts-social {
padding: 0;
display: table;
float: right;
margin: 0;
}
.ts-social li {
float: left;
list-style: none;
margin-left: 10px;
}
.ts-social li a {
width: 35px;
height: 35px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #e5e5e5;
display: table;
text-align: center;
line-height: 33px;
position: relative;
z-index: 77;
transition: .4s;
color: #;
}
.ts-social li a:hover span {
-webkit-animation: toTopFromBottom 0.3s forwards;
-moz-animation: toTopFromBottom 0.3s forwards;
animation: toTopFromBottom 0.3s forwards;
}
@-webkit-keyframes toTopFromBottom {
49% {
-webkit-transform: translateY(-100%);
}
50% {
opacity: 0;
-webkit-transform: translateY(100%);
}
51% {
opacity: 1;
}
}
@-moz-keyframes toTopFromBottom {
49% {
-moz-transform: translateY(-100%);
}
50% {
opacity: 0;
-moz-transform: translateY(100%);
}
51% {
opacity: 1;
}
}
@keyframes toTopFromBottom {
49% {
transform: translateY(-100%);
}
50% {
opacity: 0;
transform: translateY(100%);
}
51% {
opacity: 1;
}
}
.ts-social li a:hover {
background: #3db7f0;
border: solid 1px transparent;
color: #fff;
transition: .4s;
}
/* 2.1. Menu Styles */
#nav_menu {
}
#nav_menu,
#nav_menu ul,
#nav_menu ul li,
#nav_menu ul li a,
#nav_menu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#nav_menu:after,
#nav_menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav_menu #menu-button {
display: none;
}
#nav_menu {
width: auto;
line-height: 1;
margin: 40px 0px 25px;
position: relative;
z-index: 99999;
}
#nav_menu > ul {
width: 100%;
display: table;
height: 130px;
}
#nav_menu > ul > li {
float: left;
width: 20%;
text-align: center;
font-size: 18px;
text-transform: uppercase;
color: #fff;
border-right: 1px solid #3f4a59;
position: relative;
}
#nav_menu > ul > li:after ,
#nav_menu > ul > li:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 10px 0;
border-color: #3db7f0 transparent;
display: block;
width: 0;
z-index: 1;
bottom: 10px;
left: 0;
right: 0;
margin: 0 auto;
transition: .3s;
z-index: 0;
}
#nav_menu > ul > li.active:after ,
#nav_menu > ul > li:hover:after {
content: '';
position: absolute;
bottom: -10px;
transition: .3s;
}
#nav_menu > ul > li:last-child {
border-right: none;
}
#nav_menu > ul > li a i {
width: 44px;
height: 43px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: solid 1px rgba(255,255,255,0.1);
display: block;
line-height: 41px;
color: #fff;
text-align: center;
font-size: 16px;
display: table;
margin: 0 auto 15px;
box-shadow: 0 0 0 30px transparent;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
}
#nav_menu > ul > li a:hover i {
border: solid 1px rgba(255,255,255,0.2);
background: rgba(255,255,255,0.2);
box-shadow: 0 0 0 0 rgba(255,255,255,0.3);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}
#nav_menu > ul > li a span {
font-size: 8px;
position: relative;
top: -4px;
}
#nav_menu.align-center > ul {
font-size: 0;
text-align: center;
}
#nav_menu.align-center > ul > li {
display: inline-block;
float: none;
}
#nav_menu.align-center ul ul {
text-align: left;
}
#nav_menu.align-right > ul > li {
float: right;
}
#nav_menu.align-right ul ul {
text-align: right;
}
#nav_menu > ul > li > a {
padding: 24px 0px 26px;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
color: #fff;
background: #4a5768;
transition: .4s;
position: relative;
z-index: 15;
border-radius: 0;
}
#nav_menu > ul > li:hover > a,
#nav_menu > ul > li.active > a {
color: #fff;
background: #3db7f0;
padding: 24px 0px 30px;
border: none;
transition: .5s;
}
#nav_menu > ul > li:hover,
#nav_menu > ul > li.active {
border: none;
}
#nav_menu ul ul {
position: absolute;
left: -9999px;
background: rgba(98,104,112,0.7);
opacity: 0.9;
padding: 0;
width: 100px;
min-width: 230px;
max-width: 400px;
transition: .3s;
top: 150px;
border-top: 1px solid #626c79;
}
#nav_menu li:hover > ul {
left: auto;
top: 125px !important;
transition: .3s;
}
#nav_menu.align-right li:hover > ul {
right: 0;
}
#nav_menu ul ul ul {
margin-left: 100%;
top: -1px;
background: rgba(0,0,0,0.7);
min-width: 150px;
max-width: 400px;
top: -15px;
transition: .3s;
}
#nav_menu ul ul li:hover > ul {
left: auto;
top: 0px !important;
transition: .3s;
}
#nav_menu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#nav_menu ul ul li a {
text-transform: none;
padding: 0 25px;
font-size: 15px;
line-height: 60px;
text-align: left;
margin: 0px;
text-decoration: none;
color: #fff;
border-bottom: 1px solid #626870;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#nav_menu ul ul li:last-child a {
border-bottom: none;
}
#nav_menu ul ul li:hover > a,
#nav_menu ul ul li a:hover {
color: #ffffff;
background: #56616f;
transition: .3s;
}
#nav_menu ul li:nth-child(6) ul ul {
margin-left: -230px;
top: -1px;
background: rgba(0,0,0,0.7);
min-width: 230px;
max-width: 400px;
top: -15px;
transition: .3s;
}
/* 3. Slider */
.slider {
margin-bottom: 40px;
}
.flexslider .slides > li {
position: relative;
}
.flex-caption {
background: rgba(0,0,0,0.5);
width: 100%;
text-align: center;
font-size: 19px;
color: #fff;
position: absolute;
bottom: 0px;
right: 0;
left: 0;
padding: 19px 0 57px;
display: block !important;
-webkit-animation: slideIn;
-moz-animation: slideIn;
-o-animation: slideIn;
animation: slideIn;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes slideIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes slideIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes slideIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slideIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.home-slider-nav {
padding: 0;
display: table;
margin: -36px auto 0;
position: relative;
z-index: 999;
}
.home-slider-nav li {
margin: 6px 1px 0;
list-style: none;
float: left;
font-family: Open Sans, Arial;
color: #fff;
width: 36px;
height: 30px;
background: #3db7f0;
text-align: center;
line-height: 28px;
transition: .4s;
position: relative;
cursor: pointer;
}
.home-slider-nav li.flex-active {
height: 36px;
margin: 0px 1px 0;
transition: .4s;
line-height: 32px;
}
.home-slider-nav li.flex-active:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 18px 9px;
border-color: #3db7f0 transparent;
display: block;
width: 0;
z-index: 1;
top: -9px;
left: 0px;
}
/* 4. Services */
#services {
padding: 20px 0;
}
.service-content {
width: 235px;
height: 235px;
background: transparent;
border: 10px solid #f5f5f5;
border-radius: 50%;
display: table;
padding: 40px 0 0;
margin: 0 auto;
transition: .4s;
cursor: pointer;
}
.service-content:hover {
background: #3db7f0;
border: 10px solid #3db7f0;
transition: .4s;
}
#services ul {
padding: 0;
margin: 0 -20px;
}
#services ul li {
width: 33.3333%;
float: left;
list-style: none;
}
.service-content i {
width: 62px;
height: 62px;
border-radius: 50%;
background: transparent;
line-height: 62px;
border: 1px solid #d6d6d6;
text-align: center;
color: #01b9eb;
font-size: 28px;
margin: 0 auto 25px;
display: table;
}
.service-content:hover i {
border: 1px solid #fff;
color: #FFF;
}
.service-content h4 {
font-size: 14px;
font-weight: bold;
color: #3c3c3c;
text-align: center;
}
.service-content:hover h4 {
color: #fff;
}
.service-content p {
font-size: 13px;
color: #949494;
text-align: center;
margin: 0;
}
.service-content:hover p {
color: #fff;
}
/* 4.1. Services 2 */
#services2 {
padding: 0 0 25px;
}
.services2-content i {
width: 64px;
height: 64px;
border-radius: 50%;
background: #fff;
line-height: 54px;
color: #01b9eb;
font-size: 26px;
margin: 0 auto;
display: table;
float: left;
text-align: center;
transition: .4s;
padding-top: 5px;
position: relative;
border: 1px solid #e1e1e1;
overflow: hidden;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
}
.services2-content i:after {
display: none;
}
#services2 ul li:hover i {
font-size: 30px;
color: #fff;
background: #3db7f0;
border: 1px solid #3db7f0;
transition: 0.4s;
}
#services2 ul {
padding: 0;
}
#services2 ul li {
float: left;
width: 50%;
list-style: none;
padding-right: 20px;
cursor: pointer;
margin-bottom: 15px;
}
.s2c-inner {
margin-left: 85px;
}
.s2c-inner h4 {
font-size: 15px;
color: #000000;
margin: 5px 0 0;
transition: .4s;
}
.s2c-inner p {
font-size: 13px;
color: #9a9a9a;
line-height: 16px;
margin: 0px;
padding-top: 5px;
}
#services2 ul li:hover h4 {
color: #3db7f0;
transition: .4s;
}
#verticalTab {
background: #fff;
overflow: hidden;
border: 1px solid #eeeeee;
}
/* 5. Blog Styles */
#home-blog {
padding: 20px 0px;
}
.hb-meta {
font-family: Roboto;
font-size: 13px;
color: #9c9c9c;
font-weight: 300;
text-align: center;
transition: .4s;
position: relative;
z-index: 55;
}
.hb-meta i {
width: 57px;
height: 57px;
background: #fff;
color: #0E0E0E;
font-size: 15px;
border-radius: 50%;
text-align: center;
line-height: 57px;
display: table;
margin: -28px auto -7px;
position: relative;
z-index: 99;
transition: .4s;
z-index: -1;
}
.hb-info:hover .hb-meta i {
color: #fff;
background: #3db7f0;
transition: .4s;
transform: scale(1.2);
font-size: 18px;
}
.hb-info:hover .hb-meta {
color: #fff;
transition: .4s;
}
.hb-inner {
background: transparent;
padding: 15px 17px;
transition: .4s;
}
.hb-inner h4 {
font-size: 17px;
text-align: center;
margin: 10px 0 0px;
color: #3c3c3c;
font-weight: 600;
position: relative;
transition: .4s;
}
.hb-inner h4 a {
color: #3c3c3c;
transition: .4s;
}
.hb-info:hover h4 a {
color: #fff;
transition: .4s;
}
.hb-info img {
width: 100%;
}
.hb-inner p {
font-size: 14px;
text-align: center;
color: #717171;
transition: .4s;
}
.hb-info:hover p {
color: #fff;
transition: .4s;
}
.hb-info:hover .sep {
background: #fff;
transition: .4s;
}
.hb-info:hover .hb-inner {
background: #3db7f0;
transition: .4s;
}
.blog-content {
margin-bottom: 0px;
display: table;
}
.blog-content .col-md-4 ,
.blog-content .col-md-6 {
margin-bottom: 38px;
}
#m-blog-content {
padding: 25px 0px 35px;
}
#m-blog-content h4 {
font-size: 23px;
font-weight: 700;
color: #3db7f0;
margin: 15px 0 0;
}
#m-blog-content p {
color: #717171;
font-size: 15px;
line-height: 21px;
margin-bottom: 16px;
}
/* 5.1. Comments */
.sub-comment1 {
padding-left: 100px;
}
.sub-comment2 {
padding-left: 200px;
}
.sub-comment3 {
padding-left: 300px;
}
.comments-wrap h5 {
font-weight: 400;
font-size: 22px;
color: #000;
margin: 25px 0 25px;
}
.comments-wrap ul {
padding: 0px;
}
.comments-wrap ul li {
list-style: none;
margin: 0 0 35px;
display: table;
width: 100%;
position: relative;
}
.comments-wrap ul li img {
float: left;
}
.comments-inner {
margin-left: 100px;
}
.comment-author {
font-family: Roboto;
font-size: 14px;
color: #3c3c3c;
font-weight: 400;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 10px;
display: table;
margin-bottom: 10px;
}
.comment-author span {
color: #d1d1d1;
margin-left: 10px;
position: relative;
}
.comment-author span:before {
content: "/";
color: #d1d1d1;
position: relative;
left: -5px;
font-size: 16px;
}
.comments-inner {
position: relative;
}
.comments-inner p {
font-size: 15px;
color: #a3a3a3;
line-height: 18px;
}
.sub-comment1 .comments-inner:before,
.sub-comment2 .comments-inner:before,
.sub-comment3 .comments-inner:before {
content: "";
width: 40px;
height: 40px;
border: 1px solid #dddddd;
border-width: 0 0 1px 1px;
position: absolute;
left: -160px;
}
.article-comment-form h5 {
font-size: 22px;
color: #000;
margin: 25px 0 25px;
font-weight: 400;
}
.article-comment-form form input.comments ,
.comment-form form input.comments {
height: 60px;
border: 1px solid #eaeaea;
width: 100%;
padding: 15px 20px;
padding-left: 77px;
color: #555;
margin-bottom: 10px;
}
.article-comment-form form span ,
.comment-form form span {
height: 60px;
border-right: 1px solid #eaeaea;
width: 60px;
text-align: center;
display: table;
margin: 0px 0px -60px;
position: relative;
padding: 16px 14px 0;
}
.article-comment-form form span i ,
.comment-form form span i {
height: 30px;
border: 1px solid #3db7f0;
width: 30px;
text-align: center;
line-height: 28px;
color: #3db7f0;
font-size: 12px;
border-radius: 50%;
}
.article-comment-form form textarea ,
.comment-form form textarea {
height: 130px;
border: 1px solid #eaeaea;
width: 100%;
padding: 12px 17px;
color: #555;
margin-bottom: 10px;
}
.article-comment-form input:focus{
border: none;
background: none;
}
.article-comment-form input.submit ,
.comment-form input.submit {
height: 60px;
line-height: 60px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
border: 2px solid #3db7f0;
background: #3db7f0;
transition: 0.3s;
width: 100%;
padding: 0px;
}
.article-comment-form input.submit:hover ,
.comment-form input.submit:hover {
color: #3db7f0;
border: 2px solid #3db7f0;
background: #fff;
transition: 0.3s;
}
.less38 {
margin-top: -38px !important;
}
/* 6. Portfolio */
#home-works {
padding: 20px 0;
}
#home-works .col-md-12:nth-child(1) {
padding: 0px;
}
.hw-info {
position: relative;
cursor: pointer;
}
.hw-info h4 {
font-family: Open Sans;
font-size: 18px;
color: #fff;
font-weight: 400;
padding: 18px 22px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 30px;
left: 30px;
opacity: 1;
visibility: visible;
transition: .4s;
}
.hw-trigger {
width: 46px;
height: 46px;
text-align: center;
background: #fff;
display: table;
position: absolute;
right: 0px;
bottom: 0px;
transition: .5s;
}
.hw-trigger:after {
content: "\f067";
font-family: FontAwesome;
font-size: 16px;
color: #6F6F6F;
padding-top: 12px;
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
transition: .4s;
}
.hw-info:hover .hw-trigger {
background: #3db7f0;
transition: .5s;
}
.hw-info img {
width: 100%;
}
.hw-info:hover .hw-trigger:after {
color: #fff;
}
.active .hw-trigger, .current .hw-trigger {
background: #3db7f0;
transition: .5s;
right: 30px;
}
.active .hw-trigger:after , .current .hw-trigger:after {
content: "\f068";
color: #fff;
transition: .4s;
}
.current h4, .active h4 {
opacity: 0;
visibility: hidden;
transition: .4s;
}
.portfolio-icon {
background: none repeat scroll 0 0 #ffffff;
bottom: 0;
color: #6f6f6f;
display: inline-block;
height: 46px;
position: absolute;
right: 46px;
text-align: center;
transition: all 0.5s ease 0s;
width: 46px;
line-height: 46px;
}
.current .portfolio-icon{
right: 76px;
transition: all 0.5s ease 0s;
}
.portfolio-icon:hover {
background: none repeat scroll 0 0 #3db7f0;
color: #ffffff;
transition: all 0.5s ease 0s;
}
.hw-expand {
padding: 30px 25px;
background: #fff;
display: none;
border: 1px solid #dfe5eb;
border-top: none;
}
.hw-expand h3 {
font-size: 22px;
font-family: Open Sans;
color: #626262;
font-weight: 400;
margin: 0 0 15px;
}
.hw-expand p {
font-size: 13px;
color: #717171;
line-height: 26px;
margin-bottom:20px;
}
.shots-wrap {
border: 1px solid #dfe5eb;
display: table;
}
.shots-wrap li img {
width: 100%;
}
.shots-wrap {
border: 1px solid #DFE5EB;
display: table;
margin-top: 25px;
}
.shots-wrap h5 {
height: 53px;
padding: 0 20px;
line-height: 53px;
background: #3db7f0;
font-size: 16px;
font-family: Open Sans;
color: #fff;
font-weight: 400;
}
.shots-wrap ul {
margin: 0px !important;
padding: 11px 11px 11px;
display: table;
}
.shots-wrap ul li {
margin: 0 !important;
float: left!important;
padding: 8px!important;
list-style: none!important;
width: 33.33333%!important;
}
.shots-wrap ul li span {
position: relative;
display: table;
width:100%;
}
.shots-wrap ul li span a {
position: relative;
display: table;
width:100%;
}
.shots-wrap ul li a:before {
content: "\f00e";
background: rgba(61,183,240,0.8);
font-size: 28px;
color: #fff;
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
font-family: FontAwesome;
padding-top: 30%;
text-align: center;
opacity: 0;
visibility: hidden;
transition: .4s;
}
.shots-wrap ul li:hover a:before {
opacity: 1;
visibility: visible;
transition: .4s;
}
/* 6.1. Portfolio 2 */
.home-works2 {
padding: 20px 15px;
}
.project-2 .hw-info {
width: 50%;
float: left;
}
#project-2 {
padding: 0px;
margin: 0px -15px -20px;
display: table;
}
#project-2 li {
float: left;
width: 46%;
margin: 0 2%;
padding: 0 0 40px;
list-style: none;
}
#project-2 li .hw-expand {
position: absolute;
z-index: 88;
border: 1px solid #dfe5eb;
border-top: none;
width:48%;
}
#project-2 .shots-wrap {
margin-top: 20px;
display: table;
width: 100%;
}
/* 7. Pricing Table */
#m-pricing {
padding: 25px 0px;
}
.mp-icon {
width: 53px;
height: 53px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #3db7f0;
border: 1px solid #3db7f0;
margin: 0 auto -17px;
position: relative;
z-index: 1;
}
.mp-icon:before {
content: "\f01a";
color: #fff;
font-family: 'FontAwesome';
font-size: 24px;
position: absolute;
width: 100%;
height: 100%;
line-height: 51px;
text-align: center;
top: 0;
left: 0;
right: 0;
}
.pricing-table {
position: relative;
z-index: 10;
}
.pricing-table:hover .mp-icon {
background-color: #fff;
border: 1px solid #e5e5e5;
}
.pricing-table:hover .mp-icon:before {
content: "\f0ab";
color: #3db7f0;
}
.mp-title {
background: #3db7f0;
line-height: 60px;
text-align: center;
font-size: 21px;
color: #fff;
border: 1px solid #3db7f0;
border-bottom: 1px solid rgba(0,0,0,0.2)
}
.mp-price {
height: 74px;
background: #3db7f0;
padding: 0px 20px;
font-size: 50px;
font-weight: bold;
color: #fff;
text-align: center;
border: 1px solid #3db7f0;
border-top: none;
}
.mp-price small {
font-size: 24px;
color: #fff;
font-weight: 400;
margin-right: 5px;
position: relative;
top: -6px;
}
.mp-price span {
font-family: Roboto;
font-size: 16px;
font-weight: bold;
color: #fff;
display: inline-block;
line-height: 13px;
position: relative;
top: -13px;
left: 5px;
text-align: left;
}
.mp-price span em {
font-style: normal;
font-size: 11px;
font-weight: bold;
color: #fff;
display: block;
}
.pricing-table {
cursor: pointer;
}
.pricing-table:hover .mp-title ,
.pricing-table:hover .mp-price {
background: #fff;
border-color: #e3e3e3;
color: #3db7f0;
}
.pricing-table:hover .mp-price ,
.pricing-table:hover .mp-price small ,
.pricing-table:hover .mp-price span,
.pricing-table:hover .mp-price span em {
color: #3db7f0;
}
.pricing-table ul {
padding: 0px;
margin: 0px;
}
.pricing-table ul li {
list-style: none;
line-height: 46px;
border: 1px solid #e3e3e3;
border-width: 0 1px 1px 1px;
font-size: 13px;
color: #000;
font-weight: 300;
width: 100%;
display: table;
padding: 0 15px;
}
.pricing-table:hover ul li,
.pricing-table:hover .mp-btn {
border-color: #e3e3e3;
}
.pricing-table ul li i {
font-size: 15px;
color: #4a5768;
margin-right: 10px;
}
.pricing-table:hover ul li i {
color: #3db7f0;
}
.mp-btn {
border: 1px solid #e3e3e3;
border-width: 0 1px 1px 1px;
padding: 20px;
}
.mp-btn a {
background: transparent;
border: solid 1px #e3e3e3;
height: 45px;
line-height: 45px;
text-align: center;
display: table;
width: 100%;
border-radius: 5px;
font-size: 14px;
text-transform: uppercase;
color: #000;
}
.pricing-table:hover .mp-btn a {
border-color: #3db7f0;
background: #3db7f0;
color: #fff;
}
.mp-title ,
.mp-price ,
.mp-price small ,
.mp-price span,
.mp-price span em ,
.mp-btn a
.pricing-table:hover .mp-title ,
.pricing-table:hover .mp-price ,
.pricing-table:hover .mp-price small ,
.pricing-table:hover .mp-price span,
.pricing-table:hover .mp-price span em ,
.pricing-table:hover .mp-btn a {
transition: 0.3s;
}
/* 8. Clients */
.m-clients {
padding: 25px 5px;
}
#m-clients .item {
border: 1px solid #ececec;
height: 110px;
margin: 0 10px;
transition: .3s;
cursor: pointer;
}
#m-clients .item img {
display: table;
margin: 0 auto;
padding: 45px 0;
opacity: 0.1;
transition: .3s;
}
#m-clients .item:hover {
border: 1px solid #ececec;
transition: .3s;
}
#m-clients .item:hover img {
opacity: 1;
transition: .3s;
}
#m-clients .owl-prev {
width: 33px;
height: 33px;
border: 1px solid #e5e5e5;
border-radius: 50%;
opacity: 1;
background: #fff;
position: relative;
float: left;
font-size: 0px;
left: 28px;
line-height: 29px;
position: absolute;
top: 50%;
margin-top: -17px;
}
#m-clients .owl-next {
width: 33px;
height: 33px;
border: 1px solid #e5e5e5;
border-radius: 50%;
opacity: 1;
background: #fff;
position: relative;
float: right;
font-size: 0px;
right: 28px;
line-height: 29px;
position: absolute;
top: 50%;
margin-top: -17px;
}
#m-clients .owl-prev:before {
content: "\f104";
font-family: FontAwesome;
font-size: 18px;
color: #9f9f9f;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
#m-clients .owl-next:before {
content: "\f105";
font-family: FontAwesome;
font-size: 18px;
color: #9f9f9f;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
#m-clients .owl-buttons {
}
#m-clients .owl-prev:hover ,
#m-clients .owl-next:hover {
background: #3db7f0;
color: #fff;
border-color: #3db7f0;
}
#m-clients .owl-prev:hover:before ,
#m-clients .owl-next:hover:before {
color: #fff;
}
.m-clients {
position: relative;
}
/* 9. Promo Box */
.promo-box {
padding: 15px 0px 25px;
}
#promo-box {
background: #3db7f0;
padding: 35px;
-webkit-box-shadow: inset 0 0 0 1px #fff;
-moz-box-shadow: inset 0 0 0 1px #fff;
box-shadow: inset 0 0 0 1px #fff;
border: solid 17px #3db7f0;
}
#promo-box h4 {
color: #fff;
font-size: 19px;
font-weight: 400;
text-align: center;
text-transform: uppercase;
margin: 0 0 21px;
}
#promo-box a {
display: table;
height: 46px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: solid 1px #fff;
color: #fff;
padding: 0 15px;
line-height: 46px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
margin: 0 auto;
}
#promo-box a:hover {
background: #fff;
color: #3db7f0;
}
/* 10. Icons Wrap */
#icons-wrap {
padding: 25px 0px;
}
#icons-wrap ul {
padding: 0px;
margin: 0 -2%;
}
#icons-wrap ul li {
float: left;
list-style: none;
width: 29.33333%;
font-family: Roboto;
font-size: 15px;
color: #a1a1a1;
padding-left: 58px;
position: relative;
font-weight: 300;
height: 45px;
border: 1px solid rgba(0,0,0,0.1);
border-left: none;
border-bottom: none;
margin: 0 2% -1px;
display: inline-block;
line-height: 45px;
transition: 0.3s;
overflow: hidden;
z-index: 11;
}
#icons-wrap ul li i {
font-size: 20px;
color: #fff;
position: absolute;
top: 0px;
left: 0px;
transition: 0.3s;
background: #3db7f0;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
}
#icons-wrap ul li:before {
content: "";
background: #3db7f0;
position: absolute;
width: 0%;
height: 100%;
top: 0;
left: 0;
right: 0;
transition: .4s;
z-index: -1;
}
#icons-wrap ul li:hover {
transition: 0.3s;
color: #fff;
cursor: pointer;
}
#icons-wrap ul li:hover:before {
width: 100%;
transition: .4s;
}
.has-bdr {
border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
/* 11. Newsletter */
.newsletter {
background: url(../images/xtra/3.jpg) no-repeat;
background-size: 100% auto;
padding: 30px;
margin: 15px 0px 55px;
}
.newsletter form input {
height: 55px;
border: none;
border-top: 3px solid #fff;
text-align: center;
background: transparent;
color: #fff;
font-size: 15px;
width: 100%;
}
.newsletter form input:focus {
outline: 0;
color: #fff;
background: transparent;
}
.newsletter form {
padding: 0 30px;
}
.acymailing_module_form .acysubbuttons input.subbutton {
background: #3db7f0;
font-size: 17px;
color: #fff;
text-align: center;
padding: 20px 30px;
width: 100%;
border: none;
display: table;
float: left;
}
.newsletter form button i {
display: block;
margin-bottom: 3px;
}
.acymailing_module_form .acysubbuttons input.subbutton:hover {
background: #000;
color: #fff;
}
/* 12. Toggle Styles */
.toggle-wrap {
padding: 25px 30px;
}
#toggle-view {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
border: 1px solid #dbdbdb;
background: #fff;
}
#toggle-view li {
border-bottom: 1px solid #dbdbdb;
position: relative;
cursor: pointer;
margin: 0;
}
#toggle-view li:last-child {
border-bottom: none;
}
#toggle-view h3 {
margin: 0px;
font-size: 14px;
color: #414141;
padding: 20px 15px;
height: 50px;
}
#toggle-view h3 i {
color: #3DB7F0;
font-size: 20px;
margin: -5px 6px -5px 1px;
position: relative;
top: 2px;
}
#toggle-view span {
position: absolute;
right: 5px;
top: 0px;
font-size: 43px;
width: 50px;
height: 50px;
border-left: 1px solid #dbdbdb;
text-align: center;
padding: 0;
margin: 0;
background: url(../images/plus.png) no-repeat center center;
}
#toggle-view .panel {
padding: 20px;
display: none;
border-top: 1px solid #dbdbdb;
margin: 0 !important;
border-bottom: none !important;
}
.panel p {
color: #a4a4a4;
line-height: 24px;
}
#toggle-view span img {
position: relative;
top: -9px;
}
.minus-ico {
background: url(../images/minus.png) no-repeat center center !important;
}
.plus-ico {
background: url(../images/plus.png) no-repeat center center !important;
}
.panel i {
width: 68px;
height: 68px;
background: #3db7f0;
font-size: 30px;
line-height: 68px;
text-align: center;
border-radius: 50%;
color: #fff;
float: left;
margin-right: 20px;
}
/* 13. Skills Bar */
.jCProgress {
position: relative;
z-index: 99999999;
}
.jCProgress > div.percent {
font-size: 34px;
color: #3db7f0;
position: absolute;
margin-top: 27px;
margin-left: 28px;
width: 195px;
background: #FFF;
height: 195px;
border-radius: 50%;
line-height: 192px;
padding-left: 65.5px;
font-weight: 300;
border: 1px solid #fff;
z-index: 99999;
}
.jCProgress > div.percent:before {
content: "%";
font-size: 34px;
color: #3db7f0;
right: 65.5px;
position: absolute;
font-weight: 300;
z-index: 9999;
}
canvas {
width: 218px !important;
height: 218px !important;
position: relative;
z-index: 9999;
margin: 16px;
border-radius: 50% !important;
z-index: 999;
}
.ms-wrap {
padding: 5px 0px 0px;
}
.skill-wrap {
width: 238px;
height: 238px;
border: 1px solid #e7e7e7;
display: table;
border-radius: 50%;
background: #fff;
transition: .3s;
}
#skill1, #skill2, #skill3 {
margin: -16px -7px -5px;
width: 218px;
height: 218px;
position: relative;
top: 10px;
display: table;
}
.skill-wrap:hover {
transition: .3s;
border: 1px solid #3db7f0;
background: #3db7f0;
cursor: pointer;
}
.skill-wrap:hover div.percent {
font-size: 34px;
color: #fff;
background: #3db7f0;
border-color: #3db7f0;
}
.skill-wrap:hover div.percent:before {
content: "%";
color: #fff;
}
.jCProgress {
position: relative;
z-index: 99999999;
margin: 0 !important;
}
.round-skills h4 {
text-align: center;
color: #919191;
margin: 20px 0 0;
}
.m-skills {
padding: 15px 0px 5px;
}
.fs-wrap {
margin-bottom: 19px;
}
.fs-wrap h4 {
margin: 0 0 10px;
font-size: 14px;
color: #000;
font-weight: 300;
}
.fs-wrap h4 span {
float: right;
}
.fs-bar {
padding: 7px;
border: 1px solid #e5e5e5;
display: table;
width: 100%;
}
.fs-bar span {
background: #3db7f0;
height: 4px;
display: table;
width: 0px;
transition: 1s;
}
/* 14. Team */
.m-team {
padding: 45px 0px 0px;
}
.si-thumb {
width: 235px;
height: 355px;
position: relative;
margin: 0 auto 20px;
overflow: hidden;
cursor: pointer;
}
.si-thumb img {
margin-top: 0px;
transition: .4s;
}
.si-thumb h4 {
background: transparent;
border: 1px solid #ebebeb;
color: #000000;
font-size: 18px;
text-align: center;
padding: 22px 20px;
position: absolute;
top: auto;
left: 0;
right: 0;
bottom: 0;
transition: .4s;
height: 81px;
}
.si-thumb h4 span {
display: block;
font-size: 14px;
font-weight: 400;
margin-top: 2px;
}
.si-thumb h4:before {
content: "";
width: 2px;
height: 11px;
background: #3db7f0;
position: absolute;
top: -30px;
right: 0px;
left: 0px;
margin: 0 auto;
transition: .4s;
visibility: visible;
opacity: 1;
transition: .4s;
}
.si-thumb h4:after {
visibility: hidden;
opacity: 0;
transition: .4s;
}
.si-thumb:hover img {
margin-top: 81px;
transition: .4s;
}
.si-thumb:hover h4 {
background: #50a5d8;
border: 1px solid #50a5d8;
color: #fff;
font-size: 18px;
text-align: center;
padding: 22px 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
transition: .4s;
}
.si-thumb:hover .si-social {
bottom: 0;
transition: .4s;
}
.si-thumb:hover h4:after {
content: '';
position: absolute;
border-style: solid;
border-width: 11px 11px 0;
border-color: #50a5d8 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -11px;
left: 0;
right: 0;
margin: 0 auto;
visibility: visible;
opacity: 1;
transition: .4s;
}
.si-thumb:hover h4:before {
visibility: hidden;
opacity: 0;
transition: .4s;
}
.si-social {
background: rgba(0,0,0,0.7);
padding: 10px 15px;
display: table;
width: 100%;
position: absolute;
bottom: -100px;
left: 0;
right: 0;
transition: .4s;
}
.si-social ul {
padding: 0;
display: table;
margin: 0 auto;
}
.si-social li {
float: left;
list-style: none;
margin-left: 10px;
}
.si-social li a {
width: 31px;
height: 31px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: table;
text-align: center;
line-height: 31px;
color: #fff;
position: relative;
z-index: 88;
}
.f-social li a ,
.si-social li a {
box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.f-social li a:after ,
.si-social li a:after {
content: "";
position: absolute;
top: -1%;
left: -1%;
right: 0;
width: 102%;
height: 102%;
top: 0px;
left: 0px;
padding: 0px;
z-index: -1;
background: #3db7f0;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
z-index: -1;
border-radius: 50%;
}
.f-social li a:after ,
.si-social li a:after {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
opacity: 0;
}
.f-social li a:hover:after ,
.si-social li a:hover:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
top: 0%;
left: 0%;
right: 0;
width: 100%;
height: 100%;
}
.f-social li a:hover ,
.si-social li a:hover {
box-shadow: 0 0 0 1px #3db7f0;
background: #3db7f0;
color: #fff;
}
/* 15. Testimonials */
#m-testimonials {
padding: 25px 0px 15px;
}
#testimonials .item {
background: url(../images/xtra/2.jpg) no-repeat center top;
background-size: auto 100%;
padding: 100px 0;
}
#testimonials img {
-webkit-box-shadow: 0 0 0 2px rgba(238,238,238,0.12);
-moz-box-shadow: 0 0 0 2px rgba(238,238,238,0.12);
box-shadow: 0 0 0 2px rgba(238,238,238,0.12);
border: solid 12px rgba(0,118,249,0);
width: 163px;
height: 163px;
margin: 2px auto 13px;
display: table;
border-radius: 50%;
}
#testimonials p {
font-size: 19px;
color: #fff;
font-weight: 600;
text-align: center;
line-height: 26px;
padding: 0 15%;
text-shadow: 3px 4px 5px rgba(0,0,0,.1);
}
#testimonials i {
font-size: 20px;
color: #fff;
display: table;
margin: 17px auto 13px;
font-weight: 300;
text-shadow: 3px 4px 5px rgba(0,0,0,.1);
}
#testimonials cite {
font-style: normal;
font-size: 16px;
color: #fff;
font-weight: 300;
text-align: center;
width: 100%;
display: table;
}
#testimonials cite span {
font-weight: 700;
}
#testimonials .owl-prev {
width: 30px;
height: 120px;
border-radius: 0px;
opacity: 1;
background: #fff;
position: relative;
float: left;
font-size: 0px;
right: 5px;
line-height: 120px;
transition: .4s;
}
#testimonials .owl-next {
width: 30px;
height: 120px;
border-radius: 0px;
opacity: 1;
background: #fff;
position: relative;
float: right;
font-size: 0px;
right: -5px;
line-height: 120px;
transition: .4s;
}
#testimonials .owl-prev:before {
content: "\f104";
font-family: FontAwesome;
font-size: 18px;
color: #000;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
#testimonials .owl-next:before {
content: "\f105";
font-family: FontAwesome;
font-size: 18px;
color: #000;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
#testimonials .owl-buttons {
position: absolute;
top: 50%;
width: 100%;
margin-top: -70px;
}
#testimonials .owl-prev:hover ,
#testimonials .owl-next:hover {
background: #3db7f0;
color: #fff;
transition: .4s;
}
#testimonials .owl-prev:hover:before ,
#testimonials .owl-next:hover:before {
color: #fff;
}
/* 16. Timeline */
#timeline-wrap {
padding: 10px 0px 25px;
overflow: hidden;
}
#timeline {
width: 100%;
overflow: hidden;
list-style: none;
position: relative;
z-index: 1;
padding: 0;
}
#timeline:before {
content: "";
width: 33px;
height: 33px;
border: 1px solid #e2e2e2;
position: absolute;
bottom: 6px;
right: -0px;
left: 0px;
margin: 0 auto;
border-radius: 50%;
transition: 0.4s;
background: #fff;
z-index: 999;
}
#timeline:after {
content: "";
width: 1px;
height: 98%;
background: #e2e2e2;
position: absolute;
bottom: 0px;
top: 1%;
right: 0px;
left: 0px;
margin: 0 auto;
z-index: -1;
}
#timeline li {
position: relative;
clear: both;
float: left;
width: 42.5%;
padding: 15px 25px 20px;
background: #fff;
border: 1px solid #e5e5e5;
text-align: right;
margin: 0px 0px -53px !important;
transition: 0.3s;
cursor: pointer;
}
#timeline li:last-child {
margin: 0px 0px 0px !important;
}
#timeline li:nth-of-type(odd),
#timeline li:nth-of-type(even) {
margin: -10px 0 0 0;
}
#timeline li:nth-of-type(even) {
float: right;
text-align: left;
}
#timeline li:nth-of-type(even):after {
background: -moz-linear-gradient(0,#f43059,#d8d566);
background: -webkit-gradient(linear,left top,right top,from(#f43059),to(#d8d566));
left: auto;
right: 100%;
}
#timeline .t-time {
font-size: 16px;
color: #000;
font-weight: 400;
position: relative;
}
#timeline .t-left .t-time:before {
content: "";
width: 30px;
height: 2px;
background: #3db7f0;
position: absolute;
right: 0;
bottom: -13px;
}
#timeline .t-right .t-time:before {
content: "";
width: 30px;
height: 2px;
background: #3db7f0;
position: absolute;
left: 0;
bottom: -13px;
}
#timeline .t-time span {
font-size: 13px;
color: #000;
display: block;
}
#timeline p {
font-size: 13px;
color: #a6a6a6;
font-weight: 300;
margin: 0px;
padding: 22px 0 0;
line-height: 18px;
}
.t-left {
position: relative;
}
.t-left:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 11px 10px;
border-color: transparent #3db7f0;
display: block;
width: 0;
z-index: 1;
right: -10px;
top: 13px;
}
.t-left:before {
content: "";
width: 33px;
height: 33px;
border-radius: 50%;
border: 1px solid #e2e2e2;
position: absolute;
top: 6px;
right: -23%;
transition: 0.4s;
background: #fff;
z-index: 999;
}
.t-right:before {
content: "";
width: 33px;
height: 33px;
border-radius: 50%;
border: 1px solid #e2e2e2;
position: absolute;
top: 6px;
left: -23%;
transition: 0.4s;
background: #fff;
z-index: 999;
}
.t-left:hover:before ,
.t-right:hover:before {
content: "";
width: 33px;
height: 33px;
border: 10px solid #3db7f0;
transition: 0.4s;
}
.t-right {
position: relative;
}
.t-right:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 11px 10px 0;
border-color: transparent #3db7f0;
display: block;
width: 0;
z-index: 1;
left: -10px;
top: 13px;
}
#timeline li:hover {
background: #3db7f0;
transition: 0.3s;
}
#timeline li:hover .t-time ,
#timeline li:hover .t-time span ,
#timeline li:hover p {
color: #fff;
transition: 0.3s;
}
#timeline .t-right:hover .t-time:before ,
#timeline .t-left:hover .t-time:before {
background: #fff;
transition: 0.3s;
}
/* 17. Contact Page */
.gmap {
padding: 0px;
}
.gmap div {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
#map {
display: block;
width: 100%;
height: 380px;
margin: 0 auto;
}
#map.large {
height: 380px;
}
#map img {
max-width: none !important;
height: auto;
}
.c-info h4 {
font-size: 23px;
font-weight: 700;
color: #3db7f0;
margin: 15px 0 0;
}
.c-info p {
color: #717171;
font-size: 14px;
line-height: 21px;
margin-bottom: 16px;
}
.cf-info {
}
.cf-info h3 {
font-size: 16px;
text-transform: uppercase;
color: #000;
font-weight: 400;
margin: 0 0 15px !important;
}
.cf-info p {
font-size: 14px;
color: #717171;
font-weight: 300;
line-height: 22px;
margin: 0 0 25px;
}
.cf-info ul {
padding: 8px 34px 0px;
border: 5px solid #3DB7F0;
margin-right: 35px;
margin-top: -50px;
margin-bottom: 50px;
background: #fff;
}
.cf-info ul li {
color: #000;
list-style: outside none none;
transition: all 0.3s ease 0s;
cursor: pointer;
display: table;
width: 100%;
height: 50px;
line-height: 40px;
padding-left: 65px;
margin: 25px 0;
position: relative;
}
.cf-info ul li:last-child {
margin-bottom: 20px;
}
.cf-info ul li span {
width: 34px;
height: 36px;
transform: rotate(45deg);
background: #fff;
color: #3db7f0;
display: table;
float: left;
padding: 10px;
margin: 0;
transition: .3s;
border: 1px solid #ededed;
line-height: 0px;
position: absolute;
left: 0;
right: 0;
}
.cf-info ul li span i {
transform: rotate(-45deg);
display: table;
font-size: 18px;
}
.cf-info ul li h5 {
font-family: Roboto;
font-size: 15px;
color: #000;
margin: 0;
font-weight: 400;
text-align: center;
transition: .3s;
}
.cf-info ul li:hover {
}
.cf-info ul li:hover span {
background: #3db7f0;
color: #fff;
transition: .3s;
border: 1px solid #3db7f0;
}
.cf-info ul li:hover h5 {
color: #fff;
transition: .3s;
}
.contact-info {
padding: 25px 15px;
}
.statusMessage,.successmessage,.errormessage {
display: none;
margin: auto;
width: 100%;
height: auto;
background: rgba(255,255,255,0.1);
margin: 0 auto 15px;
padding: 20px;
border-radius: 5px;
}
.statusMessage p {
margin: 0;
color: #888;
}
.successmessage p {
margin: 0;
color: #888;
}
.success-ico {
background: url(../images/success.png);
width: 30px;
height: 30px;
float: left;
margin-right: 15px;
position: relative;
top: -3px;
}
.error-ico {
background: url(../images/error.png);
width: 30px;
height: 30px;
float: left;
margin-right: 15px;
position: relative;
top: -3px;
}
.errormessage p {
margin: 0;
color: #888;
}
.resp-vtabs li.resp-tab-active {
background: #3db7f0;
}
.resp-tab-active {
background: #3db7f0;
}
/* 18. Twitterfeed */
#twitterfeed {
padding: 30px 0px;
background: #3B4653;
margin: 0px;
}
#twitterfeed i {
width: 62px;
height: 62px;
border-radius: 50%;
background: transparent;
line-height: 62px;
border: 1px solid #fff;
text-align: center;
color: #fff;
font-size: 28px;
margin: 0 auto 25px;
display: table;
}
#tweetfeed p {
font-size: 13px;
color: #FFF;
text-align: center;
margin: 0px;
padding: 0 25px;
}
#index_noside #tweetfeed p {
font-size: 13px;
color: #fff;
text-align: center;
margin: 0;
padding: 0 15%;
}
#tweetfeed p a {
color: #3db7f0;
}
#tweetfeed p span {
}
#tweetfeed p span a {
color: #7fcaed;
}
#tweetfeed .owl-prev ,
#tweetfeed .owl-next {
background: transparent;
opacity: 1;
font-size: 0;
border-radius: 0;
position: relative;
width: 48px;
height: 48px;
overflow: hidden;
}
#tweetfeed .owl-prev {
float: left;
margin-left: -4px;
}
#tweetfeed .owl-next {
float: right;
margin-right: -4px;
}
#tweetfeed .owl-prev:before {
content: "\f104";
font-family: FontAwesome;
font-size: 18px;
color: #FFF;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
right: 0;
background: transparent;
z-index: 77;
text-align: left;
padding: 2px 8px;
}
#tweetfeed .owl-prev:after {
content: "";
background: none repeat scroll 0% 0% #3DB7F0;
position: absolute;
top: -33px;
right: 14px;
left: auto;
width: 140%;
height: 140%;
transform: rotate(45deg);
z-index: 11;
}
#tweetfeed .owl-next:before {
content: "\f105";
font-family: FontAwesome;
font-size: 18px;
color: #fff;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
background: transparent;
z-index: 77;
padding: 2px 8px;
text-align: right;
}
#tweetfeed .owl-next:after {
content: "";
background: #3db7f0;
position: absolute;
top: -33px;
right: -32px;
left: auto;
width: 140%;
height: 140%;
transform: rotate(45deg);
z-index: 11;
}
#tweetfeed .owl-controls {
margin-top: 10px;
text-align: center;
position: absolute;
top: -138px;
width: 100%;
}
/* 19. Info Wrap */
.info-wrap {
background: #4a5768;
margin: 0;
padding: 35px 35px;
}
.info-wrap h5 {
font-size: 20px;
color: #fff;
margin-bottom: 16px;
font-weight: 400;
padding-left: 28px;
position: relative;
}
.info-wrap h5:before {
width: 15px;
height: 15px;
border: 2px solid #fff;
content: "";
position: absolute;
left: 0;
top: 3px;
}
/* 19.1. Contact tabs */
#tabwrap {
overflow: hidden;
width: 100%;
min-height: 100px;
}
#tabs {
padding: 0;
margin: 0;
}
#tabs li {
list-style: outside none none;
display: inline-block;
border: medium none;
width: 33.3333%;
margin: 0px -1.7px -5px;
position: relative;
}
#tabs li a {
float: left;
display: block;
padding: 0;
color: #9e9e9e;
width: auto;
text-decoration: none;
text-align: center;
font-size: 12px;
text-transform: uppercase;
background: #40a4d5;
display: table;
width: 101%;
height: 115px;
padding-top: 27px;
position: relative;
}
#tabs li a i {
width: 62px;
height: 62px;
border-radius: 50%;
background: transparent;
line-height: 60px;
border: 1px solid rgba(255,255,255,0.3);
text-align: center;
color: #fff;
font-size: 28px;
margin: 0 auto;
display: table;
}
#tabs li a:hover {
color: #1f1f1f;
}
#tabs li:nth-child(2) a {
background: #40A4D5;
}
#tabs li:nth-child(3) a {
background: #4291ba;
}
body.default #tabs li.current a {
background: #3db7f0;
color: #fff;
}
#tabs li.current:after {
content: '';
position: absolute;
border-style: solid;
border-width: 9px 10px 0;
border-color: #3db7f0 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -9px;
left: 0;
right: 0;
margin: 0 auto;
}
#content > div {
clear: both;
padding: 20px 20px;
line-height: 19px;
color: #666;
display: none;
background: #fbfbfb;
font-family: Roboto;
font-size: 13px;
color: #4a5768;
font-weight: 400;
margin-top:-1px;
}
#content > div p {
padding-left: 25px;
position: relative;
}
#content > div i {
font-size: 18px;
position: absolute;
top: 3px;
left: 0;
color: #3db7f0;
}
#content .current {
display: block;
}
#content #home.first {
display: block;
}
#content p {
margin: 0;
}
/* 19.2. Flickr Gallery */
.flickr-gallery {
background: #5C6877;
position: relative;
display: block;
height: 175px;
padding: 0px;
width:100%;
}
.thumbs {
margin: 0;
padding: 0;
overflow: hidden;
}
.thumbs a {
list-style: none;
float: left;
margin: 0 7.5px;
width: 87px;
height: 84px;
border-radius: 50%;
padding: 10px;
background: rgba(0,0,0,0.1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.thumbs a:hover {
background: rgba(0,0,0,0.3);
cursor: pointer;
}
.thumbs img {
display: block;
width: 67px;
height: 64px;
border-radius: 50%;
}
.thumbs a img {
border: none;
}
.thumbs {
margin: 0px;
overflow: hidden;
}
#flickr_slider {
padding: 45px 15px 41px;
}
#flickr_slider .owl-item {
padding: 0;
margin: 0;
}
#flickr_slider .owl-prev {
position: absolute;
top: -5px;
left: -10%;
right: 0;
background: rgba(255,255,255,0.1);
height: 30px;
border-radius: 0px;
opacity: 1;
font-size: 0px;
width: 120%;
}
#flickr_slider .owl-prev:before {
width: 100%;
height: 30px;
content: "\f106";
font-family: FontAwesome;
font-size: 18px;
color: #FFF;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0.3;
}
#flickr_slider .owl-next {
position: absolute;
bottom: 0;
left: -10%;
right: 0;
background: rgba(255,255,255,0.1);
height: 30px;
border-radius: 0px;
opacity: 1;
font-size: 0px;
width: 120%;
}
#flickr_slider .owl-next:before {
width: 100%;
height: 30px;
content: "\f107";
font-family: FontAwesome;
font-size: 18px;
color: #FFF;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
opacity: 0.3;
}
#flickr_slider .owl-next:hover, #flickr_slider .owl-prev:hover {
background: rgba(255,255,255,0.4);
transition: .4s;
}
#flickr_slider .owl-next:hover:before, #flickr_slider .owl-prev:hover:before {
opacity: 1;
transition: .4s;
}
/* 19.3. Vertical Tab */
#vertical-tabs {
padding: 25px 0px;
}
#verticalTab2 {
overflow: hidden;
background: #fff;
}
#verticalTab2 .resp-tabs-list {
float: left;
width: 16% !important;
}
#verticalTab2 .resp-tabs-list li {
padding: 14px 0px !important;
height: auto;
background: #3db7f0;
border: none !important;
border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
#verticalTab2 .resp-tabs-list li img {
width: 81px;
height: 81px;
padding: 10px;
border-radius: 50%;
background: rgba(0,0,0,0.1);
margin: 0 auto;
}
#verticalTab2 li.resp-tab-active {
padding: 0px 0px !important;
border-right: 1px solid #fff !important;
}
#verticalTab2 li.resp-tab-active img {
width: 100% !important;
height: auto !important;
border-radius: 0% !important;
background: transparent;
margin: 0 auto;
transition: .5s;
}
#verticalTab2 .resp-tabs-container {
float: right;
width: 84%;
}
.btn-bdr {
display: table;
height: 46px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: solid 1px #3db7f0;
color: #3db7f0;
padding: 0 25px;
line-height: 46px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
#verticalTab2 .resp-tabs-container h4 {
color: #4a5768;
font-size: 21px;
font-weight: bold;
margin-bottom: 14px;
}
#verticalTab2 .resp-tabs-container p {
color: #4a5768;
font-size: 13px;
font-weight: 400;
margin-bottom: 20px;
line-height: 21px;
letter-spacing: -0.4px;
}
#verticalTab2 .resp-tab-content {
display: none;
padding: 30px 35px 3px;
}
#verticalTab3 {
border: 1px solid #e5e5e5;
}
#verticalTab3 .resp-tabs-list li {
border-bottom: 1px solid #cecece !important;
width: 33.33333%;
border-right: 1px solid #e5e5e5;
text-align: center;
color: #000;
}
#verticalTab3 .resp-tabs-list li:last-child {
border-right: none;
}
#verticalTab3 .resp-tabs-list li i {
display: block;
margin-bottom: 10px;
color: #3db7f0;
font-size: 30px;
}
.img-center {
display: table;
margin: 0 auto;
}
#verticalTab3 .resp-tab-content {
padding: 50px 40px 40px 40px;
}
#verticalTab3 .resp-tab-content h3 {
font-size: 22px;
font-weight: 300;
color: #000;
text-align: center;
margin: 30px 0 25px;
}
#verticalTab3 .resp-tab-content h3 span {
font-weight: 700;
color: #3db7f0;
}
#verticalTab3 .resp-tab-content p {
text-align: center;
margin: 0;
font-size: 14px;
}
/* 20. Footer */
footer {
background: #3b4653;
padding: 47px 35px 35px 35px;
margin: 0px;
display: table;
width: 100%;
}
footer p {
font-size: 15px;
color: #ffffff;
padding: 7px 0 0;
}
.f-social {
padding: 0;
display: table;
float: right;
margin: 0;
}
.f-social li {
float: left;
list-style: none;
margin-left: 10px;
}
.f-social li a {
width: 35px;
height: 35px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: relative;
z-index: 88;
display: table;
text-align: center;
line-height: 33px;
color: #fff;
}
.f-social li a:hover {
color: #fff;
}
/* 21. Sidebar */
aside {
padding: 0px;
}
.side-content {
display: table;
width: 100%;
padding: 25px;
border-bottom: 1px solid #dfe5eb;
background: #eff2f5;
}
.side-content h5 {
color: #39424e;
font-size: 17px;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 20px;
}
.last-widget {
border-bottom: none;
}
.side-contact span {
font-size: 15px;
font-family: Open Sans;
color: #39424e;
display: table;
}
.side-contact span i {
margin-right: 10px;
}
.rposts ul {
padding: 0;
margin: 0 -8px;
}
.rposts ul li {
float: left;
width: 33.33333%;
list-style: none;
padding: 0 5px 10px;
}
.rposts ul li span {
width: 75px;
height: 75px;
border-radius: 50%;
padding: 8px;
background: #fff;
transition: .2s;
display: table;
margin: 0 auto;
}
.rposts ul li img {
border-radius: 50%;
width: 61px;
height: 61px;
}
.rposts ul li span:hover {
-webkit-box-shadow: 0 0 0 0px #d2d2d2;
-moz-box-shadow: 0 0 0 0px #d2d2d2;
box-shadow: 0 0 0 0px #d2d2d2;
transition: .3s;
}
.rposts ul li span:hover img {
-webkit-box-shadow: 0 0 0 8px #d2d2d2;
-moz-box-shadow: 0 0 0 8px #d2d2d2;
box-shadow: 0 0 0 8px #d2d2d2;
transition: .5s;
}
.m-tags {
}
.m-tags ul {
padding: 0;
margin: 0 -5px;
}
.m-tags ul li {
float: left;
list-style: none;
margin: 0 5px 10px;
}
.side-content .tags a {
font-size: 12px !important;
color: #39424e;
padding: 5px 10px;
border: 1px solid #dfe5eb;
display: inline-block;
}
.side-content .tags a:hover {
color: #fff;
background: #39424e;
transition: .6s;
}
/* 21. Extras */
.space10 {
margin-bottom: 10px;
}
.space20 {
margin-bottom: 20px;
}
.space30 {
margin-bottom: 30px;
}
.space40 {
margin-bottom: 40px;
}
.space50 {
margin-bottom: 50px;
}
.space60 {
margin-bottom: 60px;
}
.space70 {
margin-bottom: 70px;
}
.space80 {
margin-bottom: 80px;
}
.space90 {
margin-bottom: 90px;
}
.content-head h3 {
font-size: 24px;
color: #000;
text-align: center;
font-weight: 400;
margin: 0 0 12px;
}
.ch-white h3 {
color: #fff !important;
}
.content-head p {
border-bottom: 1px solid #d6d6d6;
text-align: center;
line-height: 0px;
font-family: Times New Roman;
font-style: italic;
color: #4c545f;
padding: 0 75px;
display: table;
margin: 0 auto 33px;
font-size: 17px;
}
.content-head p span {
padding: 0 15px;
background: #fff;
position: relative;
top: 3px;
}
.ch-white p {
color: #fff !important;
border: none;
}
.ch-white p span {
background: transparent !important;
}
.ch-white p {
background: url(../images/default/sep-dark.png) no-repeat center center !important;
}
.sep {
width: 47px;
height: 1px;
background:rgba(255,255,255,0.3);
margin: 21px auto;
}
.sep1 {
width: 100%;
height: 1px;
background:rgba(0,0,0,0.3);
margin: 33px auto 26px;
}
.sep2 {
background:rgba(255,255,255,0.3);
width: 47px;
height: 1px;
margin: 20px 0;
}
.nicew-rails {
position: fixed;
top: 0px!important;
right: 0px!important;
z-index: 999;
background: rgba(0,0,0,0) !important;
padding: 0px;
}
.nicescroll-rails div {
background: rgba(61,183,240,0.8) !important;
}
.nicescroll-rails:before {
content: "";
width: 12px;
background: rgba(0,0,0,0.1) !important;
position: absolute;
height: 100%;
top: 0;
right: 0;
left: 0;
z-index: -1;
}
.border-down {
height: 40px;
background: #FFF;
width: 100%;
display: table;
position: relative;
z-index: 99999;
}
.animated-out,.animated-in {
-webkit-transition-timing-function: cubic-bezier(0.13,0.71,0.30,0.94);
-moz-transition-timing-function: cubic-bezier(0.13,0.71,0.30,0.94);
-o-transition-timing-function: cubic-bezier(0.13,0.71,0.30,0.94);
transition-timing-function: cubic-bezier(0.13,0.71,0.30,0.94);
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
.animated-out {
-webkit-transform: translateY(55px);
-moz-transform: translateY(55px);
-o-transform: translateY(55px);
-ms-transform: translateY(55px);
transform: translateY(55px);
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.animated-in {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
#loader {
background:#fff url(../images/default/loading.gif) no-repeat center center;
height: 100%;
width: 100%;
position: fixed;
z-index: 100000000000;
left: 0%;
top: 0%;
margin: 0;
}
/* 22. Subpage Extras */
.bread_crumbs {
padding: 0px;
margin: 0 auto 0;
display: table;
float: right;
}
.bread_crumbs li {
float: left;
list-style: none;
margin: 0 15px;
color: #000;
font-weight: 300;
position: relative;
}
.bread_crumbs li:before {
content: "\f18e";
font-family: FontAwesome;
font-size: 13px;
position: absolute;
top: 2px;
left: -20px;
color: #4c545f;
}
.bread_crumbs li a {
color: #4c545f;
}
.bread_crumbs li a:hover {
color: #999;
}
.bread_crumbs li:first-child:before, .bread_crumbs li:nth-child(2):before, .bread_crumbs .divider {
display: none;
}
.page-header {
background-color: #f9fafb;
border: solid 1px #e2e6ed;
margin: 0 0 10px;
padding: 20px 10px;
}
.page-header h3 {
color: #4a5768;
font-size: 18px;
font-weight: bold;
}
.page-nav {
display: table;
padding: 0;
width: 100%;
margin: 0 15px;
}
.page-nav ul {
padding: 0;
margin: 0 auto;
display: table;
}
.page-nav ul li {
float: left;
list-style: none;
margin: 0 13px;
}
.page-nav ul li a {
width: 33px;
height: 31px;
border: 1px solid #d6d6d6;
transform: rotate(45deg);
color: #000;
display: table;
transition: .4s;
background: none;
padding: 0;
}
.page-nav ul li a span{
transform: rotate(-45deg);
display: table;
padding: 5px;
text-align: center;
margin: 0 auto;
font-weight: 300;
background: none;
}
.page-nav ul li a:hover, .page-nav ul li.active a {
border: 1px solid #3db7f0;
background: #3db7f0;
color: #fff;
transition: .4s;
}
#topcontrol {
right: 40px!important;
bottom: 30px!important;
z-index: 99999999;
}
#nav_menu ul.nav-child li a i {
display: inline-block;
margin-right: 10px;
}
.owl-item.owl-fade-out{
opacity: 0;
}
.content-head{
margin-top: 15px;
}
.acymailing_form .fieldacyname, .acymailing_form .fieldacyemail{
width: 50%;
float: left;
}
ul.pagination-list li.disabled{
display: none;
}
#home-works .itemList, #home-blog .itemList{
margin-left: -15px;
margin-right: -15px;
}
#home-works .itemList .itemContainer, #home-blog .itemList .itemContainer{
padding-left: 15px;
padding-right: 15px;
}
#home-blog a.btn-bdr {
border-color: #444;
color: #444;
font-weight: normal;
height: 30px;
line-height: 30px;
padding: 0 10px;
}
#home-blog .hb-inner p, #home-blog .hb-inner h4{
text-align: left;
}
#home-blog .hb-inner:hover h4{
color: #FFF;
}
.blog-wrap.itemContainer{
margin-bottom: 20px;
}
.single-blog div.itemComments{
background: none;
border: none;
}
.single-blog div.itemView{
border: none;
padding: 0px;
}
.article-comment-form form span#formLog, .comment-form form span#formLog{
border: none;
margin-bottom: 0;
width: 100%;
height: auto;
}
.recaptcha_theme_blackglass #recaptcha_response_field, .recaptcha_theme_white #recaptcha_response_field {
border: 1px solid gray;
height: 30px;
padding-left: 10px !important;
}
.article-comment-form form .row.hadcaptcha textarea{
height: 193px;
}
.article-comment-form form .row.hadcaptcha .siteurl{
display: none;
}
#m-blog-content.single-blog, #m-blog-content.single-blog #k2Container{
padding-bottom: 0px;
}
#m-blog-content.single-blog span.comment, #m-blog-content.single-blog span.date{
color: #717171;
padding-right: 10px;
}
.blog-media .entry img{
width: 100%;
height: auto;
}
.blog-media.media-iframe .avPlayerContainer, .blog-media.media-iframe .avPlayerContainer iframe{
width: 100% !important;
}
div.itemFullText h3 {
color: #717171;
}
#k2Container .itemListCategoriesBlock{
display: none;
}
.post-content.default .catItemTitle{
padding-top: 20px;
padding-bottom: 10px;
}
.post-content.default span.date{
padding-right: 15px;
}
.post-fulltext{
padding-top: 5px;
padding-bottom: 5px;
}
.post-content.default span.date i, .post-content.default span.author i{
padding-right: 5px;
}
.post-content.default .btn-bdr{
border-color: #717171;
color: #717171;
}
.row.ggcaptcha textarea#message {
height: 215px !important;
}
.contact-info.comment-form{
padding-top: 0;
}
#home-blog .hb-info:hover a.btn-bdr{
color: #EEEEEE !important;
border-color: #EEEEEE !important;
}
body .side-content table.calendar tr td.calendarCurrentMonth,
body .side-content table.calendar tr td.calendarNavMonthPrev,
body .side-content table.calendar tr td.calendarNavMonthNext {
background: none repeat scroll 0 0 #3db7f0;
font-size: 14px;
height: 41px;
padding: 10px;
text-align: center;
text-transform: none;
border: none;
color: #FFF;
}
body .side-content table.calendar tr td.calendarNavMonthPrev a,
body .side-content table.calendar tr td.calendarNavMonthNext a{
color: #FFF;
}
body .side-content table.calendar{
width: 100%;
}
body .side-content table.calendar tr td.calendarDayName{
border: none;
background: #2d2d2d;
height: 35px;
color: #fff;
font-size: 14px;
font-weight: 300;
text-align: center;
text-shadow: none;
vertical-align: middle;
}
body .side-content table.calendar{
color: #464646;
}
body .side-content table.calendar tr td.calendarDateLinked a{
background: #999;
}
body .side-content div.k2CalendarBlock{
height: auto;
}
body .pricing-table:hover .mp-price,
body .pricing-table:hover .mp-icon,
body .pricing-table:hover .mp-title{
background: #FFF !important;
border-color: #e3e3e3 !important;
}
body #verticalTab3 .resp-tabs-list .resp-tab-active i {
color: #fff !important;
}
#nav_menu > ul > li.btactive a i{
border: 1px solid rgba(255, 255, 255, 0.3);
}
#ascrail2000-hr{
display: none !important;
}
.comment-form #recaptcha_privacy{
display: none;
}
body.layout3 .side-content span, body.layout3 .side-content h5, body.layout3 .side-content p{
color: #FFF;
}
#icons-wrap{
display: table;
}
body #testimonials .item{
background-size: 100%; auto;
}
body.layout3 .vertical-menu #cssmenu > ul > li.active > a::before{
border: none;
}
.team-content {
display: block;
word-wrap: break-word;
}
div.k2LatestCommentsBlock ul {
margin-left: 0;
padding-left: 0;
}
div.k2LatestCommentsBlock ul li {
list-style: outside none none;
}
.button.subbutton.btn.btn-primary {
margin-top: 10px;
}