Difference between revisions of "Template:Hong Kong HKUST/css style sheet"

 
(27 intermediate revisions by 2 users not shown)
Line 81: Line 81:
 
.circle-carol {
 
.circle-carol {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 36px;
−
left: 20px;
+
left: 16px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 95: Line 95:
 
.circle-cynthia {
 
.circle-cynthia {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 36px;
−
left: 20px;
+
left: 63px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 110: Line 110:
 
.circle-danson {
 
.circle-danson {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 36px;
−
left: 20px;
+
left: 111px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 124: Line 124:
 
.circle-eric {
 
.circle-eric {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 51px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 33px;
−
left: 20px;
+
left: 158px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 138: Line 138:
 
.circle-gary {
 
.circle-gary {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 48px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 36px;
−
left: 20px;
+
left: 204px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 152: Line 152:
 
.circle-janice {
 
.circle-janice {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 51px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 33px;
−
left: 20px;
+
left: 253px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 166: Line 166:
 
.circle-joyce {
 
.circle-joyce {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 83px;
−
left: 20px;
+
left: 17px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 180: Line 180:
 
.circle-kait {
 
.circle-kait {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 44px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 83px;
−
left: 20px;
+
left: 64px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 194: Line 194:
 
.circle-karen {
 
.circle-karen {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 83px;
−
left: 20px;
+
left: 105px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 208: Line 208:
 
.circle-leona {
 
.circle-leona {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 83px;
−
left: 20px;
+
left: 158px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 222: Line 222:
 
.circle-luna {
 
.circle-luna {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 52px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 77px;
−
left: 20px;
+
left: 200px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 236: Line 236:
 
.circle-mike {
 
.circle-mike {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 49px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 84px;
−
left: 20px;
+
left: 250px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 250: Line 250:
 
.circle-olivia {
 
.circle-olivia {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 48px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 131px;
−
left: 20px;
+
left: 14px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 264: Line 264:
 
.circle-raymon {
 
.circle-raymon {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 49px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 130px;
−
left: 20px;
+
left: 63px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 278: Line 278:
 
.circle-sharon {
 
.circle-sharon {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 130px;
−
left: 20px;
+
left: 111px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 292: Line 292:
 
.circle-soo {
 
.circle-soo {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 130px;
−
left: 20px;
+
left: 158px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 306: Line 306:
 
.circle-steven {
 
.circle-steven {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 48px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 127px;
−
left: 20px;
+
left: 200px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 320: Line 320:
 
.circle-tiff {
 
.circle-tiff {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 52px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 124px;
−
left: 20px;
+
left: 244px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 334: Line 334:
 
.circle-victor {
 
.circle-victor {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 178px;
−
left: 20px;
+
left: 11px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 348: Line 348:
 
.circle-winnie {
 
.circle-winnie {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 47px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 173px;
−
left: 20px;
+
left: 63px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 363: Line 363:
 
.circle-alice {
 
.circle-alice {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 266px;
−
left: 20px;
+
left: 17px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 377: Line 377:
 
.circle-bonnie {
 
.circle-bonnie {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 266px;
−
left: 20px;
+
left: 63px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 391: Line 391:
 
.circle-edward {
 
.circle-edward {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 266px;
−
left: 20px;
+
left: 111px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 405: Line 405:
 
.circle-ericMF {
 
.circle-ericMF {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 266px;
−
left: 20px;
+
left: 158px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 419: Line 419:
 
.circle-feli {
 
.circle-feli {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 266px;
−
left: 20px;
+
left: 206px;
−
background-color: transparent;
+
−
border-radius: 50%;
+
−
border-style: solid;
+
−
position: absolute;
+
−
visibility: inherit;
+
−
transition-property: inherit;
+
−
transition-delay: inherit;
+
−
}
+
−
.circle-jacq {
+
−
cursor: pointer;
+
−
height: 60px;
+
−
width: auto;
+
−
top: 20px;
+
−
left: 20px;
+
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 447: Line 433:
 
.circle-justin {
 
.circle-justin {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 266px;
−
left: 20px;
+
left: 253px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 461: Line 447:
 
.circle-mona {
 
.circle-mona {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 313px;
−
left: 20px;
+
left: 17px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 475: Line 461:
 
.circle-raul {
 
.circle-raul {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 313px;
−
left: 20px;
+
left: 63px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 489: Line 475:
 
.circle-sabrina {
 
.circle-sabrina {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 313px;
−
left: 20px;
+
left: 111px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 503: Line 489:
 
.circle-samiha {
 
.circle-samiha {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 313px;
−
left: 20px;
+
left: 158px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 514: Line 500:
 
transition-property: inherit;
 
transition-property: inherit;
 
transition-delay: inherit;
 
transition-delay: inherit;
−
}
+
}
 
.circle-steph {
 
.circle-steph {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 313px;
−
left: 20px;
+
left: 206px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 528: Line 514:
 
transition-property: inherit;
 
transition-property: inherit;
 
transition-delay: inherit;
 
transition-delay: inherit;
−
}
+
}
 
.circle-thomas {
 
.circle-thomas {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 313px;
−
left: 20px;
+
left: 253px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 542: Line 528:
 
transition-property: inherit;
 
transition-property: inherit;
 
transition-delay: inherit;
 
transition-delay: inherit;
−
}
+
}
 +
 
/*Instructors*/
 
/*Instructors*/
 
.circle-kc {
 
.circle-kc {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 395px;
−
left: 20px;
+
left: 63px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 560: Line 547:
 
.circle-jessica {
 
.circle-jessica {
 
cursor: pointer;
 
cursor: pointer;
−
height: 60px;
+
height: 41px;
 
width: auto;
 
width: auto;
−
top: 20px;
+
top: 395px;
−
left: 20px;
+
left: 17px;
 
background-color: transparent;
 
background-color: transparent;
 
border-radius: 50%;
 
border-radius: 50%;
Line 583: Line 570:
 
visibility: visible;
 
visibility: visible;
 
transition-property: visibility;
 
transition-property: visibility;
−
left: 16.67%;
+
left: 8.33%;
 
}
 
}
  
Line 951: Line 938:
 
transition-delay: inherit;
 
transition-delay: inherit;
 
}
 
}
−
.circle-jacq-d {
+
.circle-justin-d {
 
cursor: pointer;
 
cursor: pointer;
 
height: 106px;
 
height: 106px;
Line 965: Line 952:
 
transition-delay: inherit;
 
transition-delay: inherit;
 
}
 
}
−
.circle-justin-d {
+
.circle-mona-d {
 
cursor: pointer;
 
cursor: pointer;
 
height: 106px;
 
height: 106px;
Line 979: Line 966:
 
transition-delay: inherit;
 
transition-delay: inherit;
 
}
 
}
−
.circle-mona-d {
+
.circle-raul-d {
 
cursor: pointer;
 
cursor: pointer;
 
height: 106px;
 
height: 106px;
Line 993: Line 980:
 
transition-delay: inherit;
 
transition-delay: inherit;
 
}
 
}
−
.circle-raul-d {
+
.circle-sabrina-d {
 
cursor: pointer;
 
cursor: pointer;
 
height: 106px;
 
height: 106px;
Line 1,007: Line 994:
 
transition-delay: inherit;
 
transition-delay: inherit;
 
}
 
}
−
.circle-sabrina-d {
+
.circle-samiha-d {
 
cursor: pointer;
 
cursor: pointer;
 
height: 106px;
 
height: 106px;
Line 1,021: Line 1,008:
 
transition-delay: inherit;
 
transition-delay: inherit;
 
}
 
}
−
.circle-samiha-d {
+
.circle-steph-d {
 
cursor: pointer;
 
cursor: pointer;
 
height: 106px;
 
height: 106px;
Line 1,035: Line 1,022:
 
transition-delay: inherit;
 
transition-delay: inherit;
 
}
 
}
−
.circle-steph-d {
+
.circle-thomas-d {
 
cursor: pointer;
 
cursor: pointer;
 
height: 106px;
 
height: 106px;
Line 1,049: Line 1,036:
 
transition-delay: inherit;
 
transition-delay: inherit;
 
}
 
}
−
.circle-thomas-d {
+
−
cursor: pointer;
+
−
height: 106px;
+
−
width: 106px;
+
−
background-color: transparent;
+
−
border-radius: 50%;
+
−
border-style: solid;
+
−
position: absolute;
+
−
top: 939px;
+
−
left: 45px;
+
−
visibility: inherit;
+
−
transition-property: inherit;
+
−
transition-delay: inherit;
+
−
}
+
 
/*Instructors*/
 
/*Instructors*/
 
.circle-kc-d {
 
.circle-kc-d {
Line 1,072: Line 1,046:
 
border-style: solid;
 
border-style: solid;
 
position: absolute;
 
position: absolute;
−
top: 1168px;
+
top: 1028px;
 
left: 165px;
 
left: 165px;
 
visibility: inherit;
 
visibility: inherit;
Line 1,086: Line 1,060:
 
border-style: solid;
 
border-style: solid;
 
position: absolute;
 
position: absolute;
−
top: 1168px;
+
top: 1028px;
 
left: 44px;
 
left: 44px;
 
visibility: inherit;
 
visibility: inherit;
Line 1,106: Line 1,080:
 
visibility: hidden; /*Change back to hidden after test*/ //
 
visibility: hidden; /*Change back to hidden after test*/ //
 
transition-property: visibility;
 
transition-property: visibility;
−
transition: top ease 0.6s;
+
top: 61px;
 
/*-webkit-transition: top ease 0.6s;*/
 
/*-webkit-transition: top ease 0.6s;*/
 
/*transition-delay: 0.6s; */
 
/*transition-delay: 0.6s; */
Line 1,133: Line 1,107:
 
color: darkgrey;
 
color: darkgrey;
 
font-size: 32px;
 
font-size: 32px;
 +
z-index: 8675311;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 
}
 
}
 +
  
 
.CloseBtn:hover {
 
.CloseBtn:hover {
Line 1,163: Line 1,141:
 
left: 4%;
 
left: 4%;
 
position: absolute;
 
position: absolute;
−
top: 33%;
+
top: 40%;
 
padding: 0px 40px;
 
padding: 0px 40px;
 
visibility: inherit;
 
visibility: inherit;
Line 1,185: Line 1,163:
 
visibility: hidden; /*Change back to hidden after test*/
 
visibility: hidden; /*Change back to hidden after test*/
 
transition-property: visibility;
 
transition-property: visibility;
 +
top: 0px;
 
/*transition-delay: 0.6s; */
 
/*transition-delay: 0.6s; */
 
}
 
}
Line 1,204: Line 1,183:
 
.CloseBtn-d {
 
.CloseBtn-d {
 
position: fixed;
 
position: fixed;
−
top: 25px;
+
top: 97px;
−
right: 29px;
+
right: 72px;
 
visibility: inherit;
 
visibility: inherit;
 
transition-property: inherit;
 
transition-property: inherit;
 
transition-delay: inherit;
 
transition-delay: inherit;
 
color: darkgrey;
 
color: darkgrey;
−
font-size: 32px;
+
font-size: 62px;
 +
z-index: 8675311;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 
}
 
}
 
.CloseBtn-d:hover {
 
.CloseBtn-d:hover {
Line 1,220: Line 1,202:
 
height: 39.6%;
 
height: 39.6%;
 
position: absolute;
 
position: absolute;
−
top: 352px;
+
top: 25%;
 
left: 1%;
 
left: 1%;
 
visibility: inherit;
 
visibility: inherit;
Line 1,231: Line 1,213:
 
left: 42%;
 
left: 42%;
 
position: absolute;
 
position: absolute;
−
top: 34%;
+
top: 20%;
 
padding: 0px 40px;
 
padding: 0px 40px;
 
visibility: inherit;
 
visibility: inherit;

Latest revision as of 01:29, 20 October 2016

/*mobile*/ @media only screen and (max-width: 768px) {

.Team > h1 { text-align: center; font-family: copperplate; font-size: 40pt; }

.Team > h2 { text-align: left; font-family: copperplate; padding-left: 4%; }

.DesBox > h2{ text-align: center; font-family: copperplate; font-size: 28pt; }

.DesBox > p{ text-align: center; font-family: futura; font-size: 12pt; } } /*desktop*/ @media only screen and (min-width: 768px) {

.Team-d > h1 { text-align: center; font-family: copperplate; font-size: 48pt; }

.Team-d > h2 { text-align: left; font-family: copperplate; padding-left: 4%; }

.DesBox-d > h2{ text-align: center; font-family: copperplate; font-size: 40pt; }

.DesBox-d > p{ text-align: center; font-family: futura; font-size: 20pt; } } /*Classes for Main Team Page - mobile*/ @media only screen and (max-width: 768px) {

.Team { width: 100%; height: 100%; position: relative; visibility: visible; transition-property: visibility; top: 30px; }

.TeamClick { visibility: hidden; }

.Icons > img{ width: 307px; height: auto; max-width: none; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

/*Members*/ .circle-carol { cursor: pointer; height: 41px; width: auto; top: 36px; left: 16px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-cynthia { cursor: pointer; height: 41px; width: auto; top: 36px; left: 63px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

.circle-danson { cursor: pointer; height: 41px; width: auto; top: 36px; left: 111px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-eric { cursor: pointer; height: 51px; width: auto; top: 33px; left: 158px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-gary { cursor: pointer; height: 48px; width: auto; top: 36px; left: 204px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-janice { cursor: pointer; height: 51px; width: auto; top: 33px; left: 253px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-joyce { cursor: pointer; height: 41px; width: auto; top: 83px; left: 17px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-kait { cursor: pointer; height: 44px; width: auto; top: 83px; left: 64px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-karen { cursor: pointer; height: 41px; width: auto; top: 83px; left: 105px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-leona { cursor: pointer; height: 41px; width: auto; top: 83px; left: 158px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-luna { cursor: pointer; height: 52px; width: auto; top: 77px; left: 200px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-mike { cursor: pointer; height: 49px; width: auto; top: 84px; left: 250px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-olivia { cursor: pointer; height: 48px; width: auto; top: 131px; left: 14px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-raymon { cursor: pointer; height: 49px; width: auto; top: 130px; left: 63px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-sharon { cursor: pointer; height: 41px; width: auto; top: 130px; left: 111px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-soo { cursor: pointer; height: 41px; width: auto; top: 130px; left: 158px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-steven { cursor: pointer; height: 48px; width: auto; top: 127px; left: 200px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-tiff { cursor: pointer; height: 52px; width: auto; top: 124px; left: 244px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-victor { cursor: pointer; height: 41px; width: auto; top: 178px; left: 11px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-winnie { cursor: pointer; height: 47px; width: auto; top: 173px; left: 63px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } /*Advisors*/ .circle-alice { cursor: pointer; height: 41px; width: auto; top: 266px; left: 17px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-bonnie { cursor: pointer; height: 41px; width: auto; top: 266px; left: 63px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-edward { cursor: pointer; height: 41px; width: auto; top: 266px; left: 111px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-ericMF { cursor: pointer; height: 41px; width: auto; top: 266px; left: 158px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-feli { cursor: pointer; height: 41px; width: auto; top: 266px; left: 206px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-justin { cursor: pointer; height: 41px; width: auto; top: 266px; left: 253px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-mona { cursor: pointer; height: 41px; width: auto; top: 313px; left: 17px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-raul { cursor: pointer; height: 41px; width: auto; top: 313px; left: 63px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-sabrina { cursor: pointer; height: 41px; width: auto; top: 313px; left: 111px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-samiha { cursor: pointer; height: 41px; width: auto; top: 313px; left: 158px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-steph { cursor: pointer; height: 41px; width: auto; top: 313px; left: 206px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-thomas { cursor: pointer; height: 41px; width: auto; top: 313px; left: 253px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

/*Instructors*/ .circle-kc { cursor: pointer; height: 41px; width: auto; top: 395px; left: 63px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-jessica { cursor: pointer; height: 41px; width: auto; top: 395px; left: 17px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; visibility: inherit; transition-property: inherit; transition-delay: inherit; } }

/*Classes for Main Team Page - desktop*/ @media only screen and (min-width: 768px) {

.Team-d { width: 66.2%; height: 100%; position: relative; visibility: visible; transition-property: visibility; left: 8.33%; }

.TeamClick-d { visibility: hidden; }

.Icons-d > img{ width: 800px; height: auto; max-width: none; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

/*Members*/ .circle-carol-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 93px; left: 43px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-cynthia-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 93px; left: 166px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-danson-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 93px; left: 289px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-eric-d { cursor: pointer; height: 133px; width: 108px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 85px; left: 411px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-gary-d { cursor: pointer; height: 124px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 94px; left: 533px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-janice-d { cursor: pointer; height: 130px; width: 105px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 87px; left: 658px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-joyce-d { cursor: pointer; height: 106px; width: 111px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 216px; left: 45px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-kait-d { cursor: pointer; height: 114px; width: 105px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 217px; left: 167px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-karen-d { cursor: pointer; height: 105px; width: 130px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 217px; left: 277px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-leona-d { cursor: pointer; height: 105px; width: 119px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 217px; left: 413px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-luna-d { cursor: pointer; height: 135px; width: 137px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 201px; left: 520px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-mike-d { cursor: pointer; height: 130px; width: 123px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 216px; left: 652px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-olivia-d { cursor: pointer; height: 126px; width: 128px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 340px; left: 37px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-raymon-d { cursor: pointer; height: 124px; width: 110px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 341px; left: 164px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-sharon-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 339px; left: 288px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-soo-d { cursor: pointer; height: 108px; width: 127px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 339px; left: 410px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-steven-d { cursor: pointer; height: 126px; width: 120px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 331px; left: 520px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-tiff-d { cursor: pointer; height: 135px; width: 131px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 323px; left: 636px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-victor-d { cursor: pointer; height: 107px; width: 124px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 464px; left: 30px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-winnie-d { cursor: pointer; height: 124px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 448px; left: 165px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } /*Advisors*/ .circle-alice-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 45px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-bonnie-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 166px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-edward-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 291px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-ericMF-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 413px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-feli-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 537px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-justin-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 693px; left: 659px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-mona-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 45px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-raul-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 166px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-sabrina-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 291px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-samiha-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 413px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-steph-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 537px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-thomas-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 816px; left: 659px; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

/*Instructors*/ .circle-kc-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 1028px; left: 165px; visibility: inherit; transition-property: inherit; transition-delay: inherit; } .circle-jessica-d { cursor: pointer; height: 106px; width: 106px; background-color: transparent; border-radius: 50%; border-style: solid; position: absolute; top: 1028px; left: 44px; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

}


/*Classes for full page profiles - mobile*/ @media only screen and (max-width: 768px) {

.Profile { width: 100%; height: 100%; position: absolute; visibility: hidden; /*Change back to hidden after test*/ // transition-property: visibility; top: 61px; /*-webkit-transition: top ease 0.6s;*/ /*transition-delay: 0.6s; */ } .ProfileClick{ visibility: visible; top: 61px; }

.BkgdPhoto { width: 100%; height: 100%; visibility: inherit; transition-property: inherit; transition-delay: inherit; position: relative; }

.CloseBtn { position: fixed; top: 106px; right: 7px; visibility: inherit; transition-property: inherit; transition-delay: inherit; color: darkgrey; font-size: 32px; z-index: 8675311; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }


.CloseBtn:hover { cursor: pointer; }

.GIFBox { width: 82.6%; height: 28.6%; position: absolute; top: 35px; left: 9%; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

/*.HiddenBkgd{ background-color: rgb(219, 210, 191); width: 100%; height: 190%; position: absolute; top: 47%; visibility: inherit;

}*/ .DesBox { width: 91.6%; left: 4%; position: absolute; top: 40%; padding: 0px 40px; visibility: inherit; transition-property: inherit; transition-delay: inherit;

background-color: white; } } /*Classes for full page profiles - mobile*/

/*Classes for full page profiles - desktop*/ @media only screen and (min-width: 768px) {

.Profile-d { width: 100%; height: 0%; /*max-height: 0;*/ position: absolute; /*display: none;*/ visibility: hidden; /*Change back to hidden after test*/ transition-property: visibility; top: 0px; /*transition-delay: 0.6s; */ } .ProfileClick-d{ visibility: visible; top: 0px; height: auto; }

.BkgdPhoto-d { width: 100%; height: 100%; visibility: inherit; transition-property: inherit; transition-delay: inherit; position: relative; }

.CloseBtn-d { position: fixed; top: 97px; right: 72px; visibility: inherit; transition-property: inherit; transition-delay: inherit; color: darkgrey; font-size: 62px; z-index: 8675311; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .CloseBtn-d:hover { cursor: pointer; }

.GIFBox-d { width: 39.6%; height: 39.6%; position: absolute; top: 25%; left: 1%; visibility: inherit; transition-property: inherit; transition-delay: inherit; }

.DesBox-d { width: 55.6%; left: 42%; position: absolute; top: 20%; padding: 0px 40px; visibility: inherit; transition-property: inherit; transition-delay: inherit;

background-color: white; } } /*Classes for full page profiles - desktop*/