html {
    background: url("../images/bg.png") left 0 no-repeat;
    background-size: cover;
    background-repeat: repeat-y;
    background-attachment: fixed;
    scroll-behavior: smooth;
}
.grid-container {
    display: grid;
    float: center;
    margin: auto;
    grid-template-columns: 20% 60% 20%;
}

/*
.grid-item {
    border: 1px solid black;
}
*/

a {
    text-decoration: none;
    cursor: pointer;
    color: white;
}
#logo {
    width: 16vw;
    opacity: 85%;
    margin-bottom: 1%;
    margin: auto;
    display: inline-block;
    padding: 10% 25% 0% 25%;
}

#foottext {
    font-size: 12pt;
    line-height: 18pt;
    text-transform: none;
    text-align: center;
    opacity: 50%;
    cursor: default;
}

.mark {
    position: fixed;
    display: block;
    right: 20px;
}
h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-style: normal;
    color: white;
    text-transform: uppercase;
    text-align: center;
}
h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32pt;
    font-style: normal;
    color: #FDDA00;
    text-transform: uppercase;
    text-align: left;
    margin: 0px 0px;
}
p {
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-align: left;
}
p {
    font-family: 'Inconsolata', monospace;
    color: white;
    text-transform: uppercase;
}
p3 {
    font-family: 'Inconsolata', monospace;
    color: #FDDA00;
    text-transform: uppercase;
    font-size: 1.2vw;
    letter-spacing: 2px;
}

.studentgrid {
    text-align: center;
    margin: auto;
}

.studentgrid th {
    width: 20vw;
}

.studentgrid tr {
    height: 20vw;
}

#topbutton {
    display: none;
    position: fixed;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #1e265990;
    color: white;
    cursor: pointer;
    padding: 12px;
    border-radius: 50%;
    font-family: 'Inconsolata', monospace;
    text-transform: uppercase;
}

#topbutton:hover {
    color: #FDDA00;
    background-color: #1e2659;
}


/***********************PROFILE PAGE**********************/
.headerbox {
    margin: auto;
    position: relative;
    height: 550px;
    width: 550px;
    top: 20px;
}

#outer1 {
    border: 10px solid white;
    border-radius: 50%;
    position: absolute;
    height: 100%;
    width: 100%;
    display: relative;
    top: 0;
    left: 0;
}

.circlepath1 {
    width: 100%;
    height: 100%;
    border: 2px solid white;
    border-radius: 50%;
    position: relative;
    margin: auto;
}

.circle1 {
    top: 47%;
    left: 47%;
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    animation: move 25s linear 0s infinite reverse;
}

.smallcircle1 {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 48%;
    left: 48%;
    animation: moving 13s linear 0s infinite normal;
}

@keyframes move {
    from {
        transform: rotate(0deg) translate(275px);
    }

    to {
        transform: rotate(360deg) translate(275px);
    }
}

@keyframes moving {
    from {
        transform: rotate(0deg) translate(275px);
    }

    to {
        transform: rotate(360deg) translate(275px);
    }
}

#profilebg {
    position: fixed;
    width: 110%;
    left: -5%;
    margin-top: -20%;
    z-index: -10;
    background-size: contain;
}

#studentname {
    letter-spacing: 10pt;
    font-weight: 100;
    text-shadow: 2px 5px #1D2959;
}

#portfolio {
    border: 3px solid white;
    padding: 10px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 20pt;
    box-shadow: 5px 5px #1D2959;
}

#portfolio:hover {
    box-shadow: none;
    opacity: 70%;
}



a {
    text-decoration: none;
    cursor: pointer;
    color: white;
}

.sidenav {
    position: fixed;
    z-index: 1;
    left: 20px;
    top: 40px;
    font-family: 'Bebas Neue', sans-serif;
    color: white;
    text-align: left;
    text-transform: uppercase;
}
.sidenav a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 8px;
    transition: 0.2s;
}
.sidenav a:hover {
    color: #FDDA00;
}
.sidenav a.active {
    color: #fad800;
}
#selected {
    width: 100%;
    height: 8px;
    background-color: #fad800;
}
.mark {
    position: fixed;
    display: block;
    right: 20px;
}
.bar {
    position: fixed;
    border-collapse: collapse;
    float: right;
}
#bar1 {
    top: 20px;
    left: 30px;
}
#bar2 {
    right: 36px;
    bottom: 30px;
}
#cr {
    left: 30px;
    bottom: 30px;
    position: fixed;
    display: block;
}
.footer {
    text-align: center;
    padding-bottom: 5%;
}

/***********************HOME PAGE**********************/

#landingpagebox {
    position: relative;
    margin: auto;
    top: 5%;
    height: 600px;
    width: 600px;
    margin-bottom: 40px;
}
#outer {
    border: 10px solid white;
    border-radius: 50%;
    position: absolute;
    height: 97%;
    width: 97%;
    display: block;
    top: 0;
    left: 0;
}
.circlepath {
    width: 90%;
    height: 90%;
    top: 4.5%;
    left: 0.1%;
    border: 2px solid white;
    border-radius: 50%;
    position: relative;
    margin: auto;
}
.circle {
    top: 46%;
    left: 46%;
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    animation: rotate 25s linear 0s infinite reverse;
}
.smallcircle {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 48%;
    left: 48%;
    animation: rotating 13s linear 0s infinite normal;
}
@keyframes rotate {
    from {
        transform: rotate(0deg) translate(263px);
    }
    to {
        transform: rotate(360deg) translate(263px);
    }
}
@keyframes rotating {
    from {
        transform: rotate(0deg) translate(263px);
    }
    to {
        transform: rotate(360deg) translate(263px);
    }
}
#blink {
    width: 550px;
    margin: auto;
    top: 25%;
    left: 5%;
    text-align: center;
    position: relative;
    z-index: -1;
}
#spinner {
    width: 650px;
    margin: auto;
    top: -55%;
    left: -4%;
    text-align: center;
    position: relative;
    z-index: -3;
    opacity: 60%;
    animation: spin 40s linear 0s infinite normal;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
#logo {
    width: 16vw;
    opacity: 70%;
    margin-bottom: 1%;
    margin: auto;
    display: inline-block;
    /*    padding: 10% 25% 0% 25%;*/
    padding: 30% 0% 0% 0%;
}
#spacer {
    height: 25px;
}
.footer p {
    text-transform: none;
    text-align: center;
    opacity: 50%;
    cursor: default;
}
#footer a {
    text-decoration: none;
    font-weight: 900;
    color: white;
    cursor: pointer;
}


#flink {
    text-decoration: none;
    font-weight: 900;
    color: white;
    cursor: pointer;
}
#pagetitle {
    position: relative;
    text-align: center;
}
#pagetitle h1 {
    line-height: 2vw;
    padding: 0px 0px 0px 0px;
}
#bg1 {
    width: 110%;
    left: -5%;
    top: -5%;
    margin: auto;
    z-index: -5;
    position: fixed;
    background-size: contain;
}
.student-container {
    margin-bottom: 10%;
}
.homePara {
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 12pt;
    line-height: 18pt;
    text-transform: none;
}

/***********************STUDENT PAGE**********************/

#pagetitle {
    /*position: fixed;*/
    z-index: 5;
    top: 0;
    margin: auto;
    width: 59%;
}
#bg2 {
    width: 110%;
    top: -5%;
    left: -5%;
    position: fixed;
    z-index: -10;
    background-repeat: repeat;
    background-size: contain;
}
.studentgrid {
    padding-top: 20%;
    text-align: center;
    margin: auto;
}
.studentgrid th {
    width: 20vw;
}
.studentgrid tr {
    height: 20vw;
}
.profile {
    display: inline-block;
    position: relative;
    width: 75%;
}
.profile img {
    display: block;
    border-radius: 50%;
    width: 100%;
}
.profhover {
    position: absolute;
    margin: auto;
    width: 101%;
    height: 101%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 1s ease;
	background-image: url("https://lh3.googleusercontent.com/T21Z0mHUVuJgy9sFZ-1TmENwEN73wDTAqZ-9KsXfSI8IH5o9lotDBXPRTjOOV9-n8smhhGXZRRf_ObBxdM2sOvRgWUphwB7HY4nI-C25RTRyCsTM_hH3_yBxLFYfkRdACuzycc74tw=w2400");																																						
    background-size: cover;
    border-radius: 50%;
}
.profile:hover .profhover {
    opacity: 1;
    cursor: pointer;
/*
	transform: rotate(360deg);
    animation: rotation 5s infinite linear;
*/
}
.profile:hover .name {
    opacity: 1;
    z-index: 10;
    transition: 1s ease;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}
.name {
    opacity: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #FDDA00;
    text-transform: uppercase;
    text-shadow: 2px 3px #293B7F;
    font-size: 25pt;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
#topbutton {
    display: none;
    position: fixed;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #1e265990;
    color: white;
    cursor: pointer;
    padding: 12px;
    border-radius: 50%;
    font-family: 'Inconsolata', monospace;
    text-transform: uppercase;
}
#topbutton:hover {
    color: #FDDA00;
    background-color: #1e2659;
}

/***********************PROFILE PAGE**********************/

.headerbox {
    margin: auto;
    position: relative;
    height: 550px;
    width: 550px;
    top: 20px;
}
#outer1 {
    border: 10px solid white;
    border-radius: 50%;
    position: absolute;
    height: 100%;
    width: 100%;
    display: relative;
    top: 0;
    left: 0;
}
.circlepath1 {
    width: 100%;
    height: 100%;
    border: 2px solid white;
    border-radius: 50%;
    position: relative;
    margin: auto;
}
.circle1 {
    top: 47%;
    left: 47%;
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    animation: move 25s linear 0s infinite reverse;
}
.smallcircle1 {
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 48%;
    left: 48%;
    animation: moving 13s linear 0s infinite normal;
}
@keyframes move {
    from {
        transform: rotate(0deg) translate(275px);
    }
    to {
        transform: rotate(360deg) translate(275px);
    }
}
@keyframes moving {
    from {
        transform: rotate(0deg) translate(275px);
    }
    to {
        transform: rotate(360deg) translate(275px);
    }
}
#profilebg {
    position: fixed;
    width: 110%;
    left: -5%;
    margin-top: -20%;
    z-index: -10;
    background-size: contain;
}
#studentname {
    letter-spacing: 10pt;
    font-weight: 100;
    text-shadow: 2px 5px #1D2959;
}
#portfolio {
    border: 3px solid white;
    padding: 10px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 20pt;
    box-shadow: 5px 5px #1D2959;
}
#portfolio:hover {
    box-shadow: none;
    opacity: 70%;
}
h3 {
    text-align: left;
    font-family: 'Bebas Neue', sans-serif;
    color: #fad800;
    font-size: 32pt;
    letter-spacing: 1pt;
    margin-bottom: 10px;
}
p4 {
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 14pt;
}
p5 {
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 18pt;
    line-height: 40pt;
    font-weight: bold;
}
#profile_picture {
    display: block;
    border-radius: 50%;
    width: 300px;
    top: 24%;
    left: 22%;
    position: absolute;
    border: 2px solid white;
    opacity: ;
}
#hov {
    display: block;
    width: 300px;
    height: 300px;
    position: absolute;
    opacity: 0;
    top: 24%;
    left: 22%;
    z-index: 5;
    transition: 1s ease;
}
#hov img {
    display: block;
    border-radius: 50%;
    width: 100%;
    height: auto;
    position: absolute;
    border: 2px solid white;
}
#hov:hover {
    opacity: 1;
    cursor: pointer;
/*
    transform: rotate(359deg);
    animation: rotation 5s infinite linear;							  										   
*/
}
#video {
    width: 100%;
    height: 30vw;
    /*    margin-top: 3vw;*/
    border: none;
}

/***********************PROJECT PAGE**********************/

#bg3 {
    width: 110%;
    top: -5%;
    left: -5%;
    position: fixed;
    z-index: -10;
    background-size: contain;
}
.container {
    overflow: hidden;
/*    margin-top: 30%;					*/
    text-align: center;
}
#myBtnContainer {
    margin: auto;
    text-align: center;
}
.filterDiv {
    display: none;
    color: white;
    height: 20%;
}
.filterDiv img {
    width: 100%;
}
.filterDiv h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18pt;
    letter-spacing: 0.1vw;
    color: white;
    margin-bottom: -10px;
}
.filterDiv p {
    font-family: 'Montserrat', sans-serif;
    font-size: 12pt;
}
.show {
    display: inline-block;
    float: center;
    text-align: center;
/*    border: 5px solid white;							*/
    padding: 5px;
    margin-bottom: 5%;
    margin: 1%;
    width: 45%;
    font-size: 18pt;
}
.btn {
    border: none;
    outline: none;
    background: white;
    cursor: pointer;
    font-family: 'Bebas Neue', sans-serif;
    color: #293B7F;
    font-size: 20pt;
    text-align: center;
    margin-bottom: 20px;
    margin-left: 0.5%;
    margin-right: 0.5%;
}
.btn:hover {
    color: #fad800;
}
.btn.activeb {
    color: #fad800;
    background: none;
}
.btn.activeb div {
    width: 100%;
    height: 6px;
    background-color: #fad800;
}

/***********************CONTACT PAGE**********************/

#bg4 {
    width: 110%;
    top: -5%;
    left: -5%;
    position: fixed;
    z-index: -5;
    background-size: contain;
}
.contactcard {
    display: inline-block;
    text-align: center;
    padding: 15px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;						
    background-color: #1e265990;
    border-radius: 20%;
}
.contactcard h2 {
    text-align: center;
}
.contactcard p {
    text-align: center;
}
.contactcard img {
    width: 90%;
    margin-top: 25px;
    margin-bottom: 15px;
}
.contactcard p {
    text-align: center;
}

/***********************BREAK POINTS***********************/

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

	/* -- Exceptional calls -- */
	html {
		background: #1c3d93;
	}
	#landingpagebox {
		display: none;
	}
	
	.grid-container {
    	display: grid;
	    float: center;
	    margin: auto;
    	grid-template-columns: 22% 70% 0%;
    	column-gap: 3%;
	}
    .mark {
        width: 75px;
        position: fixed;
/*        margin: 0 25%;*/
        left: 20px;
        top:20px;
    }
    
    #logo {
        width: 32vw;
	    margin-bottom: 0;
	    margin: auto;
    	display: inline-block;
	    padding: 0;

    }
    
    #foottext {
		font-size: 10pt;
	    text-align: left;
	}
	
    .sidenav {
        font-size: 14pt;
        margin-top: 55px;
    }

	h1 {
		text-align: left;
	}

	.studentgrid {
    	padding-top: 0;
	}
	
	#topbutton {
		display: none;
	}


	.headerbox {
	    margin: auto;
	    position: relative;
	    height: 200px;
	    width: 200px;
	    top: 20px;
	}

	#profile_picture {
		width: 200px;
		margin: 0;
		top: 0;
		left: 0;
	}

	/* --- */
	
	
	

    h2 {}
    p {
        font-size: 10pt;
        line-height: 12pt;
    }
    h1 {
        font-size: 30pt;
        text-align: center;
    }
    p {
        font-size: 6pt;
    }
    .footer {
        width: 250px;
        margin: auto;
    }
    .footer p {
        font-size: 8pt;
        line-height: 12pt;
    }
    #topbutton {
        width: 50px;
        height: 50px;
        font-size: 12px;
        bottom: 70px;
        right: 20px;
    }
/*
    .container {
        margin-top: 40%;
    }
*/
    .contactcard {
        width: 150px;
        margin-top: 50px;
    }
    p2 {
        font-size: 10pt;
    }
    .contactcard h2 {
        font-size: 12pt;
    }
    .filterDiv.show {
        width: 100%;
    }
    .bar {
        display: none;
    }
/*
    .sidenav {
        margin-top: 14px;
    }
*/
    /* Below here is to fix the fucked up profile pages at smaller sizes */
    #profile_picture {
        width: 200px;
        margin: 0;
        top: 0;
        left: 0;
    }
    /* removing the broken hover and orbiting circles as they don't work at this size*/
    #hov,
    .smallcircle1,
    .circle1,
    #outer1 {
        display: none;
    }
    .headerbox {
        height: 235px;
        top: 45px;
    }
    /* Thus ends the smaller sizes fix */
}
@media screen and (min-width: 600px) {
    .mark {
        width: 100px;
    }
    h1 {
        font-size: 30pt;
        /*        text-align: left;*/
    }
    p {
        font-size: 8pt;
    }
    .sidenav {
        font-size: 22pt;
    }
    .footer {
        width: 300px;
        margin: auto;
    }
    .footer p {
        font-size: 10pt;
        line-height: 14pt;
    }
    #topbutton {
        width: 50px;
        height: 50px;
        font-size: 20px;
        bottom: 70px;
        right: 20px;
    }
    .contactcard {
        width: 150px;
        margin-top: 50px;
    }
    .contactcard h2 {
        font-size: 12pt;
    }
    .contactcard p {
        font-size: 8pt;
    }
    .filterDiv.show {
        width: 100%;
    }
/*
    video {
        position: relative;
        width: 85vw;
        margin: auto -20%;
    }
*/
}
@media screen and (min-width: 992px) {
    .mark {
        width: 200px;
    }
    h1 {
        font-size: 48pt;
    }
    p {
        font-size: 12pt;
        line-height: 18pt;
    }
    p {
        font-size: 10pt;
    }
    .sidenav {
        font-size: 30pt;
    }
    .bar {
        width: 180px;
        height: 8px;
    }
    .footer p {
        font-size: 12pt;
        line-height: 18pt;
    }
    #topbutton {
        width: 120px;
        height: 120px;
        font-size: 15pt;
        bottom: 80px;
        right: 60px;
    }
    .contactcard {
        width: 250px;
        margin-top: 200px;
    }
    .contactcard h2 {
        font-size: 32pt;
    }
    .contactcard p {
        font-size: 12pt;
    }
    .filterDiv.show {
        width: 60%;
    }
}