/* Portfolio designed by Chris Kovacs 2022 */
/*SCHEMA*/
/******** MAIN ********/
/******** CONTENT GRID ********/
/******** H TAGS ********/
/******** TYPE STYLE ********/
/******** HEADER ********/
/******** HOVER EFFECTS ********/
/******** Project Grid ********/
/******** SPECIFIC PROJECTS  ********/
/******** IMAGES ********/
/******** FOOTER ********/
/* For specific projects please see individual CSS pages */

/******************* MAIN **************************************/

:root {
    --swiper-navigation-color: #EB6A27;
    --swiper-theme-color: #EB6A27 !important;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    /*    transition: 2s ease all;*/
}

body {
    width: 100%;
    font-size: 18px;
    font-family: acumin-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #dddddd;
}

.gridX {
    display: grid;
    grid-template-columns: 1fr minmax(50vw, 1200px) 1fr;
    overflow-x: hidden;
}

.gridX3 {
    grid-column: span 3;
}

.darkBar {
    height: 0.5em;
    background-color: rgba(202, 202, 202, 0.46);
    width: 100%;
}

.centerBlock {
    grid-column: 2;
    margin: 20px 0;
}

.centerBlockSlider {
    grid-column: 2;
    margin: 20px 0 0;
}

.sliderGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0;
}

.sliderGridDesktop {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0;
}

.sliderGridMobile {
    display: none;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0;
}

.sliderSection {
    grid-column: 2;
}

.mobileEx {
    display: none;
}

.desktopEx {
    display: block !important;
}

.xLaptop {
    display: block;
}

.smallMobileEx {
    display: none;
}

img {
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
    /*    image-rendering: -webkit-optimize-contrast;*/
}

.yesDisplay {
    display: block;
    opacity: 1;
}

.noDisplay {
    display: none;
    opacity: 0;
}

.rotate180 {
    display: inline-block;
    transform: rotate(-180deg);
    transition: 0.3s all ease-out;
}

#homePageHeader {
    background-color: #dddddd;
}

/******************* ABOUT **************************************/
.aboutImage {
    width: 75%;
    height: auto;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}

.aboutSpacer {
    margin-bottom: 3em;
}

.aboutButton {
    text-align: center;

}

.aboutButton button {
    display: block;
    margin: 0 auto;
    width: 90%;
    font-size: 0.9em;
    padding-top: 1em;
    padding-bottom: 1em;
    transition: 0.1s ease-in-out all;
    text-align: center
}

.aboutButtonColour {
    background-color: #dddddd;
    color: black;
    border: 2px solid #1c1c1c;
}


.aboutButtonColour:hover {
    background-color: #EB6A27;
    border: 2px solid #EB6A27;
    color: #FBFBFB;
}

.aboutButtonGreen:hover i {
    transition: 0.0s ease-in-out all;
}

.aboutButtonGreen {
    background-color: #1c1c1c !important;
    color: #36d048 !important;
    border: 2px solid #1c1c1c !important;
}

/******************* CONTENT GRID **************************************/


.grid {

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
    position: relative;
    grid-row-gap: 1em;
    grid-column-gap: 1em;
}

.addGridGap {
    margin-bottom: 12em;
}

.addGridGapMobile {
    margin-bottom: 12em;
}

.addGridGap6 {
    margin-bottom: 6em;
}

.addGridGap6Mobile {
    margin-bottom: 6em;
}

.addGridGap3 {
    margin-bottom: 4em;
}

.addGridGap3Mobile {
    margin-bottom: 4em;
}

.addGridGapImage {
    margin-top: 4em;
    margin-bottom: 4em;
}

.addGridGapImageTop {
    margin-top: 4em;
}

.addGridGapImageBot {
    margin-bottom: 4em;
}


.col12 {
    grid-column: span 12;
}

.col11 {
    grid-column: span 11;
}

.col10 {
    grid-column: span 10;
}

.col9 {
    grid-column: span 9;
}

.col8 {
    grid-column: span 8;
}

.col7 {
    grid-column: span 7;
}

.col6 {
    grid-column: span 6;
}

.col5 {
    grid-column: span 5;
}

.col4 {
    grid-column: span 4;
}

.col3 {
    grid-column: span 3;
}

.col2 {
    grid-column: span 2;
}

.col1 {
    grid-column: span 1;
}

.row2 {
    grid-row: span 2;
}

.row3 {
    grid-row: span 3;
}

.row4 {
    grid-row: span 4;
}

.rowS1 {
    grid-row: 1;
}

.rowS2 {
    grid-row: 2;
}

.col3tb {
    grid-column: span 3;
}

.col4tb {
    grid-column: span 4;
}

.col3mb {
    grid-column: span 3;
}

.darkS {
    background: #292929;
    ;
}

.secondImage {
    grid-column: span 7;
}

.problemArea {
    grid-column: span 4;
}

/******************* H Tags **************************************/
/* acumin pro
weights
thin 100
Reg 400
med 500
semibold 600
bold 700
black 800
ultra black 900

font type
font-family: acumin-pro, sans-serif;
font-family: acumin-pro-condensed, sans-serif;
font-family: acumin-pro-extra-condensed, sans-serif;

*/
h1,
h2,
h3,
h4,
h5,
h6 {}


h1 {
    font-size: 3em;
    font-family: acumin-pro-condensed, sans-serif;
    font-weight: 700;
    /*    margin: 0 0 30px 0;*/
}

h2 {
    font-size: 4em;
    font-family: acumin-pro-condensed, sans-serif;
    font-weight: 700;
    margin-top: 3em;
    margin-bottom: 0.5em;
}

h3 {
    font-size: 1.75em;
    font-family: acumin-pro-condensed, sans-serif;
    font-weight: 600;
    margin-bottom: 0.75em;
}

h4 {
    font-size: 1.3em;
    font-family: acumin-pro-condensed, sans-serif;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em
}

/*Titles special*/
h5 {
    font-size: 1.5em;
    font-family: acumin-pro-extra-condensed, sans-serif;
    font-weight: 700;
    font-style: italic;
}

/*Small titles for inside pages what, who*/
h6 {
    font-size: 1.2em;
    font-family: acumin-pro-extra-condensed, sans-serif;
    font-weight: 700;
}

.myName {
    font-family: acumin-pro-semi-condensed, sans-serif;
    font-weight: 600;
    font-size: 3em;
    display: inline;
    color: #EB6C28;
}

.myJob {
    font-family: acumin-pro-condensed, sans-serif;
    font-weight: 200;
    font-size: 1.1em;
    display: inline;
}

.upCase {
    text-transform: uppercase;
}

.oTag {
    color: #7A4B32;
    text-align: center;
    /*    font-size: 4em;*/
}

#studentLoop {
    margin-bottom: 0;
}

#fontColour {
    margin-top: 2.5em;
}

.homeH3 {
    font-size: 2em;
}

.homeP {
    font-size: 1em;
    font-weight: 400;
}

/*Project Hover Headers */



/******************* TYPE STYLE **************************************/
p {
    font-size: 1em;
    font-weight: 400;
    line-height: 2em;
}

.reviewP p {
    font-size: 1.5em;
    font-style: italic;
}

p + p {
    margin-top: 1.5em;
}

.textCenter {
    text-align: center;
}

.pLight {
    font-weight: 200;
    font-size: 0.8em;
}

.topCaseP {
    font-weight: 200;
}

a {
    transition: ease-in-out all 0.3s;
}

li a {
    text-decoration: none;
}

.noLink {
    text-decoration: none;
    display: inline;
}

i {
    transition: ease-in-out all 0.3s;
}

li {}

.liLight {
    list-style: disc;
    margin: 10px 0;
    width: 90%;
    margin: 0 auto;
}

.liLight li {
    font-size: 0.8em;
    font-weight: 200;
    margin-bottom: 0.4em;
}

.liReg {
    list-style: disc;
}

.liReg li {
    font-size: 1em;
    font-weight: 200;
    margin-bottom: 0.4em;
}

.iconImage {
    font-size: 6em;
    margin: 20px 0;
}

.docText {
    font-size: 0.8em;
}


.whiteF {
    color: #eee;
}


.blackF {
    color: #292929;
}

.greyF {
    /*    color: #575757;*/
    color: #d8d8d8;
    /*    fill: grey;*/
}

.greyDarkF {
    color: #A9A9A9
}

.orangeF {
    color: #EB6A27;
}

.dropShadow {
    text-shadow: 0px 5px 10px #000;
}

.blueF {
    color: #4FA2F4;
    text-decoration: none;
    transition: 0.3s all ease;
}

.blueF:hover {
    color: #8cc5fd;
    text-decoration: underline;
}



.alwaysCenter {
    text-align: center;
    margin: 0 auto;
}

.bumpCenter {
    text-align: center;
    margin: 40px auto 0;
}

.centered {
    text-align: center;
}

.infoGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.infoGrid label {

    font-size: 0.7em;
    font-weight: 200;

}

.infoGrid h6 {
    font-weight: 500;
    font-family: acumin-pro-condensed, sans-serif;
}

.problemList {}

.problemList li {
    font-size: 1.3em;
    margin-left: 1.5em;
    margin-top: 1em;
}


.youContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.dropBoxCont {
    width: 100%;
    background-color: #F5F5F5;
    -webkit-box-shadow: 0px 32px 43px 8px rgba(0, 0, 0, 0.31);
    box-shadow: 0px 32px 43px 8px rgba(0, 0, 0, 0.31);
    transition: 0.75s ease all;
}

.innerDropxBoxCont {
    padding: 1.5em 2em;
}

.techStackCont {
    width: 100%;
    background-color: #F5F5F5;
    -webkit-box-shadow: 0px 32px 43px 8px rgba(0, 0, 0, 0.31);
    box-shadow: 0px 32px 43px 8px rgba(0, 0, 0, 0.31);
}

.techStack {
    padding: 1em;
    filter: grayscale(100%);
    transition: 0.75s ease all;
}

.techStackCont:hover .techStack {
    filter: grayscale(0%);
}

.metricIcons {
    margin-top: 3em;
    margin-bottom: 2em;
    text-align: right;

}

.metricI {
    fill: #707070;
}

.dropBoxCont:hover .metricI {
    fill: #fff;
}

.dropBoxCont:hover h4,
.dropBoxCont:hover p {
    color: #fff;
}

.dropBoxCont:hover {
    background-color: #EB6A27;
}

.img100 {
    width: 100%;
}


.no-webp .paraIMGedu {
    min-height: 70vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    background-image: url("../img/capStone/LaptopScreen.jpg");
}

.webp .paraIMGedu {
    min-height: 70vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/capStone/LaptopScreen.webp");
}

.no-webp .paraIMGvbs {
    min-height: 70vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/virtualBabyShower/vbsPara.png");
}

.webp .paraIMGvbs {
    min-height: 70vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/virtualBabyShower/vbsPara.webp");
}

.webp .paraIMGvc {
    min-height: 70vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/virtualCourtroom/paraVC.webp");
}

.no-webp .paraIMGvc {
    min-height: 70vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/virtualCourtroom/paraVC.jpg");
}

#keyFactorsH {
    margin-top: 2em;
}


#scrollBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 10;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #602a0c;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
    opacity: 0.75;
}

#scrollBtn:hover {
    background-color: #EB6C28;
    opacity: 1;
}


/******************* HEADER **************************************/

header {
    grid-column: span 3;
    background-color: #292929;
    /*    height: 200px;*/

}

.websiteTitle {
    grid-column: span 5;
    margin: 30px 0;
    position: relative;
}

.deskNav {
    grid-column: span 7;
    margin: 50px 0 0 0;
    font-weight: 300;
}

.deskNav ul {
    list-style: none;
    text-align: right;
}

.deskNav ul li {
    display: inline;
    margin-left: 3em;
    overflow: hidden;

}

.topLink a {
    color: #1c1c1c;
}

.topLink a:hover {
    color: #155ca2 !important;
}

.topLink a:visited {
    color: #1c1c1c;
}

.mobileNav {
    position: fixed;
    z-index: 35;
}



.webTitle {
    display: inline;
    margin-top: 10px;
}



/* start code from https://codepen.io/yuhomyan/pen/ExKvNVa */
.wrapper {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100%;
    width: 100%;
    background: #1c1c1c;
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
    /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
    transition: all 0.6s ease-in-out;
    z-index: 35;
    visibility: hidden;
}

#active:checked ~ .wrapper {
    /*left: 0;*/
    visibility: visible;
    right: 0;
}

.menu-btn {
    z-index: 50;
    position: fixed;
    right: 24px;
    top: 24px;
    text-align: right;
    height: 70px;
    width: 70px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    /*    background-color: rgba(253, 253, 253, 0.88);*/

}

.menu-btn span,
.menu-btn:before,
.menu-btn:after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 30%;
    width: 40%;
    border-bottom: 2px solid #EB6C28;
    ;
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.menu-btn:before {
    transform: translateY(-8px);
}

.menu-btn:after {
    transform: translateY(8px);
}


.close {
    position: fixed;
    z-index: 50;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: background .6s;
}

/* closing animation */
#active:checked + .menu-btn span {
    transform: scaleX(0);
}

#active:checked + .menu-btn:before {
    transform: rotate(45deg);
    border-color: #EB6C28;
}

#active:checked + .menu-btn:after {
    transform: rotate(-45deg);
    border-color: #EB6C28;
}

.wrapper ul {
    position: fixed;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    /*    height: 90%;*/
    list-style: none;
    text-align: center;

}

.wrapper ul li {
    height: 10%;
    margin: 15px 0;
}

.wrapper ul li a {
    text-decoration: none;
    font-size: 30px;
    font-weight: 500;
    /*    padding: 5px 30px;*/
    color: #fff;
    border-radius: 50px;
    /*    position: absolute;*/
    line-height: 50px;
    /*    margin: 5px 30px;*/
    opacity: 0;
    transition: all 2s ease;
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.wrapper ul li a:after {
    position: absolute;
    content: "";
    background: #fff;
    /*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
    /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50px;
    transform: scaleY(0);
    z-index: 20;
    transition: transform 2s ease;
}

/*THIS IS THE HOVER IN MOBILE*/
.wrapper ul li a:hover {
    color: #EB6A27;

}

.wrapper input[type="checkbox"] {
    display: none;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 19;
    text-align: center;
    width: 100%;
    color: #202020;
}

.content .title {
    font-size: 40px;
    font-weight: 700;
}

.content p {
    font-size: 35px;
    font-weight: 600;
}

#active:checked ~ .wrapper ul li a {
    opacity: 1;
}

.wrapper ul li a {
    transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateX(100px);
}

#active:checked ~ .wrapper ul li a {
    transform: none;
    transition-timing-function: ease, cubic-bezier(.1, 1.3, .3, 1);
    /* easeOutBackを緩めた感じ */
    transition-delay: .6s;
    transform: translateX(-100px);
}

/* end code from https://codepen.io/yuhomyan/pen/ExKvNVa */





/******************* Hover Effects **************************************/

a,
button,
input {
    cursor: pointer;
}


/*HEADER*/
.deskNav ul li:hover {
    color: #155ca2;
    text-decoration: underline;
}

.noLink:hover {

    color: #155ca2;
}


/*OVERLAY PROJECTS*/



/*FOOTER*/

.footerLink {
    font-size: 1.3em;
    color: white;

}

.footerConnect ul li {
    margin-top: 1em;
}


.footerLink i {
    color: #2f2f2f;
}

.footerLinkGREEN {
    font-size: 1.3em;
    color: #36d048;
    /*    fill: #36d048;*/
    transition: ease-in-out 0.1s all;
}

.footerLinkGREEN i {
    transition: ease-in-out 0s all;
}

.footerLink:hover,
.footerLink:hover i {
    /*    fill: #4FA2F4;*/
    color: #EB6A27;
}

.footerLink:focus {
    color: white;
}

.footerLink i:focus {
    color: #2f2f2f;
}

body .mainPiece:hover {
    background-color: #000;
}

body .mainPiece:hover #homePageHeader {
    background-color: #000;
}



/******************* Project Grid **************************************/
.projectCell {
    /*    background-image: url(../img/all/tempImage.png);*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 400px;
    position: relative;
}

/* acumin pro
weights
thin 100
Reg 400
med 500
semibold 600
bold 700
black 800
ultra black 900

font type
font-family: acumin-pro, sans-serif;
font-family: acumin-pro-condensed, sans-serif;
font-family: acumin-pro-extra-condensed, sans-serif;
*/

.mainPiece {
    /*
    margin: 0 auto;
     width: 80%;
*/
    height: 50vh;
    display: grid;
    grid-template-columns: 2.5fr 4fr;
    text-decoration: none;
    transition: all 0.5s ease;
    margin-bottom: 2em;
}

.mainText {
    position: relative;
    margin: 1em 2em;
    color: #fff;
}

.mainPiece + .mainPiece {}

.mainCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    width: 100%;

}

.mainCenter h6 {
    font-size: 1em;
    font-weight: 200;
}

.mainCenter h2 {
    font-size: 2.5em;
    text-shadow: 0 3px rgba(0, 0, 0, 0.59);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0;
    font-family: acumin-pro-extra-condensed, sans-serif;
}

.mainList {
    margin-top: 2em;
    list-style-type: none;

    position: absolute;
    bottom: 0;

}

.mainList li {
    font-weight: 100;
    font-size: 1.4em;
    display: inline;
    margin-right: 1.3em;
    font-family: acumin-pro-extra-condensed, sans-serif;
}

.mainImage {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    transition: all 0.5s ease;
}

.scrollingFilter {
    filter: grayscale(0%);
}

.scrollLearn {
    background-color: #0C274B !important;
}

.scrollCourt {
    background-color: #0D3C0E !important;
}

.scrollShower {
    background-color: #431742 !important;
}


.virtualLearningMain {
    background-color: #1c1c1c;
}

.virtualLearning {
    background-image: url(../img/home/virtualLearning.png);
}

.virtualLearningMain:hover {
    background-color: #0C274B;
}

.virtualCourtMain {
    background-color: #1c1c1c;
}

.virtualCourt {
    background-image: url(../img/home/virtualCourt.png);
}

.virtualCourtMain:hover {
    background-color: #0D3C0E;
}

.virtualShowerMain {
    background-color: #1c1c1c;
}

.virtualShower {
    background-image: url(../img/home/virtualShower.png);
}

.virtualShowerMain:hover {
    background-color: #431742;
}




.mainPiece:hover .mainImage {
    filter: grayscale(0%);
}

.mainPiece:hover {
    -webkit-box-shadow: 0px 19px 32px 12px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 19px 32px 12px rgba(0, 0, 0, 0.5);
}




/******************* SPECIFIC PROJECTS **************************************/

/*
.firstIn {
    margin-top: 100px;
}

.lastOut {
    margin-bottom: 100px;
}
*/

.smallBump {
    height: 1.5em;
}

.sectionTopSpacerHalf {
    margin-bottom: 50px;
}

.sectionTopSpacer {
    margin-bottom: 150px;
}

.sectionBottomSpacerHalf {
    margin-top: 0.75em;
}

.sectionBottomSpacer {
    margin-top: 150px;
}

.sectionSpacer {
    margin: 150px 0;
}

.sectionSpacerSliderTop {
    margin: 150px 0 0;
}

.sectionSpacerSliderTopB {
    margin: 150px 0 1em;
}

.sectionSpacerSliderBottom {
    margin: 0 0 150px;
}

.subSectionSpacer {
    margin: 50px 0;
}

.subSectionSpacerTop {
    margin: 50px 0 0 0;
}

.headerSpacer {
    margin: 70px 0 0 0;
}

.headerSpacerMobile {
    margin: 50px 0 0 0;
}

.imageSpacer {
    margin: 100px 0;
}

.noGridHeaderSpacer {
    margin-bottom: 10px;
}

.smallSpacer {
    margin: 20px 0 0;
}

.xSmallSpacer {
    margin: 10px 0 0;
}

.iconSpacer {
    margin: 0.5em 0;
}

.mobileSpacer {
    margin: 0 0 0;
}

.centeredList {
    width: 75%;
    margin: 0 auto;
}

.sectionSpacerXLarge {
    margin: 70px 0;
}

.innerTextSpacer {
    margin: 1.5em inherit;
}

.innerTextSpacerTop {
    margin-top: 1.5em;
}

.innerTextSpacerBot {
    margin-bottom: 1.5em;
}

.innerTextSpacerBotS {
    margin-bottom: 0.5em;
}

.titleSpacer {
    margin: 2em 0 0.75em;
}

.alwaysCenteredList {
    width: 75%;
    margin: 0 auto;
}

.mobileCentered {
    text-align: left;
}

.posRel {
    position: relative;
}

.exactPosition {
    position: absolute;
    top: 40%;
}

.exactPositionMobile {
    position: absolute;
    top: 40%;
    left: 8%;
}

.exactPositionThemes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -90%);
}

.subDomainImage {
    display: block;
    margin: 50px auto 0;
}


.leftPadding {
    padding-left: 2em;
}

.innerSectionBottomX {
    margin-bottom: 0.5em;
}

.innerSectionBottomX1 {
    margin-bottom: 1em;
}

.innerSectionBottomX2 {
    margin-bottom: 2em;
}

.innerSectionBottomX3 {
    margin-bottom: 3em;
}

.innerSectionBottomX4 {
    margin-bottom: 4em;
}

.innerSectionBottomX5 {
    margin-bottom: 5em;
}

.posParAbs {
    position: relative;
}

.posChildAbs {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


/******************* IMAGES **************************************/

.mainImage {}

.dropShadowIMG {
    -webkit-box-shadow: 0px 32px 43px 8px rgba(0, 0, 0, 0.31);
    box-shadow: 0px 32px 43px 8px rgba(0, 0, 0, 0.31);
}

.innerDropShadow {
    -webkit-box-shadow: inset 0px 23px 19px -2px rgba(0, 0, 0, 0.56);
    box-shadow: inset 0px 23px 19px -2px rgba(0, 0, 0, 0.56);
}

.topImage img {
    width: 50%;
    display: block;
    margin: 3em auto 0;
}

.topImageCourt img {
    width: 65%;
    display: block;
    margin: 3em auto 0;
}

.image100 {
    width: 100%;
}

.image100Small {
    width: 100%;
}

.image100SmallB {
    width: 100%;
    margin: 0 auto 3em;
}

.image100SmallT {
    width: 100%;
    margin: 3em auto 0;
}

.image80Small {
    width: 80%;
    display: block;
    margin: 2em auto 0;
}

.image80SmallB {
    width: 80%;
    margin: 1em auto 0;
}

.image80SmallT {
    width: 80%;
    display: block;
    margin: 2em auto 0;
}

.image80 {
    width: 80%;
}

.image60 {
    width: 60%;
}

.image40 {
    width: 60%;
}

.image40Real {
    width: 40%;
}

.squareImages {
    width: 100%;
}

.imageBlock {
    display: block;
}

.inline {
    display: inline-block;
}

.floatR {
    float: right;

}


.imageLarge {
    width: 60%;
}



/******************* FOOTER **************************************/
.blockCenter {
    margin: 0 auto;
}

.buttonLarge {
    /*    width: 20%;*/
    display: block;
    width: 300px;
    text-decoration: none;
}

.blackOutlineButton {
    border: 2px solid #1c1c1c;
    background-color: #FBFBFB;
    color: black;
    padding-top: 1em;
    padding-bottom: 1em;
    transition: 0.3s ease-in-out all;
    text-align: center;
}

.blackSolidButton {
    border: 2px solid #1c1c1c;
    background-color: #1c1c1c;
    color: #fbfbfb;
    padding-top: 1em;
    padding-bottom: 1em;
    transition: 0.3s ease-in-out all;
    text-align: center;
}

.blackOutlineButton:hover {
    background-color: #155ca2;
    border: 2px solid #155ca2;
    color: #FBFBFB;
}

.blackSolidButton:hover {
    background-color: #155ca2;
    border: 2px solid #155ca2;
    color: #FBFBFB;
}

/*
.blackOutlineButton:hover .blackSolidButton {
    opacity: 0.2;
}
*/

footer {
    background: #1c1c1c;
    grid-column: span 3;
}

.footerMessage {
    grid-column: span 8;
    margin-top: 20px;

}

.footerConnect {
    grid-column: span 4;
    padding: 30px 0;
}

#footerLargeText {
    font-family: acumin-pro-extra-condensed, sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 2.6em;
}



.footerConnect ul {
    list-style: none;
}

.footerConnect ul li {
    /*    margin-left: -35px;*/
}

.sliderArea {
    min-height: 600px;
}

/******************* SWIPER **************************************/
.swiper {
    width: 100%;
    height: auto;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: rgba(223, 223, 223, 0);


    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: grab;
}

.swiper-slide:active {
    cursor: grabbing;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;

}

.swiper-button-next,
.swiper-button-prev {
    padding: 4em 0.5em;
    background-color: rgba(28, 28, 28, 0);
    color: #EB6A27;
    right: 0 !important;
    top: 35% !important;

}

.swiper-slide {
    width: 100% !important;
}

.swiper-slide:nth-child(2n) {
    width: 40%;
}

.swiper-slide:nth-child(3n) {
    width: 20%;
}

.swiper-slide label {
    display: block;
    font-size: 2em;
    font-weight: bold;
}

.sliderMenu {
    background-color: rgba(28, 28, 28, 0.95);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 35;
}

.sliderMenu section {

    position: relative;

    width: 100%;
    height: 100%;
    text-align: center;

}

.menuSpace {
    /*    width: 50%;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1c1c1c;
    padding: 2em 16em;



}

.menuSpace input {
    display: block;
    text-align: center;
    background: none;
    color: #fbfbfb;
    border: none;
    outline: none;
    font-size: 1.4em;
    margin-bottom: 1em;
}

@media only screen and (max-width: 2000px) {

    .swiper-slide img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;

    }
}

@media only screen and (max-width: 1100px) {




    .swiper-slide img {
        width: 100%;

    }

    .swiper-slide {
        width: 100%;
    }


    .activeBox {
        display: block !important;
    }

}

@media only screen and (max-width: 700px) {


    .swiper-slide img {
        width: 100%;

    }

    .swiper-slide {
        width: 100%;
    }


}

/******************* Leadership **************************************/
/*Bottom right*/
/*#Ellipse_1 {}*/

/*Top Right*/
/*
#Ellipse_2:hover {
        display: block !important;
    fill: #000;
}
*/

/*
#Ellipse_2:hover #rightTopBox {
        display: block !important;
    fill: #000;
}
*/

/*Top Left*/
/*#Ellipse_3 {}*/


/*
#rightTopBox {
    display: none;
}
*/






/******************* RESPONSIVE **************************************/
/*SCHEMA*/
/******** MAIN ********/
/******** CONTENT GRID ********/
/******** H TAGS ********/
/******** TYPE STYLE ********/
/******** HEADER ********/
/******** HOVER EFFECTS ********/
/******** Project Grid ********/
/******** FOOTER ********/



/******************* 1080P *******************/
@media only screen and (max-width: 2000px) {

    /******** MAIN ********/
    body {
        font-size: 16px;
    }

    .secondImage {
        grid-column: span 5;
    }

    .problemArea {
        grid-column: span 6;
    }

    .sliderArea {
        min-height: 400px
    }

    h3 {
        font-size: 1.75em;
    }

    /******** CONTENT GRID ********/
    /******** H TAGS ********/
    /******** TYPE STYLE ********/
    /******** HEADER ********/
    /******** HOVER EFFECTS ********/
    /******** Project Grid ********/
    /******** FOOTER ********/
}



/******************* Laptop *******************/
@media only screen and (max-width: 1400px) {

    /******** MAIN ********/
    body {
        font-size: 16px;
    }

    .gridX {
        grid-template-columns: 1fr minmax(50vw, 1100px) 1fr;
    }

    .xLaptop {
        display: none;
    }

    .sliderArea {
        min-height: 350px
    }

    h3 {
        font-size: 1.5em;
    }

    /******** CONTENT GRID ********/
    /******** H TAGS ********/
    /******** TYPE STYLE ********/
    /******** HEADER ********/
    /******** HOVER EFFECTS ********/
    /******** Project Grid ********/
    .imageLarge {
        width: 60%;
    }



    /******** FOOTER ********/



}

/******************* Tablet *******************/
@media only screen and (max-width: 1100px) {

    /******** MAIN ********/
    body {
        font-size: 16px;
    }

    .gridX {
        grid-template-columns: 1fr minmax(50vw, 90%) 1fr;
    }

    .sliderGridDesktop {
        display: none;
    }

    .sliderGridMobile {
        display: grid;
        grid-template-columns: 1fr;
    }

    .mobileEx {
        display: block;
    }

    .desktopEx {
        display: none !important;
    }

    .mainPiece {
        /*        grid-template-rows: 2fr auto;*/
        grid-template-columns: 1fr;
        height: 50vh;

    }

    .mainCenter h2 {
        font-size: 2em;
    }

    .mainText {
        grid-row: 2;
    }

    .topImage img {
        width: 75%;
    }

    .topImageCourt img {
        width: 85%;
    }

    #projectImage {
        grid-row: 3;
    }

    #projectThirdSpot {
        grid-row: 7;
    }

    #mobileTwoImage {
        grid-row: 7;
    }

    #mobileFourImage {
        grid-row: 3;
    }

    .mobileSpacerBot {
        margin-bottom: 2em;
    }

    .mobileSpacerTop {
        margin-top: 2em;
    }

    .mobileSpacerTop4 {
        margin-top: 4em;
    }


    .no-webp .paraIMGedu {
        min-height: 25vh;
        background-size: 250%;
        background-color: #cbcbcb;

        /*                background-image: url("../img/capStone/LaptopScreen.jpg");*/
    }

    .webp .paraIMGedu {
        min-height: 25vh;
        background-size: 350%;
        background-color: #cbcbcb;
        /*        background-image: url("../img/capStone/Xoom.webp");*/
    }

    .no-webp .paraIMGvbs {
        min-height: 25vh;
        background-size: 450%;
        background-color: #cbcbcb;
        /*        background-image: url("../img/virtualBabyShower/vbsPara.png");*/
    }

    .webp .paraIMGvbs {
        min-height: 25vh;
        background-size: 450%;
        background-color: #cbcbcb;
        /*        background-image: url("../img/virtualBabyShower/vbsPara.webp");*/
    }

    .webp .paraIMGvc {
        min-height: 25vh;
        background-size: 450%;
        background-color: #cbcbcb;
    }

    .no-webp .paraIMGvc {
        min-height: 25vh;
        background-size: 450%;
        background-color: #cbcbcb;
    }


    .addGridGap {
        margin-bottom: 2em;
    }

    .dropShadowIMG {
        -webkit-box-shadow: 0px 18px 20px 0px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 18px 20px 0px rgba(0, 0, 0, 0.5);
    }


    /******** CONTENT GRID ********/
    .col12,
    .col11,
    .col10,
    .col9,
    .col8,
    .col7,
    .col6,
    .col5,
    .col4,
    .col3,
    .col1,
    .problemArea,
    .secondImage {
        grid-column: span 12;
    }


    .col2 {
        grid-column: span 4;
    }

    .col3tb {
        grid-column: span 6;
    }

    .col4tb {
        grid-column: span 4;
    }

    .col3mb {
        grid-column: span 3;
    }


    .sectionTopSpacer {
        margin-bottom: 50px;
    }

    .sectionBottomSpacer {
        margin-top: 50px;
    }

    .sectionBottomSpacerHalf {
        margin-top: 2em;
    }

    .sectionSpacer {
        margin: 75px 0;
    }

    /******** H TAGS ********/
    .projectName {
        font-size: 1.3em;
    }

    /******** TYPE STYLE ********/
    .mobileBottomPadding {
        margin-bottom: 10px;
    }

    .mobileCentered {
        text-align: center;
        /*        margin: 0 0 15px 0;*/
    }

    /******** HEADER ********/
    .websiteTitle {
        grid-column: span 12;
        text-align: center;
    }

    .menu-btn {
        right: 45px;
        top: 45px;
    }

    /******** HOVER EFFECTS ********/
    /******** Project Grid ********/
    .projectCell {
        height: 600px;
    }

    .projectOverlay {
        opacity: 1;
        height: 50%;
        top: auto;
        bottom: 0;

    }

    .imageLarge {
        width: 80%;
    }

    .image40,
    image40Real,
    .image60,
    image80,
    image100 {
        width: 90%;
    }

    .image100Small,
    .image80Small {
        width: 60%;
        margin: 0 auto;
        display: block;
        text-align: center;
    }

    .image100SmallB {
        width: 60%;
        margin: 0 auto 3em;
        display: block;
        text-align: center;
    }

    .image100SmallT,
    image80SmallT {
        width: 60%;
        margin: 3em auto 0;
        display: block;
        text-align: center;
    }

    .mainImage img {
        width: 80%;
    }

    .mobileSpacer {
        margin: 40px 0 0;
    }

    .mobileBottom {
        margin-bottom: 2.5em;
    }

    .headerSpacerMobile {
        margin: 0 0 0 0;
    }

    .headerSpacer {
        margin: 30px 0 0 0;
    }

    .leftPadding {
        padding-left: 0em;
        display: block;
        width: 40%;
        margin: 0 auto;
    }

    .fig60,
    .fig80,
    fig100 {
        width: 100%;
        margin: 5px auto 20px;
        ;
    }

    .paraPadRightDesktopEx {
        padding-right: 0em;
    }

    .paraPadLeftDesktopEx {
        padding-left: 0em;
    }

    .modal-content {
        width: 90%;
    }

    .mobileCenterBlock {
        display: block;
        margin: 2em auto 0;
        grid-column: span 12;
        width: 60%;
        text-align: center;
    }

    .mobileCenterBlockTop {
        display: block;
        margin: 0 auto 0;
        grid-column: span 12 !important;
        width: 60%;
        text-align: center;
    }

    .mobileCenterBlockText {
        display: block;
        margin: 15px auto;
        grid-column: span 12;
        width: 60%;
        text-align: center;
    }

    .mobileTextSpacer {
        margin: 0.5em 0;
    }

    .mobileTextSpacerT {
        margin-top: 0.5em;
    }

    .posParAbs {}

    .posChildAbs {
        position: relative;

    }

    /******** FOOTER ********/


    .exactPositionThemes {
        position: relative;

    }

    .orangeB {
        padding: 0.5em;
        border: solid 1px #EB6C28;
    }
}



/******************* LARGE PHONE *******************/
@media only screen and (max-width: 700px) {

    /******** MAIN ********/
    body {
        font-size: 16px;
    }

    .gridX {
        grid-template-columns: 1fr minmax(80vw, 90%) 1fr;
    }



    .addGridGap {
        margin-bottom: 2.5em;
    }

    .addGridGap3Mobile {
        margin-bottom: 1em;
    }

    .mobileSpacer {
        margin-top: 2em;
        margin-bottom: 2em;
    }

    .col3tb {
        grid-column: span 12;
    }

    .col3mb {
        grid-column: span 6;
    }

    #projectImage {
        grid-row: 3;
    }

    #projectThirdSpot {
        grid-row: 7;
    }

    #mobileTwoImage {
        grid-row: 9;
    }

    #mobileFourImage {
        grid-row: 3;
    }

    .mainCenter h2 {
        font-size: 1.5em;
    }

    .mainList li {
        font-size: 1em;
    }


    /******** CONTENT GRID ********/
    .col2 {
        grid-column: span 6;
    }

    .col4tb {
        grid-column: span 12;
    }


    /******** H TAGS ********/
    .projectName {
        font-size: 1.6em;
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 2.5em;
        margin-top: 2em;
        margin-bottom: 0.5em;
    }

    /*
    .oTag {
        font-size: 1.4em;
    }
*/

    #studentLoop {}



    /******** TYPE STYLE ********/
    .centered {
        text-align: left;
    }

    /******** HEADER ********/

    .websiteTitle {
        margin: 0;
        padding: 0;
    }

    .menu-btn {
        right: 12px;
        top: 12px;
    }

    /******** HOVER EFFECTS ********/
    /******** Project Grid ********/
    .projectCell {
        height: 400px;
    }

    .leftPadding {
        width: 80%;

    }

    .liLight {
        width: 90%;
        margin: 10px auto;
    }

    .liLight li {
        margin-bottom: 0.6em;
    }

    .squareImages {
        width: 100%;
    }

    .mobileCenterBlock {
        display: block;
        margin: 0 auto 0;
        grid-column: span 12;
        width: 100%;
    }



    .mobileCenterBlockText {
        margin: 15px auto;
        width: 80%;
    }

    .sectionSpacer {
        margin: 3em 0;
    }

    .subsectionSpacer {

        margin: 0.5em 0;
    }



    .youContainer {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }

    .video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }



    /******** FOOTER ********/
    .footerMessage {
        grid-column: span 12;

    }

    .footerConnect {
        grid-column: span 12;
        padding: 0 0 0 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .footerConnect ul li {
        padding: 10px 0;
    }

    #footerLargeText {
        font-size: 2em;
        display: none;
    }

}

/******************* SMALL PHONE *******************/
@media only screen and (max-width: 400px) {

    /******** MAIN ********/
    .gridX {
        grid-template-columns: 1fr minmax(80vw, 90%) 1fr;
    }

    .smallMobileEx {
        display: inline;
    }

    /******** CONTENT GRID ********/
    /******** H TAGS ********/
    /******** TYPE STYLE ********/
    /******** HEADER ********/
    .websiteTitle {
        text-align: left;
    }

    /******** HOVER EFFECTS ********/
    /******** Project Grid ********/
    /******** FOOTER ********/
    .footerConnect h4,
    .footerConnect ul {
        grid-column: span 2;

    }

    .footerConnect ul {
        padding: 10px 0;
    }

    .footerConnect ul li {
        display: inline;
        margin: 0px 20px 0 0;

    }


}