.red{  
  background-color: #DD4124;
  z-index: -1 !important;
  }
.orange{  
  background-color: #D2691E;
  z-index: -1 !important;
}
.yellow{  
  background-color: #EFC050;
  z-index: -1 !important;
}
.green{  
  background-color: #009B77;
  z-index: -1 !important;
}
.blue{  
  background-color: #98B4D4;
  z-index: -1 !important;
}
.purple{  
  background-color: #B76BA3;
  z-index: -1 !important;
}

body {
    background-color: whitesmoke !important;
    font-family: 'Courier', Arial, sans-serif;
    margin: 0 auto !important;
    max-width: 80%; 
  }
  
.header{
  text-align: center; 
}
  h1 {
    font-family: 'Courier', Arial, sans-serif;
    font-weight: 200;
    display: block;
    text-transform: uppercase;
    color: #000000;
    text-align: center;
    margin:0;
    text-shadow: 2px 2px whitesmoke;
  }

  Title h1{
    font-weight: 500;
  }

  h2{
    margin:0;
    margin-top: .25em;
    color: whitesmoke;
    text-shadow: 2px 2px black;
    font-family: 'Courier', Arial, sans-serif;
    
  }

  h3{
    font-weight: 400 !important;
    font-family: 'Courier', Arial, sans-serif;
  }

  h4{
    font-family: 'Courier', Arial, sans-serif;
  }

  a{
      text-decoration: none;
      color: blue;    
      text-shadow: none !important;
  }

  nav {    
      height: 100%;
  }

  #nav-span{
      margin: 0;
      padding:0;
      height: 100%;
      width: 100%;
      text-align: center;
  }

footer div{
  font-size: small;
}

.link{
  color: blue;
  cursor: pointer;
}

.tabs{
  cursor: pointer;
  position: relative;
}

  #nav-bar{
      text-align: center;
      height: 4em;
  }

  #under-header{
    width: 100%;
    position: relative;
  }

  #body-content{
    display: inline-block;
    width: 100%;
    padding-bottom: 2.5rem;
  }

  #right-pane{
    width: 47%;
    text-align: center;
    float: right;
    position: relative;
    top: 1.25em;
    height: 63vh;
  }

  #left-pane{
    width:47%;
    text-align: center;
    float: left;
    position: relative;
    top: 1.25em;
    height: 63vh;
  }

  .quotes{
    float:right;
    margin: 0;
  }

  hr{
    box-sizing: border-box;
    border: none;
    height: 2px;
    width: 100%;
    display: block;
    background: black !important;
    margin: 0;
    opacity: 100% !important;
  }

  #vertical{
    display: inline-block;
    width: 6%;
  }

  #vertical hr{
    width: 2px;
    margin: 0 auto;
    height: 55vh;
  }

  .stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.topHR{
  margin-top: 0;
  height: 2px !important;
}

.bottomHR{
  height: 2px !important;
}

  .hide-display{
    display: none;
  }

  .show-visible{
    visibility: visible !important;
  }

.main-font{
  font-size: 3vw;
}

/*referrals*/
#referrals{
  visibility: hidden;
  overflow-y: auto;
  max-height: 100%;
}

#referrals p{
  font-size: 3vw;
}

#referralsFiller{
  border-radius: 5px;
} 

#referrals::-webkit-scrollbar {
  width: 10px;
}

#referrals::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: whitesmoke;
  border: 1px solid whitesmoke;
}

#referrals::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #DD4124;
}

/*Services*/
#services{
  visibility: hidden;
  overflow-y: auto;
  max-height: 100%;
}

#serviceHolder{
  list-style: none;
  padding: 0;
  color: whitesmoke;
  text-shadow: 1px 1px black;
}

#serviceHolder li{
  margin-bottom: 1.5em;
}

#servicesFiller{
  border-radius: 5px;
} 

#services::-webkit-scrollbar {
  width: 10px;
}

#services::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: whitesmoke;
  border: 1px solid whitesmoke;
}

#services::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #D2691E;
}

.service{

}

.service p{
  text-align: left;
  margin-left: 2em;
}

.service div{
  font-weight: bold; 
  text-align: left;
  padding-left: 1em;
}

.service div p{
  text-align:center;
}

/*About*/
#about{
  visibility: hidden;
  overflow-y: auto;
  max-height: 100%;
}

#about p{
  color: black;
  text-shadow: 1px 1px whitesmoke;
}

#aboutFiller{
  border-radius: 5px;
} 

#about::-webkit-scrollbar {
  width: 10px;
}

#about::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: whitesmoke;
  border: 1px solid whitesmoke;
}

#about::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #EFC050;
}

/*Skills*/
#skills{
  visibility: hidden;
  overflow-y: auto;
  max-height: 100%;
}

.skillList{
  list-style: none;
  margin: 2em 0;
  padding: 0 .15em;
}

.skillList li{
  padding-bottom: .5em;
  color: whitesmoke;
  text-shadow: 1px 1px black;
}

#skillsFiller{
  border-radius: 5px;
} 

#skills::-webkit-scrollbar {
  width: 10px;
}

#skills::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: whitesmoke;
  border: 1px solid whitesmoke;
}

#skills::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #98B4D4;
}

/*Projects*/
.quotation {
  color: whitesmoke;
  font-weight: 200;
  margin-bottom: 0;
  text-shadow: 1.5px 1.5px black;
}

#project-holder{
  position: relative;
}

#projects{
  bottom: .5em;
  visibility: hidden;
  height: 100%;
  overflow-y: auto;
  max-height: 100%;
}

#projects p{
  color: whitesmoke;
  text-shadow: 1px 1px black;
}

#projectsFiller{
  border-radius: 5px;
} 

#projects::-webkit-scrollbar {
  width: 10px;
}

#projects::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: whitesmoke;
  border: 1px solid whitesmoke;
}

#projects::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #009B77;
}

/*Contact*/
#contact{
  visibility: hidden;
}

#contact p{
  color: whitesmoke;
  text-shadow: 1px 1px black;
}

#contactFiller{
  border-radius: 5px;
} 

#contact::-webkit-scrollbar {
  width: 10px;
}

#contact::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: whitesmoke;
  border: 1px solid whitesmoke;
}

#contact::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #DD4124;
}

/*Transformations*/
#referralsTab:hover{  
  background-color: #DD4124;
  }
#servicesTab:hover{  
  background-color: #D2691E;
  }
#aboutTab:hover{  
  background-color: #EFC050;
  }
#projectsTab:hover{  
  background-color: #009B77;
  }
#skillsTab:hover{  
  background-color: #98B4D4;
  }
#contactTab:hover{  
  background-color: #B76BA3;
  }

/*drainers and fillers*/
.drainer{
  width: 100%;
  height: 100%;
  position: absolute; 
  top: 0;
  left: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s; 
  transition-property: height;
  z-index: 2;
  /* display: none; */
}

.drainerDrain{
  animation: drain 1s 1;
  z-index: -1;
}

@keyframes drain{
  0%{
    height: 0%;
    display: block !important;
    background: whitesmoke;
  }
  100% {
    height: 100%;
    display: block !important;
    background: whitesmoke;
  }
}

.filler{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s; 
  transition-property: height;
  transition-delay: 1s;
  z-index: 2;
}

.refDrainerFill{
  animation: referralsFill 1s 1;
  animation-delay: .5s;
  z-index: -1;
}

.servDrainerFill{
  animation: servicesFill 1s 1;
  animation-delay: .5s;
  z-index: -1;
}

.abDrainerFill{
  animation:  aboutFill 1s 1;
  animation-delay: .5s;
  z-index: -1;
}

.projDrainerFill{
  animation: projectsFill 1s 1;
  animation-delay: .5s;
  z-index: -1;
}

.skilDrainerFill{
  animation: skillsFill 1s 1;
  animation-delay: .5s;
  z-index: -1;
}

.conDrainerFill{
  animation: contactFill 1s 1;
  animation-delay: .5s;
  z-index: -1;
}

@keyframes referralsFill{
  0% {
    height: 0%;
    background: #DD4124;
  }
  100%{
    background-color: #DD4124;
    height: 100%;
  }
}

@keyframes servicesFill{
  0% {
    height: 0%;
    background: #D2691E;
  }
  100%{
    background-color: #D2691E;
    height: 100%;
  }
}

@keyframes aboutFill{
  0% {
    height: 0%;
    background: #EFC050;
  }
  100%{
    background-color: #EFC050;
    height: 100%;
  }
}

@keyframes projectsFill{
  0% {
    height: 0%;
    background: #009B77;
  }
  100%{
    background-color: #009B77;
    height: 100%;
  }
}

@keyframes skillsFill{
  0% {
    height: 0%;
    background: #98B4D4;
  }
  100%{
    background-color: #98B4D4;
    height: 100%;
  }
}

@keyframes contactFill{
  0% {
    height: 0%;
    background: #B76BA3;
  }
  100%{
    background-color: #B76BA3;
    height: 100%;
  }
}
/* Next attempt*/
    .shape{        
        top: 7%;
        border-radius: 50%;
        border-top-right-radius: 0;
        transform: rotate(-45deg);
        margin-left: 20px;
        position: absolute; 
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        transition-duration: 1s; 
        transition-property: height;             
    }
    
    @keyframes referralsGrow{
      0%{}
      100%{height: 45px;width: 45px; left:5vw;}
    }
    @keyframes servicesGrow{
      0%{}
      100%{height: 45px;width: 45px; left:16vw;}
    }
    @keyframes aboutGrow{
      0%{}
      100%{height: 45px;width: 45px; left:var(--about-pos);}
    }
    @keyframes projectsGrow{
      0%{}
      100%{height: 45px;width: 45px; left:45vw;}
    }
    @keyframes skillsGrow{
      0%{}
      100%{height: 45px;width: 45px; left:56vw;}
    }
    @keyframes contactGrow{
      0%{}
      100%{height: 45px;width: 45px; left:var(--contact-pos);}
    }

    .referralsDropGrow{
      visibility: visible !important;
      animation: referralsGrow 1s 1;
      z-index: -1;
    }

    .servicesDropGrow{
      visibility: visible !important;
      animation: servicesGrow 1s 1;
      z-index: -1;
    }
    
    .aboutDropGrow{
      visibility: visible !important;
      animation: aboutGrow 1s 1;
      z-index: -1;
    }
    
    .projectsDropGrow{
      visibility: visible !important;
      animation: projectsGrow 1s 1;
      z-index: -1;
    }
    
    .skillsDropGrow{
      visibility: visible !important;
      animation: skillsGrow 1s 1;
      z-index: -1;
    }
    
    .contactDropGrow{
      visibility: visible !important;
      animation: contactGrow 1s 1;
      z-index: -1;
    }
    
    .referralsDropFall{
      visibility: visible !important;
      animation: referralsDrop .75s 1;
      z-index: -1;
    }

    @keyframes referralsDrop{
      0%{top:7%; height: 45px;width: 45px; left:5vw;}
      100%{top: 135%; height: 45px;width: 45px; }
    }

    .servicesDropFall{
      visibility: visible !important;
      animation: servicesDrop .7s 1;
      z-index: -1;
    }

    @keyframes servicesDrop{
      0%{top:7%; height: 45px;width: 45px; left: 16vw;}
      100%{top: 135%; height: 45px;width: 45px;}
    }

    .aboutDropFall{
      visibility: visible !important;
      animation: aboutDrop .75s 1;
      z-index: -1;
    }

    @keyframes aboutDrop{
      0%{top:7%; height: 45px;width: 45px; left:var(--about-pos);}
      100%{top: 135%; height: 45px;width: 45px;}
    }

    .projectsDropFall{
      visibility: visible !important;
      animation: projectsDrop .75s 1;
      z-index: -1;
    }

    @keyframes projectsDrop{
      0%{top:7%; height: 45px; width: 45px; left:45vw;}
      100%{top: 135%; height: 45px; width: 45px; }
    }

    .skillsDropFall{
      visibility: visible !important;
      animation: skillsDrop .75s 1;
      z-index: -1;
    }

    @keyframes skillsDrop{
      0%{top:7%; height: 45px; width: 45px; left:56vw;}
      100%{top: 135%; height: 45px; width: 45px;}
    }

    .contactDropFall{
      visibility: visible !important;
      animation: contactDrop .75s 1;
      z-index: -1;
    }

    @keyframes contactDrop{
      0%{top:7%; height: 45px; width: 45px; left:var(--contact-pos);}
      100%{top: 135%; height: 45px; width: 45px;}
    }

    .container div{
        width: 10px;
        height: 10px;
    }

    #referralsDrop{
      left: 5vw;
      background-color: #DD4124;
      visibility: hidden;
    }

    #servicesDrop{
      left: 16vw;
      background-color: #D2691E;
      visibility: hidden;
    }

    #aboutDrop{
      left: var(--about-pos);
      background-color: #EFC050;
      visibility: hidden;
    }

    #projectsDrop{
      left: 45vw;
      background-color: #009B77;
      visibility: hidden;
    }

    #skillsDrop{
      left: 56vw;
      background-color: #98B4D4;
      visibility: hidden;
    }

    #contactDrop{
      left: var(--contact-pos);
      background-color: #B76BA3;
      visibility: hidden;
    }

/*Splash*/
.particles{
  margin-left: 30px;
  position: absolute;
  top: 130%;
}

.particles > div{
	border-radius: 100%;
	animation-duration: .75s;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-fill-mode: backwards;
  visibility: hidden;
}

.particles > div:nth-child(1){
	width: 7px;
	height: 7px;
}

.particles > div:nth-child(2){
	width: 5px;
	height: 5px;
}

.particles > div:nth-child(3){
	width: 3px;
	height: 3px;
}

.particles > div:nth-child(4){
	width: 5px;
	height: 5px;
}

.jump-left{
  animation: jumpLeft .5s 1;
  visibility: visible !important;
}

.jump-right{
  animation: jumpRight .5s 1;
  visibility: visible !important;
}

#referralsParticles{
  left: 5vw;
}

#referralsParticles > div{
	background-color: #DD4124;
}

#serviceParticles{
  left: 16vw;
}

#serviceParticles > div{
	background-color: #D2691E;
}

#aboutParticles{
  left: var(--about-pos);
}

#aboutParticles > div{
	background-color: #EFC050;
}

#projectsParticles{
  left: 45vw;
}

#projectsParticles > div{
	background-color: #009B77;
}

#skillsParticles{
  left: 56vw;
}

#skillsParticles > div{
	background-color: #98B4D4;
}

#contactParticles{
  left: var(--contact-pos);
}

#contactParticles > div{
	background-color: #B76BA3;
}

@keyframes jumpLeft{
	0%{
		transform: translate(0,0) scale(0);
	}

	45%{
		transform: translate(0,0) scale(0);
	}

	60%{
		transform: translate(-50px, -90px) scale(1);
	}

	100%{
		transform: translate(-60px, 0px) scale(0.1);
	}
}

@keyframes jumpRight{
	0%{
		transform: translate(0,0) scale(0);
	}

	45%{
		transform: translate(0,0) scale(0);
	}

	60%{
		transform: translate(30px, -80px) scale(1);
	}

	100%{
		transform: translate(50px, 0px) scale(0.1);
	}
}

/* If the screen size is up to 1500px */
@media (min-width: 1500px) {
  .main-font {
    font-size: 26px !important;
  }
}    

@media (min-width: 1200px) {
  .main-font {
    font-size: 24px !important;
  }
}

/*Between 1000 and 1200*/
@media (max-width: 1199.98px) {
  .main-font {
    font-size: 22px !important;
  }
}

@media (max-width: 999.98px) {
  .main-font {
    font-size: 18px !important;
  }
}

@media (min-width: 802px) {
  #aboutDrop{
    --about-pos: 30.25vw;
  }
  #aboutParticles{
    --about-pos: 30.25vw;
  }
  #contactDrop{
    --contact-pos: 67.25vw;
  }
  #contactParticles{
    --contact-pos: 68vw;
  }
}

@media (max-width: 801px) {
  .main-font {
    font-size: 12px !important;
  }
  #aboutDrop{
    --about-pos: 18.25vw;
  }
  #aboutParticles{
    --about-pos: 18.25vw;
  }
  #contactDrop{
    --contact-pos: 54.25vw;
  }
  #contactParticles{
    --contact-pos: 54.25vw;
  }
}