/*
Blue color #1e90ff
Orange color #ff7f50
*/

/* ------------------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------------------ */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html,
body {
    background-color: #fff;
    /* global font settings */
    color: #555;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    /* if content is wider than browser width, it gets cut off */
    overflow-x: hidden;
}

p { line-height: 140%; }

/*
gotta put these clearfix in for UL class meals-showcase, because the child elements of this class, the LI elements, have the FLOAT property.
so we say that the parent has this clearfix class and then the float will be cleared right after the UL element.
these floats have to be cleared once they're done floating.
*/
.clearfix {zoom: 1}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* ------------------------------------------------------ */
/* REUSABLE COMPONENTS */
/* ------------------------------------------------------ */

.row {
    max-width: 1140px;
    margin: 0 auto;
}

section {
    padding: 80px 0;
}

.box {
    /* padding: 1%; */
    padding: 1% 0.5% 0% 0.5%;
}

/* ----- HEADINGS ----- */

h1,
h2,
h3 {
    font-weight: 300; /* decrease font weight for larger fonts */
    text-transform: uppercase;
}

h1 {
    margin-top: 0; /* since normalize.css gave h1 margins */
    margin-bottom: 20px;
    color: #fff;
    font-size: 250%; /* in responsive web design we want everything to be relative */
    word-spacing: 4px; /* setting the space between words */
    letter-spacing: 1px; /* setting the space between letters */
}

h2 {
    font-size: 180%;
    word-spacing: 2px;
    text-align: center;
    /* font-weight: 700; */
    margin-bottom: 38px;
    letter-spacing: 1px; /* setting the space between letters */
}

h3 {
    font-size: 140%;
    font-weight: bold;
    margin-top: 20px;
}

h2:after { /* orange line below h2 */
    display: block;
    height: 2px;
    background-color: #1e90ff;
    content: " ";
    width: 100px;
    margin: 0 auto;
    margin-top: 30px;
}

h3:after {
    display: block;
    height: 1px;
    background-color: #555;
    content: " ";
    width: 100%;
    margin: 0 auto;
    margin-top: 5px;
}

/* ----- PARAGRAPHS ----- */

.long-copy {
    line-height: 145%;
    width: 70%;
    margin-left: 15%;
}

.box p {
    font-size: 90%;
    line-height: 145%;
}

/* ----- ICONS ----- */

.icon-big {
    font-size: 200%;
    display: inline-block;
    color: #1e90ff;
    margin: 0 10px 10px 0;
    vertical-align: middle;
}

.icon-small {
    display: inline-block; /* in order to be able to set width */
    width: 30px;
    text-align: center;
    color: #1e90ff;
    font-size: 120%;
    margin-right: 10px;

    /* secrets to align text and icons */
    line-height: 120%;
    vertical-align: middle;
    margin-top: -5px;
}

/* ----- LINKS ----- */

a:link,
a:visited {
    color: #1e90ff;
    text-decoration: none; /* removing default link underline... */
    padding-bottom: 1px; /* space between text and bottom border */
    border-bottom: 1px solid #1e90ff; /* but we add an underline via border-bottom */
    -webkit-transition: border-bottom 0.2s, color 0.2s;
    transition: border-bottom 0.2s, color 0.2s;
}

a:hover,
a:active {
    color: #555; /* default body text color from global font settings up top */
    border-bottom: 1px solid transparent; /* make the border disappear */
}


/* ------------------------------------------------------ */
/* HEADER */
/* ------------------------------------------------------ */

header {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.75)), to(rgba(0, 0, 0, 0.75))), url(img/hero-jun.jpg);
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(img/hero-jun.jpg);
    /* linear-gradient puts a gradient on top of the img, takes two colors, we just kept it at one for this instance */
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;
}

.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
}

.hero-text-box h1 {
    text-transform: none;
    margin-bottom: 20px;
}

.hero-text-box p {
    font-size: 120%;
    letter-spacing: 1px;
}

.arrow {
    width: 100%;
    text-align: center;
    font-size: 300%;
    margin: 20px auto;
    color: #1e90ff;
}

.arrow a:link,
.arrow a:visited {
    text-decoration: none;
    border: 0;
}

.arrow a:hover,
.arrow a:active {
    color: #ff7f50;
}

.logo-pix {
    height: 50px;
    width: auto;
    float: left;
    margin-top: 20px;
}

.logo-jun {
    display: none;
    height: 50px;
    width: auto;
    float: left;
    margin: 5px 0;
}

/* Main nav */

.main-nav {
    float: right;
    /* no bullets in the list */
    list-style: none;
    margin-top: 55px;
}

.main-nav li { /* all the li elements within main-nav */
    display: inline-block; /* so they can be side by side */
    margin-left: 40px;
}

.main-nav li a:link,
.main-nav li a:visited { /* all the a elements within the li elements within main-nav */
    padding: 8px 0;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    /* hover under is invisible until hovered */
    border-bottom: 2px solid transparent;
    -webkit-transition: border-bottom 0.2s;
    transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
    border-bottom: 2px solid #1e90ff;
}

/* Mobile nav */
.mobile-nav-icon {
    float: right;
    margin-top: 30px;
    /* since there's no href in the icon, need to turn cursor into a pointer */
    cursor: pointer;
    display: none;
}

/* styling the hamburger icon */
.mobile-nav-icon i {
    font-size: 200%;
    color: #fff;
}

/* Sticky nav */

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* white with 70% opacity */
    background-color: rgba(255, 255, 255, 0.7);
    /* 0 on the X axis, 2px on the Y axis, 2px blur, efefef light grey for the color */
    box-shadow: 0 2px 2px #efefef;
    /* sticky nav will always be on top, 9999 is highest possible value */
    z-index: 9999;
}

/* less padding up top when sticky */
.sticky .main-nav { margin-top: 20px; }

/* borrowing what we need from above, applies only in sticky */
.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
    /* increasing padding in sticky nav link and underline */
    padding: 16px 0;
    color: #555;
}

/* if the logo-pix is inside the sticky nav, hide. otherwise display (by default) */
.sticky .logo-pix { display: none; }

/* show jun logo when sticky */
.sticky .logo-jun { display: block; }


/* ------------------------------------------------------ */
/* RESUME */
/* ------------------------------------------------------ */

/*
.rez {
    margin-top: 0px;
}
*/

.rez-top {
    margin-bottom: 0px;
}

.download {
    margin-top: -10px;
    margin-bottom: 10px;
}

.section-resume .col:first-child {
    font-weight: bold;
    font-style: italic;
    padding-right: 2%;
}

.section-resume .col:last-child {
    text-align: right;
}

.rez-title {
    margin-top: 15px;
    margin-bottom: 10px;
}

.rez-note {
    font-style: italic;
}


/* ------------------------------------------------------ */
/* REEL */
/* ------------------------------------------------------ */

.section-reel {
    background-color: #f4f4f4;
}

.reel-main {
    padding: 0;
    margin: 0 auto;
}


/* ------------------------------------------------------ */
/* PHOTOS */
/* ------------------------------------------------------ */

.photos-main {
    padding: 0;
    margin: 0 auto;
}

.headshot-main {
    width: 100%;
    /* max-width: 1140px; */
    /* margin: 0 auto; */
}

.photos-showcase {
    list-style: none;
    width: 100%;
}

.photos-showcase li {
    display: block;
    float: left;
    width: 32.666%;
    margin-top: 1%;
    margin-right: 1%;
}

.photos-showcase li:last-child {
    margin-top: 1%;
    margin-right: 0;
}

.photo {
    width: 100%;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
}

/* ------------------------------------------------------ */
/* CONTACT */
/* ------------------------------------------------------ */

.section-contact {
    background-color: #f4f4f4;
}

.contact-title {
    text-transform: uppercase;
    font-size: 110%;
    margin-bottom: 8%;
    font-weight: 700;
}

.contact-2 {
    margin-bottom: 8%;
}

.contact-direct {
	text-align: center;
	margin: 0 auto;
	width: 240px;
}


/* ------------------------------------------------------ */
/* FOOTER */
/* ------------------------------------------------------ */

footer {
    background-color: #333;
    padding: 30px;
    font-size: 90%;
}

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