/* General
========================*/
*,
:focus {
    outline: 0!important;
}

/*Fonts
========================*/
@font-face {
    font-family: "myfont";
    src:url('../css/font/myfont.woff2') format('woff2'),
        url('../css/font/myfont.woff') format('woff'),
        url('../css/font/myfont.eot') format('eot'),
        url('../css/font/myfont.ttf') format('truetype'),
        url('../css/font/myfont.otf') format('opentype');
}
@font-face {
    font-family: "myfontxlt";
    src:url('../css/font/myfontxlt.otf') format('opentype');
}

body {
    font-family: "myfont";
    overflow-x: hidden;
    overflow-y: hidden;
    line-height: 25px;
    font-weight: 100;
    letter-spacing: .5px;
    color: #666;
}

/* Lists- Links
========================*/
a,a:hover,a:focus {
    text-decoration: none;
}
ul,li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Custom-lists
=======================*/
.dot-lists{
	overflow:hidden;
    text-align: right;
}
.dot-lists li{
    padding-left: 15px;
    line-height: 35px;
    color: #555;
    letter-spacing: 1px;
    font-size: 15px;
    text-align: left;
    position: relative;
    text-transform: capitalize;
}
.dot-lists li:before{
    content: " ";
    position: absolute;
    left: 0;
    top: 15px;
    width: 5px;
    height: 5px;
}

/* img
========================*/
img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/*Text
========================*/
.head-title{
    display: block;
    margin: 15px 0;
    font-size: 30px;
    text-transform: capitalize;
    letter-spacing: 1px;
    color: #ffffff;
    line-height: 40px;
}
.info-text{
    display: block;
    position: relative;
    line-height: 25px;
    font-size: 16px;
    color: #f9f9f9;
    margin: 15px auto;
}

/* Forms
========================*/
.form-title{
    display: block;
    position: relative;
    text-transform: uppercase;
    font-size: 25px;
    letter-spacing: 3px;
    margin-bottom: 15px;
}
.form-group {
    position: relative;
    overflow: hidden;
    margin: 5px auto;
}
.form-group label {
    display: block;
    text-align: left;
    font-weight: 100;
    font-size: 14px;
    line-height: 30px;
    margin: 0px 0 10px;
    color: #666;
    letter-spacing: 1px;
    text-transform: capitalize;
}
.form-control {
    color: #2c455b;
    border: 1px solid #f1f1f1;
    margin: 0 auto;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    border-radius: 0;
    font-size: 15px;
    letter-spacing: 1px;
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.form-control:hover,
.form-control:focus {
    outline: 0;
    border: 1px solid #f1f1f1;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
textarea.form-control {
    height: 120px!important;
    resize: none;
    overflow-x: hidden;
    line-height: 30px;
}
input[type=radio],
input[type=checkbox] {
    display: none;
}
input[type=radio]+label,
input[type=checkbox]+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
}
input[type=radio]+label::before,
input[type=checkbox]+label::before {
    content: "";
    display: block;
    text-align: center;
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: inherit;
    background: #fff;
    border: 1px solid #e5e3e3;
    border-radius: 50%;
    font-size: 12px;
}
input[type=checkbox]+label::before {
    top: 0;
    border-radius: 0;
}
input[type=radio]+label:empty,
input[type=checkbox]+label:empty {
    width: 22px!important;
    padding-left: 0;
    margin: 0!important;
}
.radio-wrap {
    clear: both;
    overflow: hidden;
    display: block;
    padding: 0 5px;
}
.radio-wrap label {
    width: 100%;
    border-radius: 0;
    font-weight: normal;
    margin: 0;
}
.radio-wrap span{
	display: inline-block;
	text-transform: capitalize;
	font-size: 13px;
	vertical-align: text-bottom;
}
.radio-wrap input[type="radio"]:empty, 
.radio-wrap input[type="checkbox"]:empty {
    display: none;
}
.radio-wrap input[type="radio"]:empty ~ label,
.radio-wrap input[type="checkbox"]:empty ~ label {
    line-height: 45px;
    height: 45px;
}

/* Date Picker
========================*/
.datetimepicker {
    padding:0px 5px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0;
    border-color: #f1f1f1;
    box-shadow: none;
    width: 230px!important;
    right: auto!important;
    float: none!important;
}
.input-group{
    position: relative;
}
.datetimepicker table {
    margin: 0;
    width: 100%;
}
.datetimepicker td, .datetimepicker th {
    border-radius: 0;
    border: 0;
    font-weight: 100;
    font-size: 13px;
}
.input-group{
    border-radius: 0;
}
.input-group .form-control{
    background: #fff;
    border: 1px solid #f1f1f1;
}
.input-group-addon {
    padding: 6px 12px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-align: center;
    border: 0;
    border-radius: 0;
}

/* Button
========================*/
.custom-btn {
    display: inline-block;
    position: relative;
    line-height: 40px;
    font-weight: normal;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-size: 14px;
    padding: 0 15px;
    border: 0;
    overflow: hidden;
    border-radius: 3px;
    text-align: center;
    color: #ffffff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: .1s all;
    -moz-transition: .1s all;
    transition: .1s all;
}
.custom-btn svg{
    margin: 0 5px;
    display: inline-block;
}
.custom-btn:hover ,
.custom-btn:focus {
    color: #fff !important;
    background:#1b1717 !important;
}
.input_fields_container{
    overflow: hidden;
    display: block;
    margin-bottom: 5px;
    background: #f9f9f9;
    margin: 0 15px 15px;
    position: relative;
    padding: 25px 0px 5px 0px;
}
.input_fields_container .add-btn , 
.input_fields_container .remove-btn {
    top: 0;
    right: 0;
    width: 30px;
    padding: 0 0 2px 0;
    line-height: 30px;
    position: absolute;
    text-align: center;
    border: 0;
    color: #fff;
    font-size: 30px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/*Tabs
========================*/
.nav-tabs {
    border-bottom: 0;
    position: relative;
    z-index: 999;
    border-top: 1px solid #f9f9f9;
    padding: 0;
}
.nav-tabs>li {
    float: none;
    margin: 0;
    width: 100%;
    display: block;
}
.nav-tabs>li>a {
    display: block;
    position: relative;
    margin: 0;
    line-height: 50px;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: #2b4459;
    background: #ffffff;
    border-bottom: 1px solid #f9f9f9;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: capitalize;
    text-align: left;
}
.nav-tabs>li>a>span{
    background: #fff;
    height: 50px;
    float: left;
    width: 45px;
    margin-right: 10px;
    text-align: center;
    border-right: 1px solid #f9f9f9;
    position: relative;
}
.nav-tabs>li>a:focus>span:after,
.nav-tabs>li>a:hover>span:after,
.nav-tabs>li.active>a:hover>span:after,
.nav-tabs>li.active>a>span:after{
    content: " ";
    position:absolute;
    border-top: 10px solid transparent;
    border-right: 10px solid #ffffff;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    right: -1px;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0 auto auto;
    width: 20px;
    height: 20px;
}
.nav-tabs>li>a:focus>span:after,
.nav-tabs>li>a:hover>span:after{
    border-right: 10px solid #fdfdfd;
    right:0;
}
.nav-tabs>li:last-child a{
    border-bottom: 0;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    color: #2b4459;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #f9f9f9;
}
.nav-tabs>li>a:focus,
.nav-tabs>li>a:hover {
    color: #2b4459;
    background: #fdfdfd;
    border: 0;
    border-bottom: 1px solid #f9f9f9;
}
.nav-tabs>li.active>a span,
.nav-tabs>li.active>a:focus span,
.nav-tabs>li.active>a:hover span{
    color: #fdfdfd;
}
.nav-tabs>li>a:focus span,
.nav-tabs>li>a:hover span{
    color: #2b4459;;
    background: #fdfdfd;
}
.nav-tabs li a .stat{
    float: right;
    text-align: center;
    border-left: 1px solid #fdfdfd;
    line-height: 30px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #fff;
    margin: 10px 5px;
    width: 50px;
}
.nav-tabs li a .stat.ful-comp{
    background: #00c853;
}
.nav-tabs li a .stat.half-comp{
    background: #ffd740;
    color: #2c456a;
}
.nav-tabs li a .stat.non-comp{
    background: #f44336;
}
.tab-content{
    position: relative;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
    display: block;
    background: #fff;
    padding: 0;
}
.tab-content>.tab-pane{
    background: #ffffff;
    margin-left: 15px;
    width: 100%;
    overflow: hidden;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.tab-content>.tab-pane>form{
    padding:15px;
    display: block;
    overflow: hidden;
}
.tab-content .fade{
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.tab-content .fade.in{
    opacity: 1;
    transform: translateX(-15px);
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}

/*Section title
========================*/
.section-title{
    display: block;
    position: relative;
    margin-bottom: 90px;
    text-align: center;
}
.section-title .title-border{
    display: block;
    width: 100%;
    height: 30px;
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.section-title .title-border img{
    display: block;
    margin: 0 auto;
    width: 30px;
}
.section-title .title-border:before{
    content: " ";
    position: absolute;
    height: 40px;
    width: 2px;
    right: 0;
    left: 0;
    top: -50px;
    bottom: auto;
    margin: auto;
    transform: rotate(-20deg);
}
.section-title.custom .title-border:before {
   display: none;
}
.section-title .title-border:after{
    content: " ";
    position: absolute;
    height: 40px;
    width: 2px;
    right: 0;
    left: 0;
    bottom: -50px;
    top: auto;
    margin: auto;
    transform: rotate(20deg);
 }
.section-title h3{
    color: #2c455b;
    display: block;
    position: relative;
    font-size: 30px;
    line-height: 35px;
    margin: 10px auto;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.section-title p {
    display: block;
    position: absolute;
    font-size: 66px;
    color: rgba(0,0,0,.02);
    line-height: 25px;
    letter-spacing: .5px;
    text-transform: capitalize;
    max-width: 767px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
@media all and (max-width:520px){
    .section-title h3{
        font-size: 22px;
    }
    .section-title p{
        font-size: 35px;
    }
}

/*Page Heading
================================*/
.page-head{
    display: block;
    position: relative;
    width: 100%;
    padding: 90px 0 40px;
    background: url(../images/bc.jpg) center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.page-head:before{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page-head .dot-lists li{
    color: #fff;
}
.page-head .dot-lists li:before{
    background: #fff;
}
.breadcrumb {
	background: none;
	text-align: center;
	font-size: 14px;
	margin: 0;
	padding: 0;
	line-height: 40px;
}
.breadcrumb > li + li:before {
	padding:0px 10px;
	color: #fff;
	content: " | ";
}
.breadcrumb li ,
.breadcrumb a {
	color: #f7f7f7;
	font-size: 15px;
	text-transform:capitalize;
	letter-spacing:.5px;
}
.breadcrumb a svg{
	margin-right: 5px;
}
.breadcrumb > .active {
    color: #fff;
}


/* Page Setting
========================*/
.wrapper {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    opacity: 0;
}
.main {
    display: block;
    position: relative;
    width: 100%;
}
.page-content {
    position: relative;
    display: block;
    width: 100%;
}
.section-setting{
    display: block;
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
}
.section-color{
    background:#fdfdfd;
}
.section-img{
    background: url(../images/bc.jpg) center;
    background-size: cover;
}
.section-img:before{
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    top: 0;
    left: 0;
}

/* Spacer
========================*/
.spacer-15{
    width: 100%;
    height: 15px;
    overflow: hidden;
    clear: both;
    display: block;
}
.spacer-20{
    width: 100%;
    height: 20px;
    overflow: hidden;
    clear: both;
    display: block;
}
hr {
    margin-top: 20px;
    margin-bottom: 0;
}

/*Header 
=============================*/
.header {
    display:block;
    position:fixed;
    width: 100%;
    min-height: 54px;
    top: 0;
    left: 0;
    z-index: 9998;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.header.cor{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}
.header > .container-fluid {
    position: relative;
    padding: 0;
}
.header .navbar-collapse > .container-fluid {
    position: relative;
    margin-top: -55px;
}

/*Header Logo
====================*/
.logo {
    position: relative;
    padding: 0 10px;
    float: left;
    z-index: 9999;
    line-height: 55px;
    color: #fff;
    font-size: 21px;
    text-transform: capitalize;
    letter-spacing: 1px;
    border-right: 1px solid rgba(0,0,0,0.06);
}
.logo:hover ,.logo:focus{
    color: #fff;
}
.logo span {
    display: inline-block;
    text-transform: uppercase;
    background: #fff;
    line-height: 35px;
    padding: 0 5px;
    border-radius: 3px;
}
.header .icon-login{
    float: right;
    z-index: 9999;
    position: relative;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 15px;
    margin: 0px auto;
    line-height: 55px;
    border-radius: 0;
    padding: 0 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 1px solid rgba(0,0,0,0.06);
}
.header .icon-login svg{
    margin-right: 5px;
}
.header .icon-login span{
    display:inline-block;    
}
.header .icon-login:hover{
    background: rgba(0,0,0,0.06);
    color:#fff;
}
.btn-responsive-nav {
    display: none;
}
@media all and (min-width:992px) {
    .nav-main > ul.navbar-nav > li {
        padding: 0;
        text-align: center;
        display: inline-block;
        float: none;
        margin-left: -5px;
    }
    .nav-main > ul.navbar-nav > li > a {
        display: block;
        line-height: 35px;
        position: relative;
        border-radius: 0;
        padding: 10px 25px;
        font-size: 14px;
        font-weight: normal;
        color: #fff;
        letter-spacing: 2px;
        border-left: 1px solid rgba(0,0,0,0.06);
    }
    .nav-main > ul.navbar-nav > li:last-child > a{
        border-right: 1px solid rgba(0,0,0,0.06);
    }
    .nav-main > ul.navbar-nav > li > a:before {
        content:" ";
        position:absolute;
        top:0;
        height: 0;
        width: 2px;
        right: 0;
        left: 0;
        margin: auto;
        background: #ffffff;
        transform: rotate(-20deg);
        -webkit-transition: .3s all;
        -moz-transition: .3s all;
        transition: .3s all;
    }
    .nav-main > ul.navbar-nav > li > a:after {
        content: " ";
        position: absolute;
        top: auto;
        bottom: 1px;
        height: 0;
        width: 3px;
        right: 0;
        left: 0;
        margin: auto;
        background: #fff;
        transform: rotate(20deg);
        -webkit-transition: .3s all;
        -moz-transition: .3s all;
        transition: .3s all;
    }
    .nav>li>a:focus,
    .nav>li>a:hover ,
    .nav-main > ul.navbar-nav > li:hover > a, 
    .nav-main > ul.navbar-nav > li.active > a {
        background: rgba(0,0,0,0.06);
        color: #fff;
    }
    .nav-main > ul.navbar-nav > li:hover > a:after,
     .nav-main > ul.navbar-nav > li.active > a:after ,
    .nav-main > ul.navbar-nav > li:hover > a:before,
     .nav-main > ul.navbar-nav > li.active > a:before{
        height: 15px;
        width: 2px;
        -webkit-transition: .3s all;
        -moz-transition: .3s all;
        transition: .3s all;
    }
}
@media all and (min-width:992px) and (max-width:1100px){
    .nav-main > ul.navbar-nav > li > a{
        padding: 10px;
    }
}
@media all and (max-width:991px) {
    .btn-responsive-nav {
        z-index: 9999;
        float: right;
        background: transparent;
        color: #fff;
        width: 55px;
        height: 55px;
        text-align: center;
        line-height: 55px;
        border-radius: 0;
        margin: 0;
        font-size: 27px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
        display: inline-block;
        padding: 0;
        vertical-align: bottom;
        border-left: 1px solid rgba(0,0,0,0.06);
    }
    .btn-responsive-nav:hover,
    .btn-responsive-nav:active, 
    .btn-responsive-nav:focus {
       color: #fff;
       background: rgba(0,0,0,0.06);
    }
    .btn-responsive-nav i {
        font-size: 17px;
        display: block;
        position: relative;
        line-height: 35px;
    }
    .header ul.navbar-nav {
        float: none;
        margin: 0px;
        padding: 10px 0px;
    }
    .header .navbar-collapse > .container-fluid {
        margin: 0;
    }
    .header .nav-main-collapse {
        top: 0px;
        position: relative;
        max-height: 450px;
        width: 100%;
        overflow: hidden;
    }
    .header .nav-main-collapse.collapse {
        display: none !important;
    }
    .header .nav-main-collapse.collapse.in {
        overflow-x: hidden !important;
        overflow-y: auto!important;
        display: block !important;
    }
    .header .nav-main {
        padding: 0;
        clear: both;
        display: block;
        float: none;
        width: 100%;
    }
    .header .nav-main ul li {
        clear: both;
        float: none;
        display: block;
    }
    .header .nav-main ul ul {
        margin-left: 20px !important;
    }
    .nav-main .navbar-nav li a {
        position: relative;
        display: block;
        font-size: 14px;
        font-weight: 100;
        color: #fff;
        border-radius: 3px;
        text-transform: uppercase;
        text-decoration: none;
        padding: 0 15px;
        line-height: 35px;
        text-align: left;
        margin: 2px 0;
        letter-spacing: 2px;
    }
    .nav-main .navbar-nav li a img {;
        display:none;
    }
    .nav-main .navbar-nav li a:focus {
        background: none;
    }
    .nav-main .navbar-nav li:hover > a ,
    .nav-main .navbar-nav li.active > a,
    .nav-main .navbar-nav li.active > a:hover ,
    .nav-main .navbar-nav li.open > a, 
    .nav-main .navbar-nav li.open > a:hover {
        background: rgba(0,0,0,.05);
        color: #fbfbfb;
    }    
}
@media all and (min-width:768px) {
    .navbar-nav {
        float: none;
        margin: 0px auto;
        padding: 0;
        text-align: center;
    }
}
@media all and (max-width:480px){
    .header .icon-login span{
        display: none;
    }
    .btn-responsive-nav{
        width: 50px;
        font-size: 24px;
    }
}
/* Intro
=============================*/
#intro{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#intro .container{
    position:absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 100px;
    overflow-y: auto;
}
#intro .logo{
    float: none;
    text-align: center;
    font-size: 36px;
    border: 0;
}
.intro-form{
    background: #fff;
    max-width: 420px;
    width: 100%;
    margin: 25px auto;
    overflow: hidden;
    padding: 15px 15px 5px;
    border-radius: 5px;
}
.intro-form .form-group{
    margin: 10px auto;
}

/* Welcome Screen
=============================*/
.welcome-screen{
    display: block;
    position: relative;
    width: 100%;
    padding: 90px 0 40px;
    background: url(../images/bc.jpg) center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.welcome-screen:before{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.welcome-screen .wel-cont{
    padding-top: 40px;
}
.welcome-screen .logo{
    display: block;
    font-size: 46px;
    margin: 15px auto;
    float: none;
    border: 0;
    z-index: 99;
}
.welcome-screen .logo span{
    display: inline-block;
    height: 50px;
    text-transform: uppercase;
    background: #fff;
    line-height: 50px;
    padding: 0 5px;
    border-radius: 3px;
}
.welcome-screen .wel-cont .custom-btn{
    margin:10px auto;
    background: #fff;
}

/* Shap */
.shap{
    position: relative;
}
.shap:before{
  content:'';
  width:50%;
  height:100px;
  position:absolute;
  bottom: -48px;
  left:0;
  background: #ffffff;
  transform: skewY(5deg);
}
.shap:after{
  content:'';
  width:50%;
  height:100px;
  position:absolute;
  bottom: -48px;
  right:0;
  background: #ffffff;
  transform: skewY(-5deg);
}

/* Scroll Down  */
.scroll-down {
    font-size: 20px;
    color: #fff;
    position: relative;
    display: block;
    margin: 50px auto 15px;
}
.scroll-down .mouse-icon {
    width: 30px;
    border: 1px solid #fff;
    height: 50px;
    cursor: pointer;
    left: 0;
    right: 0;
    margin: 0 auto 15px;
    position: relative;
    display: block;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    border-radius: 30px;
}
.scroll-down .icon-scroll {
    display: block;
    width: 8px;
    height: 8px;
    background: #fff;
    position: absolute;
    top: 8px;
    left: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-animation-name: scroll;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    animation-name: scroll;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}
@keyframes scroll {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
}
@-webkit-keyframes scroll {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
}
@-moz-keyframes scroll {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
}
@-ms-keyframes scroll {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
}
@keyframes scroll {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
}

@media all and (max-width:991px){
    .welcome-screen .wel-cont{
        text-align: center;
        padding-top: 0;
    }
    .wel-img{
        display: none;
    }
}
@media all and (max-width:420px){
    .welcome-screen .logo{
        font-size: 36px;
    }
    .welcome-screen .wel-cont .head-title{
        font-size: 26px;
        line-height: 35px;
    }
    .scroll-down{
        margin: 10px auto;
    }
    .shap{
        display: none;
    }
}

/* Video
==========================*/
.video{
    padding: 200px 0px;
}
.popup-youtube{
    position: absolute;
    display: block;
    width: 128px;
    height: 128px;
    margin: auto;
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
.player-wave {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    width: 230px;
    height: 230px;
    z-index: 998;
}
.player-wave .waves {
    -webkit-animation: 3s ease-in-out 0s normal none infinite running waves;
    animation: 3s ease-in-out 0s normal none infinite running waves;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
}
.player-wave .wave-1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.player-wave .wave-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.player-wave .wave-3 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
@-webkit-keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
    }
}
@keyframes waves {
    0% {
        -webkit-transform: scale(0.2, 0.2);
        transform: scale(0.2, 0.2);
        opacity: 0;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        -webkit-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        opacity: 0;
    }
}
.video-popup a:hover .player-wave .waves {
    background: rgba(255, 255, 255, .5);
}

/* Step Item
==========================*/
.step-item{
    background: url(../images/03.png) center;
    background-repeat: repeat;
    display: block;
    position: relative;
    padding: 20px 0;
    margin: 20px auto;
    text-align: center;
    cursor: pointer;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.step-item .step-icon{
    display: block;
    position: relative;
    width: 70px;
    margin: 15px auto;
    text-align: center;
    line-height: 70px;
    font-size: 40px;
    letter-spacing: 1px;
    color: #fff;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.step-item .step-icon span{
    z-index: 999;
    position: relative;
    width: 70px;
    height: 70px;
    display: block;
}
.step-item .step-icon:before ,
.step-item .step-icon:after{
    content: " ";
    position: absolute;
    width: 60px;
    height: 60px;
    top: -15px;
    left: -15px;
    background: #f1f1f1;
    z-index: 98;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.step-item .step-icon:after{
    top: auto;
    left: auto;
    bottom: -15px;
    right: -15px;
}
.step-item h3{
    display: block;
    margin: 20px 0 0;
    font-size: 22px;
    text-transform: capitalize;
    letter-spacing: 1px;
    color: #2c455b;
    line-height: 40px;
}
.step-item p{
    display: block;
    position: relative;
    line-height: 20px;
    font-size: 13px;
    color: #717171;
    margin: 0px auto;
}
.step-item:hover .step-icon:before{
    transform: translateY(40px);
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.step-item:hover .step-icon:after{
    transform: translateY(-40px);
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.step-item:hover .step-icon span{
    background: #2c455b;
    color: #fff;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
@media all and (min-width:768px) and (max-width:991px){
    .step-item h3 {
        font-size: 16px;
        line-height: 30px;
    }
    .step-item p{
        font-size: 12px;
    }
}
@media all and (max-width:767px){
    .step-item{
        padding: 20px;
    }
}

/* Features
======================*/
.feat-item{
    display: block;
    position: relative;
    margin: 35px auto 0px;
    padding: 15px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    -webkit-box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -moz-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -ms-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -o-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
}
.feat-item h3{
    display: block;
    margin: 20px 0 0;
    font-size: 18px;
    text-transform: capitalize;
    letter-spacing: 1px;
    line-height: 30px;
}
.feat-item p{
    display: block;
    position: relative;
    line-height: 20px;
    font-size: 12px;
    color: #717171;
    margin: 0px auto;
}
.feat-item .feat-icon{
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    padding: 10px;
    top: -25px;
    left: -15px;
    text-align: center;
    line-height: 70px;
    font-size: 40px;
    letter-spacing: 1px;
    background: #ffffff;
    -webkit-box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -moz-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -ms-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -o-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.feat-item:hover .feat-icon{
    transform: translateX(15px);
}
@media all and (max-width:991px){
    .feat-item{
        margin: 30px auto;
    }
    .feat-item .feat-icon{
        left: 0;
        right: 0;
        margin: auto;
    }
    .feat-item h3{
        margin-top: 40px;
    }
    .feat-item p{
        max-width: 480px;
    }
}
@media all and (max-width:767px){
    .feat-item{
        margin: 50px auto;
    }
}

/*opinions
====================*/
.opinions{
    padding: 0;
}
.opin-wrap{
    padding: 60px 40px 0;
}
.opinions .head-title{
    color: #2b4459;   
}
.opin-item{
    overflow: hidden;
    display: block;
    position: relative;
    margin-bottom: 10px;
}
.opin-item .opin-item-content{
    font-size: 15px;
    line-height: 30px;
    color: #5f5f5f;
    padding:10px;
    display: block;
    position: relative;
    text-align: left;
    font-style: italic;
    letter-spacing: 0.5px;
    background:url(../images/03.png);
    background-repeat: repeat;
    margin-bottom: 10px;
    overflow: hidden;
}
.opin-item .opin-item-content span{
    padding: 0 30px;
    display: block;
}
.opin-item .opin-item-content svg{
    display: block;
    margin: 0 5px;
}
.opin-item .opin-item-content svg:last-child{
    float: right;
}
.opin-item .opin-item-img{
    display: block;
    margin: 0px  auto;
    overflow: hidden;
    text-align: center;
}
.opin-item .opin-item-img img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
.opin-item .opin-item-img span{
    display: block;
    font-size: 14px;
    line-height: 30px;
    text-align:center;
}
@media all and (max-width:991px){
    .opinions{
        padding: 100px 0px;
    }
    .opin-wrap{
        padding: 0 40px;
    }
    .avatar-img{
        display: none;
    }
    .opinions .head-title{
        font-size: 26px;
    }
}
@media all and (max-width:480px){
    .opin-wrap{
        padding: 0 15px;
    }
    .opin-item .opin-item-content span{
        padding: 0;
    }
}

/* Subscribe
======================*/
.subscribe .info-text{
    max-width: 767px;
}
.subscribe-form{
    margin: 15px auto;
    max-width: 420px;
}
.subscribe-form .form-group .form-control {
    display: block;
    width: 100%;
    background: #fff;
    border: 0;
    height: 44px;
    line-height: 44px;
}
.subscribe-form .form-group .custom-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    height: 40px;
    margin: 0;
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 40px;
}
.subscribe-form .form-group .custom-btn:hover{
    background: #1a1a1a;
    color: #fff;
}

/*FAQS
==============================*/
.faqs .toggle-container {
    border: none;
    margin:15px auto;
}
.faqs .toggle-container .panel {
    margin-bottom: 10px;
    box-shadow: none;
    border-radius: 0;
    border: none;
    position: relative;
    background: #f6f6f6;
}
.faqs .toggle-container .panel .panel-content {
	padding: 10px;
}
.faqs .toggle-container .panel {
    position: relative;
	margin-bottom: 15px;
    background-color: transparent;
    border: none;
    overflow: hidden;
	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
	        box-shadow: none;
}
.faqs .toggle-container .panel > a {
    color: #fff;
    font-size: 14px;
    position: relative;
    white-space: normal;
    display: block;
    padding: 0px 0px 0px 15px;
    line-height: 45px;
    text-transform: capitalize;
    letter-spacing: 1px;
}
.faqs .toggle-container .panel > a:before {
    display: block;
    content: " + ";
    line-height: 45px;
    font-size: 30px;
    float: right;
    width: 45px;
    height: 45px;
    text-align: center;
    color: #ffffff;
    border-left: 1px solid rgba(0,0,0,0.06);
}
.faqs .toggle-container .panel > a.collapsed {
    background: #ffffff;
    color: #2b4459;
}
.faqs .toggle-container .panel > a.collapsed:before {
    content: " - ";
    color: #425e90;
    background: #ffffff;
}
.faqs .toggle-container .panel .panel-content {
    padding: 10px;
    line-height: 25px;
    background: #ffffff;
    font-size: 12px;
}
@media all and (max-width:991px){
    .faq-img{
        display: none;
    }
}
@media all and (max-width:480px){
    .faqs .toggle-container .panel > a{
        line-height: 30px;
        font-size: 14px;
    }
    .faqs .toggle-container .panel > a:before {
        display: none;
    }
}

/* FunFacts
=======================*/
.faqs{
    padding-bottom: 0;
}
.funfact-list{
    position: relative;
}
.funfact-list li{
    display: inline-block;
    background: rgba(0,0,0,0.6);
    padding: 45px 20px 20px;
    color: #fff;
    text-align: center;
    position: relative;
    width: 240px;
    margin: 15px 20px;
}
.funfact-list li img{
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    padding: 10px;
    top: -25px;
    left: -15px;
    text-align: center;
    line-height: 70px;
    font-size: 40px;
    letter-spacing: 1px;
    background: #ffffff;
}
.funfact-list li .timer{
    display: block;
    margin: 10px auto;
    font-size: 30px;
    text-transform: capitalize;
    letter-spacing: 3px;
    color: #ffffff;
    line-height: 30px;
}
.funfact-list li span{
    display: block;
    margin: 0px auto;
    font-size: 16px;
    text-transform: capitalize;
    letter-spacing: 2px;
    color: #ffffff;
    line-height: 25px;
}

/* Contact
==========================*/
.contacts{
    background-image: url(../images/contact.png);
    background-position:bottom;
    background-repeat: no-repeat;
}
.contact-form{
    background: #fdfdfd;
    overflow: hidden;
    padding: 20px 15px;
    margin: 15px auto;
}
.contact-form .form-title{
    text-align: left;
    font-size: 18px;
    line-height: 50px;
    background: #fff;
    padding: 0 15px;
}
.contact-form .form-group .custom-btn:hover{
    background: #1a1a1a;
}
.contact-info{
    background: #fdfdfd;
    text-align: left;
    overflow: hidden;
    margin: 15px auto;
    padding: 15px 15px 0px;
}
.contact-info .title {
    display: block;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px;
    line-height: 50px;
    margin-bottom: 15px;
    background: #fff;
    padding: 0 15px;
}
.contact-info li{
    display: block;
    margin: 0px auto 20px;
    line-height: 20px;
    padding-left: 55px;
    color: #666;
    font-size: 13px;
    letter-spacing: 1px;
    position: relative;
}
.contact-info li svg{
    color: #ffffff;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto auto auto 0;
    width: 40px!important;
    height: 40px;
    padding: 10px;
    border-radius: 3px;
}
.contact-info li .sub-tit{
    display: block;
    line-height: 26px;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: capitalize;
}
.map{
    padding: 0;
}
.noScroll{
    text-align: right;
    line-height: 20px;
    letter-spacing: 1px;
    font-size: 14px;
}
@media all and (max-width:480px){
    .contact-form{
        padding: 10px 0px;
    }
}

/* Footer
========================*/
.footer{
    display: block;
    position: relative;
    padding: 10px 0px;
}
.footer .logo{
    float: none;
    margin: 10px auto 0;
    line-height: 40px;
}
.footer p{
    display: block;
    position: relative;
    line-height: 35px;
    font-size: 12px;
    margin: 0px auto 5px;
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
}
.social-icons{
    margin-bottom: 10px;
}
.social-icons a{
    width: 35px;
    height: 35px;
    display: inline-block;
    position: relative;
    background: #fff;
    text-align: center;
    font-size: 19px;
    line-height: 35px;
    border-radius: 3px;
    margin: 1px;
}
.social-icons a:hover{
    opacity:1;
}

/* Login
========================*/
.dialog-box{
    position:relative;
    max-width:480px;
    margin:0 auto;
}
.login-form{
    width: 100%;
    max-width: 520px;
    margin: 0px auto;
    background: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -moz-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -ms-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -o-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
}
.reg-form{
    max-width:600px;
}
.login-form .form-title{
    text-align: center;
    line-height: 55px;
    color: #fff;
    margin-bottom: 20px;
    font-size: 20px;
}
.login-form .forget-pass {
    display: block;
    color: #6c6b69;
    line-height: 30px;
    text-align: left;
    letter-spacing: 1px;
}
.login-form .forget-pass a{
    color: #6c6b69;
}
.login-form .form-group{
    overflow: hidden;
    margin: 0;
    padding: 5px 15px;
}
.login-form .form-group .form-control{
    height: 45px;
    line-height: 45px;
}
.login-form .custom-btn{
    color: #fff;
    width: 140px;
}
.login-form .form-group .custom-btn:hover , 
.login-form .form-group .custom-btn:focus {
    outline: 0;
    background:#1a1a1a;
}
.login-form .spacer{
    display: block;
    position: relative;
    margin: 10px auto;
    line-height: 25px;
    font-size: 14px;
    color: #3e3e3e;
    letter-spacing: 1px;
}
.login-form .spacer span{
    position: relative;
    background: #fff;
    padding: 10px 20px;
}
.login-form .spacer:before{
    content: " ";
    position: absolute;
    width: 90%;
    height: 1px;
    background: #f1f1f1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.social-login .custom-btn svg{
    margin-right: 5px;
}
.login-form .social-login {
    margin-bottom:10px;
}
.social-login .custom-btn{
    width: auto;
    font-size: 13px;
    line-height: 35px;
    height: 35px;
    text-transform: capitalize;
    padding: 0 15px;
}
.social-login .custom-btn.face{
	background: #4e71a8;
}
.social-login .custom-btn.twitt{
	background: #1cb7eb;
}
.social-login .custom-btn.linked{
	background: #3c5c8e;
}
.login-form .form-footer {
    display: block;
    border-top: 1px solid #f1f1f1;
    overflow: hidden;
    font-size: 13px;
    padding: 10px 10px;
    line-height: 30px;
    color: #343434;
}
.login-form .form-footer a{
    margin-left: 5px;
    text-decoration: underline;
}
@media all and (max-width:480px){
    .login-form .form-group{
        padding: 5px;
    }
    .dialog-box{
        width: 98%;
        margin: 15px auto;
    }
    .social-login .custom-btn{
        width: 100%;
        margin: 2px auto;
    }
}

/* Steps
=============================*/
.step-info{
    display: block;
    position: relative;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    text-align: center;
    line-height: 230px;
    color: #2c455b;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 15px auto;
    padding: 65px 0px;
}
.step-info span{
    display: block;
    position:relative;
    z-index:999;
    background: rgba(179, 18, 23, .3);
    color: #fff;
    width: 100px;
    height: 100px;
    line-height: 100px;
    margin: 0px auto;
    border-radius: 50%;
}
.step-form-btn{
    display: block;
    text-align: right;
    background: #ffffff;
    border: 1px solid #f9f9f9;
    border-left: 0;
    border-right: 0;
    padding: 10px;
    overflow: hidden;
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    transition: .3s all;
}
.step-form-btn .custom-btn{
    font-size: 14px;
    line-height: 30px;
    vertical-align: middle;
}
.subtitle{
    display: block;
    position: relative;
    line-height: 50px;
    text-transform: capitalize;
    letter-spacing: 2px;
    font-size: 16px;
    background: #fdfdfd;
    padding: 0 15px;
    margin-bottom: 15px;
}
.step-wrap >.tab-content>.tab-pane>form{
    padding:15px;
    display: block;
    overflow: hidden;
}
.step-wrap .form-group{
    padding: 0 20px;
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    transition: .3s all;
}
.step-wrap .form-group .radio-wrap{
    display: inline-block;
}
.step-wrap .form-group .radio-wrap input[type="radio"]:empty ~ label,
.step-wrap .form-group .radio-wrap input[type="checkbox"]:empty ~ label {
    line-height: 45px;
    height: 45px;
    background: #fdfdfd;
    padding: 0 15px 0 32px;
}
.graduate-info{
    display: none;
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    transition: .3s all;
}
.guide{
    display: block;
    position: relative;
    text-align: left;
    margin: 10px auto;
}
.guide-item{
    display: block;
    position: relative;
    line-height: 20px;
    overflow: hidden;
    color: #2b4359;
    letter-spacing: 1px;
    margin: 5px auto;
    background: #fff;
    padding: 5px 0;
}
.guide-item span.colr-perc{
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
    display: inline-block;
    vertical-align: middle;
}
.guide-item span.colr{
    width: 35px;
    height: 35px;
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
}
.guide-item span.colr.ful-comp{
    background: #00c853;
}
.guide-item span.colr.half-comp{
    background: #ffd740;
}
.remove_field{
    font-size: 12px;
    text-align: center;
    padding: 0;
    margin-top: 45px;
    display: block;
    width: 100%;
}
@media all and (min-width:992px) and (max-width:1170px){
    .tab-content>.tab-pane>form {
        padding: 10px 0px;
    }
    .nav-tabs>li>a{
        font-size: 12px;
        letter-spacing: 1px;
    }
    .nav-tabs li a .stat{
        width: 45px;
        font-size: 12px;
    }
    .step-wrap .form-group .radio-wrap input[type="radio"]:empty ~ label,
    .step-wrap .form-group .radio-wrap input[type="checkbox"]:empty ~ label{
        padding: 0 5px 0px 30px;
    }
    .remove_field{
        font-size: 11px;
    }
}
@media all and (min-width:768px) and (max-width:991px){
    .guide-item {
        display: inline-block;
        margin: 5px;
        padding: 5px 10px;
   }
}
@media all and (max-width:540px){
    .tab-content>.tab-pane>form{
        padding: 10px 0px;
    }
}

/* Temp Item
===========================*/
#cv{
    padding: 10px 0px;
}
.temp-item{
    display: block;
    position: relative;
    margin: 15px;
    cursor: pointer;
    overflow: hidden;
    background: #ffffff;
    -webkit-box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -moz-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -ms-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -o-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
}
.temp-item .temp-img{
    display: block;
    position: relative;
    height: 380px;
    width: 100%;
    overflow: hidden;
}
.temp-item .temp-img img{
    width: 100%;
}
.temp-item .temp-cont{
    display: block;
    position: relative;
    padding: 10px;
    text-align: center;
    border-top: 1px solid #f9f9f9;
}
.temp-item .temp-cont h3{
    margin: 5px auto;
    display: block;
    font-size: 16px;
    text-transform: capitalize;
    letter-spacing: 1px;
    color: #2b4459;
    line-height: 35px;
}
.temp-item .temp-cont .custom-btn{
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
}
.temp-item .temp-img .popup-text-hover{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    padding: 158px 0px;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.temp-item .temp-img .popup-text-hover:before {
    content: " ";
    position: absolute;
    background: rgba(198, 38, 36, .9);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
}
.temp-item .temp-img .popup-text-hover a{
    width: 64px;
    height: 64px;
    padding: 10px;
    display: block;
    opacity: 0;
    visibility: hidden;
    margin: auto;
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    transform: translateX(-6px);
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    transition: 0.5s all;
}
.popup-text-hover a:focus{
    background: none;
}
.temp-item:hover .temp-img .popup-text-hover:before{
    opacity:1;
    visibility:visible;
    -webkit-transition: 0.4s all;
       -moz-transition: 0.4s all;
            transition: 0.4s all;
}
.temp-item:hover .temp-img .popup-text-hover a{
	 opacity:1;
     visibility:visible;
    -webkit-transform: translatex(0px);
       -moz-transform: translatex(0px);
            transform: translatex(0px);
    -webkit-transition: 0.5s all;
       -moz-transition: 0.5s all;
            transition: 0.5s all;
}


/* Site Bulid
===========================*/
.site-bulid-wrap{
    padding: 0;
}
.site-bulid{
    display: block;
    margin: 20px auto;
    padding: 0 100px;
    position: relative;
}
.site-bulid .head-title{
    color: #2b4459;
}
.site-bulid .info-text{
    color: #666;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: 1px;
}
.site-bulid .info-text span{
    color: #fff;
    padding: 0 5px;
}
.site-bulid .custom-btn{
    background: #2b4459;
}
.bulid-step{
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 10px auto;
    padding: 0 20px 0 90px ;
    color: #2b4459;
    text-align: left;
    cursor: pointer;
    text-transform: capitalize;
    letter-spacing: 2px;
    line-height: 74px;
    font-size: 16px;
    background: url(../images/03.png);
    background-repeat: repeat;
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    transition: .3s all;
    -webkit-box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -moz-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -ms-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -o-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
}
.bulid-step:hover{
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    transition: .3s all;
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    transform: translateX(5px);
}
.bulid-step img{
    position: absolute;
    left: 0;
    top: 0;
    width: 74px;
    height: 74px;
    padding: 15px;
}
.site-buld-img{
    display: block;
    position: relative;
    padding: 0;
}
.site-buld-img img{
    width: 100%;
    -webkit-box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -moz-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -ms-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -o-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
}
.site-buld-img .step-info{
    position: absolute;
    left: -90px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 184px;
    height: 184px;
}
.site-buld-img .step-info span{
    width: 80px;
    height: 80px;
    font-size: 21px;
    padding: 20px 0;
    line-height: 25px;
    letter-spacing: 2px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.site-buld-img .step-info .player-wave{
    width: 184px;
    height: 184px;
    top: 25px;
}
@media all and (max-width:991px){
    .site-bulid-wrap{
        padding: 70px 0px;
    }
    .site-bulid, .site-buld-img {
        text-align: center;
        padding: 0 30px;
    }
    .bulid-step{
        display: block;
    }
    .site-buld-img .step-info {
        position: relative;
        left: 0;
        top: 0;
        bottom: 0;
    }
}
@media all and (max-width:480px){
    .site-bulid .head-title{
        font-size: 22px;
        line-height: 30px;
    }
    .site-bulid .info-text{
        font-size: 13px;
    }
    .bulid-step{
        line-height: 30px;
        padding: 10px;
        font-size: 16px;
        text-align: center;
        margin: 20px auto;
    }
    .bulid-step img{
        position: relative;
        margin-bottom: 10px;
    }
    .site-bulid .custom-btn{
        display: block;
        margin:5px auto;
    }
}

/*up-btn 
===========================*/
.up-btn {
    display: none;
    cursor: pointer;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 42px;
    padding: 5px;
    height: 42px;
    text-align: center;
    color: #fff;
    background: #2c455b;
    font-size: 26px;
    -webkit-transition: .3s all;
    -moz-transition: .3s all;
    transition: .3s all;
}
.up-btn:hover{
    background: #41586c;
}

/* Color Option
==========================*/
.color-option-wrap{
    position: fixed;
    top: 100px;
    left: 0;
    z-index: 999;
    width: 42px;
}
.color-option-wrap .icon{
    display: block;
    position: relative;
    width: 42px;
    height: 42px;
    padding: 5px;
    z-index: 999;
    background: #2c455b;
    cursor: pointer;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
    -webkit-box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -moz-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -ms-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -o-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
}
.color-option-wrap .color-option{
    position: relative;
    text-align: center;
    width: 42px;
    height: 100%;
    background: #fff;
    -webkit-transform: translateX(-42px);
    -moz-transform: translateX(-42px);
    transform: translateX(-42px);
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.color-option li{
    display: block;
    color: #fff;
    width: 100%;
    height: 42px;
    line-height: 42px;
    cursor: pointer;
    text-align: center;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.color-option-wrap .color-option.move{
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.color-option-wrap .icon .close{
    position: absolute;
    background: #2c455b;
    width: 100%;
    height: 100%;
    padding: 8px;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
.color-option-wrap .icon .close.in{
    opacity: 1;
    visibility: visible;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}
@media all and (max-width:360px){
    .color-option-wrap{
        width: 100%;
    }
}

/* Loading
========================*/
.loading {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 9999;
}
.loading .spinner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #fdfdfd;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.1s infinite ease-in-out;
    animation: sk-scaleout 1.1s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}
@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}

/* Scroll
============================*/
::-webkit-scrollbar {
    width: 3px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow:none; 
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow:none; 
}
::-webkit-scrollbar-thumb:window-inactive {
  background: #1a1a1a; 
}

/* CV Wrap
============================*/
.cv-wrap{
    font-family: 'Montserrat', sans-serif;
    -webkit-box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -moz-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -ms-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -o-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    display: block;
    position: relative;
    margin: 15px auto;
    background: #fff;
    width: 100%;
    padding:20px 10px;
    max-width: 1170px;
    min-width: 1170px;
    overflow-x: auto;
}
.cv-wrap .user-img{
    width: 250px;
    border-radius: 5px;
    overflow: hidden;
    height: 250px;
    margin: 0;
}
.cv-wrap .name{
    margin: 15px 0px;
    line-height: 25px;
    color: #00bcd4;
    font-size: 28px;
    letter-spacing: 1px;
    font-weight: 600;
}
.cv-wrap .cont-info li{
    line-height: 35px;
    font-size: 18px;
    letter-spacing: 1px;
    color: #2c455b;
    font-weight: 400;
}
.cv-wrap .cont-info span{
    color: #00bcd4;
    font-size: 16px;
    float: left;
    margin-right: 15px;
    min-width: 125px;
    overflow: hidden;
    letter-spacing: 1px;
    text-transform: capitalize;
    font-weight: bold;
}
.cv-wrap .cont-info span .clone{
    float: right;
}
.block-item{
    display: block;
    position: relative;
    padding: 0px;
    border: 1px solid #f1f1f1;
    margin: 20px auto;
}
.block-item .sec-tit{
    text-transform: uppercase;
    border-bottom: 1px solid #f1f1f1;
    color: #00bcd4;
    line-height: 50px;
    padding: 0 15px;
    letter-spacing: 2px;
    font-size: 17px;
    margin: 0 0 0 -2px;
    border-left: 3px solid #00bcd4;
    font-weight: 600;
}
.block-item .block-item-cont{
    padding: 15px;
}
.block-item .block-item-cont li{
    line-height: 35px;
    letter-spacing: 1px;
    color: #00bcd4;
    font-size: 15px;
    overflow: hidden;
    text-transform: capitalize;
    font-weight: 600;
}
.block-item .block-item-cont li span{
    color: #2c455b;
    margin-left: 10px;
}
.block-item .block-item-cont li span.date{
    font-size: 16px;
    color: #e6403b;
    display: block;
    font-weight: 400;
}
.block-item .block-item-cont li a{
    text-transform: lowercase;
    color: #2c455b;
}
.block-item .dot-lists li:before{
    background: #000;
}
.resume-item{
    position: relative;
    padding: 0px 0px 20px 20px;
    border-left: 5px solid #eee;
    margin-left: 15px;
}
.resume-item:before{
    content: " ";
    position: absolute;
    left: -7px;
    top: 7px;
    width: 10px;
    height: 10px;
    background: #2c455b;
    border-radius: 50%;
}
.resume-item div{
    line-height: 25px;
    letter-spacing: 1px;
    color: #2c455b;
    font-size: 15px;
    overflow: hidden;
}
.resume-item div.postion{
    text-transform: capitalize;
    font-weight: 600;
    font-size: 17px;
    color: #00bcd4;
    margin-top: 5px;
}
.resume-item div.date{
    color: #e6403b;
    font-weight: 400;
    margin-bottom: 10px;
}
.resume-item div.company{
    text-transform: capitalize;
    font-weight: 600;
}
.block-item .projects{
    overflow: hidden;
    padding: 5px;
}
.block-item .projects li{
    line-height: 25px;
    border: 1px solid #f1f1f1;
    padding: 10px;
    width: 48%;
    margin: 10px 1%;
}
.block-item .projects li span{
    margin: 0;
    display: block;
    font-weight: 600;
    font-size: 13px;
}
.block-item p{
     padding: 10px;
    margin: auto;
    color: #333;
    display: block;
    font-weight: 600;
}
/* Modern */
.modern{
    padding: 0;
    background: #2c455b;
}
.modern .side{
    padding: 0px;
}
.modern .cont-wrap{
    background: #fff;
}
.modern .side img{
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: 15px auto;
    border: 5px solid rgba(0,0,0,.1);
}
.modern .side .name{
    color: #fff;
    margin: 0 auto 5px;
    font-size: 22px;
}
.modern .side .job{
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
}
.modern .side .cont-info{
    margin-bottom: 15px;
    background: rgba(0,0,0,.1);
}
.modern .side .cont-info li{
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin: 10px;
    line-height: 30px;
    letter-spacing: 1px;
    position: relative;
    padding-left: 40px;
}
.modern .side .cont-info li svg{
    position: absolute;
    left: 0;
    top: 0;
    margin-right: 10px;
    font-weight: normal;
    background: #fff;
    width: 30px;
    height: 30px;
    color: #2c455b;
    padding: 6px;
    border-radius: 3px;
    vertical-align: middle;
}
.modern .side .cont-info .title ,
.modern .skills .title ,
.modern .about .title{
    text-transform: capitalize;
    color: #fdfdfd;
    line-height: 45px;
    padding: 0 15px;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
    background: rgba(0,0,0,.15);
    border-left: 3px solid #fff;
    display: block;
    overflow: hidden;
}
.modern .about p{
    padding: 10px;
    margin: auto;
    color: #eee;
    font-style: italic;
    background: rgba(0,0,0,.1);
    display: block;
}
.modern .block-item{
    border: 0;
    margin: 10px auto;
}
.modern .block-item .block-item-cont{
    padding-bottom: 0;
}
.modern .block-item .sec-tit{
    text-transform: capitalize;
    color: #39bdd4;
    letter-spacing: 2px;
    font-size: 16px;
    border: 0;
    line-height: 45px;
    background: rgb(253, 253, 253);
    border-left: 3px solid #2c455b;
}
.modern .block-item .resume-item{
    margin-left:5px;
}
.modern .block-item .block-item-cont li span.date{
    float: right;
}
.modern .social-icons{
    margin:15px auto;
    text-align:center;
}
.modern .social-icons a{
    color: #283e52;
}
.modern .skills ul{
    padding: 10px;
    background: rgba(0,0,0,.1);
}
.modern .skills ul li{
    color: #fff;
}
.modern .skills ul li:before{
    background: #fdfdfd;
}

/* Lite */
.lite{
    padding: 0;
}
.lite-side-right{
    border-left: 2px solid #f9f9f9;
}
.lite .head-lite{
    background: #fdfdfd;
    padding: 15px;
}
.lite .user-img{
    border-radius: 50%;
    width: 140px;
    height: 140px;
    margin: 0px auto;
    border: 5px solid rgba(0,0,0,.1);
}
.lite .name{
    margin: 10px auto 5px;
    font-size: 24px;
}
.lite p{
    margin: 0 auto;
    max-width: 991px;
    font-weight: 600;
}
.lite .job{
    line-height: 30px;
    font-size: 15px;
    letter-spacing: 1px;
    color: #2c455b;
    font-weight: 600;
}
.lite .block-item{
    border: 0;
    margin: 10px auto 0;
}
.lite .block-item .sec-tit{
    border: 0;
    margin: 0;
    background: #f9f9f9;
    font-size: 18px;
    text-transform: capitalize;
    letter-spacing: 1px;
}
.lite .block-item .block-item-cont{
    padding: 10px 15px;
}
.lite .block-item .cont-info li{
    line-height: 25px;
    color: #2c455b;
    font-size: 13px;
    margin: 5px auto;
}
.lite .block-item .cont-info li span{
    display: block;
    min-width: 100%;
    margin: 0;
    font-size: 13px;
    letter-spacing: 1px;
    float: none;
    line-height: 20px;
    color: #00bcd4;
}
.lite .block-item .block-item-cont li{
    font-size: 14px;
}
.lite .block-item .block-item-cont li span.date{
    float: right;
}
.download-pdf{
    position: fixed;
    right: 5px;
    bottom: 5px;
    z-index: 999;
}
.porfile-item{
    display: block;
    position: relative;
    background: url(../images/03.png) center;
    background-repeat: repeat;
    margin: 15px auto;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
    -webkit-box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -moz-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -ms-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -o-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
}
.porfile-item .icon{
    display: block;
    width: 100%;
    height: 178px;
    position: relative;
}
.porfile-item .icon img{
    width: 148px;
    height: 148px;
    border-radius: 50%;
    padding: 14px;
    margin: 15px auto;
    -webkit-box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
    -moz-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -ms-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    -o-box-shadow: 0 5px 10px rgba(0,9,128,0.035),0 7px 18px rgba(0,9,128,0.05);
    box-shadow: 0 5px 10px rgba(0,9,128,0.035), 0 7px 18px rgba(0,9,128,0.05);
}
.porfile-item .icon span{
    position: absolute;
    top: 10px;
    right: 10px;
}
.porfile-item a{
    display: block;
    position: relative;
    line-height: 50px;
    color: #e6403b;
    background: #fff;
    font-size: 17px;
    letter-spacing: 1px;
}