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

html {
    font-size: 1vw;
    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;
}



	/* HEADER */

header {
    float: left;
    position: relative;
    display: table;
    width: 100%;
    height: 20vw;
    background-image: url("images/cmo-mast.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    border-bottom: 0.85vw solid #615c57;
    border-image: linear-gradient(to left, #b1aaa4 0%, #615c57 100%);
    border-image-slice: 1;
}

nav {
    float: left;
    display: table-cell;
    width: 60%;
    position: absolute;
    top: 0.75vw;
    left: 32.5vw;
    text-align: center;
}

nav a {
    width: 5.5vw;
    color: #615f5c;
}

nav a:hover {
    background-color: #c06929;
    color: black;
    text-decoration: none;
}

.icon {
    display: table-cell;
    color: #eeeeee;
    padding: 1.5vw;
}


	/* HEADER */



	/* MAINS */

main {
    float: left;
    width: 100%;
    padding: 3vw 12vw 5vw 12vw;
    background: #cfccc9;
    margin: 0;
}

content {
    display: table;
    width: 100%;
    margin: 0 auto;
}

blockquote {
    display: block;
    width: 100%;
    margin-bottom: 2vw;
    padding: 3vw;
    background: #e0ddda;
}

blockquote p {
    font-size: 1.27vw;
    font-style: italic;
    line-height: 1.5;
    letter-spacing: 0.02em;
    padding-bottom: 0;
}

.sml-icon {
    color: #c06929;
    text-decoration: none;
    margin-left: 0.5vw;
}

	/* MAINS */



footer {
    float: left;
    width: 100%;
    margin: 0 auto;
    padding: 4%;
}

footer p {
    line-height: 2.75vw;
    color: #e0e0e0;
    text-align: center;
}

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




p, ul, li {
    font: 1.25em Roboto; /* for IE*-WIN7 */
    font: 1.35vw Roboto;
    font-weight: 400;
    line-height: 1.75;
    padding-bottom: .5vw;
    color: #232323; 
}

li {
    width: 90%;
}

ul {
    list-style-position: outside;
    margin-left: 1.5vw;
}


h1 {
    font: 3.5em Open Sans Condensed; /* for IE*-WIN7 */
    font: 7vw Open Sans Condensed;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: #ffffff;
    background: -webkit-linear-gradient(#ffffff, #eeeeee, #615f5c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


h2 {
    font: 2.5em Roboto; /* for IE*-WIN7 */
    font: 2vw Roboto;
    font-weight: 100;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #eeeeee;
}


h3 {
    font: 2em Open Sans Condensed; /* for IE*-WIN7 */
    font: 3.5vw Open Sans Condensed;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #0d0c0b;
    margin: 0;
}


h4 {
    display: inline;
    font: 1.5em Roboto; /* for IE*-WIN7 */
    font: 1.4vw Roboto;
    font-weight: 700;
    line-height: 3;
    letter-spacing: 0.01em;
    color: #121212;
    margin: 0 auto;
}


h5 {
    display: inline;
    float: right;
    font: 1.5em Roboto; /* for IE*-WIN7 */
    font: 1.4vw Roboto;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 3;
    color: #121212;
}

h6 {
    display: inline;
    font: 1.5em Roboto; /* for IE*-WIN7 */
    font: 1vw Roboto;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #c06929;
}


a {
    color: #c06929;
    text-decoration: none;
}

.sml-icon a {
    color: inherit;
    text-decoration: none;
}


    /* for iPad */

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

	 nav {
	    top: 0.5vw;
	 }

	 blockquote p {
	    font-size: 1.6vw;
	    line-height: 1.4;
	 }

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

	 h1 {
	    font-size: 7vw;
	    line-height: 1.35;
	 }

	 h2 {
	    font-size: 2vw;
	    font-weight: 400;
	    line-height: 1.2;
	 }

	 h3 {
	    font-size: 4vw;
	    line-height: 1.5;
	 }

	 h4, h5 {
	    display: block;
	    float: none;
	    font-size: 2vw;
	    line-height: 1.3;
	 }

	 h4 {
	    margin-top: 1.5vw;
	 }

	 h5 {
	    margin-bottom: 1.3vw;
	 }

	 h6 {
	    font-size: 1.5vw;
	 }

	}



    /* for iPhone */

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

	 header {
	    float: left;
	    position: relative;
	    display: table;
	    width: 100%;
	    height: 34vw;
	    border-bottom: 2vw;
	    background-image: url("images/cmo-mast-m.jpg");
	    background-size: 100%;
	    background-repeat: no-repeat;
	 }

	 nav {
	    top: 2.5vw;
	    left: 24vw;
	    width: 80%;
	 }

	 nav a {
	    width: 7.5vw;
	 }

	 nav a:hover {
	    background-color: #c06929;
	    color: black;
	    text-decoration: none;
	 }

	 .icon {
	    display: table-cell;
	    color: #eeeeee;
	    font-size: 2vw;
	    padding: 1.25vw;
	 }

	 blockquote {
	    padding: 6vw;
	 }

	 blockquote p {
	    font-size: 3.75vw;
	    line-height: 1.25;
	    letter-spacing: 0.01em;
	 }

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

	 h1 {
	    font-size: 9.5vw;
	 }

	 h2 {
	    font-size: 2vw;
	    font-weight: 400;
	    line-height: 1.5;
	 }

	 h3 {
	    font-size: 6vw;
	    line-height: 1.5;
	 }

	 h4, h5 {
	    display: block;
	    float: none;
	    font-size: 4.25vw;
	    line-height: 1.3;
	 }

	 h4 {
	    margin-top: 1.5vw;
	 }

	 h5 {
	    margin-bottom: 1.3vw;
	 }

	 h6 {
	    font-size: 4vw;
	 }

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

	 footer {
	    padding: 6%;
	 }

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

	 .virgo {
	    width: 30vw;
	 }

	}