@font-face{font-family:'Muli-ExtraLightItalic';
src:url("../fonts/Muli/Muli-ExtraLightItalic.ttf") format("truetype")}
@font-face{font-family:'Muli-Reg';src:url("../fonts/Muli/Muli.ttf") format("truetype")}
body{
	margin:0;
	}
	
.menu{
	font-weight:100;
	background:rgba(249, 248, 248, 0.93) !important;
	width:150px;
	height:100%;
	padding-right:50px;
	position:fixed;
	z-index:1001;
	-webkit-box-shadow:-3px 0px 5px 0px rgba(0,0,0,0.2);
	box-shadow:-3px 0px 5px 0px rgba(0,0,0,0.2);
	left:-130px;
	transition:all .3s;
	-webkit-transition:all .3s;
	color:#222;
	  font-family: 'Abel', sans-serif;
	}
.menu:hover,.menu:focus{
	transform:translate3d(130px, 0, 0);
	animation-timing-function:1s ease-in
	}
.menu .title{
	top:50%;
	position:absolute;
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	transform:rotate(270deg);
	right:10px;
	font-weight:800;
	font-size:15px;
	  font-family: 'Abel', sans-serif;
	}
@font-face {
    font-family: 'Belmar';
    src: url('../fonts/belmar.ttf') format('truetype');
}

.head-title{
	font-family:"Belmar-Condensed-Normal";
	letter-spacing:1.2px;
	text-decoration: underline;
	font-size: 50px;
}

.nav{
	margin-left: 40px;
	}
.menu .nav{
	position:absolute;
	top:50%;
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	font-weight:100
	}
.menu .nav li{
	padding-bottom:30px;
	list-style-type:none
	}
.menu .nav li a{
	display:block;
	text-decoration:none;
	color:inherit;
	transition:all .3s;
	-webkit-transition:all .3s
	}
.menu .nav li a:hover{
	color:#aaa
	}

.intro{
	position:absolute;
	top:30%;
	width:40%;
	margin:0 auto;
	left:0;
	right:0;
	font-size:45px;
	text-align:center;
	font-family:'Muli-ExtraLightItalic'
}





.animated { 
                        background-repeat: no-repeat;
            background-position: left top; 
            z-index: 1005;
            position: fixed;
            top:85%;
            left:30%;

            -webkit-animation-duration: 1s;
            animation-duration: 1s; 
            -webkit-animation-fill-mode: both; 
            animation-fill-mode: both; 
         }
         
         @-webkit-keyframes bounce { 
            0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
            40% {-webkit-transform: translateY(-30px);} 
            60% {-webkit-transform: translateY(-15px);} 
         } 
         
         @keyframes bounce { 
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
            40% {transform: translateY(-30px);} 
            60% {transform: translateY(-15px);} 
         }
         
         .bounce { 
            -webkit-animation-name: bounce; 
            animation-name: bounce; 
         }

         .animated:hover {
  -webkit-animation: animated 1s;
  -moz-animation: animated 1s;
}
@-webkit-keyframes animated {
  0% {
    font-size: 60px;
  }
  20% {
    font-size: 80px;
    letter-spacing: 1px;
  }
  55% {
    font-size: 55px;
    letter-spacing: -1px;
    }
  80% {
    font-size: 70px;
    letter-spacing: 1px;
  }
  100% {
    font-size: 60px;
  }

}
.animated p
{
	
	color:white;
	text-align: center;
	font-size: 25px;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	font-family: 'PT Sans Narrow', sans-serif;

}

.animated img
{
	width:10%;
	height:10%;
	
}
a{
	text-decoration: none;
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */

 .head-title
 {
  text-decoration: underline;
  font-size:5em;
  letter-spacing: 1.2px;
  position:fixed;
  font-family: "Belmar-Condensed-Normal";
 }

}