/* 
=== Colors ===
blue: #00ccff (alt: #129fea)
green: #66ff33
*/


/*
=== Pure CSS Grid system ===

sm	35.5em	≥ 568px
md	48em	≥ 768px
lg	64em	≥ 1024px
xl	80em	≥ 1280px

*/

/* === Smartphones (portrait) */
@media only screen and (min-width : 320px) {
    div.main {
        margin: 0;
        padding: 10px 0;
    }
    
    div.text {
        padding: 10px;
    }
    div.logos img {
        display: table-cell; 
        margin: 0 0 20px 10px;
    }
    
    
}


@media (max-width: 35.5em) {
    div.triangle {display: none;}
}

@media (min-width: 35.5em) {
    div.main {
        border-radius: 8px;
        margin: 20px 0;
        padding: 10px 0;
    }
    
    div.text {
        width: 90%;
    }
    div.triangle {height: 100%;}
}

@media (min-width: 48em) {
    
    div.text {
        width: 75%;
    }
    
    div.logos {margin: 0 auto;}
    
    div.logos img {
        display: initial;
        margin: 0 20px 0 0;
        max-height: 30px;
    }
}

@media (min-width: 64em) {
    
    div.logos img {
        max-height: 36px;
        margin: 0 24px 0 0;
    }
    
    
}

@media (min-width: 80em) {
    div.text {max-width: 480px;}
}

html, body {width: 100%; height: 100%;}
body {
    /*
    background-image: url('img/background.png');
    background-repeat: repeat;
    */
    background-color: #FFF;
    color: #002730;
    display: table;
}

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #444;
}

a, a:visited {color: #444;}
a:hover {color: #129fea;}

div.404 {
    padding: 20px;
}

div.container {
    display: table-row;
    height: 60%;
}
div.footer {
    height: 100%;
    text-align: center;
}

div.contact {
    font-weight: 600;
    margin: .4rem 0;
    text-align: center;
}
div.contact a {
    
    text-decoration: none;
}

div.contact a:hover {text-decoration: underline;}

div.contact div {display: inline-block;}

div.contact div:first-child {margin-right: 1rem;}


div#cookie-bar {
    background-color: #00566B;
    color: #fff;
    margin-bottom: 10px;
    /* position: fixed; */
    bottom:0;
    font-size: 14px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
div#cookie-bar p {margin: 0;}
div#cookie-bar a {
    color: #ffffff;
    display: inline-block;
    border-radius: 3px;
    text-decoration: none;
    padding: 2px 6px;
    margin: 4px 4px 4px 8px;
}
div#cookie-bar a.cb-enable {
    background-color: #00B75C;
    color: #fff;
}

div#cookie-bar a.cb-enable:hover {
    background-color: #009249;
}

div#cookie-bar a.cb-disable {
    background-color: #FF2E2E;
    color: #fff;
}

div#cookie-bar a.cb-disable:hover {
    background-color: #E60000;
}

div.icon {text-align: center;}

div.main {
    background-color: #FDFDFD;
}

div.text {margin-top: 20px;}
div.text p {margin-top: 4px;}
div.text p:last-child {margin-bottom: 0;}


div.triangle {
    background-repeat: no-repeat;
}

div.triangle.left {
    background-image: url('/static/img/triangle-green-left.svg');
    background-position: top left;
    background-size: 40%;
}

div.triangle.right {
    background-image: url('/static/img/triangle-green-right.svg');
    background-position: bottom right;
    background-size: 45%;
}


div.triangle.right-blue {
    background-image: url('/static/img/triangle-blue-right.svg');
    background-position: bottom right;
    background-size: 45%;
}


a, a:active, a:visited {color: #129fea;}

h1 {
    color: #4d676d;
    font-weight: 400; 
    font-size: 20px;
    margin: 4px auto;
    text-align: center;
}

h2 {
    font-weight: 400; 
    font-size: 20px;
    margin: 0;
    padding: 0;
    /*
    margin: 8px 0px;
    line-height: 32px;
    vertical-align: top;
    */
}

.logo {margin: 6rem auto 0 auto;}

.bg-blue {background-color: #129fea;}
.bg-green {background-color: #66ff33;}
.cl-blue {color: #129fea;}
.cl-green {color: #66ff33;}

.center {margin: 0 auto;}



.fa {
    text-align: center;
}

.fa-3x {font-size: 2.5em;}

.mg-6-0 {margin: 6px 0;}