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

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

/* COLUMN BLOCKS */

.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:18vw;
    margin:0 1vw 0 1vw;
    float:left;
}

.twoThrd{
    width:38vw;
    margin:0 1vw 0 1vw;
    float:left;
}

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

.full{
    width:58vw;
    margin:0 1vw 0 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:12pt;
    text-transform:uppercase;
    letter-spacing:2pt;
}

h3{
    color:#447d34;
}

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

.whtType{
    color:#fff;
}





/* AUXILLARY NAVIGATION BAR */

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

#auxNav li{
    list-style-type:none;
    color:#999999;
    float:left;
    padding:7px 15px;
}

#auxNav :hover{
    color:#fff;
    text-decoration:underline;
    cursor:pointer;
}




/* RULE LINE DIVIDER */

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




/* LEFT SIDE HERO */

#hero{
    height:96vh;
    width:38vw;
    background-color:#B1B1B1;
    position:fixed;
    top:4vh;
    overflow:scroll;
    background-image:url("images/DDI_Hero.jpg");
    background-size: cover;
    background-position:center;
    z-index:1004;
}

#heroLogo{
    width:18vw;
    position:absolute;
    left:10vw;
    top:8vw;
}

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





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

#aboutDesktop{
    display:block;
}

#aboutMobile{
    display:none;
}

.aboutcontainer{
    position:relative;
    top:50vh;
    width:28vw;
    margin-left:5vw;
}

.aboutcontainer h1{
    text-align:center;
    color:#fff;
}

.aboutcontainer p{
    text-align:center;
    color:#fff;
    padding-bottom:30vh;
}




/* RIGHT SIDE CONTENT SECTION PIECES */

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

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




/* TOP CONTENT SECTION */

#top{
    padding-top:2vh;
}

#threeButtons h2{
    background-color:#155e99;
    color:#fff;
    text-align:center;
    padding:1vw 0 1vw 0;
    transition:background-color .5;
}

#threeButtons :hover{
    cursor:pointer;
    background-color:rgba(16,35,75,1.00);
}





/* PROJECTS SECTION */

#projects h1{
    float:left;
    text-align:center;
    margin-top:2vh;
    margin-bottom:2vh;
}

.threeColBG{
    background-color:#eee;
    color:#333;
    margin-top:1vh;
    padding:6vw 0;
}

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

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