/* Organized by sections, generally going from broad to specific. IE: body {} is first, all the ul & li styling is together, and all the media (images, video, iframe) are in a group.  */

/* ------------------------------------------------------
  Stylesheet Guide
  ------------------------------------------------------

    1. Global
        1.1. Fonts
            1.1.1. Header font - XXX
            1.1.2. Text font - XXX
        1.2. General styles
        1.3. Color scheme
            1.3.1. Blue (#4aa8fa) - Color scheme
            1.3.2. Pink (#fa5a88) - Color scheme
            1.3.3. Green (#2ddf7b) - Color scheme
        1.4. Typography
        1.5. Custom class
        1.6. Icons class
    2. Header
        2.1. Structure, logo
        2.2. Header text
    3. Sections
        3.1 Section header
        3.2. Main Index section
            3.2.1. Center-mid-1 
            3.2.2. Center-mid-2 
        3.3. Hobbies section
            3.3.1. Hobbies content
            3.3.2. Hobbies timeline
        3.4. Courses section
            3.4.1. Schedule section
            3.4.2. Skills 
        3.5. Contacts section
            3.5.1. Contact details
            3.5.2. Contact form
    4. Footer
    5. Media queries

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

/* ------------------------------------------------------
    1. Global
------------------------------------------------------ */
body {
    font-family:  'Raleway', sans-serif;
    font-size: 100%;
    color: #666;
    background-color: #bcb1fc;}
#page {
    max-width: 940px;
    min-width: 720px;
    margin: 10px auto 10px auto;
    border: 4px  #000;
    background-color: #f2f2f2;
    vertical-align: baseline;
}
    /* ------------------------------------------------------
        1.1. Fonts
    ------------------------------------------------------ */

        /* ------------------------------------------------------
            1.1.1. Header font - Open Sans
        ------------------------------------------------------ */
			
			/* https://css-tricks.com/snippets/css/using-font-face/ */
			@font-face {
			              font-family: "Open Sans";
			              font-weight: normal;
			              font-style: normal;
			              src: url("../fonts/Open-Sans/OpenSans-Regular.eot");
			              src: url("../fonts/Open-Sans/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Open-Sans/OpenSans-Regular.woff") format("woff"), url("../fonts/Open-Sans/OpenSans-Regular.ttf") format("truetype");
			            }


		/* ------------------------------------------------------
            1.1.2. Text font - XXX
        ------------------------------------------------------ */

    /* ------------------------------------------------------
        1.2. General styles
    ------------------------------------------------------ */
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;}
    li {
        list-style-image: url("images/icon-plus.png");
        line-height: 1.6em;}
    ul li {
        display: inline;
        padding: 10px;
        float: right;} 
    ul li a, ul a :hover, ul li a:focus, ul li a:active {
        border: none;
        text-decoration: none;
        color: inherit;}

    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: #f4f2ff;
        border-top: 1px solid #bcb1fc;
        border-bottom: 1px solid #bcb1fc;
        border-right: 1px solid #bcb1fc;}
    tr.head th {
        color: #fff;
        background-color: #bcb1fc;
        border-bottom: 2px solid #bcb1fc;
        border-right: 1px solid #bcb1fc;
        border-top: 1px solid #bcb1fc;
        text-align: center;
        text-shadow: -1px -1px 1px #666666;
        letter-spacing: 0.15em;}
    td {
        text-shadow: 1px 1px 1px #ffffff;}
    tr.even td, tr.even th {
        background-color: #ddd9ff;}
    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;}
    /* ------------------------------------------------------
        1.3. Color scheme
    ------------------------------------------------------ */

    /* ------------------------------------------------------
        1.4. Typography
    ------------------------------------------------------ */

    /* ------------------------------------------------------
        1.5. Custom Class
    ------------------------------------------------------ */

    /* ------------------------------------------------------
        1.6. Icons Class
    ------------------------------------------------------ */
    .img-1{
        margin: auto;
        width: 100%;}
    .img-2{
        margin: auto;
        width: 30%;
        padding-left: 10px;}
    video{
        width: 940px;}
    iframe {
        display: block;
        margin: 0 auto;}
    .smlogo {
        height: 21.3px;
        width: 17px;
        margin: auto;}
/* ------------------------------------------------------
    2. Header
------------------------------------------------------ */
.menu-holder {
    float: right;
    max-width: 80%;
    text-align: center;
    height: 100%;
    background-color: #ffffff;
    right: -100%;
    top: 0;
    transition: right .3s ease;
    width: 100%;
    overflow: auto;
    max-width: 100%;
    z-index: 99;} 
/* ------------------------------------------------------
    3. Sections
------------------------------------------------------ */
    
    /* ------------------------------------------------------
        3.2 Main Index section
    ------------------------------------------------------ */
    .center-mid-1{
        width: 940px;
        background-color: #BEB594;
        padding-bottom: 15px;
        padding-top: 5px;
        }
    .center-mid-2{
        width: 940px;
        background-color: #efeae6;
        padding-bottom: 15px;
        padding-top: 5px;
        }
    .center-mid-3{
        width: 940px;
        background-color: #dee1e5;
        padding-bottom: 15px;
        padding-top: 5px;
        }
    .center-2{
        width: 940px;
        margin: auto;
        padding-bottom: 15px;
        padding-top: 5px;
        }
    .center-3{
        width: 300px;
        margin: 0 0;}
    .center-text {
        text-align: center;}
    .center-2>h1, .center-2>p{
        text-align: center;}
    h1.center-text{
        font-family: 'Raleway', serif;
        font-size: 500%;}

    /* ------------------------------------------------------
        3.3 Blog section
    ------------------------------------------------------ */
    .blog-post {
        padding: 30px;
        margin: 20px;
        margin-bottom: 20px;
        background-color: #ffffff;
    }
    /* ------------------------------------------------------
        3.5 Contacts section
    ------------------------------------------------------ */

        /* ------------------------------------------------------
        3.5.1 Contact Details
        ------------------------------------------------------ */

        /* ------------------------------------------------------
        3.5.2 Contact Form
        ------------------------------------------------------ */
        fieldset {
            width: 310px;
            margin-top: 20px;
            border: 1px solid #d6d6d6;
            background-color: #ffffff;
            line-height: 1.6em;}
        legend {
            font-style: italic;
            color: #666666;}
        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;}
        input[type="submit"] {
            border: 1px solid #006633;
            background-color: #009966;
            color: #ffffff;
            border-radius: 5px;
            padding: 5px;
            margin-top: 10px;}
        input[type="submit"]:hover {
            border: 1px solid #006633;
            background-color: #00CC33;
            color: #ffffff;
            cursor: pointer;}
        .title {
            float: left;
            width: 160px;
            clear: left;}
        .submit {
            width: 310px;
            text-align: right;}
/* ------------------------------------------------------
    4. Footer
------------------------------------------------------ */
footer {
    text-align: center;
    width: 100%;
}