@font-face {
  font-family: 'alrightRegular';
  src: url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.eot");
  src: url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont-.eot#iefix") format("embedded-opentype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.woff") format("woff"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.ttf") format("truetype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-regular-webfont.svg#alrightsublpwebfontuseonly-Rg") format("svg");
  font-weight: 300;
  font-style: normal; }
@font-face {
  font-family: 'din';
  src: url("../fonts/DIN17SBOP-Regular.eot");
  src: url("../fonts/DIN17SBOP-Regular-.eot#iefix") format("embedded-opentype"), url("../fonts/DIN17SBOP-Regular.woff") format("woff"), url("../fonts/DIN17SBOP-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'alrightBold';
  src: url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot.html");
  src: url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.eot-.html#iefix") format("embedded-opentype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.woff") format("woff"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.ttf") format("truetype"), url("../fonts/ttfah-alrightsublpwebfontuseonly-bold-webfont.svg#alrightsublpwebfontuseonly-Bd") format("svg");
  font-weight: 700;
  font-style: normal; }
* {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; }

html, body {
  height: 100%;
  width: 100%;
  color: #333;
  font-size: 18px;
  background: #ffffff;
  font-family: 'alrightRegular';
  font-weight: 300; }

html:not(.inlinesvg) svg, html:not(.inlinesvg) .skyline, html:not(.csstransforms) svg, html:not(.csstransforms) .skyline {
  display: none; }
html:not(.inlinesvg) .header, html:not(.csstransforms) .header {
  height: 360px;
  background: #FDFAFB; }
  html:not(.inlinesvg) .header .container, html:not(.csstransforms) .header .container {
    display: table; }
  html:not(.inlinesvg) .header .heroText, html:not(.csstransforms) .header .heroText {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    top: 48px;
    height: 360px; }

.container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  position: relative; }

a {
  color: #169CEE;
  text-decoration: none;
  outline: 0;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
  position: relative; }
  a:focus {
    outline: 0; }
  a.white {
    color: #ffffff; }

/* Selection */
::-moz-selection {
  background: #169CEE;
  color: #ffffff;
  text-shadow: none; }

::selection {
  background: #169CEE;
  color: #ffffff;
  text-shadow: none; }

h1 {
  color: #000;
  font-size: 48px;
  font-family: 'alrightBold';
  letter-spacing: 2px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 5px; }
  @media screen and (max-width: 960px) {
    h1 {
      font-size: 48px; } }
  @media screen and (max-width: 600px) {
    h1 {
      font-size: 32px; } }
  @media screen and (max-width: 400px) {
    h1 {
      font-size: 24px; } }

h2 {
  color: #666;
  font-size: 36px;
  font-family: 'alrightBold';
  line-height: 1; 
  font-weight: 300; }
  @media screen and (max-width: 960px) {
    h2 {
      font-size: 36px; } }
  @media screen and (max-width: 600px) {
    h2 {
      font-size: 20px; } }
  @media screen and (max-width: 400px) {
    h2 {
      font-size: 12px; } }

h3 {
  font-size: 27px;
  line-height: 32px;
  color: #169CEE;
  font-family: 'alrightRegular';
  letter-spacing: -0.4px;
  margin: 48px 0px 10px 0px;
  text-align: center;
  font-weight: 600; }
  h3 span {
    font-family: 'din';
    color: #E0E0EA;
    width: 32px;
    margin-right: 16px;
    margin-left: -48px; }
  @media screen and (max-width: 480px) {
    h3 {
      font-size: 18px;
      margin: 32px 0px 8px 0px; } }

h4 {
  font-size: 20px;
  font-family: 'din';
  font-weight: 300;
  letter-spacing: 0.3px;
  line-height: 24px; }
  @media screen and (max-width: 720px) {
    h4 {
      font-size: 16px; } }

h5 {
  font-family: 'din';
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #169CEE;
  opacity: 0.6;
  margin-bottom: 12px;
  line-height: 12px;
  font-weight: 300; }

h6 {
  font-family: 'alrightRegular';
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
  margin: 0px auto 32px auto;
  color: #66637A;
  max-width: 600px;
  text-align: center;
  font-weight: 300; }
  @media screen and (max-width: 600px) {
    h6 {
      font-size: 14px; } }
  @media screen and (max-width: 480px) {
    h6 {
      margin: 0px auto 24px auto; } }

p {
  font-size: 22px;
  margin: 0px 0px 0px 0px;
  color: #333; }
  @media screen and (max-width: 480px) {
    p {
      font-size: 16px; } }

br {
  height: 24px; }

button, .button {
  font-family: "din";
  border-radius: 4px;
  outline: none;
  background: #169CEE;
  color: #ffffff;
  border: none;
  margin-right: 32px;
  font-size: 14px;
  padding: 0px 16px;
  height: 32px;
  line-height: 32px;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 100; }
  button.outline, .button.outline {
    /* background: #169CEE; */
    background: #e47c26;
    border: 1px solid #dc7a2a;
    color: #fff; }
    button.outline:hover, .button.outline:hover {
      background: #169CEE;
      color: #ffffff; }

nav {
  position: absolute;
  z-index: 99;
  top: 24px;
  width: 100%;
  height: 80px; }
  nav .container a {
    display: inline-block;
    z-index: 101; }
  nav .logo {
    height: 95px;
    margin: 12px 0px; }
    @media screen and (max-width: 960px) {
      nav .logo {
        height: 48px; } }
  nav ul {
    float: right;
    margin: 0px;
    padding: 0px;
    position: relative;
    top: 2px; }
    nav ul a {
      color: #169CEE;
      text-decoration: none;
      float: left;
      margin-left: 32px; }
      nav ul a:first-of-type {
        margin-left: 0px; }
      @media screen and (max-width: 400px) {
        nav ul a:last-of-type {
          display: none; } }
    nav ul li {
      font-family: "din";
      float: left;
      line-height: 80px;
      margin: 0px;
      padding: 0px;
      list-style: none;
      color: #169CEE;
      font-size: 16px;
      cursor: pointer;
      letter-spacing: 0.3px; }
      nav ul li:last-of-type {
        margin: 0px; }
      @media screen and (max-width: 960px) {
        nav ul li {
          line-height: 72px; } }
    @media screen and (max-width: 480px) {
      nav ul .hideOnMobile {
        display: none; } }
    nav ul ul {
      padding-left: 16px; }
  @media screen and (max-width: 960px) {
    nav {
      top: 8px; } }
  @media screen and (max-width: 600px) {
    nav {
      top: 4px; }
      nav .container {
        padding: 0px 16px; }
      nav .logo {
        height: 40px; }
      nav ul li {
        line-height: 68px; }
      nav ul a {
        margin-left: 24px; } }
  @media screen and (max-width: 480px) {
    nav ul li {
      font-size: 14px;
      line-height: 64px; }
    nav .logo {
      height: 36px; } }

.header {
  position: relative;
  height: 74%;
  width: 100%;
  overflow: hidden;
  margin-bottom: 16px; }
  .header .heroText {
    font-family: 'alrightRegular';
    color: #ffffff;
    position: fixed;
    top: 11%;
    left: 0px;
    text-align: center;
    width: 100%; }
    .header .heroText h4 {
      color: #66637A; }
      .header .heroText h4 .subheadSection {
        margin: 0px 32px; }
        @media screen and (max-width: 960px) {
          .header .heroText h4 .subheadSection {
            margin: 0px 24px; } }
        @media screen and (max-width: 600px) {
          .header .heroText h4 .subheadSection {
            margin: 0px 12px; } }
      .header .heroText h4 .icon {
        padding-right: 8px;
        position: relative;
        top: 4px;
        height: 24px;
        display: inline-block; }
        @media screen and (max-width: 600px) {
          .header .heroText h4 .icon {
            height: 20px; } }
    @media screen and (max-width: 600px) {
      .header .heroText {
        position: absolute;
        top: 1%; } }
  @media screen and (max-width: 600px) {
    .header {
      height: 74%; }
      .header .container {
        height: 100%; }
      .header .headerIllustration .headerLeftContainer {
        width: 37.170130284vh; }
      .header .headerIllustration .headerCenterContainer {
        width: 30.337385744vh; }
      .header .headerIllustration .headerRightContainer {
        width: 41.178673739vh; } }

.headerIllustration {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none; }
  .headerIllustration .skyline {
    height: 100%; }
  .headerIllustration .illustrationForeground {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    overflow: visible; }
  .headerIllustration svg, .headerIllustration img, .headerIllustration .headerLeft, .headerIllustration .headerCenter, .headerIllustration .headerRight {
    height: 100%;
    position: absolute;
    bottom: 0px;
    overflow: visible; }
  .headerIllustration .headerLeft {
    left: -4%; }
  .headerIllustration .headerLeftContainer {
    width: 50.875vh; }
    .headerIllustration .headerLeftContainer .craneLineContainer {
      position: absolute;
      right: 0px;
      bottom: 0px;
      width: 100%;
      height: 46.5625%;
      overflow: hidden; }
      .headerIllustration .headerLeftContainer .craneLineContainer .craneLine {
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 214.76510067%;
        transform: translateY(-25%); }
    .headerIllustration .headerLeftContainer .phone1ScreenContainer {
      position: absolute;
      background: #555574;
      left: 50.9090909091%;
      width: 20.1136363636%;
      height: 24.21875%;
      bottom: 3.28125%; }
      .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare {
        position: absolute;
        width: 24.8587570621%;
        height: 14.1935483871%;
        top: 56.1290322581%;
        background: #DB3B61;
        border-radius: 20%;
        transform: scale(0.45);
        transform-origin: 50% 50%;
        transform: rotateZ(90deg) scale(0.45);
        opacity: 0; }
        .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.one {
          left: 6.7796610169%; }
        .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.two {
          left: 37.2881355932%; }
        .headerIllustration .headerLeftContainer .phone1ScreenContainer .appSquare.three {
          left: 67.7966101695%; }
      .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect {
        transform: scale(0.45);
        transform-origin: 50% 50%;
        transform: rotateZ(90deg) scale(0.45);
        opacity: 0;
        background: #DB3B61;
        position: absolute;
        left: 6.7796610169%;
        width: 85.8757062147%;
        height: 4.8387096774%; }
        .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.one {
          top: 74.1935483871%; }
        .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.two {
          top: 82.2580645161%; }
        .headerIllustration .headerLeftContainer .phone1ScreenContainer .appRect.three {
          top: 90.3225806452%; }
  .headerIllustration .headerCenter {
    left: 0px;
    right: 0px;
    margin: auto; }
    .headerIllustration .headerCenter .middleLineOne {
      transform: translateY(-100%); }
    @media screen and (max-aspect-ratio: 8 / 5) and (max-width: 1480px) {
      .headerIllustration .headerCenter {
        opacity: 0; } }
    @media screen and (max-width: 600px) {
      .headerIllustration .headerCenter {
        opacity: 0; } }
  .headerIllustration .headerCenterContainer {
    width: 41.625vh; }
    .headerIllustration .headerCenterContainer .pushOne {
      position: absolute;
      left: 6.9444444444%;
      bottom: 6.71875%;
      height: auto;
      width: 15.5555555556%;
      transform-origin: 25% 0%; }
    .headerIllustration .headerCenterContainer .middleLineOne {
      position: absolute;
      left: 0px;
      bottom: 0px;
      width: 100%;
      height: 150%; }
  .headerIllustration .headerRight {
    right: -4%; }
    .headerIllustration .headerRight .st1 {
      fill: #3A3A59; }
    .headerIllustration .headerRight .st2 {
      fill: #0E69A1; }
    .headerIllustration .headerRight .st6 {
      fill: #555574; }
    .headerIllustration .headerRight .st7 {
      fill: #4BBC6E; }
    .headerIllustration .headerRight .st8 {
      fill: #EF3F61; }
    .headerIllustration .headerRight .st9 {
      fill: none;
      stroke: #3A3A59;
      stroke-width: 16;
      stroke-linecap: round;
      stroke-miterlimit: 10; }
    .headerIllustration .headerRight .st10 {
      fill: none;
      stroke: #0E69A1;
      stroke-width: 8;
      stroke-miterlimit: 10; }
    .headerIllustration .headerRight .st11 {
      fill: #159CEE; }
    .headerIllustration .headerRight .st13 {
      fill: none;
      stroke: #169CEE;
      stroke-width: 8;
      stroke-miterlimit: 10; }
  .headerIllustration .headerRightContainer {
    width: 56.425vh; }
    .headerIllustration .headerRightContainer .svgInner {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%; }
    .headerIllustration .headerRightContainer .wheelsContainer {
      transform: translateX(100%); }
    .headerIllustration .headerRightContainer .hoist {
      transform: translateX(100%); }
    .headerIllustration .headerRightContainer .hoistParts {
      transform: translateX(100%); }
    .headerIllustration .headerRightContainer .hoistWheel {
      position: absolute;
      width: 3.7909836066%;
      height: 2.890625%;
      bottom: 1.25%; }
      .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(1) {
        right: 1.71875%; }
      .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(2) {
        right: 8.90625%; }
      .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(3) {
        right: 16.09375%; }
      .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(4) {
        right: 23.28125%; }
      .headerIllustration .headerRightContainer .hoistWheel:nth-of-type(5) {
        right: 30.46875%; }
    .headerIllustration .headerRightContainer .phoneCircle {
      position: absolute;
      border-radius: 50%; }
    .headerIllustration .headerRightContainer .phone2Screen {
      position: absolute;
      left: 20.2868852459%;
      bottom: 4.921875%;
      width: 22.9508196721%;
      height: 29.53125%;
      background: #555574;
      overflow: hidden; }
      .headerIllustration .headerRightContainer .phone2Screen .phoneCircle {
        left: -70%;
        right: -70%;
        width: 240%;
        padding-bottom: 50%;
        top: -25%;
        bottom: -25%;
        background: #4BBC6E;
        transform: scale(0); }
    .headerIllustration .headerRightContainer .phone3Screen {
      position: absolute;
      left: 37.9098360656%;
      bottom: 5.234375%;
      width: 22.131147541%;
      height: 22.65625%;
      background: #3A3A59;
      overflow: hidden; }
      .headerIllustration .headerRightContainer .phone3Screen .phoneCircle {
        left: -50%;
        right: -50%;
        width: 200%;
        padding-bottom: 50%;
        top: -25%;
        bottom: -25%;
        background: #555574;
        transform: scale(0); }
  @media screen and (max-width: 960px), (min-width: 960px) and (max-aspect-ratio: 4 / 3) {
    .headerIllustration > svg, .headerIllustration > img, .headerIllustration > div {
      transform: scale(0.75);
      transform-origin: center bottom; }
    .headerIllustration > .skyline {
      transform: scale(1);
      height: 75%; }
    .headerIllustration .headerLeft {
      left: -24%; }
    .headerIllustration .headerRight {
      right: -20%; } }
  @media screen and (min-width: 1480px) {
    .headerIllustration .headerLeft {
      left: -15%; }
    .headerIllustration .headerRight {
      right: -18%; }
    .headerIllustration .headerLeft, .headerIllustration .headerRight, .headerIllustration .headerCenter {
      transform: scale(0.75);
      transform-origin: center bottom; } }
  @media screen and (max-aspect-ratio: 5 / 8) and (min-width: 720px) {
    .headerIllustration .headerLeft {
      left: -36%; }
    .headerIllustration .headerRight {
      right: -32%; }
    .headerIllustration .headerCenter {
      opacity: 0; } }

.sea {
  background: url('../img/cisco-containers-on-ships/ocean-trimmed.png');
  background-size: 100% 100%;	
  z-index: 99;
  position: fixed;
  height: 25%;
  width: 100%;  
  bottom: 0; }  
	
.seatext {
	text-align: center;
	position: absolute;
	font-weight: bold;
	right: 22px;
    bottom: 22px; 
}	
@media screen and (max-width: 960px) { .seatext { font-size: smaller; } }
@media screen and (max-width: 750px) { .seatext { font-size: x-small; } }
@media screen and (max-width: 540px) { .seatext { font-size: xx-small; } }
	
.road {
  padding-top: 4%;
  background: url('../img/road.jpg');
  background-repeat: repeat-y;
  background-size: 100% 100%;
  width: 100%;
  height: 26%;
  position: relative;
  text-align: center;
  z-index: 99;
  position: absolute;
  top: 74%; }  

div.bottom {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
  color: #fff;  
}
@media screen and (max-width: 600px) {
    div.bottom { 
	    margin-top: 5px;
	    font-size: small;
    }
}


.Nav {
  width: 100%;
  height: 48px;
  position: relative;
  text-align: center;
  z-index: 99;
  position: fixed;
  top: 0%;
  overflow: hidden; }
  .Nav .navBackground {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #676767;
    background: #000;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  .Nav ul {
    display: inline-block;
    margin: 0px auto;
    padding: 0px;
    pointer-events: all;
    height: 48px; }
    .Nav ul a {
      color: #fff;
      text-decoration: none;
      float: left;
      margin-left: 48px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .Nav ul a.active {
        color: #169CEE; }
      .Nav ul a:hover {
        color: #169CEE; }
      .Nav ul a:first-of-type {
        margin-left: 0px; }
      @media screen and (max-width: 960px) {
        .Nav ul a {
          margin-left: 32px; } }
    .Nav ul li {
      font-family: "din";
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      line-height: 48px;
      margin: 0px;
      padding: 0px;
      list-style: none;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      letter-spacing: 0.2px; }
      .Nav ul li:last-of-type {
        margin: 0px; }
    .Nav ul ul {
      padding-left: 16px; }
  .Nav.shown {
    position: fixed;
    top: 0px;
    left: 0px; }
    .Nav.shown a {
      transform: translateY(0px); }
      .Nav.shown a:nth-of-type(1) {
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.05s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .Nav.shown a:nth-of-type(2) {
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .Nav.shown a:nth-of-type(3) {
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .Nav.shown a:nth-of-type(4) {
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .Nav.shown a:nth-of-type(5) {
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.25s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .Nav.shown a:nth-of-type(6) {
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .Nav.shown a:nth-of-type(7) {
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.35s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      .Nav.shown a:nth-of-type(8) {
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s, color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .Nav.shown .navBackground {
      transform: translateY(0px);
      transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
  @media screen and (max-width: 600px) {
    .Nav {
      top: 0%; }
      .Nav ul li {
        font-size: 14px;
        letter-spacing: 0.1; } }
  @media screen and (max-width: 480px) {
    .Nav ul a {
      margin-left: 24px; }
    .Nav ul li {
      font-size: 12px; } }
  @media screen and (max-width: 400px) {
    .Nav ul a {
      margin-left: 14px; }
    .Nav ul li {
      font-size: 10px; } }

.wrapper {
  width: 100%;
  background: #ffffff; }

section {
  padding-bottom: 16px;
  float: left;
  position: relative;
  width: 100%;
  background: #ffffff; }
  section .tableWrapper {
    border-radius: 4px;
    max-width: 650px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #E0E0EA; }
  section table {
    width: 100%;
    margin: 0 auto; }
    section table td {
      height: 72px;
      max-width: 280px; }
  section:first-of-type {
    padding-top: 32px; }
  section:last-of-type {
    padding-bottom: 80px; }

.container {
  padding: 0px 32px; }

.repoRow {
  float: left;
  width: 100%; }
  @media screen and (max-width: 600px) {
    .repoRow {
      float: none;
      width: auto; } }

.repo, .repoList {
  border: 1px solid #E0E0EA;
  background: rgba(14, 105, 161, 0.03);
  overflow: hidden; }
  .repo .repoDescription p, .repoList .repoDescription p {
    font-size: 14px;
    overflow: hidden;
    color: rgba(102, 99, 122, 0.5);
    margin: 0px; }
  .repo img.icon, .repoList img.icon {
    height: 14px;
    margin-right: 4px;
    position: relative;
    top: 1px; }

.repo {
  text-overflow: ellipsis;
  margin-bottom: 48px;
  float: left;
  min-width: 180px;
  max-width: 320px;
  border-radius: 4px;
  width: 33.333333%;
  margin-right: 0px;
  width: calc(33.333333% - 32px);
  margin-right: calc(48px); }
  .repo:nth-of-type(3n) {
    margin-right: 0px; }
  .repo h4 {
    color: #66637A;
    text-overflow: ellipsis;
    overflow: hidden; }
  .repo .SDKLogo {
    height: 30px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 0;
    right: 16px; }
  .repo .repoTitle {
    padding: 10px 16px;
    position: relative; }
    .repo .repoTitle h4 {
      transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    .repo .repoTitle p {
      margin: 0px;
      opacity: 0.45;
      font-size: 14px;
      font-family: "din";
      line-height: 16px; }
      .repo .repoTitle p span {
        margin-right: 24px; }
  .repo .repoLink {
    height: 40px;
    border-top: 1px solid #E0E0EA;
    position: relative;
    cursor: pointer;
    background: #ffffff; }
    .repo .repoLink a {
      border-bottom: 1px solid #E0E0EA; }
    .repo .repoLink:first-of-type {
      margin-top: 0px; }
    .repo .repoLink p {
      line-height: 40px;
      padding: 0px 16px;
      color: #66637A;
      margin: 0px; }
    .repo .repoLink:not(.blankRepoLink):hover:after {
      opacity: 1; }
    .repo .repoLink:not(.blankRepoLink):after {
      transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      content: "";
      position: absolute;
      right: 12px;
      top: 8px;
      width: 24px;
      height: 24px;
      background: url("../img/arrowRight.svg") no-repeat center;
      background-size: 100% auto;
      opacity: 0.18; }
    .repo .repoLink.expandableRepoLink {
      min-height: 40px;
      height: auto;
      max-height: 40px;
      overflow: hidden;
      transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
      .repo .repoLink.expandableRepoLink p {
        border-bottom: 1px solid #E0E0EA; }
      .repo .repoLink.expandableRepoLink ul {
        padding: 12px 0px;
        margin: 0px;
        background: rgba(224, 224, 234, 0.2); }
        .repo .repoLink.expandableRepoLink ul li {
          margin-left: 16px;
          padding-left: 12px;
          font-size: 14px;
          color: rgba(85, 85, 114, 0.6);
          line-height: 24px;
          list-style: none;
          border-left: 1px solid #E0E0EA;
          transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
          .repo .repoLink.expandableRepoLink ul li:hover {
            color: #555572;
            border-left: 1px solid #555572; }
      .repo .repoLink.expandableRepoLink.expanded {
        max-height: 240px; }
        .repo .repoLink.expandableRepoLink.expanded:not(.blankRepoLink):after {
          transform: rotate(90deg);
          opacity: 1; }
  .repo .repoDescription {
    background: #ffffff;
    border-top: 1px solid #E0E0EA;
    border-bottom: 1px solid #E0E0EA;
    height: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 12px #ffffff solid;
    line-height: 24px;
    padding: 12px 16px; }
  .repo .repoButton {
    padding: 14px 16px;
    border-top: 1px solid #E0E0EA;
    min-height: 61px; }
    .repo .repoButton button, .repo .repoButton .button {
      width: 100%; }
  @media screen and (max-width: 960px) {
    .repo {
      width: calc(33.333333333% - 24px);
      margin-right: calc(32px); } }
  @media screen and (max-width: 600px) {
    .repo {
      float: none;
      width: 100%;
      margin: 0 auto 32px auto; }
      .repo:nth-of-type(3n) {
        margin: 0 auto 32px auto; }
      .repo .blankRepoLink {
        display: none; } }

.repoList {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  height: 72px;
  background: rgba(14, 105, 161, 0.03);
  position: relative;
  border: none;
  border-bottom: 1px solid #E0E0EA; }
  .repoList .repoTitle, .repoList .repoDescription, .repoList .repoInfo {
    position: relative; }
    .repoList .repoTitle h4, .repoList .repoTitle p, .repoList .repoDescription h4, .repoList .repoDescription p, .repoList .repoInfo h4, .repoList .repoInfo p {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
  .repoList h4 {
    margin: 16px 0px 4px 0px;
    font-size: 14px;
    line-height: 16px;
    font-family: 'alrightBold';
    color: #66637A;
    padding-left: 24px; }
    @media screen and (max-width: 600px) {
      .repoList h4 {
        padding-left: 16px; } }
  .repoList .metadata {
    margin: 0px;
    opacity: 0.45;
    font-size: 14px;
    font-family: "din"; }
    .repoList .metadata span {
      margin-right: 12px; }
  .repoList .repoDescription {
    opacity: 0.6;
    margin: 0px;
    padding-left: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
    @media screen and (max-width: 600px) {
      .repoList .repoDescription {
        padding-left: 16px; } }
  .repoList .language {
    text-align: right;
    padding-right: 16px;
    top: 2px;
    position: relative; }
  .repoList .repoInfo {
    height: 100%;
    right: 0px;
    padding-right: 24px; }
    .repoList .repoInfo p {
      white-space: nowrap;
      line-height: 72px;
      margin: 0px; }
    .repoList .repoInfo span {
      float: right;
      padding-left: 16px; }
    @media screen and (max-width: 600px) {
      .repoList .repoInfo {
        padding-right: 16px; }
        .repoList .repoInfo span {
          display: none; }
          .repoList .repoInfo span:nth-of-type(2) {
            display: block; } }
  .repoList a {
    display: block;
    text-decoration: none;
    float: left;
    height: 100%;
    width: 100%; }
    .repoList a:hover h4 {
      color: #169CEE; }
  .repoList:last-of-type {
    border-bottom: 0px; }

footer {
  float: left;
  height: 288px;
  width: 100%;
  background: rgba(235, 235, 242, 0.3); }
  footer .container {
    position: relative;
    height: 100%;
    display: table; }
  footer .footerImage {
    position: absolute;
    top: 0px;
    left: 32px;
    right: 32px;
    bottom: 0px;
    margin: auto;
    height: 192px; }
  footer p {
    margin-bottom: 0px;
    line-height: 32px;
    color: #169CEE;
    width: 100%; }
  footer .socialLinks, footer .needHelp {
    display: table-cell;
    vertical-align: middle; }
  footer .socialLinks {
    margin-right: 32px; }
    footer .socialLinks h5, footer .socialLinks p {
      text-align: right; }
  footer .needHelp {
    margin-left: 32px; }
    footer .needHelp h5, footer .needHelp p {
      text-align: left; }
  footer .socialIcons {
    float: right;
    margin-top: 2px;
    margin-right: -4px; }
    footer .socialIcons a {
      float: right;
      margin-left: 4px; }
    footer .socialIcons img {
      height: 32px;
      width: 32px;
      cursor: pointer;
      transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
      footer .socialIcons img:hover {
        transform: scale(1.1); }
  @media screen and (max-width: 720px) {
    footer .footerImage {
      display: none; } }
  @media screen and (max-width: 600px) {
    footer .socialLinks, footer .needHelp {
      display: block;
      margin-left: 16px; }
      footer .socialLinks h5, footer .socialLinks p, footer .needHelp h5, footer .needHelp p {
        text-align: left; }
      footer .socialLinks .socialIcons, footer .needHelp .socialIcons {
        float: left;
        margin-left: -5px;
        margin-right: 0px; }
        footer .socialLinks .socialIcons img, footer .needHelp .socialIcons img {
          margin: 0px 4px 0px 0px; }
    footer .needHelp {
      margin-top: 48px; }
    footer .socialLinks {
      margin-top: 32px; } }

.text-black {
	color: #000;
}

.goldshadow {
 color:#f59e1c;
 text-shadow: 3px 4px 5px #000;
}

.blackshadow {
 color: #000;
 text-shadow: 3px 4px 5px #888;
}

.svgshadow {
	-webkit-filter: drop-shadow(3px 4px 5px #888);      
    filter: drop-shadow(3px 4px 5px #888); 
}

.dropshadowsmall {
	filter: drop-shadow(6px 6px 3px rgba(0,0,0,0.5));
	-webkit-filter: drop-shadow(6px 6px 3px rgba(0,0,0,0.5));	
}

.bold {
	font-weight: bold;
}

#clouds {
	height: 200px;
	padding: 100px 0;
	background: #c9dbe9;
	background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}

@media screen and (max-width: 600px) {
    #clouds { 
	    height: 80px; 
		padding: 0px;
    }
}


/*Time to finalise the cloud shape*/
.cloud {
	width: 200px; height: 60px;
	background: #fff;
	
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	
	position: relative; 
}

.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	background: #fff;
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 10px;
	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.cloud:after {
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.x1 {
	-webkit-animation: moveclouds 15s linear infinite;
	-moz-animation: moveclouds 15s linear infinite;
	-o-animation: moveclouds 15s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	left: 200px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
	
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moveclouds 25s linear infinite;
	-moz-animation: moveclouds 25s linear infinite;
	-o-animation: moveclouds 25s linear infinite;
}

.x3 {
	left: -250px; top: -200px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
}

.x4 {
	left: 470px; top: -250px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 18s linear infinite;
	-moz-animation: moveclouds 18s linear infinite;
	-o-animation: moveclouds 18s linear infinite;
}

.x5 {
	left: -150px; top: -150px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

.fadein {
    position:absolute;
    top:0px;
    left:8%;	
    margin:auto;
}
.fadein img {
    position:absolute;
    left:-65px;
    top:0;	
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 { -webkit-animation-delay: 0s; }
#f2 { -webkit-animation-delay: -2s; }
#f3 { -webkit-animation-delay: -4s; }
#f4 { -webkit-animation-delay: -6s; }
#f5 { -webkit-animation-delay: -8s; }
#f6 { -webkit-animation-delay: -10s; }
#f7 { -webkit-animation-delay: -12s; }
#f8 { -webkit-animation-delay: -14s; }
#f9 { -webkit-animation-delay: -16s; }
#f10 { -webkit-animation-delay: -18s; }
#f11 { -webkit-animation-delay: -20s; }
#f12 { -webkit-animation-delay: -22s; }
#f13 { -webkit-animation-delay: -24s; }
#f14 { -webkit-animation-delay: -26s; }
#f15 { -webkit-animation-delay: -28s; }
#f16 { -webkit-animation-delay: -30s; }
#f17 { -webkit-animation-delay: -32s; }
#f18 { -webkit-animation-delay: -34s; }