/* COLOUR SCHEME */
/* black: #333333 */
/* white: #ffffff */
/* grey: #4C5364 */
/* grey blue: #A2BBDD */
/* blue: #4A6FA5 */
/* light blue: #D3E3FC */

/* FONT STYLE */
/* headers, navigation: Karla */
/* body: Lato */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
    font-size: 13px;
    color: #333333;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

/* NAVIGATION SETTINGS */
#navigation {
    background-color: #ffffff;
    padding: 16px 20px;
    z-index: 100;
    width: 100%;
    font-family: 'Karla', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* valarylim brand name */
.navbar-brand, 
.navbar-brand:hover {
    color: #333333;
    padding: 0 20px;
    font-size: 16px;
}


/* navigation links */
#navigation li {
    padding: 0 20px;
}

/* center navigation links */
@media (min-width: 1000px) {
    .navbar-nav {
        margin-left: 25%;
    }
}

/* set colour for links */
.nav-link {
    color: #4C5364;
}

.nav-link:hover {
    color: #4A6FA5;
}

/* fix navigation to the top of page */
.fixedNav #navigation {
    position: fixed;
    top: 0;
}

/* HEADER */
img#headerImage {
    width: 100%;
}

/* SECTIONS - GENERAL */
.section {
    padding: 50px 0;
}

.sectionTitle {
    font-family: 'Karla', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
}

.sectionTagline {
    text-align: left;
    font-family: 'Karla', sans-serif;
    letter-spacing: 0.1em;
    font-weight: 700;
    padding-bottom: 10px;
    margin: 20px 0 10px 0;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    text-transform: uppercase;
}

/* SECTIONS - ABOUT */
.aboutSection {
    background-color: #4A6FA5;
    padding: 70px;
}

/* console */
#code {
    border-radius: 5px;
    width:750px;
    margin: 0 auto;
    padding-top: 15px;
    font-size: 30px;
    background: #ccc;
    height: 380px;
    text-align: left;
    font-family: 'Inconsolata', monospace;
    font-size: 14px;
    color: #fafafa;
 }
    
#console {
    width: 750px;
    padding: 60px 80px;
    height: 380px;
    margin: 0 auto;
    background: #383737;
}

.jsonDetails {
    /* indentation for json code */
    padding-left: 40px;
}

.jsonDetails a {
    color: #2A9DF4
}

/* SECTIONS - RESUME */
@media (min-width: 800px) {
    .resumeSection {
        margin: 20px 200px;
    }
}

@media (max-width: 800px) {
    .resumeSection {
        margin: 20px 100px;
    }
}

.resumeSubsection {
    /* spacing in between each listing */
    padding: 40px 0;
    
}


/* icons */
img.resumeIcon {
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #ccc;
    float: left;
    display: block;
    margin-top: 5px;
    opacity: 0.8;
    z-index: 0;
}

/* names */
.resumeName {
    font-weight: bold;
    font-size: 17px;
    color: black;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.resumeDesc {
    font-style: italic;
    font-size: 15px;
    color: black;
    margin: 0 0 10px 0;
}

.resumeLink {
    color: #333333;
    font-weight: bold;
}

.resumeRole {
    font-weight: bold;
    font-size: 15px;
    color: black;
    margin: 0 0 5px 0;
}

.resumeSubheader {
    font-size: 15px;
    color: #485C82;
    font-weight: bold;
    margin-bottom: 5px;
}

.resumeDateLoc {
    line-height: 0.5em;
}

/* lists */
.resumeList {
    list-style-type: circle;
}

/* skills cell */
.resumeSkill {
    color: #4A6FA5;
    border: 1px solid #4A6FA5;
    margin-right: 10px;
    text-transform: uppercase;
    font-weight: 600;
    width: auto;
    display: inline-block;
    font-size: 9px;
    line-height: 1.33333em;
    padding: 7px 18px;
    margin-top: 0.8em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
}

table {
    width: 100%;
}

th, td {
    padding: 0 15px 0 0;
    text-align: left;
    vertical-align: top;
    
}

/* SECTIONS - PORTFOLIO */
.portfolioSection {
    background-color: #fafafa;
    align-items: center;
    align-content: center !important;
}
  
/* Style the buttons */
.btn {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    border: none;
    outline: none;
    border-radius: 8px;
    padding: 10px 10px;
    width: 150px;
    margin: 10px 5px;
    background-color: #f1f1f1;
    cursor: pointer;
}
  
/* Add a dark background to the active button */
.btn.active {
    background-color: #4A6FA5;
    color: #ffffff;
    font-weight: bold;
}

.btn:hover {
    font-weight: bold;
    background-color: #ccc;
}

.itemsContainer {
    text-align: left;
}

/* project listing */
.item {
    display: inline-block;
}

.filterItem {
    background-color: #ffffff;
    width: 500px;
    height: 725px;
    margin: 20px;
    display: none;
    border-radius: 8px;
}

/* The "show" class is added to the filtered elements */
/* !NEEDS TO BE AFTER .filteritem */
.show {
    display: inline-block;
}

/* image */
.filterItemImg {
    vertical-align: top;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* description */
.filterItemDesc {
    padding: 0 30px;
    line-height: 22px;
}

.filterItemName {
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
}

.filterItemLink {
    color: #333333;
    font-weight: bold;
}

/* SECTIONS - CONTACT */
.contactSection {
    background-color: #4A6FA5;
    color: white;
    width: 100%;
}

.contactSection .container {
    max-width: 100%;
    padding: 50px 0;
    margin: 0 auto;
    text-align: center;
}


.contactLink, .contactLink:hover {
    color: white;
}

.copyright {
    margin: 30px 5px;
    font-size: 10px; 
}

/* ENDS HERE */

@media (max-width: 800px) {
    img.resumeIcon {
        display: none;
    }
}