/*
Author: Tri Nguyen, User Experience Designer
Portfolio: triducnguyen.info
Contact: triwashere@gmail.com

Note: This is the personal portfolio of Tri. This project is both an experiment for new code and exploring interaction design ideas.
If you would like to contact me for work regarding usability and experience design, feel free to contact me with the information above;
*/

@import url('css/meyer-reset.css');
@import url('css/typography.css');
@import url('css/header.css');
@import url('css/button-styles.css');
@import url('css/back-top-menu.css');
@import url('css/social-buttons.css');
@import url('css/slider.css');

/*Headroom Header plugin -- display block for pinned and display none for unpinned*/
.headroom {position: fixed; z-index: 1; transition: transform 200ms linear; left: 0; right: 0; top: 0;}
/* This pins and unpins header, uncomment to activate
.headroom--pinned {transform: translateY(0%); opacity: 0.92;}
.headroom--unpinned {transform: translateY(-100%);}
*/

body {
    -webkit-backface-visibility: hidden;
    font-family: "BrandonGrotequeLight", Helvetica, Arial;
    background: #ffffff url("#"); /*#f4f4f4*/
    margin: 0 auto;
}

a { text-decoration: none; cursor: pointer;}

img {
  max-width: 100%;
  height: auto;
}

nav{
    background-color: #101421;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
nav ul li a.active {color: #fff;}
nav ul li a:hover{color: #2fbfc2;}

article {
    zoom: 1;
    max-width: 2560px;
    margin-top: 1em;
    margin-left: 4%;
    margin-right: 4%;
}
article:before, article:after {
    content: " ";
    display: table;
}
article:after {
    clear: both;
}

article section h1{
    margin:0 auto;
    color: #ffffff;
    font-family: 'BrandonGrotequeMed', sans-serif;
    font-size: 3.5em;
    text-transform: uppercase;
    /*text-shadow: 0 2px 0 #12B0AD;*/
    padding: 120px 0px 40px 0px;
    width: 420px;
}

article section h2{
    font-family: "BrandonGrotequeLight", Helvetica, Arial;
    font-size: 2.5em;
    line-height: 1.4;
    color: #2fbfc2;
    font-weight: normal;
    /*text-shadow: 0 1px 0 #12B0AD;*/
    padding: 0px 0px 10% 0px;
}
article section h4{
    font-family: "BrandonGrotequeMed", Helvetica, Arial; 
    text-transform:uppercase; 
    font-size: 1em; 
    color:#12B0AD; 
    padding: 0px 0px 10% 0px;
}

article#home_header{
    background: #101421;/*linear-gradient(to right, #119694 0%, #03ae8d 100%);*/
    margin-left: 0%;
    margin-right: 0%;
}

.divider0 { border-top: 1px solid #eee; margin-top: 40px; padding: 0;}

#link_areas {position: relative; display: inline;}
article #chevron-right{font-size: 1.74em;}

section.masthead {
    padding-top: 40px;
}

section {
    text-align: center;
    margin-left: 0%}
section h1 {
    font-family: "BrandonGrotequeMed", BrandonGrotequeLight, Helvetica, Arial;
    font-size: 2.50em;
    color: #323132; /*#888*/
    font-weight: normal;
    padding-bottom: 4%;
}
section img {
    width: 200px;
    margin: -2em 0 2em;
    opacity: 0.75;
}

#circle{
    display: block;
    margin: auto;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
    background: url('img/down-arrow.png') no-repeat center center, rgba(255,255,255,0.02);
    background-size: 40px 42px;
}

#circle:hover{cursor: pointer; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);}

/**PORTFOLIO CONTENT*************/
.button {
    float: right;
    background-color: #323132;
    padding: 5px;
    letter-spacing: 2px;
    font-size: 0.70em;
    text-transform: uppercase;
    border:#615f61 1px solid;
    border-bottom: #615f61 4px solid;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 2px;
    color: #fff;
    margin: 19px 0 0 0px;
}

.partext {
    margin: 0 auto;
    width: 100%;
    float: left;
    font-family: "BrandonGrotequeLight", Helvetica, Arial;
    font-size: 1.1em;
    text-align: center;
    padding: 5px 0px;
}
/*About**************************************************************/

#about{
    background-color: rgba(46,48,58,0.96);
    text-align: center;
    padding: 20px 10% 40px 10%;
    margin: auto;
    color: #e2e2e2;
    /*
    border-top: 2px solid #555;
    border-bottom: 2px solid #000;
    */
}

#about h2{
    margin: 10px 0px 20px 0px;
    font-family: "BrandonGrotequeMed", Helvetica, Arial;
    font-size: 2.5em;
    text-transform: uppercase;
    color: #fff;
}

#about h3{
    padding: 15px;
    padding-bottom:0;
    padding-top: 0;
    color: #fff;
    text-align: center;
    font-family: "BrandonGrotequeLight", Helvetica, Arial;
    font-size: 2.5em;
    text-shadow: 0 1px 0 #888888;
}

#about p{padding: 15px; line-height: 1.5; text-align: center;  font-size: 1.6em;}

.divider1 {
    border-top: 1px solid #1A1C21; /*Darker*/
    border-bottom: 1px solid #4D5260; /*Lighter*/
    margin: 0 50px;
}

.mobile-about{display: none;}


/*SHARE BUTTONS*/

/* ################# CIRCLE GRAVATAR ################# */

.me {
    display: block;
    margin: 3em auto;
    max-width: 200px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #555;
    position: relative;
    z-index: 0;
}

/*Contact**************************************************************/

#contact{
    background-color: #fff;
    text-align: center;
    padding: 20px 12% 50px 14%;
    margin: auto;
    /*
    border-top: 2px solid #555;
    border-bottom: 2px solid #000;
    */
}

#contact h2{
    margin: 10px 0px 20px 0px;
    font-family: "BrandonGrotequeMed", Helvetica, Arial;
    font-size: 2.5em;
    text-transform: uppercase;
    color: #333;
}

#contact h3{
    padding: 40px 0px 10px 0px;
    color: #333;
    text-align: center;
    font-family: "BrandonGrotequeLight", Helvetica, Arial;
    font-size: 2.5em;
    text-shadow: 0 1px 0 #fff;
}

#contact p{padding: 15px; margin-bottom: 30px; line-height: 1.8; text-align: center; font-size: 1.6em;}

.divider2 {
    border-top: 1px solid #eee;
    margin: 0 15px;
    /*border-bottom: 1px solid #555;*/
}

/*FOOTER*/
footer {
    width: 100%;
    background-color: rgba(46,48,58,0.96);
    overflow: hidden;
    padding: 50px 0px;
}

footer p{text-align: center; color: #fff;}

/*Media Query**************************************************************/

@media screen and (min-width: 1280px) and (max-width: 2560px) {


/*Tablet*/
@media screen and (max-width: 768px) {

}

/*****************MOBILE********************/
@media screen and (max-width: 480px) {

article section h1 {margin-left: -2%;}
section h2 {visibility:visible;}

#about {display: none;}
#contact {display: none;}

#back-top{
    visibility: hidden;
}

} /*************End Mobile Media Query***********/