a:link    {color: #050017; text-decoration:none}
a:visited {color: #050017; text-decoration:none}
a:hover   {color: #6495ed; text-decoration:none}
a:active  {color: #050017; text-decoration:underline}

.up-buttons{ /* Menu buttons */
  margin: 4% 4% 2%;   
}
.image { /* Home Image with the h1 */
   position: relative; 
   width: 100%; 
}
h1 { 
  /* 
   position: absolute;  
   */
}

p { 
   position: relative; 
   font-size: 20px;
   margin:20% 0% 20% 20%;
  }

.face-image{
  margin:20% 0% 20% 20%;
  height: 340px;  /* was: 340px*/
}

.p-bottom{ /* For the: Copyright section*/
  font-size:12px;
  margin: 5px;
}
/* changes 7/5/16 
   if I use the default hover (I set it above) 
   the background color is blue so you cant see anything.
   In this way, i change the hover color to black
*/
.p-bottom a:hover{ color: black; text-decoration:underline;}

/* changes 2/4/16 */
/* mostly about the header and home*/
.row-intro{
 position: fixed; 
 right: 0;
 width: 100%;
 background: inherit;
 z-index: 10;  
 font-family: "Bauhaus 93", "Times New Roman";
 font-size: 20%;
 font-color: #050017;
}
.row-intro h3{
  background: #ffffff;
    background-clip: padding-box;
    border: 1px solid rgba(23,24,26,0.11);
    border-radius: 5px;
    overflow: hidden;
    position: absolute;
    right: 10px;
    top: 10px;
    -webkit-transition: border-color 0.5s ease, opacity 0.4s ease;
    transition: border-color 0.5s ease, opacity 0.4s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 40;
  
}

#Home h1{
  font-size: 500%;
  font-family: "Arial Black";
  top: 50% /* to be in the vertical middle */
}

#menu .btn{
  background: #fff;
  color: #050017; /* dark blue*/
  font-size: 400%;
  font-family: "Bauhaus 93", "Arial Black";
  margin-bottom: 4px;
  margin-right: 4px;
  border: 1px solid #d4d7d9;
}

#menu.btn:hover{ /* enlarging image on mouseover*/
        -moz-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -webkit-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -o-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -ms-transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        transform: scale(1.2) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
}
  


/** 04/04/16 
  * changes in the "About" section a.k.a "Learn More" 
  * How to make the button "learn more about me" 
**/

#wrapper {
  background: #6495ed;
  overflow: hidden;
  transition: max-height 300ms;
  max-height: 0; /* <---hide by default */
  left: 50%;
}
#wrapper.open {
  max-height: 500px; /* <---when open, allow content to expand to take up as much height as it needs, up to e.g. 100px */
}

.rowLM {
  font-size: 50%;
  margin-left: 10%;
  margin-bottom: 0%;
  position: relative;
  top: -40px
 
}
.rowLM p{
  margin: 0% 0% 20px 0%;
}
.rowLM li {
  font-size: 20px; 
}

/* end "Learn More" */


/* 5/4/16 */
/* Changes in contact section */

#Contact p{
  margin-top: 10%;
  margin-bottom: 5%;
}

/* 7/5/16 */
.contactButtons{
   background-color: orange; 
   padding: 3px;
   margin-bottom: 3px;
   border: 3px solid #6495ed; /* blue */
}


.contactButtons:hover{ /* enlarging image on mouseover*/
        -moz-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -webkit-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -o-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        -ms-transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
        transform: scale(1.5) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
}

#media{
  margin-left: 20%;
}

/* End contact section*/

/* Changes 11-09-16*/

/* About section: let's do sth better with the image, like flip it! */

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px; /* was 320px */
	height: auto; /*was 480px */
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

/* Changes 12-09-16 */
/* ========== Portfolio section ================ */

/* Image gallery: code priveded by --> http://www.the-art-of-web.com/css/infinite-photo-carousel/#vertical    */

#stage {
    margin: 2em auto 1em 50%; 
    height: 140px; 
    -webkit-perspective: 1200px; 
    -webkit-perspective-origin: 0 50%;
  }

  #rotator a {
    position: absolute;
    left: -81px;
  }
  #rotator a img {
    padding: 3px;
    border: 1px solid #94ed64; /* Light green */
    background: #6495ed; /*Light blue */
    -webkit-backface-visibility: hidden;
    
  }

  #rotator a:nth-of-type(1) img {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
  }
  #rotator a:nth-of-type(2) img {
    -webkit-transform: rotateY(-60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(3) img {
    -webkit-transform: rotateY(-30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(4) img {
    -webkit-transform: translateZ(300px);
    background: #94ed64; /*was: #000 */
  }
  #rotator a:nth-of-type(5) img {
    -webkit-transform: rotateY(30deg) translateZ(300px);
  }
  #rotator a:nth-of-type(6) img {
    -webkit-transform: rotateY(60deg) translateZ(300px);
  }
  #rotator a:nth-of-type(n+7) { display: none; }

/* a touch of animation*/
 @-webkit-keyframes rotator {
    from { -webkit-transform: rotateY(0deg);  }
    to   { -webkit-transform: rotateY(30deg); }
  }

  #rotator {
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 1s;
  }
  
  #rotator:hover {
    -webkit-animation-play-state: paused;
  }
 

/* =========================== */
/* code for freecodecamp front-end pforjects 
inspired by: http://www.the-art-of-web.com/css/3d-transforms/
*/
  @-webkit-keyframes spincube {
    from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16%      { -webkit-transform: rotateY(-90deg);                           }
    33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg);            }
    50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg);           }
    66%      { -webkit-transform: rotateY(-270deg) rotateX(90deg);           }
    83%      { -webkit-transform: rotateX(90deg);                            }
  }

  @keyframes spincube {
    from,to {
      -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16% {
      -moz-transform: rotateY(-90deg);
      -ms-transform: rotateY(-90deg);
      transform: rotateY(-90deg);
    }
    33% {
      -moz-transform: rotateY(-90deg) rotateZ(90deg);
      -ms-transform: rotateY(-90deg) rotateZ(90deg);
      transform: rotateY(-90deg) rotateZ(90deg);
    }
    50% {
      -moz-transform: rotateY(-180deg) rotateZ(90deg);
      -ms-transform: rotateY(-180deg) rotateZ(90deg);
      transform: rotateY(-180deg) rotateZ(90deg);
    }
    66% {
      -moz-transform: rotateY(-270deg) rotateX(90deg);
      -ms-transform: rotateY(-270deg) rotateX(90deg);
      transform: rotateY(-270deg) rotateX(90deg);
    }
    83% {
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      transform: rotateX(90deg);
    }
  }

  .cubespinner {
    -webkit-animation-name: spincube;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;

    animation-name: spincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 12s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform-origin: 60px 60px 0;
    -moz-transform-origin: 60px 60px 0;
    -ms-transform-origin: 60px 60px 0;
    transform-origin: 60px 60px 0;
    
  }

  .cubespinner div { 
    position: absolute; 
    width: 120px;
    height: 120px;
    border: 3px solid #94ed64;
    left: 50%
  }

  .cubespinner {
    margin-top: 25px;
    margin-bottom: auto;
    position: absolute;    
    left: 37%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

#Portofolio{
  height: 600px !important;
}

  .cubespinner .face1 {
    -webkit-transform: translateZ(60px);
    -moz-transform: translateZ(60px);
    -ms-transform: translateZ(60px);
    transform: translateZ(60px);
    -webkit-backface-visibility: hidden;
  }
  .cubespinner .face2 {
    -webkit-transform: rotateY(90deg) translateZ(60px);
    -moz-transform: rotateY(90deg) translateZ(60px);
    -ms-transform: rotateY(90deg) translateZ(60px);
    transform: rotateY(90deg) translateZ(60px);
    -webkit-backface-visibility: hidden;
  }
  .cubespinner .face3 {
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -webkit-backface-visibility: hidden;
  }
  .cubespinner .face4 {
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -webkit-backface-visibility: hidden;
  }
  .cubespinner .face5 {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -webkit-backface-visibility: hidden;
  }
  .cubespinner .face6 {
    -webkit-transform: rotateX(-90deg) translateZ(60px);
    -moz-transform: rotateX(-90deg) translateZ(60px);
    -ms-transform: rotateX(-90deg) translateZ(60px);
    transform: rotateX(-90deg) translateZ(60px);
    -webkit-backface-visibility: hidden;
  }