/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body{
	font-family: Arial, Helvetica, sans-serif;
}

/*----------------------------
General Styling - Section
---------------------------- */
.fa {
	font-family: "FontAwesome";
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
}
section {
	background:#fff;
	padding:84px 0;
}
section h1 {
	font-size: 24px;
	color:#0e0f10;
	text-transform:uppercase;
	margin-top:0;
}
section h2 {
	font-size:25px;
	color:#0e0f10;
	font-weight:200;
	margin-top:0;
	display:inline-block;
}
section h2 b {
	font-weight:400;
}
section p {
	color:#a4a7ab;
	font-size:13px;
}
section .title h2 {
	display:block;
}
section .title {
	text-align:center;
	padding:0 20px 30px;
}
section .title p {
	max-width:430px;
	display:inline-block;
}

/*----------------------------
How does it Work Section
---------------------------- */
section.work {
	background:#ebece8;
	padding-bottom:0;
}
section.work .title{
	padding: 20px 20px 10px;
}
section.work .title h1,section.work .title h2,section.work .title h3{
	color: #303030;
}
section.work .title h1{
	text-transform: capitalize;
	font-weight: 400;
	font-size:48px;
}
section.work .title h2{
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 50px;
}
section.work .title h3{
	font-weight: bold;
	font-size: 36px;
}

section.work .center_phone {

	background: url(../img/center_phone.png) top center no-repeat;
	margin: 0 auto;
	position: relative;
	left: 50%;
	background-size: 280px;
	height: 497px;
	width: 1050px;
	margin-left: -525px;
	z-index:8;
}
section.work .center_phone .shadow{
	background: url(../img/shadow.png) 45.4% 0 no-repeat;
	background-size: 345px;
	padding-top: 72px;
	min-height: 718px;
}
#phone_prev{
	height: 426px;
}
.phone_previews {
	overflow:hidden;
	padding-top:0;
	padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}
section.work .relative{
	box-sizing: border-box;
	padding: 10px 26px;
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
}
section.work .left .relative:after, section.work .right .relative:before{
	top: 50%;
	margin-top: -10px;
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
section.work .left .relative:after{
	right: -10px;
	border-left: 13px solid white;
}

section.work .right .relative:before{
	left: -10px;
	border-right: 13px solid white;
}

section.work .top-11 .relative:after, section.work .top-11 .relative:before{
	top: 88%;
}
section.work .owl-item .bullet, section.work .owl-item .bullet *{
	box-sizing: border-box;
}
.bullet span h4{
	font-size: 22px;
}

.bullet span p{
	font-size: 15px;
	font-family: inherit;
	margin: 0;
}

/*.grabbing .bullet.left span,.grabbing .bullet.right span{
	opacity: 0;
}*/

section.work .owl-buttons{
	width: 100%;
	left: 0;
	top: 50%;
}

section.work .owl-buttons div.owl-prev, section.work .owl-buttons div.owl-next{
	top: 50%;
	text-indent: -99999px;
	background: url(../img/arrows.png) no-repeat;
	background-position: right top;
	width: 18px;
	height: 50px;
}
section.work .owl-buttons div.owl-prev{
	background-position: left top;
	left: -60px;
}

section.work .owl-buttons div.owl-next{
	right: -60px;
}

.bullet.left span h1,.bullet.left span h2,.bullet.left span h3,.bullet.left span h4,.bullet.left span h5,.bullet.left span h6{
	margin: 0;
}
section.work .owl-item .bullet{
	padding: 10px;
	background: rgba(237,57,139,0.5) url(../img/pink-dot.png) no-repeat center center;
	-webkit-background-clip: padding-box; /* for Safari */
	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	border-radius: 50%;
	width: 36px;
	height: 36px;
	border: 6px solid rgb(237,57,139);
	border: 6px solid rgba(237,57,139, .2);
	background-size: 12px 12px;
}

section.work .owl-item.active .bullet:hover{
	background: rgba(237,57,139,0.8) url(../img/pink-dot.png) no-repeat center center;
	border: 6px solid rgb(237,57,139);
	border: 6px solid rgba(237,57,139,1);
	background-size: 12px 12px;
}
section.work .right.no-arrow .relative:before{
	border-right: 13px solid transparent;
}
section.work .owl-item .bullet.no-arrow,section.work .owl-item.active .bullet.no-arrow, section.work .owl-item.active .bullet.no-arrow:hover, section.work .owl-item .bullet.no-arrow:hover{
	background: none;
	border-color: transparent;
}
.msie8 section.work .owl-item .bullet{
	background: url(../img/pink-dot-ie8.png) no-repeat center center;
	border: none;
	padding: 0;
}
.msie8 section.work .owl-item.active .bullet:hover{
	border: none;
}

section.work .owl-item.active h2{
	font-size: 40px;
}
section.work .owl-item.active h2.sub-heading{
	font-size: 18px;
}
section.work .owl-item div img{
	width: 220px;
	margin-top: 30px;
}
section.work .owl-item.active div img{
	width: 240px;
}
section.work .owl-item .line-01, section.work .owl-item .line-02{
	display: none;
}
header .navbar-default{
	background: #f18300;
	border: none;
	border-radius: 0;
	margin-bottom: 0;
}


.middleContainer {
    /*width: 975px;*/
    margin: 0 auto
}
.mobile-show {
	display: none !important;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */



/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
	display: none !important;
	visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
	visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
	*zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */


@media only screen and (max-width: 1200px) {
	.bullet.right span,.bullet.left span{
		width: 200px;
	}
	section.work .relative{
		padding: 10px 20px;
	}
	.bullet span h4{
		font-size: 20px;
	}
	section.work .top-11 .relative:after, section.work .top-11 .relative:before{
		top: 76%;
	}
	section.work .owl-buttons div.owl-prev{
	    left: 40px;
	}
	section.work .owl-buttons div.owl-next{
	    right: 40px;
	}
}
@media (min-width: 768px) {
    .phone_previews {
        width:750px
    }
}

@media (min-width: 992px) {
    .phone_previews {
        width:970px
    }
}

@media (min-width: 1200px) {
    .phone_previews {
        width:1170px
    }
}

@media only screen and (max-width: 896px) {
	.bullet div {
	    display:none;
	}
	.bullet div.active {
	    display:block;
	}
}
@media only screen and (max-width: 767px) {
	.navbar-default .navbar-toggle{
		background: none;
		border: none;
		-webkit-appearance: none;
		-moz-appearance:    none;
		appearance:         none;
	}
	.navbar-default .navbar-toggle:focus{
		outline: none;
		background: none;
	}
	.navbar-default .navbar-toggle:hover{
		background: none;
	}
	.navbar-default .navbar-toggle .icon-bar{
		background: white;
		border-radius: 2px;
	}
	.logo-phone{
		background: url(../img/logo-mobile.png) no-repeat;
		display: inline-block;
		font-size: 0;
		width: 119px;
		height: 48px;
		vertical-align: middle;
	}
	.navbar-header{
		padding: 15px;
	}
	.navbar-collapse{
		max-height: none;
	}
	#main-menu .navbar-nav>li{
		text-align: left;
		display: block;
	}
	#main-menu .navbar-nav>li>a{}
	#main-menu .navbar-nav{
		padding: 0;
		margin: 0;
	}
	.navbar-form .form-group{
		margin-bottom: 0;
	}
	#main-menu .navbar-nav>li.current:after{
		display: none;
	}
}
@media only screen and (max-width: 669px) {
	section.work .title h1{
		font-weight: 600;
		font-size: 26px;
		margin-bottom: 10px;
	}
	section.work .title h2{
		font-size: 14px;
	}
	section.work .title h3{
		font-size: 26px;
		margin: 0;
	}
	#main-navigation,#main-menu .navbar-nav>li.search-hidden{
		display: none;
	}
	.fake-pocket-menu, .search-box-show{
		display: block;
	}
	.search-box-show{
		position: absolute;
		display: none;
		vertical-align: top;
	}
	.search-box-show .search-field:focus{
		outline: none;
	}
	.search-box-show .search-field{
		background: none;
		border: none;
		box-shadow: none;
	}
	.search-box-show .search-button{
		background: url(../img/search-button.png) no-repeat center center;
		width: 32px;
		height: 16px;
		border: none;
		position: absolute;
		right: 15px;
		top: 50%;
		margin-top: -17px
	}
}
@media only screen and (max-width: 630px) {
	section.work .center_phone .shadow{
		background: none;
	}
}
@media only screen and (max-width: 440px) {
	section.work .owl-item .bullet{
		padding: 5px;
		width: 36px;
		height: 36px;
		border: 6px solid rgb(237,57,139);
		border: 6px solid rgba(237,57,139, .2);
		background-size: 12px 12px;
	}
	section.work .owl-item.active .bullet:hover{
		border: 6px solid rgb(237,57,139);
		border: 6px solid rgba(237,57,139,1);
		background-size: 12px 12px;
	}
	section.work .center_phone{
		background-size: 280px;
		height: 497px;
		width: 720px;
		margin-left: -360px;
	}
	section.work .center_phone .shadow{
		padding-top: 72px;
	}
	section.work .owl-item div img{
		width: 180px;
	}
	section.work .owl-item.active div img{
		width: 240px;
	}
	.left.close{
		margin-left: -140px;
	}
	.right.close{
		margin-right: -140px;
	}
	.left.mid{
		margin-left: -85px;
	}
	.right.mid{
		margin-right: -85px;
	}
	.right.far{
		margin-right: -40px;
	}
	.left.far{
		margin-left: -40px;
	}
}





header {
  /*height:63px;*/
  z-index:10;
}


/*
header h1 {
  position: absolute;
  top: 72px; 
  left: 240px;
  color: #fff;
}*/

.fixed-header {
  left:0;
  width: 100%; 
 
 
    color:#ffffff;
  background-color:#ffffff !important;
   top:0;
   position:fixed;
   animation-name:header_slide_in;animation-duration:.5s;-webkit-box-shadow:0px 4px 5px rgba(102,102,102,0.8);-khtml-box-shadow:0px 4px 5px rgba(102,102,102,0.8);-moz-box-shadow:0px 4px 5px rgba(102,102,102,0.8);-ms-box-shadow:0px 4px 5px rgba(102,102,102,0.8);-o-box-shadow:0px 4px 5px rgba(102,102,102,0.8);box-shadow:0px 4px 5px rgba(102,102,102,0.8)}
   @keyframes header_slide_in{0%{top:-80px;position:fixed}100%{top:0;position:fixed}}.


nav {
  width:100%;
 
  background-color:#ffffff !important;
 
  position:fixed;
  z-index:10;
}


@media only screen and (max-width: 768px){
	.center_phone .shadow{
	   background: none !important;
   } }