/*
Author       : Syed Ekram.
Template Name: Saffron - Corporate Agency Template
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader, btn, overlay, section-padding etc)
    02. BOOTSTRAP NAVIGATION OVERRIDES
    03. START HOME DESIGN
    04. START ABOUT US DESIGN
    05. START PORTFOLIO DESIGN
    06. START PARTNER LOGO DESIGN
    07. START SERVICE DESIGN
    08. START TEAM DESIGN
    09. START TESTIMONIAL DESIGN
    10. START BLOG DESIGN
    11. START NEWSLETTER DESIGN
    12. START CONTACT ADDRESS & CONTACT FORM DESIGN
    13. START FOOTER DESIGN
    14. START SECTION TOP DESIGN
  =============================================================*/
/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
body {
    background-color: #fff;
    color: #777;
    font-family: "Source Sans Pro",sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
html,
body { height: 100% }
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat",sans-serif;
    font-weight: 700;
}
a {
    font-family: "Merriweather",sans-serif;
    text-decoration: none;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
}
ul,
li {
    margin: 0;
    padding: 0;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
/*START PRELOADER DESIGN*/
.preloader {
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}
.status,
.status-mes {
    background-image: url(../img/status.gif);
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
}
.no-padding { padding: 0 }
/*END PRELOADER DESIGN*/
/*START SCROLL TO TOP*/
.topcontrol {
    background: #222 none repeat scroll 0 0;
    border-radius: 50px;
    bottom: 5px;
    box-shadow: 0 1px 11px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 26px;
    height: 40px;
    opacity: 1;
    filter: alpha(opacity=100);
    padding: 5px 12px;
    position: fixed;
    right: 5px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 40px;
}
.topcontrol:hover {
    background: #00bcd4;
    color: #fff;
}
/*END SCROLL TO TOP*/
.section-padding { padding: 60px 0 }
/*START SECTION TITLE DESIGN*/
.section-title { margin-bottom: 60px }
.section-title  h2 {
    color: #333;
    margin: 0;
    text-transform: uppercase;
    padding-bottom: 10px;
}
@media only screen and (max-width:768px) { 
    .section-title h2 { text-align: center }
}
@media only screen and (max-width:480px) { 
    .section-title h2 { font-size: 30px }
}
@media only screen and (max-width:360px) { 
    .section-title h2 { font-size: 24px }
}
.section-title span {
    background: #00bcd4 none repeat scroll 0 0;
    display: block;
    height: 2px;
    margin: 15px auto;
    width: 70px;
}
.section-title p {margin-bottom:0; }
@media only screen and (max-width:360px) { 
.section-title p{ font-size: 15px }
}
@media only screen and (max-width:320px) { 
.section-title p{ font-size: 16px }
}
.section-title-white { color: #fff!important }
/*END SECTION TITLE DESIGN*/
/*START BTN STYLE*/
.btn-dark-bg {
    border: 1px solid #ddd;
    color: #222;
    font-family: montserrat;
    padding: 10px 25px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
    border-radius: 0;
}
.btn-dark-bg:hover,
.btn-dark-bg:focus {
    background: #00bcd4;
    color: #fff;
    border: 1px solid #00bcd4;
}
/*END BTN STYLE*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 02. START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
.navbar-default {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    padding: 20px 0;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #00bcd4 !important;
    background-color: transparent;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    color: #00bcd4 !important;
    background-color: transparent;
}
.navbar-brand { padding: 0px }
.navbar-brand img { width: 150px }
@media only screen and (max-width:480px) { 
.navbar-brand img { width: 150px;margin-left:20px; }
}
.menu-top { background: none }
.menu-top li a {
    color: #f3f3f3  !important;
    font-family: "Montserrat",sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}
.menu-top li a:hover { color: #00bcd4!important }
@media only screen and (max-width:768px) { 
    .navbar-default .navbar-nav > li > a {
        margin-top: 10px;
        padding: 8px;
    }
}
@media only screen and (max-width:480px) { 
    .menu-top { background-color: #fff }
    .navbar-default .navbar-nav > li > a { color: #313131  !important }
}
.navbar-default.menu-shrink {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
    padding: 15px 0;
    width: 100%;
}
@media only screen and (max-width:480px) { 
    .menu-top {
        color: #fff !important;
        margin-left: 0px;
    }
}
.navbar-default.menu-shrink li a { color: #282828 !important }
.navbar-default.menu-shrink li a:hover { color: #00bcd4 !important }
.navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0 }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fff }
.navbar-default .navbar-toggle .icon-bar { background-color: #00bcd4 }
/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 03.START HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
.home_overlay {
    background: rgba(0,0,0,0.4) none repeat scroll 0 0;
    height: 100%;
}
.hero {
background: url(../img/bg/home-bg.jpg)no-repeat;
background-size:cover;
background-position: center center;
background-attachment:fixed;
height: 650px;
}
.hero-text h2 {
    color: #fff;
    font-size: 30px;
    letter-spacing: 1px;
    padding-top: 200px;
    text-transform: uppercase;
}
.hero-text h1 {
    color: #fff;
    font-size: 52px;
    line-height: 52px;
    text-transform: uppercase;
}
@media only screen and (max-width:768px) { 
    .hero-text h1 {
        font-size: 40px;
        line-height: 54px;
    }
}
@media only screen and (max-width:480px) { 
    .hero-text h1 {
        font-size: 34px;
        line-height: 45px;
    }
    .hero-text h2 { padding-top: 150px }
}
@media only screen and (max-width:360px) { 
    .hero-text h2 {
        font-size: 26px;
        line-height: 36px;
    }
    .hero-text h2 { padding-top: 100px }
}
@media only screen and (max-width:320px) { 
    .hero-text h2 {
        font-size: 20px;
        line-height: 36px;
    }
    .hero-text h2 { padding-top: 100px }
}
.hero-text p {
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 0;
    padding-bottom: 30px;
}
@media only screen and (max-width:480px) { 
.hero-text p{letter-spacing: 0px;}
}
.btn-home-bg {
    background: #00bcd4 none repeat scroll 0 0;
    border: 1px solid #00bcd4;
    border-radius: 0;
    color: #fff;
    font-family: "Montserrat",sans-serif;
    margin-right: 10px;
    padding: 10px 30px;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.btn-home-bg:hover,
.btn-home-bg:focus {
    background: #fff;
    border: 1px solid #fff;
    color: #222;
}
@media only screen and (max-width:320px) { 
    .btn-home-bg { margin-bottom: 20px }
}
/*START HOME SLIDESHOW*/
#home-slider {
    overflow: hidden;
    position: relative;
}
.slideshow-one {background: url(../img/bg/slideshow1.jpg)no-repeat;}
.slideshow-two {background: url(../img/bg/slideshow2.jpg)no-repeat;}
.slideshow-three {background: url(../img/bg/slideshow3.jpg)no-repeat;}
.caption {
    position: absolute;
    top: 15%;
    margin-top: -104px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 15;
    color: #fff;
}
.carousel-fade .carousel-inner .item {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition-property: opacity;
    transition-property: opacity;
    background-repeat: no-repeat;
    background-size: cover;
    height: 650px;
}
.carousel-fade .carousel-inner .item:after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.4);
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
    filter: alpha(opacity=100);
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
    filter: alpha(opacity=100);
}
.carousel-fade .carousel-control { z-index: 2 }
.left-control,
.right-control {
background: #00bcd4 none repeat scroll 0 0;
color: #fff;
font-size: 24px;
height: 51px;
line-height: 48px;
position: absolute;
text-align: center;
top: 50%;
transition: all 0.5s ease 0s;
width: 51px;
z-index: 20;
border-radius: 100px;
}
@media only screen and (max-width:480px) { 
    .left-control,
    .right-control { display: none }
}
.left-control { left: -51px }
.right-control { right: -51px }
.left-control:hover,
.right-control:hover {
    background-color: #fff;
    color: #222;
}
#home-slider:hover .left-control { left: 50px }
#home-slider:hover .right-control { right: 50px }
#home-slider .fa-angle-down {
    position: absolute;
    left: 50%;
    bottom: 50px;
    color: #fff;
    display: inline-block;
    width: 24px;
    margin-left: -12px;
    font-size: 24px;
    line-height: 24px;
    z-index: 999;
    -webkit-animation: bounce 3000ms infinite;
    animation: bounce 3000ms infinite;
}
/*END HOME SLIDESHOW*/

/*START HTML5 VIDEO*/
.html-video {
    top: 0%;
    left: 0%;
    max-height: 700px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.html-video:before {
    content: "";
    background: rgba(0,0,0,0.4) none repeat scroll 0 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.slider-caption {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 15;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
.slider-caption h2 { padding-top: 100px }
video { min-width: 100% }
/*END HTML5 VIDEO*/
/*
* ----------------------------------------------------------------------------------------
* 03.END HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 04.START ABOUT US DESIGN
* ----------------------------------------------------------------------------------------
*/
.about_us {
    padding-top: 100px;
    padding-bottom: 60px;
}
@media only screen and (max-width:768px) { 
    .about_us { padding-top: 0px }
}
.about_us h1 { color: #333 }
.about_us h1 span { color: #00bcd4 }
.about_us p { margin-bottom: 30px }
@media only screen and (max-width:480px) { 
.about_us p {text-align: justify;}
}
/* START SKILL DESIGN */
.progress-bar-text {
    color: #333;
    font-family: "Montserrat",sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.progress-bar-text span { float: right }
.progress-bar {
    background: #e8e8e9 none repeat scroll 0 0;
    box-shadow: 0 0 0;
    height: 6px;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
}
.progress-bar > span {
    background: #00bcd4 none repeat scroll 0 0;
    display: block;
    height: 100%;
    width: 0;
}
/* END SKILL DESIGN */
/*
* ----------------------------------------------------------------------------------------
* 04.END ABOUT US DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
 * ----------------------------------------------------------------------------------------
 * 05.START PORTFOLIO DESIGN
 * ----------------------------------------------------------------------------------------
 */
.grid figure {
    position: relative;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
}
.grid figure img {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.grid figure figcaption {
    padding: 20px;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}
.grid figure h4 {
    word-spacing: -0.15em;
    font-weight: 300;
}
.grid figure h4,
.grid figure p { margin: 0 }
.grid figure p {
    font-size: 16px;
    letter-spacing: 1px;
}
.grid figure p a { color: #fff }
figure.effect-sadie figcaption:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(28, 186, 200, 0) 0%, rgba(28, 186, 200, 0.8) 75%);
    background: -webkit-linear-gradient(top, rgba(28, 186, 200, 0) 0%, rgba(28, 186, 200, 0.9) 75%);
    background: linear-gradient(to bottom, rgba(28, 186, 200, 0) 0%, rgba(28, 186, 200, 0.9) 75%);
    content: '';
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
}
figure.effect-sadie h4 {
    background: #fff none repeat scroll 0 0;
    color: #222;
    font-size: 18px;
    left: 20%;
    letter-spacing: 1px;
    padding: 15px 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(0px, -50%, 0px);
            transform: translate3d(0px, -50%, 0px);
    -webkit-transition: -webkit-transform 0.35s ease 0s, color 0.35s ease 0s;
            transition: transform 0.35s ease 0s, color 0.35s ease 0s;
    width: 60%;
    opacity: 0;
    filter: alpha(opacity=0);
}
@media only screen and (max-width:768px) { 
    figure.effect-sadie h4 { font-size: 12px }
}
@media only screen and (max-width:480px) { 
    figure.effect-sadie h4 { font-size: 18px }
}
@media only screen and (max-width:320px) { 
    figure.effect-sadie h4 { font-size: 14px }
}
figure.effect-sadie figcaption:before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}
figure.effect-sadie:hover h4 {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
figure.effect-sadie:hover figcaption:before,
figure.effect-sadie:hover p {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.portfolio_btn { padding-top: 50px }

/*project modal*/
.modal-title {
  color: #333;
  margin: 0;
  text-transform: uppercase;
}
.modal-content{
	padding: 10px 30px;
	border-radius: 0px;
}
.modal-body{
	margin-bottom: 15px;
}
.modal-body h4{}
.modal-body p{
	margin: 10px 0px 15px;
}
.project-list {
margin: 30px 0;
}
.project-list label{
color: #333;
margin-bottom: 0;
margin-right: 20px;
width: 100px;
}
.project-list li{
font-family: "Merriweather",sans-serif;
padding: 7px 0;
font-size: 14px;
}
.project-list li a{
color: #777;
font-size: 13px;
transition: all 0.4s ease 0s;
}
.project-list li a:hover{color:#00bcd4;}
/*End project modal*/

/*
 * ----------------------------------------------------------------------------------------
 * 05.START PORTFOLIO DESIGN
 * ----------------------------------------------------------------------------------------
 */
/*
 * ----------------------------------------------------------------------------------------
 *  06.START PARTNER LOGO DESIGN
 * ----------------------------------------------------------------------------------------
 */
.partner { background: #f7f7f7 }
.company_logo img {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e8e8e9;
    height: 100px;
    opacity: 0.6;
    filter: alpha(opacity=60);
    padding: 10px;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
    width: 100%;
}
@media only screen and (max-width:768px) { 
    .company_logo img { margin-bottom: 20px }
}
/*
 * ----------------------------------------------------------------------------------------
 *  06.END PARTNER LOGO DESIGN
 * ----------------------------------------------------------------------------------------
 */
/*
* ----------------------------------------------------------------------------------------
* 07.START SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
.service{
background: url(../img/bg/service-bg.jpg)no-repeat;
background-size:cover;
background-position: center center;
background-attachment:fixed;
}
.service_overlay {
    background: rgba(28, 186, 200, 0.9) none repeat scroll 0 0;
    padding-top: 60px;
    padding-bottom: 30px;
}
.single_service {
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    margin-bottom: 30px;
    padding: 25px;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.single_service:hover {
    background: #fff;
    box-shadow: 0 11px 10px rgba(0, 0, 0, 0.1);
}
.single_service i {
    border: 5px solid #fff;
    border-radius: 50px;
    box-shadow: 0 0 1px 0 rgba(1, 1, 1, 0.4);
    color: #fff;
    font-size: 26px;
    height: 80px;
    margin-bottom: 10px;
    padding: 22px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 80px;
}
.single_service:hover i {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.color-icon-five { background: #01B59A }
.color-icon-six { background: #FF4C83 }
.color-icon-seven { background: #9E70FC }
.color-icon-eight { background: #35424F }
.color-icon-nine { background: #3CCD0F }
.color-icon-ten { background: #FC3950 }
.single_service h4 {
    color: #fff;
    font-weight: 700;
    text-transform: capitalize;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.single_service:hover h4 { color: #333 }
@media only screen and (max-width:768px) { 
    .single_service h4 { font-size: 15px }
}
.single_service p {
    color: #fff;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.single_service:hover p { color: #777 }
/*
* ----------------------------------------------------------------------------------------
* 07.END SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 08.START TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/
.team { padding-top: 60px }

.ms-staff-carousel{
	max-width:1170px;
	overflow: hidden;
	position: relative;
}

.ms-staff-carousel .ms-view{
	overflow:visible;
	background-color: transparent;
}
.ms-staff-carousel .ms-nav-prev,
.ms-staff-carousel .ms-nav-next {
    background: url(../img/arrows.png) white no-repeat -7px -57px;
    width: 35px;
    height: 40px;
    left: -35px;
    margin-top: -17px;
    box-shadow: 0px 1px 0px 0px rgb(190, 190, 190);
    position: absolute;
    top:50%;
    cursor: pointer;
}

.ms-staff-carousel .ms-nav-next {
	background-position: -6px -7px;
	right:-35px;
	left:auto;
}

.ms-staff-carousel .ms-staff-info{
	font-family: 'Roboto Condensed', sans-serif;
	text-align: center;
	max-width: 600px;
	margin-top:30px;
	min-height:220px;
	color:#222222;
}
.ms-staff-carousel .ms-staff-info h3{
margin: 0;
padding-bottom: 10px;
	}
	
.ms-staff-carousel .ms-staff-info h4{
color: #777;
margin: 0;
padding-bottom: 15px;
text-transform: capitalize;
}
	
.ms-staff-carousel .ms-staff-info .email a{text-decoration: none; color:#a8e12a;}
.ms-staff-carousel .ms-staff-info.email,.ms-staff-info p {
	    margin: 4px;
	     font-size: 11pt;
	}

.ms-staff-carousel.ms-round .ms-slide-bgcont {
	border-radius: 5000px;
	border: solid 8px rgb(230, 230, 230);
	margin: 0 -8px;
}

.ms-staff-carousel.ms-round .ms-nav-prev,
.ms-staff-carousel.ms-round .ms-nav-next {
    background-color:transparent;
    box-shadow : none;
    left:-45px;
 }
 
.ms-staff-carousel.ms-round .ms-nav-next {
    left:auto;
    right:-45px
}
.ms-staff-carousel.ms-round .ms-slide-bgcont {
  border-radius: 5000px;
  border: solid 8px rgb(230, 230, 230);
  margin: 0 -8px;
}
.team .team-box {
    text-align: center;
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 4px;
}
.team .team-box img {
    display: block;
    margin: 0 auto;
}
.team .team-box h4 {
    margin-bottom: 0px;
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 15px;
}
.team .team-box em {
    display: block;
    margin-bottom: 15px;
    margin-top: 10px;
}
.ms-socials { }
.ms-socials li { }
.ms-socials li a { }
.ms-socials li a i {
    color: #fff;
    display: block;
    font-size: 20px;
    height: 45px;
    line-height: 45px;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
    width: 45px;
    box-shadow: 0 0 0 7px transparent;
}
.facebook { background: #5D82D1 }
.facebook:hover { box-shadow: 0 0 0 0px #5D82D1 }
.twitter { background: #40BFF5 }
.twitter:hover { box-shadow: 0 0 0 0px #40BFF5 }
.youtube { background: #CC181E }
.youtube:hover { box-shadow: 0 0 0 0px #CC181E }
.linkedin { background: #238CC8 }
.linkedin:hover { box-shadow: 0 0 0 0px #238CC8 }

/*
* ----------------------------------------------------------------------------------------
* 08.END TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 09. START TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
.testimonials {
    background: #f7f7f7;
    position: relative;
    height: auto;
    z-index: 1;
    padding: 60px 0;
}
.testimonials .flexslider {
    background-color: #fff;
    border: 0 none;
    box-shadow: 0 7px 33px 0 rgba(0, 0, 0, 0.12);
    margin: 0;
}
.testimonials .flexslider .testi-slider-item {
    padding: 30px 60px;
    text-align: center;
}
.testimonials .flexslider .testi-slider-item img {
    border-radius: 50%;
    height: 100px;
    margin: 20px auto;
    width: 100px;
}
.testimonials .flexslider .testi-slider-item h6 {
    color: #222;
    font-size: 14px;
    margin-bottom: 0;
}
.testimonials .flexslider .testi-slider-item p {
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
}
@media only screen and (max-width:360px) { 
.testimonials .flexslider .testi-slider-item p  {line-height: 24px;font-size: 16px; }
}
.testimonials .flex-direction-nav a {
    background: #00bcd4 none repeat scroll 0 0;
    border-radius: 100px;
    box-shadow: 0 10px 11px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    cursor: pointer;
    display: block;
    height: 45px;
    line-height: 50px;
    margin: -20px 0 0;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: none !important;
    top: 50%;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    width: 45px;
    z-index: 10;
}
.testimonials .flex-direction-nav a i {
    display: inline-block;
    font-size: 25px;
}
.testimonials .flex-direction-nav a:before { display: none }
.testimonials .flex-direction-nav a.flex-next:before { display: none }
.testimonials .flex-control-paging li a {
    background: #222 none repeat scroll 0 0;
    border: 1px solid #222;
    border-radius: 20px;
    cursor: pointer;
    display: block;
    height: 6px;
    text-indent: -9999px;
    width: 6px;
}
.testimonials .flex-control-paging li a:hover {
    background: #00bcd4 none repeat scroll 0 0;
    border-color: #00bcd4;
}
.testimonials .flex-control-paging li a.flex-active {
    background: #00bcd4 none repeat scroll 0 0;
    border-color: #00bcd4;
    cursor: default;
}
.flex-control-nav {display: none;}
/*
* ----------------------------------------------------------------------------------------
* 09. END TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 10.START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
.single_blog_title {
    border-bottom: 1px solid #e8e8e9;
    padding-bottom: 10px;
}
.single_blog_title img {
    border: 5px solid #e8e8e9;
    border-radius: 100px;
    height: 80px;
    width: 80px;
}
.single_blog_title h5 {
    padding-top: 15px;
    color: #333;
}
@media only screen and (max-width:768px) { 
    .single_blog_title h5 { font-size: 12px }
}
.single_blog_title h5 { color: #333 }
.single_blog_title p {
  font-weight: 600;
  margin-bottom: 0;
}
.single_blog_content h4 {
    color: #333;
    font-weight: 700;
    line-height: 26px;
    margin-bottom: 0;
    margin-top: 0px;
    padding: 10px 0;
    text-transform: uppercase;
    -webkit-transition: all 0.6s ease 0s;
            transition: all 0.6s ease 0s;
}
.single_blog_content img { padding-top: 10px }
@media only screen and (max-width:768px) { 
.single_blog_mt { margin-top: 60px }
}
.single_blog_comment {
    border-top: 1px solid #e8e8e9;
    overflow: hidden;
    margin-top: 15px;
}
.single_blog_comment i {
    color: #00bcd4;
    margin-right: 10px;
}
/*
* ----------------------------------------------------------------------------------------
* 10. END BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 11.START NEWSLETTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.newsletter {
    background: #f7f7f7;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}
@media only screen and (max-width:768px) { 
    .newsletter { font-size: 18px }
}
.newsletter_title {
    margin: 0 0 20px;
    color: #333;
}
@media only screen and (max-width:480px) { 
.newsletter_title{ font-size: 18px }
}
.subscribe_input {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
    padding: 40px;
}
@media only screen and (max-width:768px) { 
    .subscribe_input input {
        float: left;
        width: 100%;
    }
}
@media only screen and (max-width:480px) { 
    .subscribe_input input {
        float: none;
        width: 100%;
    }
}
.subscribe_input button {
    background: #00bcd4 none repeat scroll 0 0;
    border: 1px solid #00bcd4;
    border-radius: 0;
    margin-top: 20px;
    color: #fff;
}
.subscribe_input button:hover {
    background: #222;
    border: 1px solid #222;
    color: #fff;
}
/*
* ----------------------------------------------------------------------------------------
* 11.END NEWSLETTER DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
 * ----------------------------------------------------------------------------------------
 *  12.START CONTACT ADDRESS & CONTACT FORM DESIGN
 * ----------------------------------------------------------------------------------------
*/
.contact_area{
background: url(../img/bg/contact-bg.jpg)no-repeat;
background-size:cover;
background-position: center center;
background-attachment:fixed;
}
.contact_overlay { background: rgba(5, 12, 26, 0.6) none repeat scroll 0 0 }
.contact {
    background: #fff;
    padding: 30px;
}
.contact_address p {
    color: #333;
    margin-bottom: 0;
    padding-bottom: 10px;
    font-family: "Merriweather",sans-serif;
    font-size: 14px;
}
@media only screen and (max-width:360px) { 
.contact_address p  { font-size: 12px }
}
@media only screen and (max-width:320px) { 
.contact_address p  { font-size: 10px }
}
.contact_address h4 {
    color: #333;
    margin: 0;
    padding-bottom: 60px;
}
.form-control {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #e8e8e9;
    border-radius: 0;
    box-shadow: none;
    color: #333;
    font-family: "Merriweather",sans-serif;
    font-size: 12px;
    height: 45px;
}
.form-control:hover,
.form-control:focus {
    border: 1px solid #00bcd4;
    box-shadow: none;
    outline: 0 none;
}
.btn-contact-bg {
    background: #00bcd4 none repeat scroll 0 0;
    border-radius: 0;
    color: #fff;
    font-family: "Montserrat",sans-serif;
    font-size: 16px;
    padding: 10px 25px;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.btn-contact-bg:hover,
.btn-contact-bg:focus {
    background: #222;
    border: 1px solid #222;
    color: #fff;
}
@media only screen and (max-width:320px) { 
    .btn-contact-bg { padding: 10px 25px }
}
.mb0 { margin-bottom: 0 }
/*
 * ----------------------------------------------------------------------------------------
 *  12.END CONTACT ADDRESS & CONTACT FORM DESIGN
 * ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 13.START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.footer { background-color: #09121b }
.footer_logo img {
    display: inline;
    padding-bottom: 20px;
    width: 300px;
}
@media only screen and (max-width:480px) { 
    .footer_social { margin-top: 30px }
}
.footer_social ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.footer_social ul li {
    margin: 2px;
    display: inline-block;
}
.footer_social ul li a {
    box-shadow: 0 0 0 7px transparent;
    color: #fff;
    display: block;
    font-size: 16px;
    height: 45px;
    line-height: 25px;
    padding: 9px 12px;
    text-align: center;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 45px;
}
@media only screen and (max-width:768px) { 
    .footer_social ul li a { font-size: 12px }
}
@media only screen and (max-width:360px) { 
    .footer_social ul li a { font-size: 14px }
}
@media only screen and (max-width:320px) { 
    .footer_social ul li a {
        font-size: 14px;
        height: 40px;
        width: 40px;
        line-height: 20px;
    }
}
.footer_social ul li a:hover { color: #fff }
.f_facebook:hover {
    background: #5D82D1;
    box-shadow: 0 0 0 0px #5D82D1;
}
.f_twitter:hover {
    background: #40BFF5;
    box-shadow: 0 0 0 0px #40BFF5;
}
.f_google:hover {
    background: #EB5E4C;
    box-shadow: 0 0 0 0px #EB5E4C;
}
.f_linkedin:hover {
    background: #238CC8;
    box-shadow: 0 0 0 0px #238CC8;
}
.f_youtube:hover {
    background: #CC181E;
    box-shadow: 0 0 0 0px #CC181E;
}
.f_skype:hover {
    background: #00AFF0;
    box-shadow: 0 0 0 0px #00AFF0;
}
.footer_copyright {
    color: #aaa;
    margin: 0;
    padding-top: 10px;
    font-family: "Merriweather",sans-serif;
    font-size: 14px;
}
@media only screen and (max-width:480px) { 
    .footer_copyright {
        float: none !important;
        text-align: center;
    }
}
/*
* ----------------------------------------------------------------------------------------
* 13.END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
 * ----------------------------------------------------------------------------------------
 *  14.START SECTION TOP DESIGN
 * ----------------------------------------------------------------------------------------
 */
.section-top-title h2 {
    color: #fff;
    font-size: 45px;
    margin: 0;
    text-transform: uppercase;
}
@media only screen and (max-width:320px) { 
    .section-top-title h2 { font-size: 40px }
}
.section-top-title {
    padding-bottom: 60px;
    padding-top: 100px;
}
.section-top-title,
.breadcrumb {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    margin-bottom: 0;
}
.section-top-title ol li { color: #fff!important }
.section-top-title ol li a { color: #fff!important }
.section-top-title ol li a:hover { color: #1CBAC8!important }
/*
 * ----------------------------------------------------------------------------------------
 * 14.END SECTION TOP DESIGN
 * ----------------------------------------------------------------------------------------
*/