@media screen and (max-width: 768px) {
    body {
        font-size: 3vw; /* Responsive fluid text */
    }

    header {
        position: fixed;
    }

    .navmenu {
        display: none;
    }

}


@media screen and (min-width: 769px) {
    .hamburger {
        margin: 20px 60px;
    }

    header {
        width: 100%;
        height: 80px;
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
    }

    .navmenu ul {
        display: flex;
        justify-content: center;
        margin: 20px auto;
    }
}

/* L a r g e  S c r e e n s  L a p t o p s  a n d  D e s k t o p s */
@media screen and (min-width: 1024px) {
    body * {
        //font-size: 0.9375rem;
    }

    .slideText {
        position: relative;
        top: 30%;
        width: 50%;
        height: 60vh;
        z-index: 2;
        margin-right: auto;
        margin-left: auto;
        display: block;
    }

    .about {
        height: auto;
        grid-template-columns: 1fr 5fr 9fr 3fr 1fr; 
        grid-template-areas:
        "blanklt textbox contentbox blankctr blankrlt";  
        grid-auto-rows: 100%;
        background: #ffffff;
    }

    .blank {
        display: block;
    }

    .text-wrapper {
        display: block;
        grid-area: textbox;
        border-right: 1px solid #f7f7f7;
    }

    .blank:first-child {
        grid-area: blanklt;
        border-right: 1px solid #f7f7f7;
    }

    .blank-center {
        grid-area: blankctr;
        border-left: 1px solid #f7f7f7;
    }

    .blank:last-child {
        grid-area: blankrlt;
        border-left: 1px solid #f7f7f7;
    }

    .about .column {
        height: auto;
        margin-right: auto;
        margin-left: auto;
    }

    .about-wrapper {
        grid-area: contentbox;
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
    }

    .about .partners {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: relative;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        margin-bottom: 20%;
    }

    .about-wrapper .content {
        width: 100%;
        padding: 60px 0 0;
    }

    .about button {
        font-size: 0.9375rem;
    }

    .about .content h1 {
        display: block;
    }

    .about .content h2,
    .about .content span {
        display: none;
    }

    .about-wrapper .content h1 {
        font-size: 3.065rem;
        color: #000080;
    }

    .text-wrapper .textbox {
        padding: 60px 0 0;
        position: relative;
    }

    .text-wrapper h2 {
        font-size: 1.875rem;
        text-transform: none;
        text-align: right;
        position: relative;
        padding: 20px 30px 0 0;
        margin: 0;
        color: #979797;
        font-weight: 300;
    }

    .text-wrapper h2:before {
        content: '';
        width: 50px;
        height: 2px;
        background: #979797;
        position: absolute;
        left: 30px;
        top: 38px;
    }

    /* C a l l  t o  A c t i o n  S e c t i o n */
    .call-to-action {
        width: 100%;
        height: 100vh;
        position: relative;
        background-image: url(../img/classroomlime.jpg);
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .client-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
    }
    
    .product-requested {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
    }
    
    /* C a l l  t o  a c t i o n  F o r m */
    .img-overlay {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "requestform calltext";
        height: 100vh;
    }

    /* C a l l  t o  A c t i o n  G r i d  A r e a s */
    .img-overlay .text-box {
        grid-area: calltext;
    }

    .call-to-action .img-overlay {
        grid-area: callinfo;
    }

    .request-form {
        grid-area: requestform;
    }

    /* C a l l - t o - A c t i o n - T w o */
    .call-to-action-two {
        height: 100vh;
    }

    .call-to-action-two .img-overlay {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "calltext requestform";
        height: 100vh;
    }

    .call-to-action-two .text-box h2 {
        font-size: 4.065rem;
        padding: 20% 0 0 150px;
    }

    .call-to-action-two .text-box p {
        padding: 10px 0 0 150px;
    }

    .call-to-action-two .text-box button {
        margin-left: 150px;
    }

    .text-box{
        align-items: center;
        justify-content: center;
        margin-left: -40%;
    }


    /* R e q u e s t  f o r m  i n p u t */
    .request-form input[type=text], select, textarea {
        width: 100%; 
        padding: 12px;  
        border: none; 
        box-sizing: border-box; 
        background: rgb(0, 0, 0, 0.4);
        color: #ffffff;
        margin-top: 6px; 
        margin-bottom: 16px; 
        font-family: 'Gilroy Regular', sans-serif;
        resize: vertical;
        outline: none;
    }

    /* R e q u e s t  f o r m  p l a c e h o l d e r  t e x t */
    ::placeholder { 
        color: rgb(255, 255, 255, .7);
        opacity: 1;
        letter-spacing: 0.05ex;
    }
    
    :-ms-input-placeholder { 
        color: #ffffff;
    }
    
    ::-ms-input-placeholder { 
        color: #ffffff;
    }
    
    /* R e q u e s t  f o r m  s u b m i t */
    .request-form input[type=submit] {
        background-color: #000080;
        color: #FFFFFF;
        text-transform: uppercase;
        font-family: 'Gilroy Regular', sans-serif;
        letter-spacing: 0.10ex;
        padding: 12px 20px;
        border: none;
        cursor: pointer;
        outline: none;
        transition: all 300ms ease-in-out;
    }
    
    .request-form input[type=submit]:hover {
        background-color: #0096cc;
    }

    .btn {
        background-color: #000080;
        color: #FFFFFF;
        text-transform: uppercase;
        font-family: 'Gilroy Regular', sans-serif;
        letter-spacing: 0.10ex;
        padding: 12px 20px;
        border: none;
        cursor: pointer;
        outline: none;
        transition: all 300ms ease-in-out;
    }
    
    .btn:hover {
        background-color: #0096cc;
    }
    
    /* R e q u e s t  F o r m   C o n t a i n e r */
    .request-form .container {
        width: 80%;
        background: transparent;
        padding: 20px 0 0;
        margin-right: auto;
        margin-left: auto;
    }

    .request-form label {
        text-transform: uppercase;
        letter-spacing: 0.10ex;
        font-size: 0.7375rem;
        color: #ffffff;
    }
    
    .request-form .container h3 {
        color: #ffffff;
        font-weight: 600;
        padding: 25% 0 20px;
        text-transform: uppercase;
        font-size: 1.375rem;
        letter-spacing: 0.10ex;
    }

    /* T e x t b o x */
    .text-box br {
        display: none;
    }

    .text-box h2 {
        font-size: 4.065rem;
        padding: 20% 200px 0 0;
    }

    .text-box p {
        padding: 10px 200px 0 0;
    }

    .text-box button {
        margin: 10px 0;
        margin-left: 20%;
        font-size: 0.8375rem;
        padding: 10px 20px;
        text-transform: none;
        font-weight: 300;
        letter-spacing: 0.12ex;
        text-transform: uppercase;
    }

    .text-box button:hover {
        background: #000080;
        border: 1px solid #000080;
    }

    /* E d u c a t i o n  &  T e c h n o l o g y  S e c t i o n */
    #education {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "rightcolumn leftcolumn"; 
        background: #f7f7f7;
        height: auto;
    }

    #technology {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "rightcolumn leftcolumn";
        background: #f7f7f7;
        height: auto;
    }

    #technology .column img {
        width: 70%;
        margin-top: 10%;
    }

    #technology .column:last-child {
        background: #f3f3f3;
    }

    #technology .column .column-text {
        width: 80%;
        margin-right: auto;
        margin-left: auto;  
    }

    #technology .column h2 {
        padding: 50px 0 0 50px;
        font-size: 3.065rem;
        color: #000080;
    }

    #technology .column p {
        padding: 10px 0 0 50px;
    }

    /* E d u c a t i o n */
    #education .column .column-text {
        width: 80%;
        margin-right: auto;
        margin-left: auto;
    }

    #education .column img {
        width: 70%;
        margin-top: 10%;
    }

    #education .column:first-child {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        background: #f3f3f3;
    }

    #education .column h2 {
        padding: 50px 50px 0 0;
        font-size: 3.065rem;
        color: #000080;
    }

    #education .column p {
        padding: 10px 50px 0 0;
    }

    #education .column,
    #technology .column {
        padding-bottom: 50px;
    }

    /* S e r v i c e s   a n d   S o l u t i o n s */
    /* Standby color: #d3dfe2 */
    .business-wrapper {
        width: 88%;
        height: 70%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 30px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 7%;
    }

    .solutions-header h2 br {
        display: block;
    }

    .solutions-header {
        width: 50%;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }

    #services {
        background: #000000;
    }

    .services-content-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-row-gap: 15px;
        grid-column-gap: 0px;
        height: auto;
        width: 80%;
        margin-right: auto;
        margin-left: auto;
    }

    #services .featured-item {
        height: 37vh;
        background: #111111;
    }

    .featured-item-header {
        margin-top: 0;
        height: auto;
        border-right: 1px solid #0e0e0e;
    }

    #services .featured-item p {
        color: #3d3d3d;
        padding: 0 10px;
        margin: 0;
    }

    #services .featured-item img {
        margin: 40px auto;
    }

    .featured-item-content {
        margin-top: 0
    }

    .featured-item-number {
        margin-top: 120px;
        color: #0e0e0e;
        font-size: 1.875em;
    }

    #services .featured-item h2 {
        color: #ffffff;
        font-size: 1.375em;
        padding: 40px 10px 15px;
        font-weight: 300;
        letter-spacing: 0.10ex;
    }
    
    .services-content h2 {
        padding: 0 25px 20px;
        font-size: 3.065em;
        color: #000080;
    }

    /* T e s t i m o n i a l s  S e c t i o n */
    /* C l i e n t s  T e s t i m o n i a l s */
    .testimonials {
        width: 100%;
        height: 70vh;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        background: #e7e7e7;
    }

    .clientContent {
        display: grid;
        grid-template-columns: 4fr 6fr 2fr;
        grid-template-areas: 
        "firm quotted blank";
        height: 80vh;
    }

    /* T e s t i m o n i a l s  G r i d  A r e a s */
    .firmName {
        grid-area: firm;
        border-right: 1px solid #dddddd;
        display: block;
    }

    .clientQuote {
        grid-area: quotted;
        border-right: 1px solid #dddddd;
    }

    .client .clientBlank {
        grid-area: blank;
        display: block;
    }

    .bubbles-container {
        grid-area: bubbles;
        border-right: 1px solid #dddddd;
    }

    .quote-text-area {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    .client blockquote {
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: 3% 97%;
        font-family: 'Playfair Display', serif;
    }

    .slideNumber {
        font-family: 'Playfair Display', serif;
        font-size: 1.125rem;
        color: #000080;
        text-align: center;
        padding: 20% 0 0;
    }

    .clientQuote i {
        color: #000080;
        font-size: 18px;
        padding: 20px 0 0; 
        margin: 0;
    }

    .clientQuote blockquote p {
        font-size: 1.125rem;
        line-height: 1.5em;
        margin: 0;
        padding: 30px 5px 0;
        text-align: center;
    }

    .client cite {
        font-style: normal;
        text-align: center;
        display: block;
        margin: 20px auto 0;
        font-size: 0.875rem;
        font-family: 'Playfair Display', serif;
    }

    .client cite span:first-child {
        color: #000080;
        padding: 8px;
    }

    .client cite span:last-child {
        color: #808080;
    }

    .firmName p {
        font-family: 'Playfair Display', serif;
        text-align: right;
        padding: 20% 5% 0;
    }

    .firmName h2 {
        padding: 12% 5% 0;
        text-align: right;
        color: #979797;
        font-weight: 400;
        font-family: 'Playfair Display', serif;
    }

    /* T e s t i m o n i a l s  S e l e c t o r */
    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 12%;
        width: auto;
        margin-top: -30px;
        padding: 16px;
        color: #afafaf;
        font-weight: bold;
        font-size: 12px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        transition: all 300ms ease-in-out;
    }
    
    .prev {
        position: absolute;
        right: 22%;
        border-radius: 3px 0 0 3px;
    }

    .next {
        position: absolute;
        right: 18%;
        border-radius: 3px 0 0 3px;
    }
    
    .prev:hover, .next:hover {
        color: #000080;
    }

    .selector span {
        padding: 0 10px;
        font-size: 0.875rem;
        text-transform: uppercase;
        font-weight: 400;
        font-family: 'Playfair Display', serif;
    }

    /* F o o t e r  S e c t i o n */
    footer {
        width: 100%;
        height: 15vh;
        background: #000080;
    }

    footer * {
        font-size: 0.9375em;
    }

    footer a {
        
        font-family: 'Montserrat', sans-serif;
    }

    .footer-container {
        width: 80%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
        "products solutions information"
        "company company company"
        "copyright copyright copyright";
        margin-right: auto;
        margin-left: auto;
    }

    .footer-nav {
        border-top: 1px solid #4b4b4b;
    }

    .footer span {
        margin: 20% 0 7%;
    }
    
    footer a:hover {
        color: #000080;
    }

    .footer-nav li {
        display: inline-block;
    }

    .footer-nav ul li a {
        font-size: 1.125rem;
        color: #ffffff;
        font-weight: 300;
        padding: 20px 10px 0 0;
        margin: 0;
        color: #000080;
        font-family: 'Montserrat', sans-serif;
    }

    .products-menu {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
    }

    .company a,
    .products a,
    .solutions a {
        padding: 12px 0px;
        font-family: 'Montserrat', sans-serif;
        letter-spacing: none;
    }

    .contact-details span {
        margin: 20% 30px 7%;
    }
    .copyright {
        grid-area: copyright;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-top: none;
        width: 100%;
    }

    .copyright span,
    .copyright span a {
        font-size: 0.8375rem;
        letter-spacing: 0.10ex;
        margin: 15px 0;
    }

    .copyright span:first-child {
        display: none;
    }

    .copyright span:last-child {
        text-align: right;
    }

    .followUs {
        grid-area: social;
        display: none;
    }

    /*/ End of Homepage /*/

    /* Services Page Starts Here */
    /* Solutions Row Wrapper */
    .solutions-row {
        width: 85%;
        height: auto;
    }

    /* Solutions Column */
    .solutions-column {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        position: relative;
        box-sizing: border-box;
        top: 15%;
        box-sizing: border-box;
        border-bottom: 1px solid #f1f1f1;
    }

    /* Solutions Column Image Left Positioned */
    .column-img-lt {
        grid-template-areas:
        "solutionimage solutionscontent";
    }

    /* Solutions Column Image Right Positioned */
    .column-img-rt {
        grid-template-areas: 
        "solutionscontent solutionimage";
    }

    /* S o l u t i o n s  E m b e d d e d  I m a g e */
    .solutions-column img {
        width: 50%;
        height: auto;
        display: block;
        position: absolute;
        top: 25%;
    }

    /* S o l u t i o n s  C a p t i o n */
    .solutions-caption {
        width: 90%;
        height: auto;
        margin-right: 0;
        margin-left: auto;
        transition: all 300ms ease-in;
    }

    .column-img-rt .solutions-caption {
        margin-right: auto;
        margin-left: 0;
    }

    .solutions-content {
        height: 100%;
    }

    .solutions-content h2 {
        font-weight: 600;
        font-size: 2.375em;
        color: #111111;
        padding: 30% 5% 5%;
    }
    
    .solutions-content p {
        color:#333333;
        font-size: 0.9375em;
        padding: 0 20px;
        margin:0;
    }

    /* Partnerships and Sponsorships */
    .partnerships {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: #000000;
        position: relative;
        box-sizing: border-box;
    }

    .partnerships img {
        width: 40%;
        padding: 3em 0;
    }

    .partner-logo {
        border: none;
    }

    /* Solutions Call to Action */
    .get-services {
        width: 100%;
        height: 100vh;
        background-image: url(../img/studenthd.png);
        background-attachment: fixed;
        background-position: top center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .get-services * {
        color: #ffffff;
    }

    .get-services-ad {
        margin: 20% 0;
    }

    .dark-layer {
        width: 100%;
        height: 100vh;
        background: rgb(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .get-services h2 {
        font-size: 2.065em;
        color: #ffffff;
        letter-spacing: 0.04em;
    }

    .buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        width: 25%;
        left: 20px;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .get-services button {
        font-weight: 300;
        font-size: 0.9065em;
        letter-spacing: 0.05em;
        transition: all 300ms ease-in;
    }

    .get-services button:hover {
        background: #000080;
        border: 1px solid #000080;
    }

    /* Products Page */
    .products-grid-row {
        width: 80%;
        grid-template-columns: repeat(3, 1fr);
    }

    .products-quick-navigation {
        display: block;
    }
}

.headings {
    color: #fff;
    padding:0 0 0 0;
    margin: 0 0 0 0;
}

#svg_back{
    background-image: url(../img/splashes.svg );
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 0 0%;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-clip: border-box;
    z-index: 1;
    opacity: .1;
}

body, .about{
    background-image: url(../img/splashes.svg);
    /* opacity: 0.5;
    z-index: -2; */
    /* background-size: cover; */
    /* background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("(../img/splashes.svg"); */
    filter:alpha(opacity=50);
}