/*------------------------------*/
/* main.css for the GFolio App */




 /*-------------------*/
/* Table of Contents  /

    Color Palette
    General Site Styles
    Site Structure
    Site Menu
    Hero Section and Annimated Image
    Project Section
    Page Details Section
    Site Annimations
*/




/*---------------*/
/* Color Palette  /

#80434a - Red Dark
#a98b8e - Red Light
#00528c - Blue Dark
#c5e2ff - Blue Light
#2F2F2F - Gray Charcoal
#4e4e4e - Gray Dark
#a4a4a4 - Gray
lightgray - Gray Light
white - White

243E5E shirt
813A82 purple
FF8400 orange

*/




/*---------------*/
/* Z-Index Layers  /

Z-Index  0 = Bottom layer containing most elements
Z-Index  5 = Animated shapes
Z-Index 10 = Hero section, including Greg animation
Z-Index 20 = Top layer for menu and "Portfolio" site title

*/




 /*---------------------*/
/* General Site Styles */

html {
    font-family: "Open Sans", sans-serif; 
    font-size: 1rem;
    background-color: #243E5E;
    justify-content: center;
}

body {
    margin: 100px 0px 100px 0px;
    background-color: white;
    border-top: 12px solid #813A82;
    border-bottom: 18px solid #813A82;
    overflow-y: scroll;
    overflow-x: hidden;
    min-width: min-content;
    justify-content: center;
}

p {
    margin: 10px 0px 10px 0px;
}

a {
    color: #243E5E; 
    text-decoration: none;
    /* padding: 2px 6px 2px 6px; */
}

a:hover {
    color: white;
    background: #243E5E;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
}

a.btn-selected {
    color: white;
    background: #243E5E;
    border-radius: 4px 4px 4px 4px;
}

a.site-btn01 {
    padding: 5px 10px 5px 10px;
    font-size: .8rem;
    line-height: .8rem;
}

a.site-btn01:hover {
    color:#FF8400;
    background-color: #813A82;
}

a.site-btn02 {
    margin: 0rem 0rem 0rem 0rem;
    padding: 5px 8px 3px 8px;
}

hr {
    border-top: 0.2px solid;
    margin: 0;
    padding: 0;
}

.small-title {
    color:#813A82;
    font-size: 1.3rem;
}

.simple-image {
    margin-top: 2px;
    border-radius: 4px 4px 4px 4px;
}


/* Responsive Display Overrides for Large Devices */

@media screen and (orientation:landscape) and (min-device-width:800px),
screen and (min-width:800px) {
 
    a.site-btn01 {
        padding: 5px 10px 5px 10px;
        font-size: 1.1rem;
        line-height: 1.1rem;
    }

}




 /*----------------*/
/* Site Structure */

/* Responsive Display for All Devices */

.site-flex-outer {
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: center;
    height: 100%;
    align-items: top;
    max-width: 800px;
    margin: 0 auto;
    background-image: url("https://gfolio-s3bucket.s3.amazonaws.com/design_images_2/Decorative Boxes.png");
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: top right;

}

/* Responsive Display Overrides for Large Devices */

@media screen and (orientation:landscape) and (min-device-width:800px),
screen and (min-width:800px) {
 
    .site-flex-outer {
        /* flex-wrap: nowrap; */
        justify-content: center;
        background-size: 60px;
    }

}




 /*-----------*/
/* Site Menu */

.fullmenu-container {
    display: block;
    justify-content: center;
    min-height: 80px;
    z-index: 20;
    /* position: fixed;
    top: 0; */
}

.mainmenu-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    flex: 0 1 auto; /* Ensures this element is positioned on its own row:  flex: <flex-grow> <flex-shrink> <flex-basis>.  Requires parent to be a flex with nowrap and other children to be flex: 0 0 100% */
    background-color: #813A82;
    padding: 0rem .3rem 0rem .3rem;
}

.mainmenu-item {
    margin: 0rem .2rem 0rem .2rem;
    padding: 5px 8px 3px 8px;
    color: #FF8400;
}

.mainmenu-item:hover {
    color: white;
    background-color: #813A82;
}

.mainmenu-item-selected {
    margin: 0rem .2rem 0rem .2rem;
    padding: 5px 8px 0px 8px;
    color: black;
    background-color: #FF8400;
    border-radius: .5rem .5rem 0rem 0rem;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  
}

.submenu-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* justify-content: space-between; */
    /* justify-content: space-evenly; */
    flex: 0 0 auto;
    background-color: #FF8400;
    border-left: 1px solid #b9b9b9;
    border-right: 1px solid #b9b9b9;
    border-bottom: 1px solid #b9b9b9;
    padding: .1rem .1rem .1rem .1rem;
    border-radius: 0rem 0rem 1rem 1rem;
    overflow-x: hidden;
}

#submenu_items {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    width: 100%;
}


.submenu-item-prev {
    flex: 1;
    white-space: nowrap;
    font-size: .9rem;
    margin: 0rem .2rem 0rem .2rem;
    padding: 5px 8px 2px 8px;
    color: #813A82;
    text-align: left;
}

.submenu-item-prev:hover {
    color: white;
    background-color: #FF8400;
}


.submenu-item-next {
    flex: 1;
    white-space: nowrap;
    font-size: .9rem;
    margin: 0rem .2rem 0rem .2rem;
    padding: 5px 8px 2px 8px;
    color: #813A82;
    text-align: right;
}

.submenu-item-next:hover {
    color: white;
    background-color: #FF8400;
}


.submenu-item-selected {
    margin: 0rem .2rem 0rem .2rem;
    padding: 5px 3px 2px 3px;
    color: black;
    white-space: nowrap;
    text-align: center;
}




 /*----------------------------------*/
/* Hero Section and Annimated Image */

/* Responsive Display for All Devices */


.hero-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    align-items: end;
      flex: 0 0 100%;
    overflow: hidden;
}

.site-title-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex: 1 1 auto; /* Ensures this element is positioned on its own row:  flex: <flex-grow> <flex-shrink> <flex-basis>.  Requires parent to be a flex with nowrap and other children to be flex: 0 0 100% */
    height: min-content;
    z-index: 20;
}

.site-title-wrapper {
    width: min-content;
    text-align: right;
    overflow:visible;
    margin: 0px 0px 10px 0px;
    padding: .3rem .2rem .3rem .2rem;
    background-color: lightgray;
    border: 1px solid #b9b9b9;
    border-radius: 0rem 1rem 1rem 0rem;
}

.site-title {
    display: block;
    white-space: nowrap;
    font-size: 2.2rem;
    font-weight: bold;
    color: #813A82;
    margin: 0rem .5rem 0rem .5rem;
}

.site-title-special { 
    text-shadow: -3px 3px 0px #813A82;
    color: #243E5E;
}

.hero-content-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: left;
    flex: 0 0 100%;
}

.hero-image-box {
    position: relative;
    max-width: 130px;
    min-width: 130px;
    margin-right: .1rem;
    z-index: 10;
}

.hero-image-current {
    position: relative;
    max-width: inherit;
    z-index: 10;
}

.hero-image-next {
    position: absolute; /* Use "absolute" here on this child element to ensure the image is placed on top of the other child image.  Requires setting parent and other child to "relative" */
    top: 0px;
    left: 0px;
    max-width: inherit;
    z-index: 10;
}

.hero-body-box {
    flex: 0 1 auto;
    margin: auto 0rem auto 0rem;
    padding: 0 0 0 0;
    z-index: 10;
}

.hero-title {
    font-size: 1.7rem;
    font-weight: bold;
    color: #813A82;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}


.hero-text {
    font-family: Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.5rem;
    font-weight: 100;
    color: #243E5E;
    margin: .5rem 0rem .5rem 0rem ;
    text-align: center;
    border-right: 2px solid transparent; /* The typwriter cursor */
    border-left: 2px solid transparent; /* Balance the size of the cursor for proper centering */
}

.hero-text-emphasize {
    font-weight: bold;
}

.continue-wrapper {
    font-family: Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
    color: #243E5E;
    margin: .5rem 0rem .5rem 0rem ;
    text-align: center;
    align-content: center;

}

.bigText {
    font-size: 80px;

}



/* Responsive Display Overrides for Large Devices */
@media screen and (orientation:landscape) and (min-device-width:800px),
screen and (min-width:800px) {

    .site-title-box {
        /* width: min-content; */
        justify-content: center;
        flex: 0 0 auto;
    }

    .site-title-container {
        border-radius: 0rem 1.5rem 0rem 1.5rem;
        justify-content: center;
    }

    .site-title-wrapper {
        text-align: right;
        overflow:visible;
        margin: 10px 0px 7px 0px;
        padding: .5rem .4rem .7rem .4rem;
        background-color: lightgray;
        border: 1px solid #b9b9b9;
        border-radius: 0rem 1rem 1rem 0rem;
        width: 6.3rem; /* This is an IOS hack to force a minimum width on the wrapper element, thus ensuring the "Portfolio" title text is not wider than the wraper that contains it */
    }

    .site-title {
        font-size: 6.3rem;
        line-height: 6.3rem;
        writing-mode: vertical-rl;
        text-align: right;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        transform: rotate(-180deg);
        /* Safari */
        -webkit-transform:rotate(180deg);
      
        /* Firefox */
        -moz-transform: rotate(-180deg);
      
        /* IE */
        -ms-transform: rotate(-180deg);
      
        /* Opera */
        -o-transform: rotate(-180deg);
      
        /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }



    .site-title-special { 
        text-shadow: -8px 8px 0px #813A82;
        color: #243E5E;
    }

    .hero-content-box {
        justify-content: left;
        /* flex: 1; */
        /* width: min-content; */
        flex: 0 0 auto;

    }
    
    .hero-image-box {
        max-width: 205px;
        min-width: 205px;
    }
    
    .hero-image-current {
        max-width: inherit;
    }
    
    .hero-image-next {
        max-width: inherit;
    }

    .hero-body-box {
        width: auto;
        align-items: left;
        margin: auto 0rem auto 0rem;
    }

    .hero-text {
        font-family: Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
        font-size: 2.2rem;
        line-height: 2.6rem;
        font-weight:100;
        color: #243E5E;
        margin: 1rem 0rem 1rem 0rem ;
        max-width: 600px;
        text-align: center;
    }

}



/* Project Section */

.link-list-container {
    margin: 8px 0px 20px 8px;

}

.link-list {
    margin: 15px 0px 15px 0px;
}

.link-item {
    margin: 0rem 0rem 0rem 0rem;
    padding: 5px 8px 3px 8px;

}

.link-item-off {
    margin: 15px 0px 15px 0px;
    color: gray;
}

.link-item-off:hover {
    cursor: default;
}

.image-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #813A82;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
}

.image-box {
    display: flex;
    flex-wrap: nowrap;
    margin: 0px 0px 20px 0px;
    float: left;
}

.image-box img {
    flex-grow:0;
    flex-shrink:0;
    margin: 0px 0px 0px 0px;
    display: inline-block;
    align-self: flex-start;
    border: 1px solid #243E5E;
    width: 192px;
    border-radius: 4px;
    box-shadow: 12px 12px 0px #FF8400;
    -moz-box-shadow: 12px 12px 0px #FF8400;
    -webkit-box-shadow: 12px 12px 0px #FF8400;
    -khtml-box-shadow: 12px 12px 0px #FF8400;
}

.proj-img {
    background-color: transparent;
    width: 220px;
    height: 140px;
    perspective: 800px;
}

.proj-img-inner {
    position: relative;
    width: 200px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.proj-img-inner.flip-element {
    transform: rotateY(180deg);
}

.proj-img-inner.zoom-element {
    transform: scale(1.1, 1.1);
}

.proj-img-front, .proj-img-back {
    position: absolute;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.proj-img-front img{
    width: 170px;
}

.proj-img-back {
    transform: rotateY(180deg);
}

.proj-img-back img {
    width: 170px;
}

.proj-bts {
    overflow: hidden;
    height: 0;
    transition: height 0.6s;
}

.proj-bts.accordion {
    overflow: hidden;
}

.proj-content {
    margin: 0.6rem 0rem .6rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    vertical-align: top;
}

.proj-bg-img {
    background-image: url("https://gfolio-s3bucket.s3.amazonaws.com/design_images_2/Gears-01.png");
    background-position: center;
    background-repeat: no-repeat;
}

.content-block {
    display:inline-block;
    vertical-align: top;
    background-image: url("https://gfolio-s3bucket.s3.amazonaws.com/design_images_2/Decorative Boxes.png");
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

/* Responsive Display Overrides for Large Devices */
@media screen and (orientation:landscape) and (min-device-width:800px),
screen and (min-width:800px) {

    .image-title {
        font-size: 1.7rem;
        font-weight: bold;
        color: #813A82;
        margin: 0;
        padding: 0;
        line-height: 1;
        white-space: nowrap;
    }
    
    .proj-img-front img{
        width: 200px;
    }

    .proj-img-back img {
        width: 200px;
    }

}



/* Behind The Scenes (BTS) */

.bts-img-container-outer {
    margin: 0px 20px 10px 0px;
    padding: 0px 0px 20px 0px;
    float: left;
    text-align: center;
}

.bts-img-container-inner {
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    border-radius: 4px 4px 4px 4px;
    background-color: white;
    border: 1px solid #37332f;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    -khtml-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}


.bts-img {
    max-width: 100px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 0px 0px;
    display: block;

}

.bts-title {
    font-weight: bold;
    font-size: 1.4rem;
    margin: .5rem 0rem 0rem 0rem;
    padding: 1rem 0rem 0rem 0rem;
}




/* ------------- */
/* Page Details */

.page-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    flex: 0 0 100%;
    overflow: hidden;
}

#pageContent {
    width: 100%;
    align-self: left;
    vertical-align: top;
}

.details-title {
    font-size: 1.3rem;
    color: #FF8400;
}
.details-container-outer {
    background-color: #813A82;
    border-radius: 0 1rem 1rem 0;
    padding: .5rem 1rem 1rem 1rem;
    margin: 0 2rem 1rem 0;
}

.details-container-inner {
    background-color: lightgray;
    border-radius: 0 1rem 1rem 0;
    padding: .5rem .5rem .5rem .5rem;
}

.details-text {
    line-height: 1.3rem;
}

.details-text li {
    margin-top: 0.8rem;
}

.quoted-text {
    font-style: italic;
    margin-top: 10px;
}

.signature-text {
    margin-left: 25px;
    margin-bottom: 0;
}

.big-cap {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.details-footer {
    justify-content: center;
    text-align: center;
    margin: 1rem auto 1rem auto;
    padding: .5rem 2rem 1rem 0rem;
}

.mainmenu-wrapper.footer {
    border-radius: 0 1rem 0 0 ;
    font-size: 1.2rem;
    line-height: 1.2rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
}

.submenu-wrapper.footer {
    border-radius: 0rem .5rem .5rem 0rem;
    border-left: none;

}

.info-misc-wrapper {
    vertical-align: top;
}

.details-misc-wrapper {
    display: flex;
    margin: 0rem 0rem 0rem 0rem;
}

.skill-block {
    display: none;
}


/* Responsive Display Overrides for Large Devices */
@media screen and (orientation:landscape) and (min-device-width:800px),
screen and (min-width:800px) {

    .details-container-outer {
        margin-right: 2rem;
    }
    
    .skill-block {
        display:inline-block;
        vertical-align: top;
    }

}




/* ----------------- */
/* Site Annimations */


/* Slide Annimation */
.offscreen-left {
    overflow: hidden;
    transform: translateX(-150%);
    -webkit-transform: translateX(-150%);
}

.slide-in-left {
    animation: slide-in-left 0.3s forwards;
    -webkit-animation: slide-in-left 0.3s forwards;
}

.slide-out-left {
    animation: slide-out-left 0.3s forwards;
    -webkit-animation: slide-out-left 0.3s forwards;
}
    
@keyframes slide-in-left {
    0% { transform: translateX(100%); opacity: 0;}
    100% { transform: translateX(0%); opacity: 1;}
}

@-webkit-keyframes slide-in-left {
    0% { -webkit-transform: translateX(100%); opacity: 0; }
    100% { -webkit-transform: translateX(0%); opacity: 1; }
}
    
@keyframes slide-out-left {
    0% { transform: translateX(0%); opacity: 1; }
    100% { transform: translateX(-150%); opacity: 0; }
}

@-webkit-keyframes slide-out-left {
    0% { -webkit-transform: translateX(0%); opacity: 1; }
    100% { -webkit-transform: translateX(-150%); opacity: 0; }
}

.offscreen-right {
    overflow: hidden;
    transform: translateX(150%);
    -webkit-transform: translateX(150%);
}

.slide-in-right {
    animation: slide-in-right 0.3s forwards;
    -webkit-animation: slide-in-right 0.3s forwards;
}

.slide-out-right {
    animation: slide-out-right 0.3s forwards;
    -webkit-animation: slide-out-right 0.3s forwards;
}
    
@keyframes slide-in-right {
    0% { transform: translateX(-150%); opacity: 0;}
    100% { transform: translateX(0%); opacity: 1;}
}

@-webkit-keyframes slide-in-right {
    0% { -webkit-transform: translateX(-150%); opacity: 0; }
    100% { -webkit-transform: translateX(0%); opacity: 1; }
}
    
@keyframes slide-out-right {
    0% { transform: translateX(0%); opacity: 1; }
    100% { transform: translateX(150%); opacity: 0; }
}

@-webkit-keyframes slide-out-right {
    0% { -webkit-transform: translateX(0%); opacity: 1; }
    100% { -webkit-transform: translateX(150%); opacity: 0; }
}

/* Fade Annimation */

#hero_image_box img {
    -webkit-transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    transition: opacity .5s linear;
    }
    
.fade-in-element {
    -webkit-animation: fadein .5s forwards; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein .5s forwards; /* Firefox < 16 */
        -ms-animation: fadein .5s forwards; /* Internet Explorer */
            -o-animation: fadein .5s forwards; /* Opera < 12.1 */
            animation: fadein .5s forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.fade-out-element {
    -webkit-animation: fadeout .5s forwards; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadeout .5s forwards; /* Firefox < 16 */
        -ms-animation: fadeout .5s forwards; /* Internet Explorer */
            -o-animation: fadeout .5s forwards; /* Opera < 12.1 */
            animation: fadeout .5s forwards;
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}


/* Typing Annimation */

.typewriter {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap; /* Keeps the content on a single line */
    border-left: 2px solid white; /* Balance the size of the cursor for proper centering */
    border-right: 2px solid #813A82; /* The typwriter cursor */
    margin-left: auto; /* Gives that scrolling effect as the typing happens. */
    margin-right: auto; /* Gives that scrolling effect as the typing happens. */
    font-size: 1.1rem;
    line-height: 1.5rem;

    animation: 
        typing 3.0s steps(40, end),
        blink-caret .90s step-end infinite;
    }
    
    /* The typing effect */
    @keyframes typing {
    from { width: 0 }
    to { width: 100% }
    }
    
    /* The typewriter cursor effect */
    @keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: transparent #813A82 transparent white; }
    }

    /* Responsive Display Overrides for Large Devices */
@media screen and (orientation:landscape) and (min-device-width:800px),
screen and (min-width:800px) {

    .typewriter {
        border-left: 2px solid transparent; /* Balance the size of the cursor for proper centering */
        border-right: 2px solid #813A82; /* The typwriter cursor */
        font-size: 2.2rem;
        line-height: 2.6rem;
    }
    
    
}


/* Floating Shapes Annimation */

#shape01 {
    position: absolute;
    overflow: hidden;
    z-index: 5;
    height: 35px;
    width: 45px;
    top: 20%;
    background-color: #243E5E;
    opacity: 0.15;
    /* filter: blur(2px); */
    border: 2px solid black;
    border-radius: .5rem .5rem .5rem .5rem;
    animation: animateShapeL 42s linear infinite alternate;
}

#shape02 {
    position: absolute;
    overflow: hidden;
    z-index: 5;
    height: 65px;
    width: 30px;
    top: 28%;
    background-color: #813A82;
    opacity: 0.15;
    /* filter: blur(2px); */
    border: 2px solid black;
    border-radius: .5rem .5rem .5rem .5rem;
    animation: animateShapeR 37s linear infinite alternate;
}

#shape03 {
    position: absolute;
    overflow: hidden;
    z-index: 5;
    height: 16px;
    width: 50px;
    top: 35%;
    background-color: #FF8400;
    opacity: 0.15;
    /* filter: blur(2px); */
    border: 2px solid black;
    border-radius: .5rem .5rem .5rem .5rem;
    animation: animateShapeR 27s linear infinite alternate;
}

#shape04 {
    position: absolute;
    overflow: hidden;
    z-index: 5;
    height: 30px;
    width: 50px;
    top: 30%;
    background-color: #813A82;
    opacity: 0.15;
    /* filter: blur(2px); */
    border: 2px solid black;
    border-radius: .5rem .5rem .5rem .5rem;
    animation: animateShapeR 32s linear infinite alternate;
}

#shape05 {
    position: absolute;
    overflow: hidden;
    z-index: 5;
    height: 10px;
    width: 40px;
    top: 60%;
    background-color: #813A82;
    opacity: 0.15;
    /* filter: blur(2px); */
    border: 2px solid black;
    border-radius: .5rem .5rem .5rem .5rem;
    animation: animateShapeR 38s linear infinite alternate;
}

#shape06 {
    position: absolute;
    overflow: hidden;
    z-index: 5;
    height: 10px;
    width: 50px;
    top: 60%;
    background-color: #FF8400;
    opacity: 0.15;
    /* filter: blur(2px); */
    border: 2px solid black;
    border-radius: .5rem .5rem .5rem .5rem;
    animation: animateShapeL 15s linear infinite alternate;
}

/* Annimate Shape */
@keyframes animateShapeL {
    from {
      left: 65px;
      opacity: 0.0;
    }
    50% {
      left: 50%;
      opacity: 0.25;
    }
    to {
      left: calc(100% - 65px);
      opacity: 0.0;
    }
}
@keyframes animateShapeR {
    from {
      right: 65px;
      opacity: 0.0;
    }
    50% {
      right: 50%;
      opacity: 0.25;
    }
    to {
      right: calc(100% - 65px);
      opacity: 0.0;
    }
}

    /* Responsive Display Overrides for Large Devices */
    @media screen and (orientation:landscape) and (min-device-width:800px),
    screen and (min-width:800px) {
    
        #shape01 {
            height: 70px;
            width: 90px;
            top: 13%;
        }
        
        #shape02 {
            height: 130px;
            width: 60px;
            top: 17%;
        }
        
        #shape03 {
            height: 36px;
            width: 100px;
            top: 25%;
        }
        
        #shape04 {
            height: 60px;
            width: 120px;
            top: 20%;
        }
        
        #shape05 {
            height: 20px;
            width: 80px;
            top: 50%;
        }
        
        #shape06 {
            height: 20px;
            width: 110px;
            top: 50%;
        }
        
        /* Annimate Shape*/
        @keyframes animateShapeL {
            from {
              left: 120px;
              opacity: 0.0;
            }
            50% {
              left: 50%;
              opacity: 0.25;
            }
            to {
            left: calc(100% - 120px);
            opacity: 0.0;
            }
        }
        @keyframes animateShapeR {
            from {
              right: 120px;
              opacity: 0.0;
            }
            50% {
              right: 50%;
              opacity: 0.25;
            }
            to {
              right: calc(100% - 120px);
              opacity: 0.0;
            }
        }
                
        
    }



/* Annimate SubMenu to Slide */

.submenu-slideL {
    position: relative;
    animation: SlideSubMenuL .2s linear;
}
.submenu-slideR {
    position: relative;
    animation: SlideSubMenuR .2s linear;
}

/* Slide SubMenu */
@keyframes SlideSubMenuL {
    from {
      left: 0px;
    }
    to {
      left: -100px;
    }
}
@keyframes SlideSubMenuR {
    from {
        right: 0%;
      }
      to {
        right: -100px;
      }
  }