2017.igem.org/Template:Shanghaitech/CSS style

/* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ CONTENTS /\/\/\/\/\/\/\/\/\/\/\/\/\/\//\/\/\/\

1. IMPORT 2. HEADER 3. NAVIGATION 4. FOOTER & FOOTER WIDGETS

    5. SIDEBAR & SIDEBAR WIDGETS
    6. PORTFOLIO/PROJECTS
    7. BLOG STYLING
    8. HOME PAGE
    9. 404 PAGE
    10. ABOUT PAGE
    11. CONTACT PAGE FORM
    12. ICON LIST
    13. Recent Works & Post News Carousel
    14. TESTIMONIALS
    15. PARALLAX
    16. ICON SERVICE BOXES
    17. CLIENTS
    18. TYPOGRAPHY
    19. BUTTONS
    20. PRICING TABLES BOXS
    21. TABS
    22. ACCORDION & TOGGLE
    23. PROGRESS SKILL BAR
    24. PROMO BOX
    25. PAGINATION
    26. TITLE
    27. DROPCAPS
    28. HIGHLIGHT
    29. SWIPE J.S SLIDER
    30. CAROUSEL
    31. FLICKR
    32. LIST & BULLETS
    33. BUTTON UP
    34. SHOP
    35. SHOP CART
    36. MEDIA QUERIES

/

/* =================================================================== */ /* Import Section ====================================================================== */ @import url("font-awesome.css"); @import url("magnified.css"); @import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700"); @import url(http://fonts.googleapis.com/css?family=Lato:400,300,700); @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700); h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

   font-weight: 600;

} body, h1, h2, h3, h4, h5, h6, .button, input[type="button"], input[type="submit"], input[type="text"], input[type="password"], input[type="email"], textarea, select {

   font-family: "Open Sans",Helvetica, Arial, sans-serif;
   font-size:13px;
   line-height:20px;
   color:#555;

} h1 {

   font-size: 28px;
   line-height: 50px;
   margin: 0;

}

h2 {

   font-size: 22px;
   line-height: 30px;

} h3 {

   font-size: 16px;
   line-height: 30px;

} h4 {

   font-size: 14px;
   line-height: 30px;

} h5 {

   font-size: 12px;
   line-height: 24px;

} h6 {

   font-size: 10px;
   line-height: 20px;

}

a {text-decoration: none ;} a:hover{

   text-decoration: none;

-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color:#555; } a:focus{

   outline: none;
   text-decoration: none;

} .not-ie a { -webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; -o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out; } .mrgb-20{ margin-bottom:20px; }

.mrgb-30{ margin-bottom:30px; }

.mrgb-40{ margin-bottom:40px; }

.mrgb-50{ margin-bottom:50px; }

.mrg-0{ margin:0 auto; }

.mrgt-20{ margin-top:20px; }

.mrgt-30{ margin-top:30px; }

.mrgt-40{ margin-top:40px; }

.mrgt-50{ margin-top:50px; }

.mrgt-70{ margin-top:70px; }

.pdt-50{ padding-top: 50px; }

.pdt-70{ padding-top: 70px; }

.content{

   padding:30px 0 60px;
   position: relative;

}

.sub_content {

   padding: 30px 0;

}

.super_sub_content{

   padding: 60px 0;

}

.grey_bg{

   background: #efefef;

}

/* =================================================================== */ /* 2. HEADER ====================================================================== */

background{

   width: 100%;
   height: 100%;

}

header {

   z-index: 999;
   position: relative;
   box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2);

}

header {

   width: 100%;
   height:100%;
   background-image:url("../images/head-3-new1.png");

}

header-top{

   background:#727CB6;

}

.wrapper {

   background:#FFFFFF;
   margin:0 auto;
   width: 100%;

}

.ie8 #header {

   border-bottom: 1px solid #e9e9e9;

} .top-info {

   padding:5px 10px 0;
   color:#fff;
   line-height:28px;

} .top-info span {

   font:600 12px/28px "open sans",Helvetica, Arial, sans-serif;
   padding-right: 15px;

} .top-info span i {

   font-size: 13px;
   margin-right: 5px;

} .dropdown-menu{

   border-radius:0px ;

} .dropdown-items{

   float: right;
   list-style: outside none none;
   margin: 0;
   padding: 0;
   color:#fff;

} .dropdown-items li{

   border-left: 1px solid #7885CF;
   display: inline-block;
   float: left;

} .dropdown-items .dropdown-menu li{

   border-left: 1px solid #fff;
   display:block;
   float:none;

} .dropdown {

   position: relative;

} .account-dropdown .dropdown-menu li a{

   padding:10px;

} .site-language .dropdown .language-dropdown{

   display: block;
   padding: 8px 10px;
   color: #fff;

} .site-language .dropdown .dropdown-menu li{

   border-width: 0;
   display: block;
   float: none;

} .site-language .dropdown .dropdown-menu li a{

   padding: 10px;

} .site-language .dropdown .dropdown-menu li li:last-child {

   border-right: 1px solid hsl(0, 0%, 94%);

} .my-account .dropdown .account-dropdown{

   display: block;
   padding: 8px 10px;
   color: #fff;

} .site-language .dropdown .dropdown-menu li {

   border-width: 0;
   display: block;
   float: none;

} .shope-cart .cart-dropdown{

   color: hsl(0, 0%, 100%);
   display: block;
   font-size: 17px;
   line-height: 18px;
   padding: 11px 15px 7px 10px;
   position: relative;

} .shope-cart .cart-dropdown .cart-items{

   border:1px solid;
   border-radius: 18px;
   color:hsl(0, 0%, 100%);
   font-size: 10px;
   text-align: center;
   width: 16px;
   line-height: 16px;
   position: absolute;
   right: 3px;
   top: 5px;
   display: block;

} .shope-cart .dropdown-menu{

   min-width: 250px;

} .dropdown-menu > li > a{

   padding:10px 22px;

} .dropdown-items li .shope-cart .cart-product {

   border-bottom: 1px dashed hsl(0, 0%, 89%);
   padding: 8px 20px 8px 10px;
   position: relative;
   width: 100%;

} .dropdown .dropdown-menu{

   border-radius:0;
   border:none;
   margin:0;
   padding:0;

} .dropdown-items li .shope-cart .cart-product .left-data{

   float: left;
   margin-right: 10px;

} .dropdown-items li .shope-cart .cart-product .right-data strong {

   font-size: 14px;
   font-weight: 400;
   margin-bottom: 10px;

} .dropdown-items li .shope-cart .cart-product .right-data strong a{

   background-color: hsla(0, 0%, 0%, 0);
   color: hsl(195, 2%, 38%);

} .dropdown-items li .shope-cart .cart-product .right-data p {

   color:#727CB6;
   font-size: 13px;
   margin-bottom: 7px;
   margin-top: 7px;

} .dropdown-items li .shope-cart .cart-product .right-data .remove-item{

   border-radius: 25px;
   color: hsl(0, 88%, 65%);
   display: block;
   height: 25px;
   line-height: 25px;
   position: absolute;
   right: 10px;
   text-align: center;
   top: 10px;
   transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
   width: 25px;

} .dropdown-items li .shope-cart .cart-subtotal {

   color: hsl(195, 2%, 38%);
   font-size: 14px;
   padding: 10px 15px 5px;
   text-align: right;

} .dropdown-items li .shope-cart .cart-buttons {

   padding: 20px 16px 10px;

} .dropdown-items li .shope-cart .cart-buttons a {

   display: inline-block;
   padding:3px 20px;
   color:#fff;
   border-radius:0;

} .dropdown-items li .shope-cart .cart-buttons a:hover, .dropdown-items li .shope-cart .cart-buttons a.grey:hover{

   background:#727CB6;
   color:#fff;

} .dropdown-items li .shope-cart .cart-buttons a.grey{

   background:none;
   color:#5e6162;

}

.dropdown-items li .shope-cart .cart-buttons a:hover{

   background: #5d6593;

}

/* Animated-Search ====================================*/ .search-bar {

   float: right;

}

.search-bar .search-label {

   background: inherit;
   border-radius: 5px;
   display: block;
   height: 29px;
   overflow: hidden;

}

.search-bar .search-label .search-button, .search-bar .search-label .search-input {

   background: transparent;
   border: 0 none;
   height: 30px;
   margin: 0;
   outline: medium none;
   padding: 0;

} .search-bar label{margin: 0}

.search-bar .search-label .search-button i{

   font-size: 16px;
   font-weight: 500;
   color: #fff;

} .search-bar .search-label .search-button {

   background: inherit;
   color: #696969;
   height: 30px;
   transition: all 0.6s ease 0s;
   width: 30px;

}

.search-bar .search-label .search-input {

   background: #eee ;
   color: #666;
   font-weight: normal;
   width: 0;
   transition: width 0.6s ease 0s;

} .search-exp .search-bar .search-label .search-button{

   background: #eee;
   color: #c9c9c9;

}

.search-exp .search-bar .search-label .search-input{

   width: 150px;

}

/* Logo ====================================*/

menu-bar{

   position: relative;
   z-index: 999;

}

logo {margin-top: 2%; }

logo img{

   width:100%;
   height:auto;

}

logo > h1 {

   margin:0;
   line-height: 0;
   display:inline-block;

}

/* page_head Title ====================================*/ .page_head {

   border-bottom: 3px solid #dcdbd7;

padding:40px 0;

   clear:both;

}

.page_title h2 {

   color: #181818;
   background: #fff;
   float: left;
   font-size: 24px;
   font-weight: 600;
   margin: 0 0 -3px 0 ;
   padding: 7px 15px;
   text-transform: uppercase;
   border-bottom: 3px solid #727CB6;

}

/* Breadcrumbs ====================================*/

breadcrumbs{

   background: #727cb6;
   float: right;
   padding: 3px 10px;

}

breadcrumbs ul {

   font-size: 12px;
   padding:0 5px 0 0;
   margin: 0;

}

breadcrumbs ul li {

display: inline-block; padding: 0 11px 1px 0; margin: 0 0 0 5px;

   background: url(../images/breadcrumbs.png) no-repeat 100% 50%;
   color: #fff;

}

breadcrumbs ul li a { color: #fff; }

breadcrumbs ul li:last-child { background: none;padding:0; }

/* =================================================================== */ /* 3. NAVIGATION ====================================================================== */ /*

 Add some SmartMenus required styles not covered in Bootstrap 3's default CSS.
These are theme independent and should work with any Bootstrap 3 theme mod.

/

.navbar-default{

   background: transparent;

} .navbar-collapse.collapse {

   float: right;

} .navbar-nav ul {

   width:100%;
   min-width:187px!important;
   padding:0;

}

.navbar-toggle{

   background:#303436;
   border:none;
   padding:10px 10px;
   border-radius:3px;
   margin-top:5px;

} .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{

   background:#303436;

} .navbar-default .navbar-toggle .icon-bar{

   background-color:#fff;
   height:3px;

} .navbar{

   margin-bottom: 0;

   min-height:35px;
   border:none;

}

/* sub menus arrows */ .navbar-nav .sub-arrow, .navbar-nav .collapsible .sub-arrow {

   position:static;
   margin-top:0;
   margin-right:0;
   margin-left:6px;
   display:inline-block;
   width:0;
   height: 0;
   overflow:hidden;
   vertical-align:middle;
   /*border-top:4px solid;
   border-right:4px dashed transparent;
   border-bottom:4px dashed transparent;
   border-left:4px dashed transparent;*/

} .navbar-nav > li > .has-submenu .sub-arrow {

   display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   font-size: 12px;
   width:8px;
   height: 8px;
   line-height: 8px;
   border-width: 0px;

} .navbar-nav > li > .has-submenu .sub-arrow:before {

   content: "\f107";

} .navbar-nav ul .sub-arrow {

   position:absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin-left: 0;

}

.navbar-nav ul .sub-arrow:before{

   content: "\f105";
   font-family:'FontAwesome';
   width: 99%;
   height: 98%;
   display: block;
   position: relative;
   top: 12px;
   right: 10px;
   text-align: right;

}

.navbar-nav ul a.has-submenu {

   padding-right:30px;

} .navbar-default .navbar-collapse, .navbar-default .navbar-form{

   border: none;
   background: transparent;

} /* scrolling arrows for tall menus */ .navbar-nav span.scroll-up, .navbar-nav span.scroll-down {

   position:absolute;
   display:none;
   visibility:hidden;
   height:20px;
   overflow:hidden;
   text-align:center;

}

.navbar-nav span.scroll-up-arrow, .navbar-nav span.scroll-down-arrow {

   position:absolute;
   top:-2px;
   left:50%;
   margin-left:-8px;
   width:0;
   height:0;
   overflow:hidden;
   border-top:7px dashed transparent;
   border-right:7px dashed transparent;
   border-bottom:7px solid;
   border-left:7px dashed transparent;

} .dropdown-menu.sm-nowrap{

   display: none;
   left: 0;
   margin-left: 186px;
   margin-top: -42px;
   max-width: 20em;
   min-width: 10em;
   top: auto;
   width: auto;

}

.navbar-nav span.scroll-down-arrow {

   top:6px;
   border-top:7px solid;
   border-right:7px dashed transparent;
   border-bottom:7px dashed transparent;
   border-left:7px dashed transparent;

}

.navbar-default .navbar-nav > li > a{

   color:#555;
   text-transform:uppercase;
   font-size: 15px;
   font-weight: 700;
   line-height: 15px;

} .navbar-nav > li{

   padding: 0;

} .navbar-default .navbar-nav > li:first-child{

   border-left:none;

} .navbar-nav > li > a:hover,.navbar-nav > li > a:focus,.navbar-nav > li.active > a, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {

   background:transparent;
   color:#fff!important;

}

.navbar-default .navbar-nav > li:hover > a{background: #727CB6 !important;}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {

   background-color: #727CB6 !important;

}

.nav.navbar-nav > li > a{

   border: 2px solid transparent;

} .nav.navbar-nav > li.active > a{

   background:transparent;
   border: 2px solid #fff;

} .nav.navbar-nav > li:hover > a{

   background:#727CB6;
   border: 2px solid #727CB6;

}

/* add more indentation for 2+ level sub in collapsible mode - Bootstrap normally supports just 1 level sub menus */ .navbar-nav .collapsible ul .dropdown-menu > li > a, .navbar-nav .collapsible ul .dropdown-menu .dropdown-header {

   padding-left:35px;

} .navbar-nav .collapsible ul ul .dropdown-menu > li > a, .navbar-nav .collapsible ul ul .dropdown-menu .dropdown-header {

   padding-left:45px;

} .navbar-nav .collapsible ul ul ul .dropdown-menu > li > a, .navbar-nav .collapsible ul ul ul .dropdown-menu .dropdown-header {

   padding-left:55px;

} .navbar-nav .collapsible ul ul ul ul .dropdown-menu > li > a, .navbar-nav .collapsible ul ul ul ul .dropdown-menu .dropdown-header {

   padding-left:60px;

}

/* fix SmartMenus sub menus auto width (subMenusMinWidth and subMenusMaxWidth options) */ .navbar-nav .dropdown-menu { border: 0;}

.navbar-nav .dropdown-menu > li > a{

   white-space:normal;
   font-size: 13px;
   padding:12px 20px;
   border-bottom:1px solid #e4e4e4;
   position: relative;

}

.navbar-nav > li > .dropdown-menu > li a{

   transition: all 0.3s ease 0s;

}

.navbar-nav .dropdown-menu > li > a:hover{

   color:#fff;
   background:#727CB6 ;

} .navbar-nav ul.sm-nowrap > li > a {

   white-space:nowrap;

} /* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */ .navbar-nav .collapsible ul {display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;} .navbar-nav .collapsible ul.sm-nowrap > li > a {white-space:normal;} .navbar-nav .collapsible iframe{display:none;} /* disable Bootstrap 3's global box-sizing:border-box; for the menus as it doesn't play nice with SmartMenus */ ul.sm li *,ul.sm li *:before,ul.sm li *:after{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {

   border-color:transparent!important;

}

/*--------sticky plugin css-------*/ .sticky-wrapper.is-sticky #menu-bar{

   background-color:#363F48;
   opacity:0.95;

} .sticky-wrapper.is-sticky #menu-bar .nav.navbar-nav li.active, .sticky-wrapper.is-sticky #menu-bar .nav.navbar-nav li:hover{

   background-color:#7885CF;

} .sticky-wrapper.is-sticky #menu-bar .nav.navbar-nav > li:hover > a {

   background:transparent;

} .sticky-wrapper.is-sticky #menu-bar .nav.navbar-nav > li > a{

   border:none;

} .sticky-wrapper #menu-bar{

   padding: 30px 0;

} .sticky-wrapper.is-sticky #menu-bar{

   padding: 0;

} .sticky-wrapper.is-sticky #menu-bar #logo{

   margin-top: 7%;

} .sticky-wrapper.is-sticky #menu-bar .navbar-default .navbar-nav > li > a{

   height:50px;
   line-height: 50px;

}

/*------------Animation-CSS-------------*/ .navbar-nav > li:hover > ul{

   -moz-animation: fadeInUp .4s ease-in;
   -webkit-animation: fadeInUp .4s ease-in ;
   animation: fadeInUp .4s ease-in;

}

.navbar-nav > li > ul.dropdown-menu li:hover ul{

   -moz-animation: fadeInUp .5s ease-in ;
   -webkit-animation: fadeInUp .5s ease-in ;
   animation: fadeInUp .5s ease-in;

} /*--------Animation_Hover_Effect_CSS---------------*/ @-webkit-keyframes fadeInUp {

   0% {
       opacity: 0;
       -webkit-transform: translateY(30px);
       transform: translateY(30px);
   }

   100% {
       opacity: 1;
       -webkit-transform: translateY(0);
       transform: translateY(0);
   }

}

@keyframes fadeInUp {

   0% {
       opacity: 0;
       -webkit-transform: translateY(30px);
       -ms-transform: translateY(30px);
       transform: translateY(30px);
   }

   100% {
       opacity: 1;
       -webkit-transform: translateY(0);
       -ms-transform: translateY(0);
       transform: translateY(0);
   }

}

.fadeInUp {

   -webkit-animation-name: fadeInUp;
   animation-name: fadeInUp;

}

/*------------Hover_Effect_CSS------------*/ .navbar-default .navbar-nav > li > a {

   overflow: hidden;
   height: 22px;
   line-height: 22px;
   padding: 10px 12px;
   color: #fff;

} .navbar-default .navbar-nav > li > a > span.data-hover{

   position: relative;
   display: inline-block;
   height: 3em;
   color: #fff;
   margin: -12px -29px;
   padding: 11px 30px;
   -webkit-transition: -webkit-transform 0.3s;
   -moz-transition: -moz-transform 0.3s;
   transition: transform 0.3s;

}

.navbar-default .navbar-nav > li > a > span.data-hover::before {

   position: absolute;
   color: #fff;
   right:100%;
   margin: -62px 6px;
   padding: 62px 24px;
   content: attr(data-hover);
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
   transition:all 0.3s ease-in-out 0s;
   _webkit-transition:all 0.3s ease-in-out 0s;
   _moz-transition:all 0.3s ease-in-out 0s;

} .navbar-default .navbar-nav > li:hover > a > span.data-hover, .navbar-default .navbar-nav > li:focus > a > span.data-hover{

   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   transform: translateX(100%);
   transition:all 0.3s ease-in-out 0s;
   _webkit-transition:all 0.3s ease-in-out 0s;
   _moz-transition:all 0.3s ease-in-out 0s;

}

/* ===================================================== */ /* 4. FOOTER & FOOTER WIDGETS */ /* ===================================================== */ .footer_bottom{

   background:#292F38;
   padding:20px 0;
   color:#fff;

} .footer{

   background:#323A45;
   padding:30px 0;
   position: relative;
   color:#fff;

}

/* Footer Widgets ====================================*/ .widget_content{

   margin-top: 15px;

} .widget_content > p {

   font-family: Pt Sans,Helvetica, Arial, sans-serif;
   font-size: 14px;

} .copyright {

   color: #AAAAAA;
   font-size: 12px;
   line-height: 40px;
   margin: 0;

} .copyright a{

   color:#fff;
   text-decoration:none;

} .copyright a:hover{

   color:#aaa;

} .sidebar .widget h4 span {

   background:#fff;
   color:inherit;

}

/* Twitter Feed Widget ====================================*/ .tweet_list {

   padding: 0;
   position: relative;
   margin:0 auto;
   list-style:none;

} .tweet_list li {

   color: #fff;
   margin-bottom: 5px;

} .tweet_list li::before {

   font-family: fontawesome;
   content: "";
   font-size: 16px;
   padding-right: 8px;
   position:absolute;

} .tweet_list li p {

   line-height: 20px;
   overflow: hidden;
   margin-left:26px;

} .tweet_list li p a {

   color: #fff;
   font-weight: 700;
   font-size: 12px

} .tweet_content .time {

   font-size: 12px;
   color:#E3E3E3;
   font-family: Lato,Helvetica, Arial, sans-serif;
   font-weight: bold;
   padding-left: 25px;

}

/* Contact Widget ====================================*/ .contact-details-alt{padding:0;} .contact-details-alt li{list-style:none;} .contact-details-alt li p strong { color:#fff; float: left; margin: 0;font-size:12px;width:25%;} .contact-details li p strong { color:#666; float: left; margin: 0 5px 5px 0; } .contact-details-alt li {

   margin: 0 0 5px 0;

} .contact-details p, .contact-details li, .contact-details a {color: #666;} .contact-details-alt p {

   line-height: 18px;
   width: 100%;
   margin:0;

} .contact-details-alt p a {

   color: #FFFFFF;
   font-weight: 700;
   font-size:12px;

} .contact-details-alt p a:hover {

   color: #919191;

}

.contact-details-alt li i{

   float: left;
   font-size: 12px;
   margin: 2px 0 0 0 ;
   width: 15px;

}

.widget_info_contact{padding:0;margin-top:20px;} .widget_info_contact li{list-style:none;} .widget_info_contact li p strong { color:#666; float: left; margin: 0 5px 5px 0;font-size: 12px;width:20%;} .widget_info_contact li {

   margin: 0 0 5px 0;

} .widget_info_contact p {

   margin: 0 0 0 20px;
   line-height: 18px;
   overflow:hidden;

} .widget_info_contact p a {

   color: #666;
   font-weight: 600;
   font-size: 12.5px;

} .widget_info_contact p a:hover {

   color: #919191;

} .widget_info_contact li i {

   float: left;
   margin: 1px 0 0 0;

}

/* Social Widget ====================================*/ .widget_social {

   list-style: none outside none;
   margin: 0 auto;
   overflow: hidden;
   padding: 0;

} .widget_social li {

   float: left;
   background: none !important;

} .widget_social li a {

   color: #666;
   display:block;
   height: 46px;
   text-align: center;
   width: 46px;
   border-radius:50%;
   -webkit-border-radius: 50%;-moz-border-radius: 50%;
   -webkit-transition: 0.25s;
   -moz-transition: 0.25s;
   -o-transition: 0.25s;
   transition: 0.25s;

} .widget_social li a i {

   font-size: 22px;
   line-height: 46px;
   margin-right: 0;
   float: none;

} .widget_social li a.fb:hover {color: #2f5a9a;} .widget_social li a.twtr:hover {color: #3abdd1;} .widget_social li a.gmail:hover {color: #363636;} .widget_social li a.pinterest:hover{color: #d13a3a;} .widget_social li a.rss:hover {color: #f15200;} .widget_social li a.tumblr:hover {color: #203550;} .widget_social li a.flickrs:hover {color: #ff0084;} .widget_social li a.instagram:hover {color: #507ea4;} .widget_social li a.linkedin:hover {color: #0072b2;} .widget_social li a.skype:hover {color: #00aaf1;} .widget_social li a.youtube:hover {color: #ff3330;} .widget_social li a.dribbble:hover { color: #f973a4;}

/* =================================================================== */ /* 5. Sidebar & Sidebar Widgets ====================================================================== */ .sidebar .widget {

   display: block;
   float: left;
   height: 100%;
   margin-bottom: 30px;
   position: relative;
   width: 100%;

}

.sidebar .widget ul.list_style{

   padding: 0px;
   margin: 0px;
   float: left;
   width: 100%;

} .sidebar .widget ul.list_style li{

   list-style:none;
   border-bottom:1px solid #f2f2f2;
   font-size: 12px;
   line-height: 20px;
   padding: 8px 2px 8px 12px;

} .sidebar .list_style li:before {

   font-family: FontAwesome;
   content: "\f105";
   font-size: 13px;
   position: absolute;
   left: 0;
   top: 8px;

} .sidebar .widget ul.list_style li a {

   color: #777;
   font-size: 13px;
   line-height: 20px;

} .sidebar .widget ul.list_style li a:hover {

   color:#727CB6;

}

/* Site Search */ /*------------------------------------------------------*/ .site-search-area {

   margin: 0px;
   padding: 0 0 30px;

}

site-searchform {

   margin: 0;
   padding: 0;

}

site-searchform #s{

   border: 1px solid #eee;
   background-color: #fff;
   width: 82%;
   height:41px;
   padding:5px 10px 5px 10px;
   color: #999;
   float: left;
   font: normal 12px "Open sans",Helvetica, Arial, sans-serif;

}

site-searchform #s:focus{

   border: 1px solid #E74C3C;
   background-color: #fff;
   width: 82%;
   height:41px;
   padding:5px 10px 5px 10px;
   color: #999;
   float: left;
   font: normal 12px "Open sans",Helvetica, Arial, sans-serif;

}

site-searchform #searchsubmit{

   float: left;
   width:18%;
   height:41px;
   cursor:pointer;
   text-indent:-5555em;
   line-height:100;
   overflow:hidden;
   background: #727CB6 url(../images/search-icon.png) no-repeat center 14px;
   border:0;
   transition:all 0.4s ease-in-out;
   -webkit-transition:all 0.4s ease-in-out;
      -moz-transition:all 0.4s ease-in-out;
       -ms-transition:all 0.4s ease-in-out;
        -o-transition:all 0.4s ease-in-out;

}

site-searchform #searchsubmit:hover{

   background: #444A6D url(../images/search-icon.png) no-repeat center 14px;

} .gray_border {

   width: 100%;
   height: 10px;
   margin-bottom: 10px;
   border-bottom: 1px solid #DCDCDC;

}

ul.tags {

   padding: 0;
   margin: 5px 0 15px;
   float: left;

} .tags li {

   float: left;
   padding: 0px;
   margin: 0px 5px 5px 0px;
   list-style-type: none;
   line-height: 25px;

} .tags li a {

   border: 1px solid #f2f2f2;
   color: #909090;
   float: left;
   font-size: 12px;
   padding: 3px 8px;
   -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
       -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
           transition: all 0.2s;

} .tags li a:hover {

   background-color: #727CB6;
   color: #fff;

}

/* Recent Posts Widget ====================================*/ .links{

   margin:0;
   padding:0;

} .links li{

   list-style:none;

} .links li::before {

   content: "";
   font-family: FontAwesome;
   font-size: 13px;
   margin-right: 5px;

}

.links li a {

   color: #fff;
   font-size: 13px;
   font-weight: 600;
   line-height: 22px;

} .footer li a:hover{

   color:#727CB6;

} .links li span {

   display: block;
   color: #919191;
   font-size: 12px;
   margin-bottom: 6px;

}

/* ========================================================== */ /* 6. PORTFOLIO/PROJECTS */ /* ========================================================== */

.isotope-item {

   z-index: 2;

}

.isotope-hidden.isotope-item {

   pointer-events: none;
   z-index: 1;

}

/* Isotope CSS3 transitions */ .isotope, .isotope .isotope-item {

   -webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
   -ms-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
   transition-duration: 0.8s;

}

.isotope {

   -webkit-transition-property: height, width;
   -moz-transition-property: height, width;
   -ms-transition-property: height, width;
   -o-transition-property: height, width;
   transition-property: height, width;

}

.isotope .isotope-item {

   -webkit-transition-property: -webkit-transform, opacity;
   -moz-transition-property: -moz-transform, opacity;
   -ms-transition-property: -ms-transform, opacity;
   -o-transition-property: top, left, opacity;
   transition-property: transform, opacity;

}

/* Disabling Isotope CSS3 transitions */ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {

   -webkit-transition-duration: 0s;
   -moz-transition-duration: 0s;
   -ms-transition-duration: 0s;
   -o-transition-duration: 0s;
   transition-duration: 0s;

}

/* Disable CSS transitions for containers with infinite scrolling */ .isotope.infinite-scrolling {

   -webkit-transition: none;
   -moz-transition: none;
   -ms-transition: none;
   -o-transition: none;
   transition: none;

}

portfolio{

   width:100%;
   padding-bottom:120px;
   position:relative;
   z-index:9;

}

filter {

   margin: 0 auto 25px 15px;
   overflow: hidden;
   padding: 5px 0 0;
   position: relative;
   /*text-align: left;*/
   text-align: center;
   width: auto;
   z-index: 10;

}

filter li {

   /*float: left;*/
   display: inline-block;
   list-style: none outside none;
   margin: 0 1px 10px;

}

filter li a{

   display: block;
   color:#fff;
   padding:10px 20px;
   font-size:12px;
   position: relative;
   overflow:hidden;
   line-height: 12px;
   font-family: Arial, Helvetica, sans-serif;
   background:#727CB6;
   -moz-transition: all .50s ease-in-out;
   -webkit-transition: all .50s ease-in-out;
   transition: all .50s ease-in-out;
   outline:none;
   text-decoration: none;

}

filter li.selected a, #filter li a:hover{

   background:#444A6D;
   -webkit-transition: all .20s ease-in-out;
   -moz-transition: all .20s ease-in-out;
   -ms-transition: all .20s ease-in-out;
   -o-transition: all .20s ease-in-out;
   transition: all .20s ease-in-out;

}

list{ margin-bottom:30px;padding: 0; }

.list_item{

   margin-bottom:3%;
   overflow: hidden;

}

/* Portfolio Image ====================================*/

figure {

   position: relative;
   overflow: hidden;
   margin: 0;
   text-align: center;
   cursor: pointer;

}

figure img {

   position: relative;
   display: block;
   min-height: 100%;
   max-width: 100%;
   opacity: 0.8;

}

figure figcaption {

   padding: 2em;
   color: #fff;
   text-transform: uppercase;
   font-size: 1.25em;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;

} figure figcaption h5{

   color: #fff;

}

figure figcaption::before, figure figcaption::after {

   pointer-events: none;

}

figure figcaption {

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

}

figure h5, figure p {

   margin: 0;

}

figure h5 {

   word-spacing: -0.15em;
   font-weight: 600;
   font-size: 115%;

} .large-images figure h5 {

   font-size: 155%;

} .small-images figure h5, .owl-item .item-description h5{

   font-size: 100%;

}

.list_item figure p {

   letter-spacing: 1px;
   font-size: 85%;

} .small-images figure p, .owl-item .item-description p{

   font-size: 75%;

} .large-images figure p {

   font-size: 95%;

}

/* Bubba Hover Effect on Portfolio Image ===========================================*/ figure.effect-bubba {

   background: #727CB6;

}

figure.effect-bubba img {

   width: 100%;
   opacity: 1;
   -webkit-transition: opacity 0.35s;
   transition: opacity 0.35s;

}

figure.effect-bubba:hover img {

   opacity: 0.4;

}

/* Medium Image Border */ figure.effect-bubba figcaption::before, figure.effect-bubba figcaption::after {

   position: absolute;
   top: 25px;
   right: 25px;
   bottom: 25px;
   left: 25px;
   content: ;
   opacity: 0;
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s;

}

/* Small Image Border */ .small-images figure.effect-bubba figcaption::before, .small-images figure.effect-bubba figcaption::after, .owl-item figure.effect-bubba figcaption::before, .owl-item figure.effect-bubba figcaption::after {

   top: 15px;
   right: 15px;
   bottom: 15px;
   left: 15px;

}

/* Large Image Border */ .large-images figure.effect-bubba figcaption::before, .large-images figure.effect-bubba figcaption::after {

   top: 30px;
   right: 30px;
   bottom: 30px;
   left: 30px;

}

figure.effect-bubba figcaption::before {

   border-top: 1px solid #fff;
   border-bottom: 1px solid #fff;
   -webkit-transform: scale(0,1);
   transform: scale(0,1);

}

figure.effect-bubba figcaption::after {

   border-right: 1px solid #fff;
   border-left: 1px solid #fff;
   -webkit-transform: scale(1,0);
   transform: scale(1,0);

}

figure.effect-bubba h5 {

   padding-top: 30%;
   opacity: 0;
   -webkit-transition: -webkit-transform 0.35s;
   transition: transform 0.35s;
   -webkit-transform: translate3d(0,-20px,0);
   transform: translate3d(0,-20px,0);

}

figure.effect-bubba p {

   padding: 6px 2.5em 20px;
   opacity: 0;
   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
   transition: opacity 0.35s, transform 0.35s;
   -webkit-transform: translate3d(0,20px,0);
   transform: translate3d(0,20px,0);

} .large-images figure.effect-bubba p{

   padding: 13px 2.5em 15px;

} .small-images figure.effect-bubba p{

   padding: 2px 2.5em 15px;

}

figure.effect-bubba:hover figcaption::before, figure.effect-bubba:hover figcaption::after {

   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);

}

figure.effect-bubba:hover h5, figure.effect-bubba:hover p {

   opacity: 1;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);

}

figure .option{

   text-align: center;
   position: absolute;
   top: 33%;
   z-index: 1;
   width: 100%;
   transform: translate3d(0px, -20px, 0px);
   transition: transform 0.35s ease 0s;

}

figure .option .fa {

   background: rgba(256, 256, 256, 0.9);
   -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   line-height: 40px;
   font-size: 16px;
   text-align: center;
   text-decoration: none;
   width: 40px;
   height: 40px;
   position: relative;
   opacity: 0;
   -webkit-transition: all 0.3s , color 0.1s 0.3s;
   -moz-transition: all 0.3s , color 0.1s 0.3s;
   -o-transition: all 0.3s , color 0.1s 0.3s;
   transition: all 0.3s , color 0.1s 0.3s;
   color: rgba(50, 50, 50, 0.9);

} .small-images figure .option .fa , .latest_work figure .option .fa {

   font-size: 14px;
   width: 32px;
   height: 32px;
   line-height: 32px;

}

figure .option .fa:hover {

   color:#727CB6;

} figure .option .fa:hover {

   background: rgba(256,256,256,1);

}

figure .option .fa-search {

   left: -45px;

} figure .option .fa-link {

   left: 45px;

}

figure .option .fa-shopping-cart {

   left: 45px;

}

figure:hover .option .fa-link, figure:hover .option .fa-search , figure:hover .option .fa-shopping-cart {

   left: 0px;
   opacity: 1;

}

/* MASONRY PORTFOLIO STYLES ==========================================-*/ .masonry_wrapper {

   overflow:hidden;
   margin:0;

}

.small-images .masonry_wrapper figure.effect-bubba h5{

   padding-top: 24%;

} .medium-images .masonry_wrapper figure.effect-bubba h5{

   padding-top: 26%;

} .large-images .masonry_wrapper figure.effect-bubba h5{

   padding-top: 30%;

} .large-images .masonry_wrapper figure.effect-bubba p{

   padding: 8px 2.5em 15px;

} .medium-images .masonry_wrapper figure.effect-bubba p{

   padding: 3px 2.5em 20px;

} .small-images .masonry_wrapper figure.effect-bubba p{

   padding: 0 2.5em 15px;

}

.mixed-container .item {

   padding:10px 5px;
   margin:0;
   height: auto !important;

}

/* Portfolio Single Page ====================================*/ .portfolio_single{

   padding:30px 0;

} .portfolio_single .widget_title h4 span {

   background:#fff;

}

.project_details {

   background-color:#fff;
   overflow:hidden;

} .project_detail_slider {margin-bottom: 30px;} .project_desc p{margin-bottom:20px;} .project_desc h6, .project_details h6 {

   font-size: 20px;
   margin-top: 5px;

} .project_details .details li {

   border-bottom: 1px solid #F2F2F2;
   color: #A3A3A3;
   font-size: 12px;
   line-height: 18px;
   padding: 8px 0;

} .project_details .details{

   margin: 0;
   padding:0;

} .project_details .details li span {

   color: #686868;
   display: block;
   float: left;
   font-weight: bold;
   height: 20px;
   position: relative;
   width: 30%;

} .project_details .details li a {

   color: #A3A3A3;
   font-size: 12px;

}

.project_details .details li a:hover {color: #e74c3c;}

.project_detail_box {margin-bottom: 30px;}

.project_description, .project_details{

   margin-bottom: 30px;

}

.arrow-left, .arrow-right{

   width: 23px;
   height: 23px;
   display: inline-block;
   float: left;
   background-color: #f2f2f2;
   color: #666;
   -webkit-transition: all 150ms ease-in-out;
   -moz-transition: all 150ms ease-in-out;
   -o-transition: all 150ms ease-in-out;
   -ms-transition: all 150ms ease-in-out;
   transition: all 150ms ease-in-out;

} .arrow-left i, .arrow-right i{

   font-size: 14px;
   display: block;
   line-height:16px;
   padding-top: 4px;
   text-align: center;

} .arrow-left.active, .arrow-right.active{

   background-color: #bdc3c7;
   color: #f2f2f2;
   cursor: pointer;

} .arrow-left.active:hover, .arrow-right.active:hover { background-color: #777;}

/* ======================================================================== */ /* 7. BLOG STYLING /* ======================================================================== */ .blogTitle {

   margin: auto auto 10px;
   position: relative;

} .blogTitle > a h2 {

   font-size: 18px;
   margin-bottom: 5px;
   margin-top:0;
   color: #555;
   font-weight: 600;
   text-decoration: none;
   -webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;

} .blogContent > p {

   font-size: 13px;
   line-height: 20px;

} .blogTitle > a:hover h2{color: #727CB6;} .blogTitle span {

   color: #777;
   cursor: pointer;
   font-size: 12px;
   line-height: 24px;

} .blogTitle span i {

   padding-right: 5px;
   font-size: 12px;

} .blogTitle span:hover i {

   color: #777;

} .blogMeta {

   display: inline-block;
   padding: 5px 0 0;
   position: relative;

} .blogMeta a {

   color: #777;
   font-size: 12px;
   line-height: 20px;
   margin-right: 15px;
   text-decoration: none;

} .blogMeta a:hover, .blogTitle span:hover{color: #727CB6} .blogMeta a i{

   padding-right: 5px;
   font-size: 14px;

} .blogMeta a:hover i{color: #777;} .blogDetail {

   border: 1px solid #f2f2f2;
   display: inline-block;
   padding: 15px;
   position: relative;

} .blogPic {position: relative;} .blogPic > img {

   width: 100%;

} .blog-hover > a {

   display: block;
   left: 45%;
   position: absolute;
   top: 35%;

} .blogPic .blog-hover{

   background:rgba(255,255,255, 0.5);
   height: 100%;
   left: 0;
   opacity: 0;
   position: absolute;
   top: 0;
   -webkit-transition: all 120ms ease-in-out;-moz-transition: all 120ms ease-in-out;-o-transition: all 120ms ease-in-out;-ms-transition: all 120ms ease-in-out;transition: all 120ms ease-in-out;
   width: 100%;

} .blogPic:hover .blog-hover{opacity: 1;} .blogPic .blog-hover .icon {

   background: #727CB6;
   border-radius: 50% 50% 50% 50%;
   display: block;
   height: 40px;
   margin: 25% auto 0;
   position: relative;
   -webkit-transition: all 200ms ease-in-out;-moz-transition: all 200ms ease-in-out;-o-transition: all 200ms ease-in-out;-ms-transition: all 200ms ease-in-out;transition: all 200ms ease-in-out;
   color: #f2f2f2;
   width: 40px;
   text-align: center;
   font-size: 16px;
   line-height: 40px;
   top: 50%;

} .blogPic .blog-hover .icon:hover{

   background:#555;

} .blogPic:hover .blog-hover .icon{

   top: 0;

} .blogPic .blog-hover p {

   font-size: 20px;
   text-align: center;
   text-transform: uppercase;

} .blog{

   padding:50px 0;

} .blog_large .post, .blog_single .post{

   padding-bottom:50px;
   margin-bottom:50px;
   border-bottom:1px solid #f2f2f2;

} .blog_large .post_img, .blog_single .post_img {

   margin-bottom: 25px;
   position: relative;

} .blog_large .post_img img, .blog_single .post_img img {

   height: auto;
   max-width: 100%;
   opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   -moz-opacity: 1;
   -khtml-opacity: 1;
   -webkit-transition: all 150ms ease-in-out;
   -moz-transition: all 150ms ease-in-out;
   -o-transition: all 150ms ease-in-out;
   -ms-transition: all 150ms ease-in-out;
   transition: all 150ms ease-in-out;

}

.blog_large .post_img:hover img, .blog_single .post_img:hover img{

   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
   -moz-opacity: 0.8;
   -khtml-opacity: 0.8;
   opacity: 0.8;

}

.blog_large .post_video{

   margin-bottom:25px;
   position: relative;

} .blog_large .post_video iframe{

   max-width:100%;
   max-height:100%;
   height:320px;
   width:100%;
   border:none;
   box-shadow: none;

}

.blog_large .post_date, .blog_single .post_date {

   float: left;
   height: 0;
   text-align: center;

} .blog_large .post_date span, .blog_single .post_date span{

   display: block;

} .blog_large .day, .blog_single .day {

   background:#727CB6;
   color: #FFFFFF;
   font-size: 22px;
   font-weight: 600;
   padding: 	10px;

} .blog_large .month, .blog_single .month {

   background:#555;
   color: #FFFFFF;
   padding: 4px 13px 6px;

}

.blog_large .post_content, .blog_single .post_content {

   margin: 0 0 0 70px;

} .blog_large .post_meta .metaInfo, .blog_single .post_meta .metaInfo {

   font-size: 0.9em;
   margin-bottom: 7px;

} .blog_large .post_meta .metaInfo > span, .blog_single .post_meta .metaInfo > span {

   display: inline-block;
   padding-right: 15px;
   color:#777;

} .blog_large .post_meta .metaInfo > span > a, .blog_single .post_meta .metaInfo > span > a {

   color: #777;
   font-family: lato,Helvetica, Arial, sans-serif;
   font-size: 12.4px;

} .blog_large .post_meta .metaInfo > span > a:hover, .blog_single .post_meta .metaInfo > span > a:hover{color:#727CB6;} .blog_large .post_meta .metaInfo, .blog_single .post_meta .metaInfo {

   font-size: 0.95em;
   margin: 0 auto;
   padding: 0 0 20px;

} .blog_large .post_meta .metaInfo i, .blog_single .post_meta .metaInfo i {

   margin-right: 3px;
   color:#777;

} .blog_large .post_meta h2, .blog_single .post_meta h2 {

   margin-bottom: 10px;
   margin-top: 0;

} .blog_large .post_meta h2 a, .blog_single .post_meta h2 a {

   font-size: 24px;
   font-weight: 600;
   color:#555;
   line-height: 34px;
   text-transform:capitalize;

} .blog_large .post_meta h2:hover a, .blog_single .post_meta h2:hover a {

   color:#727CB6;

} .blog_large .post_content > p, .blog_single .post_content > p {

   margin-bottom: 20px;

}

/* BLOG MEDIUM /* ==========================*/ .blog_medium .post:after {

   clear: both;
   content: " ";
   display: block;
   visibility: hidden;

}

.blog_medium .post{

   padding-bottom:50px;
   margin-bottom:50px;
   border-bottom:1px solid #f2f2f2;

} .blog_medium .post_img {

   float: left;
   margin-bottom: 0;
   margin-right: 20px;
   position: relative;
   width: 35%;

} .blog_medium .post_img img {

   height: auto;
   max-width: 100%;
   opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   -moz-opacity: 1;
   -khtml-opacity: 1;
   -webkit-transition: 0.25s;
   -moz-transition: 0.25s;
   -o-transition: 0.25s;
   transition: 0.25s;

} .blog_medium .post_img:hover img{

   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
   -moz-opacity: 0.8;
   -khtml-opacity: 0.8;
   opacity: 0.8;

} .blog_medium .post_video{

   margin-bottom:25px;
   position: relative;

} .blog_medium .post_video iframe{

   max-width:100%;
   max-height:100%;
   height:320px;
   width:100%;
   border:none;
   box-shadow: none;

} .blog_medium .post_date {

   float: left;
   margin-right: 20px;
   position: relative;
   text-align: center;

} .blog_medium .post_date span{

   display: block;

} .blog_medium .day {

   background:#727CB6;
   color: #FFFFFF;
   font-size: 22px;
   font-weight: 600;
   padding: 5px 10px;

} .blog_medium .month {

   background:#555;
   color: #FFFFFF;
   padding: 2px 13px 4px;

} .blog_medium .post_content {

   float: left;
   margin: 0;
   width: 50%;

} .blog_medium .post.no_images .post_content {

   max-width: 88%;
   width: auto;

} .blog_medium .post_meta .metaInfo {

   font-size: 0.9em;
   margin-bottom: 7px;

} .blog_medium .post_meta .metaInfo > span {

   display: inline-block;
   padding-right: 15px;
   color:#777;

} .blog_medium .post_meta .metaInfo > span > a {

   color: #777;
   font-family: lato,Helvetica, Arial, sans-serif;
   font-size: 12.4px;

} .blog_medium .post_meta .metaInfo > span > a:hover{ color:#727CB6; } .blog_medium .post_meta .metaInfo {

   font-size: 0.95em;
   margin: 0 auto;
   padding: 0 0 20px;

} .blog_medium .post_meta .metaInfo i {

   margin-right: 3px;
   color:#777;

} .blog_medium .post_meta h2 {

   margin-bottom: 10px;
   margin-top: 0;

} .blog_medium .post_meta h2 a {

   font-size: 24px;
   font-weight: 600;
   color:#555;
   line-height: 34px;
   text-transform:capitalize;

} .blog_medium .post_meta h2:hover a {

   color:#727CB6;

} .blog_medium .post_content > p {

   margin-bottom: 20px;

}

/* Masonry Blog Style ================================================== */ .masonry_wrapper_blog .blog-item {

   background: #f1f1f1 !important;
   padding:20px !important;

}

.masonry_wrapper_blog .metaInfo{

   margin-top:25px;
   padding: 0;
   text-transform: uppercase;
   font-size:12px;
   font-weight: 600;

}

.masonry_wrapper_blog .metaInfo a{color: #555; padding:0;} .masonry_wrapper_blog .metaInfo a:hover, .blog-item > span a:hover, .blog-title a:hover{

   color:#727CB6;

}

.blog-title > h2{margin: 15px 0;}

.blog-title a {

   font-size: 22px;
   line-height: 25px;
   font-weight: 600;
   color: #555;
   text-transform: capitalize;

} .blog-desc {

   padding-bottom: 15px;

} .masonry_blog .pagination{margin:50px 0 20px;}

/* SINGLE POST =================================== */ .about_author {

   background: #f2f2f2;
   overflow: hidden;
   position: relative;

} .author_desc {

   background:#727CB6;
   float: left;
   height: 100%;
   min-height: 100%;
   overflow: hidden;
   padding: 20px 0;
   position: absolute;
   text-align: center;
   width: 25%;

} .author_desc > img {

   background:#FFFFFF;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   margin-bottom: 20px;
   padding: 4px;
   max-width: 80px;
   max-height:80px;

}

.about_author h3 {

   margin: 0 auto;

} .author_name > a {

   color: #555333;
   font-size: 16px;
   font-weight: bold;

} .author_name > a:hover {color:#727CB6;} .author_bio {

   display: block;
   float: right;
   padding: 20px;
   position: relative;
   width: 75%;

} .author_det {

   margin-bottom: 0;

} .author_bio > h5 {

   font-size: 12px;
   margin: 0 auto 10px;

} .author_bio > h5 a{color:#727CB6;}

/* Post Share Article ================================================== */ .shares { background: #f2f2f2; list-style: none; overflow: hidden; margin: 50px 0 0;padding:0;} .shares li { float: left; border-right: 1px solid #fff; } .shares li.shareslabel h3 {padding: 8px 20px; font-weight: 600; text-transform: uppercase; font-size: 18px;margin: 0;} .shares li a { display: block; width: 45px; height: 46px; background-repeat: no-repeat; background-position: 7px 7px; -webkit-transition: all 150ms ease-in-out;

   -moz-transition: all 150ms ease-in-out;
   -o-transition: all 150ms ease-in-out;
   -ms-transition: all 150ms ease-in-out;
   transition: all 150ms ease-in-out;}

.shares li a:hover { background-position: 7px -58px; background-color: #727CB6; } .shares li a:active { background-color: #999; } .shares li a.twitter { background-image: url(../images/social/twitter.png); } .shares li a.facebook { background-image: url(../images/social/facebook.png); } .shares li a.gplus { background-image: url(../images/social/gplus.png); } .shares li a.pinterest { background-image: url(../images/social/pinterest.png); } .shares li a.yahoo { background-image: url(../images/social/yahoo.png); } .shares li a.linkedin { background-image: url(../images/social/linkedin.png); }

/* About Author ====================================*/ .author_social {

   list-style: none outside none;
   margin: 0 auto;
   overflow: hidden;
   padding: 0;
   text-align:center;
   z-index:9999;

} .author_social li {

   background: none !important;
   display:inline-block

} .author_social li a {

   color: #444;
   display:block;
   height: 30px;
   text-align: center;
   width: 30px;
   border-radius:50%;
   -webkit-border-radius: 50%;-moz-border-radius: 50%;
   -webkit-transition: 0.25s;
   -moz-transition: 0.25s;
   -o-transition: 0.25s;
   transition: 0.25s;
   background:#f9f9f9;

} .author_social li a i {

   font-size: 14px;
   line-height: 30px;
   margin-right: 0;
   float: none;

} .author_social li a.fb:hover {background: #2f5a9a; color:#fff;} .author_social li a.twtr:hover {background: #3abdd1; color:#fff;} .author_social li a.gmail:hover {background: #363636; color:#fff;} .author_social li a.pinterest:hover{background: #d13a3a; color:#fff;} .author_social li a.rss:hover {background: #f15200; color:#fff;} .author_social li a.tumblr:hover {background: #203550; color:#fff;} .author_social li a.flickr:hover {background: #ff0084; color:#fff;} .author_social li a.instagram:hover {background: #507ea4; color:#fff;} .author_social li a.linkedin:hover {background: #0072b2; color:#fff;} .author_social li a.skype:hover {background: #00aaf1; color:#fff;} .author_social li a.youtube:hover {background: #ff3330; color:#fff;} .author_social li a.dribbble:hover { background: #f973a4; color:#fff;}

.post-author {

   margin-left:94px;
   position:relative;
   margin-top:15px;
   margin-bottom:60px;

} .post-author .avatar {

   left:-47px;
   position:absolute;

} .post-author h6 {

   font-family: lato,Helvetica, Arial, sans-serif;
   font-size: 20px;
   font-weight: 600;
   line-height: 1.6;
   margin-bottom: auto;

} .news_content h2 {

   border-bottom: 1px solid #f2f2f2;
   font-size: 30px;
   font-weight: 600;
   line-height: 1.8;
   margin: 30px auto;

} .metaInfo {

   font-size: 0.9em;
   margin-bottom: 7px;

} .metaInfo > span {

   display: inline-block;
   padding-right: 15px;
   color:#777;

} .metaInfo > span > a{color:#777;} .metaInfo > span > a:hover{color:#e74c3c;} .metaInfo {

   font-size: 0.95em;
   margin: 0 auto;
   padding: 15px 0 20px;

} .metaInfo i {

   margin-right: 3px;
   color:#777;

}

/* Comment ============================*/ .news_comments{

   margin:50px auto;

}

comment-list ul.children { margin-left:94px;padding:0;}

.comment-container {

   border-top:solid 3px #f2f2f2;
   margin:0 0 15px 90px;
   padding:20px 20px;
   position:relative;
   -moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;

} .comment-container:hover {

   background:#F4F4F4;
   border-color:#727CB6;

} .comment-body p{ margin:0; } .avatar {

   float:left;
   width:74px;

} .avatar img {

   display:block;
   margin-right:20px;
   position: relative;
   z-index: 0;
   border:1px solid #DCDCDC;
   padding:3px;

} h4.comment-author {

   font-size:16px;
   line-height:20px;
   margin:0;

} h4.comment-author a{color:#555}

comment-list { margin:0; padding:0;}
comment-list li {

   background:none;
   margin:0;
   padding:0;
   overflow:hidden;

}

comment-list li .comment-container:hover a{color:#727CB6;}
comment-list .comment-meta { margin-bottom:10px; }
comment-list .comment-date { font-size:12px; font-style:italic;color:#888;}
comment-list li .comment-container:hover .comment-date { color:#727CB6; }

comment-list li .comment-container:hover h4 { color:#727CB6; }

.comment-reply-link {

   color: inherit !important;
   font-size: 12px;
   font-weight: 700;
   text-decoration: none !important;
   text-transform: uppercase;
   position:absolute;
   right:20px;
   top:20px;

}

.comment_form > input {

   margin-bottom:20px;
   margin-right:20px;
   width: 31.1%;

}

comments {

   margin-bottom: 20px;

} .comment_form > input:last-child {

   margin-right:0;

}

/* ===================================================== */ /* 8. HOME PAGE */ /* ===================================================== */ .lead {

   font-size: 28px;
   font-weight: 300;
   line-height: 40px;
   margin-bottom: 50px;

}

/* Texture Section =========================== */ .texture-section{

   padding: 65px 0;
   margin: 20px 0 30px;
   background: #96D3C6;

} .texture1{

   background: url(../images/pattern-2.png);

}

/* Recent Post =========================== */ .post-images {

   float: left;
   width: 30%;
   margin-right: 25px;

} .post-images img {

   width: 100%;

} .post-detail {

   width: 65%;
   display: inline-block;
   margin: 0px;

} .post-detail > span {

   color: #BCBCBC;
   margin: 0 2px;
   font-size: 11px;
   text-transform: uppercase;

} .post-detail a{ color: #BCBCBC; } .post-detail a:hover{ color: #727CB6; }

.post-detail h5{ margin:0 0 7px; }

.post-detail h5 a {

   color: #21252b;
   font: lighter 16px/18px "Trebuchet MS";

} .post-detail > p {

   margin: 7px 0 0;
   line-height: 19px;

} .post-detail .read-more { color: #727CB6; } .post-detail .read-more:hover{ color:#444A6D; }

.dashed {

   border-color: #DBDFE2;
   border-style: dashed;

}

/* Feature Block =========================== */ .feature-block h4{

   font: 700 34px/37px "open sans";
   color:#717CB6;
   margin: 0;
   padding-bottom: 25px;

} .feature-block h4 span{

   font: 400 32px/35px "open sans";
   color:#272727;
   text-transform: capitalize;

} .feature-block p{

   font: 500 14px/20px "verdana";
   color:#929292;
   line-height: 28px;
   padding-bottom: 35px;

}

.feature-block i.fa {

   font-size: 40px;
   margin: 0 13px 0 0;

} .feature-block hr {

   border-color: #D0D0D0;
   margin: 20px 0;

}

/* Grey Transparent Background Content ======================================== */ .grey-transparent-content .bg{

   background: hsla(180, 13%, 17%, 0.9);
   color:#fff;
   margin:0;
   padding:60px 80px;

} .grey-transparent-content .bg h3{

   color:#fff;

} .grey-transparent-content{

   background:url("../images/businessmen.png") no-repeat;
   background-size:cover;
   display:inline-block;

}

.grey-transparent-content .sub_content{

   background:hsla(180, 13%, 17%, 0.9);
   color:#fff;
   padding:80px;

} .retro{

   background:hsla(178, 91%, 35%, 0.8);
   padding: 130px 40px;

} .grey-transparent-content .retro img{

   height: auto;
   max-width: 100%;
   margin-top: 60px;

}

/* Grey Background Content ============================= */ .grey-content{

   background:hsla(180, 13%, 17%, 0.9);

}

.grey-content .sub_content{

   padding:45px 30px 45px 0;

}

.grey-content, .grey-content p, .grey-content h3, .grey-transparent-content, .grey-transparent-content p, .grey-transparent-content h3{

   color:#fff !important;

} .inner-image{

   background-size: cover !important;

}

.grey-line-content{

   border-bottom:1px solid hsl(0, 0%, 93%);
   border-top:1px solid hsl(0, 0%, 93%);

}

.grey-line-content .sub_content{

   padding:40px;

}

/* Counter parallax ============================= */ .counter-parallax{

   color:#fff;
   background: url("../images/3.jpg");
   background-size:cover;
   background-attachment: fixed;
   position: relative;

} .counter-parallax:before {

   background-color: rgba(114, 124, 182, 0.8);
   height: 100%;
   width: 100%;
   content:"";
   position: absolute;
   left: 0;
   top: 0;
   display: block;

}

.counter-parallax .col-sm-6{

   border-right: 1px solid #d9d9d9;

} .counter-parallax .col-sm-6:last-child{

   border-right: 0px solid #fff;

} .counter-parallax .icon{

   font-size: 42px;

}

.counter-parallax p{

   font-size: 40px;
   font-weight: 600;
   line-height: 55px;

}

.counter-parallax .title{

   font-size: 19px;
   font-weight: 800;
   line-height: 26px;
   text-transform: capitalize;

}

/* Animation-CSS =========================== */ .animation-page .animation {

   text-align: center;

} .animation-page .animation > p {

   font-size: 16px;
   margin: 20px 0;

}

/* ===================================================== */ /* 9. 404 PAGE */ /* ===================================================== */ .page_404 {

   position: relative;
   text-align: center;

} .page_404 > h1 {

   font-size: 250px;
   font-weight: 600;
   line-height: 250px;
   position: relative;

} .page_404 > p {

   font-family: Pt Sans,Helvetica, Arial, sans-serif;
   font-size: 30px;
   font-weight: bold;
   line-height:30px;
   margin-bottom:30px;

} a.back_home {

   margin: 0;
   color:#fff;
   padding: 12px 18px 13px;

} /* ===================================================== */ /* 10. ABOUT PAGE */ /* ===================================================== */ .left_img {

   float: left;
   margin:0 15px 8px 0;
   overflow: hidden;

} .right_img {

   float:right;
   margin:0 0 8px 15px;
   overflow: hidden;

} .divider {

   position: relative;
   display: block;
   height: 30px;

}

/* OUR TEAM PAGE ===================================================== */

.team-item-content {

   overflow: hidden;
   position: relative;

} .team-item-content img {

   backface-visibility: hidden;
   transition: all 0.3s ease-in-out 0s;
   width:100%;

} .team-info {

   background:rgba(114, 124, 182, 0.9);
   color: #fff;
   padding: 14px 22px 22px;
   position: absolute;
   top:81%;
   transition: all 0.3s ease-in-out 0s;

} .centered {

   text-align: center;

} .team-info h5 {

   color: #fff;
   margin-bottom:23px;
   margin-top:5px;
   font-size: 16px;
   text-transform: capitalize;

} .team-info h5::after {

   background: #fff none repeat scroll 0 0;
   content: "";
   display: block;
   height: 1px;
   margin: 3px auto 0;
   width: 30px;

} .team-info small {

   font-size: 13px;

} ul.team-social {

   padding:0;
   margin:16px 0 0;

} ul.team-social li {

   border: 2px solid #fff;
   border-radius: 50%;
   height:40px;
   width:40px;
   display: inline-block;
   margin: 8px;

} ul.team-social li a {

   color: #fff;
   display: block;
   font-size: 20px;
   line-height: 0.8em;
   padding: 8px 9px;

} .team-item-content:hover .team-info {

   top: 0;
   bottom: 0;

} .team-item-content:hover img {

   transform: scale(1.1);

}

/* SOCIAL MEDIA OUR TEAM ===================================================== */

/*.social_media_team {

   position:absolute;
   background:rgba(114, 124, 182, 0.55);
   border:1px solid #ccc;
   height:100%;
   width:100%;
   top:0;
   left:0;
   text-align:center;
   transform:scale(0);
   -webkit-transform:scale(0);
   -moz-transform:scale(0);
   -ms-transform:scale(0);
   -o-transform:scale(0);
   transition:all 0.6s ease-in-out;
   -webkit-transition:all 0.6s ease-in-out;
   -moz-transition:all 0.6s ease-in-out;
   -ms-transition:all 0.6s ease-in-out;
   -o-transition:all 0.6s ease-in-out;
   visibility:hidden;

} .our-team:hover .social_media_team{

   visibility:visible;
   transform:scale(1.1);
   -webkit-transform:scale(1.1);
   -moz-transform:scale(1.1);
   -ms-transform:scale(1.1);
   -o-transform:scale(1.1);

}

.team_social {

   list-style: none outside none;
   margin:37% 0 0 0;
   overflow: hidden;
   padding: 0;
   text-align: center;

} .team_social li {

   display: inline-block;
   margin:0 5px;

} .team_social li a {

   color:#fff;
   background:#363636;
   display:block;
   height: 35px;
   text-align: center;
   width: 35px;
   border-radius:50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -webkit-transition: 0.25s;
   -moz-transition: 0.25s;
   -o-transition: 0.25s;
   transition: 0.25s;

} .team_social li a i {

   font-size: 16px;
   line-height: 35px;
   margin-right: 0;

} .team_social li a.fb:hover {background: #2f5a9a;} .team_social li a.twtr:hover {background: #3abdd1;} .team_social li a.gmail:hover {background: #E72828;}*/

/* =================================================================== */ /* 11. CONTACT PAGE FORM ====================================================================== */

contactForm{

   margin-top:30px;

} input[type="submit"]{color:#fff !important;}

   /* Forms

=========================== */ textarea {

   resize: vertical;
   width:100%;

} .form-control {

   height: 46px;
   border-radius:0;
   padding: 12px;
   margin-bottom: 10px;

}

.form-control:focus,#site-searchform #s:focus {border-color:#727CB6; box-shadow:0 1px 1px rgba(114, 124, 181, 0.35) inset, 0 0 8px rgba(114, 124, 181, 0.68);}

label.error {

   color: #ebedef;
   font-size: 13.006px;
   line-height: 18.004px;
   font-weight: normal;
   margin-right: 4px;
   text-shadow: none;
   text-decoration: none;

} label.error {

   color: #e74c3c;

} label{

   margin-bottom:10px;

} /*

       Contact-Page-2

===============================*/ .contact_2{

   padding:0 0 60px;
   position: relative;

}

.contact_2 .form-control{

   border-radius: 4px;
   margin-bottom: 22px;

} .contact_2 textarea.form-control{

   border-radius: 4px;
   height: 150px;

}

.contact_2 .widget_info_contact li {

   display: inline-block;
   margin-bottom: 20px;
   width: 100%;

} .contact_2 .widget_info_contact li i {

   color: #647382;
   float: left;
   font-size: 24px;
   height: 80px;
   width: 45px;

} .contact_2 strong {

   color: #647382;
   font-size: 16px;
   font-weight: 600;
   text-transform: uppercase;

} .contact_2 .widget_info_contact p {

   line-height: 22px;

} .contact_2 .widget_info_contact a{

   color: #647382;

} /*

       Contact_page_3

==================================*/ .contact_3{

   padding:0 0 60px;
   position: relative;

}

.contact_3 .lead {

   font-size: 16px;
   margin-bottom: 80px;

}

.contact_3 .form-control {

   border-radius: 0;
   height: 36px;
   margin-bottom: 10px;
   padding:0 12px ;

} .contact_3 textarea.form-control{

   height: 230px;

} .contact_3 .form-group label {

   color: #6f6f6f;
   font-size: 13px;
   font-weight: normal;
   margin-bottom: 4px;

} .contact_3 .widget_info_contact {

   margin-top: 20px;
   display: inline-block;

} .contact_3 .widget_info_contact strong {

   display: block;
   font-size: 18px;
   line-height: 20px;
   font-weight: normal;
   text-align: center;
   margin-bottom: 10px;

} .contact_3 .widget_info_contact li i {

   color: #647382;
   font-size: 24px;
   text-align: center;
   width: 100%;
   margin-bottom: 17px;

}

.contact_3 .widget_info_contact p{

   overflow:visible;
   margin: 0;

} .contact_3 .widget_info_contact p a {

   color: #647382;
   font-size: 12.5px;
   font-weight: 600;
   margin-bottom: 5px;

}

/* MAPS =========================== */ .contact{

   padding:50px 0;

} .maps{

   position:relative;
   margin-bottom: 75px;

}

page_maps{

   max-height:380px;
   height:360px;

}

/* ==================================================

  12. ICON LIST

================================================== */ .icon_lists {

   margin-top: 22px;

} .icon_lists .fa-hover a {

   border-radius: 0;
   color: #222222;
   display: block;
   height: 32px;
   line-height: 32px;
   padding-left: 10px;

} .icon_lists .fa-hover a .fa {

   display: inline-block;
   font-size: 14px;
   margin-right: 10px;
   text-align: right;
   width: 32px;

} .icon_lists .fa-hover a:hover {

   background-color: #727CB6;
   color: #FFFFFF;
   text-decoration: none;

} .icon_lists .fa-hover a:hover .fa {

   font-size: 24px;
   vertical-align: -3px;;

} .icon_lists .fa-hover a:hover .text-muted {

   color: #BBE2D5;

}

/* ==================================================

  13. Recent Works & Post News Carousel

================================================== */ .owl-carousel .owl-wrapper:after {

   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;

} /* display none until init */ .owl-carousel{

   display: none;
   position: relative;
   width: 100%;
   -ms-touch-action: pan-y;

} .owl-carousel .owl-wrapper{

   display: none;
   position: relative;
   -webkit-transform: translate3d(0px, 0px, 0px);

} .owl-carousel .owl-wrapper-outer{

   overflow: hidden;
   position: relative;
   width: 100%;

} .owl-carousel .owl-wrapper-outer.autoHeight{

   -webkit-transition: height 500ms ease-in-out;
   -moz-transition: height 500ms ease-in-out;
   -ms-transition: height 500ms ease-in-out;
   -o-transition: height 500ms ease-in-out;
   transition: height 500ms ease-in-out;

}

.owl-carousel .owl-item{

   float: left;

} .owl-controls .owl-page, .owl-controls .owl-buttons div{

   cursor: pointer;

} .owl-controls {

   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

/* mouse grab icon */ .grabbing {

   cursor:url(../images/grabbing.png) 8 8, move;

}

/* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{

   -webkit-backface-visibility: hidden;
   -moz-backface-visibility:    hidden;
   -ms-backface-visibility:     hidden;
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);

}

/* owl-carousel navigation control */ .owl-controls{

   position: absolute;
   top: -60px;
   right: 0;

}

.owl-prev, .owl-next{

   width:23px;
   height:23px;
   display: inline-block;
   text-align:center;
   background: #F2F2F2;
   border-radius: 0;

} .owl-next{

   margin-left: 1px;

} .owl-prev:hover, .owl-next:hover{

   background: #777;
   color: #fff;

} .owl-prev:after, .owl-next:after{

   font-family: 'FontAwesome';
   content: "\f104";
   font-size: 20px;
   line-height: 22px;

}

.owl-next:after{

   content: "\f105";

}

/* Post News Slider =========================== */ .post-slide{

   overflow: hidden;
   color: #444;
   margin: 0 15px;

} .post-slide h5{

   font-size: 17px;
   font-weight: 600;
   margin: 20px 0 8px;

} .post-slide .post-date{

   color: hsl(0, 0%, 60%);
   margin: 13px 0;
   font-size: 11px;

} .post-slide .post-date i{

   font-size: 12px;
   margin-right: 6px;

} .post-slide p{

   color: hsl(0, 0%, 40%);
   font-size: 13px;
   line-height:24px;

} .post-slide i.arrow-right{

   background:none;
   color:#444;
   width:12px;
   margin-top:4px;

} .post-slide a.readmore{

   color: #6F6F6F;
   display:inline-block;
   font-size:13px;
   line-height:22px;
   transition:all 0.2s ease 0s;

} .post-slide a.readmore:hover{

   text-decoration:none;
   color:#717BB6;

}

.post-slide a.readmore:before{

   font-family: 'FontAwesome';
   content:"\f105";
   margin-right: 7px;

} .post-slide a.readmore:hover:before{

   margin-right: 10px;

} .post-slide > .post-img > img{

   width: 100%;
   height:auto;

}

.post-title > a{

   color:#666;
   text-transform: uppercase;

}

.post-title > a:hover{ color:#727CB6; }

.box {

   background: #ddd;
   cursor: pointer;
   margin: 0 10px;
   overflow: hidden;
   position: relative;

} .portfolio-centered .box{

   margin: 0;

}

/*--------------------------------------------------------------------------*/ /* 14. TESTIMONIALS /*--------------------------------------------------------------------------*/ .testimonial-item blockquote {

   background:#EAEAEA;
   border-top: 3px solid #727CB6;
   border-left: none;
   padding: 20px;
   margin: 0;

}

blockquote{font-size:14px;}

.testimonial-item .icon {

   color: #fff;
   font-size: 120px !important;
   line-height: 0;
   position: absolute;
   right: 20px;
   top: 10px;
   z-index: 0;

} .testimonial-review > img {

   background:#FFFFFF;
   border: 2px solid #727CB6;
   border-radius: 50%;
   float: left;
   height: 70px;
   overflow: hidden;
   padding: 2px;
   width: 70px;

} .testimonial-review > h1 {

   float: left;
   color:#555;
   font-size: 14px;
   font-weight: 700;
   line-height: normal;
   margin-top: 15px;
   padding-left: 20px;

} .testimonial-item blockquote p {

   margin-bottom: 0;
   font-size: 14px;
   font-family:PT sans,Helvetica, Arial, sans-serif;
   font-weight: 400;
   line-height: 21px;
   color: #444;
   position: relative;
   z-index: 10;
   font-style:italic;
   font-weight: 500;

}

.testimonial blockquote small {

   display: block;
   line-height: 20px;
   font-size: 12px;
   color: #999999;
   margin-top: 5px;

} .testimonial-review {

   position: relative;
   padding-top: 20px;

}

.testimonial-item blockquote:after {

   font-family: FontAwesome;
   content: "\f0D7";
   position: absolute;
   bottom: 4%;
   left: 23px;
   font-size: 40px;
   color:#EAEAEA;

}

.testimonial-review small {

   font-size: 13px;
   line-height:18px;
   color: #727CB6;
   display:block;

}

testimonial-carousel {

   margin-top: 25px;

} .testimonial .testimonial-buttons {

   position: absolute;
   right: 0;
   top: -41px;

}

.testimonial .testimonial-buttons a {

   background: #f2f2f2;
   margin-left:-3px;
   width:25px;
   font-size:11px;
   height:25px;
   display: inline-block;
   text-align:center;
   line-height:27px;
   color:#bdc3c7;

}

.testimonial .testimonial-buttons a:hover {

   background: #f2f2f2;
   color: #555;

}

/* Parallax Testimonial =========================== */ .parallax-testimonial{

   margin: 0 auto;
   padding: 0 100px 30px;
   text-align: center;
   color: #fff;

} .parallax-testimonial-review > img {

   background: #ffffff;
   border: 2px solid #ffffff;
   border-radius: 50%;
   height: 70px;
   overflow: hidden;
   padding: 1px;
   width: 70px;

} .parallax-testimonial-review > span {

   font-size: 16px;
   font-weight: 700;
   text-transform: uppercase;
   line-height: normal;
   margin-top: 15px;
   padding-left: 20px;
   display: block;

} .parallax-testimonial-item blockquote{

   border-left:none;

} .parallax-testimonial-item blockquote p {

   margin-bottom: 0;
   font-size: 25px;
   font-weight: 400;
   line-height: 33px;
   color: #fff;
   position: relative;
   z-index: 10;

} .parallax-testimonial blockquote small {

   display: block;
   line-height: 20px;
   font-size: 12px;
   margin-top: 5px;

} .parallax-testimonial-review {

   position: relative;

}

.parallax-testimonial-review small {

   font-size: 13px;
   line-height:18px;
   color: #727CB6;
   display:block;

} .parallax-testimonial .carousel-indicators{

   bottom: 0;
   margin-bottom: 0;

}

/* ======================================================================== */ /* 15. Parallax /* ======================================================================== */ section.parallax {

   padding: 65px 0;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-attachment: fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

} section.parallax h2 {

   color: rgba(255, 255, 255, 0.8);
   font-size: 42px;
   text-align: center;
   text-transform: uppercase;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

} section.parallax-1 {

   background-image: url("../images/1.jpg");

}

section.parallax h2 {

   color: rgba(255, 255, 255, 0.8);
   font-size: 42px;
   text-align: center;
   text-transform: uppercase;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

} .heading-item {

   text-align: center;
   color: #fff;

} .heading-item > h4 {

   color: #fff;
   font: 700 26px/25px "arial";
   margin-bottom: 21px;

} .heading-item > p {

   color: #fff;
   font-size: 16px;
   margin-bottom: 30px;

}

.heading-item > em {

   display: block;
   font: lighter 22px/22px "Open Sans",Helvetica, Arial, sans-serif;
   margin-top: 35px;

} .heading-item strong {

   color: #fff;
   font: 600 20px/20px "arial";

}

/* ======================================================================== */ /* 16. Icon Service Boxes /* ======================================================================== */ .info_service {

   padding:1% 0 0;

}

/* Service Box 1 ====================================*/ .serviceBox_1{

   padding:30px 0 ;

} .serviceBox_1 .service-icon{

   background:#58B25E;
   height: 70px;
   width: 70px;
   border-radius:50%;
   text-align: center;
   float: left;

} .serviceBox_1 .service-icon.red{

   background:#F35958;

} .serviceBox_1 .service-icon.blue{

   background:#02A2DD;

} .serviceBox_1 .service-icon.purple{

   background:#9F84C4;

} .serviceBox_1 .service-icon.darkCyan{

   background:#008B8B;

} .serviceBox_1 .service-icon.strongcyan{

   background:#1ABC9C;

}

.serviceBox_1 .service-icon i{

   font-size:30px;
   color: #fff;
   line-height: 70px;

} .serviceBox_1 .service-content {

   margin-left: 95px;

} .serviceBox_1 .service-content h3{

   color: hsl(0, 0%, 20%);
   font-size: 18px;
   font-weight: 600;
   margin-top: 0;

}

.serviceBox_1 .service-content p{

   color:hsl(0, 0%, 47%);
   line-height: 1.6em;
   font-size: 14px;
   font-family: 'Open Sans', sans-serif;

} .serviceBox_1 .read{

   color: #727cb6;
   font-size: 14px;
   text-decoration: none;

} .serviceBox_1 .read i{

   font-size: 16px;
   margin-left: 10px;

}

/* service Box 2 ====================================*/ .serviceBox_2{

   background: hsl(0, 0%, 100%);
   border: 1px solid hsl(0, 0%, 82%);
   box-shadow: 5px 5px 0 hsla(0, 0%, 0%, 0.07);
   padding: 20px;

} .serviceBox_2 .service-icon{

   float: left;

} .serviceBox_2 .service-content h3{

   margin: 11px 0 30px 67px;
   color: #000;
   font-size: 16px;
   font-weight: 600;

} .serviceBox_2 .service-content p{

   font-size: 13px;
   line-height: 22px;
   margin: 0;

} .serviceBox_2 .service-icon i{

   background: #727cb6;
   box-shadow: 5px 5px 0 hsla(0, 0%, 0%, 0.1);
   color: hsl(0, 0%, 100%);
   font-size: 26px;
   font-weight: 600;
   height: 50px;
   line-height: 50px;
   text-align: center;
   width: 50px;
   transition:all 0.2s ease-in-out;

} .serviceBox_2:hover .service-icon i{

   background: hsl(208, 17%, 20%);
   border-radius: 50%;
   transform: translate(0px, 3px);
   transition:all 0.5s ease-in-out;

}

/* service Box 3 ====================================*/ .serviceBox_3{

   border: 1px solid #b9b9b9;
   margin-top:70px;
   text-align: center;
   padding: 25px;

}

.serviceBox_3 .service-icon{

   width:100px;
   height:100px;
   border: 1px solid #b9b9b9;
   text-align: center;
   line-height: 100px;
   font-size: 40px;
   background: #fff;
   transform: rotate(-45deg);
   margin: -75px auto -20px;

}

.serviceBox_3 .service-icon i{

   transform: rotate(45deg);
   color:#4f4f4f;
   transition:all 0.3s ease-out;

}

.serviceBox_3:hover .service-icon{

   background: #727cb6;
   border-color: #727cb6;
   transition:all 0.3s ease-out;

}

.serviceBox_3:hover .service-icon i{

   color:#fff;

}

.serviceBox_3 .service-content{

   margin-top: 60px;

}

.serviceBox_3 .service-content h3{

   text-transform: capitalize;
   color:#161616;
   font-size: 20px;

}

.serviceBox_3 .service-content h3:after{

   content: "";
   border-top: 1px solid #c9c9c9;
   border-bottom: 1px solid #c9c9c9;
   width: 70px;
   height:4px;
   display:block;
   margin: 10px auto 20px;

}

.serviceBox_3 .service-content p{

   color:#727272;
   font-size: 14px;
   line-height: 23px;

}

.serviceBox_3 .read{

   margin-top: 40px;

}

.serviceBox_3 .read a{

   color:#161616;
   font-size: 14px;
   text-transform: capitalize;

}

.serviceBox_3:hover .read a{

   color:#727cb6;
   transition:all 0.3s ease-out;

}

/* service Box 4 ====================================*/ .serviceBox_4 .service-icon a{

   border-bottom: 1px solid #d5d7d9;
   display: inline-block;
   width: 100%;
   overflow-y: hidden;
   position: relative;

}

.serviceBox_4 .service-icon a > span{

   width: 75px;
   height:75px;
   background: #26282b;
   border-radius: 5px;
   display: block;
   text-align: center;
   transform: rotate(60deg);
   position: relative;
   left:22px;
   top:12px;
   transition:all 300ms ease-in-out 0s;

}

.serviceBox_4:hover .service-icon a > span{

   background: #727cb6;

}

.serviceBox_4 .service-icon a > span i{

   font-size: 30px;
   color:#fff;
   transform: rotate(-60deg);
   line-height: 72px;

}

.serviceBox_4 .service-content h3{

   color:#26282b;
   text-transform: uppercase;
   font-size: 18px;
   letter-spacing: 1px;
   margin-bottom: 20px;

}

.serviceBox_4 .service-content p{

   color:#212121;
   font-size: 14px;
   line-height: 25px;

}

/* service Box 5 ====================================*/ .serviceBox_5{

   padding: 40px 0 0;

} .serviceBox_5{

   background:#fff;
   text-align: center;

} .serviceBox_5 > span {

   background:#727CB6;
   border-radius: 100%;
   color: #fff;
   display: inline-block;
   font: bold 40px/18px "arial";
   height: 88px;
   line-height: 88px;
   width: 88px;

} .serviceBox_5 > h3 {

   color: #424955;
   font-family: 'Open Sans',Helvetica, Arial, sans-serif;
   font-size: 30px;
   font-weight: 300;
   line-height: 35px;
   text-transform: uppercase;
   margin-bottom: 25px;

} .serviceBox_5 > p {

   color: #424955;
   font: lighter 14px/21px "open sans",Helvetica, Arial, sans-serif;
   padding: 0 35px;

} .serviceBox_5 .read {

   padding: 25px 0 40px;

}

.serviceBox_5 .read a{

   background: rgba(0, 0, 0, 0) linear-gradient(to right, #444A6D 0%, #444A6D 50%, #727CB6 50%) repeat scroll 100% 0 / 200% 100%;
   color: #fff;

}

.serviceBox_5 .read a:hover{

   background-position: 0 0;
   color: #fff;

}

/* service Box 6 ====================================*/ .serviceBox_6{

   background:#DC005A;
   color:#fff;
   padding:65px 85px;
   margin: 0 -15px;
   overflow: hidden;

} .serviceBox_6.purple{

   background:#7A4B94;

} .serviceBox_6.black{

   background:#2A3636;

} .serviceBox_6 .service-content{

   padding:0;

} .serviceBox_6 .service-content h3{

   color:#fff;

} .serviceBox_6 .service-content p{

   font-size:14px;
   line-height:29px;
   margin-bottom:30px;

} .serviceBox_6 .service-content a{

   background: hsla(0, 0%, 0%, 0) none repeat scroll 0 0;
   border: 2px solid hsl(0, 0%, 97%);
   border-radius:0;
   color:#fff;
   padding:9px 17px;
   font-size:14px;
   text-transform:uppercase;
   transition:all 0.2s ease 0s;

} .serviceBox_6 .service-content a:hover{

   background-color: hsl(0, 0%, 97%) !important;
   color: hsl(0, 0%, 20%);

} .serviceBox_6 .service-content a:hover i{

   opacity:0;

} .serviceBox_6 .service-content .line{

   border: 1px solid;
   display: block;
   width: 20%;
   margin: 20px 0;

} .serviceBox_6 .service-content a i{

   margin-left:6px;

}

/* service Box 7 ====================================*/ .serviceBox_7{

   margin:20px 0;

} .serviceBox_7 .service-icon {

   display: inline-block;
   float: left;

} .serviceBox_7 .service-content {

   float: left;
   width: 70%;

} .serviceBox_7 h3{

   font: 600 19px/35px "open sans";
   text-transform: uppercase;
   color: #343434;
   margin: 0;

} .serviceBox_7 p{

   color: #7b7272;
   font: 400 14px/25px "open sans";
   display: inline-block;

}

.serviceBox_7 .service-icon{

   background:#727cb6;
   border-radius: 100%;
   color: #fff;
   width: 40px;
   height: 40px;
   line-height: 40px;
   text-align: center;
   margin-left:20px;

} .service-box-7 i {

   font-size: 16px;

} .serviceBox_7.right{

   text-align: right;

} .serviceBox_7.right .service-icon{

   float: right;
   margin: 0 0 0 20px;

} .serviceBox_7 .service-icon{

   margin: 0 20px 0 0;

} .serviceBox_7 p{

   margin-top:20px;

}

/* service Box 8 ====================================*/

.serviceBox_8{margin-top: 25px;} .serviceBox_8 .service-icon{

   float: left;

} .serviceBox_8 .service-icon i{

   font-size: 34px;
   color: #727CB6;

} .serviceBox_8 .service-content h3{

   color: hsl(0, 0%, 20%);
   font-size: 18px;
   font-weight: 600;
   margin-top: 0;

} .serviceBox_8 .service-content{

   margin-left: 55px;

} .serviceBox_8 .service-content p{

   color:hsl(0, 0%, 47%);
   line-height: 2;
   font-family: Open Sans,Helvetica, Arial, sans-serif;

}

/* ===================================================== */ /* 17. CLIENTS */ /* ===================================================== */ .clients { } ul.client_items .img{

   max-width:100%;
   width:166px !important;

} ul.client_items { padding: 0; } ul.client_items li {

   list-style:none;

} ul.client_items {

   position: relative;
   display: block;

} /*--------------------------------------------------------------------------*/ /* 18. TYPOGRAPHY /*--------------------------------------------------------------------------*/ .typography{

   padding:30px 0;

} .typography h1 {

   margin-top: 0;

}

/* ======================================================================== */ /* 19. BUTTONS */ /* ======================================================================== */ .btn{

   color: #fff;
   transition:all 0.3s ease-in-out;
   -webkit-transition:all 0.3s ease-in-out;
   -moz-transition:all 0.3s ease-in-out;
   -ms-transition:all 0.3s ease-in-out;
   -o-transition:all 0.3s ease-in-out;

} .btn-default{

   background:#727CB6;
   border:none;
   border-radius:2px;

} .btn-default:hover{

   background:#444A6D;
   color:#fff;

}

/* Social Buttons ====================================*/

.btn-social-googleplus {

   background-color: hsl(0, 0%, 18%);

} .btn-social-facebook {

   background-color:#3453A2;

} .btn-social-twitter {

   background-color:#2ABBE3;

} .btn-social-pinterest {

   background-color: #D91F25;

} .btn-social-linkedin {

   background-color:#1F80BB;

} .btn-social-stumbleupon {

   background-color:#E86130;

} .btn-social-stumbleupon, .btn-social-linkedin, .btn-social-pinterest, .btn-social-twitter, .btn-social-facebook, .btn-social-googleplus {

   color:#fff;
   border-radius:0;

} .content.elements .btn{

   border-radius:2px;

} .btn-social-stumbleupon:hover, .btn-social-googleplus:hover , .btn-social-linkedin:hover, .btn-social-pinterest:hover, .btn-social-twitter:hover, .btn-social-facebook:hover {

   background:#333;
   color:#fff;

}

/* ==================================================

  20. PRICING TABLES BOXS

================================================== */

/* Pricing Table 1 ====================================*/

.pricingTable_1{

   text-align: center;
   background: #fff;
   border: 1px solid #e1e1e1;

}

.pricingTable_1 .pricingTable-header{

   color:#fff;
   padding:45px 0 0 0;
   position: relative;

}

.pricingTable_1 .price-value{

   width: 160px;
   height: 160px;
   border-radius: 50%;
   margin: 0 auto;
   background: #727cb6;
   display: block;
   font-size: 50px;
   line-height: 30px;
   padding: 45px 0;
   border: 7px solid #fff;
   box-shadow: 0 0 0 2px #727cb6;

}

.pricingTable_1 .mo{

   font-size: 15px;
   display: block;
   text-transform: capitalize;

}

.pricingTable_1 .currency{

   font-size: 24px;
   position: relative;
   bottom: 20px;
   margin-right: 4px;

}

.pricingTable_1 .heading{

   padding:30px 0 20px 0;
   display: block;

}

.pricingTable_1 .heading > h3{

   font-size: 24px;
   color:#727272;
   text-transform: uppercase;
   margin: 0;
   font-weight: 700;

}

.pricingTable_1 .pricingContent{

   text-transform: capitalize;

}

.pricingTable_1 .pricingContent > ul{

   list-style: none;
   padding: 0;
   margin-bottom: 0;

}

.pricingTable_1 .pricingContent > ul > li{

   border-top: 1px solid #e1e1e1;
   padding: 15px 0;
   font-size: 14px;
   color:#818d9a;

}

.pricingTable_1 .pricingContent > ul > li:nth-child(odd){

   background: #f8f8f8;

}

.pricingTable_1 .pricingTable-sign-up{

   padding: 40px 0;
   border-top: 1px solid #e1e1e1;

}

.pricingTable_1 .btn-block{

   width: 60%;
   margin: 0 auto;
   border-radius: 0px;
   padding: 10px 2px;
   border: 2px solid #727272;
   color:#727272;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 700;
   background: #fff !important;
   transition: all 0.2s ease-in-out 0s;

}

.pricingTable_1 .btn-block:hover{

   background: #727272 !important;
   color:#fff;

}

.pricingTable_1.mid{

   box-shadow: 0 0 10px 2px #e1e1e1;

}

.pricingTable_1.mid .pricingTable-header:after{

   content: "hot";
   width: 55px;
   height:55px;
   border-radius: 50%;
   background: #727272;
   display: block;
   position: absolute;
   top:10px;
   right: 10px;
   text-transform: uppercase;
   line-height: 50px;
   font-weight: bold;

}

.pricingTable_1.mid .price-value{

   background: #727272;
   box-shadow: 0 0 0 2px #727272;

}

/* Pricing Table 2 ====================================*/

.pricingTable_2{

   text-align: center;
   background: #727cb6;
   padding-top: 5px;
   transition: all 0.5s ease-in-out 0s;

}

.pricingTable_2 .pricingTable-header{

   color:#fff;
   background: #273238;
   height: 190px;
   position: relative;
   transition: all 0.5s ease 0s;

}

.pricingTable_2 .pricingTable-header:after{

   content: "";
   border-bottom: 40px solid #727cb6;
   border-left: 263px solid transparent;
   position: absolute;
   right:0px;
   bottom: 0px;

}

.pricingTable_2:hover .pricingTable-header{

   height: 230px;
   transition: all 0.5s ease 0s;

}

.pricingTable_2 .heading{

   display: block;
   padding: 20px 0;

}

.pricingTable_2 .heading > h3{

   font-size: 24px;
   color:#fff;
   margin: 0;
   text-transform: uppercase;

}

.pricingTable_2 .price-value{

   display: block;
   font-size: 60px;
   line-height: 60px;

}

.pricingTable_2 .mo{

   font-size: 14px;
   display: block;
   line-height: 0px;
   text-transform: uppercase;

}

.pricingTable_2 .currency{

   font-size: 24px;
   margin-right: 4px;
   position: relative;
   bottom:30px;

}

.pricingTable_2 .pricingContent{

   text-transform: uppercase;
   color:#fff

}

.pricingTable_2 .pricingContent > ul{

   list-style: none;
   padding: 0;

}

.pricingTable_2 .pricingContent > ul > li{

   font-size: 14px;
   padding: 15px 0;
   border-bottom: 1px solid #fff;

}

.pricingTable_2 .pricingContent > ul > li:last-child{

   border: 0px none;

}

.pricingTable_2 .pricingTable-sign-up{

   padding: 30px 0;

}

.pricingTable_2 .btn-block{

   width: 80%;
   margin: 0 auto;
   background: #273238;
   border:2px solid #fff;
   color:#fff;
   padding: 15px 12px;
   text-transform: uppercase;
   font-size: 18px;

}

.pricingTable_2 .btn-block:hover{

   background: #444a6d !important;

}

.pricingTable_2.pink{

   background: #ed687c;

}

.pricingTable_2.pink .pricingTable-header:after{

   border-bottom-color: #ed687c;

}

.pricingTable_2.pink .btn-block:hover{

   background: #cc435a !important;

}

.pricingTable_2.orange{

   background: #e67e22;

}

.pricingTable_2.orange .pricingTable-header:after{

   border-bottom-color: #e67e22;

}

.pricingTable_2.orange .btn-block:hover{

   background: #b75b0c !important;

}

.pricingTable_2.blue{

   background: #3498db;

}

.pricingTable_2.blue .pricingTable-header:after{

   border-bottom-color: #3498db;

}

.pricingTable_2.blue .btn-block:hover{

   background: #1b74b3 !important;

}

/* -------------------------------------------------- */ /* 21. TABS /* -------------------------------------------------- */ .nav-tabs {

   border:none;

} .nav-tabs > li{margin-bottom: -2px;}

.nav-tabs > li > a {

   background:#F8F8F8;
   border:1px solid #ebebeb;
   margin:0;
   color:#777777;
   border-radius:0;

} .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {

   border-color:#ebebeb;
   outline:none;
   background:white;
   color:#727CB6;
   margin:0 0 -1px 0;
   border-bottom:none;
   border-top: 1px solid #727CB6;

} .nav-tabs li.active, .nav-tabs li.active a, .nav-tabs li.active a:hover {

   border-top: 1px solid #727CB6;
   color:#727CB6;

}

ul.nav-tabs li a i {

   font-size: 24px;
   font-weight: 500;
   line-height: 30px;

} ul.nav-tabs li.last-tab a {

   padding:4px 22px;
   outline:none;

} .tab-content {

   border:1px solid #ebebeb;
   padding:20px 14px;

} .tab-content:first-child { display: block; } .tab-content > h3 {

   color: #555333;
   font-size: 20px;
   font-weight: 600;
   line-height: 24px;
   margin-top: 0;

} .tab-content > p {

   font-family: lato,Helvetica, Arial, sans-serif;
   line-height: 20px;

}

/* Vertical Tab ====================================*/ .vertical-tab .nav-tabs li.active{

   border: 0;

}

.vertical-tab .nav-tabs li.active a, .vertical-tab .nav-tabs li.active a:hover, .vertical-tab .nav-tabs > li.active > a:focus{

   background: #fff;
   border-color: #cfcfcf #ffffff #cfcfcf #727cb6;
   border-bottom:1px solid #cfcfcf;

} .vertical-tab .nav-tabs > li > a{

   background: #f8f8f8;
   border: 1px solid #e1e1e1;
   outline: medium none;
   padding: 15px 20px;
   outline: none;

} .vertical-tab .nav-tabs > li > a:hover{

   background:#FFF ;
   transition:all 0.4s ease-in-out;

} .vertical-tab .nav.nav-tabs {

   display: inline-block;
   float: left;

} .vertical-tab .nav-tabs > li{

   float: none;

} .vertical-tab .tab-content {

   border: 1px solid #CFCFCF;
   margin: 0 0 0 101px;
   padding: 10px;

}

/* Recent Tab ====================================*/ .recent_tab_list {

   margin:0;
   padding:0;

} ul.recent_tab_list li {

   margin: 0 0 15.5px;
   padding: 0 0 17px;
   list-style-type: none;
   border-bottom: 1px solid #ebebeb;
   float: left;
   width: 100%;

} .recent_tab_list li span {

   float: left;
   margin-right: 15px;

} .recent_tab_list li a {

   color: #444444;
   display: block;
   font-size: 12px;
   text-decoration: none;

} .recent_tab_list li a:hover {

   color: #727CB6;

} .recent_tab_list li span img {

   float: left;
   margin-right: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
   -moz-opacity: 0.8;
   -khtml-opacity: 0.8;
   opacity: 0.8;

} .recent_tab_list li span img:hover {

   float: left;
   margin-right: 0px;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   -moz-opacity: 1;
   -khtml-opacity: 1;
   opacity: 1;

} .recent_tab_list li i {

   padding: 1px 0px 0px 0px;
   margin: 0px;
   display: block;
   font-size: 11px;
   font-style: normal;
   color: #9e9e9e;
   font-family:Lato,Helvetica, Arial, sans-serif;

} .recent_tab_list li.last {

   padding: 0px 0px 7px 0px;
   margin: 0px 0px 0px 0px;
   border-bottom: 0px solid #f5f6f6;

}

/* Comment Tab ====================================*/

.comments{

   padding:0;
   margin:0;

} .comments .post-thumbnail {

   float: left;
   margin: 0 15px 0 0;

} .comments .post-thumbnail > img {

   height: 50px;
   width: 50px;

} .comments li {

   border-bottom: 1px solid #ebebeb;
   margin-bottom: 15px;
   padding: 0 0 15px;
   font-size: 12px;
   line-height: 18px;
   list-style: none outside none;

} .comments_list > p {

   margin: 0;
   overflow: hidden;

} .comments li:last-child {

   border-bottom: none;
   margin-bottom: 0;
   padding: 0;

} .comments li:last-child p{

   margin:0

} .comments_list a {

   text-decoration: none;
   color:#727CB6;

} .com_pist a:focus{

   color:#555;

} .comments_list i {

   color: #909090;
   font-size: 12px;
   margin-left: 3px;

} .sidebar-tab {

   margin-bottom:30px;

}

/* =========================================*/ /* 22. ACCORDION & TOGGLE */ /* =========================================*/

.panel-group .panel{

   border-radius: 0px;
   border:0px none;
   box-shadow: none;

}

.panel-heading{

   padding: 0;

}

.panel-title{

   position: relative;
   font-size: 14px;

}

.panel-title > a{

   border:1px solid #727cb6;
   display: block;
   background: #727cb6;
   color:#fff;
   padding: 12px 45px;

}

.panel-title > a:hover,a:focus{

   text-decoration: none;
   outline: none;

}

.panel-title .left-icon{

   border-right:1px solid #fff;
   font-size: 24px;
   color:#fff;
   width: 40px;
   padding: 13px 0;
   text-align: center;
   display: inline-block;
   margin-right: 10px;
   position: absolute;
   left:0;
   top:0;

}

.panel-title a:after{

   content: "\f068";
   font-family: 'FontAwesome';
   float: right;
   font-size: 20px;
   margin-right: 20px;
   color:#fff;
   position: absolute;
   top:15px;
   right:0;
   display: inline-block;

}

.panel-title .collapsed:after{

   content: "\f067";
   color:#727cb6;

}

.panel-title .collapsed{

   background: #fff !important;
   color:#6d6d6d;
   border-color:lightgray;

}

.panel-title .collapsed .left-icon{

   color:#727cb6;
   border-color:lightgray;

}

.panel-default > .panel-heading + .panel-collapse > .panel-body{

   border-top:0px none;

}

/* ===================================================== */ /* 23. PROGRESS SKILL BAR */ /* ===================================================== */ .progress-skill-bar{

   padding:0;

} .progress_skill {

   background:#F8F8F8;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -msearch-buttonorder-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   box-shadow: none;
   height:27px;
   border:1px solid #F1F1F1;
   margin-bottom: 15px;
   line-height: normal;

} .progress_skill .bar {

   background:#727CB6;
   line-height:24px;
   font-family:"Open sans",Helvetica, Arial, sans-serif;
   color: #ffffff;
   text-align: left;
   font-weight: bold;
   text-indent: 15px;
   text-transform:uppercase;
   -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;-webkit-text-shadow: none;-moz-text-shadow: none;text-shadow: none;
   -webkit-transition: width 1s ease;-moz-transition: width 1s ease;-o-transition: width 1s ease;transition: width 1s ease;
   border-radius: 5px;

} .progress_skill:hover .bar {

   -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease;
   background:#444A6D !important;
   color:#fff;
   cursor: pointer;

} .progress-skill-bar {

   margin-bottom: 10px;
   margin-left:0;
   margin-top: 15px;
   list-style:none;

} .progress-skill-bar li{overflow: hidden;} .progress-skill-bar .lable {

   background: #555;
   float: left;
   color: #fff;
   border-right: 1px #FFFFFF solid;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;
   font-size: 11px;
   font-weight: bold;
   height: 25px;
   margin-top:1px;
   line-height: 25px;
   padding: 0 0 0 4px;
   text-align: center;
   width: 37px;
   border-top-left-radius:5px;
   border-bottom-left-radius:5px;

} .progress-success .bar, .progress_skill .bar-success {

   filter: none;
   background: #15b994;

} /* Circular Progress Bar ====================================*/ .circular-chart-small, .circular-chart-big{

   text-align: center;

} .percent{

   color: #2b2e31;
   font-size: 22px;
   font-weight: bold;
   text-align: center;
   width: 180px;
   line-height: 180px;
   position: absolute;
   top: 0px;
   z-index: 10;

}

h5.circular-title{

   text-align: center;
   font-size: 17px;

}

.circular-chart-small .percent{

   font-size: 20px;
   line-height: 120px;
   width: 120px;
   font-weight:400;

}

/* ===================================================== */ /* 24. PROMO BOX */ /* ===================================================== */ .promo_box {

   background:#f2f2f2;
   padding: 30px 0;
   overflow: hidden;

} .promo_box .pb_action a.btn {

   float: right;
   margin-top:5px;
   border:none;

} .promo_box .pb_action a.btn i{

   margin-right:7px;

} .promo_content h3 {

   color: #444;
   font-size: 22px;
   font-weight: bold;
   font-family:PT Sans,Helvetica, Arial, sans-serif;
   margin: 0 0 5px;

} .promo_content p{

   color:#666;
   font-family:PT sans,Helvetica, Arial, sans-serif;
   margin-bottom:0;

} .promo_box.dark{

   background:#20242A;

} .promo_box.dark .promo_content h3{ color: #fff; } .promo_box.dark .promo_content p{ color: #B0B0B0; }

/* Reverse Promo Box ====================================*/ .promo_box.reverse{

   background:#727CB6;

} .promo_box.reverse .promo_content h3 {

   color:#fff;

} .promo_box.reverse .promo_content p{

   color:#fff;

} .promo_box.reverse .pb_action a.btn{

   background: hsla(0, 0%, 0%, 0) none repeat scroll 0 0;
   border: 2px solid hsl(0, 0%, 97%);
   border-radius: 0;
   color: hsl(0, 0%, 100%);

} .promo_box.reverse .pb_action a.btn:hover {

   background:#fff;
   color:#727CB6;

}

/* ===================================================== */ /* 25. PAGINATION */ /* ===================================================== */ .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{

   background:#727CB6;
   border-color: #727CB6;

} .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{

   background:#727CB6;
   border-color: #727CB6;

} /* ================================================== */ /* 26. TITLE */ /* ================================================== */ .dividerHeading h4, .widget_title h4 {

   border-bottom: 1px solid #e2e2e2;
   font-size: 21px;
   font-weight: normal;
   margin-bottom: 25px;
   padding: 0 0 10px;
   position: relative;

}

.dividerHeading h4::before, .widget_title h4::before{

   bottom: -3px;
   content: "";
   display: inline-block;
   height: 5px;
   left: 20px;
   position: absolute;
   width: 35px;

} .dividerHeading h4::after, .widget_title h4::after {

   bottom: -1px;
   content: "";
   display: inline-block;
   height: 1px;
   left: 0;
   position: absolute;
   width: 80px;

} .dividerHeading h4::after, .widget_title h4::after, .dividerHeading h4::before, .widget_title h4::before{

  background: #727CB6;

}

.dividerHeading.text-center h4:before{

   left: 50%;

}

.dividerHeading.text-center h4:after{

   left: 50%;
   margin-left: -23px;

}

.widget_title h4 {

   font-size: 14px;
   text-transform: uppercase;

} .footer .widget_title h4{

   border-color: #B5B5B5;

} .footer .widget_title h4 span{

   color:#fff;

}

/* ===================================================== */ /* 27. DROPCAPS */ /* ===================================================== */ .dropcap {

   float: left;
   color: #169fe6;
   font-size: 58px;
   line-height: 54px;
   padding:6px 10px 8px;
   margin-top: 8px;

} .dropcap.default { color: #727CB6; } .dropcap.gray { color: #555; } .dropcap.light { color: #aaa; }

.dropcap_block {

   float: left;
   background-color: #727CB6;
   font-size: 50px;
   line-height: 50px;
   padding:6px 10px 8px;
   margin-top: 8px;
   margin-right:10px;
   color:#fff;

} .dropcap_block.default { background-color: #727CB6; } .dropcap_block.gray { background-color: #555; } .dropcap_block.light { background-color: #aaa; }

/* ===================================================== */ /* 28. HIGHLIGHT */ /* ===================================================== */ .highlight{ padding: 0px 6px 2px; color: #fff;} .highlight.default { background: #727CB6; } .highlight.gray { background: #4c4c4c; } .highlight.light { background: #aaa; }

blockquote.default {

   border-color: #727CB6;
   color:#666;
   background:#f2f2f2;
   font-size:inherit;

}

/* ===================================================== */ /* 29. Swipe.JS Slider */ /* ===================================================== */ .swipe { overflow: hidden; visibility: hidden; position: relative; margin-top: 0; }

.swipe-wrap {

   margin: 0 auto;
   overflow: hidden;
   padding: 0;
   position: relative;

}

.swipe-wrap > li { float:left; width:100%; overflow: hidden; position: relative; }

.swipe-navi {

   display: block;
   height: auto;
   margin-top: 10px;
   position: absolute;
   top: 50%;
   width: 100%;
   z-index: 1001

}

.swipe-navi .swipe-left, .swipe-navi .swipe-right { position: absolute; text-align: center; width: 40px; height: 40px; line-height: 40px; opacity: 0; zoom: 1; filter: alpha(opacity=0); color:#fff; cursor: pointer;

border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;

transition: all 200ms; -moz-transition: all 200ms; -webkit-transition: all 200ms;

-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; background:#727CB6;

} .swipe-navi .swipe-left:hover, .swipe-navi .swipe-right:hover{ background:#555 !important; } .swipe-wrap img {

   width: 100%;

}

.swipe:hover .swipe-navi .swipe-left{ opacity: .9; zoom: 1; filter: alpha(opacity=90); margin-top: -27px; }

.swipe:hover .swipe-navi .swipe-right { opacity: .9; zoom: 1; filter: alpha(opacity=90); margin-top: -27px; }

.swipe-navi .swipe-left { left: 5px; margin-top: -32px; }

.swipe-navi .swipe-right { right: 5px; margin-top: -22px; } .img-about {

   margin-top: 15px;

}

/* ================================================= */ /* 30. CAROUSEL */ /* ================================================= */

.carousel-content, .porDetCarousel{position: relative; } .carousel-item {

   width: 100%;
   display: block;
   visibility: hidden;
   position: absolute;
   top: 0;    left: 0;

} .carousel-item.active {

   display: block;
   visibility: visible;
   position: static;

} .carousel-item.current {

   left: 0;
   right: 0;
   visibility: visible;
   z-index: 1;

} .carousel-item {

   max-width: 100%;
   display: block;

} .carousel-control {

   position: absolute;
   top: 0;		left: 0;
   bottom: 0;	right: 0;
   overflow: hidden;
   width:100%;

}

.porDetCarousel:hover .carousel-prev { left: 10px; } .porDetCarousel:hover .carousel-next { right: 10px; }

.carousel-prev, .carousel-next {

   width: 40px;
   height: 40px;
   position: absolute;
   top: 45%;
   left: -40px;
   z-index: 2;
   background: #666;
   border-radius: 2px;
   cursor: pointer;
   -webkit-transition: background-color 0.2s ease, left 0.2s ease, right 0.2s ease;
   transition: background-color 0.2s ease, left 0.2s ease, right 0.2s ease;

} .carousel-next {

   left: auto;
   right: -40px;

} .carousel-prev:hover, .carousel-next:hover {

   background: #555;

} .carousel-prev:before, .carousel-next:before {

   content: '\f104';
   display: block;
   text-align: center;
   line-height: 40px;
   font: 20px/40px 'FontAwesome';
   color: #fff;

} .carousel-next:before {

   content: '\f105';

} .carousel-next:hover:before, .carousel-prev:hover:before{color: #fff;} .carousel-pagination {

   position: absolute;
   bottom: 20px;
   left: 50%;
   -webkit-transition: bottom 0.2s ease;transition: bottom 0.2s ease;
   -webkit-transform: translateX(-50%);transform: translateX(-50%);
   z-index: 2;
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: center;
   line-height: 50px;

} .carousel-pagination li {

   background:rgba(0, 0, 0, 0.5);
   cursor: pointer;
   float: left;
   height: 6px;
   margin: 0 2px;
   width: 20px;

} .carousel-pagination li.active {

   background: #727CB6;

}

/* ===================================================== */ /* 31. FLICKR */ /* ===================================================== */ .flickr {

   margin-top: 20px;
   text-align:center;

} .flickr-feed {overflow: hidden;padding:0;} .flickr-feed li {

   display: inline-block;
   margin: 0 8px 4px auto;
   position: relative;
   z-index:0;
   width:62px;
   height:62px;
   overflow: hidden;

} .flickr-feed li img {

   margin: 0 8px 8px 0;
   width: 62px;
   height: 62px;
   overflow: hidden;
   box-shadow:none;
   -webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
   -o-transition: all 0.5s ease 0s;
   -ms-transition: all 0.5s ease 0s;
   transition: all 0.5s ease 0s;

} .flickr-feed li:hover img{

   -webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
   -o-transition: all 0.5s ease 0s;
   -ms-transition: all 0.5s ease 0s;
   transition: all 0.5s ease 0s;
   transform: scale(1.2) rotate(10deg);
   -webkit-transform: scale(1.2) rotate(10deg);
   -moz-transform: scale(1.2) rotate(10deg);
   -o-transform: scale(1.2) rotate(10deg);
   -ms-transform: scale(1.2) rotate(10deg);

}

.flickr-feed li a {display: block;overflow: hidden;position: absolute;width: 62px;height: 62px;

   filter: alpha(opacity=100);
   -khtml-opacity: 1;
   -moz-opacity: 1;
   opacity: 1;

} .flickr-feed li .hover {position: absolute;width: 62px;height: 62px;background: #727CB6;opacity: 0;filter: alpha(opacity=0);-webkit-transition-duration: 0.4s;

   -moz-transition-duration: 0.4s;-ms-transition-duration: 0.4s;-o-transition-duration: 0.4s;transition-duration: 0.4s;z-index:10;

} .flickr-feed li a:hover .hover {opacity: 0.8;filter: alpha(opacity=80); visibility:visible;} .flickr-feed li a i {

   display: block;
   position: absolute;
   width: 62px;
   height: 62px;
   font-size: 18px;
   color: white;
   line-height: 3.8;
   opacity: 0;
   filter: alpha(opacity=0);
   z-index: 11;
   -webkit-font-smoothing: antialiased;
   -webkit-transition-duration: 0.4s;
   -moz-transition-duration: 0.4s;
   -ms-transition-duration: 0.4s;
   -o-transition-duration: 0.4s;
   transition-duration: 0.4s;
   text-align:center;

} .flickr-feed li a:hover i {

   filter: alpha(opacity=100);
   -khtml-opacity: 1;
   -moz-opacity: 1;
   opacity: 1;

}

/* Footer Social ====================================*/ .footer_social{

   float: right;

} .footbot_social {

   list-style: none outside none;
   margin: 0 auto;
   overflow: hidden;
   padding: 0;

} .footbot_social li {

   float: left;
   background: none !important;

} .footbot_social li a {

   color: #666;
   display:block;
   height: 40px;
   text-align: center;
   width:35px;
   -webkit-transition: 0.25s;
   -moz-transition: 0.25s;
   -o-transition: 0.25s;
   transition: 0.25s;
   margin: 0 2px;

} .footbot_social li a i {

   font-size: 18px;
   line-height: 40px;
   margin-right: 0;
   float: none;

} .footbot_social li a.fb:hover {background:#1964DA; border-radius: 5px; color:#fff;} .footbot_social li a.twtr:hover {color: #fff; background:#3ABDD1; border-radius:5px;} .footbot_social li a.gmail:hover {color: #fff;} .footbot_social li a.pinterest:hover {color: #fff;} .footbot_social li a.rss:hover {color: #fff; background:#F15200; border-radius:5px;} .footbot_social li a.tumblr:hover {color: #fff;} .footbot_social li a.flickr:hover {color: #fff;} .footbot_social li a.instagram:hover {color: #fff;} .footbot_social li a.linkedin:hover {color: #fff;} .footbot_social li a.skype:hover {color: #fff; background:#00AAF1; border-radius:5px;} .footbot_social li a.youtube:hover {color: #fff;} .footbot_social li a.dribbble:hover { color: #fff; background:#F97193; border-radius:5px;}

/* ===================================================== */ /* 32. List & Bullets */ /* ===================================================== */ ul{

   list-style: none;
   margin: 0;
   padding: 0;

}

/* --------list style CSS---------- */ .list_style li {

   font-family: PT sans,Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 21px;
   padding:3px 2px 3px 10px;
   position: relative;

}

.list_style li a {

   color: #666;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0;
   text-decoration: none;

} .list_style li a:hover {

   color: #727CB6;
   text-decoration: none;

} .list_style li a.active {

   color: #727CB6;

}

/* --------list style 1 : Simple CSS---------- */ .list_style li {

   padding:3px 2px 3px 12px;

}

.list_style li:before {

   font-family: FontAwesome;
   content: "\f105";
   font-size: 14px;
   position: absolute;
   left: 0;
   top: 3px;

}

/* --------list style 2 : Circle CSS---------- */ .list_style.circle li {

   padding:3px 2px 3px 23px;

} .list_style.circle li:before{

   font-family: FontAwesome;
   content: "\f105";
   color: #FFFFFF;
   background: #727CB6;
   border-radius:50%;
   display: inline-block;
   height: 16px;
   line-height: 16px;
   width: 16px;
   text-align: center;
   font-size: 11px;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   -o-border-radius: 50%;
   -ms-border-radius: 50%;
   position: absolute;
   left: 0;
   top: 5px;

}

/* --------list style 3 : Square CSS---------- */ .list_style.square li {

   padding:3px 2px 3px 23px;

} .list_style.square li:before {

   font-family: FontAwesome;
   content: "\f105";
   background: #727CB6;
   display: inline-block;
   border-radius:0;
   color: #FFFFFF;
   height: 15px;
   width: 15px;
   line-height: 15px;
   text-align: center;
   position: absolute;
   left: 0;
   top: 5px;

}

/* --------list style 4 : Star CSS---------- */ .list_style.star li {

   padding:3px 2px 3px 22px;

} .list_style.star li:before {

   font-family: FontAwesome;
   content: "\f005";
   display: inline-block;
   border-radius:0;
   color: #727CB6;
   font-size: 16px;
   text-align: center;
   position: absolute;
   left: 0;
   top: 3px;

}

/* --------list style 5 : Right-arrow CSS---------- */ .list_style.right-arrow li {

   padding:3px 2px 3px 20px;

} .list_style.right-arrow li:before {

   font-family: FontAwesome;
   content: "";
   display: inline-block;
   border-radius:0;
   color: #727CB6;
   font-size: 15px;
   position: absolute;
   left: 0;
   top: 4px;

}

/* --------list style 6 : Hand CSS---------- */ .list_style.hand li {

   padding:3px 2px 3px 22px;

} .list_style.hand li:before {

   font-family: FontAwesome;
   content: "";
   display: inline-block;
   border-radius:0;
   color: #727CB6;
   position: absolute;
   left: 0;
   top: 4px;

}

/* --------list style 7 : Play CSS---------- */ .list_style.play li {

   padding:3px 2px 3px 21px;

} .list_style.play li:before {

   font-family: FontAwesome;
   content: "";
   display: inline-block;
   border-radius:0;
   color: #727CB6;
   font-size: 15px;
   position: absolute;
   left: 0;
   top: 3px;

}

/* --------list style 8 : Dubble-Right-Arrow CSS---------- */ .list_style.dubble-right-arrow li {

   padding:3px 2px 3px 17px;

} .list_style.dubble-right-arrow li:before {

   font-family: FontAwesome;
   content: "";
   display: inline-block;
   border-radius:0;
   color: #727CB6;
   font-size: 15px;
   position: absolute;
   left: 0;
   top: 3px;

}

/* --------list style 9 : Multiple-Icon CSS---------- */ .multi-icon-list li{

   font-family: PT sans,Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 21px;
   padding: 3px 2px 3px 23px;
   position: relative;

} .multi-icon-list li i.fa{

   color: #727CB6;
   font-size: 16px;
   position: absolute;
   left: 0;

}

/* ===================================================== */ /* 33. Button Up */ /* ===================================================== */ .btntoTop {

   width: 44px;
   height: 44px;
   position: fixed;
   bottom: 30px;
   right: 30px;
   background-color: #34495e;
   border-radius: 2px;
   text-align: center;
   line-height: 40px;
   cursor: pointer;
   opacity: 0;
   -webkit-transition: opacity 0.2s ease;
   transition: opacity 0.2s ease;

} .btntoTop:before {

   content: "\f106";
   display: inline-block;
   vertical-align: middle;
   font: 20px 'FontAwesome';
   color: #b8bcc0;

} .btntoTop.active {

   opacity: 1;

} .btntoTop.active:hover{

   opacity:0.8;

}

/* =================================================================== */ /* 34. SHOP ====================================================================== */ .product{

   border: 1px solid hsl(0, 0%, 95%);
   box-shadow: 0 1px 1px hsl(0, 0%, 98%);
   padding: 10px;
   position: relative;
   margin-bottom:30px;

} .product .product-img{

   overflow: hidden;
   position: relative;

} .product .product-img img{

   transition: transform 0.5s ease 0s;
   display: block;
   height: auto;
   max-width: 100%;

} .product .product-info{

   padding: 10px 0;
   display:flex;

} .product .product-info .product-title{

   float: left;
   width: 75%;

} .product .product-info .product-title h3{

   font-size: 15px;
   font-weight: 700;
   line-height: 25px;
   margin: 0 0 5px;
   padding: 0;
   text-transform: capitalize;

} .product .product-info .product-prices{

   float: left;
   width: 25%;

} .product .product-info .product-prices p.price-new{

   color:#727CB6;
   font-size: 15px;
   font-weight: 700;
   line-height: 23px;
   margin: 0;
   text-align: right;

} .product > figure .option{

   top:50%;

}

/* =================================================================== */ /* 35. SHOP CART ====================================================================== */

.table{

   border: 1px solid hsl(0, 0%, 95%);
   width: 100%;

} .table tr{

   border:1px solid hsl(0, 0%, 95%);

} .table tr th{

   background-color: hsl(0, 0%, 98%);
   border-color: hsl(0, 0%, 95%);
   border-width: 1px;
   color: hsl(195, 2%, 38%);

} .table tr td.remove {

   text-align: center;

} .table tr td.remove a{

   border-radius: 25px;
   color: hsl(0, 88%, 65%);
   display: inline-block;
   height: 25px;
   line-height: 25px;
   transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
   width: 25px;

} .table tr th, .table tr td{

   border-color: hsl(0, 0%, 95%);
   transition: background-color 0.3s ease 0s;
   vertical-align: middle !important;
   padding: 8px;

} .shop-coupon input[type="text"] {

   border: 1px solid hsl(0, 0%, 92%);
   margin:0 4px 15px;
   outline-width: 0 !important;
   padding: 5px;
   width:50%;
   float:left;

} .table .btn.grey{

   background: hsla(0, 0%, 0%, 0) none repeat scroll 0 0;
   border:1px solid hsl(0, 0%, 92%);
   color: hsl(0, 0%, 50%);
   width:auto;

} .table .btn.grey:hover{

   background:#727CB6;
   color:#fff;

} .shop-cart-buttons .btn{

   width:auto;

} .shop-cart-buttons .btn-block{

   display: inline-block;

}

/*-------Animation-CSS----*/ .animation {

   text-align: center;

} .animation > p {

   font-size: 16px;
   margin: 20px 0;

}

/* ===================================================== */ /* 36. MEDIA QUERIES */ /* ===================================================== */ @media only screen and (min-width: 980px) and (max-width: 1280px){

   .names{font-size:14px}

   .navbar-default .navbar-nav > li > a {
       padding: 10px 9px;
   }

   .blog_medium .post_img{width:30%; }

   .shares li.shareslabel h3{padding:8px 14px;}

   .comment_form > input{width:30%;}

   .pricingTable_2 .pricingTable-header:after{
       border-left: 215px solid transparent;
   }

   .testimonial .testimonial-buttons a{height:17px;line-height:17px;width:17px;}

   .testimonial .testimonial-buttons {position:absolute; right: 47%; top: -22px;}

   .post-images { margin-right: 15px;}

}

@media only screen and (min-width: 768px) and (max-width: 989px){

   #logo{
       /*width: 70%;*/
       /*margin-top: 12%;*/
   }
   .navbar-default .navbar-nav > li > a{padding: 10px 12px;}

   /*.navbar-nav > li > ul.dropdown-menu
   {
       top:94px!important;
   }*/

   .navbar-default .navbar-nav > li > a {
       padding: 5px 8px;
   }

   .navbar-default .navbar-nav li a {
       font-size: 12px;
   }

   .navbar-nav .sub-arrow, .navbar-nav .collapsible .sub-arrow {
       margin-left: 4px;
   }

   .tab-content{margin-bottom:30px;}

   .info_service {padding: 40px 0 0;}

   .post-images { margin-right: 15px; }

   .serviceBox_2{
       margin-bottom: 20px;
   }

   .serviceBox_3{
       margin-top: 90px;
   }

   .serviceBox_4{
       margin-bottom: 25px;
   }

   .serviceBox_5{margin-bottom: 50px;}
   .serviceBox_5 .service-content::before { left: -38%;}
   .serviceBox_5 .service-content::after {
       left: 38%;
       top: -32px;
   }

   .serviceBox_5 .service-content .internal::before {
       left: -43%;
       top: 4%;
   }
   .serviceBox_5 .service-content .internal::after {
       left: 64%;
       top: -32px;
   }

   .pricingTable_1{
       margin-bottom: 40px;
   }

   .pricingTable_2{
       margin-bottom: 20px;
   }
   .pricingTable_2 > .pricingTable-header:after{
       border-left: 349px solid transparent;
   }

   .team-info{
       padding: 19px 22px 22px;
   }

   .team-item-content{
       margin-bottom:40px;
   }

   .serviceBox_8 .service_icon > h3{ font-size: 17px;}

}

@media only screen and (max-width:768px) {

   /*#logo-bar{padding:0;}*/
   /*#logo {width: 70%;
       margin-top: 9%;
   }*/
   #logo a img {height: auto;}

   .navbar-default .navbar-nav > li > a{padding: 10px 8px;}

   .navbar-default .navbar-nav > li > a {
       /*padding: 2px 8px;*/
   }

   .navbar-default .navbar-nav li a {
       font-size: 12px;
   }

   .navbar-nav .sub-arrow, .navbar-nav .collapsible .sub-arrow {
       margin-left: 4px;
   }

   figure.effect-bubba figcaption::before,
   figure.effect-bubba figcaption::after,
   .small-images figure.effect-bubba figcaption::before,
   .small-images figure.effect-bubba figcaption::after,
   .large-images figure.effect-bubba figcaption::before,
   .large-images figure.effect-bubba figcaption::after {
       top: 18px;
       right: 18px;
       bottom: 18px;
       left: 18px;
   }

   .medium-images figure h5,
   .large-images figure h5,
   .small-images figure h5{
       font-size: 125%;
   }

   .medium-images figure.effect-bubba p,
   .small-images figure.effect-bubba p,
   .large-images figure.effect-bubba p{
       font-size: 85%;
       padding: 6px 2.5em 20px;
   }

   .small-images .masonry_wrapper figure.effect-bubba h5
   .medium-images .masonry_wrapper figure.effect-bubba h5,
   .large-images .masonry_wrapper figure.effect-bubba h5{
       padding-top: 26%;
   }

   .large-images .masonry_wrapper figure.effect-bubba p,
   .medium-images .masonry_wrapper figure.effect-bubba p,
   .small-images .masonry_wrapper figure.effect-bubba p{
       padding: 3px 2.5em 20px;
   }

   figure .option .fa,
   .small-images figure .option .fa ,
   .latest_work  figure .option .fa{
       font-size: 15px;
       width: 35px;
       height: 35px;
       line-height: 35px;
   }

   .pricingTable_1{
       margin-bottom: 40px;
   }

   .pricingTable_2{
       margin-bottom: 20px;
   }
   .pricingTable_2 > .pricingTable-header:after{
       border-left: 349px solid transparent;
   }

   /*.owl-item li{ width:248px; }*/

   .sub_content {
       padding: 15px 0;
   }

   .tab-content{margin-bottom:30px;}

   .nav-tabs > li > a { padding:10px 10px; }

   .blog-hover > a { top: 30%; }

   .blog_medium .post_content{ width:45%; }

   .shares li.shareslabel h3{ padding:8px 14px; }

   section.parallax { padding: 30px 0; }

   .parallax-testimonial{ padding: 0 15px 30px; }

   .img-about{ margin-bottom: 20px; }

   .texture-section{ padding: 15px 0;margin: 10px 0; }

   .team-item-content{
       margin-bottom:40px;
   }

}

@media only screen and (max-width: 767px) {

   #menu-bar{padding: 10px 0 20px;}

   #logo {
       position: absolute;
       top: 0;
       /*margin: 1% 0 0;*/
       margin: 0;
   }

  /* #logo img {
       width:70%;
   }*/

   .navbar-default .navbar-nav > li > a{
       height:15px;
       line-height: 15px;
   }

   .navbar-default .navbar-collapse{
       /*padding: 20px 15px 0;*/
       /*padding: 0 15px;*/
       box-shadow:none;
   }
   .navbar-collapse {
       position: absolute;
       width: 100%;
   }
   .navbar-nav{
       background:#303436;
       margin: 0;
   }
   .nav.navbar-nav > li > a{
       border: 0px none !important;
   }

   .nav.navbar-nav li.active > a{
       background: #727CB6 !important;
   }

   .navbar-nav > li ul > li:first-child > a{border-top:none;}
   .navbar-default .navbar-nav > li{ border-bottom:1px solid rgba(225, 220, 220, 0.81) ;}
   .navbar-default .navbar-nav > li > a,
   .navbar-nav .dropdown-menu > li > a {
       padding-top:12px!important;
       padding-bottom:12px!important;
       border-bottom:none!important;
   }

   /*.navbar-default .navbar-nav li a{
       color: #fff;
       font-size: 15px;
       font-weight: 700;
   }*/
   .navbar-nav .open .dropdown-menu > li > a,
   .navbar-nav .open .dropdown-menu .dropdown-header,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
       background: #303436;
       padding-left:45px;
       color:#fff;
       font-size:13px;
   }
   .dropdown-menu.sm-nowrap > li{background:#303436; border-top: 1px solid rgba(225, 220, 220, 0.81);}

   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus{
       background:#505B95;
       color:#fff;
   }

   .navbar-nav .sub-arrow, .navbar-nav .collapsible .sub-arrow
   {
       float:right;
       color:#fff;
   }
   .navbar-nav > li > ul:before
   {
       content:"";
       display:none;
   }
   .navbar-nav > li > .has-submenu .sub-arrow{
       font-size: 14px;
       font-weight: bold;
       width: 10px;
   }

   .navbar-nav ul .sub-arrow{
       position:absolute;
       top: 20px;
       left: 0;
       margin-top:6px;
       margin-right:15px;
       border-top:4px dashed transparent;
       border-bottom:4px dashed transparent;
       border-left:4px solid;
       width: 100%;
       height: 100%;
       margin-left: 0;
       transform: rotate(90deg);
   }

   .navbar-nav > li.active {
       color: #fff;
   }

   .navbar-nav > li:hover > ul{
       -moz-animation: none;
       -webkit-animation: none ;
       animation: none;
   }

   .navbar-nav > li > ul.dropdown-menu li:hover ul{
       -moz-animation: none;
       -webkit-animation:none;
       animation: none;
   }

   .navbar-default .navbar-nav > li > a > span.data-hover{
       margin: 0;
       padding: 0;
       -webkit-transition: none;
       -moz-transition: none;
       transition: none;
   }

   .navbar-default .navbar-nav > li > a > span.data-hover::before {
       content: "";
       margin: 0;
       padding: 0;
       transition:none;
       _webkit-transition:none;
       _moz-transition:none;
   }
   .navbar-default .navbar-nav > li:hover > a > span.data-hover,
   .navbar-default .navbar-nav > li:focus > a > span.data-hover{
       -webkit-transform: none;
       -moz-transform: none;
       transform: none;
       transition:none;
       _webkit-transition:none;
       _moz-transition:none;
   }

   .sticky-wrapper.is-sticky #menu-bar #logo{
       margin-top: 1%;
   }
   .sticky-wrapper.is-sticky #menu-bar #logo img{
       width: 70%;
   }

   .sticky-wrapper.is-sticky #menu-bar .navbar-default .navbar-nav > li > a {
       height: 15px;
       line-height: 15px;
   }

   .page_head{
       padding: 5px 0 10px;
       position: relative;
   }
   .text-center > img {
       width: 100%;
   }
   .images-style-inner {
       margin: 10px 0;
   }
   .page_head h2 { font-size: 15px;padding: 0px 8px; }

   #breadcrumbs { float: right;margin-top: 5px;}

   .serviceBox_2{
       margin-bottom: 20px;
   }

   .serviceBox_3{
       margin-top: 90px;
   }

   .serviceBox_4{
       margin-bottom: 25px;
   }

   .serviceBox_5 .service-content::before {
       left: -5%;
       top: -38px;
       width: 100%;
   }
   .serviceBox_5 .service-content::after {
       left: 71%;
       top: -75px;
   }

   .serviceBox_5 .service-content .internal::before {
       left: -11%;
       top: -1px;
       width: 100%;
   }
   .serviceBox_5 .service-content .internal::after {
       left: 83%;
       top: -77px;
   }

   .serviceBox_8{ margin-bottom:30px; }

   .list_style li i{ margin-right:0; }

   ul.client_items { display: block; margin: 0 auto; padding: 0; text-align: center; }

   .list_item{ width:100%;}

   .grey-transparent-content .sub_content{
       padding: 50px 20px;
   }

   /*.owl-item li{ width:99%; }*/

   .widget_content{ margin-bottom:30px; }

   .promo_box .pb_action a.btn {display: block; float: none; margin-top: 20px;  }

   .list_style{ margin:0 0 30px; }

   .team_prof{ margin-bottom:30px; }

   .blog_large .post_meta h2 a, .blog_single .post_meta h2 a { font-size:18px; line-height:normal; }

   .blog_medium .post_meta h2 a { font-size: 20px; line-height:normal; }

   .blog_large .post_meta h2,
   .blog_medium .post_meta h2,
   .blog_single .post_meta h2 { font-size:18px; line-height:20px; margin-bottom:10px; margin-top:0; }

   .blog_large .day,.blog_medium .day, .blog_single .day { font-size:20px; }

   .blog_large .month, .blog_medium .month , .blog_single .month { padding: 2px 8px 4px; }

   .blog_large .post_img, .blog_single .post_img{ margin-bottom:20px; }

   .blog_large .post_content, .blog_single .post_content { margin: 0 0 0 60px; }

   .blog_large .post_meta .metaInfo, .blog_single .post_meta .metaInfo{ padding:0 0 10px; }

   .blog_large .post_meta .metaInfo > span, .blog_single .post_meta .metaInfo > span { line-height:24px; }

   .blog_large .post, .blog_medium .post, .blog_single .post, .blog_medium .post { margin-bottom:40px; padding-bottom:40px; }

   .blog_medium .post_content { float:left; width:100%; }

   .blog_medium .post_img { margin-right:0; width:75%; margin-bottom:30px; }

   .sidebar .widget { display:inline-block; margin-top:30px; position:relative; }

   .shareslabel {display:none; }

   .author_desc { height:auto; min-height:inherit; width:100%; }

   .author_bio { float:none; margin-top:35%; padding:20px; position:relative; text-align:center; width:100%; }

   #comment-list ul.children{ margin-left:10px; }

   .comment-container{ margin-left:80px; margin-bottom:10px; }

   .comment_form > input{ width:100%; }

   .page_404 > h1{ font-size:160px; line-height:180px; margin-top:0; }

   .page_404 > p{ font-size:26px; line-height:36px; }

   .rec_blog { margin-bottom:20px; }

   .copyright{ text-align:left; float:left; }

   .post-images {
       margin-right: 15px;
   }

   .product{
       display: table;
       margin: 0 auto 30px;
   }

   .team-info{ top:92%;  }

} @media only screen and (min-width: 481px) and (max-width: 767px){

   .author_bio {margin-top:35%; position: relative;}

   #breadcrumbs { float: right;margin-top: 5px;}

} @media only screen and (max-width: 480px){

   #logo {
       width: 70%;
       margin-top: 1%;
   }

   .sticky-wrapper.is-sticky #menu-bar #logo img{
       width: 90%;
   }

   #breadcrumbs{ display: none; }

   .author_bio {margin-top:55%; position: relative;}

   #filter li a{padding:10px;}

   .owl-item .item-description h5{
       font-size: 125%;
   }
   .owl-item .item-description p{
       font-size: 85%;
       padding: 6px 2.5em 20px;
   }

   .sub_content {
       padding: 10px 0;
   }

   .post-images {
       width: 100%;
       margin-right: 0px;
       margin-bottom: 15px;
   }

   .post-detail { width: 100%; }

   .serviceBox_5 .service-content::before {
       background: hsl(188, 30%, 39%) none repeat scroll 0 0;
       content: "";
       display: block;
       height: 500px;
       left: -8%;
       position: absolute;
       top: 0;
       transform: rotate(7deg);
       transition: all 0.3s ease 0s;
       width: 400px;
   }
   .serviceBox_5 .service-content::after {
       background: hsl(188, 30%, 39%) none repeat scroll 0 0;
       content: "";
       display: block;
       height: 500px;
       left: 61%;
       position: absolute;
       top: -76px;
       transform: rotate(-35deg);
       transition: all 0.3s ease 0s;
       width: 400px;
   }

   .serviceBox_5 .service-content .internal::before {
       background: hsl(188, 35%, 31%) none repeat scroll 0 0;
       content: "";
       display: block;
       height: 500px;
       left: -32%;
       position: absolute;
       top: 3%;
       transform: rotate(14deg);
       transition: all 0.3s ease 0s;
       width: 400px;
       z-index: 1;
   }
   .serviceBox_5 .service-content .internal::after {
       background: hsl(188, 35%, 31%) none repeat scroll 0 0;
       content: "";
       display: block;
       height: 500px;
       left: 70%;
       position: absolute;
       top: -44px;
       transform: rotate(-52deg);
       transition: al
       l 0.3s ease 0s;
       width: 400px;
       z-index: 1;
   }

   .pricingTable_2{
       overflow: hidden;
   }
   .pricingTable_2 .pricingTable-header:after {
       border-left: 459px solid rgba(0, 0, 0, 0);
   }

   .product .product-info .product-title h3{
       font-size: 14px;
       line-height: 18px;
   }

   .product .product-info .product-prices p.price-new{
       font-size: 13px;
   }

   .team-info{ top:88%; }

   .pull-right{
       float: left !important;
   }

}

@media screen and (max-width: 360px) {

   .sticky-wrapper.is-sticky #menu-bar #logo{
       margin-top: 3%;
   }

   .product .product-info .product-title h3{
       font-size: 12px;
   }

   .product .product-info .product-prices p.price-new{
       font-size: 12px;
   }

   .product .product-info .product-prices{
       display: inline-table;
   }

   figure .option .fa, .small-images figure .option .fa, .latest_work figure .option .fa{
       width: 30px;
       height:30px;
       line-height: 30px;
   }

   .team-info{ top:85%; }

   .btntoTop{
       width: 35px;
       height: 35px;
       line-height: 30px;
   }

}