/*
----------------------------------------------
Project Name: 	Simway
Version: 		1.0
Type: 			Onepage HTML Template
Author: 		
-----------------------------------------------
*/
/* Google Fonts */

/* font-family: 'Roboto', sans-serif;
font-family: 'Roboto', sans-serif; */
@import url('../../../css');
@import url('../../../css-1');
/*------------------------------------------------------------------------
[Table of Contents]
1. Base CSS
2. Typography
	2.1. Heading styles
	2.2. Paragraph styles
	2.3. Margin styles
	2.4. Padding styles
3. Preloader
4. Buttons
5. Sections style
6. Back to top
7. Section typography
8. Header area
	8.1. Navbar
	8.2. Navbar logo styles
	8.3. Video area
	8.4. slider styles
	8.5. Parallax styles
	8.6. overlax styles
	8.7. fixed styles
	8.8. text styles
	8.9. Dark overlay styles
	8.10. Custom slider styles
	8.11. Custom slider transitions
	8.12. Custom navbar styles	
9.	About area
10.	service area
	10.1. Slider service style
	10.2. Timeline service style
	10.3. box shadow service style	
11. Portfolio area
	11.1.Mesonry portfolio
	11.2.Boxed portfolio	
12. Counter up area
13. Blog area
	13.1. Slider blog area
	13.2. boxed blog area
14. Details blog area
15. Team area
16. Partner/client
17. Contact area
18. Map
19. Footer area
20. Responsive Media queries


/*---------------------------------------------------------------------------

# [Color Codes]

# Gema(Deep-Gray): #777
# semi-Gema(Light-Gray):#F5F5F5
# Semi Blue(Blue): #1C4359
# Glamour (Blue):#837ED8
# White: #FFF
# Black:#111111
# */


/*----------------------------------------------------------------------------

[Typography]


Body:font-size: 13px;font-family: 'Roboto', sans-serif;	
Heading: font-family:'Montserrat', sans-serif;
Paragraph: font-size:14px, font-family: 'Roboto', sans-serif;

-------------------------------------------------------------------------------*/


/* ==============================
   Base Css
   ============================== */

* {
	margin: 0;
	padding: 0;
}
.aligncenter {
	display: block;
	margin: 0 auto 15px;
}
a, button, input {
	text-decoration: none;
	-webkit-transition: 0.4s;
}
button:focus, a:focus {
	outline: 0px solid;
}
.btn:focus {
	outline: 0px solid;
}
img {
	max-width: 100%;
	height: auto;
}
h2, h4 {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
}
html {
	-webkit-overflow-y: scroll;
	-ms-overflow-style: scrollbar;
}
html, body {
	height: 100%;
	-webkit-font-smoothing: antialiased;
}
body {
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	height: 100%;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.overflow div {
	overflow: hidden;
}
.page-wrapper div {
	overflow: hidden;
}
a {
	text-decoration: none;
	-webkit-transition: .4s;
}
a:hover {
	text-decoration: none;
}
a:focus {
	text-decoration: none !important;
	color: #fff;
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="color"]:focus {
	-webkit-box-shadow: 0 0 0;
	outline: 0 none;
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
 -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
ul {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
.morphext>.animated {
	display: inline-block;
}
::-moz-selection {
 color: #333;
 background: #dcdcdc;
}
::-webkit-selection {
 color: #000;
 background: #193846;
}
::-o-selection {
 color: #333;
 background: #dcdcdc;
}
::selection {
	color: #fff;
	background: #193846;
}
/* ==============================

	-------Typography-----------
		
   ============================== */

   
   
/* ==============================
	Heading styles
   ============================== */

h1 {
}
h2 {
	font-size: 32px;
	line-height: 1.4em;
	font-weight: 400;
	letter-spacing: 1px;
}
h3 {
}
h4 {
	font-size: 24px;
	font-weight: 400;
	text-transform: capitalize;
	letter-spacing: 1px;
	margin-bottom: 20px;
}
h5 {
}
h6 {
	font-size: 17px;
	text-transform: uppercase;
	line-height: 1.4em;
	letter-spacing: 1px;
	font-weight: 400;
	color: #111111;
	font-family: 'Roboto', sans-serif;
}
/* ==============================
   Paragraph Style
   ============================== */
   
   
p {
	font-size: 13.5px;
	line-height: 23px;
	font-weight: 400;
	margin: 0;
	letter-spacing: 0.5px;
	font-family: 'Roboto', sans-serif;
}
/* ==============================
   Margin Top styles
   ============================== */
   
   
.mar-0 {
	margin: 0 !important;
}
.mt-10 {
	margin-top: 10px !important;
}
.mt-20 {
	margin-top: 20px !important;
}
.mt-30 {
	margin-top: 30px !important;
}
.mt-40 {
	margin-top: 40px !important;
}
.mt-50 {
	margin-top: 50px !important;
}
.mt-60 {
	margin-top: 60px !important;
}
/* ==============================
   Margin Bottom Styles
   ============================== */
   
   
.mb-10 {
	margin-bottom: 10px !important;
}
.mb-20 {
	margin-bottom: 20px !important;
}
.mb-30 {
	margin-bottom: 30px !important;
}
.mb-40 {
	margin-bottom: 40px !important;
}
.mb-50 {
	margin-bottom: 50px !important;
}
.mb-60 {
	margin-bottom: 60px !important;
}
/* ==============================
   Padding Top Styles
   ============================== */
   
   
.pad-0 {
	padding: 0 !important;
}
.pt-10 {
	padding-top: 10px !important;
}
.pt-20 {
	padding-top: 20px !important;
}
.pt-30 {
	padding-top: 30px !important;
}
.pt-40 {
	padding-top: 40px !important;
}
.pt-50 {
	padding-top: 50px !important;
}
.pt-60 {
	padding-top: 60px !important;
}
/* ==============================
   Padding Bottom Styles
   ============================== */
   
   
.pb-10 {
	padding-bottom: 10px !important;
}
.pb-20 {
	padding-bottom: 20px !important;
}
.pb-30 {
	padding-bottom: 30px !important;
}
.pb-40 {
	padding-bottom: 40px !important;
}
.pb-50 {
	padding-bottom: 50px !important;
}
.pb-60 {
	padding-bottom: 60px !important;
}
/* ==============================
   Preloader
   ============================== */
   
   
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	background: #FFFFFF;
}
.preloader > i {
	position: absolute;
	font-size: 36px;
	line-height: 36px;
	top: 50%;
	left: 50%;
	height: 36px;
	width: 36px;
	margin-top: -15px;
	margin-left: -15px;
	display: inline-block;
}
#loading {
	background-color: #FFFFFF;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	margin-top: 0px;
	top: 0px;
}
#loading-center {
	width: 100%;
	height: 100%;
	position: relative;
	background-image: url(../images/Loading_icon.gif);
	background-repeat: no-repeat;
	background-position: center 50%;
}
/* ==============================

		------Button------
		
   ============================== */

 

/* ==============================
   Default Button styles
   ============================== */

   
.default-btn {
	background: #837ED8;
	color: #fff;
	padding: 13px 26px;
	display: inline-block;
	font-weight: 400;
	font-size: 18px;
	text-transform: capitalize;
	letter-spacing: 1px;
	border-radius: 25px;
	transition: .4s;
	font-family: 'Roboto', sans-serif;
}
.default-btn:hover {
	color: #fff;
}
/* ==============================
   Small Button Style
   ============================== */

.slide-btn {
	background: transparent !important;
	border: 2px solid #837ED8;
	padding: 11px 24px;
	margin: 10px;
}
.slide-btn:hover {
	background: #837ED8 !important;
}
/* ==============================
   Small Button Style
   ============================== */
   
   
.small-btn {
	background: #837ED8;
	color: #fff;
	padding: 12px 15px;
	font-weight: 700;
	font-size: 14px;
	text-transform: capitalize;
	letter-spacing: 0.5px;
	border-radius: 25px;
	display: inline-block;
	transition: .4s;
	font-family: 'Roboto', sans-serif;
}
.small-btn:hover {
	color: #fff;
}
/* ==============================
   submit-btn Style
   ============================== */
   
   
.submit-btn {
	background: #837ED8;
	color: #fff;
	padding: 15px 40px;
	border: none;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 0px;
	display: inline-block;
	transition: .4s;
	font-family: 'Roboto', sans-serif;
	float: left;
}
.submit-btn:hover {
	color: #fff;
}
/* ==============================
   Section Style
   ============================== */
   


.section-padd {
	padding: 60px 0;
}
.section-title h2 {
	margin: 0px;
	font-size: 40px;
	text-transform: capitalize;
}
.section-title span {
	
	line-height: 1.6em;
	font-weight: 700;
	letter-spacing: 1px;
	color: #837ED8;
}
.gray-bg {
	background: #F5F5F5;
}
/* ==============================
   Back to Top Button Style
   ============================== */ 

   
#toTop {
	display: none;
	position: fixed;
	bottom: 35px;
	right: 25px;
	filter: alpha(opacity=40);
	font-size: 40px;
	color: #111111;
	transition: 0.4s;
	z-index: 1000;
	text-decoration: none;
}
#toTop span {
	font-size: 15px;
	background: #837ED8;
	color: #fff;
	transition: .4s;
	height: 40px;
	width: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 25px;
}
/* ==============================
    Section typography Css
   ============================== */
   
   
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.border-none {
	border: none !important;
}
.white-overlay {
	background-size: cover !important;
	position: relative;
	color: #000;
	z-index: 1;
}
.white-overlay:after {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #fff;
	content: "";
	z-index: -1;
	opacity: .3;
}
.dark-overlay {
	background-size: cover !important;
	position: relative;
	color: #000;
	z-index: 1;
}
.dark-overlay:after {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #000;
	content: "";
	z-index: -1;
	opacity: .7;
}
.yt-video-overlay {
	position: relative;
}
.yt-video-overlay:before {
	background: #000;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 9;
	opacity: 0.5;
}
.youtube-bg {
	height: 100vh;
	text-align: center;
	z-index: 10;
}
/* ==============================
   Header Area
   ============================== */    


.header-section {
	position: absolute;
	z-index: 1000;
	width: 100%;
	background-color: rgba(255,255,255,0.2);
	top: 0;
	padding: 10px 0px;
}
/*--css-for-logo--*/


.logo img {
	width: 150px;
	height: auto;
}
.container>.navbar-header-block {
	margin-right: -15px;
	margin-left: -15px;
}
.logo {
	padding: 8px 15px !important;
}
.logo-1 {
	display: block;
}
.logo-2 {
	display: none;
}
.sticky-menu .logo-1 {
	display: none !important;
}
.sticky-menu .logo-2 {
	display: block !important;
}
/*--css-for-menu--*/

#main-menu {
	background: transparent;
	margin: 0;
	border: 0px;
	margin-top: 12px;
}
#main-menu ul {
	margin-top: 13px;
}
#main-menu li a {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #fff;
	font-size: 14px;
	text-transform: capitalize;
	letter-spacing: 1px;
	line-height: 25px;
	padding: 0;
	margin: 0 10px;
}
#main-menu .active a {
	color: #837ED8;
	background: transparent;
}
#main-menu li a:hover {
	color: #837ED8;
}
.sticky-menu .active a {
	color: #d2d2d2 !important;
	background: transparent;
}
.sticky-menu li a:hover {
	color: #d2d2d2 !important;
}
.sticky-menu {
	background: #837ED8;
	position: fixed;
	transition: 0.5s all ease;
	padding: 14px 0;
}
.sticky-menu ul>li>a {
	color: #000;
	font-size: 14px !important;
	letter-spacing: 1px;
}
.sticky-menu #main-menu {
	margin-top: 0;
}
.sticky-menu .logo {
}
.sticky-menu #main-menu ul {
	margin-top: 13px;
}
.navbar-toggle {
	border: 0px;
	background: transparent;
	color: #fff !important;
}
.navbar-toggle span {
	background: #fff !important;
}
.navbar-toggle:hover, .navbar-toggle:focus {
	background: transparent !important
}
/* ==============================
   Slider Area
   ============================== */ 
 
 
.slider {
}
.single-slider-position-block {
}
.slider-content-item {
	width: 100%;
	height: 100vh;
	display: table;
	text-align: left;
}
.slider-info-text-box h1 {
	font-size: 60px;
	color: #fff;
	line-height: 60px;
	letter-spacing: 2px;
	font-weight: 700;
}
.slider-info-text-box h2 {
	font-size: 32px;
	color: #fff;
	line-height: 40px;
	letter-spacing: 1px;
	font-weight: 400;
}
.slider-info-text-box p {
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0px;
	word-spacing: 1px;
}
.slider-info-text-box {
	display: table-cell;
	vertical-align: middle;
}
.slider-info-text-box i {
	color: #fff;
	font-size: 55px;
	margin: 5px;
}
/**==============================

   index-parallex-banner-page
   
   ==============================**/

   
.index-parallex-banner {
}
.index-parallex-section {
	background-size: cover;
	height: 100vh;
	color: #fff;
	z-index: 2;
}
.parallex-content-cell {
	width: 100%;
	height: 100vh;
	display: table;
	text-align: center;
}
.parallex-heading-block {
	display: table-cell;
	vertical-align: middle;
}
.parallex-heading-block h1 {
	font-size: 58px;
	letter-spacing: 2px;
	font-weight: 600;
	line-height: 60px;
	margin-bottom: 20px;
	color: #837ED8;
}
.parallex-heading-block p {
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 30px;
}
/**==============================

   home-slider-banner-page
   
   ==============================**/
   
   

.home-slider-banner {
}
.slider-content-item {
	display: table;
	width: 100%;
	height: 50vh;
	text-align: center;
	background-size: cover;
	height: 100vh;
}
.slider-content-cell {
	display: table-cell;
	vertical-align: middle;
	color: #ffffff;
}
.slider-content-cell h2 {
	font-size: 48px;
	font-weight: 700;
	color: #837ED8;
}
.slider-content-cell p {
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 23px;
}
.slider-area {
	position: relative;
}
.banner-slider-block .owl-nav div {
	height: 60px;
	width: 26px;
	font-size: 18px;
	line-height: 57px;
	background: rgba(42,179,189,0.4);
	color: #fff;
	transition: .4s;
	text-align: center;
	position: absolute;
	margin: 0px 8px;
	border-radius: 0px;
	top: 50%;
	transform: translateY(-50%);
}
.banner-slider-block .owl-nav div.owl-next {
	left: auto;
	right: 0;
}
/**==============================

   index-text-banner-page
   
   ==============================**/
   
 
 
.type-wrap p {
	color: #fff;
	font-size: 18px;
	transition: .4s;
}
.index-text-banner {
}
.banner-text-area {
	background-size: cover;
	height: 100vh;
	color: #fff;
	z-index: 2;
}
.banner-text-content-cell {
	width: 100%;
	height: 100vh;
	display: table;
	text-align: center;
}
.banner-text-heading-block {
	display: table-cell;
	vertical-align: middle;
}
.banner-text-heading-block h2 {
	font-size: 50px;
	font-weight: 600;
	color: #fff;
}
.banner-text-heading-block span {
	font-size: 50px;
	color: #837ED8;
	font-weight: 600;
}
/**==============================

   index-overlay-banner-page
   
   ==============================**/
   
   
.service-overlax {
	padding: 20px 20px;
	transition: .2s;
	border: 2px solid #fff;
	background-color: #fff;
	border-top-left-radius: 25px;
	border-bottom-right-radius: 25px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	margin-bottom: 20px;
}
.service-overlax:hover {
	border: 2px solid #837ED8;
}
.service-overlax h6 {
	font-size: 14px;
	font-weight: 700;
}
.service-overlax i {
	font-size: 70px;
	color: #837ED8;
}
.index-overlay-banner {
}
.index-parallex-overlay {
	background-size: cover;
	width: 100%;
	height: auto;
}
.parallex-overlay-content-cell {
	width: 100%;
	height: 100vh;
	display: table;
	text-align: center;
}
.parallex-overlay-heading-block {
	display: table-cell;
	vertical-align: middle;
}
.overlax {
	color: #fff;
	padding: 20px 40px;
}
.overlax h2 {
	font-size: 37px;
	border-bottom: 3px double rgba(255,255,255,0.2);
	font-weight: 700;
	padding-bottom: 10px;
	margin: 0px 0px 20px 0px;
	line-height: 50px;
}
.overlax p {
	font-size: 15px;
	font-weight: 400;
	line-height: 26px;
	word-spacing: 3px;
	letter-spacing: 1px;
}
/**==============================

   index-text-banner-page
   
   ==============================**/
   

.fixed-content-cell {
	width: 100%;
	height: 100vh;
	display: table;
	text-align: center;
}
.fixed-heading-block {
	display: table-cell;
	vertical-align: middle;
}
.fixed-heading-block h1 {
	font-size: 60px;
	color: #837ED8;
}
.fixed-heading-block p {
	color: #ffffff;
	font-size: 16px;
	letter-spacing: 1.5px;
}
/* ==============================
   About Area
   ============================== */ 
   
.about-text-box {
	margin-bottom: 30px;
}
.about-content-block {
	padding: 4px 25px;
}
.about-view-img {
}
.about-view-img img {
	width: 100%;
	height: auto;
	transition: .3s;
}
/*--css-zoom-hover--*/

.about-view-img {
	margin: 0px;
	transition: .6s;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
/*---end-css-zoom-hover--*/


/*---css-image-bw--*/


.bw {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.bw:hover {
	-webkit-filter: grayscale(100%);
}
.team-info-wrapper:hover .bw {
	-webkit-filter: grayscale(100%);
}
/*---end-css-image-bw--*/



	
/*	skill bar */

.skill-title {
	padding: 0 6px;
}
.skillbar {
	position: relative;
	display: block;
	margin-bottom: 25px;
	width: 100%;
	background: #7F8C8D;
	height: 8px;
	-webkit-transition: 0.4s linear;
	-moz-transition: 0.4s linear;
	-ms-transition: 0.4s linear;
	-o-transition: 0.4s linear;
	transition: 0.4s linear;
	-webkit-transition-property: width, background-color;
	-moz-transition-property: width, background-color;
	-ms-transition-property: width, background-color;
	-o-transition-property: width, background-color;
	transition-property: width, background-color;
}
.skillbar-title {
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 400;
	font-size: 15px;
	color: #fff;
}
.skill-heading-block span {
	display: block;
	line-height: 26px;
	font-weight: 700;
	letter-spacing: 0.5px;
	font-size: 13px;
	color: #777;
}
.skillbar-bar {
	height: 10px;
	width: 0px;
	background: #837ED8;
	border-radius: 0px;
	float: left;
}
/* ==============================
   Service Area
   ============================== */ 

.service-section {
	text-align: center;
}
.service {
	margin: 0px 20px;
	background-color: #fff;
	padding: 25px 10px;
	border: 2px solid #fff;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.service:hover {
	margin: 0px 20px;
	background-color: #fff;
	padding: 25px 10px;
	border: 2px solid #837ED8;
}
.service-section h6 {
	font-size: 22px;
	margin: 0px 0px 10px 0px;
	color: #837ED8;
	text-transform: capitalize;
	font-weight: 400;
}
.service-section i {
	font-size: 30px;
	color: #837ED8;
	padding: 15px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.service:hover i {
	background-color: #837ED8;
	color: #fff;
}
/* Service 2 */
.servicetwo {
	text-align: left;
	border: 2px solid #fff;
	background-color: #fff;
	padding: 20px 20px 20px 20px;
	margin-bottom: 20px;
}
.servicetwo:hover {
	border: 2px solid #837ED8;
}
.servicetwo h6 {
	color: #837ED8;
}
/* Service 3 */

.servicethree {
	text-align: left;
	margin: 8px;
}
.servicethree p {
	color: #777;
}
/* Service 4 */

.service4 {
	text-align: left;
	margin: 30px 5px;
	padding: 30px;
	transition: .3s;
}
.service4:hover {
	-moz-box-shadow: 0 0px 30px 0px #ddd;
	-webkit-box-shadow: 0 0px 30px 0px #ddd;
	box-shadow: 0 0px 30px 0px #ddd;
}
/* Service-parallax */


.service-parallax-wrapper {
	margin: 15px 20px;
	padding: 15px;
	border: 2px solid #fff;
	transition: .2s;
	background-color: #fff;
	cursor: default;
}
.service-parallax-wrapper:hover {
	border: 2px solid #837ED8;
}
.service-parallax-wrapper h6 {
	font-size: 26px;
	font-weight: 400;
	margin-bottom: 10px;
}
.service-parallax-wrapper i {
	font-size: 65px;
	color: #837ED8;
	width: 20%;
	float: left;
	margin-right: 2%;
}
.service-parallax-wrapper-content {
	width: 77%;
	float: left;
	text-align: left;
}
/*timeline-service*/

.service-line-box {
	position: relative;
	overflow: auto;
	color: #fff;
}
.service-line-box:before {
	content: '';
	position: absolute;
	height: 100%;
	width: 3px;
	background: #837ED8;
	left: 0;
}
.service-line-box h4 {
	background: #fff;
	color: #fff;
	background-color: #837ED8;
	max-width: 7em;
	margin: 0 auto 3em;
	border-radius: 25px;
	padding: 0.6em;
	text-align: center;
	position: relative;
	clear: both;
	font-size: 22px;
	font-weight: 700;
}
.service-line-box ul {
	list-style: none;
	padding: 0 0 0 1em;
	z-index: 1;
}
.service-line-box li {
	background: #fff;
	padding: 1em;
	border: 1px solid #ddd;
	border-radius: 10px;
	margin-bottom: 3em;
	position: relative;
	transition: .3s;
}
.service-line-box li:hover {
	border: 1px solid #837ED8;
}
.service-line-box li:hover:before {
	border-top: 1em solid #837ED8;
}
.service-line-box li:nth-child(odd):hover:before {
	border-top: 1em solid #837ED8;
}
.service-line-box li:before {
	content: '';
	width: 0;
	height: 0;
	transform: rotate(-90deg);
	border-top: 1em solid #ddd;
	border-left: 1em solid #fff;
	font-size: 25px;
	position: absolute;
	transform: rotate(-135deg);
	top: 45%;
	left: -13px;
}

@media screen and (min-width: 40em) {
.service-line-box:before {
	left: 50%;
}
.service-line-box ul {
	padding-left: 0;
	max-width: 1000px;
	margin: 0 auto;
}
.service-line-box li {
	width: 46%;
}
.service-line-box li:nth-child(even) {
	float: right;
	margin-top: 4em;
}
.service-line-box li:nth-child(odd) {
	float: left;
}
.service-line-box li:nth-child(odd):before {
	border-top: 1em solid #ddd;
	border-right: 1em solid #fff;
	font-size: 18px;
	right: -28px;
	transform: rotate(-90deg);
	top: 45%;
	left: auto;
}
.service-line-box li:nth-of-type(2n+1) {
	clear: both;
}
}
/*

===============================
 Portfolio Area
===============================

*/

.portfolio-menu-link {
	margin-bottom: 40px;
	border: 3px double #d8d8d8;
	display: inline-block;
	padding: 0px 0px 0px 6px;
}
.portfolio-menu-link button {
	display: inline-block;
	padding: 8px 20px;
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: 400;
	text-transform: capitalize;
	margin: 5px;
	background: transparent;
	border: 0px;
	color: #777;
	transition: .4s;
	margin-left: 0;
}
.portfolio-menu-link button:hover {
	color: #837ED8;
}
.portfolio-menu-link button.active {
	color: #fff;
	background: #837ED8;
	border: 0px;
}
/**/

.portfolio-section {
	text-align: center;
}
.portfolio img {
	width: 100%;
}
.portfolio {
	margin-bottom: 30px;
	position: relative;
	border-radius: 10px;
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
}
.hover-portfolio > .portfolio-content-box:before {
	background: rgba(0, 0, 0, 0.8);
	bottom: 15px;
	content: "";
	left: 15px;
	opacity: 0;
	position: absolute;
	right: 15px;
	top: 15px;
	transition: all 0.4s ease-in-out 0s;
}
.hover-portfolio:hover .portfolio-content-box {
	opacity: 1;
}
.hover-portfolio:hover .portfolio-content-box:before {
	opacity: 0.8;
}
.portfolio-view-box {
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}
.portfolio-view-box a {
	background-color: transparent;
	border-radius: 50px;
	color: #fff;
	display: inline-block;
	font-size: 45px;
	line-height: 50px;
	opacity: 0;
}
.portfolio-view-box a:hover {
	color: #fff;
}
.portfolio:hover .portfolio-view-box a {
	opacity: 1;
}
.no-padding .col-md-4 {
	padding: 0px !important;
}
.no-padding .col-md-4 .portfolio {
	margin: 0px !important;
}
.work-portfolio-1 .portfolio-title {
	opacity: 1;
	padding: 25px 18px;
	position: static;
	transform: translateY(0%);
}
.work-portfolio-1 .portfolio-title h3 {
	transform: translateY(0px);
}
.work-portfolio-1 .portfolio-title span {
	transform: translateY(0px);
}
.hover-portfolio .portfolio-content-box::before {
	background: #837ED8 none repeat scroll 0 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	right: 0;
	top: 0;
}
.portfolio-view-box {
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}
.portfolio-view-box p {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 300;
	text-transform: capitalize;
	letter-spacing: 1px;
}
.mfp-zoom-in {
/* start state */
  /* animate in */
  /* animate out */
}
.mfp-zoom-in .mfp-with-anim {
	opacity: 0;
	transition: all 0.2s ease-in-out;
	transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
	opacity: 0;
	transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
	opacity: 1;
	transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
	transform: scale(0.8);
	opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}
/* ==============================
   Counterup Area
   ============================== */ 
   
   
.counterup {
	text-align: center;
}
.counter-content-box1 {
	background: #344a57;
	padding: 35px 0px;
}
.counter-content-box2 {
	background: #d94c3b;
	padding: 35px 0px;
}
.counter-content-box3 {
	background: #f3a626;
	padding: 35px 0px;
}
.counter-content-box4 {
	background: #ffd312;
	padding: 35px 0px;
}
.counter-icon-box i {
	font-size: 48px;
	color: #fff;
	line-height: 60px;
}
.counter-title h2 {
	color: #fff;
	font-size: 50px;
	font-weight: 400;
}
.counter-title h6 {
	color: #fff;
	text-transform: capitalize;
	font-size: 18px;
}
.counter-title span {
	color: #fff;
	font-size: 42px;
	font-weight: 400;
}
/* ==============================
   Video Area
   ============================== */ 
   
   

.buttonBar {
	display: none;
}
.testimonial-section {
	background: url('../images/testimonial-bg.jpg')no-repeat top;
	background-attachment: fixed;
	background-size: cover;
}
.video-content-area {
	text-align: center;
	width: 100%;
	height: 40vh;
	display: table;
}
.video {
	display: table-cell;
	vertical-align: middle;
}
.video h6 {
	color: #fff;
	font-size: 22px;
	margin-bottom: 32px;
}
.video i {
	font-size: 13px;
	background: #fff;
	color: #666;
	transition: .3s;
	width: 65px;
	height: 65px;
	line-height: 65px;
	border-radius: 50%;
}
.video i:hover {
	color: #fff;
	background: #837ED8;
}
/*video-slider*/

.client-feedback {
	text-align: center;
	padding: 30px 0;
}
.client-feedback img {
	width: 110px !important;
	height: auto;
	border: 2px solid #fff;
	border-radius:50%;
	margin: 0 auto;
}
.client-feedback h6 {
	color: #837ED8;
	font-weight: 700;
	display: inline-block;
	text-transform: capitalize;
	font-size: 22px;
}
.client-feedback p {
	color: #ffffff;
	font-size:16px;
	padding: 10px 15px;
}
.client-feedback i {
	color: #837ED8;
	font-size: 30px;
	margin: 10px 0px;
}
/* ==============================
   Blog Area
   ============================== */ 
   
   
.blog-section {
	margin: 0;
}
.blog-content-box-wrapper {
}
.our-blog-block {
	padding: 15px 0px;
}
.single-blog-item {
	border: 1px solid rgba(0,0,0,0.1);
}
.blog-content-box img {
	width: 100%;
	height: auto;
}
.blog {
	padding: 20px 15px;
}
.blog em {
	padding: 0px 6px;
	font-size: 16px;
}
.blog p {
	font-size: 14px;
	margin-bottom: 18px;
}
.blog p.meta{
	color:#837ED8;
}
.read-blog {
	font-size: 14px;
	text-transform: capitalize;
	color: #837ED8 !important;
	text-decoration: underline !important;
}
.read-blog:hover {
	text-decoration: none;
}
.blog-section {
	position: relative;
	text-align: center;
}
.blog-section .owl-nav {
	position: absolute;
	right: 0;
	left: auto;
	margin-top: 20px;
}
.blog-section .owl-nav div {
	width: 40px;
	height: 30px;
	background: #837ED8;
	color: #fff;
	float: left;
	margin-left: 10px;
	padding-left: 18px;
	line-height: 30px;
	font-size: 18px;
}
/* single-blog-itemtwo */
.single-blog-itemtwo {
	padding: 15px;
	text-align: center;
	background-color: #f5f5f5;
}
.single-blog-itemtwo img {
	transition: .5s;
}
.single-blog-itemtwo:hover img {
	transform: scale(1.1);
}
.single-blog-itemtwo h2 {
	font-size:26px;
	margin-top: 30px;
	font-weight: 700;
}
.single-blog-itemtwo p {
	margin-bottom: 15px;
}
.blog-date-box {
	font-size:16px;
	color:#837ED8;
	font-weight:400;
	text-transform: capitalize;
	margin-bottom:10px;
}
/**==============================

   blog-banner-page
   
   ==============================**/
   
.index-blog-section {
	height: 35vh;
	width: 100%;
	background-size: cover;
}
.blog-content-box {
	width: 100%;
	height: 30vh;
	display: table;
}
.blog-heading {
	display: table-cell;
	vertical-align: bottom;
}
.blog-heading h4 {
	font-size: 34px;
	text-transform: capitalize;
	font-weight: 700;
	color: #837ED8;
	line-height: 25px;
}
.blog-heading p {
	font-weight: 400;
	color: #fff;
	font-size: 13.5px;
	text-transform: capitalize;
	line-height: 16px;
}
.blog-heading a {
	color: #837ED8;
}
/*Blog details-area*/



.blog-details-section {
}
.blog-content-boxtwo {
	padding: 15px;
}
.blog-slider-block img {
	width: 100% !important;
	height: auto !important;
}
.blog-slider-block .owl-dots {
	position: absolute;
	left: 46%;
	bottom: 20px;
}
.blog-slider-block .owl-dot {
	height: 20px;
	width: 20px;
	background: #837ED8;
	border-radius: 4px;
	display: block;
	float: left;
	margin: 0 4px;
	transition: 0.4s;
}
.blog-slider-block .owl-dot.active {
	background: #ffffff;
}
.detail-blog-box {
	margin-top: 30px;
}
.detail-blog-box h4 {
	text-transform: inherit;
	font-weight: 400;
	line-height: 35px;
}
.blog-writer-box {
	font-weight: 400;
	color: #837ED8;
	margin-bottom: 5px;
}
.blog-writer-box a {
	color: #333;
}
.blog-code-box {
	background: #837ED8;
	padding: 45px 60px;
	font-size: 25px;
	font-weight: 300;
	margin: 50px 0px;
}
.blog-code-box i {
	margin-right: 10px;
	font-size: 32px;
}
.blog-code-box p {
	font-size: 25px;
	font-weight: 300;
	color: #fff;
	line-height: 40px;
}
.blog-code-box h6 {
	font-size: 13px;
	font-weight: 700;
	text-transform: capitalize;
	margin-top: 21px;
	color: #fff;
}
.detail-blog-box blockquote {
	border-left: 5px solid #837ED8;
}
.detail-blog-box blockquote p {
	margin-bottom: 10px;
}
.social-link {
	margin: 20px 0;
}
.social-link h6 {
	font-size: 20px;
	color: #837ED8;
	text-transform: capitalize;
}
.social-link i {
	font-size: 17px;
	width: 50px;
	color: #fff;
	transition: .4s;
	height: 45px;
	line-height: 45px;
	text-align: center;
	border-radius: 3px;
	margin-right: 10px;
}
.fac {
	background: #4267B2;
}
.twi {
	background: #1DA1F2;
}
.google {
	background: #BD081C;
}
.lin {
	background: #007BB6;
}
.social-link i:hover {
	color: #ffffff;
}
/* blog sidebar */


.blog-sidebar-block {
	padding: 15px;
}
.search-block {
	margin-bottom: 30px;
}
.search-block form {
	width: 90%;
}
.search-block input {
	height: 45px;
	width: 75%;
	text-indent: 10px;
	border: 1px solid #ccc;
	float: left;
	border-radius: 0px;
}
.search-block button {
	color: #837ED8;
	background-color: #f5f5f5;
	height: 45px;
	width: 20%;
	border: 1px solid #ccc;
	border-left: 0px;
	float: left;
	border-radius: 0;
}
.search-block button:hover {
	background: #f5f5f5;
}
.single-sidebar-item {
	margin-bottom: 30px;
}
.single-sidebar-item h3 {
	font-size: 20px;
	letter-spacing: 2px;
	font-weight: 400;
	text-transform: capitalize;
	margin-bottom: 20px;
}
.single-sidebar-item li {
	margin-bottom: 10px;
}
.single-sidebar-item li a {
	font-size: 12.5px;
	font-weight: 400;
	color: #777;
	letter-spacing: 0.5px;
}
.single-sidebar-item li a:hover {
	color: #837ED8;
}
.single-sidebar-item li a i {
	margin-right: 5px;
}
.recent-post-box {
	margin-bottom: 15px;
	border-bottom: 1px solid #f5f5f5;
	padding-bottom: 15px;
}
.recent-promo-item {
	width: 30%;
	float: left;
}
.recent-promo-item img {
	border-radius: 8px;
}
.recent-promo-item-content {
	width: 67%;
	margin-left: 2%;
	float: left;
	padding-left: 15px;
}
.recent-promo-item-content h5 {
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: capitalize;
	color: #777;
}
.recent-promo-item-content p {
	font-size: 12px;
	letter-spacing: 0.5px;
	color: #777;
}
.tags a {
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: capitalize;
	color: #777;
	background-color: #f5f5f5;
	padding: 7px 12px;
	margin-right: 5px;
	margin-bottom: 8px;
	display: inline-block;
}
.tags a:hover {
	color: #fff;
	background: #837ED8;
}
.blog-text-box {
}
.blog-text-box p {
	font-size: 13px;
}
/* ==============================
   Team Area
   ============================== */ 
 

.team-section {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKUlEQVQYV2P89u3b/////zNwc3MzMkABI0gQxObi4kIIwmSRabgsQUEACOQLBl9RfzEAAAAASUVORK5CYII=)repeat;
	text-align: center;
}
.team-content {
	margin-bottom: 40px;
}
.team-blog-block {
	margin-top: 20px;
}
.team-view-box img {
	display: block;
	max-width: 100%;
	height: auto;
	padding: 0px;
}
.team-info-wrapper {
	margin-bottom: 20px;
	transition: 4s;
	border-radius: 6px;
	background-color: #fff;
	display: inline-block;
	overflow: hidden;
}
.team-heading-box p {
	font-size: 13px;
}
.team-info-wrapper:hover .team-heading-box {
	background: #837ED8;
}
.team-info-wrapper:hover .team-heading-box h6 {
	color: #fff;
}
.team-info-wrapper:hover .team-heading-box p {
	color: #fff;
}
.team-info-wrapper:hover .team-heading-box i {
	color: #837ED8;
}
.team-view-box {
	margin: 0px;
	transition: .4s;
	text-align: center;
	background: #fff;
	position: relative;
}
.team-heading-box h6 {
	font-size: 20px;
	margin: 0px;
	font-weight: 700;
	text-transform: capitalize;
	letter-spacing: 0px;
}
.team-heading-box {
	padding: 10px;
}
.team-heading-box p {
	margin-top: 5px;
}
.team-view-box a {
	background-color: #f6f6f6;
	padding: 8px 6px;
	display: inline-block;
}
.team-view-box i {
	color: #777777;
	font-size: 14px;
	margin: 0 5px;
}
.team-info-wrapper .social-icon {
	margin-top: 8px;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 20px;
}
/* ==============================
   Work Area
   ============================== */
   
   
.brand-section {
}
.brand-section .owl-carousel .owl-item img {
	width: auto;
}
.brand-item {
	margin: 0px 6px;
}
.brand-item img {
	margin: 0 auto;
	padding: 8px 16px;
	background-color: #ffffff;
	border: 2px solid #ccc;
}
/* ==============================
   Gmap Area
   ============================== */

   
 
.contact-info-block {
	margin-top: 24px;
}
.contact-info-block p {
	margin-bottom: 5px;
}
.contact-info-block i {
	font-size: 14px;
	margin-right: 10px;
}
.contact-info-block span {
	font-size: 14px;
	color: #777777;
	width: 30%;
	font-weight: 400;
	letter-spacing: 1px;
}
.contact-gmap-section {
	overflow: hidden;
	text-align: center;
	background: #F5F5F5;
}
.gmap {
	margin-left: 0px;
	margin-top: 40px;
}
.gmap iframe {
	width: 100%;
	height: 250px;
}
/* ==============================
   Contact Area
   ============================== */ 
   
   
.contact-area {
	background: #F5F5F5;
}
.contact-area.container-fluid {
	width: 100%;
}
.form-group {
	margin-bottom: 8px !important;
}
.form-ct {
	border-radius: 0;
	height: 48px;
	margin-bottom: 8px;
}
.form-control:focus {
	border-color: #837ED8;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(220,63,75,.075), 0 0 8px rgba(220,36,75,.2);
	box-shadow: inset 0 1px 1px rgba(220,63,75,.075), 0 0 8px rgba(220,36,75,.2);
}
.btn {
	margin: 20px 0px;
}
.contact-form {
	text-align: center;
}
.help-block {
	display: block;
	margin-top: 5px;
	margin-bottom: 10px;
	text-align: left;
	padding-left: 10px;
	color: red;
	font-size: 13px;
	font-weight: 600;
}
/* ==============================
   footer-section
   ============================== */

   
.footer-section {
	text-align: center;
}
.footer-content-wrapper {
	color: #111;
}
.footer-content-wrapper img {
	width: 120px;
	height: auto;
	margin-bottom: 30px;
}
.footer-content-wrapper p {
	color: #777;
}
.footer-social-media {
	margin-bottom: 30px;
}
.footer-social-media i {
	font-size: 14px;
	text-align: center;
	height: 45px;
	width: 45px;
	line-height: 45px;
	border-radius: 6px;
	transition: .3s;
	border: 1px solid #ccc;
	margin-right: 5px;
	color: #837ED8;
}
.footer-social-media i:hover {
	background: #837ED8;
	border: 1px solid #837ED8;
	color: #fff;
}
/*

===============================
 Intro page
===============================

*/
.intro img {
	width: 180px;
	height: auto;
	margin: 0 auto;
}
.single-intro {
	text-align: center;
	margin: 30px 0;
	transition: 0.2s;
}
.single-intro:hover {
	opacity: 0.7;
}
.single-intro img {
	transition: 0.2s;
}
.single-intro p {
	color: #666;
	font-size: 16px;
	font-weight: 700;
	margin-top: 15px;
}
/*	Features Area	*/

.site-features {
}
.single-site-feature {
	text-align: center;
	margin-bottom: 50px;
}
.single-site-feature h3 {
	color: #666;
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: 300;
}
.single-site-feature i {
	color: #837ED8;
	font-size: 40px;
	transition: .4s;
}
.single-site-feature:hover i {
	transform: scale(1.3);
}

/*

===============================
 Responsive Media queries
===============================

*/


/* Tablet Layout: 768px. */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.service4 {
	margin: 25px 0;
	padding: 20px;
}
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {
}

/* Tablet Layout: 768px. */

@media only screen and (min-width: 640px) and (max-width:960px) {
.service-line-box li {
	padding: 1px !important;
}
.team-info-wrapper {
	margin-bottom: 40px;
}
.service-parallax-wrapper i {
	font-size: 65px !important;
}
}

/* Mobile Layout: 320px. */

@media only screen and (max-width: 767px) {
#myNavbar {
	background: #1C4359;
}
#myNavbar ul li a {
	color: #fff;
	line-height: 35px;
}
.navbar-default .navbar-collapse {
	border-color: transparent !important;
}
.contact-form {
	margin-left: 0px;
	margin-right: 0px;
}
.team-info-wrapper {
	margin-bottom: 40px;
}
.skillbar-wrapper {
	margin: 10px 25px;
}
.slider-content-cell h2 {
	font-size: 30px;
}
.slider-content-cell p {
	font-size: 14px;
}
.banner-slider-block .owl-nav div {
	height: 40px;
	width: 40px;
	line-height: 40px;
	top: 56%;
	margin: 0;
}
.parallex-heading-block h1 {
	font-size: 40px;
}
.service-parallax-wrapper i {
	font-size: 45px;
}
.fixed-heading-block h1 {
	font-size: 40px;
}
.fixed-heading-block p {
	font-size: 14px;
}
}

/* Wide Mobile Layout: 480px. */

@media only screen and (min-width: 480px) and (max-width: 767px) {
#myNavbar {
	background: #837ED8;
}
#myNavbar ul li a {
	color: #fff;
	line-height: 35px;
}
#myNavbar ul li a:hover {
	color: #ccc;
}
.navbar-default .navbar-collapse {
	border-color: transparent !important;
}
.overlax {
	padding: 60px;
}
}

@media (max-width: 640px) {
.slider-info-text-box h1{
	line-height: 30px;
	font-size: 30px;
}
.overlax h2{
	font-size: 18px;
	line-height: 30px;
}
.parallex-heading-block h1{
	font-size: 20px;
	line-height:24px;
}
.service-parallax-wrapper i{
	width:100%;
}
.service-parallax-wrapper{
	text-align:center;
}
.service-parallax-wrapper-content{
	width:100%;
	text-align:center;
}
.banner-text-heading-block h2{
	font-size:30px;
}
.banner-text-heading-block span{
	font-size:20px;
}
.service-line-box::before{
	display:none;
}
.service-line-box li::before{
	display:none;
}
.service-line-box ul{
	padding:0px;
}
.portfolio-menu-link button {
	width: 100% !important;
}
.blog-code-box p {
	font-size: 14px;
	line-height: 24px;
}
}	
/* End of Stylesheet */