body {
    font-size: 20px;
    /*text-shadow: 0 1px 0 black, 0 0 5px black;*/
    background-color: transparent;
    -webkit-font-smoothing: subpixel-antialiased;
    font-family: 'Titillium Web', sans-serif;
}

#objectSVG {  
  overflow: visible;
  width: 700px;
  height: 600px;
}

.centerContainer2 {
  pointer-events: none;
  position: absolute;
  height: 800px;
  width: 100%;
  margin: -400px 0 0 0;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  left: 50%;
  top: 50%;
  overflow: visible;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#svgContainer {
  text-align: center;
  overflow: visible;
  position: absolute;
  top: 170px;
  left: 50%;
  width: 700px;
  height: 600px;
  margin: 0 0 0 -350px;
  z-index: 8;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#contactMainCont {
  position: relative;
  /*border-top-style: solid;
  border-top-color: #4adfe6;
  border-top-width: 14px;*/

  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: transparent;
}

@-webkit-keyframes contactPhotoAni {
  from  { opacity: 0;} 
  to    { opacity: 1;}  
}

@keyframes contactPhotoAni {
  from  { opacity: 0;} 
  to    { opacity: 1;}  
}

#contactContainer {
  position: absolute;
  top: 162px;
  left: 50%;
  width: 700px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  pointer-events: all;  
  z-index: 10;
}

#contactForm {
  width: 700px;
  height: 600px;
}

#myFieldset {
  border: none;
  width: 700px;
  height: 600px;
  -webkit-user-select: all;
     -moz-user-select: all;
      -ms-user-select: all;
          user-select: all;
  z-index: 32;
}

#contactMeText {  
  color: grey;
  font-size: 54px;
  position: absolute;
  top: 40px;
  left: 50%;
  width: 310px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  text-align: center;
  /*border-radius: 25px;
  background-color: rgba(255,255,255,0.3);
  border-style: solid;
  border-width: 2px;
  border-color: #f8db49;*/
}

#myName {
  background-color: transparent;
  color: #ffffff;
  position: absolute;
  top: 10px;
  left: 90px;  
  font-size: 22px;
  height: 62px;
  width: 520px;
  border: none;
  opacity: 1;
  font-family: 'Titillium Web', sans-serif;
  /*animation: contactMyName 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;*/
}

@-webkit-keyframes contactMyName {
  from  { opacity: 0;} 
  to    { opacity: 1;}  
}

@keyframes contactMyName {
  from  { opacity: 0;} 
  to    { opacity: 1;}  
}

#myName:focus {
  outline: none;
}

#myEmail {
  background-color: transparent;
  color: #ffffff;
  position: absolute;
  top: 95px;
  left: 90px;  
  font-size: 22px;
  height: 62px;
  width: 520px;
  border: none;
  opacity: 1;
  font-family: 'Titillium Web', sans-serif;
  /*animation: contactEmail 2s;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;*/
}

#myEmail:focus {
  outline: none;
}


#myMessage {
  background-color: transparent;
  color: #ffffff;
  position: absolute;
  top: 181px;
  left: 90px;  
  font-size: 22px;
  height: 330px;
  width: 520px;
  border: none;
  opacity: 1;
  /*animation: contactMyMessage 2.5s;
  animation-delay: 3s;
  animation-fill-mode: forwards;*/
  resize: none;
  font-family: 'Titillium Web', sans-serif;
  padding: 1px;
}

#myMessage:focus {
  outline: none;
}

#mySubmitBottom {
  background-color: transparent;
  color: grey;
  position: absolute;
  top: 536px;
  left: 224px;  
  height: 70px;
  width: 252px;
  font-size: 28px;
  font-weight: 900;
  cursor:pointer;
  border: none;
  opacity: 1;
  font-family: 'Titillium Web', sans-serif;
  /*animation: contactMySubmitBottom 2s;
  animation-delay: 3.5s;
  animation-fill-mode: forwards;*/
}

@-webkit-keyframes contactMySubmitBottom {
  from  { opacity: 0;} 
  to    { opacity: 1;}  
}

@keyframes contactMySubmitBottom {
  from  { opacity: 0;} 
  to    { opacity: 1;}  
}

#mySubmitBottom:focus {
  outline: none;
}

.ease {
  width: 0px;
  height: 70px;
  background-color: transparent;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  position: absolute;
  top: 536px;
  left: 221px;  
  z-index: -10;
}

.submitRoll:hover .ease{
  width:258px;
  background-color:#6bf09d;
}

@-webkit-keyframes contactMailLinkAni {
  from  { opacity: 0;} 
  to    { opacity: 1;}  
}

@keyframes contactMailLinkAni {
  from  { opacity: 0;} 
  to    { opacity: 1;}  
}

@-webkit-keyframes growingLine {
  from  { opacity: 1;} 
  to    { opacity: 0.3;}  
}

@keyframes growingLine {
  from  { opacity: 1;} 
  to    { opacity: 0.3;}  
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 639px or less */
@media screen and (max-width: 639px) {
  #contactMeText {  
    font-size: 34px;
    top: 10px;
  }

  #objectSVG {  
    width: 100%;
    height: 400px;
    top: 0px;
  }

  .centerContainer2 {
    pointer-events: none;
    position: absolute;
    height: 520px;
    width: 100%;
    margin: -260px 0 0 0;
    top: 50%;
    overflow: visible;
  }

  #contactContainer {
    height: 520px;
    width: 100%;
    top: 0px;
  }

  #svgContainer { 
    width: 100%;
    margin: 0 0 0 -50%;
    height: 400px;
    top: 100px;
  }

  #contactForm {
    height: 520px;
    width: 100%;
  }

  #myFieldset {
    height: 520px;
    width: 100%;
    padding: 0;
  }

  #myName {
    top: 100px;
    left: 62px;  
    font-size: 20px;
    height: 40px;
    width: 328px;   
  }

  #myEmail {
    top: 156px;
    left: 62px;  
    font-size: 20px;
    height: 40px;
    width: 328px;
  }

  #myMessage {
    top: 214px;
    left: 62px;  
    font-size: 20px;
    height: 218px;
    width: 346px;
  }

  #mySubmitBottom {
    top: 451px;
    left: 153px;  
    font-size: 20px;
    height: 49px;
    width: 174px;
  }   

  .ease {
    height: 49px;
    top: 451px;
    left: 153px;  
  }

  .submitRoll:hover .ease{
    width:174px;
  }
}

/* for 479px or less */
@media screen and (max-width: 479px) {
  #contactMeText {  
    font-size: 24px;
    top: 10px;
    width: 200px;
  }

  #objectSVG {  
    width: 300px;
    height: 300px;
    top: 0px;
  }

  .centerContainer2 {
    pointer-events: none;
    position: absolute;
    height: 420px;
    width: 300px;
    margin: -210px 0 0 0px;
    left: 50%;
    top: 50%;
    overflow: visible;
  }

  #contactContainer {
    height: 420px;
    top: 0px;
    width: 300px;
  }

  #svgContainer {
    height: 400px;
    top: 80px;
    width: 300px;
  }

  #contactForm {
    height: 400px;
    width: 300px;
  }

  #myFieldset {
    height: 400px;
    width: 300px;
  }

  #myName {
    top: 80px;
    left: 16px;  
    font-size: 16px;
    height: 28px;
    width: 244px;    
  }

  #myEmail {
    top: 122px;
    left: 16px;  
    font-size: 16px;
    height: 28px;
    width: 244px;
  }

  #myMessage {
    top: 166px;
    left: 16px;  
    font-size: 16px;
    height: 160px;
    width: 258px;
  }

  #mySubmitBottom {
    top: 342px;
    left: 85px;  
    font-size: 16px;
    height: 38px;
    width: 130px;
  }  

  .ease {
    height: 38px;
    top: 342px;
    left: 681px;  
  }

  .submitRoll:hover .ease{
    width:130px;
  }
}