body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: #fff;
    color: #000;
    cursor: default;
}
header {
    background-color: #777;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3), 0 -33px 28px rgba(0, 0, 0, 0.4) inset;
    height: 60px;
    width: 100%;
}
footer {
    padding-top: 10px;
    text-align: center;
    vertical-align: top;
    height: 30px;
    font-size: 0.8em;
}
ul {
    display: inline;
}
li {
    display: inline-block;
    list-style: none outside none;
}

#navigation-links {
    width: 100%;
}
#navigation-links li {
    width: 170px;
    height: 60px;
    font-size: 1.5em;
    margin-left: -5px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
#navigation-links li.first {
    margin-left: -40px;
}
#navigation-links li a {
    display: block;
    height: 60px;
    padding-top: 13px;
}
#navigation-links a:link {
    color: #fff;
    text-decoration: none;
}
#navigation-links li.selected {
    background-color: #006699;
    box-shadow: 0 -33px 28px rgba(0, 0, 0, 0.4) inset;
}
#navigation-links li:hover {
    background-color: #00a8e2;
    box-shadow: 0 -33px 28px rgba(0, 0, 0, 0.4) inset;
}

@media (max-width: 1200px) {
    .interactive-image {
        display: none;
    }
    #home-works {
        display: none;
    }
}
@media (max-width: 768px) {
    header {
        height: 120px;
    }
}
@media (max-width: 480px) {
    header {
        height: 180px;
    }
    #navigation-links li:first-child {
        margin-left: -45px;
    }
}
.row {
    margin: 0px;
}
.footer {
    margin-top: 30px;
    margin-bottom: 15px;
}

/********
 * Home *
 ********/

.framed-title {
    width: 300px;
    height: 50px;
    padding: 10px;
    display: inline-block;
    font-size: 1.6em;
    background-color: #fff;
    border: solid 1px #CCC;
    -moz-box-shadow: 4px 4px 4px #888;
    -webkit-box-shadow: 4px 4px 4px #888;
    box-shadow: 4px 4px 4px #888;
}

#home-content {
    max-width: 1280px;
    margin: auto;
    margin-top: 30px;
}
#home-content .row-grid  {
    padding: 130px 10px 20px;
    text-align: center;
    filter: grayscale(100%);
}
#home-content .row-grid:hover {
    filter: none;
}
#home-content .fas, #home-content .far {
    display: block;
    color: #888;
    margin-top: -80px;
}
#home-content h2 {
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    padding-bottom: 20px;
}
#home-skills {
    height: 300px;
}

#profile {
    width: 100%;
    min-height: 270px;
    height: auto;
    border: 1px solid #e8e8e8;
    box-shadow: 0 0 0 -3px rgba(0, 0, 0, 0);
    padding: 10px;
}
#profile h1 {
    font-size: 1.8em;
}
#profile span {
    display: inline-block;
}

#home-works .portfolio .card_container:last-child {
    margin-left: 40px;
}

#twitter_container {
    margin-top: 20px;
}

.interactive-image {
    width: 1280px;
    height: 350px;
    background: url('/bundles/jpcjpchateau/images/interactive-image/paris.jpg');
    margin: 20px auto;
}

#social-links {
    margin-top: 15px;
    margin-bottom: 15px;
}
#social-links ul {
    margin-left: -40px;
}
#social-links li {
    margin-right: 10px;
    height: 40px;
    width: 40px;
}
#social-links a {
    display: inline-block;
    text-decoration: none;
}
#social-links .fa-github {
    color: #24292E;
    background-color: #fff;
}
#social-links .fa-linkedin {
    color: #1D87BE;
    background-color: #fff;
}
#social-links .fa-twitter {
    color: #55ACEE;
    background-color: #fff;
}
#social-links .fa-docker {
    color: #1298C5;
    background-color: #fff;
}
#social-links .fa-npm {
    color: #CB3837;
    background-color: #fff;
}


/************
 * Services *
 ************/

#services {
    max-width: 1280px;
    margin: auto;
}
#services .fab, #services .fas, #services .far {
    display: inline-block;
    color: #888;
    margin-top: -60px;
}
#services span {
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    padding-bottom: 20px;
}
#services .row-grid {
    box-shadow: 1px 3px 3px 1px #999;
    height: 300px;
    padding: 90px 10px 0;
    text-align: center;
    margin-left: 60px;
    margin-top: 40px;
}
#services .row-grid:hover > .fas, #services .row-grid:hover > .fab, #services .row-grid:hover > .far {
    color: #006699;
}

/*********
 * Works *
 *********/

#works {
    margin: auto;
}

/*********
 * Links *
 *********/

a:link, a:visited, a:active {
    color: #006699;
    text-decoration: none;
}
a:hover {
    color: #006699;
    text-decoration: underline;
}
header a:link, header a:visited, header a:active, header a:hover {
    color: #fff;
    text-decoration: none;
}