/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Temporary Job Listing Styles
 */
.editablesection h2 {
  font-size: 1.2em;
  margin: 1em 0;
  display: block;
  -webkit-margin-before: 1.33em;
  -webkit-margin-after: 1.33em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

#applicants {
  table-layout: fixed;
  width: 100%;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 2em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */



body {font-family: 'Lato', sans-serif; font-weight: 400; color: #464646; line-height: 1.3; font-size: 1.1em; background: url(../img/bricks-wh.png);}
body.home {font-size: .9em; background: none;}



.fltLeft {float: left;}
.fltRight {float: right;}

img.fltLeft {margin-right: 2em; margin-bottom: 1em;}

.halfCol {width: 42%;}
.twoCol > div {width: 48%; float: left; margin-bottom: 1em;}
.twoCol > div:last-child {float: right;}
.twoCol .twoCol {font-size: .8em;}

.twoCol > .width70 {width: 70%;}
.twoCol > .width30 {width: 30%;}

.banner {text-align: center; background-image: url(../img/skyline.jpg); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; height: 400px; color: #fff; margin-bottom: 1em;}
.banner img {position: fixed; top: 0; left: 0; width: 100%;}
.banner.utahvalley { background: url(../img/utah-valley.jpg) no-repeat fixed top center;}
.banner.tourofutah { background: url(../img/tou_visual_start.jpg) no-repeat fixed top center;}
.banner.glassroof { background: url(../img/glass-roof.jpg) no-repeat fixed top center;}
.banner.lab { background: url(../img/lab.jpg) no-repeat fixed top center;}
.banner h1 {padding-top: 100px; margin: 0}
.banner p {font-size: 1.3em;}
.banner .circle-arrow {display: inline-block; width: 100px; height: 100px; background: url(../img/circle-arrow-dwn.png) no-repeat center center;}

#teammember-Boris {background-image: url(../img/team/team-lg-boris.jpg);}
#teammember-Chaitra {background-image: url(../img/team/team-lg-chaitra.jpg);}
#teammember-Danica {background-image: url(../img/team/team-lg-danica.jpg);}
#teammember-Erik {background-image: url(../img/team/team-lg-erik.jpg);}
#teammember-Guy {background-image: url(../img/team/team-lg-guy.jpg);}
#teammember-Jen {background-image: url(../img/team/team-lg-jen.jpg);}
#teammember-Jerry {background-image: url(../img/team/team-lg-jerry.jpg);}
#teammember-Kelsey {background-image: url(../img/team/team-lg-kelsey.jpg);}
#teammember-Keyvan {background-image: url(../img/team/team-lg-keyvan.jpg);}
#teammember-Krishna {background-image: url(../img/team/team-lg-krishna.jpg);}
#teammember-Marc {background-image: url(../img/team/team-lg-marc.jpg);}
#teammember-Stacey {background-image: url(../img/team/team-lg-stacey.jpg);}
#teammember-Tony {background-image: url(../img/team/team-lg-tony.jpg);}
#teammember-Lu {background-image: url(../img/team/team-lg-lu.jpg);}

.peopleDetail div div {display: inline;}
.peopleDetail div div span {padding: 0 20px;}


.alignRight {text-align: right;}
.alignCenter {text-align: center;}
.alignCenter.spaces a {margin: 24px 12px;}
.clear {clear: both;}
.columns {list-style: none; margin-left: 0; padding-left: 0; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
.columns i {font-size: 12px; margin-right: 5px;}
.columns li:nth-child(1) i {color: #25aae1;}
.columns li:nth-child(2) i {color: #ec008c;}
.columns li:nth-child(3) i {color: #ece003;}
.columns li:nth-child(4) i {color: #ed1d24;}
.columns li:nth-child(5) i {color: #39b54a;}
.columns li:nth-child(6) i {color: #675ad3;}
.columns li:nth-child(7) i {color: #f68e56;}
.columns li:nth-child(8) i {color: #f06eaa;}

.fluid-wrapper {margin: 0 auto; max-width: 1056px;}
.wrapper {margin: 0 auto; width: 1056px;}
.section {position: relative; height: 940px; overflow: hidden;}
.section .wrapper {padding: 140px 0 140px; position: relative; }

.bricksGray {background: url(../img/bricks-gy.png); color: #959595;}
.bricksBlue {background: url(../img/bricks-bl.png);}
.bricksGreen {background: url(../img/bricks-gr.png); color: #fff;}
.bricksWhite {background: url(../img/bricks-wh.png);}
.bricksCyan {background: url(../img/bricks-cy.png); color: #fff;}
.bricksCyan h2 {color: #464646;}

.dwnBtn {width: 100px; height: 100px; background: url(../img/circles.png) no-repeat; bottom: 60px; display: block; position: absolute; left: 50%; margin-left: -49px;}

.teamMemberSm {float: left; margin-right: 10px;}

h1 {font-weight: 900; font-size: 48px; line-height: 1;}
h2 {font-weight: 900; font-size: 40px; line-height: 1.1;}
.bricksGreen h2 {color: #464646;}
h3 {color: #00aeef; font-size: 28px; font-weight: 400;}
.bricksCyan h3 {color: #fff;}
h4 {text-transform: uppercase; font-size: 1.2em; margin: 1em 0;}

h1, h2, h3 {margin: 0 0 .5em 0;}
h1.alignCenter + p {margin: 0 15% 2em; font-size: 1.2em;}
a {text-decoration: none; outline: none; color: #0e2447; font-weight: 700; cursor: pointer;}
a:focus {outline: none;}

p small a {color: inherit;}

hr {clear: both;}

blockquote {border-bottom: 1px solid #cccccc; font-size: 36px; padding: 0 1em 1em; margin: 12px 0 ;}

header { height: 100px; padding-top: 40px; font-size: 24px; border-top: 4px solid #00a6e5; text-transform: uppercase; }
.desk-home header {position: fixed; top: 0; left: 0; width: 100%; z-index: 99;}
header a {color: #515151; margin-left: 30px;}
header a:hover {color: #00a6e5;}
header #logo {width: 215px; height: 63px; background-repeat: no-repeat; text-indent: -9999px; background-image: url(../img/logo-grey.png); display: block; background-size: contain;}

header.wht a {color: #fff;}
header.wht a:hover {color: #00a6e5;}
header.wht #logo { background-image: url(../img/logo-white.png);}

header.wht-over-blue a {color: #fff;}
header.wht-over-blue a:hover {color: #464646;}
header.wht-over-blue #logo { background-image: url(../img/logo-wht-over-blue.png);}

form p {margin: 8px 0; position: relative;}
input[type="text"] {border: 1px solid #ccc; padding: 10px 0; text-indent: 8px; width: 100%; font-size: 14px;}
.lt-ie9 input[type="text"] {text-indent: 0;}
.customSelect { background: #fff url(../img/triangle.png) no-repeat right center; border: 1px solid #ccc; padding: 8px 0; text-indent: 8px; width: 100%; font-size: 14px; overflow: hidden;}
/*.customSelect:after {display: block; width: 40px; border-left: 1px solid #ccc; content: ""; background: url(../img/triangle.png) no-repeat center center; right: 0; top: 0; position: absolute; height: 36px;}*/

textarea {border: 1px solid #ccc; width: 96%; padding: 2%; font-size: 14px;}

.hero {position: absolute; top: 425px; margin-left: -33px; left: 50%; width: 66px; height: 74px; z-index: 100; transition: top 2s; -webkit-transition: top 2s; }

#scrollNav {width: 200px; height: 200px; position: fixed; right: 20px; top: 80px; font-size: 12px; text-align: right; z-index: 100;}
#scrollNav ul {list-style: none; padding: 0; margin: 0;}
#scrollNav ul li {margin: 3px 0; clear: both; height: 16px;}
#scrollNav ul li a {color: #515151;}
#scrollNav ul li a span {display: none; font-weight: 700;}
#scrollNav ul li a i {font-size: 12px; margin-left: 2px; float: right; display: block; width: 18px; height: 18px; line-height: 18px; text-align: center;}

#scrollNav ul li.active a, #scrollNav ul li:hover a {color: #27aae0;}
#scrollNav ul li.active a span, #scrollNav ul li:hover a span {display: inline;}
#scrollNav ul li.active a i, #scrollNav ul li:hover a i {font-size: 18px;}

#a {height: 910px; overflow: hidden;}
#a .hand { margin-left: -960px; position: absolute; left: 50%; top: 0;}
#a .dwnBtn {background-position: 0 -118px;}
#a .dwnBtn:hover {background-position: -118px -118px;}
#b { }
#b .dwnBtn {background-position: 0 -230px;}
#b .dwnBtn:hover {background-position: -118px -230px;}
#c {height: 1070px;}
#c .dwnBtn {background-position: 0 -345px;}
#c .dwnBtn:hover {background-position: -118px -345px;}
#d {height: 982px;}
#d .dwnBtn {background-position: 0 -457px;}
#d .dwnBtn:hover {background-position: -118px -457px;}
#e { color: #000; background: url(../img/campus.jpg) no-repeat center center; background-size: cover;}
#e .dwnBtn {background-position: 0 -570px;}
#e .dwnBtn:hover {background-position: -118px -570px;}
#e .wrapper {padding-top: 270px;}
#e .campus { margin-left: -864px; position: absolute; left: 50%; top: 0;}
#e .blueCubes {background: url(../img/blue-cubes.png) no-repeat center right; position: absolute; left: -50%; top: 220px; height: 567px; width: 50%; transition: left .5s; -webkit-transition: left .5s; }
#e h2 {color: #fff;}
#e h3 {color: #000;}

#g {height: 770px;}

.social a {display: inline-block; margin: 0 6px; background-color: #27aae0; color: #fff; border-radius: 100px; height: 50px; width: 50px; line-height: 50px; text-align: center; font-size: 30px;}
.social a:hover {background-color: #001c3e; color: #fff;}
.social a .roIcon-glassdoor {background: url(../img/icon-glassdoor.png) no-repeat center center; width: 21px; height: 38px; display: inline-block; position: relative; top: 5px;}


#tabOut {color: #fff; position: fixed; top: 0; right: 0; width: 0; transition: width .5s; -webkit-transition: width .5s; bottom: 0; z-index: 200; text-align: left; font-size: 14px;}
#tabOut .pad {padding: 34px 30px; width: 240px;}
#tabOut h4 {margin: 0; font-size: 19px;}
#tabOut ul {list-style: none; padding: 0; margin: .5em 0 1.5em;}
#tabOut a {color: #fff;}
#tabOut #closeMenu {font-size: 20px; font-weight: 700;}
#tabOut .social a {display: inline-block; margin: 0 2px; background-color: #fff; color: #27aae0; border-radius: 50px; height: 24px; width: 24px; line-height: 24px; text-align: center; font-size: 16px;}
#tabOut .social a .roIcon-glassdoor {background: url(../img/icon-glassdoor2.png) no-repeat; width: 10px; height: 18px; display: inline-block; position: relative; top: 5px;}


#tabOut a:hover {color: #001c3e;}
#tabOut .social a:hover {background-color: #001c3e; color: #27aae0;}

#map {height: 500px;}

.scroller {position: relative;}
.scrollWindow { overflow: hidden; position: relative; height: 130px;}
.scrollWindow ul {list-style: none; position: relative; width: 2000em; text-align: center; padding: 0; margin: 0; font-size: .8em; }
.scrollWindow ul li {float: left; padding: 0px 11px;}
.scrollWindow ul li figure {display: block; text-align: center; position: relative; }
.scrollWindow ul li figure img {vertical-align: middle;}
.scrollWindow ul li figure figcaption {position: absolute; bottom: 0; width: 100%; display: block; line-height: 1; font-size: 1.2em;}

.prev {position: absolute; top: 40%; left: -20px; height: 40px; width: 20px; font-size: 40px; color: #00aeef; cursor: pointer;}
.next {position: absolute; top: 40%; right: -20px; height: 40px; width: 20px; font-size: 40px; color: #00aeef; cursor: pointer;}

#products { padding-top: 62px; background: url(../img/branches.png) no-repeat top center; margin-top: 160px;}
#products .scrollWindow {height: 320px;}
#products ul li {float: left; padding: 20px 0px; width: 264px; opacity: 0; margin-top: -20px;}
#products ul li figure {display: block; text-align: center; position: relative; height: 260px; line-height: 260px;}
.circle {border-radius: 200px;}

#size-comps {height: 420px; line-height: 420px; position: relative;}
#size-comps > img {margin-left: 40px;}
#magifiedIM {position: absolute; top: -4px; right: 63px; z-index: 200;}
#magifiedIM:before {content: ''; position: absolute; width: 96px; height: 381px; top: 20px; left: -75px; background: url(../img/zoom-ray.png) no-repeat; }

#how-small-text div:not(:nth-child(2)) {display: none;}

#how-small-imgs ul {position: absolute; top: 0; left: 50%; margin-left: -512px;}

#how-small-imgs a {opacity: .3;}
#how-small-imgs a.active {opacity: 1;}

.white {color: #fff;}
.biggish {font-size: 1.5em;}
.bigger {font-size: 1.7em; font-weight: 900; display: block; line-height: 1;}

.dotBar {background: url(../img/dot-bar.png) no-repeat top center; padding-top: 80px;}
.home .expandedList { min-width: 1040px;}

.expandedList {list-style: none; padding-left: 0; margin: 0; text-align: center; color: #fff; font-size: 20px; text-transform: uppercase;}
.expandedList li {float: left; width: 18%; transition: width .5s; -webkit-transition: width .5s; background-color: #363636; height: 520px;}
.expandedList li:nth-child(3) { width: 28%; }
.expandedList li:nth-child(even) {background-color: #464646;}
.expandedList li .text {height: 50px; line-height: 50px;}
.expandedList li .image {overflow: hidden; height: 287px; position: relative;}
.expandedList li img {opacity: .8; position: absolute; top: 0; left: 50%; margin-left: -288px; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
.expandedList li:hover img, .expandedList li.active img {opacity: 1;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}

.arrow-left {width: 23px; height: 43px; display: inline-block; background: url(../img/arrow-left.png) no-repeat;}
.arrow-right {width: 23px; height: 43px; display: inline-block; background: url(../img/arrow-right.png) no-repeat;}

.SlideInLeft {position: absolute; bottom: 0; right: 120%; transition: right .5s; -webkit-transition: right .5s; width: 300px; height: 654px;}
.SlideInLeft a img {position: absolute; top: 0; right: 0px;}
.SlideInLeft a span.pill {position: absolute; display: block; top: 40px; width: 200px; color: #fff; padding: 20px 60px; width: 170px; left: -180px; border-radius: 100px 0 0 100px; background-color: #001c3e;}
.SlideInLeft a .arrow-left {font-size: 60px; position: absolute; left: 20px; top: 21px;}

.SlideInRight {position: absolute; bottom: 0; left: 120%; transition: left .5s; -webkit-transition: left .5s; width: 300px; height: 654px;}
.SlideInRight a img {position: absolute; top: 0; left: -140px;}
.SlideInRight a span.pill {position: absolute; display: block; top: 40px; width: 200px; color: #fff; padding: 20px 60px; width: 150px; right: -190px; border-radius: 0 100px 100px 0; background-color: #001c3e; text-align: right;}
.SlideInRight a .arrow-right {font-size: 60px; position: absolute; right: 20px; top: 21px;}

.SlideInLeft a:hover span.pill, .SlideInRight a:hover span.pill {background-color: rgba(0,28,62,0.6);}

.flexCapacitor {background: url(../img/flexcapacitor2.png) no-repeat top center; padding-top: 190px;}
.onTop {position: relative; z-index: 80;}
.social a {margin: 0 6px;}

.pill {display: inline-block; color: #fff; padding: 16px 30px; background-color: #001c3e; position: relative; border-radius: 100px; font-size: 18px; border: none;}
.pill:hover {background-color: rgba(0,28,62,0.6);}
.pill span {vertical-align: middle;}
.pillRight { border-radius: 0 100px 100px 0; padding: 20px 30px 20px 50px;}
.pillRight.extraPad, .pillLeft.extraPad {padding-top: 28px; padding-bottom: 28px;}

.pillLeft {  border-radius: 100px 0 0 100px; padding: 20px 50px 20px 30px;}


.slideLeftContainer .vertCenter {text-align: center; top: 32%; position: absolute; width: 320px;}
.slideRightContainer .vertCenter {text-align: center; top: 55%; position: absolute; width: 240px;}

.openings {list-style: none; padding: 0; margin: 2em 0;}
.openings li {float: left; width: 528px; height: 225px; position: relative;}
.openings li img { opacity: .1; }
.openings li a {border: 5px solid #fff; border-radius: 100px; padding: 19px 20px; position: absolute; top: 32%; left: 29%; display: block; width: 180px; color: #fff; text-align: center; font-size: 1.3em; background-color: rgba(0,28,62,0.4); line-height: 22px;}
.lt-ie9 .openings li a {background: url(../img/trans-blue-dk.png);}
.openings li.manufacturing a { padding: 10px 20px;}
.openings li:hover img {opacity: 1;}
.openings li a:hover {background-color: rgba(39,170,224,0.6);}
.lt-ie9 .openings li a:hover {background: url(../img/trans-blue.png);}

#wantedBtn { display: block; width: 98px; height: 98px; text-indent: -9999px; background: url(../img/circles.png) no-repeat; background-position: 0 -685px; margin: 0 auto;}
#wantedBtn:hover {background-position: -119px -685px;}


.bigX { display: none; width: 97px; height: 97px; z-index: 300; position: absolute; top: 20px; background: url(../img/circles.png) no-repeat; background-position: 0 0; }
.bigX:hover {background-position: top right}

.slideLeftContainer .bigX {left: 20px;}
.slideRightContainer .bigX {right: 20px;}

.sectionSlide {position: absolute; top: 0; bottom: 0; width: 100%; z-index: 299; overflow: hidden;}
.sectionSlide p {color: #fff;}

.slideLeftContainer .sectionSlide {right: 100%; transition: right .5s; -webkit-transition: right .5s;}
.slideRightContainer .sectionSlide {left: 100%; transition: left .5s; -webkit-transition: left .5s;}


.slideLeftContainer .sectionSlidePrev {position: absolute; right: 0; top: 40%; padding: 20px 15px 20px 30px}
.slideLeftContainer .sectionSlideNext {position: absolute; left: 0; top: 40%; width: 73px; font-size: 16px;}
.slideRightContainer .sectionSlidePrev {position: absolute; left: 0; top: 40%; padding: 20px 30px 20px 15px}
.slideRightContainer .sectionSlideNext {position: absolute; right: 0; top: 40%; width: 73px; font-size: 16px;}

.sectionSlideNext .arrow-left { position: absolute; left: 12px; top: 20px;}
.sectionSlideNext .arrow-right { position: absolute; right: 12px; top: 20px;}
.sectionSlide .arrow-right, .sectionSlide .arrow-left {font-size: 60px;}

#fla .wrapper {width: 790px;}
#fla .halfCol {width: 380px; position: relative;}
#fla #heisenberg {position: absolute; bottom: -50px; left: -40px; z-index: 1;}
#flb {background: url(../img/automated-robots.jpg) no-repeat; background-size: cover;}
#flb .halfCol {width: 50%; height: 100%; position: relative;}
#flb .halfCol img {position: absolute; top: 20px; right: -30px; width: 530px;}
#flb .pad {margin: 140px 30px 0 0; width: 443px; float: right; }

#fld .halfCol {width: 46%;}

#fra {background: url(../img/green-building.jpg) no-repeat; background-size: cover;}
#fra ul {list-style: none; padding: 0; width: 100%; margin-top: 160px;}
#fra ul li {float: left; width: 25%; position: relative;}
#fra ul li span {background-color: #001c3e; display: inline-block; border-radius: 20px; color: #fff; left: 0px; width: 20px; height: 20px; line-height: 20px; text-align: center; float: left; margin-top: 8px; cursor: pointer;}
#fra ul li div {width: 180px; float: left; color: #fff; background-color: #001c3e; padding: 10px; font-size: 16px; margin-left: 16px; position: relative; display: none;}
#fra ul li div:before {position: absolute; content: ''; width: 18px; height: 3px; background-color: #001c3e; top: 17px; right: 100%;}
#frb {background: url(../img/skiing.jpg) no-repeat; background-size: cover;}
#frb .burn {padding: 140px 70px; width: 420px; height: 280px; font-size: 17px; background-color: rgba(0,0,0,0.5); border-radius: 1000px;}
.lt-ie9 #frb .burn { background: url(../img/trans-black.png);}
#frc .wrapper {width: 920px;}
#frc .halfCol {width: 48%;}
#frc .backgrounds:not(:first-child) {display: none;}
#frc ul {list-style: none; padding: 0;}
#frc ul li {float: left; margin-right: 10px;}
#frc ul li a {background-color: #fff; color: #001c3e; display: inline-block; border-radius: 20px; width: 38px; height: 38px; line-height: 38px; text-align: center; margin-top: 8px; font-size: 18px;}
#frc ul li a:hover, #frc ul li a.active {background-color: #001c3e; color: #fff;}
#frd {background: url(../img/frd-bg.jpg) no-repeat; background-size: cover;}
#frd .wrapper {width: 900px;}
#frd h2 {color: #fff; font-size: 62px; margin-top: 25%;}
#frd .pillLeft {position: absolute; right: 0; width: 80px;}
#frd .pillLeft .arrow-right { position: absolute; right: 20px; top: 20px;}
#frd .pillLeft.top38 {top: 36%;}
#frd .pillLeft.top43 {top: 46%;}

.burn {background-color: rgba(0,0,0,0.7); color: #fff;}

.branches {list-style: none; margin: 0; padding: 0; border-left: 3px solid #001c3e; position: relative; z-index: 2;}
.branches:before {content: ''; position: absolute; background: url(../img/lines.png) no-repeat; width: 216px; height: 319px; right: 100%; bottom: -26px;}

.branches li {height: 142px; border-top: 3px solid #001c3e; width: 60px; }
.branches li:last-child {height: 0px;}
.branches li a { background-color: #001c3e; display: inline-block; border-radius: 20px; color: #fff; position: relative; left: 60px; width: 20px; height: 20px; line-height: 20px; text-align: center; top: -12px; z-index: 2;}
.branches li a:hover, .branches li.active a { color: #001c3e; background-color: #fff;} 
.branches li div.circle {display: none; position: absolute; bottom: 0px; right: 510px; color: #fff; text-align: center; font-size: .8em; width: 240px; background-color: #001c3e; border-radius: 200px; height: 240px; }
.branches li.active div.circle {display: block;}
.branches li div.circle div {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 152px; width: 80%;}
.branches li:nth-child(2) div.circle div {top: -10px; }

.process {list-style: none; padding: 0;}
.process li {float: left; margin-right: 8px; text-align: center; width: 123px;}
.process li img {margin-bottom: 12px;}
.process li .number {display: inline-block; background-color: #fff; width: 30px; height: 30px; line-height: 30px; font-weight: 700; color: #001c3e; border-radius: 50px; margin-bottom: 10px;}
.process li figcaption { display: block; color: #fff;}

#facts {list-style: none; padding: 0; float: right; width: 243px;}
#facts li {width: 243px; height: 143px; background-color: #fff; border-radius: 200px; color: #27aae0; text-align: center; font-size: 24px; text-transform: uppercase; padding: 50px 0; line-height: 1; display: none;}
#facts li.active {display: block;}
#facts li span {font-size: 90px; font-weight: 900; display: block; line-height: 1;}

#factImgs img {display: none;}
#factImgs img.active {display: inline;}

.factsUp {position: absolute; left: 0; top: 200px; background: url(../img/arrow-up.png) no-repeat; width: 69px; height: 37px; cursor: pointer;}
.factsDwn {position: absolute; left: 0; top: 300px; background: url(../img/arrow-dwn.png) no-repeat; width: 69px; height: 37px; cursor: pointer;}

.grid {list-style: none; padding: 0; margin: 0;}
.grid li {float: left; width: 25%; overflow: hidden; position: relative;}
.grid li:nth-child(4n+1) {clear: both;}
.grid li img {width: 100%;}
.grid li h3 {color: #fff; font-weight: 900;}
.grid li a.overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 10%; color: #fff; display: block; background-color: rgba(39,170, 224,0.8); opacity: 0;}
.lt-ie9 .grid li a.overlay {background: url(../img/trans-blue.png);}

body:after{
    display:none;
    content: url(../img/sweet-a.png) url(../img/sweet-b.png) url(../img/sweet-c.png) url(../img/sweet-d.png) url(../img/sweet-e.png) url(../img/sweet-f.png) url(../img/sweet-g.png) url(../img/sweet-h.png);
}

.rewardDots a {font-weight: 400; color: inherit;}

#rewards-graph {width: 507px; height: 507px; position: relative; background: url(../img/sweet-blank.png) no-repeat; background-size: contain; color: #fff; font-size: 13px;}
#rewards-graph.reward-a {background: url(../img/sweet-a.png) no-repeat; background-size: contain;}
#rewards-graph.reward-b {background: url(../img/sweet-b.png) no-repeat; background-size: contain;}
#rewards-graph.reward-c {background: url(../img/sweet-c.png) no-repeat; background-size: contain;}
#rewards-graph.reward-d {background: url(../img/sweet-d.png) no-repeat; background-size: contain;}
#rewards-graph.reward-e {background: url(../img/sweet-e.png) no-repeat; background-size: contain;}
#rewards-graph.reward-f {background: url(../img/sweet-f.png) no-repeat; background-size: contain;}
#rewards-graph.reward-g {background: url(../img/sweet-g.png) no-repeat; background-size: contain;}
#rewards-graph.reward-h {background: url(../img/sweet-h.png) no-repeat; background-size: contain;}
#rewards-graph ul {margin: 0; padding: 0; list-style: none;}
#rewards-graph ul li span {position: absolute; width: 110px; height: 110px; cursor: pointer;}
#rewards-graph ul li div strong {white-space: nowrap;}

#rewards-graph ul #reward-e span {top: 334px; left: 334px;}
#rewards-graph ul #reward-d span {top: 68px; left: 334px;}
#rewards-graph ul #reward-g span {top: 200px; left: 388px;}
#rewards-graph ul #reward-f span {top: 10px; left: 200px;}
#rewards-graph ul #reward-h span {top: 388px; left: 197px;}
#rewards-graph ul #reward-b span {top: 332px; left: 64px;}
#rewards-graph ul #reward-c span {top: 200px; left: 9px;}
#rewards-graph ul #reward-a span {top: 63px; left: 65px;}
#rewards-graph ul li div {position: absolute; width: 170px; height: 140px; left: 50%; margin-left: -88px; top: 200px; display: none; text-align: center;}

#rewards-graph.reward-a ul #reward-a div {display: block;}
#rewards-graph.reward-b ul #reward-b div {display: block;}
#rewards-graph.reward-c ul #reward-c div {display: block;}
#rewards-graph.reward-d ul #reward-d div {display: block;}
#rewards-graph.reward-e ul #reward-e div {display: block;}
#rewards-graph.reward-f ul #reward-f div {display: block;}
#rewards-graph.reward-g ul #reward-g div {display: block;}
#rewards-graph.reward-h ul #reward-h div {display: block;}

.executive-team > div {float: left; width: 50%; position: relative; }
.executive-team > div img {width: 100%;}
.executive-team > div .overlay {position: absolute; top: 0; left: 0; bottom: 0; width: 100%; color: #fff; background-color: rgba(39,170,224,0.8); display: none;}
.lt-ie9 .executive-team > div .overlay {background: url(../img/trans-blue.png);}
.executive-team > div:hover .overlay {display: block; font-weight: 900; font-size: 1.5em;}
.executive-team > div .overlay span {background: url(../img/magnifying-glass.png) no-repeat left center; display: inline-block; position: absolute; top: 40%; padding-left: 72px; height: 80px; line-height: 80px; width: 200px; margin-left: -100px; left: 46%;}

.lineThru {background: url(../img/border.gif) repeat-x left center; text-align: center; margin: 1em auto;}
.lineThru h4 { display: inline-block; padding: 20px; text-transform: none; background-color: #fff; margin: 0; font-size: 1.3em;}

.relative {position: relative;}

.photos {overflow: hidden; position: relative; height: 400px;}
.photos ul {list-style: none; margin: 0; padding: 0; width: 2000em; position: absolute; left: 0; top: 0;}
.photos ul li {float: left; margin-right: 1em;}
.relative .pillLeft {position: absolute; top: 40%; right: 0; padding: 20px 30px; z-index: 30;}
.relative .pillRight {position: absolute; top: 40%; left: 0; padding: 20px 30px; z-index: 30;}

.blue-circles {list-style: none; padding: 0; margin: 1em 0; text-align: center;}
.blue-circles li {display: inline-block; margin: 0 6px;}
.blue-circles li a {display: inline-block; text-align: center; width: 120px; height: 120px; line-height: 120px; border-radius: 100px; background-color: #27aae0; color: #fff;}

.circleSteps {list-style: none; padding-left: 0;}
.circleSteps li {margin: 2em 0;}
.circleSteps li span {float: left; display: block; width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 100px; font-size: 24px; border: 3px solid #bcbdc0; color: #bcbdc0; margin-right: 12px; font-weight: 700; background: #fff;}

.timeline {background: url(../img/timeline-line.gif) repeat-y top center; margin: 3em 0;}
.timeline:before {content: ''; display: block; height: 17px; width: 100%; background: url(../img/blue-circle.png) no-repeat center center;}
.timeline:after {content: ''; display: block; height: 17px; width: 100%; background: url(../img/blue-circle.png) no-repeat center center;}
.timeline .tl-row {position: relative; font-size: 14px; margin-bottom: 3em; overflow: hidden;}
.timeline .tl-row h4 {font-size: 22px; margin: 0 0 .5em;}
.timeline .tl-row strong {color: #27aae0;}
.timeline .tl-row ul {margin: 0; padding-left: 20px;}
.timeline .tl-row .tl-left {position: relative; float: left; text-align: right; width: 50%; right: 80%; transition: right .5s; -webkit-transition: right .5s; }
.timeline .tl-row .tl-right {position: relative; float: left; width: 50%; left: 80%; transition: left .5s; -webkit-transition: left .5s; }
.timeline .tl-row.inview .tl-left {right: 0;}
.timeline .tl-row.inview .tl-right {left: 0;}

.timeline .tl-row .tl-left .tl-circle {margin-right: 100px; position: relative;}
.timeline .tl-row .tl-left .tl-circle img {border: 3px solid #27aae0;}
.timeline .tl-row .tl-left .tl-circle:after {content: ''; background: url(../img/tl-tail-right.png) no-repeat; width: 156px; height: 17px; display: block; position: absolute; left: 100%; top: 48%;}

.timeline .tl-row .tl-right .tl-circle {margin-left: 100px; position: relative;}
.timeline .tl-row .tl-right .tl-circle img {border: 3px solid #27aae0;}
.timeline .tl-row .tl-right .tl-circle:after {content: ''; background: url(../img/tl-tail-left.png) no-repeat; width: 156px; height: 17px; display: block; position: absolute; right: 100%; top: 48%;}

.timeline .tl-row .tl-left .tl-content {margin-top: 147px; margin-right: 80px; float: right; width: 400px;}
.timeline .tl-row .tl-left .tl-content ul li {list-style-position: inside;}
.timeline .tl-row .tl-content div {margin-bottom: 1em;}
.timeline .tl-row .tl-right .tl-content {margin-top: 147px; margin-left: 80px; float: left; width: 400px;}

.tl-nav {position: fixed; right: 14px; top: 30px; width: 40px; }
.tl-nav ul.blue-circles {margin: 0;}
.tl-nav ul.blue-circles li {display: block; margin-bottom: 3px;}
.tl-nav ul.blue-circles li a {display: block; width: 40px; height: 40px; line-height: 40px; font-size: 12px;}

.smCaps {font-size: 13px; text-transform: uppercase; color: #0e2447; }
img.fullImg {width: 100%;}

.menu {color: #515151;}

footer {padding-top: 1px; padding-bottom: 60px;}
.desk-home footer {background: url(../img/bricks-gy.png);}
footer a, .ftrInfo a {font-weight: 400;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

.section .wrapper:before,
.section .wrapper:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.section .wrapper:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.section .wrapper {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */


@media only screen and (max-width: 1040px) {
      
  header #logo {float: left; }

  .wrapper {padding: 0 20px;}
  .twoCol > div {float: none; width: 100%;}
  .twoCol > div:last-child {float: none; width: 100%;}
  .twoCol > .width70 {width: 100%;}
  .twoCol > .width30 {width: 100%;}
  .biggish {font-size: 1em; clear: both;}
  .main {padding: 20px;}
  .timelinePage .main {padding: 0;}
  .map {width: 100%;}

  .grid li {width: 50%;}
  .grid li:nth-child(4n+1) {clear: none;}
  .grid li:nth-child(2n+1) {clear: both;}

 

  .tl-nav {display: none;}
  .timeline .tl-row .tl-left .tl-circle {margin-right: 50px;}
  .timeline .tl-row .tl-right .tl-circle {margin-left: 50px;}
  .timeline .tl-row .tl-left .tl-circle img {width: 200px;}
  .timeline .tl-row .tl-right .tl-circle img {width: 200px;}
  .timeline .tl-row .tl-left .tl-content {margin-right: 40px; width: 250px;}
  .timeline .tl-row .tl-right .tl-content {margin-left: 40px; width: 250px;}


}

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

  .expandedList li {float: none; width: 100%; height: auto;}
  .expandedList li:nth-child(3) { width: 100%; }
  .expandedList li .image {height: 100px; transition: height .5s; -webkit-transition: height .5s; }
  .expandedList li img {position: static; margin: 0; width: 100%;}

}



@media only screen and (max-width: 700px) {
  header {padding: 20px; height: 65px;}
  header .alignRight {text-align: center;}
  header .alignRight a {display: block; float: left; margin-left: 0; width: 60px;}

  header .alignRight .menu  {font-size: 40px; line-height: 40px; margin-left: 8px; padding-left: 9px; width: 40px; border-left: 1px solid #515151; margin-top: -4px;}
  header.wht .menu, header.wht-over-blue .menu  {border-left: 1px solid #fff; }
  header .menu span {display: none;}
  header #hdrCareerLink {width: 70px;}
  header .fltRight {float: right; clear: none; width: 40%; font-size: 16px; margin-top: 9px;}
  header .alignRight {text-align: left;}

  .peopleDetail {text-align: center;}
  .executive-team > div {float: none; width: 100%; }
  .teamMemberSm {float: none; margin: 0 auto; display: block;}

  .fltRight, .fltLeft {float: none; clear: both;}

  blockquote {font-size: 24px;}

}


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

  .section {text-align: center;}
  .wrapper {width: 280px;}
  .home header {position: absolute; z-index: 100;}
  header {font-size: 16px; height: 50px; padding: 20px 0;}
  header .fluid-wrapper {width: auto; padding: 0 20px; max-width: none;}
  header #logo {width: 145px; margin: 0; height: 50px;}
  header .fltLeft {float: left; clear: none;}
  header .fltRight {float: right; clear: none; width: 118px; margin-top: 0;}
  header #hdrCareerLink {width: 60px;}
  
  h1 {font-size: 24px;}
  h2 {font-size: 24px;}
  h3 {font-size: 20px;}
  #tabOut .pad {padding: 0 20px;}
  
  .banner h1 {padding-top: 70px;}

  #scrollNav {display: none;}

  #a {background: url(../img/hand-mobile.jpg) no-repeat; height: 577px; background-size: cover; padding-top: 50px;}
  #a .alignCenter img {width: 80px;}
  #a .pushDwn {margin-top: 160px;}

  #c {height: 1000px;}

  #e {background: url(../img/campus-mobile.jpg) no-repeat; background-size: cover; height: 880px;}
  #e .wrapper {padding: 40px 0;}
  #e .dwnBtn {margin-top: 125px;}

  #f {background: url(../img/intrigued-people-mobile.png) no-repeat bottom center; height: 465px;}
  #g {height: 330px;}

  #fla {padding-top: 40px;}
  #fla .wrapper {width: 280px;}
  #fla .fullImg {margin-top: -14px;}
  #flb {background: url(../img/lab-mobile.jpg) no-repeat; background-size: cover; color: #fff;}

  #fra {padding-top: 60px; background: url(../img/green-building-mobile.png) no-repeat; background-size: cover; height: 640px; }
  #fra p {color: #fff;}
  #fra ul {position: absolute; bottom: 0; left: 0; height: 130px; width: 100%; margin: 0;}
  #fra ul li {position: static;}
  #fra ul li a {background-color: #001c3e; display: inline-block; border-radius: 20px; color: #fff; left: 0px; width: 22px; height: 22px; line-height: 22px; text-align: center; float: none; margin-top: 8px; cursor: pointer; position: relative;}
  #fra ul li:hover a, #fra ul li.active a { color: #001c3e; background-color: #fff;}
  #fra ul li:hover a:after, #fra ul li.active a:after {position: absolute; content: ''; width: 3px; height: 20px; background-color: #001c3e; top: 100%; left: 9px;}
  #fra ul li div {width: 80%; padding: 20px 10%; left: 0; bottom: 0; position: absolute; margin: 0; height: 40px;}

  #frb {background: url(../img/hiking-family.jpg) no-repeat; background-size: cover; color: #fff; height: 540px;}
  
  #frc {min-height: 670px;}
  #frc .wrapper {width: 280px;}
  #frc ul li {float: none; display: inline-block;}

  #frd {background: url(../img/bricks-gy.png);}
  #frd .wrapper {width: 280px;}
  #frd h2 {font-size: 24px; color: #959595; margin-top: 0;}
  #frd img {width: 100%;}

  .section {border-top: 4px solid #00A6E5; height: auto;}
  .section .wrapper {padding: 40px 0;}
  .dwnBtn {position: static; margin: 0 auto;}
  
  .pill { display: block; text-align: center; }
  .pill.halfWidth {width: 38%; font-size: 12px; padding: 8px 12px; display: inline-block;}

  .grid li h3 {margin: 0; font-size: 14px;}
  .grid li p {margin: 0; font-size: 12px;}
  .grid li p.smCaps {margin: 0; font-size: 12px;}

  #products {background: url(../img/branches3.png) no-repeat top center; margin-top: 0; padding-top: 50px;}
  #products ul {padding: 0; list-style: none;}
  #products ul li {width: 50%; opacity: 1; margin: 0; list-style: none;}
  #products ul li figure {height: 130px; line-height: 1; position: relative; margin-top: 0; opacity: 1;}
  #products ul li figure figcaption {position: absolute; bottom: -10px; width: 100%;}
  #products ul li img {max-width: 100%; max-height: 90%; }

  .banner {height: 355px;}
  #teammember-Boris {background-image: url(../img/team/team-mbl-boris.jpg);}
  #teammember-Chaitra {background-image: url(../img/team/team-mbl-chaitra.jpg);}
  #teammember-Danica {background-image: url(../img/team/team-mbl-danica.jpg);}
  #teammember-Erik {background-image: url(../img/team/team-mbl-erik.jpg);}
  #teammember-Guy {background-image: url(../img/team/team-mbl-guy.jpg);}
  #teammember-Jen {background-image: url(../img/team/team-mbl-jen.jpg);}
  #teammember-Jerry {background-image: url(../img/team/team-mbl-jerry.jpg);}
  #teammember-Kelsey {background-image: url(../img/team/team-mbl-kelsey.jpg);}
  #teammember-Keyvan {background-image: url(../img/team/team-mbl-keyvan.jpg);}
  #teammember-Krishna {background-image: url(../img/team/team-mbl-krishna.jpg);}
  #teammember-Marc {background-image: url(../img/team/team-mbl-marc.jpg);}
  #teammember-Stacey {background-image: url(../img/team/team-mbl-stacey.jpg);}
  #teammember-Tony {background-image: url(../img/team/team-mbl-tony.jpg);}
  #teammember-Lu {background-image: url(../img/team/team-mbl-lu.jpg);}

  .poo {padding-top: 64px; margin-top: -46px; background: url(../img/flexcapacitor3.png) no-repeat top center; position: relative; z-index: 2;}
  .scrollWindow ul li {padding: 0 7px;}

  .touchImgs {padding: 0;}
  .touchImgs li {margin: 0;}
  .touchImgs li img { -webkit-filter: grayscale(100%); width: 100%;}
  .touchImgs li:hover img { -webkit-filter: grayscale(0%); }

  .openings-mobile {padding: 0; list-style: none;}
  .openings-mobile li {margin: 5px;}
  .openings-mobile li .pill {display: block; font-size: 16px; padding: 12px;}
  
  .clean-widget-mobile {height: 200px; position: relative;}
  .clean-widget-mobile ul {list-style: none; padding: 0; margin: 0;}
  .clean-widget-mobile li {display: inline;}
  .clean-widget-mobile li a { background-color: #001c3e; display: inline-block; border-radius: 30px; color: #fff; width: 26px; height: 26px; line-height: 26px; text-align: center; margin: 0 8px; position: relative;}
  .clean-widget-mobile li:hover a, .clean-widget-mobile li.active a { color: #001c3e; background-color: #fff;}
  .clean-widget-mobile li:hover a:after, .clean-widget-mobile li.active a:after {position: absolute; content: ''; width: 3px; height: 20px; background-color: #001c3e; top: 100%; left: 11px;}
  .clean-widget-mobile li div.content {display: none; position: absolute; bottom: 0px; left: 0px; color: #fff; text-align: center; font-size: .8em; width: 100%; background-color: #001c3e; height: 154px;}
  .clean-widget-mobile li div .pad {padding: 0 19px;}
  .clean-widget-mobile li.active div.content {display: block;}



  .process li:nth-child(2n+1) {clear: both;}

  #facts {margin: 1em auto; float: none; width: 162px;}
  #facts li {height: 120px; width: 160px; font-size: 19px; padding: 20px 0;}
  #facts li span {font-size: 66px;}
  #factImgs img {width: 90%;}
  .factsUp {left: auto; right: 0; top: 220px; background: url(../img/arrow-right.png) no-repeat; width: 37px; height: 69px;}
  .factsDwn {left: auto; left: 0; top: 220px; background: url(../img/arrow-left.png) no-repeat top right; width: 37px; height: 69px;}

  #rewards-graph {width: 280px; height: 280px;}
  #rewards-graph ul li span {position: absolute; width: 60px; height: 60px; cursor: pointer; }
  #rewards-graph ul #reward-e span {top: 184px; left: 184px;}
  #rewards-graph ul #reward-d span {top: 38px; left: 140px;}
  #rewards-graph ul #reward-g span {top: 110px; left: 215px;}
  #rewards-graph ul #reward-f span {top: 5px; left: 110px;}
  #rewards-graph ul #reward-h span {top: 214px; left: 110px;}
  #rewards-graph ul #reward-b span {top: 182px; left: 34px;}
  #rewards-graph ul #reward-c span {top: 110px; left: 5px;}
  #rewards-graph ul #reward-a span {top: 36px; left: 36px;}
  #rewards-graph ul li div {position: absolute; width: 100px; height: 80px; left: 50%; margin-left: -50px; top: 106px; display: none; text-align: center; font-size: 9px;}

  .columns {-moz-column-count: 1; -webkit-column-count: 1; column-count: 1;}

  footer { padding-top: 5px; padding-bottom: 30px; color: #959595;}
  .home footer {background: url(../img/bricks-gy.png);}
  footer h4 {margin: .5em; text-transform: none;}
  .social a {font-size: 15px; height: 30px; width: 30px; line-height: 30px; }
  .social a .roIcon-glassdoor {height: 21px; top: 4px; background-size: contain;}

  .peopleDetail div div {display: block;}
  .peopleDetail div div span {display: none;}

  .timeline .tl-row {margin: 1em 0;}
  .timeline .tl-row .tl-left {float: none; width: 100%; text-align: center;}
  .timeline .tl-row .tl-right {float: none; width: 100%; text-align: center;}
  .timeline .tl-row .tl-left .tl-content {margin: 2em auto; background-color: #fff; float: none;}
  .timeline .tl-row .tl-right .tl-content {margin: 0 auto; background-color: #fff; float: none;}
  .timeline .tl-row .tl-left .tl-circle {margin: 1em 0;}
  .timeline .tl-row .tl-right .tl-circle {margin: 1em 0;}
  .timeline .tl-row .tl-left .tl-circle:after {display: none;}
  .timeline .tl-row .tl-right .tl-circle:after {display: none;}
  .timeline .tl-row .tl-left .tl-circle img {border: none;}
  .timeline .tl-row .tl-right .tl-circle img {border: none;}

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}