/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face 
*/

/* #Site Styles
================================================== */
	body {
        background: #000;
    }

	a:link {text-decoration:none;}
	a:visited {text-decoration:none;}
	a:hover {text-decoration:underline;}
	a:active {text-decoration:underline;}

	body h1 {
		font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	}

	.stripes {
			display: none;
	}

	.item {
		margin-right: 13px;
		display: inline-block;
	}

	.preLoad {
		display:none;
	}
	
/* #Page Styles
================================================== */
    .container {
        height: 750px;
    }
    
    #him {
        position: absolute;
        top: 130px;
        left: 220px;
        width: 350px;
        height: 350px;
        display: inline;
        background-size:350px;
    }
    
    #socialFace {
        position: absolute;
        top: 130px;
        left: 220px;
        width: 350px;
        height: 350px;
        background-size:350px;
    }
    
    .socialFace {
    }

    .him {
        background: url(../img/svg/him/him.svg) no-repeat;
        background-size:350px;
    }
	.lefttop {
        background: url(../img/svg/him/nw.svg) no-repeat;
        background-size:350px;
	}

	.middletop {
        background: url(../img/svg/him/n.svg) no-repeat;
        background-size:350px;
	}

	.righttop {
        background: url(../img/svg/him/ne.svg) no-repeat;
        background-size:350px;
	}

	.leftmiddle {
        background: url(../img/svg/him/w.svg) no-repeat;
	}

	.middlemiddle {
        background: url(../img/svg/him/him.svg) no-repeat;
	}

	.rightmiddle {
        background: url(../img/svg/him/e.svg) no-repeat;
	}

	.leftbottom {
        background: url(../img/svg/him/sw.svg) no-repeat;
	}

	.middlebottom {
        background: url(../img/svg/him/s.svg) no-repeat;
	}

	.rightbottom {
        background: url(../img/svg/him/se.svg) no-repeat;
	}



	.youtubeFace {
		background: url(../img/svg/him/yt.svg) no-repeat;
	}

	.soundcloudFace {
		background: url(../img/svg/him/sc.svg) no-repeat;
	}

	.facebookFace {
		background: url(../img/svg/him/fb.svg) no-repeat;
	}

	.twitterFace {
		background: url(../img/svg/him/tw.svg) no-repeat;
	}

	.itunesFace {
		background: url(../img/svg/him/it.svg) no-repeat;
	}


    
    .logo {
        position: absolute;
        top: 185px;
        left: 13px;
    }
    
    .logo img {
        width: 150px;
    }
    
    #iconSet {
        position: absolute;
        z-index:99;
    }
    
    .iconSet {
        top: 245px;
        left: 593px;
    }

     .youtube {
        background: url(../img/svg/yt.svg);
    }
    
    .soundcloud {
        background: url(../img/svg/sc.svg);
    }
    
    .facebook {
        background: url(../img/svg/fb.svg);
    }
    
    .email {
        background: url(../img/svg/em.svg);
    }
    
    .twitter {
        background: url(../img/svg/tw.svg);
    }
    
    .itunes {
        background: url(../img/svg/it.svg);
    }
    
    .socialIcon {
        float: left;
        margin-right: 5px;
        filter: url(filters.svg#grayscale);
    /* Firefox 3.5+ */
        filter: gray;
    /* IE6-9 */
        -webkit-filter: grayscale(1);
    /* Google Chrome, Safari 6+ & Opera 15+ */
    }
    
    .socialIcon:hover {
        opacity: 1;
        filter: none;
        -webkit-filter: grayscale(0%);
    }

    .iconSmall {
        background-size:50px;
        width: 50px;
        height: 50px;
    }

    .iconlarge {
        background-size:150px;
        width: 150px;
        height: 150px;
    }
    
    .share {
        position: absolute;
        height: 100px;
        width: 50px;
        color: rgba(255,255,255,0.79);
        font-size: 15px;
        font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }
    
    .share ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    
    .share li {
        margin-bottom: 10px;
    }
    
    .share a {
        color: rgba(255,255,255,0.79);
        font-size: 15px;
        font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        text-decoration: none;
    }

    .share a:hover {
        color: #2e4689;
    }
    
    .shareFb {
        top: 300px;
        left: 702px;
    }
    
    .shareTwitter {
        top: 300px;
        left: 758px;
    }
    
    .shareTwitter a:hover {
        color: #2898da;
    }
    
    .shareEmail {
        width: 200px;
        height: 29px;
        top: 337px;
        color: #c4c4c4;
        font-size: 22px;
        left: 639px;
        z-index: 2;
    }
    
    .shareEmail:hover {
        color: #659c4e;
    }
    
    .logoName {
        font-size: 27px;
        position: absolute;
        top: 325px;
        left: 12px;
    }




/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* tablet */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

        .logoName {
            top: 309px;
            left: 441px;
        }
        
        .container {
            height: 460px;
        }
        
        .stripes h1 {
            color: #fff;
            margin: 0;
            font-size: 56px;
            line-height: 60px;
        }
        
        #him {
            display: none;
            left: -2000px;
        }
        
        #socialFace {
            left: -2000px;
        }
        
        .socialFace {
        }
        
        .iconSet {
            display: none;
        }
        
        #stripes {
            position: absolute;
            width: 100%;
            display: inline;
            left: 60px;
            top: 75px;
        }
        
        .stripe {
        }
        
        .soundcloudStripe h1 {
            color: #fc6220;
        }
        
        .youtubeStripe h1 {
            color: #cc171e;
        }
        
        .facebookStripe h1 {
            color: #3a5998;
        }
        
        .twitterStripe h1 {
            color: #23cffd;
        }
        
        .itunesStripe h1 {
            color: #e951bc;
        }
        
        .emailStripe h1 {
            color: #2c4caf;
        }
        
        .twitterStripeTwo {
            position: absolute;
            top: 199px;
            left: 20px;
            color: #FFF;
            font-size: 46px;
        }
        
        .twitterStripeTwo a {
            color: #23cffd;
        }
        
        .facebookStripeTwo {
            position: absolute;
            top: 140px;
            left: 46px;
            color: #FFF;
            font-size: 38px;
        }
        
        .facebookStripeTwo a {
            color: #3a5998;
        }
        
        .shareFb {
            left: -300px;
        }
        
        .shareTwitter {
            left: -300px;
        }
        
        .logo {
            top: 167px;
            left: 443px;
        }
        
        .logo .icon- {
            font-size: 337px;
        }
        
        .shareEmail {
            left: 62px;
            top: 398px;
            font-size: 27px;
        }

	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
    }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
        .container {
            margin-top: 20px;
            height: 260px;
        }

        .shareFb {
            top: 168px;
            left: 161px;
        }
        
        .shareTwitter {
            top: 167px;
            left: 217px;
        }
        
        .stripes h1 {
            color: #fff;
            margin: 0;
            font-size: 56px;
            line-height: 60px;
        }
        
        #him {
            display: none;
            left: -2000px;
        }
        
        #socialFace {
            left: -2000px;
        }
        
        .socialFace {
        }
        
        .iconSet {
            top: 110px;
            left: 53px;
        }
        
        #stripes {
            display: none;
        }
        
        .stripe {
        }
        
        .soundcloudStripe h1 {
            color: #fc6220;
        }
        
        .youtubeStripe h1 {
            color: #cc171e;
        }
        
        .facebookStripe h1 {
            color: #3a5998;
        }
        
        .twitterStripe h1 {
            color: #23cffd;
        }
        
        .itunesStripe h1 {
            color: #e951bc;
        }
        
        .emailStripe h1 {
            color: #2c4caf;
        }
        
        .logo {
            top: 25px;
            left: 114px;
        }
        
        .logo img {
            width: 70px;
        }
        
        .logoName {
            top: 53px;
            left: 201px;
        }
        
        .shareEmail {
            left: 104px;
            top: 168px;
            font-size: 22px;
        }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {

        .logoName {
            display: none;
        }
        
        .container {
            height: 460px;
        }
        
        .stripes h1 {
            color: #fff;
            margin: 0;
            font-size: 56px;
            line-height: 60px;
        }
        
        #him {
            display: none;
            left: -2000px;
        }
        
        #socialFace {
            left: -2000px;
        }
        
        .socialFace {
        }
        
        .iconSet {
            display: none;
        }
        
        #stripes {
            position: absolute;
            width: 100%;
            display: inline;
            top: 75px;
            text-align: center;
        }
        
        .stripe {
        }
        
        .soundcloudStripe h1 {
            color: #fc6220;
        }
        
        .youtubeStripe h1 {
            color: #cc171e;
        }
        
        .facebookStripe h1 {
            color: #3a5998;
        }
        
        .twitterStripe h1 {
            color: #23cffd;
        }
        
        .itunesStripe h1 {
            color: #e951bc;
        }
        
        .emailStripe h1 {
            color: #2c4caf;
        }
        
        .twitterStripeTwo {
            position: absolute;
            top: 199px;
            left: 20px;
            color: #FFF;
            font-size: 46px;
        }
        
        .twitterStripeTwo a {
            color: #23cffd;
        }
        
        .facebookStripeTwo {
            position: absolute;
            top: 140px;
            left: 46px;
            color: #FFF;
            font-size: 38px;
        }
        
        .facebookStripeTwo a {
            color: #3a5998;
        }
        
        .shareFb {
            left: -300px;
        }
        
        .shareTwitter {
            left: -300px;
        }
        
        .logo {
            top: 19px;
            left: 128px;
        }
        
        .logo img {
            width: 48px;
        }
        
        .shareEmail {
            left: 6px;
            top: 398px;
            font-size: 27px;
        }
   

	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }