body {
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 20px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-family: 'Raleway', sans-serif;
  line-height: 1.5em;
  background: url(../images/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.plain {
  text-decoration: none;
}

.menu {
  font-size: 13px;
}

.menu h3 {
  font-size: 20px;
  max-width: 225px;
  z-index: 10000;
  margin: 0;
  padding: 1em 0 0 0;
}

.menu h4 {
  padding-left: .25em;
  margin: .5em;
}

.menu h4, .menu ul {
  z-index: 10000;
}

.menu ul {
  list-style-type: none;
  padding-left: 1em;
}

.menu ul li {
  position: relative;
}

.menu a {
  text-decoration: none;
}

.milestone-menu {
  display: flex;
  align-items: flex-start;
  max-width: 190px;
  padding-bottom: .75em;
}

.icon {
  max-width: 2em;
  max-height: 2em;
  margin-right: .75em;
}

.event {
  flex: 1;
}

.acceptance-letter {
  padding-top: .75em;
}

.acceptance-letter .icon {
  padding-left: .5em;
}

.acceptance-letter .event {
  padding-left: .3em;
}

.firstday .icon, .firstday .event {
  padding-left: .5em;
}

.springsemesterend .icon, .springsemesterend .event {
  padding-left: .3em;
}

.summer1end .icon {
  padding-left: .3em;
}

.summer2end .icon {
  padding-left: .3em;
}

.fallsemesterend .icon, .fallsemesterend .event {
  padding-left: .5em;
}

.applygraduation .icon, .applygraduation .event {
  padding-left: .5em;
}

.hidden, .no-support-message {
  display: none;
}

.no-support-message {
  display: none;
}

.impress-not-supported .no-support-message {
  display: block;
  padding: 2em;
  height: 100%;
}

#prev {
  position: fixed;
  top: 46%;
  left: 1%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 37.5px 50px 37.5px 0;
  border-color: transparent rgb(39, 39, 39);
  transparent transparent; cursor: pointer;
}

#next {
  position: fixed;
  top: 46%;
  right: 1%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 37.5px 0 37.5px 50px;
  border-color: transparent transparent transparent rgb(39, 39, 39);
  cursor: pointer;
}

#sky {
  position: absolute;
  background: url('../images/bg.jpg') repeat-x top left;
  background-size: contain;
  width: 100%;
}

#foreground {
  position: absolute;
  width: 100%;
  height: 100%;
}

#clouds {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  z-index: 90000;
  background-position: 0 100%;
  -webkit-transition: all 300s ease-in;
  -moz-transition: all 300s ease-in;
  -o-transition: all 300s ease-in;
  transition: all 300s ease-in;
  background: url(../images/clouds.png) center center fixed;
}

#overlay {
  position: absolute;
  top: 10px;
  z-index: 100000;
  width: 100%;
}

#logo {
  display: inline;
}

#connect {
  vertical-align: top;
  cursor: pointer;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10000;
  padding: 10px 15px;
  width: 20%;
}

#progress {
  position: fixed;
  bottom: 7px;
  z-index: 10000;
  padding: 2px;
  left: 50%;
  width: 30%;
  transform: translateX(-50%);
}

#progress {
  color: #000!important;
  background-color: #dcf7bf;
}

.percent-complete {
  color: #fff!important;
  background-color: #4CAF50;
  transition: all 750ms ease-out;
}

.newtip {
  float: right;
  width: 1.5em;
}

.dyknow {
  height: 4.5em;
  float: left;
  padding: .5em;
  cursor: pointer;
}

.didyouknow {
  margin: 10px 0;
}

.didyouknow::after {
  font-weight: bold;
  content: "\A \21d0 \a0 Click or tap for another tip.";
  white-space: pre;
}

.level-1 .didyouknow::after {
  color: #C1CD23;
}

.level-2 .didyouknow::after {
  color: #F99D31;
}

.level-3 .didyouknow::after {
  color: #D81D3F;
}

.level-4 .didyouknow::after {
  color: #165098;
}

.level-5 .didyouknow::after {
  color: #1486a2;
}

#pathways {
  vertical-align: top;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10000;
  padding: 10px 15px;
  width: 12%;
  max-width: 110px;
}

#explorePathways {
  z-index: 100000;
  cursor: pointer;
  position: relative;
  top: 150px;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
}

#explorePathways > div {
  left: 20px;
  max-width: calc(100% - 6.5em);
  max-height: calc(100% - 350px);
  margin-left: 80px;
  margin-right: 80px;
  padding: 1em;
  background: #fff;
  border: 2px solid #e6f5fc;
  border-radius: 60px 10px 60px 10px;
  -moz-border-radius: 60px 10px 60px 10px;
  -webkit-border-radius: 60px 10px 60px 10px;
}

.panel {
  display: none;
}

.panel h2 {
  display: inline;
}

.panel.active {
  display: block;
}

.back-to-pathways-menu {
  padding-right: 1em;
}

img.back-to-pathways-menu {
  height: 32px;
}

#pathwaysmenu img {
  vertical-align: text-bottom;
}

#connect-logo {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10000;
  padding: 15px;
}

#download-pdf {
  position: fixed;
  font-size: 18px;
  left: 50%;
  bottom: -10px;
  transform: translate(-50%, -50%);
  margin: 0 auto;
}

.close {
  background: #606061;
  padding: .5em;
  color: #FFFFFF;
  line-height: 25px;
  position: relative;
  float: right;
  text-align: center;
  top: -28px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover {
  background: #00d9ff;
}

.horizon {
  overflow-x: hidden;
  z-index: 400;
  width: 7200px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../images/horizon.png) fixed no-repeat bottom left;
  background-position: 0 100%;
  -webkit-transition: all 2s ease-out;
  -moz-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  transition: all 2s ease-out;
}

body.impress-on-applytexas .horizon {
  background-position: -100px 100%;
}

body.impress-on-submit-records .horizon {
  background-position: -200px 100%;
}

body.impress-on-tc-acceptance-letter .horizon {
  background-position: -300px 100%;
}

body.impress-on-complete-fafsa .horizon {
  background-position: -400px 100%;
}

body.impress-on-scholarships .horizon {
  background-position: -500px 100%;
}

body.impress-on-submit-tsi-scores .horizon {
  background-position: -600px 100%;
}

body.impress-on-career-coach .horizon {
  background-position: -700px 100%;
}

body.impress-on-meet-advisor .horizon {
  background-position: -800px 100%;
}

body.impress-on-degree-plan .horizon {
  background-position: -900px 100%;
}

body.impress-on-plan-schedule .horizon {
  background-position: -1000px 100%;
}

body.impress-on-register-for-fall-classes .horizon {
  background-position: -1100px 100%;
}

body.impress-on-attend-orientation .horizon {
  background-position: -1200px 100%;
}

body.impress-on-arrange-payment .horizon {
  background-position: -1300px 100%;
}

body.impress-on-purchase-books .horizon {
  background-position: -1400px 100%;
}

body.impress-on-first-day-of-classes .horizon {
  background-position: -1500px 100%;
}

body.impress-on-begin-first-fall-semester .horizon {
  background-position: -1600px 100%;
}

body.impress-on-student-support-services .horizon {
  background-position: -1650px 100%;
}

body.impress-on-meet-faculty-advisors .horizon {
  background-position: -1700px 100%;
}

body.impress-on-develop-academic-plan .horizon {
  background-position: -1800px 100%;
}

body.impress-on-complete-career-project .horizon {
  background-position: -1900px 100%;
}

body.impress-on-second-advisor-meeting .horizon {
  background-position: -2000px 100%;
}

body.impress-on-register-for-spring .horizon {
  background-position: -2100px 100%;
}

body.impress-on-pay-for-classes .horizon {
  background-position: -2200px 100%;
}

body.impress-on-complete-first-semester .horizon {
  background-position: -2300px 100%;
}

body.impress-on-first-fall-break .horizon {
  background-position: -2400px 100%;
}

body.impress-on-begin-first-spring-semester .horizon {
  background-position: -2500px 100%;
}

body.impress-on-identify-four-year-colleges .horizon {
  background-position: -2600px 100%;
}

body.impress-on-contact-four-year-colleges .horizon {
  background-position: -2700px 100%;
}

body.impress-on-review-schedules .horizon {
  background-position: -2800px 100%;
}

body.impress-on-review-academic-plan .horizon {
  background-position: -2900px 100%;
}

body.impress-on-complete-second-fafsa .horizon {
  background-position: -3000px 100%;
}

body.impress-on-spring-break .horizon {
  background-position: -3100px 100%;
}

body.impress-on-register-for-summer-fall-classes .horizon {
  background-position: -3200px 100%;
}

body.impress-on-pay-for-and-prep-summer-fall .horizon {
  background-position: -3300px 100%;
}

body.impress-on-complete-spring-semester .horizon {
  background-position: -3400px 100%;
}

body.impress-on-summer-one-classes-begin .horizon {
  background-position: -3500px 100%;
}

body.impress-on-summer-one-classes-complete .horizon {
  background-position: -3600px 100%;
}

body.impress-on-summer-two-classes-begin .horizon {
  background-position: -3700px 100%;
}

body.impress-on-summer-two-classes-complete .horizon {
  background-position: -3800px 100%;
}

body.impress-on-summer-break .horizon {
  background-position: -3900px 100%;
}

body.impress-on-begin-fall-semester .horizon {
  background-position: -4000px 100%;
}

body.impress-on-second-review-academic-plan .horizon {
  background-position: -4100px 100%;
}

body.impress-on-register-for-spring-classes .horizon {
  background-position: -4200px 100%;
}

body.impress-on-apply-for-transfer .horizon {
  background-position: -4300px 100%;
}

body.impress-on-fall-break .horizon {
  background-position: -4400px 100%;
}

body.impress-on-pay-for-spring-classes .horizon {
  background-position: -4500px 100%;
}

body.impress-on-complete-fall-semester .horizon {
  background-position: -4600px 100%;
}

body.impress-on-begin-spring-classes .horizon {
  background-position: -4700px 100%;
}

body.impress-on-apply-for-graduation .horizon {
  background-position: -4800px 100%;
}

body.impress-on-accepted-by-four-year .horizon {
  background-position: -4900px 100%;
}

body.impress-on-second-spring-break .horizon {
  background-position: -5000px 100%;
}

body.impress-on-request-official-transcript .horizon {
  background-position: -5100px 100%;
}

body.impress-on-graduation-at-tc .horizon {
  background-position: right 100%;
}

body.impress-on-introduction .percent-complete, 
body.impress-on-credits .percent-complete,
body.impress-on-choose-an-avatar .percent-complete {
  width: .3%;
  background-color: #165098;
}

body.impress-on-applytexas .percent-complete {
  width: 1.923076923076923%;
}

body.impress-on-submit-records .percent-complete {
  width: calc(1.923076923076923% * 2);
}

body.impress-on-tc-acceptance-letter .percent-complete {
  width: calc(1.923076923076923% * 3);
}

body.impress-on-complete-fafsa .percent-complete {
  width: calc(1.923076923076923% * 4);
}

body.impress-on-scholarships .percent-complete {
  width: calc(1.923076923076923% * 5);
}

body.impress-on-submit-tsi-scores .percent-complete {
  width: calc(1.923076923076923% * 6);
}

body.impress-on-career-coach .percent-complete {
  width: calc(1.923076923076923% * 7);
}

body.impress-on-meet-advisor .percent-complete {
  width: calc(1.923076923076923% * 8);
}

body.impress-on-degree-plan .percent-complete {
  width: calc(1.923076923076923% * 9);
}

body.impress-on-plan-schedule .percent-complete {
  width: calc(1.923076923076923% * 10);
}

body.impress-on-register-for-fall-classes .percent-complete {
  width: calc(1.923076923076923% * 11);
}

body.impress-on-attend-orientation .percent-complete {
  width: calc(1.923076923076923% * 12);
}

body.impress-on-arrange-payment .percent-complete {
  width: calc(1.923076923076923% * 13);
}

body.impress-on-purchase-books .percent-complete {
  width: calc(1.923076923076923% * 14);
}

body.impress-on-first-day-of-classes .percent-complete {
  width: calc(1.923076923076923% * 15);
  background-color: #F99D31;
}

body.impress-on-begin-first-fall-semester .percent-complete {
  width: calc(1.923076923076923% * 16);
  background-color: #F99D31;
}

body.impress-on-student-support-services .percent-complete {
  width: calc(1.923076923076923% * 17);
  background-color: #F99D31;
}

body.impress-on-meet-faculty-advisors .percent-complete {
  width: calc(1.923076923076923% * 18);
  background-color: #F99D31;
}

body.impress-on-develop-academic-plan .percent-complete {
  width: calc(1.923076923076923% * 19);
  background-color: #F99D31;
}

body.impress-on-complete-career-project .percent-complete {
  width: calc(1.923076923076923% * 20);
  background-color: #F99D31;
}

body.impress-on-second-advisor-meeting .percent-complete {
  width: calc(1.923076923076923% * 21);
  background-color: #F99D31;
}

body.impress-on-register-for-spring .percent-complete {
  width: calc(1.923076923076923% * 22);
  background-color: #F99D31;
}

body.impress-on-pay-for-classes .percent-complete {
  width: calc(1.923076923076923% * 23);
  background-color: #F99D31;
}

body.impress-on-complete-first-semester .percent-complete {
  width: calc(1.923076923076923% * 24);
  background-color: #F99D31;
}

body.impress-on-first-fall-break .percent-complete {
  width: calc(1.923076923076923% * 25);
  background-color: #F99D31;
}

body.impress-on-begin-first-spring-semester .percent-complete {
  width: calc(1.923076923076923% * 26);
  background-color: #D81D3F;
}

body.impress-on-identify-four-year-colleges .percent-complete {
  width: calc(1.923076923076923% * 27);
  background-color: #D81D3F;
}

body.impress-on-contact-four-year-colleges .percent-complete {
  width: calc(1.923076923076923% * 28);
  background-color: #D81D3F;
}

body.impress-on-review-schedules .percent-complete {
  width: calc(1.923076923076923% * 29);
  background-color: #D81D3F;
}

body.impress-on-review-academic-plan .percent-complete {
  width: calc(1.923076923076923% * 30);
  background-color: #D81D3F;
}

body.impress-on-complete-second-fafsa .percent-complete {
  width: calc(1.923076923076923% * 31);
  background-color: #D81D3F;
}

body.impress-on-spring-break .percent-complete {
  width: calc(1.923076923076923% * 32);
  background-color: #D81D3F;
}

body.impress-on-register-for-summer-fall-classes .percent-complete {
  width: calc(1.923076923076923% * 33);
  background-color: #D81D3F;
}

body.impress-on-pay-for-and-prep-summer-fall .percent-complete {
  width: calc(1.923076923076923% * 34);
  background-color: #D81D3F;
}

body.impress-on-complete-spring-semester .percent-complete {
  width: calc(1.923076923076923% * 35);
  background-color: #D81D3F;
}

body.impress-on-summer-one-classes-begin .percent-complete {
  width: calc(1.923076923076923% * 36);
  background-color: #165098;
}

body.impress-on-summer-one-classes-complete .percent-complete {
  width: calc(1.923076923076923% * 37);
  background-color: #165098;
}

body.impress-on-summer-two-classes-begin .percent-complete {
  width: calc(1.923076923076923% * 38);
  background-color: #165098;
}

body.impress-on-summer-two-classes-complete .percent-complete {
  width: calc(1.923076923076923% * 39);
  background-color: #165098;
}

body.impress-on-summer-break .percent-complete {
  width: calc(1.923076923076923% * 40);
  background-color: #165098;
}

body.impress-on-begin-fall-semester .percent-complete {
  width: calc(1.923076923076923% * 41);
  background-color: #1486a2;
}

body.impress-on-second-review-academic-plan .percent-complete {
  width: calc(1.923076923076923% * 42);
  background-color: #1486a2;
}

body.impress-on-register-for-spring-classes .percent-complete {
  width: calc(1.923076923076923% * 43);
  background-color: #1486a2;
}

body.impress-on-apply-for-transfer .percent-complete {
  width: calc(1.923076923076923% * 44);
  background-color: #1486a2;
}

body.impress-on-fall-break .percent-complete {
  width: calc(1.923076923076923% * 45);
  background-color: #1486a2;
}

body.impress-on-pay-for-spring-classes .percent-complete {
  width: calc(1.923076923076923% * 46);
  background-color: #1486a2;
}

body.impress-on-complete-fall-semester .percent-complete {
  width: calc(1.923076923076923% * 47);
  background-color: #1486a2;
}

body.impress-on-begin-spring-classes .percent-complete {
  width: calc(1.923076923076923% * 48);
  background-color: #F99D31;
}

body.impress-on-apply-for-graduation .percent-complete {
  width: calc(1.923076923076923% * 49);
  background-color: #F99D31;
}

body.impress-on-accepted-by-four-year .percent-complete {
  width: calc(1.923076923076923% * 50);
  background-color: #F99D31;
}

body.impress-on-second-spring-break .percent-complete {
  width: calc(1.923076923076923% * 51);
  background-color: #F99D31;
}

body.impress-on-request-official-transcript .percent-complete {
  width: calc(1.923076923076923% * 51);
  background-color: #F99D31;
}

body.impress-on-graduation-at-tc .percent-complete {
  width: calc(1.923076923076923% * 52);
  background-color: #165098;
}

.middle {
  z-index: 500;
  width: 2400px;
}

.front {
  z-index: 1000;
  width: 6000px;
}

#impress {
  z-index: 20000;
}

#impress img.path, #impress img.milestone {
  width: 45%;
  padding-right: 1em;
}

#impress a {
  text-decoration: none;
  font-weight: 700;
}

img.center {
  display: block;
  margin: 0 auto;
  width: 700px;
  height: 104px;
}

.introduction {
  background: rgba(230, 234, 252, 0.90);
  border: .5em solid #7293cc;
  font-size: 24px;
}

.introduction p {
  font-size: 30px;
  line-height: 36px;
}

.center {
  text-align: center;
}

img[src*="dyknow"] {
  cursor: pointer;
}

/* green */
a.jump-1:link, a.jump-5:link {
  color: #333;
}

a.jump-1:hover, a.jump-5:hover, .level-1 a, .level-5 a {
  color: #98a11b; /* C1CD23; */
  font-weight: bold;
}

.level-1, .level-5 {
  background: rgba(237, 252, 230, .90);
  border: .5em solid #C1CD23;
}
/* orange */
a.jump-2:link, a.jump-2b:link, a.jump-6:link {
  color: #333;
}

a.jump-2:hover, a.jump-6:hover, .level-2 a, .level-6 a {
  color: #F99D31;
  font-weight: bold;
}

.level-2, .level-6 {
  background: rgba(252, 242, 230, 0.90);
  border: .5em solid #F99D31;
}
/* red */
a.jump-3:link, a.jump-7:link {
  color: #333;
}

a.jump-3:hover, a.jump-7:hover, .level-3 a, .level-7 a {
  color: #D81D3F;
  font-weight: bold;
}

.level-3, .level-7 {
  background: rgba(252, 230, 230, .90);
  border: .5em solid #D81D3F;
}
/* blue */
a.jump-4:link, a.jump-8:link {
  color: #333;
}

a.jump-4:hover, a.jump-8:hover, .level-4 a, .level-8 a {
  color: #165098;
  font-weight: bold;
}

.level-4, .level-8 {
  background: rgba(230, 234, 252, .90);
  border: .5em solid #165098;
}

/* cyan */
a.jump-5:link {
  color: #333;
}

a.jump-5:hover, .level-5 a {
  color: #1486a2;
  font-weight: bold;
}

.level-5 {
  background: rgba(230, 250, 252, 0.9);
  border: .5em solid #1486a2;
}

.step {
  min-width: 40%;
  min-height: 40%;
  padding: 1.5em 2.5em;
  border-radius: 60px 10px 60px 10px;
  -moz-border-radius: 60px 10px 60px 10px;
  -webkit-border-radius: 60px 10px 60px 10px;
}

.tips img.path {
  width: 25% !important;
}

p img {
  vertical-align: middle;
}

nav {
  width: 275px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 2em;
  background: #eee;
  line-height: 1.25em;
}

.site-wrap {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

.push-wrap {
  min-height: 100%;
  overflow-x: hidden;
  -webkit-transition: all 300ms ease-in;
  -moz-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.menu {
  z-index: 200000;
}

.show-nav .push-wrap {
  -webkit-transform: translate(275px, 0);
  -moz-transform: translate(275px, 0);
  -ms-transform: translate(275px, 0);
  -o-transform: translate(275px, 0);
  transform: translate(275px, 0);
  -webkit-transform: translate3d(275px, 0, 0);
  -moz-transform: translate3d(275px, 0, 0);
  -ms-transform: translate3d(275px, 0, 0);
  -o-transform: translate3d(275px, 0, 0);
  transform: translate3d(275px, 0, 0);
  transition: all 300ms ease-in;
}

article a.toggle-nav {
  position: absolute;
  top: 0;
  left: 0px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  z-index: 50000;
}

#avatar0, #avatar1, #avatar2, #avatar3, #avatar4 {
  cursor: pointer;
  transition: all 300ms ease-in;
}

#avatar0, #avatar1, #avatar2 {
  width: 15%;
}

#avatar3, #avatar4 {
  width: 11%;
}

.selected {
  border: 3px solid limegreen;
  padding: .5em;
  background: greenyellow;
  transition: all 300ms ease-in;
}

.impress-not-supported .menu, .impress-not-supported #sky {
  display: none;
}

.fallback-message {
  font-family: sans-serif;
  line-height: 1.3;
  width: 780px;
  padding: 10px 10px 0;
  margin: 20px auto;
  border: 1px solid #E4C652;
  border-radius: 10px;
  background: #EEDC94;
}

.fallback-message p {
  margin-bottom: 10px;
}

.impress-supported .fallback-message {
  display: none;
}

#graduation-at-tc img.milestone {
  padding: 0 2em 2em 0;
  width: 100%;
  max-width: 100%;
}

#graduation-at-tc img.stage-header {
  padding-left: 2em;
}

html:not(.tablet) #milestones-menu, html:not(.tablet) .milestone-menu {
  display: none;
}

html:not(.tablet) #next {
  position: fixed;
  top: 46%;
  right: 1%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 34.6px;
  border-color: transparent transparent transparent rgb(39, 39, 39);
  cursor: pointer;
}

html:not(.tablet) #prev {
  position: fixed;
  top: 46%;
  left: 1%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 34.6px 20px 0;
  border-color: transparent rgb(39, 39, 39) transparent transparent;
  cursor: pointer;
}

html:not(.tablet) .landscape #connect {
  width: 20%;
  transition: all 300ms ease;
}

.portrait body {
  font-size: 18px;
}

.portrait #pathways {
  width: 90px;
  transition: all 300ms ease;
}

.portrait #connect {
  width: 59%;
  transition: all 300ms ease;
}

.landscape #connect {
  width: 29%;
  transition: all 300ms ease;
}

.tablet.landscape #connect {
  width: 20%;
  transition: all 300ms ease;
}

.tablet.portrait #connect {
  width: 52%;
  transition: all 300ms ease;
}

.tablet.landscape #clouds {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  z-index: 90000;
  background-position: 0 100%;
  -webkit-transition: all 300s ease-in;
  -moz-transition: all 300s ease-in;
  -o-transition: all 300s ease-in;
  transition: all 300s ease-in;
  background: url(../images/clouds.png) center center fixed;
}

.tablet.landscape body.impress-not-supported img {
  width: 70%;
  transition: all 300ms ease;
}

.tablet .horizon {
  background-size: cover;
}

.laptop.landscape #connect {
  width: 21%;
  transition: all 300ms ease;
}