/* ------------------------------------------------------
  Stylesheet Guide: I have organized my CSS stylesheet according to the following outline. The outline loosely reflects the 
  structure of my website, with important global styles at the top, navigation, sections, and footers. Within each section
  of the outline, related selectors have been grouped and unrelated ones separated by a line break. The selectors within the
  sections are ordered alphabetically for the most part.
  ------------------------------------------------------

    1. Global
        1.1. Typography
        1.2. General styles
    2. Navigation
        2.1. Logo
        2.2. Navigation
    3. Sections and Structure
        3.1 Section header
        3.2. Main Index section
            3.2.1. Center-mid-1 
            3.2.2. Center-mid-2 
            3.2.3. Center-mid-3 
        3.3. Schedule section
        3.4. Contacts section
            3.4.1. Contact details
            3.4.2. Contact form
    4. Footer

------------------------------------------------------ */


/* ------------------------------------------------------
    1. Global
------------------------------------------------------ */

    /* ------------------------------------------------------
        1.1. Typography
    ------------------------------------------------------ */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');    
    body {
        font-family:  'Inter', Helvetica, sans-serif;
        font-size: 15px;
        line-height: 1.6em;
        color: rgb(75, 75, 75);
        background-color: #73b9cc;}
        
    h1 {
        font-size: 24px;
        font-weight: 600;
        line-height: 1.5em;
    }

    h2 {
        font-size: 22px;
        line-height: 1.5em;
    }

    h3 {
        font-size: 18px;
        line-height: 1.5em;
    }

    h4 {
        font-size: 16px;
        line-height: 1.5em;
    }

    /* ------------------------------------------------------
        1.2. General styles
    ------------------------------------------------------ */
    .center-2 {
        width: 940px;
        margin: auto;
        padding-bottom: 15px;
        padding-top: 5px;
    }
    .center-3 {
        width: 300px;
        margin: 0;
    }
    .center-2>h1 {
        text-align: center;
    }

    .center-text {
        padding-top: 15px;
        padding-bottom: 10px;
        text-align: center;
        clear: both;
        margin: 0 38px 0 38px;
    }
    .left-text {
        padding-top: 15px;
        padding-bottom: 10px;
        text-align: left;
        clear: both;
        margin: 0 38px 0 38px;
    }

    .img-1 {
        width: 940px;
        box-align: center;
    }
    .img-2 {
        margin: auto;
        width: 100%;
    }
    .img-3 {
        margin: auto;
        padding-left: 5px;
        width: 32%;
    }

    #page {
        max-width: 940px;
        min-width: 720px;
        margin: 25px auto;
        
        background-color: #f3efe3;
        vertical-align: baseline;
    }

    .smlogo{
        width: 25px;
        margin: auto;
    }

    video {
        width: 940px;
        margin: 10px 0;
    }


/* ------------------------------------------------------
    2. Header
------------------------------------------------------ */

    /* ------------------------------------------------------
        2.1 Logo
    ------------------------------------------------------ */
    #logo {
        float: left;
        padding: 38px;
        width: 260px;
    }

    /* ------------------------------------------------------
        2.2 Navigation
    ------------------------------------------------------ */
    ul {
        list-style-type: none;
        margin: 0;
        margin-right: 32px;
        padding: 0;
    }

    ul li {
        display: inline;
        padding: 12px;
        margin-top: 34px;
        float: right;
    }

    ul li a, 
    ul li a:focus, 
    ul li a:active {
        border: none;
        text-decoration: none;
        color: inherit;
    }

    ul a:hover{
        color: #73b9cc;
    }

/* ------------------------------------------------------
    3. Sections
------------------------------------------------------ */

    /* ------------------------------------------------------
        3.1 Main Index section
    ------------------------------------------------------ */

        /* ------------------------------------------------------
            3.1.1. Center-mid-1
        ------------------------------------------------------ */
        .center-mid-1 {
            width: 940px;
            background-color: #b1c4db; 
            padding-bottom: 15px;
            padding-top: 10px;
            margin: 10px 0 10px 0;
        }

        /* ------------------------------------------------------
            3.1.2. Center-mid-2
        ------------------------------------------------------ */
        .center-mid-2 {
            width: 940px;
            background-color: #c1d6b6;
            padding-bottom: 15px;
            padding-top: 10px;
            margin: 10px 0 10px 0;
        }

        /* ------------------------------------------------------
            3.1.3. Center-mid-3
        ------------------------------------------------------ */
        .center-mid-3 {
            width: 940px;
            background-color: #e9bca2;
            padding-bottom: 15px;
            padding-top: 10px;
            margin: 10px 0 10px 0;
        }

    /* ------------------------------------------------------
        3.2 Schedule section
    ------------------------------------------------------ */
    table {
        border-spacing: 0px;}
    th, td {
        padding: 5px 30px 5px 10px;
        border-spacing: 0px;
        font-size: 90%;
        margin: 0px;}
    th, td {
        text-align: left;
        background-color: #d8ece0;
        border-top: 1px solid #f1f8fe;
        border-bottom: 1px solid #cbd2d8;
        border-right: 1px solid #cbd2d8;}
    tr.head th {
        color: #fff;
        background-color: #639261;
        border-bottom: 2px solid #436642;
        border-right: 1px solid #436642;
        border-top: 1px solid #436642;
        text-shadow: -1px -1px 1px #666666;
        letter-spacing: 0.1em;}
    td {
        text-shadow: 1px 1px 1px #ffffff;}
    tr.even td, tr.even th {
        background-color: #eaeef7;}
    tr.head th:first-child {
        /* WebKit is a browser engine used in Apple's Safari browser, Amazon 
          Kindle e-book reader, BlackBerry Browser in OS 6 and above.

          Not all CSS3 properties work well in all browsers. In a way to ensure that web pages display as expected in their browsers, vendors like Mozilla and Webkit developed their own browser-compatible properties. With CSS3, many compatibility issues are now resolved.
          However, it is not unusual to still see these properties used in stylesheets. */

        /* Webkit property*/
        -webkit-border-top-left-radius: 5px;

        /* Mozilla property*/
        -moz-border-radius-topleft: 5px;

        /* CSS3 property*/
        border-top-left-radius: 5px;

        /* More on border-radius property: https://www.the-art-of-web.com/css/border-radius/ */
    }
    tr.head th:last-child {
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        border-top-right-radius: 5px;}

    /* ------------------------------------------------------
        3.3 Contacts section
    ------------------------------------------------------ */
        
        /* ------------------------------------------------------
            3.3.1. Contact map
        ------------------------------------------------------ */
        iframe {
            float: right;
            margin-right: 38px;
            padding: 48px 0 30px 0;
        }

        /* ------------------------------------------------------
            3.3.2. Contact form
        ------------------------------------------------------ */
        fieldset {
            margin-left: 38px;
            width: 310px;
            padding: 45px;
            border: none;
            background-color: #eaeef7;
            line-height: 1.6em;}
        input[type="submit"] {
            border: 1px solid black;
            background-color: #eaeef7;
            color: black;
            padding: 8px;
            margin-top: 10px;}
        input[type="submit"]:hover {
            border: 1px solid black;
            background-color: black;
            color:#eaeef7;
            cursor: pointer;}
        input[type="text"] {
            width: 120px;
            border: 1px solid #d6d6d6;
            padding: 2px;
            outline: none;}
        input[type="text"]:focus,
        input[type="text"]:hover {
            background-color: #d0e2f0;
            border: 1px solid #999999;}
        legend {
            padding-top: 70px;
            font-weight: 700;
            color: #666666;}
        .submit {
            width: 310px;
            text-align: right;}
        .title {
            float: left;
            width: 160px;
            clear: left;}


/* ------------------------------------------------------
    4. Footer
----------------------------------------------------- */
.footer {
    text-align: center;
    box-align: center;
    padding: 10px;
}
.footer a {
    text-decoration: none;
}

.smicon{
    width: 25px;
    margin: auto;
    vertical-align: middle;
}