* {
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    overflow-x: hidden;
}

form {
    width: inherit;
    position: relative;
    padding: 1%;
}

.about .projects {
    width: 100%;
    position: relative;
}

.aboutP {
    width: auto;
    position: relative;
    padding: 25px;
}

.bodyBox {
    width: 100%;
    height: 87vh;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.contactMe {
    border: thin solid;
}

.darkHeading {
    color: #dddddd;
}

.form-group {
    padding: 0 5% 0 5%;
}

.headingBox {
    width: 100%;
    position: relative;
    top: 20px;
    margin-bottom: 35px;
    text-align: center;
    vertical-align: middle;
}

.headingP {
    font-family: 'Bree Serif', serif;
    font-size: xx-large;
    position: relative;
}

.home {
    width: 100%;
    height: 88vh;
    z-index: 1;
    background: url("../img/mobile/homeBackground.png") no-repeat;
    background-size: 100% 100%;
    -webkit-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.75);
}

.homeTag {
    position: relative;
    top: 34vh;
    padding-left: 35%;
    font-size: large;
    font-family: 'Raleway', sans-serif;
    color: #843534;
}

.homeTitle {
    position: relative;
    color: #0F0F40;
    top: 34vh;
    padding-left: 34%;
    font-family: 'Raleway', sans-serif;
    font-style: italic;
    font-size: 2.5em;
    font-weight: bold;
    text-shadow: 2px 2px #7e7e7e;
}

.homeLogo {
    height: 65vh;
    position: relative;
    top: 13vh;
}

.hwdLogo {
    width: 30%;
    height: 25vh;
    position: relative;
    left: 2%;
    background-size: 100% 100%;
    background-image: url("../img/logo/HWDLogo.png");
    background-repeat: no-repeat;
}

.imgCap {
    position: relative;
    float: right;
    max-width: 40%;
    height: auto;
    margin: 5px;
}

.imgStJohnsBr {
    position: relative;
    float: left;
    max-width: 40%;
    height: auto;
    margin: 10px;
}

.logo {
    height: 12vh;
}

.logoFull {
    width: 60%;
    height: 10vh;
    position: relative;
    float: left;
    top: 1vh;
    left: 7%;
    background-image: url("../img/mobile/fullLogo.png");
    background-size: 100% 100%;
}

.logoTail {
    position: relative;
    color: #cccccc;
}

.mainBox {
    width: 100%;
    height: 100vh;
    position: fixed;
    margin: 0;
    padding: 0;
    z-index: 10;
}

.menu {
    width: 100%;
    height: 12vh;
    position: relative;
    float: right;
    z-index: 50;
}

.menuIcon {
    position: relative;
    max-height: 100%;
    float: right;
    padding: 10px;
    right: 3%;
    z-index: 50;
}

.menuItem {
    width: 20%;
    height: 12vh;
    position: relative;
    float: left;
    background-color: #5cb85c;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.menuLabel {
    width: 100%;
    color: #00002d;
    position: relative;
    margin: 0 auto;
    top: 35%;
    text-align: center;
    vertical-align: middle;
}

.name {
    position: relative;
    float: bottom;
    width: 45%;
}

.projectHeading {
    width: auto;
    margin: 0 auto;
    position: relative;
}

.projectImg {
    position: relative;
    max-width: 25%;
    height: auto;
    float: right;
    margin: 4% auto 2% 2%;
}

.projects {
    padding-bottom: 4%;
}

.projectSet {
    width: 90%;
    position: relative;
    list-style-type: none;
    margin: 20% auto;
}

.projectTitle {
    text-decoration: none;
    font-size: x-large;
    font-family: 'Bree Serif', serif;
    margin: 0 auto;
}

.socialAbout {
    width: 70%;
    height: auto;
    position: relative;
    float: right;
    color: white;
    padding-top: 3%;
    align-content: center;
    right: 5%;
}

.socialBox {
    margin: 0 auto;
    position: relative;
    padding-bottom: 10%;
}

.socialImg {
    width: 25%;
    height: auto;
    padding: 3%;
    position: relative;
}

.socialMedia {
    width: 100%;
    height: auto;
    padding-top: 3vh;
}

.submitButton {
    position: relative;
    margin-top: 4%;
    margin-bottom: 10%;
}

.titleBar {
    width: 100%;
    height: 12vh;
    position: relative;
    -webkit-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.75);
    z-index: 25;
    overflow: auto;
}

#detailsInput {
    height: 100px;
}

#firstName {
    float: left;
}

#firstNameLabel {
    position: relative;
    float: top;
}

#homeScrImg {
    width: 100%;
    position: relative;
}

#lastName {
    float: right;
}

#nameGroup {
    margin-bottom: 25px;
}

.backgroundGradient {
    background: #f6f8f9; /* Old browsers */
    background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 63%, #d7dee3 84%, #f5f7f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(63%,#e5ebee), color-stop(84%,#d7dee3), color-stop(100%,#f5f7f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee 63%,#d7dee3 84%,#f5f7f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6f8f9 0%,#e5ebee 63%,#d7dee3 84%,#f5f7f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6f8f9 0%,#e5ebee 63%,#d7dee3 84%,#f5f7f9 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 63%,#d7dee3 84%,#f5f7f9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
}

.contactGradient {
    background: #b0d4e3; /* Old browsers */
    background: -moz-linear-gradient(top, #b0d4e3 0%, #88bacf 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #b0d4e3 0%,#88bacf 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #b0d4e3 0%,#88bacf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.menuGradient {
    background: rgb(76,76,76);
    background: -moz-linear-gradient(left, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 20%, rgba(71,71,71,1) 33%, rgba(44,44,44,1) 45%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
    background: -webkit-linear-gradient(left, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 20%,rgba(71,71,71,1) 33%,rgba(44,44,44,1) 45%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
    background: linear-gradient(to right, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 20%,rgba(71,71,71,1) 33%,rgba(44,44,44,1) 45%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
}

.menuItemGradient {
    background: #e0f3fa;
    background: -moz-radial-gradient(center, ellipse cover, #e0f3fa 0%, #d8f0fc 18%, #b8e2f6 79%, #b6dffd 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #e0f3fa 0%,#d8f0fc 18%,#b8e2f6 79%,#b6dffd 100%);
    background: radial-gradient(ellipse at center, #e0f3fa 0%,#d8f0fc 18%,#b8e2f6 79%,#b6dffd 100%);
}

.socialGradient {
    background: #7d7e7d; /* Old browsers */
    background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.titleGradient {
    background: #1b1b1b; /* Old browsers */
    background: -moz-linear-gradient(top, #444444 0%, #0d0d0d 23%, #010101 43%, #0a0a0a 53%, #383838 87%, #1b1b1b 100%); /* FF 3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(23%,#0d0d0d), color-stop(43%,#010101), color-stop(53%,#0a0a0a), color-stop(87%,#383838), color-stop(100%,#1b1b1b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #444444 0%,#0d0d0d 23%,#010101 43%,#0a0a0a 53%,#383838 87%,#1b1b1b 100%); /* Chrome 10+, Safari 5.1+ */
    background: -o-linear-gradient(top, #444444 0%,#0d0d0d 23%,#010101 43%,#0a0a0a 53%,#383838 87%,#1b1b1b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #444444 0%,#0d0d0d 23%,#010101 43%,#0a0a0a 53%,#383838 87%,#1b1b1b 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #444444 0%,#0d0d0d 23%,#010101 43%,#0a0a0a 53%,#383838 87%,#1b1b1b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#1b1b1b',GradientType=0 ); /* IE 6-9 */
}