/*=========LAYOUT SECTION========== */
* {
    margin: 0;
    padding: 0;
    }

    body {
        background-color: #9c9f84;
        font-family: Arial, Verdana, Georgia, sarif;
        font-size: 18px;
    }


    header {
        background: darkblue;
        height: auto;
        margin: 0 auto;
        position: relative;
        padding: 10px;
        margin: 10px;
        border-radius: 10px;
    }


    /*======Navigation Styles========*/

    .navbar {
        width: 1000px;
        height: 60px;
        margin-top: 3%;
        margin-left: 20%;
    }

    ul li {
        list-style: none;
        width: 333px;
        line-height: 60px;
        position: relative;
        background: #222;
        box-shadow: 0px 2px 5px 0px grey;
        text-align: center;
        float: left;
        background: linear-gradient(black 20%, darkblue 80%);
    }

    ul li ul {
        position: absolute;
    }

    .navbar > ul > li:nth-of-type(1) {
        border-radius: 10px 0px 0px 10px;
    }

    .navbar > ul > li:nth-of-type(10) {
        border-radius: 0px 10px 10px 0px;
    }

    ul li a {
        color: #fff;
        width: 125px;
        height: 48px;
        display: inline-block;
        text-decoration: none;
    }

    ul li a:hover {
        font-weight: bold;
        border-bottom: 2px solid #fff;
    }

    ul li ul {
        display: none;
    }

    .navbar ul li:hover ul {
        display: block;
    }


    @media screen and (max-width: 480px) {
        header {
            width: 100px;

        }

        .navbar {
            display: none;
            width: 100%;
            height: auto;
        }

        ul li {
            width: 100%;
            float: none;
        }

        ul li a {
            width: 100%;
            display: block;
        }

        ul li ul {
            position: block;
        }

        ul li ul li a {
            background: #222;
        }

        .fa-list.modify {
            display: inline-blockblock;
        }
    }



    /*======main Styles========*/
    .main {
        background-color: #e5e4d7;
        padding: 10px;
        margin: 10px;

    }

    .content {
        width: 98%;
        height: auto;
        text-align: justify;
        font-size: 18px;
    }


    .imagesidebar {
        left: 50%;
        right: 50%;
    }

    p {
        margin-right: 3%;
        margin-left: 3%;
    }

    .main .imgbx {
        width: 200%;
        flex: 0 0 240px;
    }

    .imgbx:hover {
        opacity: 0.4;
    }


    .main .imgbx1 img {
        max-width: 100%;
    }

    .main .content {
        padding-left: 20px;

    }

    .imgbx1 {
        float: left;
        padding-top: 20px;
        padding-right: 20px;
        text-indent: 50px;
    }

    .imgbx1 {
        font-style: italic;
        font-size: 14px;
        color: #004455;
    }

    .footer {
        position: relative;
        background: darkblue;
        color: #9c9f84;
        clear: both;
        border-radius: 5px;
        text-align: center;
        padding: 10px;
        margin: 10px;
        font-size: 12px;

    }


    /*=========HEADINGS SECTION========== */

    h1 {
        color: #9c9f84;
        text-align: center;
        width: 100%;
        text-shadow: 3px 2px black;
    }

    h1:nth-last-of-type(1) {}

    h2 {
        color: blue;
        text-align: center;
    }

    h3 {
        color: red;
        text-align: center;
    }

    h4 {
        color: #808007;
        text-align: center;
    }

    h5 {
        color: #808007;
        text-align: center;
    }


    h6 {
        color: #808007;
        text-align: center;
    }

    .link {
        text-align: center;
        font-size: 25px;
    }


    /*=========Calculator Lab 14 SECTION========== */
    #calc-contain {
        position: relative;
        width: 400px;
        border: 2px solid darkblue;
        border-radius: 5px;
    }

    input[type=button] {
        background-color: lightGray;
        width: 20%;
        font-size: 25px;
        margin: 2%;
    }

    input[type=submit] {
        position: relative;
        display: block;
        width: 90%;
        margin: 10px auto;
        font-size: 20px;

    }

    #calc-contain {
        float: left;
    }

    /*========MY lABS ASSIGNMENTS CSS-CODE======*/

    #labs a {
        background-color: #E1E1E1;
        font-family: bebas;
        width: 100%;
        height: 100%;
        color: blue;
        font-size: 30px;
        line-height: 60px;

    }

    a {
        color: blue;
        position: relative;
        padding-left: 15px;
    }


    .banner {
        width: 900px;

    }

    /*========images slideshow======*/

    .slideshow {
        margin: 0 auto;
        padding-top: 10px;
        height: 350px;
        box-sizing: border-box;
    }

    .content1 {
        margin: auto;
        width: 190px;
        perspective: 1000px;
        position: relative;
        padding-top: 40px;
    }

    .content1-carrousel {
        width: 100%;
        position: absolute;
        float: right;
        animation: rotar 15s infinite linear;
        transform-style: preserve-3d;
    }

    .content1-carrousel:hover {
        animation-play-state: paused;
        cursor: pointer;
    }

    .content1-carrousel figure {
        width: 100%;
        height: 120px;
        border: 2px solid white;
        overflow: hidden;
        position: absolute;
    }

    .content1-carrousel figure:nth-child(1) {
        transform: rotateY(0deg) translateZ(300px);
    }

    .content1-carrousel figure:nth-child(2) {
        transform: rotateY(40deg) translateZ(300px);
    }

    .content1-carrousel figure:nth-child(3) {
        transform: rotateY(80deg) translateZ(300px);
    }

    .content1-carrousel figure:nth-child(4) {
        transform: rotateY(120deg) translateZ(300px);
    }

    .content1-carrousel figure:nth-child(5) {
        transform: rotateY(160deg) translateZ(300px);
    }

    .content1-carrousel figure:nth-child(6) {
        transform: rotateY(200deg) translateZ(300px);
    }

    .content1-carrousel figure:nth-child(7) {
        transform: rotateY(240deg) translateZ(300px);
    }

    .content1-carrousel figure:nth-child(8) {
        transform: rotateY(280deg) translateZ(300px);
    }

    .content1-carrousel figure:nth-child(9) {
        transform: rotateY(320deg) translateZ(300px);
    }

    .shadow {
        position: absolute;
        box-shadow: 0px 0px 20px 0px #000;
        border-radius: 2px;
    }

    .content1-carrousel img {
        image-rendering: auto;
        transform: all 300ms;
        width: 100%;
        height: 100$
    }

    .content1-carrousel img:hover {
        transform: scale(1.2);
        transition: all 300ms;
    }

    @keyframes rotar {
        from {
            transform: rotateY(0deg);
        }

        to {
            transform: rotateY(360deg);
        }
    }