/*!
* 
* Copyright (c) 2024 Cris M Design
*
* https://crismdesign.net/
*
*/

@charset "utf-8";

/* --------------------------------------------- CSS STYLESHEET --------------------------------------------- */
 
@font-face {
    font-family:Open-Sans;
    src:url('../fonts/OpenSans-Regular.eot'); /* IE9 Compat Modes */
    src:url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/OpenSans-Regular.woff') format('woff'), /* Modern Browsers */
        url('../fonts/OpenSans-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight:normal;
    font-style:normal;
}
 
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Open-Sans, sans-serif;
}
 
html::-webkit-scrollbar {
    width:6px; 
}
 
html::-webkit-scrollbar-track {
    background-color:#F3F3F3;
}
 
html::-webkit-scrollbar-thumb {
    background:#6A85BE;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}
 
html, body {
    padding:0;
    margin:0;
    height:100vh;
}

body {
    background-color:#F3F3F3;
    color:#1A1A1A;
    -o-transition:background-color 0.3s, color 0.3s;
    -webkit-transition:background-color 0.3s, color 0.3s;
    -moz-transition:background-color 0.3s, color 0.3s;
    transition:background-color 0.3s, color 0.3s;
}

body.darkMode {
	background-color:#6A85BE;
	color:#F3F3F3;
}

div.preloadDiv {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#00407E;
    z-index:100;
    -o-transition:opacity 0.75s, visibility 0.75s;
    -webkit-transition:opacity 0.75s, visibility 0.75s;
    -moz-transition:opacity 0.75s, visibility 0.75s;
    transition:opacity 0.75s, visibility 0.75s;
    
}

div.hideDiv {
    opacity:0;
    visibility:hidden;
}

span.preloadSpan {
    --multiplier:1;
    --space:calc(3.2rem * var(--multiplier));
    --vspace:calc(2.5 * var(--space));
    width:var(--vspace);
    height:var(--vspace);
    padding:0;
    background:#A3BEE0;
    border-radius:100%;
    -webkit-animation:sk-scaleout 1.0s infinite ease-in-out;
    animation:sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform:scale(0);
        transform:scale(0);
    }

    100% {
        -webkit-transform:scale(1);
        transform:scale(1);
        opacity:0;
    }
}

@keyframes sk-scaleout {
    0% {
        transform:scale(0);
    }

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

nav {
	position:fixed;
	width:100%;
	top:0;
	right:0;
	z-index:4;
	display:flex;
    display:-webkit-flex;
	align-items:center;
	justify-content:space-between;
	padding:15px 5.5% 15px 6.5%;
    -o-transition:0.5s ease;
    -webkit-transition:0.5s ease;
    -moz-transition:0.5s ease;
    transition:0.5s ease; 
}

nav.blue {
    background:#6A85BE;
    box-shadow:0px 10px 100px 0px #000;
}

    nav .navMenu {
		display:flex;
        display:-webkit-flex;
		list-style-type:none;
    }

            nav .navMenu li a {
                font-size:12pt;
                font-weight:500;
                letter-spacing:.35em;
                text-transform:uppercase;
                padding:10px 20px;
                margin:0 5px;
                color:#F3F3F3;
                -o-transition:all 0.4s ease;
                -webkit-transition:all 0.4s ease;
                -moz-transition:all 0.4s ease;
                transition:all 0.4s ease;
                text-decoration:none;
                position:relative;
            }

            nav .navMenu li a::after {
                content:'';
                position:absolute;
                width:100%;
                height:1.5px;
                bottom:0;
                left:0;
                background:#F3F3F3;
                visibility:hidden;
                transform:scaleX(0);
                -o-transition:all 0.4s ease;
                -webkit-transition:all 0.4s ease;
                -moz-transition:all 0.4s ease;
                transition:all 0.4s ease;
              }
              
              nav .navMenu li a:hover::after {
                visibility:visible;
                transform:scaleX(1);
              }

              nav .navMenu li a.active::after  {
                visibility:visible;
                transform:scaleX(1);             
              }

        nav a img {
            width:auto;
            height:60px;
            padding:9px 0 0;
            margin:0 auto;
        }

.menuBar {
    display:none;
    cursor:pointer;
}

.bar {
    display:block;
    width:25px;
    height:3px;
    margin:5px auto;
    -webkit-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    background:#FFF;
}

header {
    height:100vh;
    position:relative;
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    margin:0 auto;
    padding:0;
}

        header .divImg img {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            object-fit:cover;
            -o-object-fit:cover;
            z-index:-1;
            filter:brightness(50%);
            -webkit-filter:brightness(50%);
        }

        header .divImg .lightMode {
            visibility:visible;
            opacity:1;
            -o-transition:opacity 0.75s, visibility 0.75s;
            -webkit-transition:opacity 0.75s, visibility 0.75s;
            -moz-transition:opacity 0.75s, visibility 0.75s;
            transition:opacity 0.75s, visibility 0.75s;
        }

        header .divImg .darkMode {
            visibility:hidden;
            opacity:0;
            -o-transition:opacity 0.75s, visibility 0.75s;
            -webkit-transition:opacity 0.75s, visibility 0.75s;
            -moz-transition:opacity 0.75s, visibility 0.75s;
            transition:opacity 0.75s, visibility 0.75s;
        }

    header .divHeader {
        width:75%;
        border-radius:0.5rem;
        margin:2rem 6.5%;
        padding:2rem 2.5rem;
        color:#F3F3F3;
        position:relative;
        z-index:1;
    }

        header .divHeader h1 {
            font-size:24pt;
            margin:0 0 0.75rem;
            text-transform:uppercase;
            font-weight:normal;
            letter-spacing:0.2em;
            text-align:right;
        }

        header .divHeader p {
            font-size:14pt;
            font-weight:normal;
            letter-spacing:0.2em;
            text-align:right;
        }

    header .toggleButton {
        position:absolute;
        bottom:30px;
        right:5.5%;
        margin:0 auto;
        padding:0;
        width:auto;
        height:auto;
        border:none;
        outline:none;
    }

        header .toggleButton img {
            width:30px;
            height:auto;
            cursor:pointer;
            border:none;
            outline:none;
        }

        header .toggleButton #icon1 {
            display:block;
        }

        header .toggleButton #icon2 {
            display:none;
        }

        header .toggleButton.toggled #icon1 {
            display:none;
        }

        header .toggleButton.toggled #icon2 {
            display:block;
        }


article {
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0;
	float:left;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    display:block;
    position:relative;
}

    article .divImg {
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        z-index:-1;
    }

    article .divImg.lightMode {
        background:linear-gradient(180deg, #F3F3F3 0%, #F9F9F9 65%);
    }

    article .divImg.darkMode {
        background:linear-gradient(180deg, #6A85BE 0%, #A3BEE0 65%);
    }

    article div#about {
        width:100%;
        height:auto;
        float:left;
        margin:0 auto;
        padding:90px 0 30px;
    }

        article div#about .wrapDiv {
            margin:0 auto;
        }

            article div#about .wrapDiv .aboutDiv {
                display:-webkit-flex;
                display:flex;
                -ms-flex-direction:column;
                flex-direction:column;
                align-items:center;
                justify-content:center;
                height:100vh;
                background:#A3BEE0;
                border-top-right-radius:10px;
                border-bottom-right-radius:10px;
            }

                article div#about .wrapDiv .aboutDiv .contDiv {
                    box-shadow:20px 30px 25px rgba(26, 26, 26, 0.15);
                    border-bottom-left-radius:10px;
                    border-bottom-right-radius:10px;
                }

                    article div#about .wrapDiv .aboutDiv .contDiv .imgDiv {
                        background:#6A85BE;
                        padding:4rem 4rem 2.5rem 5rem;
                        text-align:center;
                        border-top-left-radius:10px;
                        border-top-right-radius:10px;
                    }

                        article div#about .wrapDiv .aboutDiv .contDiv .imgDiv .shadowDiv {
                            margin:0 auto 25px;
                            border-radius:50%;
                            width:200px;
                            height:200px;
                            position:relative;
                            cursor:pointer;
                        }

                        article div#about .wrapDiv .aboutDiv .contDiv .imgDiv .shadowDiv::after {
                            content:"";
                            position:absolute;
                            background:rgba(26, 26, 26, 0.45);
                            left:50%;
                            -webkit-transform:translateX(-50%);
                            -o-transform:translateX(-50%);
                            -ms-transform:translateX(-50%);
                            -moz-transform:translateX(-50%);
                            transform:translateX(-50%);
                            bottom:-15px;
                            height:2px;
                            width:175px;
                            -webkit-filter:blur(3px);
                            filter:blur(3px);
                            opacity:0;
                            -o-transition:all 0.6s ease-in-out;
                            -webkit-transition:all 0.6s ease-in-out;
                            -moz-transition:all 0.6s ease-in-out;
                            -ms-transition:all 0.6s ease-in-out;
                            transition:all 0.6s ease-in-out;                            
                        }

                        article div#about .wrapDiv .aboutDiv .contDiv .imgDiv .shadowDiv:hover::after {
                            opacity:1;                          
                        }

                            article div#about .wrapDiv .aboutDiv .contDiv .imgDiv .shadowDiv:hover .photoDiv {
                                -webkit-transform:translateY(-10px);
                                -o-transform:translateY(-10px);
                                -ms-transform:translateY(-10px);
                                -moz-transform:translateY(-10px);
                                transform:translateY(-10px);
                            }

                            article div#about .wrapDiv .aboutDiv .contDiv .imgDiv .shadowDiv .photoDiv {
                                width:200px;
                                height:200px;
                                overflow:hidden;
                                border-radius:50%;
                                -o-transition:all 0.5s ease-in-out;
                                -webkit-transition:all 0.5s ease-in-out;
                                -moz-transition:all 0.5s ease-in-out;
                                -ms-transition:all 0.5s ease-in-out;
                                transition:all 0.5s ease-in-out;
                            }

                                article div#about .wrapDiv .aboutDiv .contDiv .imgDiv .shadowDiv .photoDiv img {
                                    width:200px;
                                    display:block;
                                }

                        article div#about .wrapDiv .aboutDiv .contDiv .imgDiv h2 {
                            font-size:2rem;
                            margin:2.2rem 0 0.6rem 0;
                            line-height:1.2;
                            padding-bottom:1rem;
                            border-bottom:2px solid #F3F3F3;
                            color:#F3F3F3;
                            text-transform:capitalize;
                            font-weight:normal;
                        }

                        article div#about .wrapDiv .aboutDiv .contDiv .imgDiv h3 {
                            text-transform:uppercase;
                            font-weight:normal;
                            letter-spacing:0.1rem;
                            margin:1.2rem 0 0;
                            color:#F3F3F3;
                        }

                    article div#about .wrapDiv .aboutDiv .contDiv .iconsUL {
                        display:-webkit-flex;
                        display:flex;
                        justify-content:center;
                        padding:0.8rem 0;
                        border-bottom-left-radius:10px;
                        border-bottom-right-radius:10px;
                    }

                    article div#about .wrapDiv .aboutDiv .contDiv .iconsUL.lightMode {
                        background:#FFFFFF;
                    }

                    article div#about .wrapDiv .aboutDiv .contDiv .iconsUL.darkMode {
                        background:#A3BEE0;
                    }

                        article div#about .wrapDiv .aboutDiv .contDiv .iconsUL li {
                            list-style-type:none;
                            background:#6A85BE;
                            width:40px;
                            height:40px;
                            margin:0 0.5rem;
                            border-radius:50%;
                            display:-webkit-flex;
                            display:flex;
                            justify-content:center;
                            align-items:center;
                            cursor:pointer;
                            -o-transition:all 0.5s ease-in-out;
                            -webkit-transition:all 0.5s ease-in-out;
                            -moz-transition:all 0.5s ease-in-out;
                            -ms-transition:all 0.5s ease-in-out;
                            transition:all 0.5s ease-in-out;                            
                        }

                        article div#about .wrapDiv .aboutDiv .contDiv .iconsUL li:hover {
                            background:#3A3E44;                           
                        }

                                article div#about .wrapDiv .aboutDiv .contDiv .iconsUL li a img {
                                    margin:5px auto 0;
                                    padding:0;
                                    width:auto;
                                    height:20px;
                                } 

                                article div#about .wrapDiv .aboutDiv .contDiv .iconsUL li a img.behanceFixed {
                                    height:16px;
                                }
                                
                                article div#about .wrapDiv .aboutDiv .contDiv .iconsUL li a img.pinterestFixed {
                                    height:22px;
                                }

            article div#about .wrapDiv .textDiv {
                height:100vh;
                display:-webkit-flex;
                display:flex;
                -ms-flex-direction:column;
                flex-direction:column;
                align-items:center;
                justify-content:center;
                padding:1.5rem 13%;
                text-align:center;
            }

                article div#about .wrapDiv .textDiv .paraDiv p {
                    font-weight:normal;
                    padding:0.5rem;
                    opacity:0.8;
                    font-size:14pt;
                    letter-spacing:2px;
                }
    
    article div#works {
        width:100%;
        height:auto;
        margin:0 auto;
        padding:90px 6.5%;
        position:relative;
        float:left;
    }

        article div#works h1 {
            text-transform:uppercase;
            font-size:26pt;
            letter-spacing:.35em;
            opacity:0.9;
            text-align:center;
            font-weight:normal;
        }

        article div#works p {
            font-size:14pt;
            font-weight:normal;
            letter-spacing:2px;
            margin:0 auto;
            padding:35px 15px;
            text-align:center;
            text-transform:none;
            line-height:1.5em;
        }

        article div#works div.workDiv {
            display:flex;
            display:-webkit-flex;
            flex-wrap:wrap;
            -ms-flex-wrap:wrap;
            gap:25px 15px;
            justify-content:center;
            padding:10px;
        }

            article div#works div.workDiv div.proDiv {
                height:auto;
                width:calc(33.33% - 20px);
                margin:0 auto;
                padding:0;
            }

                article div#works div.workDiv div.proDiv div.proImg {
                    float:left;
                    margin:auto;
                    padding:0;
                    border:10px solid #FFF;
                    overflow:hidden;
                    cursor:pointer;
                    box-shadow:0 5px 15px rgba(26, 26, 26, 0.1);
                }

                    article div#works div.workDiv div.proDiv div.proImg img {
                        height:100%;
                        width:100%;
                        object-fit:cover;
                        -o-object-fit:cover;
                        margin:0 auto;
                        padding:0;
                        display:block;
                        -o-transition:0.2s linear;
                        -webkit-transition:0.2s linear;
                        -moz-transition:0.2s linear;
                        transition:0.2s linear; 
                    }

                    article div#works div.workDiv div.proDiv div.proImg:hover img {
                        -o-transform:scale(1.05);
                        -webkit-transform:scale(1.05);
                        -moz-transform:scale(1.05);
                        transform:scale(1.05); 
                    }

    article div#works div.popDiv {
        position:fixed;
        display:flex;
        justify-content:center;
        align-items:center;
        top:0;
        left:0;
        background:rgba(26, 26, 26, 1);
        height:100vh;
        width:100%;
        z-index:100;
        visibility:hidden;
        opacity:0;
        -o-transition:opacity 0.4s, visibility 0.4s;
        -webkit-transition:opacity 0.4s, visibility 0.4s;
        -moz-transition:opacity 0.4s, visibility 0.4s;
        transition:opacity 0.4s, visibility 0.4s;
    }

        article div#works div.popDiv span {
            position:absolute;
            top:6px;
            right:18px;
            font-size:40px;
            font-weight:bolder;
            color:#F3F3F3;
            cursor:pointer;
            z-index:100;
        }

            article div#works div.popDiv img {
                width:82vh;
                -o-object-fit:cover;
                object-fit:cover;
                max-width:100%;
                -o-transform:scale(0.9);
                -webkit-transform:scale(0.9);
                -moz-transform:scale(0.9);
                transform:scale(0.9);
                -o-transition:all 0.4s ease;
                -webkit-transition:all 0.4s ease;
                -moz-transition:all 0.4s ease;
                transition:all 0.4s ease;
                z-index:1;
                will-change:transform;
                opacity:0;
            }

    article div#projects {
        width:100%;
        height:auto;
        margin:0 auto;
        padding:90px 6.5%;
        position:relative;
        float:left;
    }

        article div#projects h1 {
            text-transform:uppercase;
            font-size:26pt;
            letter-spacing:.35em;
            opacity:0.9;
            text-align:center;
            font-weight:normal;
        }

        article div#projects p {
            font-size:14pt;
            font-weight:normal;
            letter-spacing:2px;
            margin:0 auto;
            padding:35px 15px;
            text-align:center;
            text-transform:none;
            line-height:1.5em;
        }

            article div#projects div.clientDiv {
                display:flex;
                display:-webkit-flex;
                flex-wrap:wrap;
                -ms-flex-wrap:wrap;
                gap:50px 15px;
                justify-content:center;
                padding:10px;
            }
    
                article div#projects div.clientDiv div.proDiv {
                    height:auto;
                    width:calc(33.33% - 20px);
                    margin:0 auto;
                    padding:0;
                }
    
                    article div#projects div.clientDiv div.proDiv div.proImg {
                        float:left;
                        margin:auto;
                        padding:0;
                        border:10px solid #FFF;
                        overflow:hidden;
                        cursor:pointer;
                        box-shadow:0 5px 15px rgba(26, 26, 26, 0.1);
                    }
    
                        article div#projects div.clientDiv div.proDiv div.proImg img {
                            height:100%;
                            width:100%;
                            object-fit:cover;
                            -o-object-fit:cover;
                            margin:0 auto;
                            padding:0;
                            display:block;
                            -o-transition:0.2s linear;
                            -webkit-transition:0.2s linear;
                            -moz-transition:0.2s linear;
                            transition:0.2s linear; 
                        }

                        article div#projects div.clientDiv div.proDiv div.proImg:hover img {
                            -o-transform:scale(1.05);
                            -webkit-transform:scale(1.05);
                            -moz-transform:scale(1.05);
                            transform:scale(1.05); 
                        }
    
                    article div#projects div.clientDiv div.proDiv div.proInfo {
                        height:auto;
                        float:left;
                        margin:0 auto;
                        padding:0 10px;
                    }
    
                        article div#projects div.clientDiv div.proDiv div.proInfo h2 {
                            font-size:14pt;
                            margin:25px auto 15px;
                            padding:0;
                            text-transform:uppercase;
                            font-weight:normal;
                            letter-spacing:0.2rem;
                            text-align:left;
                        }
    
                        article div#projects div.clientDiv div.proDiv div.proInfo p {
                            font-size:12pt;
                            margin:0 auto;
                            padding:0;
                            letter-spacing:0.1rem;
                            font-weight:normal;
                            text-align:left;
                        }

    article div#projects div.popDiv {
        position:fixed;
        display:flex;
        justify-content:center;
        align-items:center;
        top:0;
        left:0;
        background:rgba(26, 26, 26, 1);
        height:100vh;
        width:100%;
        z-index:100;
        visibility:hidden;
        opacity:0;
        -o-transition:opacity 0.4s, visibility 0.4s;
        -webkit-transition:opacity 0.4s, visibility 0.4s;
        -moz-transition:opacity 0.4s, visibility 0.4s;
        transition:opacity 0.4s, visibility 0.4s;
    }

        article div#projects div.popDiv span {
            position:absolute;
            top:6px;
            right:18px;
            font-size:40px;
            font-weight:bolder;
            color:#F3F3F3;
            cursor:pointer;
            z-index:100;
        }

        article div#projects div.popDiv img {
            width:82vh;
            -o-object-fit:cover;
            object-fit:cover;
            max-width:100%;
            -o-transform:scale(0.9);
            -webkit-transform:scale(0.9);
            -moz-transform:scale(0.9);
            transform:scale(0.9);
            -o-transition:all 0.4s ease;
            -webkit-transition:all 0.4s ease;
            -moz-transition:all 0.4s ease;
            transition:all 0.4s ease;
            z-index:1;
            will-change:transform;
            opacity:0;
        }

    article div#features {
        width:100%;
        height:auto;
        float:left;
        margin:0 auto;
        padding:0;
        position:relative;
    }

    article div#features.lightMode {
        background:linear-gradient(180deg, #F9F9F9 0%, #FFFFFF 100%);
        color:#1A1A1A;
    }

    article div#features.darkMode {
        background:linear-gradient(180deg, #A3BEE0 0%, #6A85BE 100%);
        color:#F3F3F3;
    }
    
        article div#features .servDiv {
            margin:0 auto;
            padding:0 6.5% 70px;
            float:left;
        }
    
            article div#features .servDiv .tempText {
                width:100%;
                height:auto;
                float:left;
                margin:90px 0 70px;
                padding:0;
            }
    
                article div#features .servDiv .tempText h1 {
                    text-transform:uppercase;
                    font-size:26pt;
                    letter-spacing:.35em;
                    opacity:0.9;
                    text-align:center;
                    font-weight:normal;
                }
    
                article div#features .servDiv .tempText p {
                    font-size:14pt;
                    text-align:center;
                    margin:35px 0 0;
                    letter-spacing:2px;
                    line-height:1.5em;
                    font-weight:normal;
                }
    
            article div#features .servDiv .tempContent {
                display:flex;
                display:-webkit-flex;
                flex-wrap:wrap;
                -ms-flex-wrap:wrap;
                gap:50px 15px;
                justify-content:center;
                padding:10px;
            }
    
                article div#features .servDiv .tempContent .tempDiv {
                    height:auto;
                    width:calc(33.33% - 20px);
                    margin:0 auto;
                    padding:0;
                }
    
                    article div#features .servDiv .tempContent .tempDiv .tempImg {
                        width:130px;
                        height:130px;
                        margin:auto;
                        padding:0;
                        border-radius:10px;
                        text-align:center;
                        float:left;
                        -webkit-transform:translateY(0);
                        -o-transform:translateY(0);
                        -ms-transform:translateY(0);
                        -moz-transform:translateY(0);
                        transform:translateY(0);
                        -o-transition:all 0.5s ease;
                        -webkit-transition:all 0.5s ease;
                        -moz-transition:all 0.5s ease;
                        transition:all 0.5s ease;
                        box-shadow:0 5px 15px rgba(26, 26, 26, 0.1);
                        cursor:pointer;
                    }

                    article div#features .servDiv .tempContent .tempDiv .tempImg:hover {
                        -webkit-transform:translateY(-5px);
                        -o-transform:translateY(-5px);
                        -ms-transform:translateY(-5px);
                        -moz-transform:translateY(-5px);
                        transform:translateY(-5px);
                    }

                    article div#features .servDiv .tempContent .tempDiv .tempImg.lightMode {
                        background:#DADADA;
                    }

                    article div#features .servDiv .tempContent .tempDiv .tempImg.darkMode {
                        background:#A3BEE0;
                    }
    
                        article div#features .servDiv .tempContent .tempDiv .tempImg p {
                                display:flex;
                                align-items:center;
                                justify-content:center;
                                width:100%;
                                height:100%;
                                margin:0;
                        }
    
                            article div#features .servDiv .tempContent .tempDiv .tempImg img {
                                width:auto;
                                height:80px;
                                margin:0;
                                padding:0;
                                display:block;
                            }
    
                    article div#features .servDiv .tempContent .tempDiv .tempInfo {
                        height:auto;
                        float:left;
                        margin:0;
                        padding:0;
                    }
    
                        article div#features .servDiv .tempContent .tempDiv .tempInfo h2 {
                            font-size:14pt;
                            margin:15px auto;
                            padding:0;
                            text-transform:uppercase;
                            font-weight:normal;
                            letter-spacing:0.2rem;
                        }
    
                        article div#features .servDiv .tempContent .tempDiv .tempInfo p {
                            font-size:12pt;
                            margin:0 auto;
                            padding:0;
                            letter-spacing:0.1rem;
                            font-weight:normal;
                        }
                    
    article div#contact {
        width:100%;
        height:auto;
        float:left;
        margin:0 auto;
        padding:90px 6.5%;
        position:relative;
    }

    article div#contact.lightMode {
        background:linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%);
    }

    article div#contact.darkMode {
        background:linear-gradient(180deg, #6A85BE 0%, #A3BEE0 100%);
    }

        article div#contact .contDiv {
            width:100%;
            height:65vh;
            display:table;
            min-width:300px;
            max-width:990px;
            margin:0 auto;
            padding:35px 50px;
            border-radius:10px;
            box-shadow:20px 30px 25px rgba(26, 26, 26, 0.15);
        }

        article div#contact .contDiv.lightMode {
            background:linear-gradient(135deg, #6A85BE 0%, #A3BEE0 65%);
            color:#1A1A1A;
        }

        article div#contact .contDiv.darkMode {
            background:linear-gradient(135deg, #1A1A1A 0%, #3A3E44 65%);
            color:#FFFFFF;
        }

            article div#contact .contDiv .centerDiv {
                width:100%;
                display:table-cell;
                vertical-align:middle;
                text-align:center;
                height:auto;
                margin:0 auto;
                padding:0;
            }

                article div#contact .contDiv .centerDiv h1 {
                    font-size:26pt;
                    text-align:center;
                    margin:0 auto;
                    padding:0;
                    font-weight:normal;
                    letter-spacing:.1em;
                }

                article div#contact .contDiv .centerDiv p {
                    position:relative;
                    margin:35px auto;
                    padding:0 50px;
                    width:100%;
                    text-align:center;
                    opacity:0.7;
                    font-size:14pt;
                    font-weight:normal;
                    letter-spacing:2px;
                }

                article div#contact .contDiv .centerDiv a {
                    width:200px;
                    display:block;
                    margin:0 auto;
                    padding:10px 20px;
                    font-size:14pt;
                    text-transform:uppercase;
                    text-decoration:none;
                    font-weight:500;
                    cursor:pointer;
                    text-align:center;
                    letter-spacing:.35em;
                    -o-transition:all 0.5s ease;
                    -webkit-transition:all 0.5s ease;
                    -moz-transition:all 0.5s ease;
                    transition:all 0.5s ease;
                    text-decoration:none;
                    position:relative;
                }

                article div#contact .contDiv .centerDiv a.lightMode::after,
                article div#contact .contDiv .centerDiv a.darkMode::after {
                    content:'';
                    position:absolute;
                    width:100%;
                    height:1.5px;
                    bottom:0;
                    left:0;
                    visibility:hidden;
                    transform:scaleX(0);
                    -o-transition:all 0.4s ease;
                    -webkit-transition:all 0.4s ease;
                    -moz-transition:all 0.4s ease;
                    transition:all 0.4s ease;
                }

                article div#contact .contDiv .centerDiv a.lightMode {
                    color:#3A3E44;
                }

                article div#contact .contDiv .centerDiv a.lightMode:hover {
                    color:#1A1A1A;
                }

                article div#contact .contDiv .centerDiv a.darkMode {
                    color:#DADADA;
                }

                article div#contact .contDiv .centerDiv a.darkMode:hover {
                    color:#F3F3F3;
                }

                article div#contact .contDiv .centerDiv a.lightMode:hover::after {
                    background:#1A1A1A;
                }

                article div#contact .contDiv .centerDiv a.darkMode:hover::after {
                    background:#F3F3F3;
                }

                article div#contact .contDiv .centerDiv a.lightMode:hover::after,
                article div#contact .contDiv .centerDiv a.darkMode:hover::after {
                    visibility:visible;
                    transform:scaleX(1);
                }

footer {
    width:100%;
    height:auto;
    float:left;
	margin:0 auto;
	padding:40px 6.5%;
    background:linear-gradient(135deg, #1A1A1A 0%, #3A3E44 65%);
}

    footer div.socialDiv {
        display:-webkit-flex;
        display:flex;
        -ms-flex-direction:column;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

        footer div.socialDiv .iconsUL {
            display:-webkit-flex;
            display:flex;
            justify-content:center;
            padding:0.8rem 0;
        }

            footer div.socialDiv .iconsUL li {
                list-style-type:none;
                width:40px;
                height:40px;
                margin:0 0.5rem;
                border-radius:50%;
                display:-webkit-flex;
                display:flex;
                justify-content:center;
                align-items:center;
                cursor:pointer;
                -o-transition:all 0.5s ease-in-out;
                -webkit-transition:all 0.5s ease-in-out;
                -moz-transition:all 0.5s ease-in-out;
                -ms-transition:all 0.5s ease-in-out;
                transition:all 0.5s ease-in-out;                            
            }

            footer div.socialDiv .iconsUL li:hover {
                background:#3A3E44;                           
            }

                    footer div.socialDiv .iconsUL li a img {
                        margin:5px auto 0;
                        padding:0;
                        width:auto;
                        height:20px;
                    } 

                    footer div.socialDiv .iconsUL li a img.behanceFixed {
                        height:16px;
                    } 

    footer p.copyPara {
        width:100%;
        height:auto;
        margin:20px auto 0;
        text-align:center;
        font-size:12pt;
        color:#F3F3F3;
        text-transform:uppercase;
        float:left;
        letter-spacing:.15em;
    }

/* --------------------------------------------- CSS RESPONSIVE --------------------------------------------- */

@media (max-width:600px) {

    nav a img {
        margin-left:0 !important;
    }

    nav .menuBar {
		right:15px !important;
    }

	nav .navBar {
		top:68px !important;
	}

	nav .navMenu li a {
		margin-left:0.4rem !important;
        margin-right:0.4rem !important;
	}

    header .divHeader h1 {
        font-size:16pt !important;
    }

    header .divHeader p {
        font-size:12pt;
    }

    header .toggleButton {
        right:15px !important;
    }

    article div#about .wrapDiv .aboutDiv {
        padding-top:0 !important;
        padding-bottom:0 !important;
    }

    article div#about .wrapDiv .aboutDiv .contDiv {
        box-shadow:none;
    }

    article div#about .wrapDiv .aboutDiv .contDiv .imgDiv h2 {
        font-size:1.5rem;
    }

    article div#about .wrapDiv .aboutDiv .contDiv .imgDiv h3 {
        font-size:12pt;
    }

    article div#works {
        padding-left:0;
        padding-right:0;
    }

    article div#works h1,
    article div#projects h1,
    article div#features h1 {
        font-size:20pt !important;
    }

    article div#projects {
        padding-left:0;
        padding-right:0;
    }

    article div#projects div.clientDiv div.proDiv div.proInfo h2,
    article div#features .servDiv .tempContent .tempDiv .tempInfo h2 {
        font-size:13pt !important;
    }

    article div#projects div.clientDiv div.proDiv div.proInfo p,
    article div#features .servDiv .tempContent .tempDiv .tempInfo p {
        font-size:11pt !important;
    }

    article div#contact {
        padding-top:30px;
		padding-left:15px !important;
        padding-bottom:30px;
		padding-right:15px !important;
    }

    article div#contact .contDiv {
        min-width:100%;
        max-width:100%;
        padding-left:35px;
        padding-right:35px;
    }

    article div#contact .contDiv .centerDiv p {
        padding-left:15px;
        padding-right:15px;
    }

}

@media (max-width:700px) {

    header .divHeader {
        padding-top:1.5rem;
        padding-right:2rem;
        padding-bottom:1.5rem;
        padding-left:1.5rem;
    }

    article div#about .wrapDiv .aboutDiv {
        padding-top:75px;
        padding-bottom:75px;
    }

    article div#about .wrapDiv .aboutDiv .contDiv {
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
    }

    article div#about .wrapDiv .aboutDiv .contDiv .imgDiv {
        border-top-left-radius:0;
        border-top-right-radius:0;
    }

    article div#about .wrapDiv .aboutDiv,
    article div#about .wrapDiv .textDiv {
        height:auto;
    }

    article div#about .wrapDiv .textDiv {
        padding-top:2.25rem;
        padding-bottom:3.5rem;
    }

    article div#about .wrapDiv .aboutDiv .contDiv .iconsUL {
        background:#F3F3F3;
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
    }

    article div#works {
        padding-top:50px !important;
        padding-bottom:60px !important;
    }

    article div#works div.workDiv div.proDiv {
        margin-bottom:15px;
        width:calc(100% - 20px) !important;
    }

    article div#works div.popDiv img,
    article div#projects div.popDiv img {
        width:75vw;
    }

    article div#projects {
        padding-top:50px !important;
        padding-bottom:60px !important;
    }

    article div#projects div.clientDiv div.proDiv {
        margin-bottom:15px;
        width:calc(100% - 20px) !important;
    }

}

@media (min-width:700px) and (max-width:990px) {

    article div#about .wrapDiv .aboutDiv,
    article div#about .wrapDiv .textDiv {
        height:auto;
    }

    article div#about .wrapDiv .aboutDiv {
        padding-top:75px;
        padding-bottom:75px;
    }

    article div#about .wrapDiv .textDiv {
        padding-top:45px;
        padding-bottom:45px;
    }

    article div#works p {
        padding-left:13%;
        padding-right:13%;
    }

    article div#works {
        padding-bottom:65px !important;
    }

    article div#projects p {
        padding-left:13%;
        padding-right:13%;
    }

    article div#projects {
        padding-bottom:65px !important;
    }

	article div#features .servDiv {
        padding-left:13%;
        padding-right:13%;
    }

}

@media (max-width:990px) {

    .menuBar {
        position:absolute;
        right:30px;
        display:block;
    }

    .menuBar.active .bar:nth-child(2) {
        opacity:0;
    }

    .menuBar.active .bar:nth-child(1) {
        transform:translateY(8px) rotate(45deg);
    }

    .menuBar.active .bar:nth-child(3) {
        transform:translateY(-8px) rotate(-45deg);
    }

	nav {
		padding-top:12px;
		padding-right:15px;
		padding-bottom:12px;
		padding-left:15px;
	}

    nav a img {
        height:50px;
        margin-left:10px;
        padding-top:6px;
        padding-bottom:2px;
    }

    nav .navMenu {
		position:absolute;
		top:78px;
		left:0;
		right:0;
		display:flex;
		flex-direction:column;
        -o-transition:all 0.5s ease;
        -webkit-transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        transition:all 0.5s ease; 
		text-align:right;
		-webkit-transform:translateX(100%);
		-o-transform:translateX(100%);
		-ms-transform:translateX(100%);
		-moz-transform:translateX(100%);
		transform:translateX(100%);
        background:#6A85BE;
    }

    nav .navMenu li a {
        font-size:10pt;
    }

    nav.blue .navMenu {
        background:#6A85BE;
    }

	nav .navMenu li a {
		display:block;
		padding:1rem 0.6rem;
		margin:0.8rem 1.4rem;
        color:#E9E9E9;
	}

    nav .navMenu.active {
		-webkit-transform:translateX(0%);
		-o-transform:translateX(0%);
		-ms-transform:translateX(0%);
		-moz-transform:translateX(0%);
		transform:translateX(0%);
    }

    nav .navMenu li a::after {
        background:none;
    }
      
    nav .navMenu li a:hover {
        color:#FFFFFF;
    }

    nav .navMenu li a:hover::after {
        visibility:hidden;
    }

    nav.blue .navMenu li a:hover {
        color:#FFFFFF;
    }

    nav.blue .navMenu li a:hover::after {
        visibility:hidden;
    }

    header .divHeader {
        width:auto;
    }

    header .divHeader h1 {
        font-size:20pt;
    }

    header .toggleButton {
        right:30px;
    }

    article div#about {
        padding-top:0;
        padding-bottom:0;
    }

    article div#about .wrapDiv .aboutDiv {
        border-top-right-radius:0;
        border-bottom-right-radius:0;
    }

    article div#about .wrapDiv .textDiv .paraDiv p {
        font-size:12pt !important;
    }

    article div#works {
        padding-top:45px;
        padding-left:15px;
        padding-bottom:45px;
        padding-right:15px;
    }

    article div#works h1,
    article div#projects h1,
    article div#features h1 {
        font-size:24pt;
    }

    article div#works p {
        font-size:12pt !important;
    }

    article div#works div.workDiv div.proDiv {
        width:calc(50% - 20px);
    }

    article div#projects {
        padding-top:45px;
        padding-left:15px;
        padding-bottom:45px;
        padding-right:15px;
    }

    article div#projects h1 {
        font-size:28pt;
    }

    article div#projects p {
        font-size:12pt !important;
    }

    article div#projects div.clientDiv div.proDiv {
        width:calc(50% - 20px);
    }

	article div#features .servDiv {
        padding-bottom:30px;
    }

	article div#features .servDiv .tempText {
        margin-top:55px;
        margin-bottom:65px;
    }

	article div#features .servDiv .tempContent .tempDiv {
        width:calc(100% - 20px);
    }

    article div#projects div.clientDiv div.proDiv div.proInfo h2 {
        font-size:12pt !important;
    }

	article div#projects div.clientDiv div.proDiv div.proInfo p {
		font-size:10pt !important;
	}

    article div#features .servDiv .tempContent .tempDiv .tempInfo p {
		font-size:10pt !important;
        line-height:1.4em !important;
	}

    article div#contact .contDiv {
        height:70vh;
    }

    article div#contact .contDiv .centerDiv h1 {
        font-size:24pt;
    }

    article div#contact .contDiv .centerDiv p,
    article div#contact .contDiv .centerDiv a {
        font-size:12pt;
    }

}

@media (min-width:990px) {

	nav .dropbtn {
		display:none;
	}

    article div#about .wrapDiv {
        display:-moz-grid;
        display:-ms-grid;
        display:grid;
        grid-template-columns:repeat(2, 1fr);
    }

    article div#about .wrapDiv .aboutDiv {
        position:relative;
    }

    article div#about .wrapDiv .aboutDiv .contDiv {
        position:absolute;
        right:-50px;
    }

}


@media (min-width:990px) and (max-width:1365px) {

    article div#works h1 {
        font-size:28pt;
    }

    nav .navMenu li a {
        font-size:10pt;
        padding-left:10px;
        padding-right:10px;
    }

    article div#about .wrapDiv .aboutDiv {
        padding-top:60vh;
        padding-bottom:60vh;
    }

    article div#about .wrapDiv .textDiv {
        padding-top:60vh;
        padding-bottom:60vh;        
    }

    article div#works div.workDiv div.proDiv,
    article div#projects div.clientDiv div.proDiv {
        width:calc(50% - 20px);
    }

    article div#features .servDiv .tempContent .tempDiv {
        width:calc(50% - 20px);
    }

    article div#features .servDiv .tempContent .tempDiv .tempInfo h2 {
        font-size:16pt;
    }

}

@media (max-width:1365px) {

    article div#about .wrapDiv .textDiv .paraDiv p,
    article div#works p,
    article div#projects p,
    article div#features .servDiv .tempText p {
        font-size:14pt;
        line-height:1.6em;
    }

}

@media (min-width:1680px) {

    article div#works div.workDiv div.proDiv,
    article div#projects div.clientDiv div.proDiv,
    article div#features .servDiv .tempContent .tempDiv {
        width:calc(25% - 20px);
    }

}