@font-face {
    font-family:'Open Sans';
    src:url('../fonts/OpenSans-Regular.ttf') format('ttf');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family:'Open Sans';
    src:url('../fonts/OpenSans-Bold.ttf') format('ttf');
    font-weight:bold;
    font-style:normal;
}

@font-face {
    font-family:'Montserrat';
    src:url('../fonts/Montserrat-ExtraBold.ttf') format('ttf');
    font-weight:bold;
    font-style:normal;
}

body {
    background-color: #fefefe;
    font-family: 'Open Sans', helvetica, arial, sans-serif;
}

/* utility classes */

.margin-top-zero {
    margin-top: 0;
}

.margin-bottom-zero {
    margin-bottom: 0;
}

.padding-top-zero {
    padding-top: 0 !important;
}

.padding-bottom-zero {
    padding-bottom: 0 !important;
}

.visually-hidden {
    display: none;
}

/* Header */

header {
    background-image: url(../img/flag-bkg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding:0;
}

header img {
    padding:4em;
    width: calc(100% - 8em);
    max-width:440px;
}

.sub-header {
    width:100%;
    background-color: #000;
}

.sub-header img {
    padding: 2em 4em;
    width: calc(100% - 8em);
    max-width:440px;
}

@media only screen and (max-width: 800px) {
    header img, .sub-header img {
        padding:2em;
        width: calc(100% - 4em);
        max-width:440px;
    }
}

/* Footer */

footer {
    padding:4em;
    background-color: #DDD;
}

.footer-image { 
    width: 20%;
    max-width: 150px;
    display: inline-block;
    vertical-align: top;
}

.footer-image img { 
    width: 100%;
}

.footer-content {
    width: calc(78% - 4em);
    padding:0 2em;
    font-size:1em;
    max-width:1000px;
    display: inline-block;
}

@media only screen and (max-width: 800px) {
    footer {
        padding:2em;
    }
}


/* Structure */

main {
    padding-top: 2em;
    background-image: url('../img/black-triangle.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 44px;
}

.content-row {
    width: calc(100% - 8em);
    padding:4em;
    background-image: url(../img/red-triangle.png);
    background-repeat: no-repeat;
    background-position-y: 4em;
    background-size: 3em;
}

@media only screen and (max-width: 800px) {
    .content-row {
        width: calc(100% - 4em);
        padding:2em;
        background-image: url(../img/red-triangle.png);
        background-repeat: no-repeat;
        background-position-y: 2.3em;
        background-size: 1.6em;
    }
}

.content-row-black {
    background-color: #000;
    color:#FFF;
    margin-bottom:0;
}

.content-row .section-title { 
    width: 30%;
    max-width: 300px;
    border-bottom: 10px solid #2D4C0A;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 2em;
}

.content-row-black .section-title { 
    border-bottom: 10px solid #B5031D;
}

.content-row .section-title h2 { 
    font-family:'Montserrat', sans-serif;
    font-size: 2.4em;
    margin-top: 0px;
    width:100%;
}

.content-row .content-pane {
    width: calc(68% - 4em);
    padding:0 2em;
    font-size:1.2em;
    max-width:1000px;
    display: inline-block;
}

.content-row .content-pane h3 {
    font-size: 1.8em;
    font-weight: normal;
}

.content-row .content-pane:first-child {
    margin-top:0;
}

@media only screen and (max-width: 800px) {
    .content-row .section-title { 
        width: 100%;
        max-width:none;
    }

    .content-row .content-pane {
        width: 100%;
        padding: 0;
    }
}

/* List */



/* Typography */

p, li {
    max-width:600px;
    line-height: 1.5em;
}

a, a:visited { color:#1F5F9D; }
a:hover { color:#1F5F9D; text-decoration-thickness: 3px; }
a:active { background-color:#FFF; text-decoration-thickness: 3px; }

a.button, a.button:visited { 
    color:#FFF; 
    background-color: #2D4C0A; 
    padding:0.5em 2em; 
    border-radius: 8px; 
    text-decoration: none; 
    margin-top:1em;
}

a.button:hover{ 
    color:#FFF; 
    background-color: #B5031D; 
}

/* Custom */

.bullet-image { height:3em; display: inline-block; }
h4 { vertical-align: middle; margin-top: -1em; display:inline-block; }