body {
     background: #222222;
     font: Arial, sans-serif;
     height: 100%;
}

html {
    font-size: 0vw;
    height: 100%;
}

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    margin: 0;
    padding: 0;
    border: 0;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
  clear: both;
}

.cf {
    *zoom: 1;
}

img {
    border: 0;
}


	/* MAINS */

main {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
}

.half {
    float: left;
    min-height: 34.75vw;
    width: 50%;
    padding: 0;
    margin: 0;

}

.third {
    float: left;
    width: 33.3%;
    margin: 0;
    padding: 3vw;
}

.pad-idx {
    padding: 2.5vw;
}

.pad-mp3 {
    padding: 6vw;
}

.lime {
    background: #b5cc2d;
}

.charcoal {
    background: #222222;
}

.grey {
    background: #dddddd;
}

.white {
    background: #ffffff;
}


.links {
    float: left;
    position: relative;
    text-align: center;   /* horizontally centers the images */
    width: 10vw;
    height: 10vw;
    padding: 0;
    margin: 2.5%;
}

.links img  {
    width: 100%;
}


footer {
    float: left;
    display: table;
    width: 33.333%;
    min-height: 15vw;
    margin: 0 auto;
    padding: 4%;
}

.virgo {
    width: 13vw;
    opacity:0.8; filter:alpha(opacity=80);
    margin: -0.75vw 0 0 0.3vw;
}

.icon {
    color: #c0c0c0;
    width: 33%;
    padding: 2.5vw;
}

	/* MAINS */


p, ul, li {
    font: 1.25em Roboto; /* for IE*-WIN7 */
    font: 1.4vw Roboto, Arial;
    font-weight: 400;
    line-height: 1.75;
    color: #010101; 
}


h1 {
    font: 3.5em Jost; /* for IE*-WIN7 */
    font: 3vw Jost, Arial;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: #b5cc2d;
    padding: 2.25vw 3.5vw 2.25vw 3.5vw;
}


h2 {
    font: 3.5em Jost; /* for IE*-WIN7 */
    font: 2.85vw Jost, Arial;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: black;
    text-align: center;
}


h3 {
    font: 3.5em Jost; /* for IE*-WIN7 */
    font: 2.5vw Jost, Arial;
    line-height: 2;
    letter-spacing: -0.02em;
    color: black;
    padding-left: 3.5vw;
    padding-top: 0.35vw;
}


h4 {
    font: 1.8em Oswald; /* for IE*-WIN7 */
    font: bold 1.7vw Oswald, Arial;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: black;
    padding-bottom: 1vw;
}


h5 {
    font: 2em Oswald; /* for IE*-WIN7 */
    font: bold 2vw Oswald, Arial;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: black;
    padding-bottom: 1vw;
}


a {
    color: inherit;
    text-decoration: underline;
}


h3 a {
    color: #b5cc2d;
    text-decoration: underline;
}


.links a {
    font: 1.5vw Oswald, Arial; 
    color: #232323;
    letter-spacing: -0.02em;
    text-decoration: none;
}

footer p {
    font: 1.25em Roboto; /* for IE*-WIN7 */
    font: 1.1vw Roboto, Arial;
    line-height: 1.75vw;
    color: #e0e0e0;
    text-align: center;
}

.footer a {
    text-align: center;
}

footer a:hover {
    color: #b5cc2d;
    text-decoration: none;
}



    /* for iPad */

	@media only screen and (max-width: 1000px) {

	 .links {
	    margin-bottom: 5%;
	 }

	 p, ul, li {
	    font-size: 1.75vw;
	    padding-bottom: 1.5vw;
	 }

	 h1 {
   	    font: 2.75vw;
	    line-height: 1.3;
	 }

	 h3 {
	    font-size: 2.35vw;
	    line-height: 1.85;
	 }

	 h4, h5 {
	    font-size: 2vw;
	    line-height: 1.3;
	 }

	 footer p {
    	    font: 1.4vw Roboto;
    	    line-height: 2.75vw;
	}

	 .icon {
	    color: #c0c0c0;
	    width: 25%;
	    padding: 1vw;
	}





    /* for iPhone */

	@media only screen and (max-width: 800px) {

	 .half {
   	    float: left;
	    min-height: 70vw;
	    width: 100%;
	 }

	 .third {
	    float: left;
	    width: 100%;
	    padding: 6vw;
	 }

	 .links {
	    width: 35vw;
	    height: 35vw;
	    padding: 0;
	    margin: 5% 5% 12% 5%;
	 }

	 .links a {
	    font: 5vw Oswald, Arial;
	    margin-top: -4%;
	 }

	 p, ul, li {
	    font-size: 4.25vw;
	    padding-bottom: 2vw;
	 }

	 h1 {
	    font-size: 5.75vw;
	    text-align: center;
            padding: 4vw 0 4vw 0;
	 }

	 h2 {
	    font-size: 4.5vw;
	    line-height: 1.5;
	 }

	 h3 {
	    font-size: 5vw;
	    text-align: center;
            line-height: 2;
            padding: 1.5vw 0 0 0;
	 }

	 h4, h5 {
	    font-size: 4.5vw;
	    line-height: 1.5;
	 }

	 h4 {
	    margin-top: 1.5vw;
	 }

	 h5 {
	    margin-bottom: 1.3vw;
	 }

	 h6 {
	    font-size: 4vw;
	 }

	 ul {
	    margin-top: 2vw;
	    margin-left: 4.75vw;
	 }

	 footer {
	    width: 100%;
	    padding: 6%;
	 }

	 footer p {
	    font-size: 3vw;
	    line-height: 4vw;
	    color: #e0e0e0;
	    text-align: center;
	 }

	 .virgo {
	    width: 30vw;
	 }

	}