@font-face {
    font-family: 'lato';
    src: url('../fonts/lato-regular-webfont.eot');
    src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-regular-webfont.woff2') format('woff2'),
         url('../fonts/lato-regular-webfont.woff') format('woff'),
         url('../fonts/lato-regular-webfont.ttf') format('truetype'),
         url('../fonts/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latobold';
    src: url('../fonts/lato-bold-webfont.eot');
    src: url('../fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-bold-webfont.woff2') format('woff2'),
         url('../fonts/lato-bold-webfont.woff') format('woff'),
         url('../fonts/lato-bold-webfont.ttf') format('truetype'),
         url('../fonts/lato-bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latoitalic';
    src: url('../fonts/lato-italic-webfont.eot');
    src: url('../fonts/lato-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-italic-webfont.woff2') format('woff2'),
         url('../fonts/lato-italic-webfont.woff') format('woff'),
         url('../fonts/lato-italic-webfont.ttf') format('truetype'),
         url('../fonts/lato-italic-webfont.svg#latoitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latolight';
    src: url('../fonts/lato-light-webfont.eot');
    src: url('../fonts/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-light-webfont.woff2') format('woff2'),
         url('../fonts/lato-light-webfont.woff') format('woff'),
         url('../fonts/lato-light-webfont.ttf') format('truetype'),
         url('../fonts/lato-light-webfont.svg#latoitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	font-size:24px;
	font-family: "lato", Gotham, "Helvetica Neue", Helvetica, Arial;
}

.row{ margin-left:0px; margin-right:0px; }
.col-lg-6, .col-lg-12, .col-lg-3, .col-lg-4, .col-md-12, .col-md-2, .col-md-3, .col-md-6, .col-sm-12, .col-sm-5, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-6, .col-xs-3,  .col-xs-6, .col-xs-12 { padding-right: 0px; padding-left: 0px; }
.login_page { background:#000000; color:#FFFFFF; }

.login_page .btn { margin-top:1.5em; margin-bottom:1em; }
.forgotpass a { 
	color:#FFFFFF;
	text-decoration:none;
	font-family: "latoitalic", Gotham, "Helvetica Neue", Helvetica, Arial;
	border-style:solid;
	padding-bottom:1px;
  	border-width: 0px 0px 1px 0px;
}
a:hover{ cursor: pointer; cursor: hand; }
.forgotpass { margin-bottom:1.37em; }

.small {font-size:.6em; margin-top:1.2em;}
.form-signin {
	font-size:24px;
    max-width:650px;
    margin: 0 auto;
	position: absolute;
  	top: 50%;
  	left: 50%;
	-webkit-transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
	 transform: translate(-50%, -50%);
}
.btn-primary {
	background:#FFFFFF;
	color:#000000;
	border:none;
}
.btn-primary:hover { background:#CCCCCC; color:#000000; }
.btn, .form-control {
	font-size:1em;
    border-radius: 0px;
	text-transform:capitalize;
}
.btn { font-weight:bold; padding:0.4em;}
.form-control { border: solid 1px #999999; margin:20px auto; background:none; padding:1.25em; }
.form-control:focus { border: solid 1px #999999; }
.gray { color:#808080; }
.myCheckbox input { display: none; }
.myCheckbox span {
    width: 36px;
    height: 28px;
    display: block;
    background: url("../images/check_box.jpg") no-repeat left bottom;
}
.myCheckbox input:checked + span { background: url("../images/check_box1.jpg") no-repeat left bottom; }
.agree_checkbox label {font-family: "latoitalic", Gotham, "Helvetica Neue", Helvetica, Arial; font-weight:100; float:left;}

/***** bottom navigation *****/
.navbar-default { background-color: #000000; border: none; color:#FFFFFF; }
.navbar-brand { height:auto; float:left; padding: 10px 10px; }
.navbar-header { float: none; }
.navbar-toggle { display: block; border: none; margin: 58px 30px; }
.navbar-collapse.collapse { display: none!important; }
.navbar-nav { float: none!important; }
.navbar-nav>li { float: none; }
.navbar-collapse.collapse.in{ display:block !important; }
.navbar-default .navbar-toggle .icon-bar { background-color: #FFF; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: none; }
.navbar-toggle .icon-bar { width: 30px; height: 2px; border-radius: 0px; }
.logo_bottom { background:url(../images/logo_small.png) no-repeat center center; width:250px; height:130px; background-size:contain; }
.user_name { float:left; margin-top: 27px; margin-left:1em;}
.user_name .name {margin-top:.7em; display:inline-block; font-weight:bolder; }
.user_name .level { display:inline-block; background:#ea5247; border-radius:20px; font-size:.5em; padding:.5em; text-align:center; top: -1.2em; position: relative;}
.user_completion{color: #b2b2b2; margin-top: 37px; margin-right: 0.5em;}
.user_completion{float:right; text-align:right;}
.search{float:right; padding: 57px 2em; border-right:solid 1px #4a4a4a; }
#user_graph{float:right; margin-top: 24px;}
.circleValue { position: relative; background:#FFFFFF; width: 2.2em; height: 2.2em; border-radius: 5em; margin-right: auto; margin-left: auto; margin-top: -80px;} 
.circleValue p { font-size: .6em; display: inline-block; margin-top:1.2em; }
.circleValue p span{ font-style:normal; font-size: 0.4em; font-weight:bold; }

/***** onboarding *****/
#trainee_graph { float:right; margin-top: 24px; }
.your_main { position:absolute; height:100%; }
.your_sch { float:left; width:20%;  height:100%;color:#000; }
.your_sch .sch { background:#FFF; min-height:50%; padding:10px 10px;}
.your_sch .sch img { margin: 0 auto; border: solid 2px #bcbcbc; background: #bcbcbc; height: 5.5em;}
.your_sch .alert { background:#f7f7f7; height:40%;  box-shadow: inset -3px 0px 3px -3px rgba(0,0,0,0.4); border-radius: 0px; }
.your_sch .alert .alert_txt { text-align:center; padding:15px 0; border-bottom:solid 1px #e1e1e1; }
.your_sch .alert .alert_txt div { display:inline-block; vertical-align: middle; position:relative;}
.your_sch .alert .alert_txt .alert_no { color:#fff; font-size:0.75em; position: absolute; background:#e75340; padding:0.3em 0.7em; border-radius:20px; bottom:0.4em; right:0.1em; }
.your_sch .alert .alert_txt .doc { text-align: left; margin-left:15px;}
.your_sch .alert .alert_txt .doc {font-size:0.75em; line-height:18px; }
.your_sch .alert img { width:4em; }
.your_day { float:left; width:45%;height:100%;}
.your_day .bg_img { height:50%; background:url(../images/your_day.jpg) center bottom no-repeat; background-size:cover;}
.your_day .day_txt { padding:20px 40px;}
.your_day .day_txt h2 { margin-bottom:20px;}
.your_day .day_txt p { font-size:.8em;}
.your_res { float:left; width:35%; background:#191919; height:100%; color:#FFF; padding:20px 30px; }
.your_res p {font-size: .8em; margin-left:20px;}
.your_res p a { color:#fff; }
.your_res h1, .your_res h2 { margin-bottom:30px;}
.your_res a.pdf span{ background:url(../images/pdf_icon.png) no-repeat bottom left; background-size:contain; display:inline-block; width: 1.5em; height:1.5em; margin-right:10px; margin-bottom:-5px;}
.your_res a.link span{ background:url(../images/link_icon.png) no-repeat bottom left; background-size:contain; display:inline-block; width:1.5em; height:1.5em; margin-right:10px; margin-bottom:-5px;}
.your_main h1, .your_main h2 { text-transform:uppercase; font-family: 'Domine', serif;}
.your_main h1 { font-size:.9em; }
.your_main h2 { font-size:1.3em; }
.your_sch h1 { text-align:center; }
.your_sch ul{ padding:10px; }
.your_sch .day_sch li { font-size:.7em; list-style-type: none; padding:10px 10px; border-bottom:solid #e1e1e1 1px;}
.your_sch .day_sch li span { background:url(../images/list-bullet3.png) center bottom no-repeat; background-size:contain; width:1.25em; height:1.25em; display: inline-block; margin:0 20px -3px 10px;}
.your_sch .day_sch li.comp, .your_sch .day_sch li.prog { color:#64c497; }
.your_sch .day_sch li.comp span { background:url(../images/list-bullet2.png) center bottom no-repeat;background-size:contain; width:1.45em; height:1.5em; margin-bottom:-5px;}
.your_sch .day_sch li.prog span { background:url(../images/list-bullet1.png) center bottom no-repeat;background-size:contain; }

/***** side menu ******/
#wrapper { transition: all .4s ease 0s; height: 100%; }
#wrapper.active .side_menu.active { background:#1b1b1b; }
#sidebar-wrapper {
    margin-left: -100%;
    left: 130px;
    width: 100%;
    background: #FFF;
	border-right:solid #b3b3b3 1px;
    position: fixed;
    height: 100%;
    z-index: 999;
    transition: all .4s ease 0s;
}
#sidebar_menu{
	height: 100%;
	float: right;
    width: 130px;
	display: flex;
  	align-items: center;
 	margin-top:-75px;
	border-left:solid #b3b3b3 1px;
}
#sidebar_menu .close_btn {
	display:none;
    position: absolute;
    top: 30px;
    width: 130px;
    text-align: center;
	color:#1b1b1b;
	font-size:1.25em;
}
.profile-pic { border:solid 2px #bcbcbc; background:#bcbcbc; }
.sidebar-nav {
    display: block;
    float: right;
    width: 130px;
	list-style: none;
    margin: 0;
	margin-top: -75px;
    padding: 0;
}
.manager .sidebar-nav { margin-top: -25px;}
.sidebar-nav li a {
    display: block;
    float: left;
    text-decoration: none;
    width: 130px;
    background: #FFF;
    border-top: 1px solid #b6b6b6;
	border-right:solid #b3b3b3 1px;
	padding:20px 0;
}
.sidebar-nav li a img{	margin: 0 auto; }
.sidebar-nav li:last-child a { 	border-bottom: 1px solid #b6b6b6;}
.sidebar_name { padding-top: 25px; color: #fff; opacity: .7; }


/***** profile content ******/
#profile { overflow-y:auto; overflow-x:hidden; height: -webkit-calc(100vh - 150px); height: -moz-calc(100vh - 150px); height: calc(100vh - 150px);  }
#page-content-wrapper { padding-left: 0; margin-left: 0; width: 100%; height: auto; }
#sidebar { padding-right:130px; width:100%;	}
#wrapper.active #sidebar-wrapper { margin-left: 0; left: 0; }
#page-content-wrapper { width: 100%;}
.profile_bg { background:url(../images/profile_bg.jpg) no-repeat; background-size: cover; height: 10em;}
.profile_content img { float:left; position:relative; z-index:1000;}
.profile_details { float:left; background:url(../images/gradient_bg.png) no-repeat right; background-size: cover; margin-left:-120px; margin-top:35px; width: 90%; max-width:430px;}
.profile_details  p {margin-lefT:140px; color:#FFF; text-transform:uppercase; margin-top:5px;}
.profile_content { margin-left: 40px; padding-top: 10px; }
.profile_details .name{font-family: 'Domine', serif;}
.profile_details .city{font-size: .6em;}


/***** Profile *****/
.profile { border-right:solid 1px #cbc9c9; min-height:100%;}
#profile .row {height:100%;}
.row.profile_data{ margin: -15px 60px 20px 30px; text-transform:uppercase; text-align:center;}
.row.profile_data .green_bg{background:#64c497; padding: 10px 10px 0; font-size:.6em; color:#FFF;}
.row.profile_data .green_bg span{color:#000; font-size:1.8em; font-family:"latobold", Gotham, "Helvetica Neue", Helvetica, Arial; font-weight:bold;}
.row.profile_data .white_br_right{ border-right:solid 1px #d1e2d9; }
.row.profile_data .gray_txt {color:#666666; font-size:.6em; }
.flex_center{align-items: center; margin-top:50%; transform:translateY(-50%);}
.row.profile_data .circleValue { background: #e1dfdf;  width: 5em; height: 5em;  border-radius: 10em;  margin-right: auto; margin-left: auto; margin-top:-95px;}
.row.profile_data .circleValue p { font-size: 1.3em; margin-top: 1.3em; }
#nextlevel { height:90px; }
.score { padding: 0 20px;}
.row.profile_data .black_txt{ color:#000; font-weight:bold;}
.separator { border-bottom:solid 1px #cbc9c9; width:100%; height:1px; margin: 10px 0;}
.month_slider { font-size:.7em; overflow:hidden; height:25px; white-space:nowrap; }
.month_slider .leftfade { position: absolute; left: 0; width:10%; height:25px; background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));}
.month_slider .rightfade { position: absolute; right: 0; width:10%; height:25px; background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1))); }
.month_slider .active, .month_slider .left, .month_slider .right { background:#f1f1f1; display:inline-block; line-height: 25px; height: 25px;}
.month_slider .active { color:#000; font-weight:bold; font-size:1.1em; border: solid #64c497 1px; width:55%;}
.month_slider .left { width:22.5%; float: left; }
.month_slider .right { width:22.5%; float: right; }
.month_slider .left span{ margin-left: -10px;}
.month_slider .right span{  margin-right: -40px;}
.mon-points {
	padding:4px;
	border-radius:8em;
	display:inline-block;
	color:#000;
	background-clip: content-box; 
	background-color: #64c497;
	line-height: 2.6em;
	width:3em;
	height:3em;
	font-size: 2em;
	border:solid 1px #c1c1c1;
} 
.progress {
	border-radius:0;
	overflow:visible;
	background-color:#f74f3d;
	height: 20px;
	-webkit-box-shadow:none;
	box-shadow: none;
}
.progress-bar {
	background:rgb(100,196,151);
	height: 26px;
	margin-top:-3px;
	-webkit-transition: width 1.5s ease-in-out;
	transition: width 1.5s ease-in-out;
	box-shadow:none;
}


/**** MAP ****/
.img-map { background-repeat:no-repeat; }
#maps .col-sm-9 { padding:0; }
#maps .journey { border-right:solid 1px #e3e3e3; padding:20px; height: 100%;}
#maps .designation { border-bottom:solid 3px #000; color:#000; padding:10px 3px; font-size:.8em; text-transform:uppercase; margin:5px;}
#maps .wel { border-bottom:solid 1px #000; margin:5px; padding:10px 3px;}
#maps .wel h1 { font-size:1em; color:#000; text-transform:uppercase; font-family: 'Domine', serif; margin:0; display:inline-block; 
width:-webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px);
}
.next_prev a{ color:#000; text-transform:uppercase; font-size:.6em;}
#maps .course_dis { font-size:.6em; margin:20px 10px;}
#maps .wel img { display:inline-block;}
#maps { overflow-y:auto; overflow-x: hidden; height: -webkit-calc(100vh - 150px); height: -moz-calc(100vh - 150px); height: calc(100vh - 150px);  }
#maps .btn-primary{ color:#FFF; text-transform:uppercase; font-size:0.65em; background:#000; font-weight:normal; padding:5px 10px; border: solid 1px #000; }
#journey_1 {display:none;}

/***** Manager *****/

.manager_bg { height:7em; width:100%; background:url(../images/manager_bg.jpg) no-repeat left center; background-size: cover; }
.manager_content { margin:20px; }
.manager_content .nav.nav-tabs li a { font-family: 'Domine', serif; font-size:.75em; text-transform:uppercase; }
.select_man { float:right; margin-right:10px; font-size: .75em; font-weight: bold; 	width:100px; margin-top: 6px; }
.icon-addon .form-control { border: solid 1px #999999; margin: 0; font-size:.5em; width:300px; }
.icon-addon { position: relative; color: #555; display: block; float: right; }
.manager_content .nav-tabs>li.active>a, .manager_content .nav-tabs>li.active>a:focus, .manager_content .nav-tabs>li.active>a:hover {
  color: #FFF; background-color: #000; border: solid 1px #000;}
.manager_content .nav-tabs { border-bottom: 0; }
.manager_content .nav-tabs li a { color: #000; border: solid 1px #bcbcbc; margin-right:10px; border-radius:0;}
.tab-pane { margin-top:10px; }
.tab-pane .title { font-family: 'Domine', serif; font-size:.75em; text-transform:uppercase; margin-left:40px; margin-right:30px; color:#000;}
.tab-pane .title .nos { float:right; font-family: 'Domine', serif; font-size:.75em; margin: 5px 10px 0 0;  color:#000; text-transform:none;}
.tab-content { border: solid 2px #000;  }
.tab-content .separator { border-bottom: solid 1px #cbc9c9; margin: 0 20px; width:95%;}
.icon-addon:after, .icon-addon:before { display: table; content: " "; }
.icon-addon:after { clear: both; }
.icon-addon.addon-md .glyphicon, .icon-addon .glyphicon, .icon-addon.addon-md .fa, .icon-addon .fa {
    position: absolute;
    z-index: 2;
    right: 10px;
    font-size: 14px;
    width: 20px;
    margin-left: -2.5px;
    text-align: center;
    padding: 10px 0;
    top: 1px
	}
.tab-content {
	height: -webkit-calc(100vh - 400px);
	height: -moz-calc(100vh - 400px);
    height: calc(100vh - 400px);	
    overflow-y:auto;
	overflow-x:hidden;
}

.employee .cls { display:inline-block;  position: relative; font-size:.5em; margin-right:20px; vertical-align: middle;}
.employee { position: relative; margin:10px 10px; opacity:.5; -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);}
.tab-content .tab-pane { position:relative; }
.employee.active { background:#d8d8d8; margin:0; margin-right: -40px; padding:10px;  opacity:1; -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);}
.employee.active .cls.arrow { margin-right: 0px; }
.cls .circleValue p { font-size:1.5em; font-weight:bold; margin-top:24px; }

.cls.cls_img { margin-right:5px; margin-left:30px;}
.cls.cls_txt { width:25%; margin-left:0; }
.cls.cls_gr { width:20%; text-align:center; }
#app_comp, #app_comp1, #app_comp2, #app_comp3 { height: 90px; }
.cls.arrow { position:absolute; margin-right: -20px; right:0; top:50%; transform:translateY(-50%); } 
.cls_arrow { background:url(../images/button.png) no-repeat center center; width:40px; height:40px;}
.employee.active .cls_arrow { background:url(../images/button1.png) no-repeat center center; }
.cls .black_txt { text-align:center; font-size:2em; font-weight:bold; margin: 0; }

.emp_stats { position: relative;  background:#f1f1f1; box-shadow:0 0 8px rgba(170,170,170,0.50); margin:20px 20px 20px 40px; padding:20px; text-align: center; border:solid 1px #fff;}
.emp_stats > .separator { border-bottom: solid 1px #cbc9c9; margin: 20px 0px 30px 0; }
.emp_stats .heading { font-family: 'Domine', serif; font-size:.75em; text-transform:uppercase; color:#000; margin-bottom:0;}
.emp_stats .focus p { font-size:.5em; text-transform:uppercase; text-align:center; color:#666666; }
.emp_stats .focus { display: inline-block; margin: 0 5px;}
.emp_stats .focus .circleValue {
    position: relative;
    background: #e1dfdf;
    width: 2.2em;
    height: 2.2em;
    border-radius: 4em;
    margin-right: auto;
    margin-left: auto;
    margin-top: -80px;
}
.emp_stats .focus .circleValue p { margin-top: 18px; }
.emp_stats .focus p.hd { margin-top: -10px; }
.emp_stats .focus.pt p.hd { margin-top: 10px; }
.emp_name { font-size:1.75em; font-weight:bold;}
.emp_title { font-size:1.25em; font-weight:bold; text-transform:uppercase;}
.emp_id { font-size:1em; }
.cls .circleValue {
    background: #e1dfdf;
    width: 6em;
    height: 6em;
    border-radius: 9em;
    margin-right: auto;
    margin-left: auto;
    margin-top: -88px;
}
.cur_lvl {
    font-weight: bold;
    font-size: .65em;
	text-transform:uppercase;
	color:#FFF;
	background:#000;
	padding:10px 10px;
	margin-bottom:5px;
}
.exp_com {
	font-weight: bold;
    font-size: .45em;
	text-transform:uppercase;
    border: solid #64c497 1px;
	padding:5px;
	margin-bottom:11px;
}
.stamps-ear{
	color:#000;
	border:solid 3px #64c497;
	border-radius:6px;
	width:50px;
	font-weight:bold;
	margin-left: auto;
    margin-right: auto;
	padding-top:5px;
	margin-top: 10px;
}
.emp_stats .focus.st { margin: 0 20px;}
.emp_stats .focus.st p.hd { margin-top:-20px; }
.stamps-ear .ln { height:4px; width:70%; margin-left:15%; margin-top:10px; margin-bottom:10px; border:solid 2px #64c497; background:#64c497; border-radius:5px;}
.points-earn {
	padding:4px;
	border-radius:6em;
	display:inline-block;
	color:#000;
	background-clip: content-box; 
	background-color: #64c497;
	line-height: 2.5em;
	width:3em;
	height:3em;
	font-size: 1em;
	border:solid 1px #c1c1c1;	
}
.points-red {
	padding:4px;
	border-radius:6em;
	display:inline-block;
	color:#000;
	background-clip: content-box; 
	background-color: #f7941d;
	line-height: 2.5em;
	width:3em;
	height:3em;
	font-size: 1em;
	border:solid 1px #c1c1c1;	
}


/***** Itinerary *****/
.itinerary_bg { background:url(../images/itinerary_bg.jpg) no-repeat; background-size: cover; }
.itinerary_content { 	display: flex;
  	align-items: center; height: 5em; }
.itinerary_head { font-family: 'Domine', serif; text-transform:uppercase; color:#FFF; text-align:center; width:100%; }
.accordion-heading { background:#ebebeb; padding:15px 30px; }
.accordion-heading a { color:#000; text-decoration:none; }
.accordion-heading a .fa { font-size:0.6em; padding-right: 10px; padding-top: 12px; float: left;}
#accordion2 { margin-top:2px; }
#accordion2 .accordion-group { margin-bottom:20px; }
.accordion-inner { font-size:.7em; }
.it_elements { padding:10px; border-bottom:solid 1px #cbc9c9; height: 6em; }
.it_elements.inprogress { background:url(../images/inprogress_bg.jpg) repeat left top; }
.it_elements div {display:block;}
.itinerary .myCheckbox {
	margin-top:22px;
	margin-right:10px;
	margin-left:20px;
    width: 36px;
    height: 28px;
    display: block;
    background: url("../images/check_box-1.jpg") no-repeat left bottom;
}
.itinerary .myCheckbox.checked { background: url("../images/check_box-1a.jpg") no-repeat left bottom; }
.itinerary .score { 
	background:#64c497;
	padding:4px;
	border-radius:6em;
	display:inline-block;
	color:#FFF;
	line-height: 2.8em;
    width: 3.5em;
    height: 3.5em;
    font-size: 1em;
  }
.itinerary .score_div { text-align:center; margin-right:33%; }
.itinerary .title { font-size:1.3em; font-family:"latobold", Gotham, "Helvetica Neue", Helvetica, Arial; font-weight:bold; margin-top: 10px;}
.itinerary .status a { color:#4a4a4a; text-decoration:underline; font-weight:bold; }
.itinerary .question { line-height: 4.5em; }
.itinerary .status { line-height: 4.2em; margin-right:20px; font-size:1.1em; }
.itinerary .inprogress .score_div { line-height: 5em; font-size:.9em;  margin-right:25%;}



/***** main *****/
.main { margin-left: 180px;  }
.main h1 { text-transform:uppercase; font-family: 'Domine', serif; font-size:2em; color:#000; }
.main h3 { text-transform:uppercase; font-family: 'Domine', serif; font-size:1em; padding-bottom:10px; border-bottom: solid #000 3px; color:#000; }
.main .title { color:#686868; text-transform:uppercase; font-size:0.75em; margin-top:30px; }
.main .articles { position:relative; margin-bottom:300px; }
.main .articles .col-md-4, .main .articles .col-sm-6, .main .articles .col-xs-12 { padding-right:50px; }
.main .btn-primary { color:#FFF; text-transform:uppercase; font-size:0.75em; background:#000; font-weight:normal; padding:10px 20px; border: solid 1px #000; }
.main .btn-primary:focus { border: solid 1px #000; outline: none; }
.main .completed .btn-primary { color:#000; background:#FFF; border: solid 1px #000; }
.main .completed .btn-primary:focus { border: solid 1px #000; outline: none; }
.main .completed .btn-primary:active { background:#EEE; border: solid 1px #000; outline: none; box-shadow:none; }
.main .btn-primary:active { background:#1A1A1A; border: solid 1px #000; outline: none; box-shadow:none; }

.img_articles {
	width:100%;
	height:100%;
	float:left;
	overflow:hidden;
	position:relative;
	text-align:center;
}
.img_articles .overlay { display: none;	}
.completed .img_articles .overlay {
	display: block;
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;
	background:url(../images/articles_bg_lines.png) top left no-repeat;
}
.completed .img_articles .overlay .score {
	position:absolute;
	display: inline-block;
	top: 50%;
  	left: 50%;
	-webkit-transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 4px; 
    border-radius: 10em;
    color: #000;
    background-clip: content-box;
    background-color: #FFF;
    width: 6.5em;
    height: 6.5em;
    border: solid 5px #64c497;
	text-transform:uppercase;
	font-size:0.5em;
	text-align:center;
}
.img_articles .overlay .score p { margin-top:10px;}
.img_articles .overlay .score p span { font-weight:bold; font-size:1.25em; }

.article_popup {
	position:absolute;
	background:rgba(0,0,0,0.95);
	padding:30px;
	width:100%;
	z-index:100;
	width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);	
	-webkit-transform: translateX(4%);
	-moz-transform: translateX(4%);
	-ms-transform: translateX(4%);
	transform: translateX(4%);	
	opacity: 0;
	-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	visibility: hidden;
	backface-visibility: hidden;
}

.article_popup.p_show {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
}

.article_popup .title { color:#b0b0b0; margin-top:0; }
.article_popup h3 { color:#FFF; font-weight:normal; padding:0; margin: 0;}
.article_popup p { color:#b0b0b0; font-size:.75em; }
.article_popup .img_art{ border-bottom: solid 2px #FFF; }
.article_popup ul li { color:#FFF; font-size:.75em; text-transform:uppercase; list-style:none; padding:10px; border-bottom:solid 1px #fff;}
.close_popup{padding:0;margin:0; border:0;}
.close_popup:foucs, .close_popup:active{border:0; outline:none;}
.article_popup .checked { color:#64c497;}
.article_popup .checked .myCheckbox { background: url("../images/check_box-2a.jpg") no-repeat left bottom; background-size: contain;}
.article_popup .myCheckbox { float: right; margin-top: -3px; width: 32px; height: 32px; display: block; background: url("../images/check_box-2.jpg") no-repeat left bottom; background-size: contain;}


/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) and (max-width : 991px){
	body {	font-size:12px;	}
	.article_popup .myCheckbox {
		width: 20px;
		height: 20px;
	}
	.close_popup img{
		height: 70%;
    	width: 70%;
		float: right;
	}
	.main .articles .col-md-4, .main .articles .col-sm-6, .main .articles .col-xs-12 {  padding-right: 20px;}
	.article_popup .col-sm-12 ul{padding: 0px;}
	.article_popup {
	    padding: 20px;
		width: -webkit-calc(100% - 20px);
    	width: -moz-calc(100% - 20px);
		width: calc(100% - 20px);
		transform: translateX(2%);
	}
	.article_popup .myCheckbox {
		width: 25px;
		height: 25px;
	}
	.completed .img_articles .overlay .score {
		width: 10em;
    	height: 10em;
	}
	.completed .img_articles .overlay .score p {font-size:1.5em;}
	.article_popup p {	font-size: .9em;	}
	#sidebar_menu {	margin-top: -40px;	}
	#sidebar-wrapper { left: 90px;	}
	.sidebar-nav li a, .sidebar-nav, #sidebar_menu, #sidebar_menu .close_btn  { width: 90px; }
	.side_menu.profile img { width:80%;}
	.main { margin-left: 130px;	}
	.logo_bottom {
		width: 170px;
		height: 80px;
	}
	.navbar-toggle { margin: 34px 30px;	}
	.search {
		padding: 35px 2em;
    	font-size: 1.3em;
	}
	#user_graph {  margin-top: 2px;	}
	.circleValue {
    	width: 4.25em;
    	height: 4.25em;
    	margin-top: -6.75em;
	}
	.circleValue p { font-size: 1.1em;	}
	.user_completion { margin-top: 35px; }
	.user_name .level {
		font-size: .7em;
		padding: .6em;
		top: -1.2em;
	}
	.profile_content img {width:100px;}
	#profile, #maps  {
		height: -webkit-calc(100vh - 100px);
		height: -moz-calc(100vh - 100px);
		height: calc(100vh - 100px);
	}
	#sidebar {	 padding-right: 90px;}
	.profile_details {	margin-top: 16px;}
	#profile .row {  height: auto;	}

	.itinerary .myCheckbox {
		margin-top: 10px;
		width: 30px;
		height: 25px;
		margin-left: 10px;
	}
	.itinerary_content { height: 7em;}	
	.itinerary .title {	margin-top: 5px;}
	.accordion-heading a .fa {
		font-size: 0.8em;
		padding-top: 5px;
	}
	.row.profile_data .gray_txt {
		font-size: .8em;
	}
	.row.profile_data .circleValue {
		width: 6em;
		height: 6em;
		margin-top: -96px;
		margin-bottom:10px;
	}
	.row.profile_data .circleValue p {
		font-size: 1.3em;
		margin-top: 1.7em;
	}
	.tab-content {
		height: -webkit-calc(100vh - 300px);
		height: -moz-calc(100vh - 300px);
		height: calc(100vh - 300px);
	}
	.icon-addon .form-control {
		font-size: .7em;
		width: 180px;
	}
	.manager_content .nav-tabs li a {
		margin-right: 5px;
		 padding: 10px 5px;
	}.cls.cls_img { margin-right: 5px; margin-left: 5px; width: 120px; }
	.cls.cls_txt {  width: 21%; }
	.cls.cls_gr { width: 21%; }
	.cls.arrow { margin-right: 10px; }
	.cls .circleValue {
		width: 8.8em;
    	height: 8.8em;
    	margin-top: -89px;
    	margin-bottom: 5px;
    	margin-right: auto;
    	margin-left: auto;
	}
	.employee.active {  margin-right: 0px;}
	.emp_stats .focus .circleValue {
		width: 3.7em;
    height: 3.7em;
    margin-top: -80px;
		margin-bottom:10px;
	}
	.emp_stats .focus .circleValue p {
		font-size:.8em;
		
	}
	.form-signin { font-size: 18px; }
	.form-control {
		margin: 10px auto;
		padding: 1em;
	}
	#trainee_graph { margin-top: 0px;}
	#trainee_graph { margin-top: 0px;}
	.your_sch { width: 25%;	}
	.your_day { width: 42%;}
	.your_res { width: 33%; padding: 10px 20px;}
	.your_sch .day_sch li { padding: 10px 5px;}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (max-width : 991px){
	body {	font-size:14px;	}
	.main .articles {   margin-bottom: 200px;	}
	.circleValue {
   	 	width: 4em;
    	height: 4em;
    	margin-top: -6em;
	}
	.circleValue p { font-size: 1.1em;	}
}

/* Medium Devices  */
@media only screen and (min-width : 992px) and (max-width : 1200px)  {
	body {	font-size:16px; }
	.completed .img_articles .overlay .score {
		width: 8em;
    	height: 8em;
	}
	.article_popup {
	    padding: 20px;
		width: -webkit-calc(100% - 20px);
    	width: -moz-calc(100% - 20px);
		width: calc(100% - 20px);
	}
	.close_popup img{
		height: 80%;
    	width: 80%;
		float: right;
	}
	#sidebar-wrapper {
	    margin-left: -100%;
    	left: 100px;
	}
	#sidebar { 	padding-right: 100px;	}
	.sidebar-nav li a, .sidebar-nav, #sidebar_menu, #sidebar_menu .close_btn {	width: 100px;	}
	.main {
    	margin-left: 130px;
	}
	.logo_bottom {
		width: 180px;
		height: 90px;
	}
	.navbar-toggle { margin: 34px 30px;	}
	.search {
		padding: 35px 2em;
    	font-size: 1.3em;
	}
	#user_graph { margin-top: 2px; 	}
	.circleValue {
   	 	width: 3em;
    	height: 3em;
    	margin-top: -5em;
	}
	.circleValue p { font-size: .8em;	}
	.user_completion { margin-top: 35px;	}
	.navbar-brand { padding: 5px 10px;	}
	.sidebar-nav li a {	padding: 10px 0;	}
	#sidebar_menu {	margin-top: -50px;	}
	.main .articles {   margin-bottom: 150px;	}
	.article_popup .myCheckbox {
		width: 25px;
		height: 25px;
	}
	.article_popup p {	font-size: .9em;}
	.article_popup {
	    padding: 20px;
		width: -webkit-calc(100% - 30px);
    	width: -moz-calc(100% - 30px);
		width: calc(100% - 30px);
	}
	.profile_content img {	width:110px;}
	.profile_details {   margin-top: 18px; }
	#profile, #maps  {
		height: -webkit-calc(100vh - 100px);
		height: -moz-calc(100vh - 100px);
		height: calc(100vh - 100px);
	}
	.main .articles .col-md-4, .main .articles .col-sm-6, .main .articles .col-sm-12, .main .articles .col-xs-12 { 	padding-right: 30px;}
	.row.profile_data .green_bg {	padding: 5px 5px 0;	}
	.row.profile_data {	margin: -20px 20px 40px 15px;}
	.row.profile_data .circleValue {
		width: 7em;
		height: 7em;
		margin-top: -97px;
    	margin-bottom: 5px;
	}
	.row.profile_data .circleValue p {   margin-top: 2em;}
	.accordion-heading a .fa {
		font-size: 0.8em;
		padding-top: 5px;
	}
	.itinerary .myCheckbox {
		margin-top: 13px;
		width: 30px;
		height: 25px;
		margin-left: 10px;
	}
	.itinerary .title {	margin-top: 8px;}
	.itinerary .status {
		margin-right: 15px;
		font-size: 1em;
	}
	.user_name .level {	padding: .52em .6em;}
	.itinerary .score_div {  margin-right:30%; }
	.itinerary .inprogress .score_div { margin-right:15%;}
	.employee .cls { margin-right:1%; font-size:.6em;}
	.cls.cls_img { margin-right: 5px; margin-left: 5px; width: 120px; }
	.cls.cls_txt {  width: 20%; }
	.cls.cls_gr { width: 22%; }
	.cls.arrow { margin-right: -30px; }
	.cls .circleValue {
		width: 7em;
    	height: 7em;
    	margin-top: -92px;
    	margin-bottom: 5px;
	}
	.emp_stats .focus .circleValue {
		width: 3.5em;
		height: 3.5em;
		margin-top: -83px;
	}
	.emp_stats .focus .circleValue p {
		font-size:.8em;
	}
	.tab-content {
		height: -webkit-calc(100vh - 300px);
		height: -moz-calc(100vh - 300px);
		height: calc(100vh - 300px);
	}
	.form-signin { font-size: 20px; }
	.form-control {
		margin: 10px auto;
		padding: 1em;
	}
	#trainee_graph { margin-top: 0px;}
	.your_sch { width: 25%;	}
	.your_day { width: 42%;}
	.your_res { width: 33%; padding: 10px 20px;}
}

/* Desktops */
@media only screen and (min-width : 1201px) and (max-width : 1680px){
	body {	font-size:20px;	}
	.main .articles .col-md-4, .main .articles .col-sm-6, .main .articles .col-sm-12, .main .articles .col-xs-12 {  padding-right: 50px;}
	#sidebar_menu {	 margin-top: -65px;	}
	.row.profile_data {	margin: -20px 25px 10px 18px;	}
	.profile_content img {	width: 150px;	}
	#comp_graph, #comp_graph1, #comp_graph2, #comp_graph3 {	margin-bottom: 20px;}
	.cls .circleValue {
		width: 6.5em;
    	height:6.5em;
		margin-top:-90px;
	}
	.emp_stats .focus .circleValue {
		width: 2.6em;
    	height: 2.6em;
    	margin-top: -83px;
	}
	.row.profile_data .circleValue {
		margin-top: -8.3em;
    	width: 6em;
    	height: 6em;
	}
	.row.profile_data .circleValue p {	margin-top: 1.8em;	}
	.circleValue {
   	 	width: 2.5em;
    	height: 2.5em;
    	margin-top: -4em;
	}
	.circleValue p { font-size: 0.7em;	} 
	.completed .img_articles .overlay .score {
		width: 7em;
    	height: 7em;
	}
	.article_popup .myCheckbox {
		width: 30px;
		height: 30px;
	}
	.user_name .level {	padding: .4em .5em;	}
	.logo_bottom {
		width: 220px;
		height: 100px;
	}
	.navbar-toggle { margin: 46px 30px; }
	.search {  padding: 48px 2em;}
	#user_graph {  margin-top: 12px;}
	.user_completion {	margin-top: 28px;}	
	.main .articles {  margin-bottom: 180px;}
	.close_popup img{
		height: 80%;
    	width: 80%;
		float: right;
	}
	#profile, #maps  {
		height: -webkit-calc(100vh - 124px);
		height: -moz-calc(100vh - 124px);
		height: calc(100vh - 124px);
	}
	.tab-content {
    	height: -webkit-calc(100vh - 335px);
   	 	height: -moz-calc(100vh - 335px);
    	height: calc(100vh - 335px);
	}
	.itinerary .title { font-size: 1.2em;}
	.itinerary .score_div {  margin-right: 30%; }
	.itinerary .inprogress .score_div { margin-right:20%;}
	.employee .cls { margin-right:1%;}
	.cls.cls_img { margin-right: 5px; margin-left: 20px; width: 140px; }
	.cls.arrow { margin-right: -30px; }
	.form-signin img{width:65%;}
	.form-signin { font-size: 22px; }
	.form-control {
		margin: 15px auto;
		padding: 1em;
	}
}
	
@media only screen and (min-width : 1200px)  and (max-width:1300px){
	.itinerary .score_div {  margin-right: 30%; }
	.itinerary .inprogress .score_div { margin-right:12%;}
}
	
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1681px) {
	body {
		font-size:20px;
	}
}