/* Typeface */

    @import  url('http://cdn.moritzzimmer.com/fonts/RoteskWeb/RoteskWebDURL.css');

/* Main Element Styles */

    html{
        background-color: white;   
    }
    body{
        font-family: 'Rotesk Web', Helvetica, 'Helvetica Neue', Arial, Sans; 
        text-rendering: optimizeLegibility;
        width: 80%;
        min-width: 530px;
        background: white;
        margin: auto;
        min-height: 100vh;
        box-shadow: 20px 2px 100px #666;
    }
    main{
        margin-top: 5%; 
    }
    main > *{
        margin: 5%;
    }

    a, a:visited{
        color: black;   
    }
    a:hover{
        color: #f40;   
    }

    header{
        padding: 5%;
    }

/* Footer Styles */

    footer{
        background-color: black;
        color: white;
        width: 90%;
        height: auto;
        padding: 4% 5%;
        padding-top: 30px;
/*        column-count: 4;*/
        column-width: 300px;
    }    
    footer a, footer a:visited{
        color: white;
        font-weight: 700;
        text-decoration: none;
    }
    footer a:hover{
        text-decoration: underline;   
    }
    footer a:first-of-type{
/*        font-size: 150%;   */
    }
    footer div span{
        float: left;
    }
    footer div a{
        float: right;
    }
    footer a:nth-of-type(2){
        text-align: right;   
        float: right;
        position: relative;
        top: -1.5em;
    }
    footer p{
        font-size: 60%;
    }
    footer div{
/*        position: relative;*/
/*        top: 50%;*/
/*        transform: translateY(-50%);   */
/*        margin: 5% 0 3% 0;*/
    }
    footer h3{
        top: 50px;
        background: #ccc;
        color: black;
        font-size: 14px;
    }
    footer ul{
        padding: 0;
        padding-left: 20px;
    }
    footer p {
        padding-bottom: 20px;
    }
    footer li{
        font-size: 60%;
        list-style: disc;
        margin: 0;
    }

/* Heading Styles */

    h1, h2{
        display: inline;
        background: #f40;
        padding: 2%;
    }    
	h2{
		line-height: 1.75em;
        padding-bottom: 1.75%;
	}
    h1{
        background: white;
        color:  #105;
        width: auto;
    }
    h3{
        display:inline; 
        color: #105;
        background-color: #f40;
        padding: 0.25em;
        padding-bottom: 0.175em;
    }
    h4{
        display: inline;
    }

/* Element Stlyes */
    main figure, main form{
        width: 100%;
        margin: 0;
        position: relative;
        min-height: 100px;
    }
    figure img{
        width: 100%;    
    }
    figcaption{
        position: absolute;
        top: -0.1em;
        background: white;
        padding: 2% 2% 2% 4%;
        max-width: 33%;
        color: black;
    }
    figcaption:before{
        content: "”";
        font-size: 300%;
        position: absolute;
        left: 0.15em;
        top: -0.1em;
    }

    article{
        padding: 3%;        
    }

    main p{
        line-height: 2em;
        width: 80%;
        display: inline;
    }
    main p:after{
        content: "■";
        color: #f40;
    }

/* Top Navigation */
    nav{
        width: 100%;
        height: 45px;
        padding: 0 0%;       
    }
    nav ul{ 
        width: 100%; 
        display: table;
        padding-left: 0;
    }
    nav ul li{
        display: table-cell;
        width: 25%;
        text-align: center;
        font-weight: 400;
    }
    nav ul li a, nav ul li a:visited {
        text-decoration: none;
        font-size: 120%;
        color: #105;
    }
    nav ul li a.current{
        border-bottom: 1px solid #f40;    
    }

    form{
        background-color: #f40;    
        position: relative;
        padding-top: 70px;
        padding-left: 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    form hr{
       margin-right: 20px;
    }

    form div span{
        display: inline-block;
        padding: 5px 10px;
        margin: 10px 10px 10px 0;
        cursor: pointer;
    }

    form #textSize, form #textWeight{
        width: 20%;
        margin: 0 80% 0 0;
    }

    .negativeContrast{
        background: white;
        color:  black;
    }
    .colorContrast{
        color: #3A2A6C;
        background: white;
    }
    .lightColorContrast{
        color: #f40;
        background: white;        
    }
    .normalContrast{
        color: black;
        background: #f40;
    }
    .redTextContrast{
        color: #3A2A6C;
        background: #f40;    
    }   
    .lightContrast{
        background: #f40;
        color: #fff;
    }

    form section{
        position: absolute;
        top: -0.1em;
        margin-left: -20px;
        background: white;
        padding: 2% 2% 2% 4%;
        max-width: 33%;
        color: black;
    }
    form section:before{
        content: "”";
        font-size: 300%;
        position: absolute;
        left: 0.15em;
        top: -0.1em;
    }

    textarea{
        font-family: inherit;
        font-size: inherit;
        font-size: 40px;
        width: 200%;
        text-align: left;
        border: none;
        overflow: hidden;
        resize: none;
        background: transparent;
        margin: $h2-padding-top 0;
        color: inherit;
        background-color: #f40;
        text-overflow: clip;
    }
    textarea:focus{
        box-shadow: none;   
        border: none;
        outline: none;
    }
    hr{
        border: 0;
        height: 1px;
        background: white;
    }