body {

	font-family: "bariol", Helvetica, Arial, sans-serif;
}

.clear {
	clear: both;
}

#header {
	width: 100%;
	height: 900px;
	background-color: #6aabb3;
	margin: 0 auto;
}

.img {
	text-align: center;
	padding-top: 110px; padding-bottom: 60px;
}

img.me {
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

img.me:hover {
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
	-moz-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-webkit-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-o-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-ms-transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	transform: scale(1.1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	
}

h2.name {
	text-align: center;
	color: #FFF;
	font-size: 69px;
	font-weight: normal;
	font-family: "bariol", Helvetica, Arial, sans-serif;
	margin: 0px;
}

h4.title {
	text-align: center;
	color: #4e7e85;
	font-size: 36px;
	font-weight: normal;
	font-family: "bariol", Helvetica, Arial, sans-serif;
	margin: 0px;
}

p.desc {
	color: #FFF;
	text-align: center;
	font-size: 28px;
	font-weight: normal;
	font-family: "bariol", Helvetica, Arial, sans-serif;
	padding-top: 62px;
}


a.work {
  color: #FFF;
}

a.work:hover {
  color: #FFF;
  text-decoration: underline;
}

#social {
	margin-left: 10px;
	padding-top: 45px;
}


#instagram
{
  display: block;
  width: 50px;
  height: 50px;
  background: url("../img/instagram.png") no-repeat 0 0;
  float: left; margin-right: 40px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: 50px 100px;

}

#instagram-m
{
  display: block;
  width: 50px;
  height: 50px;
  background: url("../img/instagram.png") no-repeat 0 0;
  float: left; margin-right: 20px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: 50px 100px;

}

#instagram:hover, #instagram-m:hover
{ 
  background-position: 0 -50px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

#instagram span, #instagram-m span
{
  position: absolute;
  top: -999em;
}

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi),
       (min-resolution: 1.5dppx) {
       
       #instagram {
       		background-image: url('../img/instagram@2x.png');
       		background-size: 50px 100px;
       		display: block;
       		float: left;
       }
       
       #instagram-m {
       		background-image: url('../img/instagram@2x.png');
       		background-size: 50px 100px;
       		display: block;
       		float: left;
       }

       
}	

#dribbble
{
  display: block;
  width: 50px;
  height: 50px;
  background: url("../img/dribbble.png") no-repeat 0 0;
  float: left;
  margin-right: 40px; margin-top: -2px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: 50px 100px;

}

#dribbble-m
{
  display: block;
  width: 50px;
  height: 50px;
  background: url("../img/dribbble.png") no-repeat 0 0;
  float: left;
  margin-right: 10px; margin-top: -2px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: 50px 100px;

}

#dribbble:hover, #dribbble-m:hover
{ 
  background-position: 0 -50px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

#dribbble span, #dribbble-m span
{
  position: absolute;
  top: -999em;
}

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi),
       (min-resolution: 1.5dppx) {
       
       #dribbble {
       		background-image: url('../img/dribbble@2x.png');
       		background-size: 50px 100px;
       		display: block;
       		float: left;
       }
       
       #dribbble-m {
       		background-image: url('../img/dribbble@2x.png');
       		background-size: 50px 100px;
       		display: block;
       		float: left;
       }

       
}

#vimeo
{
  display: block;
  width: 50px;
  height: 44px;
  background: url("../img/vimeo.png") no-repeat 0 0;
  float: left;
  margin-right: 40px; margin-top: -2px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: 50px 88px;

}

#vimeo-m
{
  display: block;
  width: 50px;
  height: 44px;
  background: url("../img/vimeo.png") no-repeat 0 0;
  float: left;
  margin-right: 10px; margin-top: -2px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: 50px 88px;

}

#vimeo:hover
{ 
  background-position: 0 -44px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

#vimeo-m:hover
{ 
  background-position: 0 -44px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

#vimeo span
{
  position: absolute;
  top: -999em;
}

#vimeo-m span
{
  position: absolute;
  top: -999em;
}

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi),
       (min-resolution: 1.5dppx) {
       
       #vimeo {
       		background-image: url('../img/vimeo@2x.png');
       		background-size: 50px 88px;
       		display: block;
       		float: left;
       }
       
       #vimeo-m {
       		background-image: url('../img/vimeo@2x.png');
       		background-size: 50px 88px;
       		display: block;
       		float: left;
       }

       
}


#linkedin
{
  display: block;
  width: 50px;
  height: 50px;
  background: url("../img/linkedin.png") no-repeat 0 0;
  float: left;
  margin-right: 40px; margin-top: -2px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: 50px 100px;

}


#linkedin-m
{
  display: block;
  width: 50px;
  height: 50px;
  background: url("../img/linkedin.png") no-repeat 0 0;
  float: left;
  margin-left: 10px;
  margin-right: 10px; margin-top: 0px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: 50px 100px;

}

#linkedin:hover
{ 
  background-position: 0 -50px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}


#linkedin-m:hover
{ 
  background-position: 0 -50px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

#linkedin span
{
  position: absolute;
  top: -999em;
}

#linkedin-m span
{
  position: absolute;
  top: -999em;
}

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi),
       (min-resolution: 1.5dppx) {
       
       #linkedin {
       		background-image: url('../img/linkedin@2x.png');
       		background-size: 50px 100px;
       		display: block;
       		float: left;
       }
       
       #linkedin-m {
       		background-image: url('../img/linkedin@2x.png');
       		background-size: 50px 100px;
       		display: block;
       		float: left;
       }

       
}



#twitter
{
  display: block;
  width: 50px;
  height: 44px;
  background: url("../img/twitter.png") no-repeat 0 0;
  float: left;
  margin-left: 10px; margin-top: -2px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: 50px 88px;

}

#twitter-m
{
  display: block;
  width: 50px;
  height: 44px;
  background: url("../img/twitter.png") no-repeat 0 0;
  float: left;
  margin-left: 10px; margin-top: 4px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  background-size: 50px 88px;

}

#twitter:hover
{ 
  background-position: 0 -44px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

#twitter-m:hover
{ 
  background-position: 0 -44px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}


#twitter span
{
  position: absolute;
  top: -999em;
}

#twitter-m span
{
  position: absolute;
  top: -999em;
}

@media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi),
       (min-resolution: 1.5dppx) {
       
       #twitter {
       		background-image: url('../img/twitter@2x.png');
       		background-size: 50px 88px;
       		display: block;
       		float: left;
       }
       
       #twitter-m {
       		background-image: url('../img/twitter@2x.png');
       		background-size: 50px 88px;
       		display: block;
       		float: left;
       }

       
}					

.work {
	padding-top: 115px;
}


p.dribbble {
	font: normal 35px/1.5em "bariol", Arial, Helvetica, Geneva, sans-serif;
	color: #8f8f8f;
	text-align: center;
	margin-top: 100px;
	margin-bottom: -15px;
}

p.vx {
	font: normal 35px/1.5em "bariol", Arial, Helvetica, Geneva, sans-serif;
	color: #8f8f8f;
	text-align: center;
	margin-bottom: 120px;
}

a.pink {
	color: #ea4c89;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

a.pink:hover {
	color: #ff7eb0;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
	
}



#music {
	width: 100%;
	height: 420px;
	background-color: #f5f5f5;
	margin: 0 auto;
}


.listening {
	 margin-top:159px;
}

.eq {

    width:100%;
    height:80px;
    overflow: hidden;
    float: left;
    margin-bottom: 10px;

}

.bar {
    
    background-color: #8f8f8f;
    width:10px;
    height:90px;
    display: inline-block;
    vertical-align: bottom;
    
}

p.currently {

    margin-left:-3px;
    margin-top:25px;
    font: normal 25px "bariol", Helvetica, Arial, sans-serif;
    color: #8f8f8f;
    
}

#artist {
	text-align: right;
	color: #8f8f8f;
	font-size: 45px;
	font-weight: normal;
	font-family: "bariol", Helvetica, Arial, sans-serif;
	margin: 0px;
}

#song {
	text-align: right;
	color: #bababa;
	font-size: 45px;
	font-weight: normal;
	font-family: "bariol", Helvetica, Arial, sans-serif;
	margin: 0px;
}

.player {
	margin-top: -154px;
}


#listen {
	float: right;
	text-align: right;
	padding-top: 15px;
}


#trackdate {
	display: none;
}

#contact {
	width: 100%;
	height: 200px;
	background-color: #6aabb3;
	margin: 0;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

#contact:hover {
	background-color: #5c949c;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

a.contact {
	margin: 0;
}

h3.contact {
	text-align: center;
	color: #FFF;
	font-weight: normal;
	font-family: "bariol", Helvetica, Arial, sans-serif;
	font-size: 48px;
	margin: 0;
	padding-top: 80px;
}


.t1 {
	
	color: #78c5d6;
}

.t2 {
	
	color: #459ba8;
}

.t3  {
	
	color: #79c267;
}

.t4 {
	
	color: #c5d647;
}

.t5 {
	
	color: #f28c33;
}

.t6 {
	
	color: #e868a2;
}

.t7 {
	
	color: #bf62a6;
}

.t8 {
	
	color: #6d62bf;
}

.t9 {
	
	color: #6299bf;
}



ul#portfolio {
	width: 880px; margin: 0 auto; 
	list-style: none; overflow: hidden;
	padding-top: 115px;
}
	ul#portfolio li {
		float: left; margin: 20px; 
	}
		ul#portfolio a {
			display: block; width: 400px; height: 300px;
			-webkit-transition: all 500ms ease-in-out;
			-moz-transition: all 500ms ease-in-out;
			-ms-transition: all 500ms ease-in-out;
			-o-transition: all 500ms ease-in-out;
			transition: all 500ms ease-in-out;
			 
		}
			ul#portfolio a:hover {
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
				-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
				-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
				-webkit-transition: all 500ms ease-in-out;
				-moz-transition: all 500ms ease-in-out;
				-ms-transition: all 500ms ease-in-out;
				-o-transition: all 500ms ease-in-out;
				transition: all 500ms ease-in-out;
				-moz-transform: scale(1.07) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
				-webkit-transform: scale(1.07) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
				-o-transform: scale(1.07) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
				-ms-transform: scale(1.07) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
				transform: scale(1.07) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
		}



/* MOBILE */


#header-m {
	width: 100%;
	height: 730px;
	background-color: #6aabb3;
	margin: 0 auto;
}


h2.name-m {
	text-align: center;
	color: #FFF;
	font-size: 50px;
	font-weight: normal;
	font-family: "bariol", Helvetica, Arial, sans-serif;
	margin: 0px;
}

ul#portfolio-mobile {
	width: 100%; margin: 0 auto; 
	list-style: none; overflow: hidden;
	padding-top: 0px;
}

@media (max-width: 450px) {
 ul#portfolio-mobile {
  width: 80%;
 }
}

ul#portfolio-mobile li {

	float: right; margin-right: 10px;
	
	}
	
	
ul#portfolio-mobile a {
	display: block;
  position: relative;
	width: 300px;
	height: 200px;
	margin-bottom: 20px;
			 
	}
		
ul#portfolio-mobile a:first-child {
		
	margin-top: 20px;
			
	}
		
		
ul#portfolio-mobile a:hover {

	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	 
	
	}


.img-m {
	text-align: center;
	padding-top: 45px; padding-bottom: 25px;
}

p.desc-m {
	color: #FFF;
	text-align: center;
	font-size: 23px;
	font-weight: normal;
	font-family: "bariol", Helvetica, Arial, sans-serif;
	padding-top: 25px;
}


#social-m {
	
	padding-top: 7px;
	margin-left: 15px;
}