/* font-face */


/* Light */
@font-face {
    font-family: "JF Flat Light";
    src: url('../fonts/JF-Flat-light.eot');
    src: url('../fonts/JF-Flat-light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/JF-Flat-light.svg#JF Flat Light') format('svg'),
    url('../fonts/JF-Flat-light.woff') format('woff'),
    url('../fonts/JF-Flat-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Regular */
@font-face {
    font-family: "JF Flat Regular";
    src: url('../fonts/JF-Flat-regular.eot');
    src: url('../fonts/JF-Flat-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/JF-Flat-regular.svg#JF Flat Regular') format('svg'),
    url('../fonts/JF-Flat-regular.woff') format('woff'),
    url('../fonts/JF-Flat-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Medium */
@font-face {
    font-family: "JF Flat Medium";
    src: url('../fonts/JF-Flat-medium.eot');
    src: url('../fonts/JF-Flat-medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/JF-Flat-medium.svg#JF Flat Medium') format('svg'),
    url('../fonts/JF-Flat-medium.woff') format('woff'),
    url('../fonts/JF-Flat-medium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}


/*CORE Style*/ 

body{font-family: "JF Flat Regular";}

a{outline: none!important}
h1, h2, h3, h4, h5, h6{color:#004875;font-family: "JF Flat Regular"; }
body , p , small ,strong , li{color: #58595b}
.blue-dark-color{color: #004875}
.blue-color{color: #0099d9}

/* navigation style */

.navbar-fixed-top{
    margin-bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0px 2px 15px 0px rgba(0, 72, 117, 0.15);
  z-index: 66;
}
.top-nav-collapse{background: #fff;}
.navbar .navbar-brand{
    height: auto;
}

.navbar .navbar-brand .logo{
    float: right;
}
.navbar .navbar-brand .slogan{
    float: right;
    margin-right: 20px;
    margin-top: 5px;
}

.navbar-nav{float: left!important}
.navbar .navbar-nav > li > a{
    color: #58595b;
    font-size: 0.9412rem;
    font-weight: 400;
    padding: 40px 10px;
}

.navbar .navbar-nav > li > a:hover,.navbar .navbar-nav > li > a:focus{color: #0099d9}
.navbar .navbar-nav > .active > a, .navbar .navbar-nav > .active > a:hover, .navbar .navbar-nav > .active > a:focus{
color: #fff;
background: rgba(0,72,117,1);
background: -moz-linear-gradient(top, rgba(0,72,117,1) 0%, rgba(0,152,217,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,72,117,1)), color-stop(100%, rgba(0,152,217,1)));
background: -webkit-linear-gradient(top, rgba(0,72,117,1) 0%, rgba(0,152,217,1) 100%);
background: -o-linear-gradient(top, rgba(0,72,117,1) 0%, rgba(0,152,217,1) 100%);
background: -ms-linear-gradient(top, rgba(0,72,117,1) 0%, rgba(0,152,217,1) 100%);
background: linear-gradient(to bottom, rgba(0,72,117,1) 0%, rgba(0,152,217,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004875', endColorstr='#0098d9', GradientType=0 );
}

.navbar .navbar-toggle{
    padding: 35px;
    margin: 10px;
    border-radius: 0;
}

.navbar .navbar-toggle .icon-bar{
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background-color: #58595b;
}

/* social icon */
.social-icon{
    padding-top: 30px;
    padding-left: 20px;
}
.social-icon li{
    float: right;
    margin-right: 10px;
}
.social-icon li a{
    font-weight: 600;
    font-size: 18px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 3px;
}
.social-icon .fa-facebook{color: #3b5998}
.social-icon .fa-linkedin{color: #007bb5}
.social-icon .fa-twitter{color: #55acee}




/* header slider */

.swiper-slider{
    box-shadow: 0px 0px 30px 0px rgba(0, 72, 117, 0.8);
    z-index: 8;
    height: 630px!important;
    margin-top: 100px;
}
.swiper-slide {
        text-align: center;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

.swiper-slider .swiper-slide{
    background-position: bottom center;
    background-size: cover;
}

.swiper-slider .slide-title{text-transform: uppercase;font-weight: 400;line-height: 40px;text-shadow: 0px 2px 2px #fff;width:650px;background: RGBA(255, 255, 255, 0.6);
padding: 15px;font-size:26px}

.swiper-slider .swiper-pagination{
    text-align: left;
    padding-right: 40px;
    padding-bottom: 40px;
    bottom: 0;
}

.swiper-slider .swiper-pagination-bullet{
    width: 15px;
    height: 15px; 
    margin: 0 2px;
}
.swiper-slider .swiper-pagination-bullet-active{
    background: #fff;
    border: 2px solid #0099d9;
}

/*  home content */

.content-section{
    padding: 70px 0;
}

.upload-block{
    padding-top: 60px;
}
.upload-block img{
    float: right;
    margin-left: 20px;
}
.upload-block h2{
    font-weight: 600;
    color: #0099d9;
    font-size:50px;
    margin: 0;
}

.upload-block  span{
    font-weight: 200;
    clear: both;
    font-size: 26px;
    display: inline-block;
    color: #0099d9;
}

.upload-block p{
    margin: 20px 0;
}

.upload-block .btn , .upload-block .btn:hover{
    background-color: #fff!important;
    color: #0099d9!important;
    text-transform: none;
    font-size: 18px;
}

/* job slider */

.job-slider {
    height: 390px!important;
    position: relative;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.job-slider-h4{
    margin-bottom: 40px;
    margin-top: 0;
}
.job-slider .job-content{
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
    text-align: right;
    display: block;
    width: 100%;
}
.job-slider .job-content .btn{
    background-color: #f2f2ef;
    color: #0099d9;
    float: left;
    padding: 10px 15px;
    margin: 20px;
    box-shadow: none;
}
.job-slider .job-content .btn:hover ,.job-slider .job-content .btn:focus{
    background-color: #0099d9!important;
    color: #fff!important;
    float: left;
    padding: 10px 15px;
    margin: 20px;
    box-shadow: none;
}

.job-slider .job-item{
    float: right;
}
.job-slider .job-item h4{
    margin-top: 0;
    font-weight: 300;
    font-size: 26px;
}
.job-slider .job-item p{
    margin-top: 0;
    font-size: 16px;
    font-weight: 300;
}

.job-slider .job-item ul{margin: 0;}
.job-slider .job-item ul li{
    float: right;
    margin-left: 15px;
    font-size: 14px;
    font-weight: 300;
}
.job-slider .job-item ul li i{
    margin-left: 10px;
}
.swiper-button-next, .swiper-button-prev{
    width: 50px!important;
    height: 50px!important;
    top: auto !important;
    color: #0099d9;
    background-image: none!important;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.swiper-button-next{
    left: -50px !important;
    right: auto!important;
    bottom: 0;
}

.swiper-button-prev{
    left: -50px !important;
    bottom: 50px!important;
    right: auto;
}

.swiper-button-next i, .swiper-button-prev i{
   font-size: 50px; 
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
    cursor: not-allowed;
    color: #58595b
}

.job-slider .swiper-pagination-progress {
    z-index: 90;
    right: 0;
    left: auto;
}
.job-slider .swiper-pagination-progress .swiper-pagination-progressbar{background: #0099d9}

/* clients style */ 
.clients{
    padding-bottom: 30px;
}
.clients h4{
    margin: 0;
}

.clients .swiper-wrapper{
    padding: 40px;
}
.client-img{
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    padding: 15px;
    overflow: hidden;
    margin-bottom: 30px;
    transition: box-shadow .25s;

}

.client-img img{margin: auto}


.swiper-pagination-client{
    text-align: center;
    padding-right: 20px;
    padding-bottom: 20px;
    position: relative;
}

.swiper-pagination-client .swiper-pagination-bullet{
    width: 10px;
    height: 10px; 
    margin: 0 2px;
}
.swiper-pagination-client .swiper-pagination-bullet-active{
    background: #fff;
    border: 2px solid #0099d9;
}



/* footer style */
footer{
padding: 60px 0 30px 0;
background: rgb(0, 152, 217);
background: -moz-linear-gradient(250deg, rgb(0, 72, 117) 20%, rgb(0, 152, 217) 80%);
background: -webkit-linear-gradient(250deg, rgb(0, 72, 117) 20%, rgb(0, 152, 217) 80%);
background: -o-linear-gradient(250deg, rgb(0, 72, 117) 20%, rgb(0, 152, 217) 80%);
background: -ms-linear-gradient(250deg, rgb(0, 72, 117) 20%, rgb(0, 152, 217) 80%);
background: linear-gradient(340deg, rgb(0, 72, 117)) 20%, rgb(0, 152, 217) 80%);
}

.newsletter img{
    float: right;
    margin-left: 20px;
}

.newsletter h4{
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
}

.newsletter h4 span{
    float: right;
    font-weight: 300;
    font-size: 18px;
}

.mail-form{
    margin-top: 50px;
}
.mail-form label{
    color: #fff;
    position: absolute;
    top: 0.8rem;
    left: 0.75rem;
    font-size: 1rem;
    cursor: text;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
}

.mail-form label.active{
    color: #003c62!important;
}

.mail-form input[type="email"]{
    border-bottom: 2px solid #fff;
    text-align: left;
}

.mail-form input[type="email"]:focus {
    border-color: #003c62;
    box-shadow: none;
    border-width: 2px;
   }

.mail-form button{
position: absolute;
top: 0px;
right: 0px;
background-color: transparent;
border: 0px none;
}

.mail-form button i{
    font-size: 35px;
}

 /* valid color */
   .mail-form input[type="email"].valid {
     border-bottom: 2px solid #36de8d;
     box-shadow: none;
   }
   /* invalid color */
   .mail-form input[type="email"].invalid {
     border-bottom: 2px solid #FF4E40;
     box-shadow: none;
   }

.mail-form input.valid[type="email"] + label::after, input.valid[type="email"]:focus + label::after{color: #36de8d;left: 0}
.mail-form input.invalid[type="email"] + label::after, input.invalid[type="email"]:focus + label::after{color: #FF4E40;left: 0}


footer p{
    margin: 0px;
    line-height: normal;
    font-size: 14px;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
}
footer nav{text-align: left;}
footer nav a{
    margin-right: 15px;
    font-weight: 300;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
}





/************* INNER PAGES  ***************/

.inner-section{min-height: 800px;}

.inner-header{
    padding-top: 100px;
    padding-bottom: 60px;
}
.inner-header h4{margin: 30px 0px;}

.header-ico{
    background: #0099d9;
    border-radius: 100px;
    margin: auto;
    max-width: 100px;
    height: 100px;
    padding: 20px;
}
.border{width: 130px;height: 2px;display: block;margin: auto;background: #0099d9}





/**** Forms  ****/

.file-upload{padding-top: 60px!important;margin: 0!important}
.pop-up-btn{
    background: #fff!important;
    color: #0099d9!important;
    padding: 20px;
    margin: 20px 0;
}

/* label color */
   .border-form .input-field label {
     color: #58595b;
     right: 0.75rem;
   }
   
   .border-form .input-field label.active{color:#0099d9!important}
   /* label focus color */
   .border-form .input-field input:focus + label, .border-form .input-field textarea:focus + label{
     color: #0099d9;
       
   }
   /* label underline focus color */
   .border-form .input-field input:focus, .border-form .input-field textarea:focus{
     border-bottom: 1px solid #0099d9;

   }

/* input color */
   .border-form .input-field input , .border-form .input-field textarea {
     color: #58595b;
   }

   /* valid color */
   .border-form .input-field input.valid{
     border-bottom: 2px solid #00C851;
     box-shadow:none;
   }
   /* invalid color */
   .border-form .input-field input.invalid{
     border-bottom: 2px solid #F44336;
     box-shadow: none;
   }

.input-field .prefix ~ input, .input-field .prefix ~ textarea{
    margin-right: 3rem;
    margin-left: auto;
}

.input-field .prefix ~ label {
    margin-right: 3.8rem;
    margin-left: auto;
}

   /* icon prefix focus color */
   .border-form .input-field .prefix{
     color:#58595b;
   }
   .border-form .input-field .prefix.active{
     color: #0099d9;
   }

.submit-form .btn {
    padding: 20px;
    background: #0099d9;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}



/* Find Job */

.job-filter .btn{
    padding: 20px;
    background: #58595b;
    color: #fff;
    font-weight: 300;
    width: 75px;
    border-radius: 100%;
    height: 75px;
    line-height: 36px;
    display: inline-block;
    margin-right: 40px!important;
    box-shadow: none;
    margin: 0;
}

.job-filter .btn i{font-size: 40px;}

.job-list{padding-top: 60px;}

.post-date , .post-category, .post-loaction{color: #0099d9;margin-right: 10px;padding: 0 5px;}
.jobs .btn{margin: 10px 0;}

.pagination li{float: right;}

/*  Job page */

.job-info span{color: #58595b;padding: 0 20px;}
.share-btn{
    padding-top: 20px;
}
.share-btn a{
    padding: 20px;
    font-size: 14px;
    color: #fff;
    display: inline-flex;
    transition: box-shadow .25s;
}
.share-btn a i{
    font-size: 20px;
    margin-left: 10px;
    color: #fff;
}

.at-share-btn,.at-share-btn span{padding:0!important;}



.facebook{background:#3b5998}
.twitter{background:#55acee}
.linkedin{background:#007bb5}




/*  contact us page */
#google-map{margin-bottom: 40px;}

.contact-info{
    margin-bottom: 40px;
}
.contact-info h4{margin-top: 0;}
.contact-btn{
    margin-top: 30px;
    background: #fff;
    color: #0099d9;
}

/*  paper-ad page */
.ad-content{margin-bottom: 40px;}
.ad-content h3{margin-top: 0;margin-bottom: 10px;}
.ad-content small{margin: 0;}
.ad-content a{margin: 0 5px}
.paper-img img{
    float: right;
    margin-left: 20px;
    width: 200px;
    height: 150px;
    margin-bottom: 20px;
}

/* Default custom select styles */
div.cs-select {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	text-align: right;
	background: #fff;
	z-index: 100;
	width: 100%;
	max-width: 500px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.cs-select:focus {
	outline: none; /* For better accessibility add a style for this in your skin */
}

.cs-select select {
	display: none;
}

.cs-select span {
	display: block;
	position: relative;
	cursor: pointer;
	padding: 1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #58595b;
}

.cs-selected span{color:#0099d9;}

/* Placeholder and selected option */
.cs-select > span {
	padding-right: 3em;
}
.cs-select > .cs-placeholder{padding-top:5px;padding-right:20px;}
.cs-select > .cs-placeholder::after{top:30%;}

.cs-select > span::after,
.cs-select .cs-selected span::after {
	speak: none;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cs-select > span::after {
	content: '\25BE';
	left: 1em;
}

.cs-select .cs-selected span::after {
	content: '\2713';
	margin-left: 1em;
}

.cs-select.cs-active > span::after {
	-webkit-transform: translateY(-50%) rotate(180deg);
	transform: translateY(-50%) rotate(180deg);
}

div.cs-active {
	z-index: 200;
}

/* Options */
.cs-select .cs-options {
	position: absolute;
	overflow: hidden;
	width: 100%;
	background: #fff;
	visibility: hidden;
    box-shadow: 0px 0px 5px #ddd;
    top:0;
    left: 0;
    
}

.cs-options ul li:hover{background:#EAEAEA;}

.cs-select.cs-active .cs-options {
	visibility: visible;
}

.cs-select ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-height:250px;
	overflow-x: scroll;
}

.cs-select ul span {
	padding: 1em;
}

.cs-select ul li.cs-focus span {
	background-color: #ddd;
}

/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
	padding-left: 1em;
}

.cs-select li.cs-optgroup > span {
	cursor: default;
}


div.cs-skin-border {
	background: transparent;
	font-size: 16px;
    font-weight: 500;
	max-width: 600px;
    border-bottom: 1px solid #9e9e9e;
    margin-right: 40px;
	width:92%;
    height: 3rem;
}


/* /////////////////  breakpoint style  //////////////////// */  

@media only screen and (min-width: 768px) { 
    .navbar .navbar-toggle{display: none;}
    .navbar-nav{float: right}
    
}

@media (min-width: 768px) and (max-width: 1024px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none!important;
    }
    .navbar .navbar-nav > li > a{font-size: inherit; width: 100%}
}






@media (min-width: 320px) and (max-width: 480px){
        .upload-block img{float: none;margin: auto;margin-bottom: 20px;}
    .upload-block h2{text-align: center;}
    .upload-block span{display: block;text-align: center;}
    .newsletter img{float: none;margin: auto;margin-bottom: 20px;}
    .newsletter h4{text-align: center;}
.navbar .navbar-nav > li > a{font-size: inherit;}
    .navbar .navbar-brand .logo{float: none;margin: auto;}
    .navbar .navbar-brand .slogan{float: none;margin: auto;}
    .navbar .navbar-brand{width: 100%;}
    .navbar .navbar-toggle{padding: 15px;position: absolute;top: 10px;left: 10px;}
    .navbar .navbar-toggle .icon-bar{width: 30px;}
    .job-slider .job-content .btn{margin: 5px 0;}
    .job-slider .job-content .btn:hover ,.job-slider .job-content .btn:focus{margin: 5px 0}
    .newsletter h4 span{float: none;display: block;}
    .navbar-fixed-top{position: absolute;}
    
}

@media (min-width: 320px) and (max-width: 360px){
	.navbar .navbar-brand{padding:10px 0!important;}
	.navbar .navbar-brand .logo{
		float: right;
		margin-left: 15px;
		margin-bottom: 0;
		margin-top:5px;
		width: 60px;
	}
	.navbar .navbar-brand .slogan{
	float: right;
	width: 130px;
	margin-top: 7px;
	}
	.navbar-nav{float:right!important}
	.navbar .navbar-toggle{left:0;top:5px;}
	.navbar-fixed-top {position: fixed;}
	.navbar .navbar-nav > li > a {padding: 12px 17px!important;}
	.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {max-height: inherit;}
	.swiper-slider .slide-title{font-size:20px;line-height:inherit}
	.upload-block p {
    margin: 20px 0;
    text-align: center;
    font-size: inherit;
}
.clients h4 {font-size: 24px;}
.newsletter h4 span{font-size:14px;float:none;}
footer nav a{font-size:12px;;margin:0 5px}
}

@media only screen and (max-width: 768px) {
    .navbar-nav{width: 100%}
    .navbar-nav > li{width: 100%;font-size: inherit!important;}
    .navbar .navbar-nav > li > a{padding: 20px 17px;}
    .navbar-fixed-top{padding: 0 20px;}
    .navbar .navbar-nav > .active > a, .navbar .navbar-nav > .active > a:hover, .navbar .navbar-nav > .active > a:focus{color: rgba(0,72,117,1);background: transparent!important;}
    .social-icon{border-top: 1px solid #ddd;}
    .social-icon li{margin-bottom: 30px;}
    .swiper-button-next, .swiper-button-prev{display: none;}
    footer p{text-align: center;margin-bottom: 20px;}
    footer nav {text-align: center}
    
    
}

@media only screen and (max-width: 1190px) {

.job-filter .btn{margin: auto!important;display: block}
    .navbar-fixed-top{background: #fff;}
}