Difference between revisions of "Template:CCU Taiwan"

 
Line 1: Line 1:
 +
<html>
 +
 +
<style>
 +
/*DEFAULT WIKI SETTINGS*/
 +
/*DONT TOUCH*/
 +
/*************************************************************************************************************************************************************************************************************************************************************************************************************************************/
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
 +
/*mobile*/
 +
/* 1800px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1800px) {
 +
.igem_2018_team_content { width: 85%;}
 +
.igem_2018_team_menu {display:block;}
 +
}
 +
/* 1400px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1400px) {
 +
.igem_2018_team_menu .menu_item { font-size:100%;}
 +
.igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
 +
.igem_2018_team_menu {display:block;}
 +
}
 +
@media only screen and (max-width: 1001px) {
 +
.igem_2018_team_menu {display:block;}
 +
}
 +
/* 1000px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1000px) {
 +
.igem_2018_team_content {width:100%; margin-left:0px;}
 +
.igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;}
 +
.igem_2018_team_mobile_bar {display:block;}
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }
 +
 +
}
 +
@media only screen and (max-width: 500px) {
 +
.igem_2018_team_menu {min-width:100%; width:100%; }
 +
}
 +
/*************************************************************************************************************************************************************************************************************************************************************************************************************************************/
 +
/*DEFAULT WIKI SETTINGS ENDS HERE*/
 +
 +
@font-face {
 +
    font-family: 'CCUfontsBold';
 +
    src: url('https://static.igem.org/mediawiki/2018/c/c2/T--CCU_Taiwan--CCUfontsBold.eot') ;
 +
    src: url('https://static.igem.org/mediawiki/2018/4/42/T--CCU_Taiwan--CCUfontsBold.ttf') format('truetype'),
 +
          url('https://static.igem.org/mediawiki/2018/6/68/T--CCU_Taiwan--CCUfontsBold.svg') format('svg'),
 +
          url('https://static.igem.org/mediawiki/2018/6/68/T--CCU_Taiwan--CCUfontsBold.svg') format('svg'),
 +
          url('https://static.igem.org/mediawiki/2018/d/dc/T--CCU_Taiwan--CCUfontsBold.woff') format('woff');
 +
}
 +
 +
 +
#globalWrapper {
 +
      padding-bottom: 0px!important;
 +
}
 +
 +
#top {
 +
      position: fixed;
 +
        top: 100px;
 +
        z-index: 6;
 +
}
 +
 +
body::-webkit-scrollbar {
 +
    display: none;
 +
}
 +
.background {
 +
width:100%;
 +
height: 100%;
 +
z-index:1;
 +
margin-bottom:-10%;
 +
padding-top:10%;
 +
padding-bottom:10%;
 +
  background-image: url('https://static.igem.org/mediawiki/2018/0/0a/T--CCU_Taiwan--BC.PNG');
 +
}
 +
header{
 +
margin:0 auto;
 +
top:1.7vh;
 +
width:100%;
 +
position: fixed;
 +
z-index:10;
 +
}
 +
 +
header a {
 +
text-decoration:none!important;
 +
}
 +
 +
nav {
 +
  margin:0;
 +
padding:0;
 +
height:7vh;
 +
width: 100%;
 +
box-shadow:0px 4px 6px 0px #444444;
 +
}
 +
.front {
 +
z-index:11;
 +
}
 +
.title {
 +
float:left;
 +
display: inline-block;
 +
position: relative;
 +
padding-top:10px;
 +
left:4vw;
 +
width: 13.5vw;
 +
height: 5.7vh;
 +
text-align:center;
 +
margin-left:0vw;
 +
margin-right:0vw;
 +
list-style-type: none;
 +
font-size: 18px!important;
 +
color: #F8F8FF;
 +
line-height:25px;
 +
}
 +
.container #Home {
 +
        background:#55c97e;
 +
}
 +
.container #Project {
 +
        background:#74cf7e;
 +
}
 +
 +
.container #Parts {
 +
        background:#92cd7e;
 +
}
 +
 +
.container #Modeling {
 +
        background:#a6ca7e;
 +
}
 +
 +
.container #Drylab {
 +
        background:#bec37e;
 +
}
 +
 +
.container #Human_Practice {
 +
        background:#d1c17e;
 +
}
 +
 +
.container #Notebook {
 +
        background:#d1ad7e;
 +
}
 +
 +
#home_button{
 +
position:absolute;
 +
left:0vw;
 +
width:5.5vw;
 +
height:7vh;
 +
text-align:center;
 +
z-index:10;
 +
background:#9c957e;
 +
}
 +
#home_button img {
 +
height:4.5vh!important;
 +
width:2vw;
 +
margin-top:1.2vh;
 +
}
 +
 +
.img_title {
 +
height:4vh;
 +
padding-right: 1vw;
 +
}
 +
 +
 +
.sub {
 +
display: none;
 +
position:absolute;
 +
text-align: center;
 +
right:0vw;
 +
top:6.2vh;
 +
width:13.5vw!important;
 +
height:40vh;
 +
margin: 0 auto;
 +
padding:0;
 +
z-index:9!important;
 +
box-shadow:3px 3px 3px 0px #444444;
 +
}
 +
 +
#sub_home{
 +
height:40.5vh;
 +
        background:#55c97e;
 +
}
 +
 +
#sub_project{
 +
height:40.5vh;
 +
        background:#74cf7e;
 +
}
 +
 +
#sub_parts{
 +
height:24.5vh;
 +
        background:#92cd7e;
 +
}
 +
 +
#sub_modeling{
 +
height:24.5vh;
 +
        background:#a6ca7e;
 +
}
 +
 +
#sub_drylab{
 +
height:24.5vh;
 +
        background:#bec37e;
 +
}
 +
 +
#sub_human_practice{
 +
height:40.5vh;
 +
        background:#d1c17e;
 +
}
 +
 +
#sub_notebook{
 +
height:40.5vh;
 +
        background:#d1ad7e;
 +
}
 +
 +
.sub a {
 +
  color: #F5F5F5;
 +
}
 +
 +
.sub li {
 +
float:none;
 +
margin: auto;
 +
/*margin-top: 1vh;*/
 +
height: 8vh;
 +
width: 13.5vw;
 +
display:block!important;
 +
border-top-style:solid;
 +
border-top-width:1px;
 +
border-top-color: #F8F8FF;
 +
}
 +
.sub a {
 +
font-size:15px;
 +
line-height:8vh;
 +
}
 +
nav a {
 +
  color:#fcfcfc;
 +
  font-family: 'CCUfontsBold', Arial, sans-serif;
 +
  font-size: 1.5vw;
 +
}
 +
.title:hover {
 +
background-color:#36BF36;
 +
transition: 500ms;
 +
border-radius: 3px;
 +
}
 +
 +
.list {
 +
    -webkit-animation: fadein 2s;
 +
}
 +
.list:hover {
 +
background-color:#567256;
 +
transition: 500ms;
 +
}
 +
nav hr {
 +
position:relative;
 +
border: 0;
 +
    height: 1.5px;
 +
width: 20%;
 +
top: -2.7vh;
 +
left: 12.18vw;
 +
    background-image: linear-gradient(to right, rgba(54, 191, 54, 0.5), rgba(225, 255, 255, 1), rgba(54, 191, 54, .5));
 +
transform:rotate(90deg);
 +
    -o-transform:rotate(90deg);
 +
    -moz-transform:rotate(90deg);
 +
    -webkit-transform:rotate(90deg);
 +
}
 +
/*!
 +
* fullPage 3.0.1
 +
* https://github.com/alvarotrigo/fullPage.js
 +
*
 +
* @license GPLv3 for open source use only
 +
* or Fullpage Commercial License for commercial use
 +
* http://alvarotrigo.com/fullPage/pricing/
 +
*
 +
* Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
 +
*/
 +
 +
html.fp-enabled,
 +
.fp-enabled body {
 +
    margin: 0;
 +
    padding: 0;
 +
    overflow:hidden;
 +
 +
    /*Avoid flicker on slides transitions for mobile phones #336 */
 +
    -webkit-tap-highlight-color: rgba(0,0,0,0);
 +
}
 +
.fp-section {
 +
    position: relative;
 +
    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
 +
    -moz-box-sizing: border-box; /* <=28 */
 +
    box-sizing: border-box;
 +
}
 +
.fp-slide {
 +
    float: left;
 +
}
 +
.fp-slide, .fp-slidesContainer {
 +
    height: 100%;
 +
    display: block;
 +
}
 +
.fp-slides {
 +
    z-index:1;
 +
    height: 100%;
 +
    overflow: hidden;
 +
    position: relative;
 +
    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
 +
    transition: all 0.3s ease-out;
 +
}
 +
.fp-section.fp-table, .fp-slide.fp-table {
 +
    display: table;
 +
    table-layout:fixed;
 +
    width: 100%;
 +
}
 +
.fp-tableCell {
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
.fp-slidesContainer {
 +
    float: left;
 +
    position: relative;
 +
}
 +
.fp-controlArrow {
 +
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
 +
    -moz-user-select: none; /* mozilla browsers */
 +
    -khtml-user-select: none; /* webkit (konqueror) browsers */
 +
    -ms-user-select: none; /* IE10+ */
 +
    position: absolute;
 +
    z-index: 4;
 +
    top: 50%;
 +
    cursor: pointer;
 +
    width: 0;
 +
    height: 0;
 +
    border-style: solid;
 +
    margin-top: -38px;
 +
    -webkit-transform: translate3d(0,0,0);
 +
    -ms-transform: translate3d(0,0,0);
 +
    transform: translate3d(0,0,0);
 +
}
 +
.fp-controlArrow.fp-prev {
 +
    left: 15px;
 +
    width: 0;
 +
    border-width: 38.5px 34px 38.5px 0;
 +
    border-color: transparent #fff transparent transparent;
 +
}
 +
.fp-controlArrow.fp-next {
 +
    right: 15px;
 +
    border-width: 38.5px 0 38.5px 34px;
 +
    border-color: transparent transparent transparent #fff;
 +
}
 +
.fp-scrollable {
 +
    overflow: hidden;
 +
    position: relative;
 +
}
 +
.fp-scroller{
 +
    overflow: hidden;
 +
}
 +
.iScrollIndicator{
 +
    border: 0 !important;
 +
}
 +
.fp-notransition {
 +
    -webkit-transition: none !important;
 +
    transition: none !important;
 +
}
 +
#fp-nav {
 +
    position: fixed;
 +
    z-index: 100;
 +
    margin-top: -32px;
 +
    top: 50%;
 +
    opacity: 1;
 +
    -webkit-transform: translate3d(0,0,0);
 +
}
 +
#fp-nav.fp-right {
 +
    right: 17px;
 +
}
 +
#fp-nav.fp-left {
 +
    left: 17px;
 +
}
 +
.fp-slidesNav{
 +
    position: absolute;
 +
    z-index: 4;
 +
    opacity: 1;
 +
    -webkit-transform: translate3d(0,0,0);
 +
    -ms-transform: translate3d(0,0,0);
 +
    transform: translate3d(0,0,0);
 +
    left: 0 !important;
 +
    right: 0;
 +
    margin: 0 auto !important;
 +
}
 +
.fp-slidesNav.fp-bottom {
 +
    bottom: 17px;
 +
}
 +
.fp-slidesNav.fp-top {
 +
    top: 17px;
 +
}
 +
#fp-nav ul,
 +
.fp-slidesNav ul {
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
#fp-nav ul li,
 +
.fp-slidesNav ul li {
 +
    display: block;
 +
    width: 14px;
 +
    height: 13px;
 +
    margin: 7px;
 +
    position:relative;
 +
}
 +
.fp-slidesNav ul li {
 +
    display: inline-block;
 +
}
 +
#fp-nav ul li a,
 +
.fp-slidesNav ul li a {
 +
    display: block;
 +
    position: relative;
 +
    z-index: 1;
 +
    width: 100%;
 +
    height: 100%;
 +
    cursor: pointer;
 +
    text-decoration: none;
 +
}
 +
#fp-nav ul li a.active span,
 +
.fp-slidesNav ul li a.active span,
 +
#fp-nav ul li:hover a.active span,
 +
.fp-slidesNav ul li:hover a.active span{
 +
    height: 12px;
 +
    width: 12px;
 +
    margin: -6px 0 0 -6px;
 +
    border-radius: 100%;
 +
}
 +
#fp-nav ul li a span,
 +
.fp-slidesNav ul li a span {
 +
    border-radius: 50%;
 +
    position: absolute;
 +
    z-index: 1;
 +
    height: 4px;
 +
    width: 4px;
 +
    border: 0;
 +
    background: #333;
 +
    left: 50%;
 +
    top: 50%;
 +
    margin: -2px 0 0 -2px;
 +
    -webkit-transition: all 0.1s ease-in-out;
 +
    -moz-transition: all 0.1s ease-in-out;
 +
    -o-transition: all 0.1s ease-in-out;
 +
    transition: all 0.1s ease-in-out;
 +
}
 +
#fp-nav ul li:hover a span,
 +
.fp-slidesNav ul li:hover a span{
 +
    width: 10px;
 +
    height: 10px;
 +
    margin: -5px 0px 0px -5px;
 +
}
 +
#fp-nav ul li .fp-tooltip {
 +
    position: absolute;
 +
    top: -2px;
 +
    color: #fff;
 +
    font-size: 14px;
 +
    font-family: 'CCUfontsBold', Arial, sans-serif;
 +
    white-space: nowrap;
 +
    max-width: 220px;
 +
    overflow: hidden;
 +
    display: block;
 +
    opacity: 0;
 +
    width: 0;
 +
    cursor: pointer;
 +
}
 +
#fp-nav ul li:hover .fp-tooltip,
 +
#fp-nav.fp-show-active a.active + .fp-tooltip {
 +
    -webkit-transition: opacity 0.2s ease-in;
 +
    transition: opacity 0.2s ease-in;
 +
    width: auto;
 +
    opacity: 1;
 +
}
 +
#fp-nav ul li .fp-tooltip.fp-right {
 +
    right: 20px;
 +
}
 +
#fp-nav ul li .fp-tooltip.fp-left {
 +
    left: 20px;
 +
}
 +
.fp-auto-height.fp-section,
 +
.fp-auto-height .fp-slide,
 +
.fp-auto-height .fp-tableCell{
 +
    height: auto !important;
 +
}
 +
 +
.fp-responsive .fp-auto-height-responsive.fp-section,
 +
.fp-responsive .fp-auto-height-responsive .fp-slide,
 +
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
 +
    height: auto !important;
 +
}
 +
 +
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
 +
form,fieldset,input,textarea,p,blockquote,th,td {
 +
    padding: 0;
 +
    margin: 0;
 +
}
 +
a{
 +
text-decoration:none;
 +
}
 +
table {
 +
    border-spacing: 0;
 +
}
 +
fieldset,img {
 +
    border: 0;
 +
}
 +
address,caption,cite,code,dfn,em,strong,th,var {
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 +
strong{
 +
font-weight: bold;
 +
}
 +
ol,ul {
 +
    list-style: none;
 +
    margin:0;
 +
    padding:0;
 +
}
 +
caption,th {
 +
    text-align: left;
 +
 +
}
 +
h1,h2,h3,h4,h5,h6 {
 +
    font-weight: normal;
 +
    font-size: 100%;
 +
    margin:0;
 +
    padding:0;
 +
    color:#444;
 +
    font-family: 'CCUfontsBold', Arial, sans-serif;
 +
}
 +
q:before,q:after {
 +
    content:'';
 +
}
 +
abbr,acronym { border: 0;
 +
}
 +
 +
 +
/* Custom CSS
 +
* --------------------------------------- */
 +
body{
 +
font-family: 'CCUfontsBold', Arial, sans-serif;
 +
}
 +
 +
 +
 +
#menu li {
 +
display:inline-block;
 +
margin: 10px;
 +
color: #000;
 +
background:#fff;
 +
background: rgba(255,255,255, 0.5);
 +
-webkit-border-radius: 10px;
 +
            border-radius: 10px;
 +
}
 +
#menu li.active{
 +
background:#666;
 +
background: rgba(0,0,0, 0.5);
 +
color: #fff;
 +
}
 +
#menu li a{
 +
text-decoration:none;
 +
color: #000;
 +
}
 +
#menu li.active a:hover{
 +
color: #000;
 +
}
 +
#menu li:hover{
 +
background: rgba(255,255,255, 0.8);
 +
}
 +
#menu li a,
 +
#menu li.active a{
 +
padding: 9px 18px;
 +
display:block;
 +
}
 +
#menu li.active a{
 +
color: #fff;
 +
}
 +
#menu{
 +
position: fixed;
 +
        margin-top: 50%;
 +
height: 40px;
 +
z-index: 70;
 +
width: auto;
 +
}
 +
#homelogo {
 +
        height: inherit;
 +
        width: inherit;
 +
z-index: 10;
 +
}
 +
 +
 +
.scroll-down {
 +
  background: none;
 +
  position: absolute;
 +
  transition: all .5s ease-in 3s;
 +
  margin-top: 85vh;
 +
  left: 50%;
 +
  margin-left: -24px;
 +
  z-index: 3;
 +
  -webkit-transition: all .5s ease-in 3s;
 +
  -webkit-animation: bounce 2s infinite 2s;
 +
  animation: bounce 2s infinite 2s;
 +
  -webkit-transition: all .2s ease-in;
 +
  transition: all .2s ease-in;
 +
}
 +
 +
.scroll-down img:hover {
 +
  opacity: .5;
 +
}
 +
 +
/*.a {
 +
  background: transparent;
 +
}*/
 +
 +
.scroll-down: before {
 +
   
 +
position: absolute;
 +
   
 +
top: calc(50% - 8px);
 +
   
 +
left: calc(50% - 6px);
 +
   
 +
transform: rotate(-45deg);
 +
   
 +
display: block;
 +
   
 +
width: 12px;
 +
   
 +
height: 12px;
 +
   
 +
content: "";
 +
   
 +
border: 2px solid white;
 +
   
 +
border-width: 0px 0 2px 2px;
 +
 +
}
 +
 +
@keyframes bounce {
 +
 
 +
0%,
 +
 
 +
100%,
 +
 
 +
20%,
 +
 
 +
50%,
 +
 
 +
80% {
 +
   
 +
  -webkit-transform: translateY(0);
 +
   
 +
  -ms-transform: translateY(0);
 +
   
 +
  transform: translateY(0);
 +
 +
}
 +
 +
 +
40% {
 +
   
 +
-webkit-transform: translateY(-10px);
 +
   
 +
-ms-transform: translateY(-10px);
 +
   
 +
transform: translateY(-10px);
 +
 
 +
}
 +
 
 +
60% {
 +
   
 +
-webkit-transform: translateY(-5px);
 +
   
 +
-ms-transform: translateY(-5px);
 +
   
 +
transform: translateY(-5px);
 +
 
 +
}
 +
 +
}
 +
 +
/* INTRO-Slide1
 +
* --------------------------------------- */
 +
#slide1 {
 +
        z-index: 70;
 +
}
 +
 +
 +
#INback1 {
 +
        height: 100%;
 +
        width: auto;
 +
        z-index: 70;
 +
}
 +
 +
 +
#section2 .intro {
 +
        z-index: 70;
 +
        position: absolute;
 +
        top: 10%;
 +
        bottom: 70%;
 +
        width: inherit;
 +
        margin-left: 2vw
 +
}
 +
 +
#slide1 .intro {
 +
        z-index: 70;
 +
        position: absolute;
 +
        top: 10%;
 +
        bottom: 70%;
 +
        width: inherit;
 +
}
 +
 +
 +
#slide1introh2 {
 +
      font-size: 4vh!important;
 +
      position: absolute;
 +
      margin-left: 45vw;
 +
      text-align: center!important;
 +
      font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      width: 10%!important;
 +
      color: white;
 +
      top: 32%;
 +
}
 +
 +
 +
 +
#slide4intro {
 +
          text-align: center;
 +
          z-index: 100;
 +
}
 +
 +
/* INTRO-Slide2
 +
* --------------------------------------- */
 +
#slide2 {
 +
        z-index: -1;
 +
}
 +
 +
#INback2 {
 +
        height: 100%;
 +
        width: auto;
 +
        z-index: -1;
 +
}
 +
 +
#slide3intro {
 +
      font-size: 4vh!important;
 +
      position: absolute;
 +
      margin-left: 57vw;
 +
      text-align: center!important;
 +
      font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      width: 8%!important;
 +
      color: white;
 +
      top: 23%;
 +
}
 +
 +
#orange {
 +
      font-size: 5.8vh!important;
 +
}
 +
/* INTRO-Slide3
 +
* --------------------------------------- */
 +
 +
#INback3 {
 +
        height: auto;
 +
        width: 100%;
 +
        align: bottom;
 +
}
 +
 +
 +
#slide4intro {
 +
      font-size: 4vh!important;
 +
      position: absolute;
 +
      margin-left: 54vw;
 +
      text-align: center!important;
 +
      font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      width: 10%!important;
 +
      color: black;
 +
      top: 20%;
 +
}
 +
 +
 +
/* INTRO-Slide4
 +
* --------------------------------------- */
 +
#INback4 {
 +
        height: 100%;
 +
        width: auto;
 +
}
 +
 +
 +
#slide5intro {
 +
      font-size: 5vh!important;
 +
      position: absolute;
 +
      margin-left: 12vw;
 +
      text-align: center!important;
 +
      font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      width: 15%!important;
 +
      color: white;
 +
      top: 15%;
 +
}
 +
 +
/* INTRO-Slide5
 +
* --------------------------------------- */
 +
 +
#INback5 {
 +
        height: 100%;
 +
        width: auto;
 +
}
 +
 +
 +
#slide6intro {
 +
      font-size: 4vh!important;
 +
      position: absolute;
 +
      margin-left: 13vw;
 +
      text-align: center!important;
 +
      font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      width: 20%!important;
 +
      color: white;
 +
      top: 18%;
 +
}
 +
 +
#maincup {
 +
        height: auto;
 +
        width: 29vw;
 +
        position: absolute;
 +
        top: 39%;
 +
        margin-left: 37vw;
 +
}
 +
 +
/* ABSTRACT
 +
* --------------------------------------- */
 +
h1 {
 +
font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
        font-size: 7vw!important;
 +
        line-height: normal!important;
 +
}
 +
 +
#section2container {
 +
      margin-top: 120px;
 +
}
 +
 +
.box3 {
 +
      height: auto;
 +
      width: 13vw;
 +
      position: absolute;
 +
      left: 66vw;
 +
      margin-top: 20vh;
 +
}
 +
 +
#abhalf {
 +
      width: 100%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
}
 +
 +
.box2 {
 +
      height: auto;
 +
      width: 13vw;
 +
      position: inherit;
 +
      left: 52vw;
 +
      margin-top: 38vh;
 +
}
 +
 +
#abwa {
 +
      width: 100%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
}
 +
 +
.box1 {
 +
      height: auto;
 +
      width: 13vw;
 +
      position: inherit;
 +
      left: 80vw;
 +
      margin-top: 38vh;
 +
}
 +
 +
#abhe {
 +
      width: 100%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
}
 +
 +
.box {
 +
      height: auto;
 +
      width: 12vw;
 +
      position: inherit;
 +
      left: 66.5vw;
 +
      margin-top: -12vh;
 +
}
 +
 +
#abde {
 +
      width: 100%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
}
 +
 +
 +
#abp {
 +
      font-size: 3.5vh!important;
 +
      position: absolute;
 +
      margin-left: 1vw;
 +
      text-align: center!important;
 +
      font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      width: 40%!important;
 +
      margin-top: 5.5vh;
 +
 +
}
 +
 +
/* ABSTRACT-DECOMPOSE
 +
* --------------------------------------- */
 +
 +
.box:hover #abde {
 +
          -webkit-transform: scale3d(1.2, 1.2, 1);
 +
          transform: scale3d(1.2, 1.2, 1);
 +
}
 +
 +
 +
.tooltip {
 +
  display: block;
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
 +
.overlay {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  transition: .5s ease;
 +
}
 +
 +
.box:hover .overlay {
 +
          opacity: 1;
 +
          -webkit-transform: scale3d(1.2, 1.2, 1);
 +
          transform: scale3d(1.2, 1.2, 1);
 +
}
 +
 +
.text {
 +
  height: auto;
 +
  width: 12vw;
 +
  color: white;
 +
  font-size: 20px;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  -webkit-transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%);
 +
  transform: translate(-50%, -50%);
 +
  text-align: center;
 +
}
 +
 +
.changeimage {
 +
  height: 100%;
 +
  width: 100%;
 +
}
 +
 +
/* ABSTRACT-HEAT-RESISTANT
 +
* --------------------------------------- */
 +
 +
.box1:hover #abhe {
 +
          -webkit-transform: scale3d(1.2, 1.2, 1);
 +
          transform: scale3d(1.2, 1.2, 1);
 +
}
 +
 +
 +
.tooltip1 {
 +
  display: block;
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
 +
.overlay1 {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  transition: .5s ease;
 +
}
 +
 +
.box1:hover .overlay1 {
 +
          opacity: 1;
 +
          -webkit-transform: scale3d(1.3, 1.3, 1);
 +
          transform: scale3d(1.3, 1.3, 1);
 +
}
 +
 +
.text1 {
 +
  height: auto;
 +
  width: 12vw;
 +
  color: white;
 +
  font-size: 20px;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  -webkit-transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%);
 +
  transform: translate(-50%, -50%);
 +
  text-align: center;
 +
}
 +
 +
.changeimage1 {
 +
  height: 100%;
 +
  width: 100%;
 +
}
 +
 +
/* ABSTRACT-WATERPROOF
 +
* --------------------------------------- */
 +
 +
.box2:hover #abhe {
 +
          -webkit-transform: scale3d(1.2, 1.2, 1);
 +
          transform: scale3d(1.2, 1.2, 1);
 +
}
 +
 +
 +
.tooltip2 {
 +
  display: block;
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
 +
.overlay2 {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  transition: .5s ease;
 +
}
 +
 +
.box2:hover .overlay2 {
 +
          opacity: 1;
 +
          -webkit-transform: scale3d(1.3, 1.3, 1);
 +
          transform: scale3d(1.3, 1.3, 1);
 +
}
 +
 +
.text2 {
 +
  height: auto;
 +
  width: 12vw;
 +
  color: white;
 +
  font-size: 20px;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  -webkit-transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%);
 +
  transform: translate(-50%, -50%);
 +
  text-align: center;
 +
}
 +
 +
.changeimage2 {
 +
  height: 100%;
 +
  width: 100%;
 +
}
 +
 +
/* ABSTRACT-CUP
 +
* --------------------------------------- */
 +
 +
.box3:hover #abhalf {
 +
          -webkit-transform: scale3d(1.1, 1.1, 1);
 +
          transform: scale3d(1.1, 1.1, 1);
 +
}
 +
 +
 +
.tooltip3 {
 +
  display: block;
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
 +
.overlay3 {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  transition: .5s ease;
 +
}
 +
 +
.box3:hover .overlay3 {
 +
          opacity: 1;
 +
          -webkit-transform: scale3d(1.3, 1.3, 1);
 +
          transform: scale3d(1.3, 1.3, 1);
 +
}
 +
 +
.text3 {
 +
  height: auto;
 +
  width: 12vw;
 +
  color: white;
 +
  font-size: 20px;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  -webkit-transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%);
 +
  transform: translate(-50%, -50%);
 +
  text-align: center;
 +
}
 +
 +
.changeimage3 {
 +
  height: 100%;
 +
  width: 100%;
 +
  margin-top: 6%;
 +
  margin-left: 0.5%;
 +
}
 +
 +
#ABback {
 +
  height: 100%;
 +
}
 +
 +
/* ABSTRACT-second page
 +
* --------------------------------------- */
 +
 +
#section3 .intro {
 +
      position:  absolute;
 +
      height: 100%;
 +
      width: 100%;
 +
      padding: auto;
 +
      margin: auto;
 +
 +
}
 +
 +
 +
#ABback2 {
 +
  height: 100%;
 +
}
 +
 +
#abp2 {
 +
      font-size: 3.5vh!important;
 +
      position: absolute;
 +
      margin-left: 60vw;
 +
      text-align: center!important;
 +
      font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      width: 35vw!important;
 +
      margin-top: -80vh;
 +
      z-index: 70;
 +
}
 +
 +
 +
.popup {
 +
    position: absolute;
 +
    z-index: 70;
 +
    width: 20vw;
 +
    height: 30vh;
 +
    margin-left: 140px;
 +
    margin-top: -120px;
 +
    -webkit-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
}
 +
 +
 +
 +
#wood {
 +
      width: auto;
 +
      height: 40%;
 +
      position: absolute;
 +
      z-index: 80;
 +
      margin-left: 20px;
 +
}
 +
 +
.monos {
 +
        position: absolute;
 +
        width: 100%;
 +
        height: auto;
 +
        z-index: 80;
 +
 +
}
 +
.monopic {
 +
        position: absolute;
 +
        width: 120%;
 +
        height: auto;
 +
        z-index: 80;
 +
        margin-left: -60px;
 +
        margin-top: -15vw;
 +
}
 +
 +
/* The actual popup */
 +
.popup .popuptext {
 +
    visibility: hidden;
 +
    width: 200%;
 +
    height: 200%;
 +
    position: absolute;
 +
    z-index: 70;
 +
    bottom: 18px;
 +
}
 +
 +
/* Popup arrow */
 +
.popup .popuptext::after {
 +
    content: "";
 +
    position: absolute;
 +
    margin-right: 10px;
 +
    top: 70%;
 +
    z-index: 50;
 +
}
 +
 +
/* Toggle this class - hide and show the popup */
 +
.popup .show {
 +
    visibility: visible;
 +
    -webkit-animation: fadeIn 1s;
 +
    animation: fadeIn 1s;
 +
    z-index: 70;
 +
}
 +
 +
/* Add animation (fade in the popup) */
 +
@-webkit-keyframes fadeIn {
 +
    from {opacity: 0;}
 +
    to {opacity: 1;}
 +
}
 +
 +
@keyframes fadeIn {
 +
    from {opacity: 0;}
 +
    to {opacity:1 ;}
 +
}
 +
 +
#clickme {
 +
      position: absolute;
 +
      height: auto;
 +
      width: 10vw;
 +
      margin-top: -100px;
 +
      margin-left: 10vw;
 +
      z-index: 99;
 +
}
 +
 +
/* ABSTRACT-final page
 +
* --------------------------------------- */
 +
 +
#ABback3 {
 +
  height: 100%;
 +
}
 +
 +
#section4 .intro {
 +
      position:  absolute;
 +
      height: 100%;
 +
      width: 100%;
 +
      padding: auto;
 +
      margin: auto;
 +
 +
}
 +
 +
#abp3 {
 +
      font-size: 3vh!important;
 +
      position: absolute;
 +
      margin-left: 5vw;
 +
      text-align: center!important;
 +
      font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      width: 40%!important;
 +
      top: 15%;
 +
      z-index: 80;
 +
}
 +
 +
.footer {
 +
    height: 110px;
 +
    background-color: #333F50;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
}
 +
 +
 +
#BSlogo {
 +
        position: absolute;
 +
        width: 6%;
 +
        height: auto;
 +
        margin-left: 150px;
 +
        margin-top: 4px;
 +
}
 +
 +
#CCUlogo {
 +
        position: absolute;
 +
        width: 6%;
 +
        height: auto;
 +
        margin-left: 275px;
 +
        margin-top: 10px;
 +
}
 +
 +
#CCUTEAMlogo {
 +
        position: absolute;
 +
        width: 6%;
 +
        height: auto;
 +
        margin-left: 430px;
 +
        margin-top: 10px;
 +
}
 +
 +
 +
#CCUFBlogo {
 +
        position: absolute;
 +
        width: 6%;
 +
        height: auto;
 +
        top: 82%;
 +
        margin-left: 26vw;
 +
        z-index: 90;
 +
}
 +
 +
#CCUPHlogo {
 +
        position: absolute;
 +
        width: 6%;
 +
        height: auto;
 +
        top: 83%;
 +
        margin-left: 26vw;
 +
        z-index: 90;
 +
}
 +
 +
#CCUMLlogo {
 +
        position: absolute;
 +
        width: 6%;
 +
        height: auto;
 +
        top: 83%;
 +
        margin-left: 26vw;
 +
        z-index: 90;
 +
}
 +
 +
#startvideo {
 +
        vertical-align: top;
 +
        width: 100vw;
 +
        height: auto;
 +
        margin: 0 auto;
 +
}
 +
 +
 +
#pagination {
 +
  position: fixed;
 +
  top: 300px;
 +
  transform: translateY(-50%);
 +
  right: 30px;
 +
  list-style: none;
 +
 +
}
 +
 +
#pagination  li {
 +
    position: relative;
 +
    margin: 20px 0;
 +
    background: #24221F;
 +
    border-radius: 100% ;
 +
    width: 8px;
 +
    height: 8px;
 +
    transition: all .2s ease;
 +
 +
    &:hover {
 +
      transform: scale(1.5);
 +
    }
 +
  }
 +
 +
#pagination  a {
 +
    position: absolute;
 +
    text-decoration: none; 
 +
    left: 0;
 +
    top: 0;
 +
    color: inherit;
 +
    width: 100%;
 +
    height: 100%;
 +
  }
 +
}
 +
 
body {
 
body {
−
     background: #000000;
+
  @for $i from 0 to 6 {
 +
    &.section-#{$i} {
 +
      #pagination li:nth-of-type(#{$i}) {
 +
        @extend %active-dot;
 +
      }
 +
    }
 +
  }
 +
}
 +
 
 +
 
 +
#pagination ul li a span {
 +
     background: #24221F;
 +
    width: 8px;
 +
    height: 8px;
 +
    margin: -4px 0 0 -4px;
 +
}
 +
     
 +
#pagination ul li a.active span,
 +
#pagination li:hover a.active span {
 +
    width: 16px;
 +
    height: 16px;
 +
    margin: -8px 0 0 -8px;
 +
    background:#24221F;
 +
    box-sizing: border-box;
 +
    border: 1px solid #24221F;
 +
}
 +
 
 +
%active-dot {
 +
  transform: scale(2);
 +
}
 +
 
 +
.wrap {
 +
  width: 100vw;
 +
  height: auto;
 
}
 
}
 +
 +
</style>
 +
</html>

Latest revision as of 09:05, 1 December 2018