th, td {
  padding: 10px;
  border: 0px solid #FFF;
  border-radius: 15px;
  text-align: left;
}

#experienceCell {
  width: 40%;
}

table {
  border-collapse: collapse;
}

#emptyCell {
  border: none;
}

#navBarLink1 {
  background-color      :   #16a085;
  width             :   85%;
  height            :   70px;
}

#pageB {
  margin-top: -30px;
}

@-webkit-keyframes rightContentAnimation {
    0%,50% {left                 :   100px;
        opacity               :   0;}
    100% {left                   :   0px;
      opacity                 :   1;}
}

@keyframes rightContentAnimation {
    0%,50% {left                 :   100px;
        opacity               :   0;}
    100% {left                   :   0px;
      opacity                 :   1;}
}

@-webkit-keyframes leftContentAnimation {
    0%,50% {left                 :   -100px;
        opacity               :   0;}
    100% {left                   :   0px;
      opacity                 :   1;}
}

@keyframes leftContentAnimation {
    0%,50% {left                 :   -100px;
        opacity               :   0;}
    100% {left                   :   0px;
      opacity                 :   1;}
}

#darkLink:link, #darkLink:visited, #darkLink:hover,#darkLink:active {
  color: #2c3e50;
}

#emailButton:hover {
  background-color: #16a085;
  height: 60px;
  width: 60px;
  left: 82px;
}

#emailButton:active {
  background-color: #16a085;
  box-shadow          : -3px 3px #000;
  transform           : translate(-2%,-49%); 
  left: 82px;
}

#homeButton:hover {
  background-color: #16a085;
  height: 60px;
  width: 60px;
  left: 10px;
}

#homeButton:active {
  background-color      :   #16a085;
  box-shadow          : 3px 3px #000;
  transform           : translate(2%,-49%);  
  left: 10px;
}

#emailButton,#homeButton{
  background-color: #1abc9c;
}

/* Containers */
#mainContentContainer {
  width                       :   90%;

  margin-left                 :   auto;
  margin-right                :   auto;
  margin-top                  :   -20px;
  margin-bottom: 50px;

  position                    :   relative;
}

#mainContent1Container {
  width                       :   45%;

  margin-left                 :   3%;
  margin-top                  :   20px;

  position                    :   relative;

  float                       :   left;
  clear: left;

  display: block;

  -webkit-animation           :   leftContentAnimation 2s; /* Safari 4.0 - 8.0 */
  -webkit-animation-fill-mode :   forwards;  /* Safari 4.0 - 8.0 */
  animation                   :   leftContentAnimation 2s;
  animation-fill-mode         :   forwards;


}

#mainContent2Container {
  width                       :   45%;

  margin-right                :   3%;
  margin-top                  :   20px;

  position                    :   relative;

  float                       :   right;
  clear:right;

  display: block;

  -webkit-animation           :   rightContentAnimation 2s; /* Safari 4.0 - 8.0 */
  -webkit-animation-fill-mode :   forwards;  /* Safari 4.0 - 8.0 */
  animation                   :   rightContentAnimation 2s;
  animation-fill-mode         :   forwards;
}

#contentLeft {
  width                       :   90%;


  position                    :   relative;

  border                      :   5px solid #000;

  border-radius               :   10px;
  box-shadow                  :   9px 9px #000;

  margin-left                      :   auto;
  margin-right: auto;

  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #2c3e50;
  color: #ecf0f1;
}

#contentRight {
  width                       :   90%;
  height                      :   90%;

  position                    :   relative;

  border                      :   5px solid #000;

  border-radius               :   10px;
  box-shadow                  :   -9px 9px #000;

  margin-left                      :   auto;
  margin-right                      :   auto;
  margin-top: 30px;
  margin-bottom: 30px;

  background-color: #2c3e50;
  color: #ecf0f1;
}

#contentTitleText {
  margin-top: 10px;
  margin-left: 10px;
  font-family: helvetica;
  font-size: 32pt;
  font-weight: bold;
}

#subTitleText {
  font-family: helvetica;
  font-size: 16pt;
  font-weight: bold;
}

#contentSubTitleText {
  margin-left: 10px;

  font-family: helvetica;
  font-size: 16pt;
  font-weight: bold;
}

#contentText {
  margin-top : 10px;
  margin-left: 15px;
  margin-right: 15px;

  font-family: helvetica;
  font-size: 13pt;
}

#summaryContentText {
  margin-bottom: 10px;
  font-family: helvetica;
  font-size: 13pt;
}

#contentTSTop {
  width: 100%;
  height: 65px;

  border-bottom: 5px solid #000;

  background-color: #fff;

  overflow: hidden;

  position: relative;
}

#contentTWTop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #fff; 

  overflow: hidden;

  position: relative;
}

#twImg {
  width: 80%;
  position                    :   absolute;
  left                        :   50%;
  top                         :   50%;
  transform                   :   translate(-50%,-50%);
}

#contentP44Top {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #fff; 

  overflow: hidden;

  position: relative;
} 

#p44Img {
  width: 80%;
  position                    :   absolute;
  left                        :   50%;
  top                         :   50%;
  transform                   :   translate(-50%,-50%);
}

#contentBTTop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #fff; 

  overflow: hidden;

  position: relative;
} 

#btImg {
  width: 80%;
  position                    :   absolute;
  left                        :   50%;
  top                         :   50%;
  transform                   :   translate(-50%,-50%);
}

#tuImg {
  height: 350px;
  float:right;
}

#contentTUTop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;
  
  overflow:hidden;

  background-color: #fff;
} 

#ucImg {
  float: right;
}

#contentUCTop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #800000;

  overflow: hidden;
} 

#teImg {
  position                    :   absolute;
  left                        :   50%;
  top                         :   50%;
  transform                   :   translate(-50%,-50%);
}

#contentTETop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #0D99F7; 

  overflow: hidden;

  position: relative;
} 

#vrImg {
  height: 250px;
  position                    :   absolute;
  left                        :   50%;
  top                         :   50%;
  transform                   :   translate(-50%,-50%);
}

#contentVRTop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #808080; 

  overflow: hidden;

  position: relative;
}

#pqImg {
  height: 275px;
  position                    :   absolute;
  left                        :   0%;
  top                         :   50%;
  transform                   :   translate(0%,-50%);
}

#contentPQTop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #FFF; 

  overflow: hidden;

  position: relative;
} 

#weImg {
  position                    :   absolute;
  left                        :   50%;
  top                         :   50%;
  transform                   :   translate(-50%,-50%);
}

#contentWETop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #081527;

  overflow: hidden;

  position: relative;
} 

#rdImg {
  position                    :   absolute;
  left                        :   40%;
  top                         :   0%;
  transform                   :   translate(-40%,0%);
}

#contentRDTop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #569B53;

  overflow: hidden;

  position: relative;
} 

#contentLBTop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #FFF;

  overflow: hidden;

  position: relative;
} 

#lbImg {
  height: 250px;
  position                    :   absolute;
  left                        :   50%;
  top                         :   50%;
  transform                   :   translate(-50%,-50%);
}

#contentPITop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #FFF;

  overflow: hidden;

  position: relative;
} 

#piImg {
  height: 250px;
  position                    :   absolute;
  left                        :   50%;
  top                         :   50%;
  transform                   :   translate(-50%,-50%);
}

#d3Img {
  position                    :   absolute;
  left                        :   50%;
  top                         :   50%;
  transform                   :   translate(-50%,-50%);
}

#contentD3Top {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #000;

  overflow: hidden;

  position: relative;
} 

#smImg {
  position                    :   absolute;
  left                        :   50%;
  top                         :   50%;
  transform                   :   translate(-50%,-50%);
}

#contentSMTop {
  width                       :   100%;
  height                      :   250px;

  border-bottom               :   5px solid #000;

  background-color: #FFF;

  overflow: hidden;

  position: relative;
} 

#grade {
    float:right;
    display: inline-block;
    margin-right: 10px;
}

#class {
  max-height: 17px;
  overflow-y: hidden;

  width: 95%;
  padding: 10px;
  cursor: pointer;

  display: inline-block;
  -webkit-transition     :  max-height .5s;
  transition          :   max-height .5s;

  margin-bottom: 10px;

  font-size: 11pt;
  background-color : #ecf0f1;
  border-radius: 15px;
  color : #2c3e50; 
}

#clickableBT {
  border-radius: 4px;
  background-color: #3498db;
  border: none;
  color: #ecf0f1;
  text-align: center;
  font-size: 16pt;
  padding: 20px;
  width: 220px;
  transition: all 0.5s;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom:10px;
}

#clickableUC {
  border-radius: 4px;
  background-color: #800000;
  border: none;
  color: #ecf0f1;
  text-align: center;
  font-size: 16pt;
  padding: 20px;
  width: 220px;
  transition: all 0.5s;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom:10px;
}

#clickableTE {
  border-radius: 4px;
  background-color: #0D99F7;
  border: none;
  color: #ecf0f1;
  text-align: center;
  font-size: 16pt;
  padding: 20px;
  width: 220px;
  transition: all 0.5s;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom:10px;
}

#clickableVR {
  border-radius: 4px;
  background-color: #000;
  border: none;
  color: #ecf0f1;
  text-align: center;
  font-size: 16pt;
  padding: 20px;
  width: 220px;
  transition: all 0.5s;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom:10px;
}

#clickablePQ {
  border-radius: 4px;
  background-color: #000;
  border: none;
  color: #ecf0f1;
  text-align: center;
  font-size: 16pt;
  padding: 20px;
  width: 220px;
  transition: all 0.5s;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom:10px;
}

#clickableRD {
  border-radius: 4px;
  background-color: #569B53;
  border: none;
  color: #ecf0f1;
  text-align: center;
  font-size: 16pt;
  padding: 20px;
  width: 220px;
  transition: all 0.5s;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom:10px;
}

#clickablePI {
  border-radius: 4px;
  background-color: #FFF;
  border: none;
  color: #000;
  text-align: center;
  font-size: 16pt;
  padding: 20px;
  width: 220px;
  transition: all 0.5s;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom:10px;
}

#clickablePI span,#clickableRD span,#clickableVR span,#clickableTE span,#clickableUC span, #clickablePQ span, #clickableBT span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#clickablePI span:after ,#clickableRD span:after ,#clickableVR span:after ,#clickableTE span:after ,#clickableUC span:after, #clickablePQ span:after, #clickableBT span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

#clickablePI:hover span,#clickableRD:hover span, #clickableVR:hover span, #clickableTE:hover span,#clickableUC:hover span, #clickablePQ:hover span, #clickableBT:hover span {
  padding-right: 25px;
}

#clickablePI:hover span:after,#clickableRD:hover span:after, #clickableVR:hover span:after, #clickableTE:hover span:after,#clickableUC:hover span:after, #clickablePQ:hover span:after, #clickableBT:hover span:after {
  opacity: 1;
  right: 0;
}