@import url('https://fonts.googleapis.com/css?family=Iceland|Marck+Script|Rock+Salt|Sarina|Sonsie+One');
/*
 * font-family: 'Sarina', cursive;
 * font-family: 'Iceland', cursive;
 * font-family: 'Marck Script', cursive;
 * font-family: 'Rock Salt', cursive;
 * font-family: 'Sonsie One', cursive;
*/

.padding {
    display: inline-block;
    padding: 10px;
}

.row, .column {
    box-sizing: border-box
}

.row:after {
    clear: both
}

.row:before, .row:after {
    display: table;
    content: " "
}

.column {
    position: relative;
    /*background: #dcee9e;*/
    margin-bottom: 1em
}

/*
If screen is at least 600px wide, provide columnar formatting.
 */
@media (min-width: 600px) {
    .column {
        float: left
    }

    .column + .column {
        /*margin-left: 1.6%*/
    }

    .column-12x {
        width: 8.03%
    }

    .column-11x {
        width: 9%
    }

    .column-10x {
        width: 9.9%
    }

    .column-9x {
        width: 11.01%
    }

    .column-8x {
        width: 12.48%
    }

    .column-7x {
        width: 14.08%
    }

    .column-6x {
        width: 16.0006667%
    }

    .column-5x {
        width: 19.9333333333%
    }

    .column-4x {
        width: 24.59999999999999%
    }

    .column-3x {
        width: 33.0666666667%
    }

    .column-2x {
        width: 49%;
    }

    .column-1x {
        width: 100%
    }
}

/* -----------------------
Base styles
------------------------*/

body {
    margin: 0;
    padding: 0;
    /*padding: 20px;*/
    color: #333;
    background-color: #eee;
    font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    /*font: 14px/1 helvetica, arial, sans-serif;*/
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    font-weight: 500;
    line-height: 1.1;
}

h1 {
    font-size: 2.25em;
}

/* 36px */
h2 {
    font-size: 1.75em;
}

/* 28px */
h3 {
    font-size: 1.375em;
}

/* 22px */
h4 {
    font-size: 1.125em;
}

/* 18px */
h5 {
    font-size: 1em;
}

/* 16px */
h6 {
    font-size: .875em;
}

/* 14px */

p {
    margin: 0 0 1.5em;
    line-height: 1.5;
}

blockquote {
    padding: 1em 2em;
    margin: 0 0 2em;
    border-left: 5px solid #eee;
}

hr {
    height: 0;
    margin-top: 1em;
    margin-bottom: 2em;
    border: 0;
    border-top: 1px solid #ddd;
}

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
    border-top: 1px solid #ddd;
}

th, td {
    padding: .5em 1em;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

a:link {
    color: royalblue;
}

a:visited {
    color: purple;
}

a:focus {
    color: black;
}

a:hover {
    color: green;
}

a:active {
    color: red;
}

/* -----------------------
Layout styles
------------------------*/

.container {
    /*max-width: 50em;*/
    /*max-width: 1300px;*/
    margin: 0 auto;
}

.header {
    /*color: #fff;*/
    /*background: #999;*/
    padding: 1em 1.25em;
}

.header-heading {
    margin: 0;
    font-size:40px;
    color: #FFF;
    letter-spacing: 7px;
    font-family: 'Rock Salt', cursive, Arial, sans-serif;
    font-weight: bold;
}

.content {
    padding: 1em 1.25em;
    background-color: #fff;
}

.footer {
    color: #fff;
    background: #000;
    padding: 1em 1.25em;
}

.footer iframe {
    width: 100%;
    max-width: 500px;
    min-width: 200px;
}

.quote {
    color: #000;
    font-family: 'Marck Script', cursive, Arial, sans-serif;
    font-size: 20px;
    /*style="color: rgb(0, 0, 0); font-style: italic; font-weight: bold;"*/
}

/* -----------------------
Nav
------------------------*/
.nav-bar {
    /*background:rgba(0,0,0,0.7);*/
    background: #09025f;
    padding: 0;
}

.nav-bar .logo {
    display: none;
}


.nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*#navigation > ul > li {*/
.nav li {
    display: inline;
    margin: 0;
}

.nav a {
    display: block;
    height: 3.5em;
    padding-top: 2em;
    padding-left: 1em;
    /*padding: 3em 4em;*/
    font: 1em Arial, sans-serif;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid gray;
}

.nav a:link {
    color: white;
}

.nav a:visited {
    color: white;
}

.nav a:focus {
    /*color: black;*/
    /*background-color: white;*/
}

.nav a:hover {
    /*color: #87a7cd;*/
    /*font-weight: bold;*/
    background-color: #0e2580;
    /*padding-left: 1em;*/
    /*padding-right: 1em;*/
}

.nav a:active {
    color: white;
    background: rgba(69,105,137,.9);
}

/* -----------------------
Single styles
------------------------*/

/* Let's make sure the main div is located below the header and/or nav bar. */
.main {
    padding-top: 2em;
}

.header img {
    width: 100%;
}
.header-image-1 {
    height: 20em;
    background-image: url("https://sportpilotchicago.com/images/N800NW_orig_current_fleet.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.header-image-2 {
    height: 20em;
    background-image: url("https://sportpilotchicago.com/images/theAircraftBanner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.header-image-3 {
    height: 20em;
    background-image: url("https://sportpilotchicago.com/images/sportstart-sl-2017-12-07-120903-full.jpg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.footer a {
    display: block;
    height: 3.5em;
    padding-top: 2em;
    padding-left: 1em;
    /*padding: 3em 4em;*/
    font: .75em Arial, sans-serif;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid gray;
}

.img-responsive {
    max-width: 100%;
}

.img-responsive-50 {
    max-width: 100%;
}

.btn {
    color: #fff !important;
    background-color: rgba(21, 28, 28, 0.82);
    border-color: #222;
    display: inline-block;
    padding: .5em 1em;
    margin-bottom: 0;
    margin: 0;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: .2em;
    text-decoration: none;
    width: 95%;
    /*max-width: 95%;*/
}

.btn:hover {
    color: #000 !important;
    font-weight: bold;
    padding: .5em 1em;
    background-color: #a49e7f;
}

.btn:focus {
    color: #fff !important;
    background-color: black;
}

.btn:active {
    color: #950e11 !important;
    background-color: #437cd6;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

#winds-aloft {
    font-size: 1em;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

/* if button links are presented as an unstyled list, pad */
.list-unstyled .btn {
    margin-bottom: .5em;
}

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

/*
Social media graphics
 */
.social-logo {
    width: 23px; height: 23px; margin: 0 0 0 0px; background-image:url("file:///home/jim/Dropbox/www/spc/assets/img/social-royal.png");
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-size: auto auto;
    border-collapse: collapse;
    border-spacing: 0px 0px;
    color: rgb(194, 194, 194);
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    line-height: 12px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    -moz-text-decoration-color: rgb(194, 194, 194);
}

.social-logo-twitter          { background-position:-46px 0px; }
.social-logo-twitter:hover    { background-position:-46px -23px;}
.social-logo-twitter:active   { background-position:-46px -46px;}

.social-logo-facebook         { background-position:0 0;}
.social-logo-facebook:hover   { background-position:0 -23px;}
.social-logo-facebook:active  { background-position:0 -46px;}


@media (min-width: 723px) {
    .footer iframe {
        min-width: 100%;
        width: 100%;
    }
}

/* -----------------------
Wide styles
------------------------*/
@media (min-width: 1500px /*1080px*/) {
    .header {
        /*padding: 1.5em 3em;*/
    }

    .nav-bar {
        background:rgba(0,0,0,0.7);
        padding: .5em 3em;
        position: fixed;
        left: 0;
        top: 0;
        height: 25px;
        width: 100%;
        z-index: 1;
    }

    .nav-bar .logo {
        display: inline-block;
        font-family: 'Rock Salt', cursive, Arial, sans-serif;
        font-weight: bold;
        color: #fff;
    }

    .nav-bar img {
        display: block;
        /*float: left;*/
        top: 2px;
        left: 2px;
        position: absolute;
        margin-right: 125px;
        padding-right: 125px;
    }

    .content {
        padding: 2em 3em;
    }

    .footer {
        padding: 2em 3em;
        font-family: 'Iceland', cursive, Tahoma, sans-serif;
        font-size: 1.1em;
        /*font-size: 14px;*/
    }

    .footer iframe {
        width: 500px;
    }

    .footer .nav {
        font-size: 1.3em;
    }

    .nav li {
        display: inline;
        margin: 0 2em 0 0;
    }

    .nav a {
        display: inline;
        color: #437cd6;
        padding: 0;
        border-bottom: 0;
    }

    .nav a:link {
        /*color: #437cd6;*/
        color: #fff;
    }

    .nav a:visited {
        /*color: #437cd6;*/
        color: #fff;
    }

    .nav a:focus {
        color: #fff;
        background-color: white;
    }

    .nav a:hover {
        color: yellow;
        background-color: #4c4c4c;
    }

    .nav a:active {
        color: white;
        background: rgba(69,105,137,.9);
    }


    .img-responsive-50 {
        max-width: 45%;
        padding: 1em;
    }

    .main {
        padding-top: 3em;
    }
}

/*
METAR formatting
 */
.metar {
    padding: 10px;
    border-radius: 8px;
    background-color: #cbc5a5;
}

.metar-descr {
    color: #0e2580;
    font-size: larger;
    padding-top: 3em;
    padding-bottom: 3em;
}

#goTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 90px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #0faeff; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 20px; /* Rounded corners */
    font-size: 20px;
    font-weight: bold;
}
#goTopBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}