/* -------------------------------------------------------- */
/* Mobile */
/* -------------------------------------------------------- */

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

h1 {
    font-size: 6em;
    font-weight: 300;
    color: #000000;
}

h2 {
    font-size: 3em;
    font-weight: 300;
    margin-bottom: 1em;
}

h3 {
    font-size: 4.25em;
    font-weight: 300;
    margin-bottom: .1em;
}
    
h4 {
    font-size: 3em;
    font-weight: 300;
    margin-bottom: .75em;
}

h5{
    font-size: 3.2em;
    font-weight: 300;
    line-height: 1.2em;
    margin-bottom: 2em;
}

.container {
    width: 100%;
    background: url(../images/bg.jpg) no-repeat;
    background-attachment: scroll;
    background-attachment: fixed;
    background-size: 10%;
    background-position: 60%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

/*---------------   Mobile Header   ---------------*/

.header {
    width: 100%;
    position: fixed;
    height: 130px;
    line-height: 130px;
    padding: 15px;
    background-color:rgba(255, 255, 255, .8);
    z-index: 100;
}

.user_name {
    font-size: 5em;
    font-weight: 300;
	background: linear-gradient(to right, #16b5e2 0%, #330867 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    float: left;
}

.phone_icon {
    font-size: 6.2em;
    display: inline;
    float: right;
    margin-right: 7%;
}

.resume_icon {
    font-size: 4.3em;
    display: inline;
    float: right;
    margin-right: 7%;
}

.email_icon {
    font-size: 4.5em;
    display: inline;
    float: right;
    margin-right: 7%;
}

.linkedin_icon {
    font-size: 5em;
    display: inline;
    float: right;
    margin-right: 10%;
}

.phone {
    display: none;
    
}

.resume {
    display: none;
}

.email {
    display: none;
}

.linkedin {
    display: none;
}


/*---------------   Mobile Main Projects   ---------------*/


.featured_1_project {
	background: url(../images/featured_1_mobile_bg.png) no-repeat;
    background-size: 100%;
    background-position: right;
    width: 100%;
    height: 500px;
}

.featured_2_project {
	background: url(../images/featured_2_mobile_bg.png) no-repeat;
    background-size: 100%;
    background-position: right;
    width: 100%;
    height: 1000px;
    margin-top: 40%;
    margin-bottom: 25%;
}

.featured_1_project_text {
    border: 0px solid;
    text-align: center;
    width: 80%;
    margin: auto;
    position: relative;
    top: 85%;
}

.featured_2_project_text {
    border: 0px solid;
    text-align: center;
    width: 80%;
    margin: auto;
    position: relative;
    top: 55%;
}

.main_project_btn {
    display: inline-block;
    width: 800px;
    height: 200px;
    line-height: 200px;
    font-size: 3.5em;
    text-decoration: none;
    background-color: rgba(255, 255, 255, .8);
    padding-left: 0px;
}



/*---------------   Mobile Sub Projects   ---------------*/

.project_1_text {
    border: 0px solid;
    text-align: center;
    width: 80%;
    margin: auto;
    position: relative;
    top: 65%;
}

.project_2_text {
    border: 0px solid;
    text-align: center;
    width: 80%;
    margin: auto;
    position: relative;
    top: 65%;
}

.project_3_text {
    border: 0px solid;
    text-align: center;
    width: 80%;
    margin: auto;
    position: relative;
    top: 77%;
}

.project_4_text {
    border: 0px solid;
    text-align: center;
    width: 80%;
    margin: auto;
    position: relative;
    top: 78%;
}

.project_5_text {
    border: 0px solid;
    text-align: center;
    width: 80%;
    margin: auto;
    position: relative;
    top: 75%;
}

.project_6_text {
    border: 0px solid;
    text-align: center;
    width: 80%;
    margin: auto;
    position: relative;
    top: 75%;
}

.project_7_text {
    border: 0px solid;
    text-align: center;
    width: 80%;
    margin: auto;
    position: relative;
    top: 69%;
}

.project_8_text {
    border: 0px solid;
    text-align: center;
    width: 80%;
    margin: auto;
    position: relative;
    top: 77%;
}
    
    
.project_btn {
    display: inline-block;
    width: 800px;
    height: 200px;
    line-height: 200px;
    font-size: 3.5em;
    text-decoration: none;
    background-color: rgba(255, 255, 255, .8);
    padding-left: 0px;
}
    
.arrow::after {
    content: "\f054";
    font-family: FontAwesome;
    padding-left: 5%;
}

.project_1_left {
	background: url(../images/project_1_mobile_bg.png) no-repeat;
    background-size: 100%;
    background-position: right;
    width: 100%;
    height: 1600px;
    margin-top: -15%;
}

.project_2_right {
	background: url(../images/project_2_mobile_bg.png) no-repeat;
    background-size: 100%;
    background-position: right;
    width: 100%;
    height: 1500px;
    margin-top: -35%;
}

.project_3_left {
	background: url(../images/project_3_mobile_bg.png) no-repeat;
    background-size: 100%;
    background-position: right;
    width: 100%;
    height: 1800px;
    margin-top: -40%;
}

.project_4_right {
	background: url(../images/project_4_mobile_bg.png) no-repeat;
    background-size: 100%;
    background-position: right;
    width: 100%;
    height: 1500px;
    margin-top: -25%;
}

.project_5_left {
	background: url(../images/project_5_mobile_bg.png) no-repeat;
    background-size: 100%;
    background-position: right;
    width: 100%;
    height: 1800px;
    margin-top: -30%;
}

.project_6_right {
	background: url(../images/project_6_mobile_bg.png) no-repeat;
    background-size: 100%;
    background-position: right;
    width: 100%;
    height: 1700px;
    margin-top: -25%;
}

.project_7_left {
	background: url(../images/project_7_mobile_bg.png) no-repeat;
    background-size: 100%;
    background-position: right;
    width: 100%;
    height: 1700px;
    margin-top: -25%;
}

.project_8_right {
	background: url(../images/project_8_mobile_bg.png) no-repeat;
    background-size: 100%;
    background-position: right;
    width: 100%;
    height: 1700px;
    margin-top: -40%;
    margin-bottom: 20%;
}

.footer:before {
    font-size: 2em;
    float: right;
    padding-right: 5%;
    margin-bottom: 10px;
    content: "\00a9  2019 Cam Guest. Hooray!";
}

/*---------------   Mobile Project Page   ---------------*/

.hr {
    border: 0;
    border-bottom: 2px dashed #000000;
    position: relative;
    top: 38.5%;
    width: 90%;
    margin-bottom: 1.1em;
    margin-top: 1em;
}

.stats {
    width: 80%;
    height: 175px;
    margin-left: 5%;
    position: relative;
    top: 39%;
}

.stat_left {
    float: left;
}

.stat_right {
    float: right;
}

.stat_heading {
    font-size: 3.5em;
    font-weight: 300;
}

.stat_number {
    font-size: 4.5em;
    font-weight: 300;
}

.project_bg {
    background: url(../images/main_bg.jpg) no-repeat;
    background-size: cover;
    height: 4700px;
    width: 100%;
    margin-bottom: 1%;
}

.project_page_text {
    width: 90%;
    padding-top: 110%;
    position: relative;
}

.body_copy {
    width: 90%;
    margin-top: 55%;
    margin-left: 5%;
}
    
.project_main {
    width: 100%;
    margin-top: 0%;
}    


.project_showcase_06_top {
    background: url(../images/project_6_showcase_01.png) no-repeat;
    background-size: 100%; 
    width: 100%;
    height: 525px;
    margin-top: -305%;
    margin-right: 0%;
}
    
.project_showcase_06_side_img_01 {
    background: url(../images/project_6_showcase_02.png) no-repeat;
    background-size: 100%;
    float: left;
    width: 90%;
    height: 1089px;
    margin-top: -165%;
    margin-left: 6%;
}

    
}