/* CSS document for screens **Note all of our CSS is generated by SASS */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 400px;
  color: #0a3a76;
  margin: 0;
  padding: 0;
  position: relative; }

#page {
  width: 100%;
  margin: 0 auto;
  position: relative; }

#c-page {
  max-width: 1100px;
  margin: 0 auto;
  position: relative; }

h1 {
  margin: 0 0 1em 0;
  font-size: 2.8em;
  font-weight: 700; }

h2 {
  margin: 0 0 .5em 0;
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.1em; }

h3 {
  margin: 0 0 .5em 0;
  font-size: 1.3em;
  font-weight: 700; }

h4 {
  margin: 0 0 1.5em 0;
  font-size: 1em;
  font-weight: 700; }

p {
  margin: 0 0 1em 0; }

div.bar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  background-color: #fff; }

div.grad-top {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 100%;
  height: 350px;
  background: #889fbc;
  /* Old browsers */
  background: -moz-linear-gradient(top, #889fbc 12%, #ffffff 96%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(12%, #889fbc), color-stop(96%, #ffffff));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #889fbc 12%, #ffffff 96%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #889fbc 12%, #ffffff 96%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #889fbc 12%, #ffffff 96%);
  /* IE10+ */
  background: linear-gradient(to bottom, #889fbc 12%, #ffffff 96%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#889fbc', endColorstr='#ffffff',GradientType=0 );
  /* IE6-9 */ }

/*z-index: 120; position: absolute; width: 100%; height: 97.5px; top: 0px; margin: 0 auto; padding: 0; background: #fff;*/
header {
  height: 50px; }

header a.logo {
  z-index: 100;
  position: absolute;
  display: block;
  width: 240px;
  height: 20px;
  background: url(../img/mLogoWeb.svg) no-repeat 0 0;
  background-size: contain;
  top: 15px;
  left: 10px; }

header a.logo span {
  display: none; }

/* Navigation */
nav {
  z-index: 170;
  position: absolute;
  top: 0px;
  left: 0px;
  padding-left: 270px; }

nav ul {
  list-style: none;
  margin: 0;
  padding: 0; }

nav ul::after {
  content: '';
  display: block;
  clear: both; }

nav ul li:hover {
  background-color: #0a3a76; }

nav ul li:hover > ul {
  display: block; }

nav ul li a {
  display: inline-block;
  color: #0a3a76;
  padding: 10px 0px 10px 20px;
  text-decoration: none;
  width: 125px; }

nav ul li:hover a {
  color: #fff; }

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #0a3a76; }

nav ul ul li a:hover {
  background-color: #1268d4; }

nav ul ul li {
  position: relative; }

nav ul ul ul {
  left: 100%;
  top: 0; }

/* top level */
nav > ul {
  padding-left: 35px; }

nav > ul > li {
  float: left; }

nav > ul > li > a {
  padding: 14px 20px 17px 20px;
  width: auto; }

nav a.logo {
  float: left;
  padding-top: 5px; }

nav ul ul img {
  position: absolute;
  top: 10px;
  left: 0px; }

div.skill-nav {
  float: left;
  height: 150px;
  width: 150px;
  background-color: #ccc; }

#infoNav {
  position: absolute;
  width: 900px;
  height: 250px;
  top: 50px;
  left: 60px;
  background-color: #0a3a76; }

#infoNav li div {
  box-sizing: border-box;
  position: relative;
  float: left;
  width: 300px;
  height: 250px;
  /*background: url(../img/test/cat-look-1.jpg); background-size: 250px auto; */ }

#infoNav li div:hover {
  box-sizing: border-box;
  position: relative;
  float: left;
  width: 300px;
  height: 250px;
  background-color: #0c468e;
  /*background: url(../img/test/cat-look-1.jpg); background-size: 250px auto; */ }

#infoNav li div {
  padding: 15px;
  color: #fff; }

#infoNav li div a {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 99px;
  padding: 8px;
  background-color: #fff;
  color: #0a3a76;
  text-align: center; }

#infoNav li div a:hover {
  background-color: #2c82ed; }

#infoNav li div h3 {
  font-size: 1.01em;
  padding-bottom: 9px;
  margin: 7px 0px 0px 40px; }

#infoNav li div p {
  font-size: .8em;
  padding-top: 0px;
  margin-top: 0px; }

.lidvimg {
  position: absolute;
  top: 20px;
  left: 17px; }

#uInfo {
  position: absolute;
  width: 900px;
  height: 200px;
  top: 300px;
  left: 60px;
  background-color: #f00;
  background: url(../img/test/techPoint.jpg); }

#uInfo li div {
  box-sizing: border-box; }

.tim {
  position: absolute;
  top: 100px;
  left: 200; }

#lang {
  position: absolute;
  top: 5px;
  left: 1000px; }

#lang select {
  position: absolute;
  top: 10px;
  right: 10px; }

#lang img {
  position: absolute;
  top: 7px;
  right: 164px; }

.lang-pick {
  width: 150px;
  padding-left: 5px; }

.lang-pick option {
  padding-left: 6px; }

.map-lang-pct {
  position: absolute;
  display: block;
  width: 58px;
  height: 25px;
  background: url(../img/pct-world-lang.svg) no-repeat 0 0;
  background-size: contain;
  top: 9px;
  right: 170px; }

/* Styling for Navigation Div Divider */
.divider {
  display: block;
  position: absolute;
  left: 100%;
  width: 1px;
  height: 200px;
  top: 25px;
  border-left: 1px solid #0c468e; }

#infoNav li div:hover > span.divider {
  display: none; }

/* Styling for Navigation Div Divider */
.marquee {
  height: 350px;
  max-width: 1100px;
  margin: 0px auto 20px auto; }

.marquee .marquee_data {
  display: none; }

.marquee .marquee_stage_large {
  height: inherit;
  position: relative;
  overflow: hidden; }

.marquee .marquee_container_1,
.marquee .marquee_container_2 {
  height: inherit;
  position: absolute;
  top: 0px;
  width: 100%; }

.marquee .marquee_container_1 {
  z-index: 101; }

.marquee .marquee_container_1 {
  z-index: 102; }

.marquee .marquee_spos1 {
  left: -1100px; }

.marquee .marquee_spos2 {
  left: 0px; }

.marquee .marquee_spos3 {
  left: 1100px; }

.marquee .marquee_panel {
  height: inherit;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center 0px;
  background-size: cover; }

.marquee .marquee_panel .panel_caption {
  width: 68%;
  position: absolute;
  bottom: 35px;
  left: 0px;
  margin-left: 16%;
  padding-bottom: 15px;
  /*border: 1px solid #fff;*/ }

.marquee .marquee_panel .panel_caption h3 {
  margin: 0px 0px 0px 0px;
  font-weight: 700;
  font-size: 2.1em;
  color: #0a3a76; }

.marquee .marquee_panel .panel_caption p {
  margin: 0px 50px 15px 50px;
  color: #888;
  font-size: 1.3em;
  color: #0a3a76; }

.marquee .marquee_panel .panel_caption a.cta {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0);
  text-transform: uppercase;
  color: #0a3a76;
  font-size: .9em;
  padding: 6px 20px;
  transition: background-color .7s, border .7s;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  text-decoration: none; }

.marquee .marquee_panel .panel_caption a:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: #000;
  border-color: rgba(255, 255, 255, 0); }

/*
.marquee .overlay { 
	position: absolute; left: 0px; top: 0px;
	width: 100%; height: 100%;
	background-image: linear-gradient(rgba(0,0,0,0)45%, rgba(0,0,0,.7)70%);
	background-size:  100%;
}
*/
.marquee .marquee_nav {
  position: absolute;
  bottom: 10px;
  left: 0px;
  text-align: center;
  width: 100%;
  z-index: 103; }

.marquee .marquee_nav div {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #b9d5f9;
  border-radius: 50%;
  margin: 0px 8px 0px 8px;
  cursor: pointer;
  transition: background-color .4s, border .4s; }

.marquee .marquee_nav div:hover {
  border-color: #0a3a76;
  background-color: #b9d5f9; }

.marquee .marquee_nav div.selected {
  background-color: #b9d5f9; }

.marquee .btn {
  width: 39px;
  height: 39px;
  background: rgba(255, 255, 255, 0.2) no-repeat;
  background-size: 50px 30px;
  position: absolute;
  top: 192px;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: background-color .4s, border .4s; }

.marquee .btn:hover {
  border-color: #fff;
  background-color: rgba(0, 0, 0, 0.6); }

.marquee .btn.prev {
  left: 20px;
  z-index: 104;
  background-image: url(../img/marquee/arrow_left.svg);
  background-position: -8px 4px; }

.marquee .btn.next {
  right: 20px;
  z-index: 105;
  background-image: url(../img/marquee/arrow_right.svg);
  background-position: -3px 4px; }

.marquee .marquee_stage_small {
  height: inherit;
  position: relative;
  overflow: hidden; }

.marquee .marquee_stage_small .marquee_panel {
  width: 100%;
  height: inherit;
  position: absolute;
  top: 0px;
  left: 0px; }

@media screen and (max-width: 800px) {
  .marquee {
    font-size: 14px;
    height: 325px;
    background-color: #444; }

  .marquee btn {
    width: 29px;
    height: 29px;
    background-size: 33px 20px;
    top: 140px; }

  .marquee .btn.prev {
    background-position: -4px 4px; }

  .marquee .btn.next {
    background-position: -1px 4px; }

  .marquee .marquee_panel .panel_caption {
    width: 80%;
    margin-left: 10%; }

  .marquee .marquee_panel .panel_caption p {
    display: none; }

  .marquee .marquee_panel .panel_caption a.cta {
    margin-top: 10px;
    padding: 4px 20px; }

  .marquee .marquee_nav div {
    width: 13px;
    height: 13px;
    margin: 0px 12px 0px 12px; } }
@media screen and (max-width: 600px) {
  .marquee {
    height: 250px; }

  .marquee .overlay {
    dispaly: none; }

  .marquee .marquee_panel .panel_caption {
    margin: 0px;
    padding: 10px 10px 20px 10px;
    width: 100%;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.65); }

  .marquee .marquee_panel .panel_caption a.cta {
    padding: 8px 30px; } }
#skilllevel {
  position: relative; }

#skilllevel aside {
  width: 33%;
  float: left;
  text-align: center; }

#skilllevel .level {
  margin: 40px 15px 15px 15px;
  background: no-repeat center top;
  background-size: 75px 75px;
  padding-top: 53px; }

#skilllevel .level h3 a {
  color: #0a3a76;
  text-decoration: none; }

#skilllevel .level h3 a:hover {
  text-decoration: underline; }

#skilllevel .level p {
  text-align: justify;
  text-justify: inter-word; }

#skilllevel .level.beginner {
  background-image: url(../img/svg/skilllevel/questions-b-sl.svg);
  background-size: 43px 43px; }

#skilllevel .level.business {
  background-image: url(../img/svg/skilllevel/business-b-sl.svg);
  background-size: 43px 43px; }

#skilllevel .level.professional {
  background-image: url(../img/svg/skilllevel/professional-b-sl.svg);
  background-size: 43px 43px; }

/* #VidReel Thumbnails  */
aside
#video_thumbs {
  float: left;
  width: 100%;
  text-align: center; }

#video_thumbs .vidninfo {
  float: left;
  width: calc(100% / 4); }

#video_thumbs h4 {
  clear: left;
  font-size: 1em;
  padding: 0 0 0 .7em;
  margin: 0 0 .25em 0; }

#video_thumbs p {
  clear: left;
  font-size: .85em;
  padding: 0 0 0 .85em; }

#video_thumbs a {
  text-decoration: none;
  color: #0a3a76; }

.video_area {
  position: relative;
  background: #0A3A76;
  padding: 8px;
  float: left;
  margin: 50px 5px 5px 0px;
  width: 224px;
  height: 136px; }

.overlay_thumb {
  display: none;
  position: absolute;
  height: 126px;
  width: 224px;
  top: 8px;
  left: 8px;
  background: #1268d4; }

.thumb1 {
  top: 8px;
  left: 8px;
  height: 126px;
  width: 224px; }

.hidden {
  display: block; }

.noshow {
  display: none; }

.link_thumb {
  position: absolute;
  height: 126px;
  width: 224px; }

.link_thumb span {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #999999;
  border-image: none;
  border-style: solid;
  border-width: 0px 0px 5px 0px;
  display: block;
  float: left;
  height: 121px;
  margin: 0;
  position: relative;
  width: calc(100% / 5); }

.link_thumb span:hover {
  border-color: #fff; }

.link_thumb img {
  position: absolute;
  top: 0px;
  left: 0px; }

.info_area {
  clear: both;
  height: 44px;
  position: relative; }

.tinfo {
  margin: 8px; }

/*# sourceMappingURL=main.css.map */
