@charset "UTF-8";
/* CSS Document */

/************************************************************************************
Tablet size - IPad 2
*************************************************************************************/
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait)
{
html{
	min-width:1275px;
}
body{
	margin:0px;
}
#container {
	
}
@import url(http://fonts.googleapis.com/css?family=Quicksand);
#nav { width: 100%; height: 80px; background: rgba(255,136,16,0.8);
        background: -moz-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,136,16,0.8)), color-stop(100%, rgba(255,183,55,0.8)));
        background: -webkit-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -o-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: linear-gradient(to right, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8810', endColorstr='#ffb737', GradientType=1 );

        -webkit-box-shadow: inset -65px -40px 102px 0px #E87309;
        -moz-box-shadow: inset -65px -40px 102px 0px #E87309;
        box-shadow: inset -65px -40px 102px 0px #E87309;
; border-bottom: 3px solid #2D4E42;
    margin-top: 85px;
    left: 47px;
    font-family:'Slackey', cursive;
    z-index:100%;


 }
	#copyright{
      width:100%;
      height:2px;
      color:black;
      position:relative;
      bottom:0;
      top:1000px;
      font-size:40px;
      z-index:100%;
      text-align:right:
      right:0px;
    }
	
a { display: inline-block; padding: 20px; color: #111; 
text-decoration: none; text-shadow: 0 1px 1px rgba(255,255,255,.7); -webkit-transition: all .3s ease;
height:80px;
width:200px;
font-family:'Slackey';
}
ul { float: right; margin: 0 30px 0; font-family:'Slackey', cursive;}
li { position: relative; display: inline-block; list-style-type: none; font: 1em 'Slackey', cursive; 
 }
li:nth-child(odd) a { background: rgba(3,169,244,0.8);
        background: -moz-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(3,169,244,0.8)), color-stop(100%, rgba(0,188,212,0.8)));
        background: -webkit-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -o-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: linear-gradient(to right, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a9f4', endColorstr='#00bcd4', GradientType=1 );

        -webkit-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        -moz-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        border: 1px solid rgba(8, 110, 156, 0.54); }
li:nth-child(even) a { background: rgba(3,169,244,0.8);
        background: -moz-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(3,169,244,0.8)), color-stop(100%, rgba(0,188,212,0.8)));
        background: -webkit-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -o-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: linear-gradient(to right, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a9f4', endColorstr='#00bcd4', GradientType=1 );

        -webkit-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        -moz-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        border: 1px solid rgba(8, 110, 156, 0.54); }
li:nth-child(odd) a:hover { background: #58A589; }
li:nth-child(even) a:hover { background: #9FE0C8; }
li:nth-child(1) { top: -8px; -webkit-transform: skewY(-9deg); }
li:nth-child(2) { top: -8px; left: -4px; -webkit-transform: skewY(6.5deg); }
li:nth-child(3) { top: -7px; left: -7px; -webkit-transform: skewY(-11deg); }
li:nth-child(4) { top: -7px; left: -11px; -webkit-transform: skewY(9deg); }
li:after { position: absolute; left: 0; content: ""; width: 100%; height: 100%; background: #2D4E42; z-index: -1; }
li:nth-child(1):after { top: 18px; -webkit-transform: skewY(17deg); }
li:nth-child(2):after { top: 18px; -webkit-transform: skewY(-12deg); }
li:nth-child(3):after { top: 15px; -webkit-transform: skewY(18deg); }
li:nth-child(4):after { top: 15px; -webkit-transform: skewY(-15deg); }

/* Grain */
body { margin: 30px 0; font-family:'Slackey', cursive;
background: #657A72 url('data:image/png;base64,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'); }




#masterbody {
	position: relative;  left: 0px; right: 0px;
	width:96%;
	height:auto;
	margin:0 auto;
	background-Color:#FFF
}

#footer{
	position: relative; 
  top:0px; left: 0px; right: 0px;
	width:100%;
	height:400px;
	margin:0 auto;
  
	background-Color:blue;
}
#menu {
	width: 100%;
	height: 70px;
	font-family:'Slackey', cursive;
	text-align: center;
	border-radius: 30px;
	float:right;
	position:relative;
    
	
}
#menu a {
	text-decoration: none;
	color: black;
    font-size:20px;
    
}


#logo{
    display: inline-block;
	width:30%;
    height:30%;
	background: url("images/pxlogo.png") top left/contain no-repeat;
    z-index: 100;
    position: absolute;
    top: 15px;
    left: 47px;
}

@import url(http://fonts.googleapis.com/css?family=Montserrat+Alternates);

* {
    margin:0;
    padding:0;
    font:12pt Arial;
}

body1 {
  background-color:#34495e;
}

.field {
  display:flex;
  position:relative;
  margin:5em auto;
  width:20%;
  flex-direction:row;
   margin-top:-50px;
   margin-right:800px;
  box-shadow:
   1px 1px 0 rgb(22, 160, 133),
   2px 2px 0 rgb(22, 160, 133),
   3px 3px 0 rgb(22, 160, 133),
   4px 4px 0 rgb(22, 160, 133),
   5px 5px 0 rgb(22, 160, 133),
   6px 6px 0 rgb(22, 160, 133),
   7px 7px 0 rgb(22, 160, 133)
  ;
}

.field>input[type=text],
.field>button {
  display:block;
  font:1.2em 'Montserrat Alternates';
}

.field>input[type=text] {
  flex:1;
  padding:0.6em;
  border:0.2em solid rgb(26, 188, 156);
}

.field>button {
  padding:0.6em 0.8em;
  background-color:rgb(26, 188, 156);
  color:white;
  border:none;
}

               
               
}
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {

  font: 100%/1 'Slackey', cursive;
}




#slide1{
    position:relative;
    height:700px;
    width:100%;
    left:0px;
    right:0px;
    top:100px;  
    margin:0 auto;
    margin-top: 0 auto;
}

#line1{
   position: relative;  left: 0px; right: 0px;
	width:100%;
	height:600px;
	margin:0 auto;
	background-Color:white;
    Border-radius:13px;
    bottom:500px;
    z-index:100px;
    
}
#mario{
   position: absolute;  
   left: 60px; right: 0px;
	width:400px;
	height:280px;
	margin:0 auto;
	background-Color:red;
    
  top:200px;
    z-index:100px;
    background: url("images/mario.png")
}
#colors{
   position: absolute;  
   left: 900px; right: 0px;
	width:380px;
	height:280px;
	margin:0 auto;
	background-Color:red;
  background-repeat:no-repeat;
    
  top:200px;
    z-index:100px;
    background: url("images/colors.png")
}
#whatsnew{
   position: absolute;  
  left: 20px;
	width:380px;
	height:280px;
	margin:0 auto;
	background-Color:transparent;
  background-repeat:no-repeat;
    
  top:150px;
    z-index:100px;
    font-size: 60px;
	font-family:'Slackey', cursive;
	text-align: center;
    color:black
}
#line2{
   position: absolute;  
   left:200%;
	width:20%;
	height:800px;
	margin:8px;
	background-Color:transparent;
    Border-radius:13px;
    margin-bottom:80px;
   
    z-index:100px;
    
}
#line3{
   
	margin:0 auto;
	background-Color:red;
    Border-radius:13px;
    margin-bottom:0%;
    z-index:100px;
    position:relative;
	width:240px;
	height:135px;
	left:90px;
	bottom:0 auto;
  
    
}
/*
#socialmedia{
	position:relative;
	top:50px;
	right:180px;
	width:200px;
	height:30px;
    background-color:#FFF;
    font-family:'Open Sans', sans-serif;;
}
.fa-facebook-square {
	color:#3D5E96;	
    margin-top:0px;
    left:10px;
    font-size: 50px;
}

.fa-facebook-square:hover {
	color:#9A9EA6;	
}
.fa-twitter-square{
    color:#46ADE9;
    margin-top:0px;
    left:10px;
    font-size:20px;
}
.fa-twitter-square:hover{
    color:#46ADE9;
}
.fa-tumblr-square {
    color:#3D5873;
    
}
.fa-tumblr-square:hover{
    color:#46ADE9;
}
.fa-pinterest-square {
    Color:#BA3B39;
}
.fa-pinterest-square:hover{
    color:#46ADE9;
}
.fa-google-plus-official: {
    color:#46ADE9;
}
*/
#bodypara{
    position: relative; 
    height:100%;
    width:900px;
    left:0px;
    right:30px;
    font-size: 30px;
	font-family:'Slackey', cursive;
	text-align: left;
    color:black;  
  z-index:100%;
  margin-top:200px;
  margin-left:350px;
}
#paragraph{
    margin-top:200px;
    position: relative; 
    height:1500px;
    width:100%;
    right:30px;
    background-image: url("images/pixel1.jpg") ;
     background-color:transparent;  
    
}
.h1{
    color: black;
    font-size:13px;
    Bottom:40px;
}





html, body {
        width: 100%;
        height: 5px;
        margin: 0;
        padding: 0;
      }

      *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      [class*="wall-"] p {
        color: #fff;
        font: 17px/1.2 Arial;			
      }
      .box-logo {
        text-transform: uppercase;
        color: #fff;
        font: 40px/110px 'Roboto Condensed', sans-serif;
        font-weight: 700;
          letter-spacing: -2px;
      }

      #b1 [class*="wall-"] {
        background: rgba(255,136,16,0.8);
        background: -moz-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,136,16,0.8)), color-stop(100%, rgba(255,183,55,0.8)));
        background: -webkit-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -o-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: linear-gradient(to right, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8810', endColorstr='#ffb737', GradientType=1 );

        -webkit-box-shadow: inset -65px -40px 102px 0px #E87309;
        -moz-box-shadow: inset -65px -40px 102px 0px #E87309;
        box-shadow: inset -65px -40px 102px 0px #E87309;

        border: 1px solid rgb(247, 129, 18);			
      }
      #b2 [class*="wall-"] {
        background: rgba(3,169,244,0.8);
        background: -moz-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(3,169,244,0.8)), color-stop(100%, rgba(0,188,212,0.8)));
        background: -webkit-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -o-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: linear-gradient(to right, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a9f4', endColorstr='#00bcd4', GradientType=1 );

        -webkit-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        -moz-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        border: 1px solid rgba(8, 110, 156, 0.54);
      }
      #b3 [class*="wall-"] {
        background: rgba(255,190,0,0.8);
        background: -moz-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,190,0,0.8)), color-stop(100%, rgba(255,225,49,0.8)));
        background: -webkit-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: -o-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: linear-gradient(to right, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbe00', endColorstr='#ffe131', GradientType=1 );

        -webkit-box-shadow: inset 10px 10px 113px 0px rgba(255,190,0,1);
        -moz-box-shadow: inset 10px 10px 113px 0px rgba(255,190,0,1);
        box-shadow: inset 0 -70px 113px 0px rgba(255, 190, 0, 0.55);
        border: 1px solid rgba(255, 190, 0, 0.33);			
      }

      #b4 [class*="wall-"] {
        background: rgba(249,82,137,0.8);
        background: -moz-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(249,82,137,0.8)), color-stop(100%, rgba(255,135,176,0.8)));
        background: -webkit-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: -o-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: linear-gradient(to right, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f95289', endColorstr='#ff87b0', GradientType=1 );

        -webkit-box-shadow: inset 30px -50px 192px 0px rgba(233,30,99,1);
        -moz-box-shadow: inset 30px -50px 192px 0px rgba(233,30,99,1);
        box-shadow: inset 30px -50px 192px 0px rgba(233,30,99,1);

        border: 1px solid rgba(233, 30, 99, 0.68);			
      }

      #b5 [class*="wall-"] {
        background: rgba(215,224,34,1);
        background: -moz-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(215,224,34,1)), color-stop(100%, rgba(117,191,67,1)));
        background: -webkit-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: -o-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: -ms-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: linear-gradient(to right, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7e022', endColorstr='#75bf43', GradientType=1 );

        -webkit-box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
        -moz-box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
        box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
        /*border: 1px solid rgba(88, 136, 35, 0.88);*/
      }

      #b6 [class*="wall-"] {
        background: rgba(102,61,139,0.8);
        background: -moz-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(102,61,139,0.8)), color-stop(100%, rgba(147,111,207,0.8)));
        background: -webkit-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: -o-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: linear-gradient(to right, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#663d8b', endColorstr='#936fcf', GradientType=1 );


        -webkit-box-shadow: inset -70px 30px 122px 0px rgba(90,59,118,1);
        -moz-box-shadow: inset -70px 30px 122px 0px rgba(90,59,118,1);
        box-shadow: inset -70px 30px 122px 0px rgba(90,59,118,1);

        border: 1px solid #634A8E;
      }

      #b7 [class*="wall-"] {
        background: rgba(240,52,41,0.8);
        background: -moz-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,52,41,0.8)), color-stop(100%, rgba(252,92,68,0.8)));
        background: -webkit-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: -o-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: linear-gradient(to right, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f03429', endColorstr='#fc5c44', GradientType=1 );

        -webkit-box-shadow: inset -70px -40px 192px 0px rgba(207,55,34,1);
        -moz-box-shadow: inset -70px -40px 192px 0px rgba(207,55,34,1);
        box-shadow: inset -70px -40px 192px 0px rgba(207,55,34,1);

        border: 1px solid #E83426;
      }

      #b2 .wall-4,
      #b4 .wall-4,
      #b5 .wall-4 {
        animation: shadow 2s 1s ease-in both; 

      }

      @keyframes shadow {
        to { box-shadow: -40px 50px 120px 3px rgba(0, 0, 0, 0.52); }
      }

      .container-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        transform: scale(.5);
        justify-content: center;
        max-width: 3000px;
        width: 100%;

        float: left;
      }

      .box {	
        width: 270px;
        height: 270px;
        /*margin: 12% 0 7% 27%;*/
        margin: 0 auto;		
        transform-style: preserve-3d;


        /*animation: rotate 27s infinite ease-in;*/			
      }
        [class*="wall-"] {
          position: absolute;
          text-align: center;
          width: 210px;
          height: 210px;			
          padding-left: 20px;
        }		

          .wall-1 { transform: translateX(-105px) rotateY(90deg); }
          .wall-2 { transform: translateY(-105px) rotateX(90deg); }
          .wall-3 { transform: translateZ(-105px); }				
          .wall-4 { transform: translateY(105px) rotateX(90deg); }		
          .wall-5 { transform: translateZ(105px); }
          .wall-6 { transform: translateX(105px) rotateY(90deg); }


      @keyframes box1 {
        22% { 
          transform: translate(0px, 500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate(-50px, 5px) rotateX(120deg) rotateY(-35deg) rotateZ(180deg);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate(0px, 500px) rotateX(200deg) rotateY(-45deg) rotateZ(230deg);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate(20px, 230px) rotateX(275deg) rotateY(-35deg) rotateZ(300deg);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate(20px, 252px) rotateX(340deg) rotateY(-45deg) rotateZ(360deg);
          animation-timing-function: ease-out;
        }			
      }

      @keyframes box2 {
        22% { 
          transform: translateY(500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate(-250px, 50px) rotateX(320deg) rotateY(-55deg) rotateZ(10deg);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate(-290px, 500px) rotateX(325deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate(-267px, 420px) rotateX(355deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate(-267px, 500px) rotateX(340deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
      }		

      @keyframes box3 {
        22% { 
          transform: translateY(500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate(-100px, 50px) rotateX(320deg) rotateY(-55deg) rotateZ(10deg);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate(-170px, 500px) rotateX(325deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate(-110px, 490px) rotateX(355deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate(-110px, 500px) rotateX(340deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
      }

      @keyframes box4 {
        20% { 
          transform: translate3d(0px, 500px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) ;
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(-50px, 50px, 30px) rotateX(200deg) rotateY(-35deg) rotateZ(180deg) ;
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(-80px, 550px, 30px) rotateX(340deg) rotateY(-45deg) rotateZ(230deg) ;
          animation-timing-function: ease-out;
        }
        /*95%{ 
          transform: translate3d(20px, 700px, 30px) rotateX(275deg) rotateY(-35deg) rotateZ(300deg) scale3d(1.075,1.075,1.075);
          animation-timing-function: ease-in;
        }*/
        100%{ 
          transform: translate3d(-100px, 745px, 30px) rotateX(338deg) rotateY(-44deg) rotateZ(360deg) ;
          animation-timing-function: ease-out;
        }
      }

      @keyframes box5 {
        20% { 
          transform: translate3d(0px,500px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) ;
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(-300px, 250px, 0px) rotateX(-25deg) rotateY(-40deg) rotateZ(300deg) ;
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(-470px, 700px, 30px) rotateX(-20deg) rotateY(-45deg) rotateZ(390deg) ;
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate3d(-538px, 748px, 30px) rotateX(-20deg) rotateY(-43deg) rotateZ(358deg) ;
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate3d(-538px, 748px, 30px) rotateX(-20deg) rotateY(-44deg) rotateZ(360deg) ;
          animation-timing-function: ease-out;
        }
      }

      @keyframes box6 {
        20% { 
          transform: translate3d(20px,320px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) scale3d(.99,.99,.99);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(120px, 0px, 0px) rotateX(270deg) rotateY(270deg) rotateZ(10deg) scale3d(.95,.95,.95);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(150px, 320px, 30px) rotateX(300deg) rotateY(300deg) rotateZ(25deg) scale3d(.945,.945,.945);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate3d(220px, 310px, 30px) rotateX(370deg) rotateY(300deg) rotateZ(25deg) scale3d(.9,.9,.9);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate3d(220px, 320px, 30px) rotateX(340deg) rotateY(320deg) rotateZ(0deg) scale3d(.9,.9,.9);
          animation-timing-function: ease-out;
        }
      }

      @keyframes box7 {
        20% { 
          transform: translate3d(0px,320px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) scale3d(.99,.99,.99);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(-40deg) rotateZ(300deg) scale3d(.985,.985,.985);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(350px, 320px, 30px) rotateX(20deg) rotateY(-50deg) rotateZ(390deg) scale3d(.975,.975,.975);
          animation-timing-function: ease-out;
        }
        /*95%{ 
          transform: translate3d(520px, 310px, 30px) rotateX(20deg) rotateY(-60deg) rotateZ(390deg) scale3d(.95,.95,.95);
          animation-timing-function: ease-in;
        }*/
        100%{ 
          transform: translate3d(520px, 320px, 30px) rotateX(-20deg) rotateY(-50deg) rotateZ(360deg) scale3d(.95,.95,.95);
          animation-timing-function: ease-out;
        }
      }

      #b1 { 
        transform: translateY(0px) rotateX(-20deg) rotateY(-40deg) rotateZ(20deg);
        animation: box1 2s .25s cubic-bezier(.69,.59,.57,2) both; 
      }

      #b2 { 
        transform: translateY(0px) rotateX(35deg) rotateY(-40deg) rotateZ(30deg);
        animation: box2 2s cubic-bezier(.69,.59,.57,2) both; 
      }

      #b3 { 
        transform: translateY(0px) rotateX(20deg) rotateY(-35deg) rotateZ(0deg);
        animation: box3 2s .05s cubic-bezier(.69,.59,.57,2)  both;
      }

      #b4 { 
        transform: translateY(0px) rotateX(10deg) rotateY(-45deg) rotateZ(10deg);
        animation: box4 2s .15s cubic-bezier(.69,.59,.57,2.5)  both;
      }

      #b5 { 
        transform: translateY(0px) rotateX(25deg) rotateY(-50deg) rotateZ(-10deg);
        animation: box5 2.4s .15s cubic-bezier(.69,.59,.57,2.5)  both;
      }

      #b6 { 
        transform: translateY(0px) rotateX(40deg) rotateY(-25deg) rotateZ(20deg);
        animation: box6 5s .05s cubic-bezier(.69,.59,.57,1.7) both; 
      }

      #b7 { 
        transform: translateY(0px) rotateX(40deg) rotateY(-45deg) rotateZ(5deg);
        animation: box7 2.5s cubic-bezier(.72,.59,.57,2) both; 
      }

		.wrap {
			width: 100%;
min-height: 700px;
			height: 100%;
    			background: rgba(227,234,240,1);
			background: -moz-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(227,234,240,1)), color-stop(100%, rgba(206,223,237,1)));
			background: -webkit-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: -o-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: -ms-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: linear-gradient(to bottom, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3eaf0', endColorstr='#cedfed', GradientType=0 );
		}
    
    .wrap-inner {
      width:700px;
      margin: 0 auto;
    }

      .info {
        display: block;
        position: absolute;
        z-index: 10;		    
        padding: 15px;
        width: 350px;
          color: #777;
          font-size: 27px;
          font-family:  'Roboto', sans-serif;
          font-weight: 300;
          opacity: 0;
          transition: all .52s ease-in-out;
      }

      #b1 .info,
      #b3 .info,
      #b4 .info {
          top: 130px;
          left: 0px;		    

        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(.95);
      }

      #b2 .info,
      #b5 .info {
          top: 130px;
          left: 0px;		    
        text-align: right;
        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(.95);
      }

      #b1:hover > .info,
      #b3:hover > .info,
      #b4:hover > .info {
        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(1);
        opacity: 1;
        left: 300px;
        top: 0;
      }

      #b2:hover > .info {
        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(1);
        opacity: 1;
        top: 450px;
        left: -515px;
      }

      #b5:hover > .info {
          opacity: 1;
          top: 450px;
          left: -570px;
      }

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

/* div styles for presentation */
div
{
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
   height:100px;
    width:100%;
}
body
{
  margin-top: 4em;
  background-color: #ecf0f1;
  height:100px;
  width:100%;
}

/* General rule */
.button-big
{
  font-size: 2.5em;
  width: 100%;
  text-align:center;
  padding: 0.2em 0em 0.2em 0em;
}

/* Twitter class and animation */
.twitter
{
  color: #0096ff;
  border: 1px solid #0096ff;
}

.twitter:hover
{
  animation: twitterAnim 0.4s normal forwards linear;
  -webkit-animation: twitterAnim 0.4s normal forwards linear;
}
@keyframes twitterAnim {
  50% {
    background-color: #0096ff;
  }
  100% {
    background-color: #0096ff;
    border: 1px solid #0096ff;
    color: #fff;
  }
}

@-webkit-keyframes twitterAnim {
  50% {
    background-color: #0096ff;
  }
  100% {
    background-color: #0096ff;
    border: 1px solid #0096ff;
    color: #fff;
  }
}

/* Facebook class and animation */
.facebook
{
  color: #3B5998;
  border: 1px solid #3B5998;
}

.facebook:hover
{
  animation: facebookAnim 0.4s normal forwards linear;
  -webkit-animation: facebookAnim 0.4s normal forwards linear;
}

@keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}

@-webkit-keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}

/* Google class and animation */
.gplus
{
  color: #dd4b39;
  border: 1px solid #dd4b39;
}

.gplus:hover
{
  animation: gplusAnim 0.4s normal forwards linear;
  -webkit-animation: gplusAnim 0.4s normal forwards linear;
}

@keyframes gplusAnim {
  50% {
    background-color: #dd4b39;
  }
  100% {
    background-color: #dd4b39;
    border: 1px solid #dd4b39;
    color: #fff;
  }
 }
  
@-webkit-keyframes gplusAnim {
  50% {
    background-color: #dd4b39;
  }
  100% {
    background-color: #dd4b39;
    border: 1px solid #dd4b39;
    color: #fff;
  }
}

/* Dribble class and animation */
.dribbble
{
  color: #ea4c89;
  border: 1px solid #ea4c89;
}

.dribbble:hover
{
  animation: dribbbleAnim 0.4s normal forwards linear;
  -webkit-animation: dribbbleAnim 0.4s normal forwards linear;
}

@-webkit-keyframes dribbbleAnim {
  50% {
    background-color: #ea4c89;
  }
  100% {
    background-color: #ea4c89;
    border: 1px solid #ea4c89;
    color: #fff;
  }
}
  
@keyframes dribbbleAnim {
  50% {
    background-color: #ea4c89;
  }
  100% {
    background-color: #ea4c89;
    border: 1px solid #ea4c89;
    color: #fff;
  }
}
/* Yahoo class and animation */
.yahooo
{
  color: #720e9e;
  border: 1px solid #720e9e;
}

.yahooo:hover
{
  animation: yahoooAnim 0.4s normal forwards linear;
  -webkit-animation: yahoooAnim 0.4s normal forwards linear;
}

@-webkit-keyframes yahoooAnim {
  50% {
    background-color: #720e9e;
  }
  100% {
    background-color: #720e9e;
    border: 1px solid #720e9e;
    color: #fff;
  }
}
@keyframes yahoooAnim {
  50% {
    background-color: #720e9e;
  }
  100% {
    background-color: #720e9e;
    border: 1px solid #720e9e;
    color: #fff;
  }
}

/* Links */
a
{
  color: black;
  text-decoration: none;
  text-align:center;
  font-kerning:100px;
  font-size:40;
}/************************************************************************************
Phone size - IPhone
*************************************************************************************/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
{
/* add your css styles here */
}html{
	min-width:1275px;
}
body{
	margin:0px;
}
#container {
	
}
@import url(http://fonts.googleapis.com/css?family=Quicksand);
#nav { width: 100%; height: 80px; background: rgba(255,136,16,0.8);
        background: -moz-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,136,16,0.8)), color-stop(100%, rgba(255,183,55,0.8)));
        background: -webkit-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -o-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: linear-gradient(to right, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8810', endColorstr='#ffb737', GradientType=1 );

        -webkit-box-shadow: inset -65px -40px 102px 0px #E87309;
        -moz-box-shadow: inset -65px -40px 102px 0px #E87309;
        box-shadow: inset -65px -40px 102px 0px #E87309;
; border-bottom: 3px solid #2D4E42;
    margin-top: 85px;
    left: 47px;
    font-family:'Slackey', cursive;
    z-index:100%;


 }
a { display: inline-block; padding: 20px; color: #111; 
text-decoration: none; text-shadow: 0 1px 1px rgba(255,255,255,.7); -webkit-transition: all .3s ease;
height:80px;
width:200px;
font-family:'Slackey';
}
ul { float: right; margin: 0 30px 0; font-family:'Slackey', cursive;}
li { position: relative; display: inline-block; list-style-type: none; font: 1em 'Slackey', cursive; 
 }
li:nth-child(odd) a { background: rgba(3,169,244,0.8);
        background: -moz-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(3,169,244,0.8)), color-stop(100%, rgba(0,188,212,0.8)));
        background: -webkit-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -o-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: linear-gradient(to right, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a9f4', endColorstr='#00bcd4', GradientType=1 );

        -webkit-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        -moz-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        border: 1px solid rgba(8, 110, 156, 0.54); }
li:nth-child(even) a { background: rgba(3,169,244,0.8);
        background: -moz-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(3,169,244,0.8)), color-stop(100%, rgba(0,188,212,0.8)));
        background: -webkit-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -o-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: linear-gradient(to right, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a9f4', endColorstr='#00bcd4', GradientType=1 );

        -webkit-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        -moz-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        border: 1px solid rgba(8, 110, 156, 0.54); }
li:nth-child(odd) a:hover { background: #58A589; }
li:nth-child(even) a:hover { background: #9FE0C8; }
li:nth-child(1) { top: -8px; -webkit-transform: skewY(-9deg); }
li:nth-child(2) { top: -8px; left: -4px; -webkit-transform: skewY(6.5deg); }
li:nth-child(3) { top: -7px; left: -7px; -webkit-transform: skewY(-11deg); }
li:nth-child(4) { top: -7px; left: -11px; -webkit-transform: skewY(9deg); }
li:after { position: absolute; left: 0; content: ""; width: 100%; height: 100%; background: #2D4E42; z-index: -1; }
li:nth-child(1):after { top: 18px; -webkit-transform: skewY(17deg); }
li:nth-child(2):after { top: 18px; -webkit-transform: skewY(-12deg); }
li:nth-child(3):after { top: 15px; -webkit-transform: skewY(18deg); }
li:nth-child(4):after { top: 15px; -webkit-transform: skewY(-15deg); }

/* Grain */
body { margin: 30px 0; font-family:'Slackey', cursive;
background: #657A72 url('data:image/png;base64,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'); }




#masterbody {
	position: relative;  left: 0px; right: 0px;
	width:96%;
	height:auto;
	margin:0 auto;
	background-Color:#FFF
}

#footer{
	position: relative; 
  top:0px; left: 0px; right: 0px;
	width:100%;
	height:400px;
	margin:0 auto;
  
	background-Color:blue;
}
#menu {
	width: 100%;
	height: 70px;
	font-family:'Slackey', cursive;
	text-align: center;
	border-radius: 30px;
	float:right;
	position:relative;
    
	
}
#menu a {
	text-decoration: none;
	color: black;
    font-size:20px;
    
}


#logo{
    display: inline-block;
	width:30%;
    height:30%;
	background: url("images/pxlogo.png") top left/contain no-repeat;
    z-index: 100;
    position: absolute;
    top: 15px;
    left: 47px;
}

@import url(http://fonts.googleapis.com/css?family=Montserrat+Alternates);

* {
    margin:0;
    padding:0;
    font:12pt Arial;
}

body1 {
  background-color:#34495e;
}

.field {
  display:flex;
  position:relative;
  margin:5em auto;
  width:20%;
  flex-direction:row;
   margin-top:-50px;
   margin-right:800px;
  box-shadow:
   1px 1px 0 rgb(22, 160, 133),
   2px 2px 0 rgb(22, 160, 133),
   3px 3px 0 rgb(22, 160, 133),
   4px 4px 0 rgb(22, 160, 133),
   5px 5px 0 rgb(22, 160, 133),
   6px 6px 0 rgb(22, 160, 133),
   7px 7px 0 rgb(22, 160, 133)
  ;
}

.field>input[type=text],
.field>button {
  display:block;
  font:1.2em 'Montserrat Alternates';
}

.field>input[type=text] {
  flex:1;
  padding:0.6em;
  border:0.2em solid rgb(26, 188, 156);
}

.field>button {
  padding:0.6em 0.8em;
  background-color:rgb(26, 188, 156);
  color:white;
  border:none;
}

               
               
}
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {

  font: 100%/1 'Slackey', cursive;
}




#slide1{
    position:relative;
    height:700px;
    width:100%;
    left:0px;
    right:0px;
    top:100px;  
    margin:0 auto;
    margin-top: 0 auto;
}

#line1{
   position: relative;  left: 0px; right: 0px;
	width:100%;
	height:600px;
	margin:0 auto;
	background-Color:white;
    Border-radius:13px;
    bottom:500px;
    z-index:100px;
    
}
#mario{
   position: absolute;  
   left: 60px; right: 0px;
	width:400px;
	height:280px;
	margin:0 auto;
	background-Color:red;
    
  top:200px;
    z-index:100px;
    background: url("images/mario.png")
}
#colors{
   position: absolute;  
   left: 900px; right: 0px;
	width:380px;
	height:280px;
	margin:0 auto;
	background-Color:red;
  background-repeat:no-repeat;
    
  top:200px;
    z-index:100px;
    background: url("images/colors.png")
}
#whatsnew{
   position: absolute;  
  left: 20px;
	width:380px;
	height:280px;
	margin:0 auto;
	background-Color:transparent;
  background-repeat:no-repeat;
    
  top:150px;
    z-index:100px;
    font-size: 60px;
	font-family:'Slackey', cursive;
	text-align: center;
    color:black
}
#line2{
   position: absolute;  
   left:200%;
	width:20%;
	height:800px;
	margin:8px;
	background-Color:transparent;
    Border-radius:13px;
    margin-bottom:80px;
   
    z-index:100px;
    
}
#line3{
   
	margin:0 auto;
	background-Color:red;
    Border-radius:13px;
    margin-bottom:0%;
    z-index:100px;
    position:relative;
	width:240px;
	height:135px;
	left:90px;
	bottom:0 auto;
  
    
}
/*
#socialmedia{
	position:relative;
	top:50px;
	right:180px;
	width:200px;
	height:30px;
    background-color:#FFF;
    font-family:'Open Sans', sans-serif;;
}
.fa-facebook-square {
	color:#3D5E96;	
    margin-top:0px;
    left:10px;
    font-size: 50px;
}

.fa-facebook-square:hover {
	color:#9A9EA6;	
}
.fa-twitter-square{
    color:#46ADE9;
    margin-top:0px;
    left:10px;
    font-size:20px;
}
.fa-twitter-square:hover{
    color:#46ADE9;
}
.fa-tumblr-square {
    color:#3D5873;
    
}
.fa-tumblr-square:hover{
    color:#46ADE9;
}
.fa-pinterest-square {
    Color:#BA3B39;
}
.fa-pinterest-square:hover{
    color:#46ADE9;
}
.fa-google-plus-official: {
    color:#46ADE9;
}
*/
#bodypara{
    position: relative; 
    height:100%;
    width:900px;
    left:0px;
    right:30px;
    font-size: 30px;
	font-family:'Slackey', cursive;
	text-align: left;
    color:black;  
  z-index:100%;
  margin-top:200px;
  margin-left:350px;
}
#paragraph{
    margin-top:200px;
    position: relative; 
    height:1500px;
    width:100%;
    right:30px;
    background-image: url("images/pixel1.jpg") ;
     background-color:transparent;  
    
}
.h1{
    color: black;
    font-size:13px;
    Bottom:40px;
}





html, body {
        width: 100%;
        height: 5px;
        margin: 0;
        padding: 0;
      }

      *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      [class*="wall-"] p {
        color: #fff;
        font: 17px/1.2 Arial;			
      }
      .box-logo {
        text-transform: uppercase;
        color: #fff;
        font: 40px/110px 'Roboto Condensed', sans-serif;
        font-weight: 700;
          letter-spacing: -2px;
      }

      #b1 [class*="wall-"] {
        background: rgba(255,136,16,0.8);
        background: -moz-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,136,16,0.8)), color-stop(100%, rgba(255,183,55,0.8)));
        background: -webkit-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -o-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        background: linear-gradient(to right, rgba(255,136,16,0.8) 0%, rgba(255,183,55,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8810', endColorstr='#ffb737', GradientType=1 );

        -webkit-box-shadow: inset -65px -40px 102px 0px #E87309;
        -moz-box-shadow: inset -65px -40px 102px 0px #E87309;
        box-shadow: inset -65px -40px 102px 0px #E87309;

        border: 1px solid rgb(247, 129, 18);			
      }
      #b2 [class*="wall-"] {
        background: rgba(3,169,244,0.8);
        background: -moz-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(3,169,244,0.8)), color-stop(100%, rgba(0,188,212,0.8)));
        background: -webkit-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -o-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        background: linear-gradient(to right, rgba(3,169,244,0.8) 0%, rgba(0,188,212,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03a9f4', endColorstr='#00bcd4', GradientType=1 );

        -webkit-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        -moz-box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        box-shadow: inset 35px -30px 102px 0px rgba(21,101,192,0.71);
        border: 1px solid rgba(8, 110, 156, 0.54);
      }
      #b3 [class*="wall-"] {
        background: rgba(255,190,0,0.8);
        background: -moz-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,190,0,0.8)), color-stop(100%, rgba(255,225,49,0.8)));
        background: -webkit-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: -o-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        background: linear-gradient(to right, rgba(255,190,0,0.8) 0%, rgba(255,225,49,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbe00', endColorstr='#ffe131', GradientType=1 );

        -webkit-box-shadow: inset 10px 10px 113px 0px rgba(255,190,0,1);
        -moz-box-shadow: inset 10px 10px 113px 0px rgba(255,190,0,1);
        box-shadow: inset 0 -70px 113px 0px rgba(255, 190, 0, 0.55);
        border: 1px solid rgba(255, 190, 0, 0.33);			
      }

      #b4 [class*="wall-"] {
        background: rgba(249,82,137,0.8);
        background: -moz-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(249,82,137,0.8)), color-stop(100%, rgba(255,135,176,0.8)));
        background: -webkit-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: -o-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        background: linear-gradient(to right, rgba(249,82,137,0.8) 0%, rgba(255,135,176,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f95289', endColorstr='#ff87b0', GradientType=1 );

        -webkit-box-shadow: inset 30px -50px 192px 0px rgba(233,30,99,1);
        -moz-box-shadow: inset 30px -50px 192px 0px rgba(233,30,99,1);
        box-shadow: inset 30px -50px 192px 0px rgba(233,30,99,1);

        border: 1px solid rgba(233, 30, 99, 0.68);			
      }

      #b5 [class*="wall-"] {
        background: rgba(215,224,34,1);
        background: -moz-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(215,224,34,1)), color-stop(100%, rgba(117,191,67,1)));
        background: -webkit-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: -o-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: -ms-linear-gradient(left, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        background: linear-gradient(to right, rgba(215,224,34,1) 0%, rgba(117,191,67,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7e022', endColorstr='#75bf43', GradientType=1 );

        -webkit-box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
        -moz-box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
        box-shadow: inset 20px -20px 100px rgba(117, 191, 67, 0.8);
        /*border: 1px solid rgba(88, 136, 35, 0.88);*/
      }

      #b6 [class*="wall-"] {
        background: rgba(102,61,139,0.8);
        background: -moz-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(102,61,139,0.8)), color-stop(100%, rgba(147,111,207,0.8)));
        background: -webkit-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: -o-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        background: linear-gradient(to right, rgba(102,61,139,0.8) 0%, rgba(147,111,207,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#663d8b', endColorstr='#936fcf', GradientType=1 );


        -webkit-box-shadow: inset -70px 30px 122px 0px rgba(90,59,118,1);
        -moz-box-shadow: inset -70px 30px 122px 0px rgba(90,59,118,1);
        box-shadow: inset -70px 30px 122px 0px rgba(90,59,118,1);

        border: 1px solid #634A8E;
      }

      #b7 [class*="wall-"] {
        background: rgba(240,52,41,0.8);
        background: -moz-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,52,41,0.8)), color-stop(100%, rgba(252,92,68,0.8)));
        background: -webkit-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: -o-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: -ms-linear-gradient(left, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        background: linear-gradient(to right, rgba(240,52,41,0.8) 0%, rgba(252,92,68,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f03429', endColorstr='#fc5c44', GradientType=1 );

        -webkit-box-shadow: inset -70px -40px 192px 0px rgba(207,55,34,1);
        -moz-box-shadow: inset -70px -40px 192px 0px rgba(207,55,34,1);
        box-shadow: inset -70px -40px 192px 0px rgba(207,55,34,1);

        border: 1px solid #E83426;
      }

      #b2 .wall-4,
      #b4 .wall-4,
      #b5 .wall-4 {
        animation: shadow 2s 1s ease-in both; 

      }

      @keyframes shadow {
        to { box-shadow: -40px 50px 120px 3px rgba(0, 0, 0, 0.52); }
      }

      .container-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        transform: scale(.5);
        justify-content: center;
        max-width: 3000px;
        width: 100%;

        float: left;
      }

      .box {	
        width: 270px;
        height: 270px;
        /*margin: 12% 0 7% 27%;*/
        margin: 0 auto;		
        transform-style: preserve-3d;


        /*animation: rotate 27s infinite ease-in;*/			
      }
        [class*="wall-"] {
          position: absolute;
          text-align: center;
          width: 210px;
          height: 210px;			
          padding-left: 20px;
        }		

          .wall-1 { transform: translateX(-105px) rotateY(90deg); }
          .wall-2 { transform: translateY(-105px) rotateX(90deg); }
          .wall-3 { transform: translateZ(-105px); }				
          .wall-4 { transform: translateY(105px) rotateX(90deg); }		
          .wall-5 { transform: translateZ(105px); }
          .wall-6 { transform: translateX(105px) rotateY(90deg); }


      @keyframes box1 {
        22% { 
          transform: translate(0px, 500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate(-50px, 5px) rotateX(120deg) rotateY(-35deg) rotateZ(180deg);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate(0px, 500px) rotateX(200deg) rotateY(-45deg) rotateZ(230deg);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate(20px, 230px) rotateX(275deg) rotateY(-35deg) rotateZ(300deg);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate(20px, 252px) rotateX(340deg) rotateY(-45deg) rotateZ(360deg);
          animation-timing-function: ease-out;
        }			
      }

      @keyframes box2 {
        22% { 
          transform: translateY(500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate(-250px, 50px) rotateX(320deg) rotateY(-55deg) rotateZ(10deg);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate(-290px, 500px) rotateX(325deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate(-267px, 420px) rotateX(355deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate(-267px, 500px) rotateX(340deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
      }		

      @keyframes box3 {
        22% { 
          transform: translateY(500px) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate(-100px, 50px) rotateX(320deg) rotateY(-55deg) rotateZ(10deg);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate(-170px, 500px) rotateX(325deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate(-110px, 490px) rotateX(355deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate(-110px, 500px) rotateX(340deg) rotateY(-45deg) rotateZ(0deg);
          animation-timing-function: ease-out;
        }
      }

      @keyframes box4 {
        20% { 
          transform: translate3d(0px, 500px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) ;
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(-50px, 50px, 30px) rotateX(200deg) rotateY(-35deg) rotateZ(180deg) ;
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(-80px, 550px, 30px) rotateX(340deg) rotateY(-45deg) rotateZ(230deg) ;
          animation-timing-function: ease-out;
        }
        /*95%{ 
          transform: translate3d(20px, 700px, 30px) rotateX(275deg) rotateY(-35deg) rotateZ(300deg) scale3d(1.075,1.075,1.075);
          animation-timing-function: ease-in;
        }*/
        100%{ 
          transform: translate3d(-100px, 745px, 30px) rotateX(338deg) rotateY(-44deg) rotateZ(360deg) ;
          animation-timing-function: ease-out;
        }
      }

      @keyframes box5 {
        20% { 
          transform: translate3d(0px,500px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) ;
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(-300px, 250px, 0px) rotateX(-25deg) rotateY(-40deg) rotateZ(300deg) ;
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(-470px, 700px, 30px) rotateX(-20deg) rotateY(-45deg) rotateZ(390deg) ;
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate3d(-538px, 748px, 30px) rotateX(-20deg) rotateY(-43deg) rotateZ(358deg) ;
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate3d(-538px, 748px, 30px) rotateX(-20deg) rotateY(-44deg) rotateZ(360deg) ;
          animation-timing-function: ease-out;
        }
      }

      @keyframes box6 {
        20% { 
          transform: translate3d(20px,320px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) scale3d(.99,.99,.99);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(120px, 0px, 0px) rotateX(270deg) rotateY(270deg) rotateZ(10deg) scale3d(.95,.95,.95);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(150px, 320px, 30px) rotateX(300deg) rotateY(300deg) rotateZ(25deg) scale3d(.945,.945,.945);
          animation-timing-function: ease-out;
        }
        95%{ 
          transform: translate3d(220px, 310px, 30px) rotateX(370deg) rotateY(300deg) rotateZ(25deg) scale3d(.9,.9,.9);
          animation-timing-function: ease-in;
        }
        100%{ 
          transform: translate3d(220px, 320px, 30px) rotateX(340deg) rotateY(320deg) rotateZ(0deg) scale3d(.9,.9,.9);
          animation-timing-function: ease-out;
        }
      }

      @keyframes box7 {
        20% { 
          transform: translate3d(0px,320px,0) rotateX(-20deg) rotateY(-30deg) rotateZ(20deg) scale3d(.99,.99,.99);
          animation-timing-function: ease-out;
        }
        75% { 
          transform: translate3d(100px, 0px, 0px) rotateX(0deg) rotateY(-40deg) rotateZ(300deg) scale3d(.985,.985,.985);
          animation-timing-function: ease-in;
        }
        90%{ 
          transform: translate3d(350px, 320px, 30px) rotateX(20deg) rotateY(-50deg) rotateZ(390deg) scale3d(.975,.975,.975);
          animation-timing-function: ease-out;
        }
        /*95%{ 
          transform: translate3d(520px, 310px, 30px) rotateX(20deg) rotateY(-60deg) rotateZ(390deg) scale3d(.95,.95,.95);
          animation-timing-function: ease-in;
        }*/
        100%{ 
          transform: translate3d(520px, 320px, 30px) rotateX(-20deg) rotateY(-50deg) rotateZ(360deg) scale3d(.95,.95,.95);
          animation-timing-function: ease-out;
        }
      }

      #b1 { 
        transform: translateY(0px) rotateX(-20deg) rotateY(-40deg) rotateZ(20deg);
        animation: box1 2s .25s cubic-bezier(.69,.59,.57,2) both; 
      }

      #b2 { 
        transform: translateY(0px) rotateX(35deg) rotateY(-40deg) rotateZ(30deg);
        animation: box2 2s cubic-bezier(.69,.59,.57,2) both; 
      }

      #b3 { 
        transform: translateY(0px) rotateX(20deg) rotateY(-35deg) rotateZ(0deg);
        animation: box3 2s .05s cubic-bezier(.69,.59,.57,2)  both;
      }

      #b4 { 
        transform: translateY(0px) rotateX(10deg) rotateY(-45deg) rotateZ(10deg);
        animation: box4 2s .15s cubic-bezier(.69,.59,.57,2.5)  both;
      }

      #b5 { 
        transform: translateY(0px) rotateX(25deg) rotateY(-50deg) rotateZ(-10deg);
        animation: box5 2.4s .15s cubic-bezier(.69,.59,.57,2.5)  both;
      }

      #b6 { 
        transform: translateY(0px) rotateX(40deg) rotateY(-25deg) rotateZ(20deg);
        animation: box6 5s .05s cubic-bezier(.69,.59,.57,1.7) both; 
      }

      #b7 { 
        transform: translateY(0px) rotateX(40deg) rotateY(-45deg) rotateZ(5deg);
        animation: box7 2.5s cubic-bezier(.72,.59,.57,2) both; 
      }

		.wrap {
			width: 100%;
min-height: 700px;
			height: 100%;
    			background: rgba(227,234,240,1);
			background: -moz-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(227,234,240,1)), color-stop(100%, rgba(206,223,237,1)));
			background: -webkit-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: -o-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: -ms-linear-gradient(top, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			background: linear-gradient(to bottom, rgba(227,234,240,1) 0%, rgba(206,223,237,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3eaf0', endColorstr='#cedfed', GradientType=0 );
		}
    
    .wrap-inner {
      width:700px;
      margin: 0 auto;
    }

      .info {
        display: block;
        position: absolute;
        z-index: 10;		    
        padding: 15px;
        width: 350px;
          color: #777;
          font-size: 27px;
          font-family:  'Roboto', sans-serif;
          font-weight: 300;
          opacity: 0;
          transition: all .52s ease-in-out;
      }

      #b1 .info,
      #b3 .info,
      #b4 .info {
          top: 130px;
          left: 0px;		    

        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(.95);
      }

      #b2 .info,
      #b5 .info {
          top: 130px;
          left: 0px;		    
        text-align: right;
        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(.95);
      }

      #b1:hover > .info,
      #b3:hover > .info,
      #b4:hover > .info {
        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(1);
        opacity: 1;
        left: 300px;
        top: 0;
      }

      #b2:hover > .info {
        transform: translate(150px,-150px) rotateX(-10deg) rotateY(44deg) rotateZ(7deg) scale(1);
        opacity: 1;
        top: 450px;
        left: -515px;
      }

      #b5:hover > .info {
          opacity: 1;
          top: 450px;
          left: -570px;
      }

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

/* div styles for presentation */
div
{
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
   height:100px;
    width:100%;
}
body
{
  margin-top: 4em;
  background-color: #ecf0f1;
  height:100px;
  width:100%;
}

/* General rule */
.button-big
{
  font-size: 2.5em;
  width: 100%;
  text-align:center;
  padding: 0.2em 0em 0.2em 0em;
}

/* Twitter class and animation */
.twitter
{
  color: #0096ff;
  border: 1px solid #0096ff;
}

.twitter:hover
{
  animation: twitterAnim 0.4s normal forwards linear;
  -webkit-animation: twitterAnim 0.4s normal forwards linear;
}
@keyframes twitterAnim {
  50% {
    background-color: #0096ff;
  }
  100% {
    background-color: #0096ff;
    border: 1px solid #0096ff;
    color: #fff;
  }
}

@-webkit-keyframes twitterAnim {
  50% {
    background-color: #0096ff;
  }
  100% {
    background-color: #0096ff;
    border: 1px solid #0096ff;
    color: #fff;
  }
}

/* Facebook class and animation */
.facebook
{
  color: #3B5998;
  border: 1px solid #3B5998;
}

.facebook:hover
{
  animation: facebookAnim 0.4s normal forwards linear;
  -webkit-animation: facebookAnim 0.4s normal forwards linear;
}

@keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}

@-webkit-keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}

/* Google class and animation */
.gplus
{
  color: #dd4b39;
  border: 1px solid #dd4b39;
}

.gplus:hover
{
  animation: gplusAnim 0.4s normal forwards linear;
  -webkit-animation: gplusAnim 0.4s normal forwards linear;
}

@keyframes gplusAnim {
  50% {
    background-color: #dd4b39;
  }
  100% {
    background-color: #dd4b39;
    border: 1px solid #dd4b39;
    color: #fff;
  }
 }
  
@-webkit-keyframes gplusAnim {
  50% {
    background-color: #dd4b39;
  }
  100% {
    background-color: #dd4b39;
    border: 1px solid #dd4b39;
    color: #fff;
  }
}

/* Dribble class and animation */
.dribbble
{
  color: #ea4c89;
  border: 1px solid #ea4c89;
}

.dribbble:hover
{
  animation: dribbbleAnim 0.4s normal forwards linear;
  -webkit-animation: dribbbleAnim 0.4s normal forwards linear;
}

@-webkit-keyframes dribbbleAnim {
  50% {
    background-color: #ea4c89;
  }
  100% {
    background-color: #ea4c89;
    border: 1px solid #ea4c89;
    color: #fff;
  }
}
  
@keyframes dribbbleAnim {
  50% {
    background-color: #ea4c89;
  }
  100% {
    background-color: #ea4c89;
    border: 1px solid #ea4c89;
    color: #fff;
  }
}
/* Yahoo class and animation */
.yahooo
{
  color: #720e9e;
  border: 1px solid #720e9e;
}

.yahooo:hover
{
  animation: yahoooAnim 0.4s normal forwards linear;
  -webkit-animation: yahoooAnim 0.4s normal forwards linear;
}

@-webkit-keyframes yahoooAnim {
  50% {
    background-color: #720e9e;
  }
  100% {
    background-color: #720e9e;
    border: 1px solid #720e9e;
    color: #fff;
  }
}
@keyframes yahoooAnim {
  50% {
    background-color: #720e9e;
  }
  100% {
    background-color: #720e9e;
    border: 1px solid #720e9e;
    color: #fff;
  }
}

/* Links */
a
{
  color: black;
  text-decoration: none;
  text-align:center;
  font-kerning:100px;
  font-size:40;
}