/* BOOTSTRAP 3 RESPONSIVE DESIGN THRESHOLDS ***************/
/*
XS = EXTRA SMALL = Width range 0-767 pixels.
SM = SMALL       = Width range 768-991 pixels.
MD = MEDIUM      = Width range 992-1199 pixels.
LG = LARGE       = Width range 1200+ pixels.

Most CSS is coded on a minimum width, so XS settings would apply to SM, MD, and LG unless overridden at a wider range.
Likewise, MD settings would apply to LG unless overridden in LG.
Beware that some Bootstrap CSS is inconsistent on the SM lower boundary and uses 767px.
*/

/* OUR OWN CUSTOM BREAKPOINTS BASED ON THE DESIGN *********/
/*
460px - When contact page blocks stack vertically.
551px - When Portfolio/Resume/Contact options shift from under, to next to, brand.
736px - When portfolio tab options switch from vertical stacking to horizontal.
*/

/* STANDARD HTML TAGS *************************************/
html, body, h1, h2, h3, h4, h5, label {
	font-family: 'Arial', sans-serif;
	font-weight: normal;
	font-size: 20px;
    line-height: 1.2em;
    background-color: transparent;
}

h1 {
	font-size: 64px;
}

h2 {
    font-size: 34px;
    margin-top: 48px;
    margin-bottom: 40px;
}

.whiteText {
    color: rgb(255, 255, 255);              /* white text */
}



.sectionHeader h2 {
	color: #FFFFFF;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 10px;
}

h3 {
    font-size: 28px;
		font-weight: bold;
    margin-top: 0px;
    margin-bottom: 10px;
}

h4, label {    /* Styling specific to contact page. Override Bootstrap settings. */
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 10px;
}

h5 {
    font-size: 24px;
		padding-left: 200px;
		padding-right: 200px;
}

h1, h5 {
    color: #FFFFFF;
		text-align: center;
}

h2, h3, h4, p, label {
    color: #444647;
}

h2 {
    text-align: center;
}

h3, h4, label {
    text-align: left;
}

p {
	font-size: 20px;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 10px
}

h6 {
	font-size: 20px;
	text-align: left;
	margin-top: 1px;
	margin-bottom: 1px
}

b, strong { font-weight: 700; }     /* On a scale of 100-900, define how bold b and strong tags should be. */

a:hover, a:focus {
    text-decoration: none;  /* Disable underlining of all anchor tags. */
}

.links a {
	color: blue;
}
.links a:visited {
	color: purple;
}



ul {    /* Styling specific to resume. */
    padding-left: 20px;
    line-height: 1.0em;
}

ul, ol {    /* Styling specific to resume. Override Bootstrap settings. */
	margin-top: 0px;
	margin-bottom: 0px;
}

ul > li > p {
	line-height: 1.2em;
}
/* GENERAL RULES USED THROUGHOUT **************************/

.center { text-align: center; }
.divCenter { display: inline-block; }

/* COMMON PADDING RULES USED THROUGHOUT *******************/

.sectionPadMedTop {
	margin-top: 94px;
}
.sectionPadMedBottom {
	margin-bottom: 94px;
}

.sectionPadSmallTop {
	margin-top: 20px;
}

.sectionPadSmallBottom {
	margin-bottom: 20px;
}

/* CopyRight Style **************************************/
.copyright.about {
	margin-top: 100px;
	font-size: 16px;
}
.copyright.home {	
	font-size: 16px;
}

/* None.  All padding is specific to one section only. */


/* === BACK TO TOP FLOATER === */
/* Back to Top floater.  This is change 1 of 3.  There are accompanying HTML and JS changes. */
#backToTop {
    width: 50px; /* Create 50px by 50px square container. */
    height: 50px;
    border-radius: 50%; /* Convert square to circular container. */
    position: fixed; /* Lock floating circle to bottom right corner of viewport, 10px from right and bottom. */
    right: 10px;
    bottom: 10px;
    cursor: pointer; /* When cursor is over the circle, change it to a pointer to indicate item is clickable. */
    background-color: #2273A1; /* purple background with no transparency.  Do not want to see through to web page beneath. */
    display: none; /* Initially hide the circular 'back to top' floater when user is at top of web page. */
    z-index: 50; /* Keep 'back to top' floater on top so its color does not fade over images. */
}

#backToTop span {
    /* Styling of span tag embedded within anchor tag that produces the white triangle inside the circular floater. */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: rgb(255, 255, 255); /* White. */
}

#backToTop:hover {
    /* Styling indicating user is hovering over 'back to top' floater. */
    background-color: #00A9CF; /* green background with no transparency.  Do not want to see through to web page beneath. */
}

/* NAVIGATION HEADER **************************************/
.navbar {
  min-height: 94px;                 /* Set minimum height rather than height for responsive design so div expands vertically when viewed on cell phone. */
  border: none;
}

.navbar-inverse, .sectionHeader {                   /* Styling for navigation bar. */
  background-color: #2273A1;        /* Medium dark blue. */
}

.navbar-inverse .navbar-brand {     /* Styling of 'TuckerTalent' brand in left corner of navigation bar. */
    font-size: 34px;
    float: left;
    margin-top: 27px;
}

@media (max-width: 767px) {     /* XS screens: Override Bootstrap so it doesn't push brand in on left side. */
    .navbar-inverse .navbar-brand {
        padding-left: 0px;
    }
}

.navbar-inverse a {
    color: white;
}

.navbarOptionSet {              /* Styling of far right options (Portfolio, Resume, Contact) in navigation bar. */
    float: right;               /* ALL SCREEN SIZES */
    margin-top: 0px;            /* TINY SCREEN ONLY */
    margin-bottom: 10px;        /* TINY SCREEN ONLY */
}

@media (min-width: 496px) {     /* OUR SPECIAL BREAKPOINT BASED ON DESIGN: This is first time that p/r/c options shift to right of brand. */
	.navbarOptionSet {          /* Styling of far right options (Portfolio, Resume, Contact) in navigation bar. */
	    margin-top: 45px;       /* TINY SCREENS & UP */
	    margin-bottom: 0px;     /* TINY SCREENS & UP */
	}
}

.navbarOption {    /* Styling of far right options (Portfolio, Resume, Contact) in navigation bar. */
    float: left;
    margin-right: 20px;
}

.navbarOption:last-child {
    margin-right: 0px;
}

.navbarOption.focused {
    border-bottom: 1px solid #FFFFFF;
}

.navbar-inverse .navbar-brand > a:hover, .navbarOptionSet .navbarOption > a:hover {
    background-color: #47ACCF;         /* Color when hovering over navigation bar option. */
    text-decoration: none;
}

/* INTRODUCTION BLURB *************************************/
.intro-block {                  /* Styling for 'elevator pitch' section on the introduction page. */
    min-height: 475px;          /* ALL SCREEN SIZES: Set minimum height rather than height for responsive design so div expands vertically when viewed on cell phone. */
    height: 115vh;              /* ALL SCREEN SIZES: Expand intro block to take up the entire viewport so we don't see portfolio leaking in from bottom. */
    margin-top: 0px;            /* XS SCREEN ONLY: For some weird reason, we don't have to match height of navbar, even though it has grown to 101px on extra small screens when the far right options (Portfolio, Resume, Contact) relocate under the brand. */
    background: linear-gradient(#2273A1, #47ACCF) /* ALL SCREEN SIZES */
}

@media (min-width: 768px) {     /* SMALL SCREEN AND LARGER. */
	.intro-block {              /* Styling for 'elevator pitch' section on the introduction page. */
	    margin-top: 94px;       /* SM SCREEN & UP: Must match height of navbar, so intro block starts below it rather than underneath it at top of screen. */
	}
}

.welcome {
	margin-top: 200px; /* was 137px */
}

@media (max-width: 412px) { /* OUR SPECIAL BREAKPOINT BASED ON DESIGN: For XS screens, intro block large fonts cannot fit and must be reduced. */
    h1.welcome { font-size: 50px; }
    .intro-block h5 { font-size: 20px; }
    
}

a.seeMyWorkButton { /* Initially hide 'See My Work' button on tiny screens. */
    display: none;
    
   
   
}


.paragPadMed {
    padding-left: 15%;
    padding-right: 15%;
}


/* COMPARATIVE ANALYSIS LOGOS *************************************/
.compareLogos img {
	display: inline-block;
	padding-left:7%;
}
.behanceLogo {
	width: 4%
}


@media (min-device-height: 650px) { /* OUR SPECIAL BREAKPOINT BASED ON DESIGN: When screen height is tall enough to fit 'See My Work' button, show it. */
    a.seeMyWorkButton {
	   display: inline-block;      /* It is illegal to have div inside anchor so we used span.  Force span tag inside anchor tag to behave like a div. */
        text-align: center;
        line-height: 57px;     /* Must set to same value as box height to vertically align in center. */
        background-color: transparent;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 24px;
        min-width: 213px;      /* Based on design's font size. */
        height: 57px;
        border: solid 2px #FFFFFF;
        box-sizing: border-box;
        margin: auto;
        margin-top: 40px;
		
    }

    a.seeMyWorkButton:hover {
	   color: #FFFFFF;
        background-color: #2273A1;         /* Color when hovering over 'See My Work' button. */
        text-decoration: none;
    }
}

/* Projects **********************************************/
#projects .storyTop { margin-top: 60px; }
#projects .storyImageTop { margin-top: 20px; }

#projects h3, .keyFindings {
    margin-top: 20px;
}

.nav-tabs {
	border: 0;         /* Remove thin gray line bottom border defined in Bootstrap. */
}

.portfolioOptionOuter, #portfolio .col-xs-4 {
    float: none;
}

.imgButton {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 0px) and (max-width: 735px) {
    h2 {
        margin-top: 130px;
    }

    .portfolioOptionOuter {
        width: 325px;
        margin: 0 auto;
    }
}

@media (min-width: 736px) {     /* OUR SPECIAL BREAKPOINT BASED ON DESIGN: This is first time there is enough space for portfolio options to spread out on one line from being stacked on tiny screens. */
    h2 {
        margin-top: 120px;
    }

    .portfolioOptionOuter, #portfolio .col-xs-4 {
        float: left;
    }

    .triangleDown {     /* We only want triangle when portfolio options are lined up horizontally, not when stacked vertically on tiny screens. */
	    width: 0px;
	    height: 0px;
	    border-left: 30px solid transparent;
	    border-right: 30px solid transparent;
	    border-top: 20px solid #2273A1;
        margin-top: -2px;
        margin-left: 60%; /* 200px; */
    }
}

.portfolioOption {
	display: block;        /* It is illegal to have div inside anchor so we used span.  Force span tag inside anchor tag to behave like a div. */
	text-align: center;
	line-height: 57px;     /* Must set to same value as box height to vertically align in center. */
	background-color: white;
    color: #2273A1;
    font-weight: normal;
	font-size: 24px;
	min-width: 202px;      /* Based on design's font size and minimum acceptable width of widest element, Responsive App. */
	height: 57px;
	border: solid 2px #2273A1;
	box-sizing: border-box;
}

.portfolioOption.focused {
	background-color: #2273A1;
    color: white;
    font-weight: bold;
}

.triangle {
	display: block;        /* Force span tag inside anchor tag to behave like a div. */
}

@media (max-width: 991px) { /* OUR SPECIAL BREAKPOINT BASED ON DESIGN: For XS and SM screens, portfolio is totally stacked vertically, so story blurbs are above, and not next to, their corresponding images. */
    #portfolio .row.storyTop > .col-xs-12 {
        margin-bottom: 20px;
    }
}

@media (min-width: 992px) { /* OUR SPECIAL BREAKPOINT BASED ON DESIGN: For MD and larger screens where story blurb appears to right of image. */
    #portfolio .storyTop p.right {
	   text-align: right;
    }
}

#portfolio img {
	float: right;
}

/* RESUME *************************************************/
#resume h2 {
    margin-bottom: 0px;
}

#resume h3 {
    margin-top: 40px;
    margin-bottom: 30px;
}

#resume .subtext {
    font-size: 20px;
}
#resume .hollowBullet {
	display: inline-block;     /* Even though this class is applied to span tags, we need this setting or else bullets will be distorted and appear as vertical lines. */
	width: 10px;
	height: 10px;
	border: solid 2px #2273A1;
	border-radius: 50%;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 3px;    /* Vertically aligns bullet in center between words. */
	background-color: white;
}

#resume .years {
	color: #B2B2B2;
    margin-bottom: 10px;
}

#resume .yearsTop {
    padding-top: 20px;
}

#resume .jobTitle, #resume .educationTitle {
	color: #2273A1;
	font-size: 24px;
	margin-top: 30px;
}

#resume p.jobTitle.first, #resume p.educationTitle.first {
	margin-top: 0px;
}

#resume p.companyLoc {
	margin-top: 10px;
	margin-bottom: 10px;
}

#resume table > tbody > tr {
	vertical-align: top;
}

#resume table > tbody > tr > td:first-child {
	width: 40px;
	text-align: left;
}

#resume table > tbody > tr > td:first-child > .hollowBullet {
    margin-left: 0px;
}

/* CONTACT ************************************************/
#contact .smallSpacing { margin-top: 30px; }
#contact .mediumSpacing { margin-top: 50px; }
#contact .largeSpacing { margin-top: 100px; }

#contact .row { /* Override Bootstrap 3 so the left edge of the left box and the right edge of the right box on contact page align with nav bar header. */
	margin-left: 0px;
	margin-right: 0px;
}
@media (max-width: 991px) {
	.smallSpaceTop {
		margin-top: 20px;
	}
}

@media (min-width: 992px) { /* Need to override Bootstrap 3 which sets col-md-5 and its push/pull to 50% and the two boxes butt up against each other with no space in between. */
    #contact .col-md-6      { width: 48%; }
    #contact .col-md-push-6 { left: 52%; }
    #contact .col-md-pull-6 { right: 48%; }
}

#contact .box {
	border: 1px solid gray;
	box-sizing: border-box;
	padding: 30px;
}

#contact .shadowBox {   /* Not used.  Adds 3-D depth effect to the two boxes on contact page.  Kept in CSS file as FYI. */
    box-shadow: 0px 0px 4px 2px gray;
}

@media (max-width: 460px) {     /* OUR SPECIAL BREAKPOINT BASED ON DESIGN: For tiny screens, contact details run outside box because 24px font is too big. */
    #contact .row.details {
        margin-left: -25px;
        margin-right: 0px;
    }

    #contact h4, #contact label {
        font-size: 20px;
        margin-top: 5px;
    }
}

@media (max-width: 991px) { /* OUR SPECIAL BREAKPOINT BASED ON DESIGN: When contact boxes are stacked vertically, insert space above the form. */
	#contact div.col-xs-12.col-md-6.col-md-pull-6.box {
	   margin-top: 30px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) { /* OUR SPECIAL BREAKPOINT BASED ON DESIGN: For medium screens with side by side contact form and details, contact details run outside box because 24px font is too big. */
    #contact h4, #contact label {
        font-size: 20px;
        margin-top: 5px;
    }
}

#contact .inputField {
	position: relative;
	margin-top: 50px;
	outline: 0;
}

#contact .inputField input[type="text"] {
    height: 30px;
}

#contact .inputField input, #contact .inputField textarea {
    font-family: inherit;
    color: #333;
    font-size: 18px;
    line-height: 18px;
    font-weight: 300;
    padding: 10px 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid gray;
    border-radius: 0;   /* Ensure that bottom border is a straight line. */
    outline: 0;     /* Prevent box from appearing around input field when cursor is inside. */
}

#contact .inputField label {    /* Applicable to label tag when form first loads with empty value in corresponding field. */
    top: 25px;
    position: relative;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;   /* Transition waits for the label tag to change before it kicks in. */
}

#contact .inputField.chosen label { /* Applicable to label tag when user clicks on input field. Animated transition will arrive at the CSS below. */
    font-size: 16px;
    top: -10px;
    color: #2273A1;
}

#contact .inputField.chosen input, #contact .inputField.chosen textarea {
	border-bottom: 1px solid #2273A1;
}

#contact .inputField textarea {
    resize: none;	/* Avoid growing textarea and have its bottom border appear just like the other input fields as a straight line. */
}

#contact .error {
    color: #D92525;
}

.btn.btn-lg {   /* Apply sharp 90 degree edges to contact form Send and OK buttons to match 'See My Work' and portfolio tab buttons on home page. */
	border-radius: 0;
}

.emailCryptic:before {      /* Convoluted way to use HTML and CSS to obscure an e-mail address from bots. */
        content: attr(data-website) "\0040" attr(data-user);
        unicode-bidi: bidi-override;
        direction: rtl;
}

.phoneCryptic:before {      /* Convoluted way to use HTML and CSS to obscure a phone number from bots. */
/*         content: attr(data-ext) "\002D" attr(data-exchange) "\0020\0028" attr(data-area) "\0029"; */ /* zzzz-yyy (xxx) in right-to-left direction where xxx is area code, yyy is exchange, zzzz is extension. */
        content: attr(data-ext) "\002D" attr(data-exchange) "\002D" attr(data-area);    /* zzzz-yyy-xxx  in right-to-left direction where xxx is area code, yyy is exchange, zzzz is extension. */
        unicode-bidi: bidi-override;
        direction: rtl;
}

.map {
    height: 315px;
    width: 100%;
}