/* -------------------------------------------------------------------------- */
/* Html and body */
/* -------------------------------------------------------------------------- */

*
{
    margin  : 0;
    padding : 0;
}

html,
body
{
    height : 100%;
}

html
{
    font-family      : 'Open Sans',  sans-serif;
    background-color : #ffffff;

    /* font-family : 'Lato',       sans-serif; */
    /* font-family : 'Montserrat', sans-serif; */
    /* line-height      : 1.5em; */

}

body
{
    font-size   : 1em;
    line-height : 1.75em;
}

/* -------------------------------------------------------------------------- */
/* Headings */
/* -------------------------------------------------------------------------- */

h1
{
    color     : #ff3b3f;
    font-size : 3em;
    margin    : 0.35em auto;
}

h2
{
    color     : #ff3b3f;
    font-size : 2em;
    margin    : 0.35em auto;
}

h3
{
    color     : #565656;
    font-size : 1.25em;
    margin    : 0.25em auto;
}

h4
{
    color     : #ff3b3f;
    /* color     : #66bdff; */
    font-size : 1em;
    margin    : 0.125em auto;
}

h5
{
    color     : #565656;
    /* color     : #f89d8f; */
    font-size : 0.75em;
    margin    : 0.0625em auto;
}

/* -------------------------------------------------------------------------- */
/* Page sections */
/* -------------------------------------------------------------------------- */

header
{
    background-color : #f7f7f7;
	box-shadow       : 0 0.5em 0.5em -0.5em #a9a9a9;
    margin-bottom    : 0.5em;
    position         : fixed;
    width            : 100%;
}

header a,
header button
{
    color : #000000;
}

header a:hover,
header button:hover
{
    color       : #ff3b3f;
    text-shadow : 0.25em 0.25em 0.5em #a9a9a9;
}

section
{
    padding : 2.5% 10% 2.5% 10%;
}

section:last-child
{
    padding-bottom : 5%;
}

footer
{
    background-color : #333333;
    padding          : 1em 0;
    text-align       : center;
    height           : 3.7em;
}

footer a,
footer p
{
    color : #b2b2b2;
}

footer a:hover
{
    background-color : #111111;
    color            : #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Containers */
/* -------------------------------------------------------------------------- */

.content-container
{
    min-height    : 100%;
    height        : auto !important;
    height        : 100%;
    margin-bottom : -3.7em;
}

.content-container::after
{
    content : "";
    display : block;
    height  : 3.7em;
}

.section-container
{
    margin    : 0 auto;
    max-width : 60%;
    width     : 100%;
}

/* Row container */
.row::after
{
    content : "";
    clear   : both;
    display : table;
}

/* Row cells */
.row-cell,
.row-cell-left
{
    /* border        : 1px solid yellow; */
    float         : left;
    padding-right : 5%;
}

.row-cell-right
{
    /* border        : 1px solid yellow; */
    float        : right;
    padding-left : 5%;
}

/* First child in row */
.row-cell:first-child,
.row-cell-left:first-child,
.row-cell-right:first-child
{
    width : 60%;
}

/* Last child in row */
.row-cell:last-child,
.row-cell-left:last-child
{
    padding-right : 0;
    width         : 30%;
}

.row-cell-right:last-child
{
    padding-left : 0;
    width        : 30%;
}

/* Image in row */
.row-cell img,
.row-cell-left img,
.row-cell-right img
{
    display : block;
    width   : 100%;
}

/* Card to display images */
.card
{
    border-radius : 10px;
    box-shadow    : 0 4px 8px 0 rgba(0,0,0,0.2);
    margin        : 1em 0;
    transition    : 0.2s;
    width         : 80%;
}

.card:hover
{
    box-shadow : 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card p
{
    font-style : italic;
    padding    : 0.25em 1.5em 0.5em 1.5em;
}

.card img
{
    border-radius : 10px 10px 0 0;
    width         : 100%;
}

/* -------------------------------------------------------------------------- */
/* Accents */
/* -------------------------------------------------------------------------- */

.accent-link-1
{
    color           : #ff3b3f;
    text-decoration : none;
}

.accent-link-1:hover
{
    color : #3ba0ff;
}

.accent-link-2
{
    color           : #3ba0ff;
    text-decoration : none;
}

.accent-link-2:hover
{
    color : #ff3b3f;
}

/* -------------------------------------------------------------------------- */
/* Animations */
/* -------------------------------------------------------------------------- */

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade
{
    from
    {
        opacity: .4;
    }

    to
    {
        opacity: 1;
    }
}

@keyframes fade
{
    from
    {
        opacity: .4;
    }

    to
    {
        opacity: 1;
    }
}