/*
Author       : Syed Ekram.
Template Name: Sonakshi - One Page Bootstrap template
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. START HEADER TOP DESIGN
    03. START HOME DESIGN
    04. START BOOTSTRAP NAVIGATION OVERRIDES
    05. START ABOUT DESIGN
    06. START PROMOTION DESIGN
    07. START TEAM DESIGN
    08. START COUNTER DESIGN
    09. START SERVICE DESIGN
    10. START HOW IT WORKS DESIGN
    11. START TESTIMONIAL DESIGN
    12. START PRICING DESIGN
    13. START NEWSLETTER DESIGN
    14. START PORTFOLIO DESIGN
    15. START COMPANY PARTNER LOGO
    16. START BLOG DESIGN
    17. START CONTACT FORM DESIGN
    18. START FOOTER DESIGN
  =============================================================*/
/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
body {
  font-family: "Open Sans", sans-serif;
  background: #fff;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 2.2rem;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #888;
}
html,
body { height: 100% }
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0px;
  margin-top: 0px;
  font-family: "Dosis", sans-serif;
  color: #333;
  font-weight: 400;
}
a {
    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
}
p {
    margin-bottom: 0;
}
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: 99999;
}

.status-mes {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    font-size: 10px;
    text-indent: -12345px;
    border-top: 7px solid rgba(0, 0, 0, 0.08);
    border-right: 7px solid rgba(0, 0, 0, 0.08);
    border-bottom: 7px solid rgba(0, 0, 0, 0.08);
    border-left: 7px solid #000;
    border-radius: 50%;
    -webkit-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;
    z-index: 10000;
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.no-padding { padding: 0 }
/*END PRELOADER DESIGN*/
.section-padding { padding: 80px 0 }
/*START SECTION TITLE DESIGN*/
.section-title { margin-bottom: 60px }
.section-title  h2 {
font-weight: 500;
letter-spacing: 2px;
margin-top: 0;
text-transform: capitalize;
}
.section-title span {
background: #a8a8a8 none repeat scroll 0 0;
display: block;
height: 2px;
margin: 20px auto 0;
overflow: hidden;
width: 50px;
}
/*END SECTION TITLE DESIGN*/
/*START SCROLL TO TOP*/
.topcontrol {
background: #083c5a none repeat scroll 0 0;
border-radius: 5px;
bottom: 5px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
color: #fff;
cursor: pointer;
font-size: 22px;
height: 35px;
line-height: 33px;
opacity: 1;
position: fixed;
right: 5px;
text-align: center;
transition: all 0.2s ease 0s;
width: 35px;
}
.topcontrol:hover {
    background: #222;
    color: #fff;
}
/*END SCROLL TO TOP*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 02.START HEADER TOP DESIGN
* ----------------------------------------------------------------------------------------
*/
.header_area {
  left: 0;
  padding: 8px 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
}
.top-info-left a {
	display: inline-block;
	font-size: 15px;
	color: #fff;
	margin: 5px 10px 5px 0;
}
.top-info-left a i{ margin-right: 5px }
.top-info-right ul { float: right }

@media only screen and (max-width:480px) { 
.top-info-right ul { float: left }
}

.top-info-right li { float: left }
.top-info-right li a { display: block }
.top-info-right li a i {
	text-align: center;
	line-height: 25px;
	font-size: 16px;
	height: 25px;
	margin: 2px;
	width: 25px;
	color: #fff;
    -webkit-transition: all 0.36s ease-out;
            transition: all 0.36s ease-out;
}
.top-info-right li a i:hover {
color:#083c5a;
}
/*
* ----------------------------------------------------------------------------------------
* 02.END HEADER TOP DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 03.START HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.home_bg {
    height: 700px;
    position: relative;
}
.home_bg:before {
    background: rgba(0, 0, 0, 0.3);
    content: "";
    height: 100%;
    filter: alpha(opacity=80);
    position: absolute;
    width: 100%;
}
.hero-text h2 {
color: #fff;
font-family: montserrat,sans-serif;
font-size: 54px;
font-weight: 500;
line-height: 70px;
padding-top: 250px;
text-transform: uppercase;
}
@media only screen and (max-width:768px) { 
.hero-text h2 {
    font-size: 40px;
    line-height: 40px;
}
}
@media only screen and (max-width:480px) { 
    .hero-text h2 {
		padding-top: 200px;
        font-size: 30px;
        line-height: 40px;
    }
}
@media only screen and (max-width:360px) { 
    .hero-text h2 {
        font-size: 26px;
        line-height: 34px;
    }
}
.hero-text p {
color: #fff;
font-size: 20px;
text-transform: capitalize;
}
.home_btn{
margin-top: 30px;
}
.home_btn a {
background: transparent none repeat scroll 0 0;
border: 2px solid #fff;
border-radius: 2px;
display: inline-block;
font-family: "Dosis",sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 2px;
margin: 0 10px 15px;
padding: 9px 30px;
text-transform: uppercase;
transition: all 0.3s ease 0s;
}
.home_btn a:hover{
background: transparent none repeat scroll 0 0!important;
border: 2px solid #fff!important;
color:#fff!important;
}
.home_btn_color_one{background: #fff none repeat scroll 0 0 !important;color: #333;}
.home_btn_color_two{background: #083c5a none repeat scroll 0 0 !important;border: 2px solid #083c5a !important;color: #fff;}

.welcome-area,
.welcome-slider-area,
.welcome-slider-area div { height: 700px }
.welcome-slider-area div.single-slide-item-tablecell,
.welcome-slider-area div.single-slide-item-tablecell div { height: auto }
.single-slide-item-table {
    display: table;
    text-align: center;
    width: 100%;
}
.single-slide-item-tablecell {
    display: table-cell;
    vertical-align: middle;
}
.single-slide-item {
    position: relative;
    z-index: 1;
}
.single-slide-item:after {
    position: absolute;
    background: rgba(0,0,0,0.3);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
}
.slide-1 {
    background: url(../img/bg/slide1.jpg) scroll 0 0;
    background-size: cover;
}
.slide-2 {
    background: url(../img/bg/slide2.jpg) scroll 0 0;
    background-size: cover;
}
.slide-3 {
    background: url(../img/bg/slide3.jpg) scroll 0 0;
    background-size: cover;
}
.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.single-slide-item h2 {
color: #fff;
font-size: 54px;
font-weight: 500;
letter-spacing: 2px;
line-height: 70px;
text-transform: capitalize;
}
@media only screen and (max-width:768px) { 
.single-slide-item h2 {
    font-size: 40px;
    line-height: 40px;
}
}
@media only screen and (max-width:480px) { 
.single-slide-item h2 {
		padding-top: 200px;
        font-size: 30px;
        line-height: 40px;
    }
}
@media only screen and (max-width:360px) { 
.single-slide-item h2 {
        font-size: 26px;
        line-height: 34px;
    }
}
.single-slide-item p {
color: #fff;
font-size: 20px;
text-transform: capitalize;
}
.carousel-indicators-slider { bottom: 30px !important }
.home_video{height: 750px;position:relative;}
.home_video:before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
  content: "";
  left: 0;
  top: 0;
}
.html-video {
    top: 0%;
    left: 0%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.slider-caption {
    position: absolute;
    top: 33%;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 15;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
video { min-width: 100% }
/*
* ----------------------------------------------------------------------------------------
* 03.END HOME DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 04.START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/

.navbar-default {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
border-radius: 0;
margin-bottom: 0;
padding: 10px 0;
transition: all 0.4s ease-in-out 0s;
width: 100%;
}
.stick {
    position:fixed;
    top:0px;
	z-index:999999;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #083c5a !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: #171717 !important;
    background-color: transparent;
}
.navbar-brand { padding: 0px }
.navbar-brand img {
    width: 150px;
	transition: all 0.3s ease 0s;
}
@media only screen and (max-width:768px) { 
.navbar-brand img{margin-left: 10px;}
}
.navbar-default.menu-shrink .navbar-brand img {
    width: 150px;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: #fff }
.menu-top li a {
color: #fff!important;
font-family: montserrat,sans-serif;
font-size: 12px;
text-transform: uppercase;
}
.menu-top li a:hover { color: #083c5a!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:rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
padding: 10px 0;
width: 100%;
 margin-top:0px
}
@media only screen and (max-width:480px) { 
    .menu-top {
        color: #fff !important;
        margin-left: 0px;
    }
}
.navbar-default.menu-shrink li a {color:#333 !important; }
.navbar-default.menu-shrink li a:hover { color: #083c5a !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: #083c5a }
/*
* ----------------------------------------------------------------------------------------
* 04.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 05.START ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/

.flexslider {
border: medium none;
margin: 0;
padding: 0 20px;
}
.flexslider .testi-slider-item {
    padding:0px 60px;
    text-align: center;
}

.flexslider .testi-slider-item h4 {
font-size: 22px;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 40px;
margin-top: 0;
text-transform: uppercase;
}
.flexslider .testi-slider-item p {
margin-bottom: 0;
font-size: 18px;
line-height: 30px;
}
@media only screen and (max-width:360px) { 
    .flexslider .testi-slider-item p {
        line-height: 24px;
        font-size: 16px;
    }
}
.flex-direction-nav a {
background: #fff none repeat scroll 0 0;
border-radius: 2px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
color: #333;
cursor: pointer;
display: block;
height: 45px;
line-height: 29px;
margin: -20px 0 0;
opacity: 0;
overflow: hidden;
padding: 10px;
position: absolute;
text-align: center;
text-decoration: none;
text-shadow: none !important;
top: 60%;
transition: all 0.3s ease 0s;
width: 45px;
z-index: 10;
}
.flex-direction-nav a:hover {background: #083c5a none repeat scroll 0 0;color:#fff; }
.flex-direction-nav a i {
    display: inline-block;
    font-size: 20px;
}
.flex-direction-nav a:before { display: none }
.flex-direction-nav a.flex-next:before { display: none }
.flex-control-nav {
  display: none;
}
/* START SKILL DESIGN */
.skills_weight {
text-align: left;
}

.skills_weight .skills_map {
list-style: none;
}

.skills_weight li {
position: relative;
margin-bottom: 20px;
background: #f9f9f9;
height: 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}

.bar-expand {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding-right: 24px;
background: #083c5a;
display: inline-block;
height: 20px;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px
}

.skills_weight li em {
color: #fff;
font-size: 14px;
font-weight: normal;
letter-spacing: 1px;
padding: 0 12px;
position: relative;
text-transform: uppercase;
top: -2px;
}
.html {
width: 90%;
-moz-animation: linux 2s ease;
-webkit-animation: linux 2s ease
}

.wordpress {
width: 70%;
-moz-animation: degital 2s ease;
-webkit-animation: degital 2s ease;
}

.degital {
width: 65%;
-moz-animation: bash 2s ease;
-webkit-animation: bash 2s ease;
}

.branding {
width: 80%;
-moz-animation: aws 2s ease;
-webkit-animation: aws 2s ease;
}
/* END SKILL DESIGN */
/*
* ----------------------------------------------------------------------------------------
* 05.END ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 06.START PROMOTION DESIGN
* ----------------------------------------------------------------------------------------
*/


.promotion {
padding: 120px 0;
position: relative;
}
.promotion:before {
    background: rgba(15, 22, 30, 0.6) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    position: absolute;
    top: 0;
    width: 100%;
}
.promotion-container{}
.promotion-container h1{color:#fff;margin-top:0;margin-bottom:30px;}
.promotion_btn a {
background: transparent none repeat scroll 0 0;
border: 2px solid #fff;
border-radius: 2px;
display: inline-block;
color:#fff;
font-family: "Dosis",sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 2px;
margin: 0 10px 15px;
padding: 9px 30px;
text-transform: uppercase;
transition: all 0.3s ease 0s;
}
.promotion_btn a:hover{
background:#fff;
border: 2px solid #fff;
color:#333;
}

/*
* ----------------------------------------------------------------------------------------
* 06.END PROMOTION DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 07.START TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/
.team { padding-top: 80px }

.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{
	text-align: center;
	max-width: 600px;
	margin-top:30px;
	min-height:190px;
	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 {
background: #f5f5f5 none repeat scroll 0 0;
border: 1px solid #f5f5f5;
border-radius: 100px;
color: #333;
display: block;
font-size: 18px;
height: 45px;
line-height: 45px;
transition: all 0.4s ease 0s;
width: 45px;
}
.facebook:hover { background: #5D82D1;color:#fff;border: 1px solid #5D82D1; }
.twitter:hover { background: #40BFF5;color:#fff;border: 1px solid #40BFF5; }
.youtube:hover { background: #CC181E;color:#fff; border: 1px solid #CC181E;}
.linkedin:hover { background: #238CC8;color:#fff;border: 1px solid #238CC8;}
/*
* ----------------------------------------------------------------------------------------
* 07.END TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 08.START COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.template_counter{background:#083c5a;}
.single_counter{}
@media only screen and (max-width:480px) { 
.single_counter{margin-bottom:40px;}
}
.single_counter h1{color:#fff;margin-bottom: 0;}
.single_counter span{
background: #fff none repeat scroll 0 0;
display: block;
height: 2px;
margin: 10px auto;
width: 60px;
}
.single_counter h5{
color: #fff;
margin-bottom: 0;
font-size: 18px;
letter-spacing: 1px;
}
/*
* ----------------------------------------------------------------------------------------
* 08.END COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 09.START SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
.our_service{padding-top:80px;}
.single_service{
padding: 60px 40px;
}
.single_service_color_one{background:#26547C;}
.single_service_color_two{background:#EF476F;}
.single_service_color_three{background:#06CA75;}
.single_service_color_four{background:#00D8FF;}
.single_service_color_five{background:#0BB1BD;}
.single_service_color_six{background:#D747CB;}
.single_service i{
color: #fff;
font-size: 40px;
margin-bottom: 15px;
}
.single_service h4{
color: #fff;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 15px;
margin-top: 0;
font-size: 22px;
}
.single_service p{
color:#fff;
margin-bottom: 0px;
}
/*
* ----------------------------------------------------------------------------------------
* 09.END SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 10.START HOW IT WORKS DESIGN
* ----------------------------------------------------------------------------------------
*/
.about_video {
padding-bottom: 120px;
padding-top: 100px;
position: relative;
}
.about_video:before {
    background: rgba(15, 22, 30, 0.6) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    position: absolute;
    top: 0;
    width: 100%;
}
.video-container h1 {
color: #fff;
font-weight: 500;
margin-bottom: 0;
margin-top: 110px;
text-transform: capitalize;
}
@media only screen and (max-width:320px) { 
    .video-container h1 { font-size: 20px }
}
.play-video {
border: 5px solid #fff;
border-radius: 500px;
cursor: pointer;
height: 100px;
left: 51%;
margin-left: -63px;
position: absolute;
transition: all 0.2s ease 0s;
width: 100px;
}
@media only screen and (max-width:768px) { 
.play-video{ margin-left: -63px;}
}
@media only screen and (max-width:480px) { 
.play-video{ margin-left: -55px;}
}
@media only screen and (max-width:375px) { 
.play-video{ margin-left: -53px;}
}
.video-container a { display: inline-block }
.video-container a:hover .play-video {
    background: #083c5a;
    color: #fff;
}
.video-container a:hover .fa-play { color: #fff }
.play-video .fa-play {
color: #fff;
font-size: 40px;
left: 34px;
position: absolute;
top: 26px;
}
.video-modal-content {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  box-shadow: none;
  margin: 100px auto auto;
  text-align: center;
  width: 720px;
}
.video-modal-content iframe { border: none }

/*
* ----------------------------------------------------------------------------------------
* 10.END HOW IT WORKS DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 11.START TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
.testimonial-text i{
color: #083c5a;
font-size: 60px;
margin-bottom: 20px;
}
.testimonial-text h4 {
font-size: 24px;
margin-bottom: 15px;
text-transform: capitalize;
font-weight: 500;
}
.testimonial-text h5{
letter-spacing: 1px;
margin-bottom: 15px;
text-transform: uppercase;
} 
.testimonial-text p {
font-size: 18px;
line-height: 28px;
margin-bottom: 20px;
}
.carousel-indicators li {
    border: 1px solid #083c5a;
    border-radius: 12px;
    height: 12px;
    margin: 0 1px;
    width: 5px;
    background: #083c5a;
}
.carousel-indicators .active {
  background-color: #083c5a;
  height: 18px;
  margin: 0 1px ;
  width: 5px;
}
.site-wrapper { margin-bottom: 65px }
#team__carousel { margin-bottom: 70px }
#team__carousel .carousel-indicators { bottom: -80px }
.carousel-control { display: none }
/*
* ----------------------------------------------------------------------------------------
* 11.END TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/ 
/*
* ----------------------------------------------------------------------------------------
* 12.START PRICING DESIGN
* ----------------------------------------------------------------------------------------
*/
.pricing-table {
    background-color: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    position: relative;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
@media only screen and (max-width:480px) { 
    .pricing-table { margin-bottom: 40px }
}
.pricing-table.active { box-shadow: 0 0 4px rgba(0, 0, 0, 0.1) }
.pricing-table h3 {
border-bottom: 1px dashed #eee;
color: #333;
font-size: 20px;
margin-bottom: 25px;
margin-top: 0;
padding: 25px 0;
text-align: center;
text-transform: uppercase;
}
.price {
    border: 1px solid #eee;
    border-radius: 500px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    display: inline-block;   
    font-size: 14px;
    height: 124px;
    line-height: 26px;
    margin-bottom: 30px;
    text-transform: uppercase;
    width: 124px;
}
.color-one {
    background: #083c5a;
    color: #fff;
}
.color-two {
    background: #083c5a;
    color: #fff;
}
.color-three {
    background: #083c5a;
    color: #fff;
}
.color-four {
    background: #083c5a;
    color: #fff;
}
.price span {
    display: block;
    font-size: 32px;
    margin-top: 39px;
}
.pricing-list {
    border-top: 1px dashed #eee;
    list-style: outside none none;
    margin-bottom: 0;
    text-align: center;
}
.pricing-list li {
    border-bottom: 1px dashed #eee;
    color: #333;
    font-size: 14px;
    padding: 10px 15px;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.pricing-list li:hover { background: rgba(0,0,0,0.02) }
.pricing-btn { padding: 20px 0 }
.pricing-btn  a {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid #eee;
border-radius: 100px;
color: #333;

font-weight: 300;
padding: 8px 30px;
text-transform: uppercase;
transition: all 0.2s ease 0s;
}
.pricing-btn  a:hover {
    background: #083c5a;
    border: 1px solid #083c5a;
    color: #fff;
}
/*
* ----------------------------------------------------------------------------------------
* 12.END PRICING DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 13.START NEWSLETTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.newsletter { position: relative }
.newsletter:before {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.signup_form h3 {
color: #fff;
font-size: 36px;
letter-spacing: 1px;
margin-bottom: 30px;
margin-top: 0;
text-transform: capitalize;
}
.signup_form input {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-color: -moz-use-text-color -moz-use-text-color #fff;
border-radius: 0;
border-style: none none solid;
border-width: 0 0 1px;
box-shadow: none;
color: #fff;
margin-bottom: 30px;
}
.signup_form input:focus{box-shadow: none;}
.signup_form button {
    background: #083c5a none repeat scroll 0 0;
    border-radius: 0;
    box-shadow: 0 11px 10px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
    
    font-size: 14px;
    padding: 10px 30px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
}
.signup_form button:hover {
    background: #fff;
    color: #333;
}
/*
* ----------------------------------------------------------------------------------------
* 13.END NEWSLETTER DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 14.START PORTFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/
.template_portfolio{padding-bottom: 50px;
padding-top: 80px;}
.single_project {
  padding-bottom: 40px;
}
.single_our_work{
	margin-bottom:30px;
	overflow: hidden;
	text-align: center;
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
.sing_work_photo{
	position: relative;
}

.single_our_work img{
	width: 100%;
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
}

.single_our_work figure{
	margin-bottom: 0;	
}
.sing_work_text_link{
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	color: #fff;
	background: rgba(0,0,0, 0.6);
	-webkit-transition: .5s;
	transition: .5s;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	visibility: hidden;
}
.sing_work_content_wrap{
	display: table;
	height: 100%;
	width: 100%;
}
.sing_work_content{
	display: table-cell;
	vertical-align: middle;
}
.sing_work_text_link h5{
color: #fff;
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
margin-top: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}

.sing_link_img a i.fa{
	font-size: 14px;	
}
.sing_link_img a{
	background: #083c5a none repeat scroll 0 0;
	border: 1px solid #083c5a;
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	height: 40px;
	line-height: 39px;
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	width: 40px;	
}
.sing_link_img a:hover{	
	background: #fff none repeat scroll 0 0;
	border-color: #fff;
	color: #083c5a;
}
.sing_link_img a.search{
	margin-right: 16px;
}
.single_our_work:hover  .sing_link_img a.search{
	-webkit-animation: slideInDown 800ms ease-in-out;
	        animation: slideInDown 800ms ease-in-out;
}
.single_our_work:hover  .sing_link_img a.link{
	-webkit-animation: slideInDown 800ms ease-in-out;
	        animation: slideInDown 800ms ease-in-out;
}
.single_our_work:hover{
	background: #ff5f83;
	color: #fff;
}
.single_our_work:hover .sing_work_text_link{
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	visibility: visible;
}

/*project modal*/
.modal-title {
  color: #333;
  margin: 0;
  text-transform: uppercase;
}
.modal-content {
  border-radius: 0;
  margin-top: 80px;
  padding: 10px 30px;
}
.modal-body{
	margin-bottom: 15px;
}
.modal-body p{
margin: 20px 0;
}
.project-list {
margin: 30px 0;
}
.project-list label{
color: #333;
margin-bottom: 0;
margin-right: 20px;
width: 100px;
}
.project-list li{
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:#083c5a;}
/*End project modal*/
/*
* ----------------------------------------------------------------------------------------
* 14.END PORTFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 15.START COMPANY PARTNER LOGO
* ----------------------------------------------------------------------------------------
*/
.partner-logo { background: #083c5a }
.partner { text-align: center }
/*
* ----------------------------------------------------------------------------------------
* 15.END COMPANY PARTNER LOGO
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 16.START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
.template_blog{background:#f9f9f9;}
.single_blog_header{
margin-bottom: 20px;
overflow: hidden;}

.single_blog_header h3{
float: left;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 0;
margin-top: 5px;
}
@media only screen and (max-width:768px) { 
.single_blog_header h3{margin-bottom: 20px;float: none;}
}
.single_blog_header span{
float: right;
background: #083c5a;
color: #fff;
padding: 8px 15px ;
}
@media only screen and (max-width:768px) { 
.single_blog_header span{float: left;}
}
.single_blog{
background: #fff none repeat scroll 0 0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
padding: 20px;
}
@media only screen and (max-width:480px) { 
.single_blog {margin-bottom: 40px;}
}
.single_blog p{
margin: 15px 0;
}
.btn-blog-bg {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid #eee;
border-radius: 30px;
color: #333;
float: right;

font-size: 14px;
padding: 10px 30px;
text-transform: uppercase;
transition: all 0.2s ease 0s;
}
.btn-blog-bg:hover,
.btn-blog-bg:focus {
    background: #083c5a;
    border: 1px solid #083c5a;
    color: #fff;
}
/*START BLOG SIDEBAR DESIGN*/
.blog_sidebar_title {
border-bottom: 1px solid #eee;
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
margin-top: 0;
padding-bottom: 10px;
}
.blog_search,
.latest_blog,
.video_post,
.categories { margin-bottom: 60px }
@media only screen and (max-width:768px) { 
    .blog_search { margin-top: 60px }
}
.blog_search input {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #eee;
    border-radius: 0 !important;
    color: #161616;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.single_latest_blog { overflow: hidden }
.single_latest_blog_mt { margin-top: 20px }
.single_latest_blog img {
    border: 3px solid #083c5a;
    float: left;
    height: 80px;
    margin-right: 15px;
    overflow: hidden;
    width: 80px;
}
.single_latest_blog h4 {
    color: #161616;
    font-size: 16px;
    margin: 10px 0 0;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.single_latest_blog:hover h4 { color: #083c5a }
.single_latest_blog span { color: #161616 }
.categories ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.categories ul li { }
.categories ul li a {
    color: #333;
    display: block;
    font-size: 14px;
    padding: 5px 0;
}
.categories ul li a:hover { color: #083c5a }
.categories ul li a i { margin-right: 10px }
.video_post iframe {
    width: 100%;
    height: 220px;
    border: medium none;
}
.tag a {
border: 1px solid #eee;
color: #161616;
display: block;
float: left;
font-size: 12px;
font-weight: 500;
margin: 4px;
padding: 8px 18px;
text-transform: uppercase;
transition: all 0.3s ease 0s;
}
.tag a:hover {
    background: #083c5a;
    color: #fff;
    border: 1px solid #083c5a;
}
/*END BLOG SIDEBAR DESIGN*/
/*START BLOG SINGLE PAGE DESIGN*/
.single_blog_post { margin-bottom: 60px }
.single_blog_post img {
height: 455px;
margin-bottom: 20px;
width: 750px;
}
@media only screen and (max-width:768px) { 
.single_blog_post img {
height: 455px;
margin-bottom: 20px;
width: 100%;
}
}
.blog_post_text h4 { margin: 30px 0 }
.author_part {
    margin-bottom: 60px;
    overflow: hidden;
}
.single_author {
    background: #f9f9f9 none repeat scroll 0 0;
    padding: 20px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.author_part img {
    border: 4px solid #083c5a;
    border-radius: 100px;
    float: left;
    height: 120px;
    margin-bottom: 25px;
    margin-right: 20px;
    width: 120px;
}
.author_part h4 { }
.author_part p { margin-bottom: 0 }
.blog_head_title {
    border-bottom: 1px solid #eee;
    margin: 0 0 30px;
    padding-bottom: 10px;
}
.comments_part {
    margin-bottom: 60px;
    overflow: hidden;
}
.single_comment {
background: #f9f9f9 none repeat scroll 0 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
padding: 20px;
overflow: hidden;
}
.single_comment_mbnone { margin-bottom: 0px }
.single_comment img {
    border: 4px solid #083c5a;
    border-radius: 100px;
    float: left;
    height: 120px;
    margin-bottom: 0px;
    margin-right: 20px;
    width: 120px;
}
.single_comment h4 {overflow: hidden;
text-transform: uppercase; }
.single_comment p { margin-bottom: 0 }
/*END BLOG SINGLE PAGE DESIGN*/
/*
* ----------------------------------------------------------------------------------------
* 16.END BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 17.START CONTACT FORM DESIGN
* ----------------------------------------------------------------------------------------
*/
.contact-us { background: #f9f9f9 }
.contact {
background: #fff none repeat scroll 0 0;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
padding: 35px;
}
.form-control {
    background: #fbfbfb none repeat scroll 0 0;
    border: 0 solid #eee;
    border-radius: 0;
    box-shadow: none;
    color: #333;
    font-family: "Montserrat",sans-serif;
    height: 50px;
    padding-left: 10px;
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
}
.form-control:focus {
    border-radius: 0;
    box-shadow: none;
    outline: 0 none;
	border-bottom:1px solid #083c5a;
}
.mbnone { margin-bottom: 0px }
.actions {
    margin-top: 30px;
}

@media only screen and (max-width:480px) { 
.actions {margin-bottom: 30px;}
}

.btn-contact-bg {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: 1px solid #eee;
border-radius: 30px;
color: #333;
font-size: 14px;
padding: 10px 30px;
text-transform: uppercase;
outline:0;
transition: all 0.2s ease 0s;
}
.btn-contact-bg:hover,
.btn-contact-bg:focus {
    background: #083c5a;
    border: 1px solid #083c5a;
    color: #fff;
}
.success {
    background: #fff none repeat scroll 0 0;
    color: #379bbc;
    font-weight: 700;
    padding: 20px;
    text-align: center;
}
.single_address{margin-bottom: 26px;
overflow: hidden;}
.single_address i{
border-radius: 100px;
color: #fff;
float: left;
font-size: 22px;
height: 60px;
line-height: 60px;
margin-right: 20px;
text-align: center;
transition: all 0.2s ease 0s;
width: 60px;
}
.single_address h4{
text-transform: capitalize;
font-weight: 500;
}
.single_address p{}
.single_address_mbnone{margin-bottom: 0px;}
/*
* ----------------------------------------------------------------------------------------
* 17.END CONTACT FORM DESIGN
* ----------------------------------------------------------------------------------------
*/
#map{height:400px;}
/*
* ----------------------------------------------------------------------------------------
* 18.START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.footer {
background: #222 none repeat scroll 0 0;
  padding:30px 0;
}
.footer_menu {
    float: right;
    margin-top: 5px;
}
@media only screen and (max-width:480px) { 
    .footer_menu {
        margin-top: 15px;
        float: none;
    }
}
.footer_menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
@media only screen and (max-width:480px) { 
    .footer_menu ul { text-align: center }
}
.footer_menu ul li { display: inline }
@media only screen and (max-width:480px) { 
    .footer_copyright ul li a { text-align: center }
}
.footer_menu ul li a {
    color: #fff;
    padding: 0 10px;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.footer_menu ul li a:hover { color: #083c5a }
/*END FOOTER SOCIAL DESIGN*/
.copyright p {
color:#fff;
margin-bottom: 0;
padding-top: 10px;
}
@media only screen and (max-width:480px) { 
.copyright p {text-align:center;}
}
/*
* ----------------------------------------------------------------------------------------
* 18.END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
 * ----------------------------------------------------------------------------------------
 *  .START SECTION TOP DESIGN
 * ----------------------------------------------------------------------------------------
 */
.section-top {
    padding-bottom: 85px;
    padding-top: 180px;
    position: relative;
}
.section-top:before {
    background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.section-top-title {
    background:#fff;
    margin: auto;
    padding: 20px 0;
    width: 400px;
}
@media only screen and (max-width:480px) { 
    .section-top-title { width: 100% }
}
.section-top-title h1 {
    margin: 0;
    text-transform: uppercase;
}
.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: #fff!important }
/*
 * ----------------------------------------------------------------------------------------
 * .END SECTION TOP DESIGN
 * ----------------------------------------------------------------------------------------
*/