/* CSS Document for Screens */
/*
Website Name: Anmar Jarjees' Portfolio
Website URL: https://www.AnmarJarjees.com
Website Author: Anmar Jarjees
Author URL: https://www.AnmarJarjees.com
Copyright 2012-2026. All Rights Reserved.

Color Guide    
***********
#133951 - Navy - Dark Blue
#1d74be - Mid Blue
#e1e1e1 - Light Gray
#a3a3a4 - Mid Gray
#8a8a8a - Gray
*************************************************/

@charset "utf-8";
/* 
Importing google font: Arya
- wght: 
    > Specifies the font weights
- display=swap: 
    > Browser will show a fallback font until the Arya font is fully loaded then it will swap to Arya

importing google font: Arya (has two styles: Arya Normal 400 and Bold 700)
 */
@import url('https://fonts.googleapis.com/css2?family=Arya:wght@400;700&display=swap');

/* ==========================================================================
   Table of contents
   ========================================================================== */
/*
00. General and Helping Classes -------------------- Global helper classes

01. Mobile First styles ---------------------------- Main styles for smallest screens
    01.01 Main Containers
    01.02 Text Styling
    01.03 Main Buttons and Links Styling
    01.04 Header and its Components
    01.05 Main Navigation
    01.06 Portfolio Navigation
    01.07 Footer and its Components
    01.08 Article and Aside Elements inside Home Section
    01.09 Blockquote Element inside Home Section
    01.10 Web / Software Development Samples inside Portfolio
    01.11 Graphic Thumbnails Styling
    01.12 About Summary Section
    01.13 Technical Profile, Professional Experience, and Education
    01.14 Contact Form

02. Media Queries ---------------------------------- Tablet and Desktop Styles
    02.01 Medium Screens (Tablet and Up)
    02.02 Large Screens (Desktop and Up)
    02.03 Small Height Screens (Landscape Phones)
    02.04 Extra Large Screens (Enable Flash/Video Samples)
*/

/* ==========================================================================
   00. General and Helping Classes (Global)
   ========================================================================== */

/* Modern Way: Clearfix helper class  */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Previous Code: CSS for styling the videos within my website not the new one embedded YouTube links: */
/* figure.flash-sample video {
    width: 70%;
    display: block;
    margin: auto;
    height: auto;
} */


/* 
Styling the video element inside the figure.flash-sample 
<figure class="flash-sample">
*/
figure.flash-sample iframe {
    width: 70%;
    display: block;
    margin: auto;
    aspect-ratio: 16 / 9;
    /* modern way to keep video shape correct */
    border: none;
}

/* End General and Helping Classes (Global)
   ======================================== *


/* ==========================================================================
   01. Mobile First styles
   ========================================================================== */

/* 01.01 Main Containers */
body {
    background: #336699 url(../assets/htmlBG.jpg) repeat top right;
    position: relative;
    font-family: 'Arya', 'Arial Narrow', Arial, sans-serif;
}

#page-wrapper {
    max-width: 75em;
    /*  1200px */
    min-width: 20em;
    /* 320px */
    width: 100%;
    margin: 0 auto;
    background: #13437a url(../assets/bodyBG.jpg) repeat 0 0;
    position: relative;
}

#page-wrapper img {
    max-width: 100%;
}

/* 01.05 Main Content */
main#main-content {
    background: #94B5C9 url(../assets/bodyBG.jpg) repeat 0 0;
    position: relative;
    margin-top: 65px;
}

main#main-content section.sub-content {
    width: 95%;
    margin: 5px auto 0 auto;
}

section#studies article P {
    width: 100%;
    word-wrap: break-word;
    word-break: break-word;
}

/* Section inside Main Content */
section.samples {
    width: 100%;
}

section::after {
    /* adding a virtual element after each section with the following properties: */
    content: '';
    /* adding an empty element */
    display: block;
    clear: both;
}

/* defining a pseudo element */

section#home {
    margin-top: 75px;
}

/* 01.02 Text Styling */
h1 {
    margin: 0 0 1em 0;
    font-size: 2.8em;
    font-weight: 700;
}

h2 {
    margin: 0 0 .5em 0;
    font-size: 1.8em;
    line-height: 1.5em;
    background-color: #94B5C9;
    border-bottom: 3px inset aliceblue;
    padding-left: .5em;
}

h3 {
    margin: 0 0 .4em 0;
    font-size: 1.4em;
    line-height: 1.5em;
    background-color: #aac4d4;
    border-bottom: 1px inset aliceblue;
    padding-left: .5em;
}

h4 {
    margin: 0 0 .3em 0;
    font-size: 1.2em;
    line-height: 1.4em;
    background-color: #bbd0dd;
    padding-left: .5em;
}

p {
    margin: 0 0 1em 0;
}

/* 01.03 Main Buttons and links styling */
a {
    color: #007eff;
}

a:visited {
    color: #65b1ff;
}

a.btn {
    font-size: 1.1em;
    text-decoration: none;
    color: #133951;
    border: 1px solid #133951;
    padding: 2px 10px;
    transition: background-color .5s;
    /* using short hand style: property + time */
    margin-bottom: 10px;
}

a.btn:hover {
    background-color: rgba(0, 0, 0, .2);
    /* R,G,B, then Alpha 70% transparent */
}

/* 01.04 Header and its component */
header a.logo {
    position: fixed;
    z-index: 3;
    background: url(../assets/MyLogo.png) no-repeat 0 0;
    width: 50px;
    height: 50px;
    background-size: contain;
    top: 4px;
    left: 4px;
}

header a.logo span {
    display: none;
    /* hiding the text to let user sees only the logo */
}

/* 
   Hidden elements on mobile screen:
   **********************************
   Elements hidden on small screens by default (mobile-first approach).
   These will be shown conditionally using media queries.
   ==================================================================== */
div.carousel,
section#flash-samples,
li#flash-link,
nav.portfolio-nav li.flash-btn,
a.scroll-top,
section#home p span {
    position: absolute;
    display: none;
    visibility: hidden;
}

.errorField {
    width: 90%;
    background-color: #133951;
    color: #BBD5DB;
    padding-left: 5px;
    margin-top: 3px;
}

/*  
Fix for anchor links with fixed header (mobile/tablet):
Creates invisible space above target sections so they scroll correctly
====================================================================== */
section#home:before,
section#portfolio:before,
article#case1:before,
article#case2:before,
section#about:before,
section#tech-profile:before,
section#contact:before {
    content: " ";
    display: block;
    margin-top: -80px;
    height: 80px;
    visibility: hidden;
}


/* 01.05 Main Navigation (mobile nav) */
/* styling icon fonts */
nav.main-nav .icon {
    margin-right: 7px;
    font-size: 1em;



    transition: .25s color ease-in-out;
}

/* styling main nan */
nav.main-nav {
    background: #cf0004 url(../assets/navBG.jpg) repeat 0 0;
    position: fixed;
    width: auto;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 2;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
    /* 8px 15px */
}

.mobile-nav-icon {
    background: url('../assets/nav-open.png') 0 0 no-repeat;
    background-size: contain;
    width: 60px;
    /* Original: 64px */
    height: 40px;
    /* Original: 44px */
    float: right;
    margin: 14px 15px 0 0;
    cursor: pointer;
}

.mobile-nav-icon.open {
    background-image: url('../assets/nav-close.png');
}

nav.main-nav ul {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    list-style: none;
    background: #cf0004 url(../assets/navBG.jpg) repeat 0 0;
    position: static;
    display: block;
    box-shadow: none;
    transition: all ease-in-out .35s;
}

nav.main-nav ul.active {
    max-height: 700px;
}

nav.main-nav ul {
    padding: 0;
}

nav.main-nav>ul>li {
    float: none;
}

nav.main-nav ul li a {
    width: auto;
    display: block;
    /* the anchor link will take the full width of the browser */
    /* the entire column will be clickable */
    margin: 2px 10px;
    padding: 0 15px;
    border: 2px solid #133951;
    text-decoration: none;
    color: #133951;
    text-transform: uppercase;
    font-weight: bold;

    /* radius */
    border-radius: 7px;

    /* transition */
    transition: 0.15s background-color linear;
}

nav.main-nav a:focus,
nav.main-nav a:hover,
nav.main-nav a:active {
    background-color: #133951;
    color: #fff;
}

nav.main-nav ul ul li a {
    /* customize the hierarchy */
    margin-left: 2.5em;
}

/* 01.06 Portfolio Nav */
/* start: styling nav#portfolioNav: the box that contains a list to my samples */
nav.portfolio-nav {
    width: 100%;
    margin-bottom: 15px;
}

nav.portfolio-nav ul {
    margin: auto;
    padding: 0;
}

nav.portfolio-nav ul li {
    display: inline-block;
    width: 46%;
    margin: 1.5%;
}

nav.portfolio-nav,
nav.portfolio-nav li a {
    border-radius: 7px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

nav.portfolio-nav a:link,
nav.portfolio-nav a:visited {
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    color: #133951;
    width: 100%;
    margin: 1.2%;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    padding: .5em 0;
}

nav.portfolio-nav a:hover,
nav.portfolio-nav a:active {
    color: #AEE2EB;
    background-color: #015287;
}

/* 01.07 Footer and its component */
footer {
    margin: 25px auto 0 auto;
    background-color: #133951;
    font-size: .8em;
    border-top: 2px groove #e1e1e1;
    color: #fff;
    width: 100%;
    text-align: center;
}

footer ul {
    list-style-type: none;
}

footer nav.footer-nav a,
footer nav.on-the-web a {
    color: #fff;
    text-decoration: none;
}

footer p.copyright {
    margin: 0;
    padding: 0;
}

/* Footer Navigation (mobile nav) */
nav.footer-nav,
nav.on-the-web {
    width: 100%;
    float: none;
    margin: auto;
    clear: both;
}

nav.footer-nav ul {
    margin: 0 auto;
    padding: 0;
}

nav.footer-nav ul li {
    display: inline-block;
    margin: 0 .3em;
}

nav.footer-nav ul li a {
    display: inline-block;
    margin: 0;
    border: none;
    border-left: 1px solid #ada791;
    padding-left: .4em;
}

nav.footer-nav ul>li:first-child>a {
    border-left: none;
}

nav.on-the-web ul {
    /*, nav.on-the-web ul li a  */
    display: block;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    font-size: 1.1em;
    padding: 0;
    margin: 0;
}

nav.on-the-web ul li {
    /*, nav.on-the-web ul li a  */
    display: inline-block;
    width: 30%;
    margin: 0 1% 0 1%;
}

footer .icon {
    margin-right: 3%;
    font-size: 1.2em;
}

/* done */

/* 01.08 styling the article and aside elements inside home section */
section#home article {
    width: 100%;
    overflow: hidden;
}

section#home aside {
    width: 98%;
    display: block;
    background-color: #133951;
    border-top: 2px solid #8a8a8a;
    border-bottom: 2px solid #8a8a8a;
    border-left: 4px solid #8a8a8a;
    border-right: 4px solid #8a8a8a;
    padding: 20px 0 0 0;
    margin-left: auto;
    margin-right: auto;
}

section#home a.btn {
    float: right;
}

/* the code for show / hide the plus and the minus symbols beside the articles titles (Case Study) */
section#studies article h3:first-child {
    background-image: url(../assets/plus.png);
    background-repeat: no-repeat;
    border: none;
    background-position: 5px 8px;
    padding-left: 30px;
    cursor: pointer;
}

section#studies article h3.minus_symbol {
    background-image: url(../assets/minus.png);
}

/* 01.09 blockquote element inside home section */
blockquote {
    position: relative;
    margin: 0 10px 50px 50px;
    padding: 0;
    font-size: 1.2em;
    line-height: 1.2em;
    color: #DBE9EC;
    font-style: italic;
}

blockquote::before {
    /* adding our pseudo element before all the contents of blockquote */
    content: '\201C';
    top: 20px;
    left: -50px;
}

blockquote::after {
    /* adding our pseudo element after all the contents of blockquote */
    content: '\201D';
    bottom: -42px;
}

blockquote::before,
blockquote::after {
    font-family: 'Georgia', serif;
    font-size: 5.2em;
    position: absolute;
}

blockquote cite {
    font-size: .8em;
    font-style: normal;
    display: block;
    line-height: .9em;
    /*18px; */
    color: #fff;
    position: absolute;
    /*top: 127%;*/
    bottom: -42px;
    z-index: 1;
}

blockquote cite a:link,
blockquote cite a:visited {
    color: #fff;
}

blockquote cite a:hover {
    color: #DBE9EC;
}

/* 01.10  Each Web / SW development div styling in portfolio section */
div.sample-details {
    width: 100%;
    float: none;
    margin-right: 2%;
    margin-bottom: 20px;

    text-align: left;
    border: 2px solid #8a8a8a;
    box-sizing: border-box;
}

div.sample-details div.sample-img {
    background: #cf0004 url(../assets/detailsBG.jpg) repeat 0 0;
    position: relative;
    border-bottom: 1px silver solid;
    padding: 1%;
    transition: background-color .5s;
    /* using short hand style: property + time */
}

div.sample-details img {
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 95%;
    border: 2px #fff solid;
    transition: all 0.3s ease;
}

div.sample-details img:hover {
    opacity: .5;
}

div.sample-caption {
    margin: 5px;
    padding: 0 10px;
}

/* 01.11 Small and Large Graphic thumbnails div styling */
div.large-thumbnails img,
.small-thumbnails img {
    padding: 4px;
    border: 2px solid #8a8a8a;
    box-sizing: border-box;
    margin-bottom: 15px;
    border-radius: 12px;
    overflow: hidden;
}

div.large-thumbnails img {
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
    display: block;
}

div.small-thumbnails img {
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
    float: left;
    background-color: #fff;
}

/* 01.12  My Summary */
article.summary {
    margin: 15px .1em;
    background-color: #133951;
    color: #DBE9EC;
    border-bottom: 3px inset aliceblue;
    padding: 10px 15px;
}

article.summary h3 {
    background: none;
    border-bottom: none;
    padding-left: 0;
}

article.summary img {
    float: right;
    margin: 1em 1em 1em 1em;
    width: 30%;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: .35em;
    box-shadow: 5px 5px 5px #828282;
}

/* 01.13 section tech-Profile and pro-experience */
#tech-profile ul {
    width: 95%;
    margin: auto;
    padding-left: 0;
}

#tech-profile h4,
#pro-experience h4,
#education h4 {
    margin: 10px auto;
}

.accordion {
    margin: auto;
}

.accordion li {
    cursor: pointer;
    background: url(../assets/accordion_bg.png) repeat-x;
    font-weight: bold;
    color: #015287;
    border: 1px solid #b2b2b2;
    margin-bottom: .1em;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding: 0 .1em .1em .2em;
}

.accordion li ul li {
    margin-top: 0.25em;
}

.accordion .second {
    background: url(../assets/accordion_bg.png) repeat-x;
    border: 1px solid #b2b2b2;
    font-weight: bold;
}

.accordion li.active li {
    text-indent: 0;
}

.accordion li li {
    font-weight: normal;
    background: none;
    border: 0;
}

/* done */


/* Start: Styling the work experience tabs div (about Me section) */
div.tabs-block {
    background-color: #133951;
    color: #DEE2EB;
    border: 1px solid #999;
    padding: 0;
}

div.tabs-block div#work-experience {
    padding: 0 .4em;
}

div.tabs-block ul#experience-tabs {
    margin: 0;
    padding: .2em 0;
    width: 100%;
    display: block;
    list-style: none;
    overflow: hidden;
}

div.tabs-block ul#experience-tabs li {
    /* targeting the first level of ul items or direct children */
    /* it's important because later on we will be nested another sub ul items */
    float: left;
    width: 30%;
    margin: 0 1.6%;
    font-weight: bold;

    text-align: center;
    background-color: #e1e1e1;
}

div.tabs-block ul#experience-tabs li a:link,
div.tabs-block ul#experience-tabs li a:visited {
    text-decoration: none;
    color: #888;
    display: inline-block;
    width: 100%;
}

div.tabs-block ul#experience-tabs li a:hover,
div.tabs-block ul#experience-tabs li a:active {
    background-color: #94B5C9;
    color: #13437a;
}

/* End: Styling the work experience tabs div (about Me section) */

/* 01.14 Contact Form */
#contact-form {
    width: 90%;
    background: url('../assets/formBG.jpg');
    padding: .3em .8em .3em .8em;
    font-weight: bold;
    border-radius: 12px;
    border: 1px #e1e1e1 groove;
    color: #BBD5DB;
    margin: 0 auto;
    box-shadow: 3px 3px 3px #20242C;
}

#contact-form label {
    font-weight: bold;
    display: block;
    margin: auto;
    width: 98%;
    color: #1F3A4F;
}

#form-message {
    display: block;
    width: 90%;
    border: 1px #CCCCCC solid;
    margin: auto;
    text-align: center;
}

#contact-form input,
#contact-form textarea {
    display: inline;
    color: #13437a;
    width: 98%;
    padding: 0.35em;
    margin: 0 auto;
    outline: none;
    border: 1px solid #999;
    background: linear-gradient(#ffffff, #bbbbbb) no-repeat;
    border-radius: 5px;
}

div.form-buttons {
    width: 100%;
    margin: .7em auto;
    color: #13437a;
}

#contact-form div.form-buttons input {
    display: inline-block;
    width: 40%;
    margin: 0 4.6%;
    border-radius: 15px;
}

#contact-form div.form-buttons input:hover {
    background: none;
    background-color: #CCCCCC;
}

/* End: contact us form */

/* End: Mobile First styles
   ========================================================================== */

/* done */

/* ==========================================================================
   02. Media Queries
   ==========================================================================
   Based on modern Bootstrap 5+ breakpoints (mobile-first):
   - Mobile => default styles (below 576px)
   - Small => ≥ 576px (sm) — small tablets, phablets
   - Medium => ≥ 768px (md) — tablets and up
   - Large => ≥ 992px (lg) — desktops and up
   - Extra-Large => ≥ 1200px (xl) — large desktop displays
   ==========================================================================
*/

/* ==========================================================================
   02.01: Medium Screens (Tablet and Up) — min-width: 768px (48em)
   Based on Bootstrap's "md" breakpoint: used for tablets and small laptops
   ========================================================================== */
@media only screen and (min-width: 768px)
/* Tablet and up */
    {
    main#main-content {
        margin-top: 80px;
    }

    header a.logo {
        width: 70px;
        height: 70px;

        top: 6px;
        left: 6px;
    }

    nav.main-nav {
        height: 80px;
    }

    nav.main-nav .icon {
        font-size: 1.3em;
    }

    .mobile-nav-icon {
        width: 75px;
        /* Original: 64px */
        height: 55px;
        /* Original: 44px */
        margin: 20px 15px 0 0;
    }

    nav.main-nav ul li {
        margin-top: 4px;
    }

    nav.main-nav ul li a {
        padding: 5px 15px;
    }

    /* 
    *****************************************
    Start Dealing with Carousel and its Items 
    *****************************************
    */
    /* Show the entire carousel and prepare layout */
    div.carousel {
        /* Reveal carousel on tablets/desktops */
        display: block !important;
        /* Make sure it's visible above tablet size */
        visibility: visible;
        margin-top: 75px;
        /* Required for absolute-positioned child images */
        /* Fixes stacking/layout issues from mobile's absolute */
        position: relative;
    }

    /* Headline and button styling inside carousel (centered over image) */
    div.carousel div.headline {
        position: absolute;
        left: 20%;
        right: 20%;
        width: 60%;
        bottom: 20px;
        text-align: center;
    }

    div.carousel div.headline h1 {
        line-height: 1em;
        margin: 0 0 10px 0;
        font-size: 1.5em;
        color: #fff;
        text-shadow: 3px 3px 2px #000;
    }

    div.carousel a.btn {
        color: #fff;
        border: 1px solid #fff;
        font-weight: bold;
        display: inline-block;
        margin: auto;
        text-align: center;
    }

    /* =============================================
     Carousel image handling
     ============================================= */

    /*
    All images are stacked on top of each other.
    Only one image is shown at a time using the .show class.
    */

    div.carousel img {
        display: none;
    }

    /* Display the active image */
    div.carousel img.show {
        display: block;
    }

    /* End Dealing with Carousel and its Items */

    /* Restore span visibility on larger screens */
    section#home p span {
        position: static;
        display: inline;
        visibility: visible;
    }

    /* Override blockquote element inside home section */
    blockquote {
        margin-right: 60px;
    }

    div.sample-details {
        width: 48%;
        float: left;
    }

    div.sample-details div.sample-caption {
        height: 20em;
        overflow-x: hidden;
        overflow-y: scroll;
        margin-right: 0;
    }

    div.large-thumbnails img {
        width: 48%;
        float: left;
    }

    div.small-thumbnails img {
        width: 31%;
    }

    section#tech-profile,
    section#pro-experience {
        float: left;
        /* display: inline-block;  */
        width: 48.5%;
        margin: 0 0 5px 0;
    }

    section#pro-experience {
        margin-left: 1%;
    }

    div.tabs-block ul#experience-tabs li {
        margin: 0 1.2%;
    }

    section#education {
        clear: both;
    }
}

/* end Medium Screens (Tablet and Up) - @media only screen and (min-width: 768px)  */

/* done */

/* ==========================================================================
   02.02: Large Screens (Desktop and Up) — min-width: 992px (62em)
   Based on Bootstrap's "lg" breakpoint: desktops and large tablets in landscape
   ========================================================================== */

@media only screen and (min-width: 992px) {

    /* Desktop and up */
    main#main-content {
        margin-top: -20px;
    }

    /* 
    Remove fixed header offset on larger screens where it's not needed
    ================================================================== */
    section#home:before,
    section#portfolio:before,
    article#case1:before,
    article#case2:before,
    section#about:before,
    section#tech-profile:before,
    section#contact:before {
        content: "";
        display: block;
        margin-top: 10px;
        /* Small spacing for clean scroll */
        height: auto;
        visibility: hidden;
    }

    header a.logo {
        width: 98px;
        height: 98px;
        position: absolute;
        top: 7px;
        left: 7px;
    }

    a.scroll-top {
        visibility: visible;
        width: 65px;
        height: 65px;
        background-color: silver;
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: none;
        z-index: 3;
        background: silver url(../assets/arrow-up.png) no-repeat 0 0;
        border-radius: 50%;
        /* transition */
        transition: 0.15s background-color linear;
    }

    a.scroll-top:hover {
        background-color: #e1e1e1;
    }

    nav.main-nav div.mobile-nav-icon {
        display: none !important;
        visibility: hidden;
    }

    /* Desktop Nav */
    nav.main-nav {
        height: 60px;
        background: #94B5C9 url(../assets/bodyBG.jpg) repeat 0 0;
        position: absolute;
        /*top:-4px;*/
        z-index: 1;
    }

    nav.main-nav ul {
        margin: 0;
        padding: 0;
        float: right;
        max-height: none;
        width: auto;
        background: #94B5C9 url(../assets/bodyBG.jpg) repeat 0 0;
    }

    nav.main-nav ul li {
        margin: 0;
    }

    nav.main-nav ul li a {
        /* override radius in mobile nav */
        border-radius: 0;
    }

    nav.main-nav ul ul {
        display: none;
        margin-top: -4px;
        position: absolute;
    }

    nav.main-nav ul>li {
        /* direct children */
        float: left;
    }

    nav.main-nav span.icon {
        display: block;
        margin: 0 auto;
        padding: 0;
    }

    nav.main-nav ul>li>a {
        float: left;
        padding: 11px 0 0 0;
        margin: 0;
        width: 8em;
        border: none;
        border-left: 1px solid #ada791;
    }

    nav.main-nav ul>li:first-child>a {
        border-left: none;
    }

    nav.main-nav ul li a {
        text-align: center;
    }

    nav.main-nav ul ul li a {
        /* customize the hierarchy */
        margin-left: 0;
        padding: 2px 0;
    }

    /*Nav: Drop Down Menu*/
    li.with_submenu ul {
        position: absolute;
        z-index: 3;
        top: 64px;
        border-bottom: 1px solid #a3a375;
        border-left: 1px solid #a3a375;
        border-right: 1px solid #a3a375;
        width: 8em;

        border-radius: 0 0 10px 10px;
        /* top right bottom left */

        /* below overflow rule is very important to prevent 
           the hover red color from appearing outside the ul
        */
        overflow: hidden;
        display: none;
    }

    nav.main-nav li.with_submenu a {
        display: block;
        position: relative;
        z-index: 10;
    }

    nav.main-nav li.with_submenu:hover ul {
        display: block;
        animation-name: slideDown;

        /* choosing any name we like */
        animation-duration: .25s;

        animation-timing-function: ease;

    }

    /* Start dealing with the carousel headlines and button (Optional Enactments) */
    /* Refine headline size on desktop */
    div.carousel .headline h1 {
        font-size: 2em;
        /* Larger text for desktop displays */
        line-height: 0.6em;
        margin: 0 0 30px 0;
    }

    /* You can also increase the button padding or font-size here if desired */
    div.carousel a.btn {
        font-size: 1rem;
        padding: 0.5em 1.2em;
    }

    /* End dealing with the carousel headlines and button (Optional Enactments) */

    /* Standard keyframes */
    /* ==========================================================================
    Keyframes: slideDown animation
    Smooth downward slide with fade-in (used on header or hero elements)
   ========================================================================== */
    @keyframes slideDown {
        0% {
            transform: translateY(-100%);
            opacity: 0;
        }

        90% {
            transform: translateY(10%);
        }

        100% {
            transform: translateY(0%);
            opacity: 1;
        }
    }

    /* 01.06 styling the article and aside elements inside home section */
    section#home article {
        width: 50%;
        float: left;
    }

    section#home aside {
        width: 40%;
        float: right;
    }

    div.sample-details {
        width: 31%;
        margin-left: 1%;
        margin-right: 1%;
        float: left;
    }

    div.small-thumbnails img {
        width: 23%;
    }

    section#tech-profile,
    section#pro-experience,
    section#education {
        float: left;
        /* display: inline-block; */
        width: 32.5%;
        clear: none;
        margin-bottom: 10px;
    }

    section#pro-experience,
    section#education {
        margin-left: .7%;
    }
}

/* end  Large Screens (Desktop and Up - @media only screen and (min-width: 992px) */

/* done */

/* ==========================================================================
   02.03: Small Height Screens (Landscape Phones) — max-height: 440px (27.5em)
   Targeting landscape orientation on small smartphones with short vertical space.
   ========================================================================== */

@media only screen and (max-height: 27.5em) {

    /* Adjust main nav text for limited height devices */
    nav.main-nav ul li a {
        font-size: 0.8em;
        line-height: 1.5em;
    }

    /* Reduce submenu item width and spacing */
    nav.main-nav ul ul li a {
        margin-left: 2.5%;
        float: left;
        width: 38%;
    }

}

/* End @media only screen and (max-height: 27.5em) - Small Height Screens (Landscape Phones) */

/* 02.04: Extra Large Screens (1200px+) — Enable Flash Samples */
@media only screen and (min-width: 75em) {

    /* Start: Activate Flash link, button and Samples */
    section#flash-samples,
    li#flash-link,
    nav.portfolio-nav li.flash-btn {
        position: static;
        display: inline;
        float: right;
        visibility: visible;
    }

    nav.portfolio-nav ul li {
        display: inline-block;
        width: 30%;
        margin: 1.5%;
    }

    figure.flash-sample {
        margin-top: 20px;
        padding-bottom: 20px;
        border-bottom: 2px groove #e1e1e1;
    }

    /* Below is unused CSS for embedded flash files before using YouTube links: */
    /* figure.flash-sample embed {
        display: block;
        margin: 10px auto;
    } */

    figcaption {
        background-color: #aac4d4;
        color: #000;
        border: 1px solid #8a8a8a;
        text-align: center;
        width: auto;
        font-weight: bold;
    }
}

/* End: Media Queries
   ========================================================================== */