@charset "UTF-8";
/* CSS Document */

*{
    padding:0;
    margin:0;
    font-family:tenon,sans-serif;
    color:#4d4d4f;
}

/* COLUMN BLOCK */

.oneQtr{
    width:13vw;
    margin:0 1vw 0 1vw;
    float:left;
}

.twoQtr{
    width:28vw;
    margin:0 1vw 0 1vw;
    float:left;
}

.threeQtr{
    width:43vw;
    margin:0 1vw 0 1vw;
    float:left;
}

.oneThrd{
    width:96vw;
    margin:2vw 1vw;
    float:left;
}

.twoThrd{
    width:96vw;
    margin:2vw 1vw;
    float:left;
}

.half{
    width:47vw;
    margin:0 1vw 0 1vw;
    float:left;
}

.full{
    width:96vw;
    margin:2vw 1vw;
    float:left;
}





/* TYPOGRAPHY */

h1{
    font-family:"brix-slab",serif;
    font-weight: 700;
    font-style: normal;
    line-height:30pt;
    color:#005d99;
}

h2{
    font-family: "brix-slab", serif;
    font-weight:700;
    font-size:10pt;
    text-transform:uppercase;
    letter-spacing:2pt;
}

h3{
    color:#447d34;
}

p{
    font-weight: 400;
    font-style: normal;
    line-height:20pt;
}





/* AUXILLARY NAVIGATION BAR */

#auxNav{
    width:100vw;
    height:4vh;
    position:fixed;
    background-color:#333;
    z-index:1005;
}

.button{
    color:#333;
    background-color:#98cc72;
    padding:15px 30px 15px 30px;
    text-decoration:none;
    position:relative;
    bottom:-20px;
    border-radius:3px;
    box-shadow: 0px 2px 4px #ddd;
    transition:padding .5s, box-shadow .5s, color .5s, background-color .5s;
}

.button:hover{    
    padding:18px 34px 18px 34px;
    box-shadow:3px 3px 8px #eee;
    color:#fff;
    background-color:#447d34;
}





/* RULE LINE BAR */

.ruleLine{
    width:80%;
    margin-left:10%;
    height:1px;
    background-color:#aaa;
    margin-top:3vh;
    margin-bottom:3vh;
}





/* LEFT SIDE HERO */

#hero{
    height:130vw;
    width:100vw;
    background-color:#B1B1B1;
    position:relative;
    float:left;
    overflow:hidden;
    top:4vh;
    background-image:url("images/DDI_Hero.jpg");
    background-size: cover;
    background-position:center;
}

#heroLogo{
    width:50vw;
    position:absolute;
    left:25vw;
    top:10vw;
}

.heroText{
    text-align:center;
    color:#fff;
    width:90vw;
    margin-left:5vw;
    margin-top:45vw;
}





/* AABOUT BLOCK (MOVES BETWEEN HERO AND CONTENT BASED ON VIEWPORT) */

#aboutDesktop{
    display:none;
}

#aboutMobile{
    display:block;
    background-color:#447d34;
}





/* RIGHT SIDE CONTENT SECTION PIECES */

.container{
    width:100vw;
    float:right;
}

.section{
    width:100vw;
    margin:1vw;
    margin-top:0;
}





/* TOP CONTENT SECTION */

#top{
    padding-top:4vh;
}

#threeButtons h2{
    background-color:#155e99;
    color:#fff;
    text-align:center;
    padding:3vw 0 3vw 0;
    margin-bottom:1vw;
    width:31vw;
    margin:0 .80vw 1vw .8vw;
}





/* PROJECTS SECTION */

#projects h1{
    float:left;
    text-align:center;
}

.tile{
    height:23.5vw;
    background-color:#AEAEAE;
}

.clearfix{
    content: "";
    clear: both;
    display: table;
    padding:1vw;
}