@charset "utf-8";
/* CSS Document */

/* font families - Decorative: Pacific (script); Text: Mulish (sans-serif)  */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Pacifico&display=swap');

* {box-sizing: inherit;}
body {padding: 0px; margin: 0px; box-sizing: border-box; -webkit-font-smoothing: antialiased;border-top: 18px solid rgba(85,87,89,1); font-family: "Mulish", Arial, sans-serif; background: #fff url(../images/gearsbg.png); background-attachment: fixed;}

.clearall {visibility: hidden; clear: both; font-size: 1px; line-height: 1px; padding: 0; margin: 0;}
.hidden-header {position: absolute; left: -9999px;}


nav ul, nav li {list-style-type: none;}

/*Desktop nav*/

@media screen and (min-width: 1023px) {
header {width: 100%; background: linear-gradient(0deg, rgba(85,87,89,.1) 0%, rgba(255,255,255,.9) 100%);}

header #gukname {width: 227px; float: left; padding: 1%; }
header #gukname img {display: block; width: auto !important; height: 100px !important;}

nav {min-height: 100px;}
nav:after {clear: both; display: block; content:"";}

nav #menu-icon, nav #menu-close-link {display: none;}
nav ul {margin: 0; padding: 0;}
nav > ul {padding: 50px 1vw 1vh 1vw;} 

nav li {position: relative; display:inline-block;}
nav ul li li {width: 15vw;}

nav a{ display:block; transition:0.2s opacity linear;}

nav ul > li {padding-right: 2vw;}
nav ul > li > ul > li a{ display:block; padding:7px; transition:0.2s opacity linear;}

nav a:hover{transition:0.2s opacity linear;}

nav li > ul {display:none; position:absolute; z-index: 1972}

nav li > ul li{ display:block;}

nav li:hover  > ul{display:block;}

nav ul ul ul {position:absolute; left:100%; top:0;}

/*colors and styles*/
nav {font-family: "Mulish", sans-serif;}
nav a:hover {text-decoration: none;}
nav ul {font-size: 10px;}
nav ul li {font-size: 23px; color: #ff8500; font-weight: bold; letter-spacing: -1px;}
nav ul li a {font-size: 23px; color: #ff8500;}
nav ul li a:hover {color: #ff8500;}
nav ul li ul {background:#fff;}
nav ul li ul li {background: rgba(85,87,89,.1); letter-spacing: 0;}
nav ul li ul, nav ul li li {font-size: 10px;}
nav ul li ul li a {font-size: 17px; color: #0073cf;}
nav ul li ul li a:hover {color: #0073cf;}
nav ul li ul li ul li a {font-size: 15px; color: #0073cf;}

nav ul li ul li:hover {background: rgba(0,115,207,.2);}

nav > ul > li > ul {transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; opacity: 0;}
nav > ul > li:hover > ul {opacity: 1;-webkit-box-shadow: 0px 10px 13px -7px #333, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #333, 5px 5px 15px 5px rgba(0,0,0,0);}
nav > ul > li > ul > li:hover > ul {opacity: 1; -webkit-box-shadow: 0px 10px 13px -7px #333, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #333, 5px 5px 15px 5px rgba(0,0,0,0);}
nav > ul > li > ul > li > ul {transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; opacity: 0;}
}

/*Mobile Nav*/
@media screen and (max-width: 1022px) {
header #gukname {width: 150px; height: auto; float: left; padding: 1%; }
header #gukname img {display: block; width: auto; height: 100px;}

#menu {width: 100%;/*height: 100%;*/position: absolute; top: 0; left: -100%; -moz-transition: left 1s ease; -webkit-transition: left .5s ease; margin: 0; padding: 0; list-style-type: none; z-index: 16; background: #fff; overflow-x: hidden; -webkit-box-shadow: 0px 10px 13px -7px #333, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #333, 5px 5px 15px 5px rgba(0,0,0,0);}

#menu-icon {float: right; position: relative; width: 32px; font-size: 32px; color: #000;}
#menu-icon.menu-open + #menu  {left: 0;}

#menu li#menu-close-link {text-align: right; background: #333;}
#menu li#menu-close-link a {color: #fff;}

#menu a {display: block; color: #333; text-decoration: none;}
#menu a:hover {}

#menu li {margin: 0; list-style-type: none; display: block; cursor: pointer;}
#menu li a {display: block; padding: .5em; }
#menu li li a {color: #fff;}

#menu ul {margin: 0; padding: 0; background: rgba(85,87,89,.1); overflow-y: hidden;}
#menu ul ul, #menu li ul {display: none;}

#menu { font-family: "Mulish", Arial, sans-serif;}
#menu li {font-size: 24px; background: #fff; background: rgba(85,87,89,.1); font-weight: bold;}
#menu li:hover, #menu a:hover {background: rgba(0,115,207,.2);}
#menu li li {font-size: 18px; font-weight: normal; background: rgba(85,87,89,.3);}
#menu li li li {background: rgba(85,87,89,.5);}

#menu li ul li.li-open, #menu li.li-open ul li {}
}

main {background: linear-gradient(0deg, rgba(85,87,89,.1) 0%, rgba(255,255,255,.9) 100%);  font-family: "Mulish", Arial, sans-serif; overflow-x: auto;}

main #breadcrumb {font-size: 13px; background: #555759; color: #fff; padding: 1vh 1vw; font-weight: bold;}
main #breadcrumb a {color: #fff; font-weight: normal;}

main #sidebar {width: 14vw; padding: 3vh 1vw 3vh 1vw;  margin-top: 3vh; float: left; font-size: 95%; border-right: 1px solid orange;}
@media screen and (max-width: 800px) {main #sidebar {float: none; width: auto; border-right: none;}}
	main #sidebar h2 {letter-spacing: -1px; color:#ff8500; font-weight: bold; font-size: 24px;}
	main #sidebar h3 {letter-spacing: -1px; font-style: italic; font-size: 20px;}
	main #sidebar p {hyphens: auto;}
	main #sidebar a {word-wrap:break-word;}
@media screen and (max-width: 600px){main #sidebar {padding: 3vh 3vw;}}

main #content {margin: 0 auto 0 15vw; width: 70vw; padding: 3vh 3vw; font-size: 120%; font-weight: 400;}
@media screen and (max-width: 800px) {main #content {margin: 0 auto; width: auto;}}
	main #content h1 {font-weight: bold; letter-spacing: -2px;}
	main #content h2 {letter-spacing: -1px; color:#ff8500; font-weight: bold;}
	main #content h3 {letter-spacing: -1px; font-style: italic;}
	main #content h4 {letter-spacing: -1px;}
	main #content a {background-color: transparent;}
	main #content ul, main #content ol {}
	main #content li {}
	main #content table {margin: 2vh 1%; width: 98%;}
	main #content th {background: rgba(0,115,207,.8); color: #fff;}
	main #content th, main #content td {padding: 1vh 1vw;}
	main #content td {background: rgba(250,250,250,.7);}
	main #content table, main #content tr, main #content th, main #content td {border: 1px solid #555579;}
	main #content table caption {font-style: italic; font-size: 14px; color: rgba(51,51,51,.75); text-align: left;}
	main #content table.c-top caption {caption-side: top;}
	main #content table.c-bottom caption {caption-side: bottom;}

	main #content .video-holder {position: relative; width: 90% !important; height: auto !important; padding-bottom: 56.25%; margin: 1em 5%;}
	main #content .video-holder iframe, main #content .video-holder video {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0;}

	main #content #video-grid {display: grid; grid-template-columns: 48% 48%; column-gap: 1%; row-gap: 1%;}
	@media screen and (max-width: 800px) {main #content #video-grid {display: block;}}
	
    main #content figure {margin:  0 auto 1em auto; display: table; width: 1px; width: 100%; padding-bottom: 1vh;}
    main #content figure img {display: table-row; margin-bottom: .5em; width: 100% !important; height: auto; border: 1px solid #ccc}
    main #content figure.align-right {float: right; width: 227px; margin-left: 2em;}
    main #content figure.align-left {float: left; width: 227px; margin-right: 2em;}
	main #content figure.align-right img, main #content figure.align-left img {width: 227px; height: auto;}
	main #content figure.align-right figcaption, main #content figure.align-left figcaption {font-style: italic; font-size: 14px; display: table-row; color: rgba(51,51,51,.75); text-align: left;}
	main #content figure.align-center {clear: both; display: block; width 100%; text-align: center;} 
	main #content figure.align-center img {display: block; margin: 0 auto; width: 90% !important; height: auto !important;}
	main #content figure.align-center figcaption {display: block; margin: 1em 5%; font-style: italic; font-size: 14px; color: rgba(51,51,51,.75); text-align: left;}

main #lastupdated {margin: 0 auto; width: 70vw; padding: 3vh 0; text-align: right; font-size: 75%; font-weight: bold;}

footer { clear: both; text-align: left; margin: 0 auto;}
	footer section#socialmediafollow {clear: both; background: linear-gradient(0deg, rgba(85,87,89,.1) 0%, rgba(255,255,255,1) 100%); margin: 0; padding: 1em; border-top: 4px solid rgba(85,87,89,1); border-bottom: 4px solid rgba(85,87,89,1);}
	footer section#socialmediafollow h2 {font-family: "Pacifico", sans-serif; font-size: 40px; line-height: 1; color: #ff8500; font-weight: normal; display: inline-block;}
	footer section#socialmediafollow ul {list-style-type: none; display: inline-block; margin: 0; padding: 0;}
	footer section#socialmediafollow ul li {display: inline-block; font-size: 40px; line-height: 1; padding: 0 5px;}
	footer section#socialmediafollow ul li a img {width: 40px; height: 40px; margin: 0; font-size: 40px; line-height: 1; display: block; transition: transform .2s ease-in-out;}
	footer section#socialmediafollow ul li a:hover img {transform: scale(1.5);}

	@media screen and (max-width: 1023px) {section#socialmediafollow {float: none; clear: both; width: auto;}}

	footer section#contactinfo {padding: .5em 1em 1em 1em;background: rgb(255,133,0,.7);}
	footer section#contactinfo h3, footer section#contactinfo h4 {font-family: "Mulish", sans-serif; color: #fff; font-weight: bold;}
	footer section#contactinfo p {text-align: left; color: #fff; padding: 0; margin: 0 0 5px 0;}
	footer section#contactinfo a {color: #fff;}
	
/*homepage specific*/

section#photofeature {width: 100%; border-bottom: 18px solid rgba(85,87,89,1);}
section#photofeature div {margin:0; padding: 0; line-height: 1;}
/* photo img should be 2200px  x 750px*/
section#photofeature figure {position: relative; background: #000; margin: 0; padding: 0;}
section#photofeature figure img {display: block; width: 100% !important; height: auto !important; object-fit: contain;}
section#photofeature figure figcaption {position: absolute; min-height: 4em; padding: 3vh 3vw; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,1), transparent); color: #fff; font-size: 1.7em; font-weight: 500; text-shadow: 4px 4px 50px #000; font-family: "Mulish", sans-serif;}
section#photofeature figure figcaption a {color: #fff;}
@media screen and (max-width: 800px) {section#photofeature figure figcaption {position: static; background: #000; font-size: 1.25em;}}

section#stats {padding: 4vh 4vw;}
section#stats ul {width: 100%; display: grid; grid-template-columns: repeat(4,20%); list-style-type: none; padding: 0; margin: 0; gap: 1%; place-items: stretch center; justify-content: space-evenly;}
@media screen and (max-width: 1023px) {section#stats ul {grid-template-columns: repeat(2,50%);}}
section#stats ul li {padding: 0; margin: 0; text-align: center; background: white; border-radius: 50%; border: 3px solid #ff8500; color: #fff;text-shadow: 1px 1px 1px #333; transition: transform .2s ease-in-out;}
section#stats ul li:hover {transform: scale(1.5);}
section#stats ul li span {display: block; text-align: center;}
section#stats ul li span.number {font-size: 60px; line-height: 1; height: 120px; width: 240px; padding-top: 65px; font-weight: bold; font-family: "Mulish", sans-serif; letter-spacing: -3px;}
section#stats ul li span.desc {font-size: 20px; line-height: 1; height: 100px; width: 240px; padding-top: 10px; font-family: "Mulish", Arial, sans-serif;}
@media screen and (max-width: 600px) {
section#stats ul li span.number {font-size: 50px; line-height: 1; height: 120px; width: 210px; padding-top: 65px;}
section#stats ul li span.desc {font-size: 20px; line-height: 1; height: 90px; width: 190px; padding-top: 0;}
}
@media screen and (max-width: 400px) {
section#stats ul li span.number {font-size: 36px; line-height: 1; height: 86px; width: 151px; padding-top: 47px;}
section#stats ul li span.desc {font-size: 14px; line-height: 1; height: 65px; width: 137px; padding-top: 0;}
}
section#stats ul li#stat1 {background-image: url(../images/stat1-alt.fw.png); background-repeat: no-repeat; background-position: center center;background-size: 100% auto;}
section#stats ul li#stat2 {background-image: url(../images/stat2-alt.fw.png); background-repeat: no-repeat; background-position: center center;background-size: 100% auto;}
section#stats ul li#stat3 {background-image: url(../images/stat3-alt.fw.png); background-repeat: no-repeat; background-position: center center;background-size: 100% auto;}
section#stats ul li#stat4 {background-image: url(../images/stat4-alt.fw.png); background-repeat: no-repeat; background-position: center center;background-size: 100% auto;}

section#visionmission {margin: 4vh 1vw; width: 45vw;background: rgba(250,250,250,.7); padding: 1em; border: 3px solid #ff8500; border-radius: 15px; float: left; clear: left;}
section#visionmission h2 {font-family: "Pacifico", sans-serif; color: #ff8500; font-weight: normal;}
section#visionmission p {font-size: 120%;}
@media screen and (max-width: 1023px) {section#visionmission {float: none; width: auto;}}

section#studentfeatures div#thegrid {margin: 4vh 1vw; width: 45vw; float: right; clear: right; display: grid; grid-template-columns: 48% 48%; grid-column-gap: 10px;}
section#studentfeatures div#thegrid figure {background: rgba(250,250,250,.7); padding: .5em; text-align: center; border: 3px solid #ff8500; border-radius: 15px;}
section#studentfeatures div#thegrid figure img {width: 80% !important; height: auto; border-radius: 15px; margin-top: 1em;transition: transform .2s ease-in-out;}
section#studentfeatures div#thegrid figure img:hover {transform: scale(1.5);}
section#studentfeatures div#thegrid figure figcaption {text-align: left; padding: 1em; font-size: 120%;}
section#studentfeatures div#thegrid figure figcaption strong {display: block; text-align: center; margin: 0 auto; font-size: 200%;font-family: "Pacifico", sans-serif; color: #ff8500; font-weight: normal;}
@media screen and (max-width: 1023px) {section#studentfeatures div#thegrid {float: none; width: auto;}}

section#videoembed {margin: 2vh 1vw; float: left; clear: left; width: 45vw;}
section#videoembed #videocontainer {position: relative; width: 100%; padding-bottom: 56.25%; margin-bottom: 1em; border: 3px solid #ff8500; border-radius: 15px;}
section#videoembed #videocontainer iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 15px;}
@media screen and (max-width: 1023px) {section#videoembed {float: none; width: auto;}}