@charset "UTF-8";
@font-face { font-family: Archer_font; src: url('./../fonts/Archer/Archer-Book-Pro.otf'); }
@font-face { font-family: Archer_Bold_font; src: url('./../fonts/Archer/Archer-Bold-Pro.otf'); }
@font-face { font-family: Archer_Italic_font; src: url('./../fonts/Archer/Archer-BookItal-Pro.otf'); }
@font-face { font-family: cool_font; src: url('./../fonts/sail/Sail-Regular.otf'); }
/*@font-face { font-family: Font_Awesome; src: url('./../fonts/FontAwesome.otf'); }*/

@font-face {
  font-family: "icon-font";
  src: url("../fonts/icon-font/icon-font.eot");
  src: url("../fonts/icon-font/icon-font.eot?#iefix") format("embedded-opentype"), url("../fonts/icon-font/icon-font.woff") format("woff"), url("../fonts/icon-font/icon-font.ttf") format("truetype"), url("../fonts/icon-font/icon-font.svg#icon-font") format("svg");
  font-weight: normal;
  font-style: normal; }

[data-icon]:before {
  font-family: "icon-font" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "icon-font" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-codepen:before {
  content: "\61"; }

.icon-jsfiddle:before {
  content: "\62"; }

.icon-home:before {
  content: "\63"; }

.icon-briefcase:before {
  content: "\64"; }

.icon-terminal:before {
  content: "\65"; }

.icon-pencil:before {
  content: "\66"; }

.icon-envelope:before {
  content: "\67"; }

.icon-linkedin:before {
  content: "\68"; }


/* Background Sky */
@-webkit-keyframes twinkle {
  0% { opacity: 1; }
  100% { opacity: 0.2; }
}

@keyframes twinkle {
  0% { opacity: 1; }
  100% { opacity: 0.2; }
}

body {
  overflow-x: hidden;
  background-color: #01182e;
  font-family: Archer_font;
  margin: 0;
}

a { outline: none; transition: all 0.2s ease-out;}

a:focus {
  -moz-box-shadow: 0 0 5px 5px #6399CB;
  -webkit-box-shadow: 0 0 5px #6399CB;
  box-shadow: 0 0 5px 5px #6399CB;  
  text-decoration: none;
}

.stars {
  position: absolute;
  width: 1px;
  height: 1px;
  left: 50%;
  top: 0;
  transform: rotate(45deg);
  animation-name: twinkle;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.stars:nth-child(1) { animation-duration: 3s; }
.stars:nth-child(2) { animation-duration: 5s; }
.stars:nth-child(3) { animation-duration: 7s; }

/* Banner */
#sub-topnav { text-align: center; width: 100%; position: fixed; z-index: 2; top: 50px;}
#sub-topnav ul { margin: 0; padding: 15px; }
#sub-topnav li { margin: 0; display: inline; list-style-type: none; padding: 15px 0; text-shadow: 0 0 2px #000; }
#sub-topnav a { text-decoration: none; color: #ffffff; font-weight:bold; padding: 15px; }
#sub-topnav a:visited { text-decoration: none; color: #ffffff; font-weight:bold; }
#sub-topnav a:hover, .active, .fa-home-main:hover, .scroll-container:hover {
  -moz-box-shadow: 0 0 5px 5px #6399CB;
  -webkit-box-shadow: 0 0 5px #6399CB;
  box-shadow: 0 0 5px 5px #6399CB;  
  text-decoration: none;
  background-color: rgba(99,153,203,0.5);
  color: #ffffff;
}

#sub-topnav li.current {
  -moz-box-shadow: 0 0 5px 5px #EEB422;
  -webkit-box-shadow: 0 0 5px #EEB422;
  box-shadow: 0 0 5px 5px #EEB422;  
  text-decoration: none;
  background-color:rgba(238,180,34,0.5);
  color: #ffffff;
  font-weight:bold;
}

.burst-8 {
    background: transparent;
    border: 4px solid #fff;
    cursor: pointer;
    display: inline-block !important;
    width: 80px;
    height: 80px;
    margin: 0 15px !important;
    padding: 0 !important;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
}
.burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    border: 2px solid #fff;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
}

.burst-8:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    border: 1px solid #fff;
    -webkit-transform: rotate(-20deg);
       -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
         -o-transform: rotate(-20deg);
}
.burst-8:hover { 
  -moz-box-shadow: 0 0 5px 5px #6399CB;
  -webkit-box-shadow: 0 0 5px #6399CB;
  box-shadow: 0 0 5px 5px #6399CB;  
  text-decoration: none;
  background-color: rgba(99,153,203,0.5); 
}
.burst-8 span { color: #fff; transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg);  -webkit-transform:rotate(-20deg); display: block; position: relative; top: 20px; }

/*----------------------------------------------*\
    Menu
\*----------------------------------------------*/


.home-main {
  position: fixed;
  top: 8px;
  left: 12px;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  text-decoration: none;
  text-align: center;
  z-index: 6;
  cursor: pointer;
  box-shadow: 0 0 2px #000; }

.home-menu-icon {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 3px;
  background-color: #fff;
  border-radius: 4px;
  transition: all 0.3s ease-out; }
  .home-menu-icon:before, .home-menu-icon:after {
    content: '';
    position: absolute;
    left: 0;
    display: inline-block;
    width: 15px;
    height: 3px;
    background-color: #fff;
    border-radius: 4px;
    transition: all 0.3s ease-out; }
  .home-menu-icon:before {
    top: -5px; }
  .home-menu-icon:after {
    bottom: -5px; }
  .active .home-menu-icon {
    background-color: transparent; }
    .active .home-menu-icon:before {
      top: 0;
      transform: rotate(45deg); }
    .active .home-menu-icon:after {
      bottom: 0;
      transform: rotate(-45deg); }

.fa-home-main:hover, .fa-home-main:focus, .scroll-container:hover, .scroll-container:focus {
  box-shadow: 0 0 5px 5px #6399CB;
  text-decoration: none;
  background-color: rgba(99, 153, 203, 0.5);
  color: #fff; }

.main-content {
  background-color: #E7E3C0;
  background-image: linear-gradient(to bottom, #01182e 0%, #021f3b 30%, #cae7f0 66%, #cae7f0 98%, #e7e3c0 100%);
  background-position: center top;
  background-repeat: repeat-x;
  background-size: 100% 1632px;
  transition: all 0.3s ease-out; }
  .active + .main-content {
    margin-left: 20%;
    overflow: hidden; }
    @media (max-width: 960px) {
      .active + .main-content {
        margin-left: 30%; } }
    @media (max-width: 770px) {
      .active + .main-content {
        margin-left: 100%; } }

.menu-container {
  position: fixed;
  top: 50px;
  left: -100%;
  width: 20%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 50px;
  transition: all 0.3s ease-out; }
  .active .menu-container {
    left: 0; }
  @media (max-width: 960px) {
    .menu-container {
      width: 30%; } }
  @media (max-width: 770px) {
    .menu-container {
      width: 100%; } }

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: auto;
  font-size: 20px; }
  .menu li {
    margin: 20px 0;
    padding: 0 20px 0 0; }
    .menu li.header {
      font-weight: 900;
      color: #fff;
      font-size: 22px;
      padding-left: 12px;
      background: #6399cb;
      text-align: center; }
    .menu li > a {
      color: #fff;
      text-decoration: none;
      font-family: Archer_font; }
      .menu li > a:hover {
        color: #6399CB; }
  .menu .icon {
    float: left;
    margin: 0 15px 0 18px;
    vertical-align: middle; }

/*----------------------------------------------*\
    End of Menu
\*----------------------------------------------*/


@keyframes bounce { 0% { top: 200px; } 100% { top: 150px; }}
@-webkit-keyframes bounce { 0% { top: 200px; } 100% { top: 150px; }}

.scroll-container { position: absolute; top: 200px; left: 45%; padding: 15px; text-align: center; text-decoration: none; animation: bounce ease 1s infinite alternate; -webkit-animation: bounce ease 1s infinite alternate; -moz-animation: bounce ease 1s infinite alternate; }
.scroll-container .scroll { font-size: 2em; color: #fff; display: block; text-decoration: none; }
.scroll-ex { position: relative; left: 30%; border: 3px solid #fff; border-radius: 100%; width: 25px; height: 25px; text-decoration: none; text-align: center; line-height: 27.5px; }
/* Cloud Section */
#sky { position: relative; top: 400px; }

.cloud {
  display:block;
  width: 350px;
  height: 120px;
  background: #e0e0e0;
  position: absolute;
  z-index: 1;
  border-radius: 100px;
}
.cloud:after, .cloud:before {
  content: '';
  position: absolute;
  background: #e0e0e0;
  z-index: -1;
  border-radius: 100%;
}
#cloud1:after {
  width: 100px;
  height: 100px;
  top: -50px;
  left: 50px;
}
#cloud1:before {
  width: 180px;
  height: 180px;
  top: -90px;
  right: 50px;
}
#cloud2:after {
  width: 100px;
  height: 100px;
  top: -50px;
  right: 50px;
}
#cloud2:before {
  width: 180px;
  height: 180px;
  top: -90px;
  left: 50px;
}
#cloud1 { 
  top: 0px;
  left: 50px;
}
#cloud2 {
  top: 50px;
  left: 70%;
  transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -webkit-transform: scale(0.8);
}

.cloud p { position: relative; left: 10px; font-size: 1.5em; padding: 0 20px;}


.sun {
  display: block;
  width: 300px;
  height: 300px;
  background: #ff0;
  background: -moz-radial-gradient(center, ellipse cover, #f90 0%, #fc0 50%, #ff0 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f90), color-stop(50%,#fc0), color-stop(100%,#ff0));
  background: -webkit-radial-gradient(center, ellipse cover, #f90 0%,#fc0 50%,#ff0 100%);
  background: -o-radial-gradient(center, ellipse cover, #f90 0%,#fc0 50%,#ff0 100%);
  background: -ms-radial-gradient(center, ellipse cover, #f90 0%,#fc0 50%,#ff0 100%);
  background: radial-gradient(ellipse at center, #f90 0%,#fc0 50%,#ff0 100%);
  border-radius: 100%;
  left: 88%;
  top: 500px;
  z-index:5;
  position:relative;
  box-shadow: 0 0 100px #ff0, 0 0 100px #ff0;
}


/* Background Info */
#background { position: relative; width: 100%; top: 500px; left: -3.5%; z-index: 1; }

.circle {
    position: absolute;
    overflow: hidden;
    border-radius: 100%;
    background: radial-gradient(ellipse at center center , #FF9900 0%, #FFCC00 50%, #FFFF00 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    width: 150px;
    height: 150px;
    text-align: center;
    font-size: 20px;
    margin: 0 auto;
    box-sizing: border-box;
    transition:width .25s, height .25s, padding-top .25s, left .25s; 
    -webkit-transition:width .25s, height .25s, padding-top .25s, left .25s; /* Safari */ 
}

.circle:hover, .circle:focus, .circle:active {
    width: 300px;
    height: 300px;
    padding-top: 30px;
    z-index: 1;
}

.hiddenLoad { 
    /*padding-top: 30px;*/ 
    display: none;
    transition: display 0.25s;
    -webkit-transition: display 0.25s;
}

.circle:hover .hiddenLoad, .circle:focus .hiddenLoad, .circle:active .hiddenLoad { display: block; }

.circle h1 { padding: 39% 0 0 0; margin: 0; font-size: 1em; transition: padding .25s; -webkit-transition: padding .25s;}
.circle:hover h1, .circle:focus h1, .circle:active h1 { padding: 0;}
.circle h3, .circle p { margin: 0; padding: 0; }
.circle .icon { width: 50px; height: 50px; background: blue; margin: 0 auto; border-radius: 5px; font-size: 40px; line-height: 50px; }

.edu { 
	background: #FF9900;
    background: radial-gradient(ellipse at center center , #FFFF00 0%, #FFCC00 50%, #FF9900 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    top: 0px;
    left: 49%;
    width: 100px;
    height: 100px;
    padding-top: 20px;
    box-shadow: 0 0 15px #FFFF00;
}
.edu h1 { padding-top: 20px;}
.edu .icon { color: #FFCC00; background: #0099CC;}
.edu:hover, .edu:focus, .edu:active { left: 40%; }

.exp { 
	background: #FF4500;
    background: radial-gradient(ellipse at center center , #F87531 0%, #EE4000 50%, #FF4500 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    top: 100px;
    left: 26%;
    box-shadow: 0 0 15px #F87531;
}
.exp p { line-height: 1; }
.exp p + h3 { padding-top: 12px; }
.exp .icon { background: #000; color: #fff; line-height: 40px;}
.exp:hover, .exp:focus, .exp:active { width: 360px; height: 360px; left: 20%; }

.proj { 
	background: #D43D1A;
    background: radial-gradient(ellipse at center center , #EE6A50 0%, #E3170D 50%, #D43D1A 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    top: 100px;
    left: 65%;
    box-shadow: 0 0 15px #EE6A50;
}
.proj .icon { color: #E3170D; background: #CDC9C9;}
.proj:hover, .proj:active, .proj:focus { left: 60%; }

.programs { 
	background: #8B8989;
    background: radial-gradient(ellipse at center center , #EEE9E9 0%, #CDC9C9 50%, #8B8989 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    top: 200px;
    left: 32%;
    box-shadow: 0 0 15px #EEE9E9;
}
.programs .hiddenLoad p { padding: 0 20px;}
.programs .icon { color: #CDC9C9; background: #E3170D;}
.programs, .awards { width: 200px; height: 200px;}
.programs:hover, .programs:active, .programs:focus { left: 26%; }

.awards { 
	background: #507786;
    background: radial-gradient(ellipse at center center , #0EBFE9 0%, #0099CC 50%, #507786 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
    top: 200px;
    left: 56%;
    box-shadow: 0 0 15px #0EBFE9;
}
.awards .icon { color: #0099CC; background: #FFCC00;}
.awards .hiddenLoad { padding: 10px 45px 0 45px; }
.awards:hover, .awards:active, .awards:focus { width: 360px; height: 360px; left: 53%;}





/* Land */

#land { position: relative; top: 1000px; z-index: 0; }
#mountainRange { position: relative; top: 0; z-index: -1;}
#mountainRange canvas { background: #CAE7F0; }

#hillRange { position: relative; /*top: -800px;*/ z-index: 1;}

@keyframes drive
{
  0% { left: -235px; }
  100% { left: 100%; }
}

@-webkit-keyframes drive /*Safari and Chrome*/
{
  0% { left: -235px; }
  100% { left: 100%; }
}

.car {
  /*margin: 50px auto;*/
  width: 250px;
  position: relative;
  top: -100px;
  animation: drive linear 60s infinite;
  -webkit-animation: drive linear 60s infinite;
  -moz-animation: drive linear 60s infinite;
}

.roof {
  border-bottom: 40px solid black;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  height: 0;
  width: 100px;
  border-radius: 100% 100% 0 0;
  float: left;
  position: relative;
  left: 20px;
  top: 5px;
}   

.roof .window {
  border-bottom: 30px solid #42b2c8;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
  border-radius: 100% 100% 0 0;
  float: left;
  position: relative;
  left: -22px;
  top: 6px;
}  

.gauge {
  content: '';
  display: block;
  background: black;
  width: 60px;
  height: 35px;
  border-radius: 45px 45px 0 0;
  position: absolute;
  bottom: 0px;
  left: 42px;
  /*border-right: 2px solid #000;*/
}

.car .body {
  width: 200px;
  height: 100px;
  /*background: silver;*/
  border-radius: 200px 200px 0 0;
  position: relative;
}
.car .body:before {
  content: '';
  width: 180px;
  height: 90px;
  position: relative;
  top: 10px;
  left: 10px;
  border-radius: 180px 180px 0 0;
  display: block;
  /*background: #42b2c8;*/
}
.car .body:after {
  content: '';
  display: block;
  position: absolute;
  background: silver;
  width: 183px;
  height: 60px;
  bottom: 0;
  left: 9px;
  border-radius: 27px 27px 0 0;
}
.car .driver {
  position: absolute;
  top: 15px;
  left: 45%;
  width: 20px;
  height: 20px;
  background: #404041;
  border-radius: 50%;
}
.car .driver:before {
  content: '';
  display: block;
  background: #404041;
  width: 18px;
  height: 12px;
  border-radius: 10px 10px 0 0;
  position: absolute;
  bottom: -8px;
  left: 0;
}
.car .doorframe {
  position: absolute;
  top: 9px;
  left: 55px;
  border-top: none;
  width: 80px;
  height: 30px;
  margin: 1px 0 0 -4px;
  display: block;
  border: 10px solid black;
  border-top: none;
  border-bottom: none;
}
.car .doorframe:before {
  content: '';
  display: block;
  background: black;
  width: 60px;
  height: 35px;
  border-radius: 45px 45px 0 0;
  position: absolute;
  bottom: -60px;
  left: -50px;
  /*border-right: 2px solid #000;*/
}
.car .doorframe:after {
  content: '';
  margin: 1px 0 0 -5px;
  display: block;
  top: 12px;
  left: 55px;
  width: 87px;
  height: 80px;
  border: 2px solid #000;
  border-top: none;
}
.car .doorhandle {
  position: absolute;
  bottom: -20px;
  right: 0;
  width: 15px;
  height: 15px;
  background: #404041;
  border-radius: 50%;
}
.car .doorhandle:before {
  content: '';
  display: block;
  width: 15px;
  height: 5px;
  border-radius: 5px;
  background: #404041;
  position: absolute;
  left: -12px;
  top: 4px;
}
.car .trunk {
  width: 120px;
  height: 60px;
  border-radius: 120px 120px 0 0;
  border-right: 2px solid black;
  background: silver;
  position: absolute;
  left: 120px;
  top: 40px;
}
.car .wheel {
  position: absolute;
  background: #404041;
  border: 2px solid transparent;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.car .wheel.back {
  top: 70px;
  left: 14px;
}
.car .wheel.front {
  top: 30px;
  left: 45px;
}
.car .wheel:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 50%;
  background: #bcbdc0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px 0 0 -15px;
}

/* Forrest */
#forest { 
	position: relative; top: 190px; width: 100%; min-height: 4000px; background-color: #6D8D6D;
	background-image: linear-gradient(to bottom, #324332 10%, #4F694F 66%, #6D8D6D 100%);
	background-position: center top;
	background-repeat: repeat-x;
	background-size: 100% 1632px;
}

.tree {
  width: 0;
  height: 0;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-bottom: 1em solid #6D8D6D;
  border-radius: 5px;
  position: absolute;
  display: block;
}
.tree:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 1.1em solid transparent;
  border-right: 1.1em solid transparent;
  border-bottom: 1.1em solid #6D8D6D;
  margin: 0 auto;
  border-radius: 5px;
  position: absolute;
  top: 0.5em;
  left: -1.05em;
}
.tree:after {
  content: "";
  position: absolute;
  background: saddlebrown;
  width: 0.5em;
  height: 0.25em;
  top: 1.55em;
  left: -0.25em;
  display: block;
  border-radius: 0 0 2px 2px;
}

#tree13, #tree13:before, #tree16, #tree16:before, #tree19, #tree19:before, 
#tree24, #tree24:before, #tree27, #tree27:before, #tree30, #tree30:before
{ border-bottom-color: #93AA93; }

.uni-tree {
  width: 0;
  height: 0;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-bottom: 1.6em solid #6D8D6D;
  border-radius: 5px;
  position: absolute;
  display: block;
}
.uni-tree:after {
  content: "";
  position: absolute;
  background: sandybrown;
  width: 0.5em;
  height: 0.25em;
  top: 1.55em;
  left: -0.25em;
  display: block;
  border-radius: 0 0 2px 2px;
}

.upi-tree { position: absolute; width: 22px; }
.upi-tree .bush{
  width: 1.4em;
  height: 1.4em; 
  border-radius: 100% 100% 100% 0;
  background: #6D8D6D;
  position: relative;
  display: block;
  top: 1px;
  transform: rotate(135deg);  
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
    
}
.upi-tree .trunk {
  content: "";
  position: relative;
  background: chocolate;
  width: 0.5em;
  height: 0.25em;
  display: block;
  border-radius: 0 0 2px 2px; 
  margin: 0 auto;  
}

.scale2 { -ms-transform: scale(2,2); -mos-transform: scale(2,2); -webkit-transform: scale(2,2); transform: scale(2,2); }
.scale3 { -ms-transform: scale(3,3); -mos-transform: scale(3,3); -webkit-transform: scale(3,3); transform: scale(3,3); }
.scale4 { -ms-transform: scale(4,4); -mos-transform: scale(4,4); -webkit-transform: scale(4,4); transform: scale(4,4); }
.scale5 { -ms-transform: scale(5,5); -mos-transform: scale(5,5); -webkit-transform: scale(5,5); transform: scale(5,5); }

#techSkills { width: 100%; position: relative; padding-top: 571px; color: #fff; }
#forest h1, #forest h2 { color: #fff; margin: 0; text-align: center; }

.barChart.barChart--lang { 
    padding: 0; margin: 0; 
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    width: 500px;
    margin: -85px auto 0 auto;
}
.barChart.barChart--lang li { 
    list-style-type: none;
    border-radius: 5px;
    font-size: 20px;
    letter-spacing: 0.5em;
    margin: 10px;
    padding: 20px;
}

#developmentTools ul li.pro.browserstack span { left: -58px; top: 119px; transform: rotate(20deg); }

#techSkills ul li.pro {  width: 80%; }
#techSkills ul li.high { width: 70%; }
#techSkills ul li.med { width: 60%; }
#techSkills ul li.low { width: 40%; }
#techSkills ul li.rusty { width: 20%; }

#techSkills ul li.yellow {  background: rgba(255, 192, 97, 0.9); }
#techSkills ul li.orange { background: rgba(217, 91, 67, 0.9); }
#techSkills ul li.pink { background:rgba(224, 138, 117, 0.9); }
#techSkills ul li.red { background: rgba(192, 41, 66, 0.9); }
#techSkills ul li.ruby { background: rgba(168, 41, 66,0.9); }
#techSkills ul li.purple { background: rgba(84, 36, 55, 0.9); }
#techSkills ul li.green { background: rgba(83, 119, 122, 0.9); }
#techSkills ul li.blue { background: rgba(119, 146, 174, 0.9); }
#techSkills ul li.darkBlue { background: rgba( 38, 48, 69, 0.9); }
#techSkills ul li.lightGreen { background: rgba(109, 141, 109, 0.9); }

#everydayTools { color: #ffffff; }
#repositories, #cmsTools { width: 49%; height: 500px; display: inline-block; float: left; }

/* Main orange circle */
#orange
{
width:125px;
height:125px;
border:50px solid rgba(217, 91, 67, 1);
background:transparent;
border-radius:50%;
position:relative;
left: -62.5px;
margin:72px auto 0 auto;
}

/* babyblue circle */
#orange:after
{
content:"";
width:125px;
height:125px;
border:50px solid rgba(119, 146, 174, 0.9);
background:transparent;
border-radius:50%;
position:absolute;
left:40px;
top:-50px;
}

/* overlap circle on orange */
#orange:before
{
content:"";
width:125px;
height:125px;
border-top:50px solid transparent;
border-right:50px solid rgba(217, 91, 67, 0.9);
border-bottom:50px solid transparent;
border-left:50px solid transparent;
background:transparent;
border-radius:50%;
position:absolute;
left:-50px;
top:-50px;
z-index:2;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(60deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.num1 { transform: translate(0px, 25px) rotate(-25deg); -moz-transform: translate(0px, 25px) rotate(-25deg); -webkit-transform: translate(0px, 25px) rotate(-25deg); -ms-transform: translate(0px, 25px) rotate(-25deg);}
.num2 { transform: translate(0px, 23px) rotate(0deg); -moz-transform: translate(0px, 23px) rotate(0deg); -webkit-transform: translate(0px, 23px) rotate(0deg); -ms-transform: translate(0px, 23px) rotate(0deg); }
.num3 { transform: translate(0px, 25px) rotate(25deg); -moz-transform: translate(0px, 25px) rotate(25deg); -webkit-transform: translate(0px, 25px) rotate(25deg); -ms-transform: translate(0px, 25px) rotate(25deg); }

#repositories span {display: inline-block; margin: 1px; font-size: 20px; }
#repositories .left { position: relative; top: -40%; left: -30%; transform: rotate(-40deg); -moz-transform: rotate(-40deg); -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg);}
#repositories .right { position: relative; top: -30%; left: 150%; transform: rotate(40deg); -moz-transform: rotate(40deg); -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); z-index: 1; }


@-webkit-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes counter-clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes counter-clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

/* CMS Section */

.gear {
  position: relative;
  height: 7.5em;
  width: 7.5em;
  margin: 0 auto;
  -webkit-border-radius: 3.75em;
  -moz-border-radius: 3.75em;
  -ms-border-radius: 3.75em;
  -o-border-radius: 3.75em;
  border-radius: 3.75em;
  text-align: center;
  font-size: 20px;
}

.gear span { position: relative; z-index: 3; letter-spacing: 0.3em; left: 3.5px; }
.gear.one span { top: -86px; }
.gear.two span { top: -165px; }

.gear.large {
  height: 15em;
  width: 15em;
  -webkit-border-radius: 7.5em;
  -moz-border-radius: 7.5em;
  -ms-border-radius: 7.5em;
  -o-border-radius: 7.5em;
  border-radius: 7.5em;
}
.gear.large:after {
  height: 7.5em;
  width: 7.5em;
  -webkit-border-radius: 4.5em;
  -moz-border-radius: 4.5em;
  -ms-border-radius: 4.5em;
  -o-border-radius: 4.5em;
  border-radius: 4.5em;
  margin-left: -3.75em;
  margin-top: -3.75em;
}
.gear.one {
	top: 5em;
	left: -6.5em;
}
.gear.two {
  top: -4em;
  left: 6.5em;
}
.gear:after {
  content: "";
  position: absolute;
  height: 3em;
  width: 3em;
  -webkit-border-radius: 4.5em;
  -moz-border-radius: 4.5em;
  -ms-border-radius: 4.5em;
  -o-border-radius: 4.5em;
  border-radius: 4.5em;
  background: #a3a3a3;
  top: 50%;
  left: 50%;
  margin-left: -1.5em;
  margin-top: -1.5em;
}

.gear.one:after { background: rgba(83, 119, 122, 0.9); }
.gear.two:after { background: rgba(224, 138, 117, 0.9);}

.gear-inner {
  position: relative;
  height: 100%;
  width: 100%;
  background: #888888;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-border-radius: 3.75em;
  -moz-border-radius: 3.75em;
  -ms-border-radius: 3.75em;
  -o-border-radius: 3.75em;
  border-radius: 3.75em;
}
.large .gear-inner {
  -webkit-border-radius: 7.5em;
  -moz-border-radius: 7.5em;
  -ms-border-radius: 7.5em;
  -o-border-radius: 7.5em;
  border-radius: 7.5em;
}
.gear.one .gear-inner {
  -webkit-animation: clockwise 10s infinite linear;
  -moz-animation: clockwise 10s infinite linear;
}
.gear.two .gear-inner {
  -webkit-animation: counter-clockwise 20s infinite linear;
  -moz-animation: counter-clockwise 20s infinite linear;
}
.gear-inner .bar {
  background: #888888;
  height: 1.75em;
  width: 10.0em;
  position: absolute;
  left: 50%;
  margin-left: -5.0em;
  top: 50%;
  margin-top: -0.875em;
  -webkit-border-radius: 1%;
  -moz-border-radius: 1%;
  -ms-border-radius: 1%;
  -o-border-radius: 1%;
  border-radius: 1%;
}

.gear.one .gear-inner, .gear.one .gear-inner .bar { background: rgba(38, 48, 69, 1); }
.gear.two .gear-inner, .gear.two .gear-inner .bar { background: rgba(84, 36, 55, 1); }

.large .gear-inner .bar {
  margin-left: -8.75em;
  width: 17.5em;
}
.gear-inner .bar:nth-child(2) {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}
.gear-inner .bar:nth-child(3) {
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
}
.gear-inner .bar:nth-child(4) {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.gear-inner .bar:nth-child(5) {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
.gear-inner .bar:nth-child(6) {
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -o-transform: rotate(150deg);
  transform: rotate(150deg);
}

/* Development Tools */
#developmentTools { width: 1080px; margin: 350px auto 150px auto; }

#developmentTools ul.triChart { 
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin: 20px 0 0 -44px;
    padding: 0;
}
#developmentTools ul.triChart li { 
    list-style-type: none;
    color: #fff;
    display: inline-block;
    font-size: 20px;
    height: 0;
    width: 0;
    border-left: 150px solid transparent;
	border-right: 150px solid transparent;
	border-bottom: 200px solid red;
    position: relative;
    vertical-align: bottom;
    letter-spacing: 0.2em;
    background: none;
}

#developmentTools ul li.pro { border-left-width: 150px; border-right-width: 150px; border-bottom-width: 200px; }
#developmentTools ul li.high { border-left-width: 100px; border-right-width: 100px; border-bottom-width: 170px; }
#developmentTools ul li.low { border-left-width: 80px; border-right-width: 80px; border-bottom-width: 140px; }

#developmentTools ul li span { position: relative; display: inline-block; text-align: center; width: 150px; }
#developmentTools ul li.pro span { top: 100px; left: -73px; }
#developmentTools ul li.high span { top: 100px; left: -73px; }
#developmentTools ul li.low span { top: 100px; left: -88px; }

#developmentTools ul li.yellow {  border-bottom-color: rgba(255, 192, 97, 0.9); }
#developmentTools ul li.orange { border-bottom-color: rgba(217, 91, 67, 0.9); left: -138px; }
#developmentTools ul li.pink { border-bottom-color:rgba(224, 138, 117, 0.9); left: -218px; z-index: 1; }
#developmentTools ul li.ruby { border-bottom-color: rgba(168, 41, 66,0.9); left: -343px; }
#developmentTools ul li.purple { border-bottom-color: rgba(84, 36, 55, 0.9); left: -486px; }
#developmentTools ul li.green { border-bottom-color: rgba(83, 119, 122, 0.9); left: -615px; }
#developmentTools ul li.blue { border-bottom-color: rgba(119, 146, 174, 0.9); left: -698px; z-index: 1; }
#developmentTools ul li.darkBlue { border-bottom-color: rgba( 38, 48, 69, 0.9); left: -830px; }

/* Design Skills */
#designSkills { margin-top: 1070px; }
#designSkills h1 { padding-bottom: 32px; }
#application, #designTools { width: 49%; height: 400px; display: inline-block; float: left; }
#designTools { text-align: center; }


.barChart.barChart--app { 
    padding: 0; 
    margin-top: 20px;
    width: 500px;
    float: right;
}
.barChart.barChart--app li { 
    list-style-type: none;
    border-radius: 5px;
    color: #fff;
    font-size: 20px;
    letter-spacing: 0.2em;
    margin: 5px;
    padding: 10px;
}

#application h2 { width: 500px; margin-left: auto; }

#application ul li.pro {  width: 100%; }
#application ul li.high { width: 80%; }
#application ul li.low { width: 60%; }
#application ul li.rusty { width: 40%; }

#application ul li.yellow {  background: rgba(255, 192, 97, 0.9); }
#application ul li.orange { background: rgba(217, 91, 67, 0.9); }
#application ul li.pink { background:rgba(224, 138, 117, 0.9); }
#application ul li.red { background: rgba(192, 41, 66, 0.9); }
#application ul li.purple { background: rgba(84, 36, 55, 0.9); }
#application ul li.green { background: rgba(83, 119, 122, 0.9); }
#application ul li.blue { background: rgba(119, 146, 174, 0.9); }
#application ul li.darkBlue { background: rgba( 38, 48, 69, 0.9); }

.tri-container { width: 305px; margin: 0 auto; }
.tri {
    width: 0;
	height: 0;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	border-bottom: 125px solid red;
    display: inline-block;
    color: #fff;
}

.tri.red { border-bottom-color: rgba(192, 41, 66, 0.9); display: block; position: relative; margin: 40px auto 0 auto; }
.tri.pink { border-bottom-color:rgba(224, 138, 117, 0.9);}
.tri.orange { border-bottom-color: rgba(217, 91, 67, 0.9); }

.tri span { position: relative; display: inline-block; text-align: center; width: 121px; top: 70px; left: -59px; letter-spacing: 0.2em; font-size: 15px; }
.tri.red span { top: 105px; left: -60px; }

.textContainer { margin-top: 32px; line-height: 0.9; font-size: 28px; }
h1.token1 { color: rgba(84, 36, 55, 1) !important; text-shadow: 0 0 0 #000; letter-spacing: 0.34em; position: relative; left: 5px; }
h1.token2 { color: rgba(83, 119, 122, 1) !important; text-shadow: 0 0 3px #000; letter-spacing: 0.13em; position: relative; left: 2px; margin-bottom: 4px !important; }
h1.token2 span { font-family: cool_font; display: block; letter-spacing: 0.29em; margin-bottom: 4px; }
h1.token3 { color: rgba(119, 146, 174, 1) !important; text-shadow: 0 0 3px #000; }

#swamp { position: relative; }

#swamp canvas#wave {
  display: block; 
  position: relative;
  z-index: 1;
}

#swamp .reed {
    position: absolute;
    background: #4F694F;
    width: 2px;
    height: 100px;
    margin: 0 auto;
}

#swamp .reed:after {
    content: "";
    position: absolute;
    top: 10px;
    left: -4px;
    margin: 0 auto;
    background: sandybrown;
    width: 10px;
    height: 20px;
    border-radius: 20%; 
}

#swamp .grass { 
    position: absolute;
    left: 10px;
    top: 88px;
    width: 20px; 
    height: 30px;
    border-radius: 100%;
}
#swamp .grass.right { border-left: 5px solid #4f694f; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
#swamp .grass.left { border-right: 5px solid #4f694f; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

#swamp .lilyPad {
    position: absolute;
    background: #324332;
    width: 35px;
    height: 70px;
    border-radius: 50%; 
    -webkit-transform: skew(-89deg, -82deg) rotate(-41deg) scale(0.05,0.05);
    -moz-transform: skew(-89deg, -82deg) rotate(-41deg) scale(0.05,0.05);
    -ms-transform: skew(-89deg, -82deg) rotate(-41deg) scale(0.05,0.05);
    transform: skew(-89deg, -82deg) rotate(-41deg) scale(0.05,0.05);
    left: 15%;
    margin-top: -55px;
    z-index: 2;
}

#swamp .lilyPad:after {
    content: "";
    background: #324332;
    width: 35px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    left: 25px;
    top: 11px;
    -webkit-transform: rotate(52deg);
    -moz-transform: rotate(52deg);
    -ms-transform: rotate(52deg);
    transform: rotate(52deg);
}

@keyframes ribbit
{
	5% { transform: scale(1.2,1.2); }
    10% { transform: scale(1,1); }
}

@-webkit-keyframes ribbit /*Safari and Chrome*/
{
	10% {  -webkit-transform:scale(1.2,1.2);  }
    15% { -webkit-transform: scale(1,1); }
}

.frog { position: absolute; left: 11%; top: 265px; z-index: 2; width: 125px; -webkit-transform: scale(0.8,0.8); -ms-transform: scale(0.8,0.8); -moz-transform: scale(0.8,0.8); transform: scale(0.8,0.8); }
.frog .head { position: relative; z-index: 1; width: 125px; height: 75px; background: #4F694F; border-radius: 100%; }

.frog .left { float: left; }
.frog .right { float: right; }

.frog .eye { background: #edd7ac; border: 5px solid #4f694f; width: 40px; height: 40px; border-radius: 100%; position: relative; top: -15px; }

.frog .eye .inner { position: relative; background: black; width: 20px; height: 20px; border-radius: 100% 100% 100% 100%; }

.frog .nose {
    position: relative;
    background: #607860;
    border-radius: 100%;
    top: 25px;
    left: 50px;
    width: 10px;
	height: 10px;
}
.frog .nose:after {
    content: "";
    position: absolute;
    background: #607860;
    border-radius: 100%;
    left: 18px;
    width: 10px;
	height: 10px;
}


.frog .mouth { width: 125px; height: 50px; border-bottom: 2px solid #607860; border-radius: 100%; position: relative; top: -15px; }

.frog .body {
	position: relative; 
	top: -10px; 
	width: 125px; 
	height: 80px; 
	background: #4F694F; 
	border-radius: 100%; 
	animation: ribbit 5s infinite;
	-webkit-animation: ribbit 5s infinite;
	-moz-animation: ribbit 5s infinite;}
.frog .body:after { position: absolute; content: ""; background: #edd7ac; height: 66px; width: 83px; border-radius: 100%; left: 21px; }

.frog .toes { position: relative; width: 20px; height: 20px; background: #edd7ac; border-radius: 100%; }
.frog .toes:before { position: absolute; left: 20px; bottom: 10px; content: ""; width: 20px; height: 20px; background: #edd7ac; border-radius: 100%; }
.frog .toes:after { position: absolute; left: -20px; bottom: 10px; content: ""; width: 20px; height: 20px; background: #edd7ac; border-radius: 100%; }

.frog .toes.left { -webkit-transform: rotate(33deg) !important; -ms-transform: rotate(33deg) !important; -moz-transform: rotate(33deg) !important; transform: rotates(33deg) !important; top: -17px; }
.frog .toes.right { -webkit-transform:rotate(-33deg) !important; -ms-transform: rotate(-33deg) !important; -moz-transform: rotate(-33deg) !important; transform: rotates(-33deg) !important; top: -17px; }

#innerSwamp {
	background-color: #7792AE;
	background-image: linear-gradient(to bottom, #cae7f0 0%, #7792AE 30%, #7792AE 100%);
	background-position: center top;
	background-repeat: repeat-x;
	background-size: 100% 600px;
	height: 300px;
	padding-top: 250px;
	color: #fff;
	font-size: 1.5em;
	
}

#innerSwamp ul { padding: 0; margin: 0; list-style-type: none; }
#innerSwamp a { text-decoration: none; color: #fff; }
#innerSwamp a:hover { text-decoration: underline; }

#info, #favSites { width: 49%; height: 270px; display: inline-block; float: left; text-align: center;}
#pdf { display: inline-block; width: 100%; background: rgba(38, 48, 69, 1); padding: 10px 0; }
#pdf h1 { font-size: 1em; }

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/*.yellow {
  color: #373737;
}*/