Difference between revisions of "Template:CCU Taiwan/css"

(Undo revision 495767 by Herboku (talk))
 
Line 44: Line 44:
 
/*DEFAULT WIKI SETTINGS ENDS HERE*/
 
/*DEFAULT WIKI SETTINGS ENDS HERE*/
  
−
body{
+
@font-face {
−
padding:0;
+
    font-family: 'CCUfontsBold';
−
margin:0;
+
    src: url('https://static.igem.org/mediawiki/2018/c/c2/T--CCU_Taiwan--CCUfontsBold.eot') ;
−
    background:#FFFFFF;
+
    src: url('https://static.igem.org/mediawiki/2018/4/42/T--CCU_Taiwan--CCUfontsBold.ttf') format('truetype'),
−
    font-family:'Proxima Nova Soft', 'Helvetica Neue', sans-serif;
+
          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_menu_14 {
 +
    border-bottom:0!important;
 +
}
 +
 +
#content {
 +
  margin-top: 0px!important;
 +
  height: 100%!important;
 +
}
 +
 +
body {
 +
    margin: 0!important;
 +
    padding: 0!important;
 +
    width: 100%;
 +
}
 +
 +
ul {
 +
    list-style-image: url('https://static.igem.org/mediawiki/2018/c/ce/T--CCU_Taiwan--CCUbullet.png');
 +
}
 +
 +
.photointerlab {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/a/ab/T--CCU_Taiwan--CCUInterlabphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.phototeam {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/5/50/T--CCU_Taiwan--CCUteamphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.photoachievements {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/d/dc/T--CCU_Taiwan--CCUphotoachievements.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.photoAttributions {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/c/c9/T--CCU_Taiwan--CCUteam2photo.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.photomedal {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/4/43/T--CCU_Taiwan--CCUmedalphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.photoDescription {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/9/99/T--CCU_Taiwan--CCUDescriptionphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.photoDesign {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/4/42/T--CCU_Taiwan--CCUDesignphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoResult {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/4/4f/T--CCU_Taiwan--CCUResultphoto.png");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.photoDemonstration {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/b/b2/T--CCU_Taiwan--CCUDemonstrationphoto1.png");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoModeling {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/6/66/T--CCU_Taiwan--CCUModelingphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoHumanPractices {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/c/c2/T--CCU_Taiwan--CCUphotoHumanPractices.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoPublic {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/f/f1/T--CCU_Taiwan--CCUphotoPublic.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoEntrepreneurship {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/0/01/T--CCU_Taiwan--CCUphotoEntrepreneurship.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoIntergrate {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/4/47/T--CCU_Taiwan--CCUphotoIntergrate.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoBasicPart {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/0/06/T--CCU_Taiwan--CCUBasicPartphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoComposite {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/2/24/T--CCU_Taiwan--CCUCompositephoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoBinding {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/5/56/T--CCU_Taiwan--CCUBindingphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoNotebook {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/6/66/T--CCU_Taiwan--CCUNotebookphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoProtocols {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/b/bc/T--CCU_Taiwan--CCUProtocolsphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoCollaborations {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/0/09/T--CCU_Taiwan--CCUCollaborationsphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoDryLab {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/5/51/T--CCU_Taiwan--CCUDryLabphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoMaterials {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/7/73/T--CCU_Taiwan--CCUMaterialsphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoEngagingExperts {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/9/9e/T--CCU_Taiwan--CCUEngagingExpertsphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoSafety {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/d/dd/T--CCU_Taiwan--CCUSafetyphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoLine {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/9/92/T--CCU_Taiwan--CCUEngineeringphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
.photoPolymer {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/f/fd/T--CCU_Taiwan--CCUPolymerphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.photoParts {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/6/69/T--CCU_Taiwan--CCUPartsphoto.png");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.photoExperiments {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/7/74/T--CCU_Taiwan--CCUExperimentsphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
 +
.backgroundAboutUs {
 +
width:100%;
 +
height: 100%;
 +
background-color:#55c97e;
 +
font: inherit!important;
 +
text-decoration-color:#55c97e;
 +
}
 +
 +
 +
 +
.backgroundProject {
 +
width:100%;
 +
height: 100%;
 +
background-color:#74cf7e;
 +
font: inherit!important;
 +
text-decoration-color:#74cf7e;
 +
}
 +
 +
.backgroundParts {
 +
width:100%;
 +
height: 100%;
 +
background-color:#92cd7e;
 +
font: inherit!important;
 +
text-decoration-color:#92cd7e;
 +
}
 +
 +
.backgroundModeling {
 +
width:100%;
 +
height: 100%;
 +
background-color:#a6ca7e;
 +
font: inherit!important;
 +
text-decoration-color:#c8a77e;
 +
}
 +
 +
.backgroundDrylab {
 +
width:100%;
 +
height: 100%;
 +
background-color:#bec37e; 
 +
font: inherit!important;
 +
text-decoration-color:#bec37e; 
 +
}
 +
 +
.backgroundHP {
 +
width:100%;
 +
height: 100%;
 +
background-color:#d1c17e; 
 +
font: inherit!important;
 +
text-decoration-color:#d1c17e;
 +
}
 +
 +
.backgroundNotebook {
 +
width:100%;
 +
height: 100%;
 +
background-color:#d1ad7e;
 +
font: inherit!important;
 +
text-decoration-color:#d1ad7e;
 +
}
 +
  
 
header{
 
header{
 
margin:0 auto;
 
margin:0 auto;
−
}
+
top:1.5vh;
−
/*.container {
+
width:100%;
 
position: fixed;
 
position: fixed;
−
width: 100%;
+
z-index:6;
−
margin-top: 0;
+
}
−
background: #000000;
+
 
−
height: 55px;
+
header a {
−
z-index:3;
+
text-decoration:none!important;
−
}*/
+
}
 +
 
 
nav {
 
nav {
−
    margin:0;
+
  margin:0;
 
padding:0;
 
padding:0;
 
height:7vh;
 
height:7vh;
 
width: 100%;
 
width: 100%;
−
background: #F96784;
+
        box-shadow:0px 4px 6px 0px #7D7D7C;
 +
       
 +
}
 +
.front {
 +
z-index:7;
 
}
 
}
 
.title {
 
.title {
Line 74: Line 426:
 
position: relative;
 
position: relative;
 
padding-top:10px;
 
padding-top:10px;
−
left:-3vw;
+
left:4vw;
 
width: 13.5vw;
 
width: 13.5vw;
−
height: 6.5vh;
+
height: 5.8vh;
 
text-align:center;
 
text-align:center;
 
margin-left:0vw;
 
margin-left:0vw;
 
margin-right:0vw;
 
margin-right:0vw;
 
list-style-type: none;
 
list-style-type: none;
 +
font-size: 18px!important;
 +
color: #F8F8FF;
 +
line-height:25px;
 
}
 
}
 +
#home_button{
 +
position:absolute;
 +
left:0vw;
 +
width:5.5vw;
 +
height:7vh;
 +
text-align:center;
 +
z-index:6;
 +
background:#31a97e;
 +
}
 +
#home_button img {
 +
height:4.5vh!important;
 +
width:2vw;
 +
margin-top:1.2vh;
 +
}
 +
 +
.img_title {
 +
height:4vh;
 +
padding-right: 1vw;
 +
}
 +
 +
#judge {
 +
margin-left:30vw;
 +
list-style-image:url("https://2018.igem.org/File:T--CCU_Taiwan--none.png");
 +
}
 +
 
.sub {
 
.sub {
 
display: none;
 
display: none;
 
position:absolute;
 
position:absolute;
 
text-align: center;
 
text-align: center;
−
top:6.5vh;
+
right:0vw;
−
width:100vw!important;
+
top:6.2vh;
 +
width:13.5vw!important;
 
height:40vh;
 
height:40vh;
 
margin: 0 auto;
 
margin: 0 auto;
 
padding:0;
 
padding:0;
 +
z-index:9!important;
 +
box-shadow:3px 3px 3px 0px #7D7D7C;
 
}
 
}
−
#sub_home {
+
 
−
background:#FFB3FF;
+
#sub_home{
 +
height:40.5vh;
 +
        background:#55c97e;
 
}
 
}
−
.list {
+
 
−
float:none;  
+
#sub_project{
−
left: 7vw;
+
height:40.5vh;
−
top: 10vh;
+
        background:#74cf7e;
−
height: 5vh;
+
}
−
width: 8vw;
+
 
 +
#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;
 
display:block!important;
 +
border-top-style:solid;
 +
border-top-width:1px;
 +
border-top-color: #F8F8FF;
 
}
 
}
−
.list a {
+
.sub a {
 
font-size:15px;
 
font-size:15px;
 +
line-height:8vh;
 
}
 
}
 
nav a {
 
nav a {
−
   color:black!important;
+
   color:#fcfcfc;
−
   font-family: monospace;
+
   font-family: 'CCUfontsBold', Arial, sans-serif;
 
   font-size: 1.5vw;
 
   font-size: 1.5vw;
−
  text-decoration:none;
 
 
}
 
}
 
.title:hover {
 
.title:hover {
−
background-color:#F5F5F5;
+
background-color:#36BF36;
 
transition: 500ms;
 
transition: 500ms;
 +
border-radius: 3px;
 
}
 
}
  
−
.content {
+
.list {
−
  margin-top:0;
+
    -webkit-animation: fadein 2s;
−
  width: 80%;
+
−
  margin-left:150px;
+
−
  background: black;
+
−
  z-index: -2;
+
−
  padding-bottom: 150px;
+
−
  position: relative;
+
 
}
 
}
 +
.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);
 +
}
 +
 +
 +
.indicator {
 +
z-index:1;
 +
position: fixed;
 +
top:18vh;
 +
font-family: 'CCUfontsBold', Arial, sans-serif;
 +
        font-size: 18px;
 +
        display: none;
 +
}
 +
 +
.pointerAboutUs  {
 +
width:18vw;
 +
height:10vh;
 +
background:#55c97e;
 +
  -webkit-clip-path: inset(20% 0% 10% 0% round 0 80px 80px 0);
 +
  clip-path: inset(20% 0% 10% 0% round  0 80px 80px 0);
 +
transition: 500ms;
 +
        stroke: #282828;
 +
        stroke-width: 1px;
 +
        z-index:1;
 +
}
 +
 +
.pointerProject  {
 +
width:18vw;
 +
height:10vh;
 +
background:#74cf7e;
 +
  -webkit-clip-path: inset(20% 0% 10% 0% round 0 80px 80px 0);
 +
  clip-path: inset(20% 0% 10% 0% round  0 80px 80px 0);
 +
transition: 500ms;
 +
        stroke: #282828;
 +
        stroke-width: 1px;
 +
z-index:1;
 +
}
 +
 +
.pointerParts  {
 +
width:18vw;
 +
height:10vh;
 +
background:#92cd7e;
 +
  -webkit-clip-path: inset(20% 0% 10% 0% round 0 80px 80px 0);
 +
  clip-path: inset(20% 0% 10% 0% round  0 80px 80px 0);
 +
transition: 500ms;
 +
        stroke: #282828;
 +
        stroke-width: 1px;
 +
z-index:1;
 +
}
 +
 +
.pointerModeling  {
 +
width:18vw;
 +
height:10vh;
 +
background:#a6ca7e;
 +
  -webkit-clip-path: inset(20% 0% 10% 0% round 0 80px 80px 0);
 +
  clip-path: inset(20% 0% 10% 0% round  0 80px 80px 0);
 +
transition: 500ms;
 +
        stroke: #282828;
 +
        stroke-width: 1px;
 +
z-index:1;
 +
}
 +
 +
.pointerModeling1  {
 +
width:18vw;
 +
height:10vh;
 +
background:#a6ca7e;
 +
  -webkit-clip-path: inset(20% 0% 10% 0% round 0 80px 80px 0);
 +
  clip-path: inset(20% 0% 10% 0% round  0 80px 80px 0);
 +
transition: 500ms;
 +
        stroke: #282828;
 +
        stroke-width: 1px;
 +
z-index:1;
 +
}
 +
 +
.pointerDrylab  {
 +
width:18vw;
 +
height:10vh;
 +
background:#bec37e;
 +
  -webkit-clip-path: inset(20% 0% 10% 0% round 0 80px 80px 0);
 +
  clip-path: inset(20% 0% 10% 0% round  0 80px 80px 0);
 +
transition: 500ms;
 +
        stroke: #282828;
 +
        stroke-width: 1px;
 +
z-index:1;
 +
}
 +
 +
.pointerHP  {
 +
width:18vw;
 +
height:10vh;
 +
        background:#d1c17e!important;
 +
  -webkit-clip-path: inset(20% 0% 10% 0% round 0 80px 80px 0);
 +
  clip-path: inset(20% 0% 10% 0% round  0 80px 80px 0);
 +
transition: 500ms;
 +
        stroke: #282828;
 +
        stroke-width: 1px;
 +
z-index:1;
 +
}
 +
 +
 +
.pointerNotebook  {
 +
width:18vw;
 +
height:10vh;
 +
background:#d1ad7e;
 +
  -webkit-clip-path: inset(20% 0% 10% 0% round 0 80px 80px 0);
 +
  clip-path: inset(20% 0% 10% 0% round  0 80px 80px 0);
 +
transition: 500ms;
 +
        stroke: #282828;
 +
        stroke-width: 1px;
 +
z-index:1;
 +
}
 +
 +
.pointerAboutUs a {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
color:black;
 +
        position: relative;
 +
transition: 500ms;
 +
z-index:1;
 +
  text-decoration: none;
 +
}
 +
 +
.pointerAboutUs:hover {
 +
width:20vw;
 +
z-index:1;
 +
}
 +
 +
.pointerAboutUs a:hover {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
        letter-spacing: 5px;
 +
color:black;
 +
        position: relative;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
 +
.pointerProject a {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.2vw;
 +
color:black;
 +
        position: relative;
 +
transition: 500ms;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
.pointerProject:hover {
 +
width:20vw;
 +
z-index:1;
 +
}
 +
 +
.pointerProject a:hover {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.2vw;
 +
        letter-spacing: 1.5px;
 +
color:black;
 +
        position: relative;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
.pointerParts a {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
color:black;
 +
        position: relative;
 +
transition: 500ms;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
.pointerParts:hover {
 +
width:20vw;
 +
z-index:1;
 +
}
 +
 +
.pointerParts a:hover {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
        letter-spacing: 5px;
 +
color:black;
 +
        position: relative;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
.pointerModeling a {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
color:black;
 +
        position: relative;
 +
transition: 500ms;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
.pointerModeling1 a {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
color:black;
 +
        position: relative;
 +
transition: 500ms;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
.pointerModeling:hover {
 +
width:20vw;
 +
z-index:1;
 +
}
 +
 +
.pointerModeling1:hover {
 +
width:20vw;
 +
z-index:1;
 +
}
 +
 +
.pointerModeling a:hover {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
        letter-spacing: 5px;
 +
color:black;
 +
        position: relative;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
.pointerModeling1 a:hover {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
        letter-spacing: 2px;
 +
color:black;
 +
        position: relative;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
 +
 +
.pointerDrylab a {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
color:black;
 +
        position: relative;
 +
transition: 500ms;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
.pointerDrylab:hover {
 +
width:20vw;
 +
z-index:1;
 +
}
 +
.pointerDrylab a:hover {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
        letter-spacing: 5px;
 +
color:black;
 +
        position: relative;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
.pointerHP a {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
color:black;
 +
        position: relative;
 +
transition: 500ms;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
.pointerHP:hover {
 +
width:20vw;
 +
z-index:1;
 +
}
 +
.pointerHP a:hover {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
        letter-spacing: 3px;
 +
color:black;
 +
        position: relative;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
.indicator #pca a:hover {
 +
        letter-spacing: 1px!important;
 +
}
 +
 +
.indicator #nchu a:hover {
 +
        letter-spacing: 1px!important;
 +
}
 +
.pointerNotebook a {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
color:black;
 +
        position: relative;
 +
transition: 500ms;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
.pointerNotebook:hover {
 +
width:20vw;
 +
z-index:1;
 +
}
 +
.pointerNotebook a:hover {
 +
line-height:11vh;
 +
margin-left: 14px;
 +
font-size:1.5vw;
 +
        letter-spacing: 5px;
 +
color:black;
 +
        position: relative;
 +
z-index:1;
 +
text-decoration: none;
 +
}
 +
 +
.col-sm-3 {
 +
    position:relative;
 +
    min-height:1px;
 +
    padding-right:15px;
 +
    padding-left:15px
 +
}
 +
  
 
.first {
 
.first {
 
   font-size: 40px!important;
 
   font-size: 40px!important;
−
   font-family: "Arial Black", Gadget, sans-serif;
+
   color: #3D3D3D!important;
−
   color: #e5e5e5;
+
  z-index: 3;
 +
        font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
   text-decoration: underline;
 
}
 
}
 
.second {
 
.second {
−
   font-size: 25px!important;
+
   font-size: 28px!important;
−
   font-family: Arial, Helvetica, sans-serif;
+
   color: #3d3d3d!important;
−
  color: #f9f9f9;
+
        font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      text-decoration: none!important;
 
}
 
}
 
.description {
 
.description {
 
   font-size: 18px!important;
 
   font-size: 18px!important;
−
   font-family: Arial, Helvetica, sans-serif;
+
   color: #000;
−
  color: #F8F8FF;
+
font-family: 'CCUfontsBold', Arial, sans-serif;
 
}
 
}
−
#logo{
+
 
−
width: 100%;
+
.content {
−
position: relative;
+
        width:92vw;
−
z-index: -2;
+
        padding-left: 2vw;
−
margin:0;
+
        padding-right: 2vw;
−
height:100vh;
+
padding-top:5vh;
 +
        position: relative;
 +
        list-style-type:decimal;
 +
        box-sizing:border-box;
 +
z-index:0;
 +
        background-color: white;
 +
        height: 100%;
 
}
 
}
−
.interlab {
+
 
−
  background: black;
+
.content p {
−
   margin: 0 auto;
+
      padding-right: 2vw;
−
   padding-top:5vh;
+
      padding-left: 20vw;
−
  padding-left:10vw;
+
      color: #3D3D3D;
−
  padding-right:10vw;
+
      line-height: 1.6!important;
−
   padding-bottom:5vh;
+
      word-spacing: normal!important;
 +
}
 +
 
 +
.content li {
 +
      color: #3D3D3D;
 +
      line-height: 1.6!important;
 +
      font-size: 18px!important;
 +
      word-spacing: normal!important;
 +
      padding-right: 2vw;
 +
      margin-left: 20vw;
 +
}
 +
 
 +
.content a {
 +
padding-right: 2vw;
 +
      margin-left: 20vw;
 +
}
 +
 
 +
 
 +
.polaroid .container p {
 +
      color: #3D3D3D;
 +
      line-height: 1.6!important;
 +
      word-spacing: normal!important;
 +
      font-size: 14px!important;
 +
      font-weight: bold;
 +
      padding-left: 1vw!important;
 +
      text-align: inherit!important;
 +
}
 +
 
 +
 
 +
.IPli {
 +
font-size:15px!important;
 +
}
 +
 
 +
.footer {
 +
    height: 110px;
 +
    background-color: #333F50;
 +
   right: 0;
 +
   bottom: 0;
 +
  left: 0;
 +
    display: block;
 +
}
 +
 
 +
#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;
 +
}
 +
 
 +
#img_title {
 +
        position: absolute;
 +
        width: 60vw;
 +
        height: auto;
 +
}
 +
 
 +
@-webkit-keyframes fadein {
 +
    from { opacity: 0; }
 +
    to   { opacity: 1; }
 +
}
 +
 
 +
.polaroid {
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
   position: relative;
 
   position: relative;
−
   list-style-type:decimal;
+
   background-color: white;
−
   font-color:#F8F8FF;
+
  margin-left: 20vw;
 +
   margin-right: 2vw;
 
}
 
}
−
.title{
+
 
−
  font-size: 18px!important;
+
.polaroid img {
−
  font-family: 'proxima-nova', sans-serif;
+
    width: calc(100% - 20px);
−
  color: #F8F8FF;
+
    max-width: calc(100% - 20px);
−
  line-height:25px;
+
    max-height: 100%;
 +
    padding: 10px;
 +
    position: relative;
 
}
 
}
  
−
.InterLabcontent{
+
#Interlab1 {
−
   font-family: 'proxima-nova', sans-serif;
+
   width: calc(40% + 20px);
 +
  margin-left: 28vw!important;
 
}
 
}
−
.interlab li {
+
 
−
   color:white!important;
+
.polaroid .container {
−
   font-size: 15px!important;
+
    padding-left: 5px;
 +
    padding-bottom: 5px;
 +
    z-index: 1;
 +
}
 +
 
 +
#Interlab2 {
 +
  width: calc(60% + 20px);
 +
}
 +
 
 +
#Interlab3 {
 +
  width: calc(60% + 20px);
 +
}
 +
 
 +
#Interlab4-1 {
 +
  width: 35%;
 +
  float: left;
 +
}
 +
 
 +
#Interlab4-2 {
 +
  width: 36.5%;
 +
  display: inline-block;
 +
  margin-left: 6px;
 +
}
 +
 
 +
 
 +
#Interlab6-1 {
 +
  width: 35%;
 +
  float: left;
 +
}
 +
 
 +
#Interlab6-2 {
 +
  width: 36%;
 +
  display: inline-block;
 +
  margin-left: 10px;
 +
}
 +
 
 +
#Interlab8 {
 +
  width: calc(50% + 20px);
 +
  margin-left: 28vw!important;
 +
}
 +
 
 +
.second #ca1:before {
 +
  height: 50px;
 +
  display: block;
 +
}
 +
 
 +
.second #ca2:before {
 +
  height: 50px;
 +
  display: block;
 +
}
 +
 
 +
.second #ca3:before {
 +
  height: 50px;
 +
  display: block;
 +
}
 +
 
 +
.second #ca4:before {
 +
  height: 50px;
 +
  display: block;
 +
}
 +
 
 +
.second #ca5:before {
 +
  height: 50px;
 +
  display: block;
 +
}
 +
 
 +
#Judging li {
 +
font-family: 'CCUfontsBold', Arial, sans-serif;
 +
font-size: 30px!important;
 +
        margin-left: 0!important;
 +
}
 +
 
 +
ol .descriptions {
 +
        margin-left: 0!important;
 +
      color: #3D3D3D;
 +
      line-height: 1.6!important;
 +
      word-spacing: normal!important;
 +
}
 +
 
 +
#Demonstrate1 {
 +
   width: calc(60% + 20px);
 +
  margin-left: 25vw!important;
 +
}
 +
#Demonstrate1-2 {
 +
  width: 70%;
 +
  margin-left: 23vw;
 +
  display: inline-block;
 +
}
 +
#Demonstrate1-3 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Demonstrate1-4 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Demonstrate1-5 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
 
 +
.content .table {
 +
        margin-left: 20vw!important;
 +
font-size: 18px!important;
 +
        color: #3D3D3D;
 +
        line-height: 1.6!important;
 +
}
 +
 
 +
.parttable {
 +
        margin-left: 0!important;
 +
font-size: 18px!important;
 +
        color: #3D3D3D;
 +
        line-height: 1.6!important;
 +
        text-align: center;
 +
        font-weight: bold;
 +
        text-decoration-color:#92cd7e!important;
 +
}
 +
 
 +
.parttable a {
 +
        color: #92cd7e;
 +
}
 +
 
 +
.parttable th {
 +
      background:#92cd7e; 
 +
}
 +
 
 +
 
 +
.parttable a {
 +
        padding-left: 0!important;
 +
        margin-left: 0!important;
 +
        padding-right: 0!important;
 +
}
 +
 
 +
.parttable table {
 +
        margin-left: 5vw!important;
 +
        width: 80%;
 +
}
 +
 
 +
.table #swotstrong1  {
 +
        text-align: center;
 +
}
 +
.medal_bronze{
 +
width:80vw;
 +
height:20vh;
 +
position:relative;
 +
left:18vw;
 +
margin:0vh;
 +
background: -webkit-linear-gradient(#EE7700,#FFFFE0);
 +
background: -o-linear-gradient(#EE7700,#FFFFE0);
 +
background: -moz-linear-gradient(#EE7700,#FFFFE0);
 +
background: linear-gradient(#EE7700,#FFFFE0);
 +
-webkit-clip-path: polygon(75% 0%, 78% 53%, 75% 100%, 0% 100%, 3% 53%, 0% 0%);
 +
clip-path: polygon(75% 0%, 78% 53%, 75% 100%, 0% 100%, 3% 53%, 0% 0%);
 +
}
 +
.medal_bronze p {
 +
padding-top:2vh;
 +
padding-right:0;
 +
    padding-left:5vw;
 +
}
 +
 
 +
.medal_silver{
 +
width:80vw;
 +
height:20vh;
 +
position:relative;
 +
left:18vw;
 +
margin:0vh;
 +
background: -webkit-linear-gradient(#C0C0C0,#F8F8FF);
 +
background: -o-linear-gradient(#C0C0C0,#F8F8FF);
 +
background: -moz-linear-gradient(#C0C0C0,#F8F8FF);
 +
background: linear-gradient(#C0C0C0,#F8F8FF);
 +
-webkit-clip-path: polygon(75% 0%, 78% 53%, 75% 100%, 0% 100%, 3% 53%, 0% 0%);
 +
clip-path: polygon(75% 0%, 78% 53%, 75% 100%, 0% 100%, 3% 53%, 0% 0%);
 +
}
 +
.medal_silver p {
 +
padding-top:2vh;
 +
padding-right:0;
 +
    padding-left:5vw;
 +
}
 +
 
 +
.medal_gold{
 +
width:80vw;
 +
height:20vh;
 +
position:relative;
 +
left:18vw;
 +
margin:0vh;
 +
background: -webkit-linear-gradient(#FFD700,#FFFACD);
 +
background: -o-linear-gradient(#FFD700,#FFFACD);
 +
background: -moz-linear-gradient(#FFD700,#FFFACD);
 +
background: linear-gradient(#FFD700,#FFFACD);
 +
-webkit-clip-path: polygon(75% 0%, 78% 53%, 75% 100%, 0% 100%, 3% 53%, 0% 0%);
 +
clip-path: polygon(75% 0%, 78% 53%, 75% 100%, 0% 100%, 3% 53%, 0% 0%);
 +
}
 +
.medal_gold p {
 +
padding-top:2vh;
 +
padding-right:0;
 +
    padding-left:5vw;
 +
}
 +
 
 +
 
 +
.content .structuregraph {
 +
        width: 70%;
 +
        margin-left: 20vw;
 +
}
 +
 
 +
.structuregraph .transform {
 +
    position: absolute;
 +
    top: 5%;
 +
    left: 20px;
 +
    padding: 20px;
 +
    width: 60%;
 +
}
 +
 
 +
.structuregraph .Enzyme {
 +
    position: absolute;
 +
    top: 40%;
 +
    left: 75px;
 +
    padding: 20px;
 +
    width: 80%;
 +
}
 +
 
 +
.structuregraph .Polymer {
 +
    position: absolute;
 +
    top: 62%;
 +
    padding-left: 165px;
 +
    width: 50%;
 +
 
 +
}
 +
 
 +
.structuregraph .HP {
 +
    position: absolute;
 +
    top: 82%;
 +
    left: 75px;
 +
    padding: 20px;
 +
    width: 50%;
 +
}
 +
 
 +
 
 +
.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;
 +
}
 +
 
 +
 
 +
#Judging a {
 +
        margin-left: 0!important;
 +
}
 +
 
 +
.flip {margin-left:20vw; padding:5px; padding-left:3vw;padding-right:3vw;text-align:center;background:#d1c17e;cursor:pointer;font-family:'Arial'; width:60.1vw;}
 +
.panel {margin-left:20vw; padding:10px;padding-left:3vw;padding-right:3vw;background:#FFFACD;border:solid 1px #c3c3c3;display:none;font-family:'Arial'; width:60vw;}
 +
 
 +
 
 +
.st {
 +
  list-style-type:disc;
 +
}
 +
 
 +
.mdl {
 +
color:red!important;
 +
padding-left:4vw!important;
 +
margin-left:1vw!important;
 +
font-size:20px;
 +
}
 +
 
 +
.bigtitle {
 +
      position: absolute;
 +
      top: 360px;
 +
      margin-left : 25px;
 +
      font-size: 100px;
 +
      color: white;
 +
      opacity: 0.7;
 +
      overflow: visible!important;
 +
      font-family: 'CCUfontsBold', Arial, sans-serif!important
 +
}
 +
 
 +
#fb {
 +
        margin-left: 0!important;
 +
        margin-right: 0!important;
 +
        padding-right:0!important;
 +
}
 +
 
 +
#Design1 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
 
 +
#Design2 {
 +
  width: 50%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
#Design3 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
 
 +
 
 +
#Line1 {
 +
  width: 50%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
#Line2 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#Line3 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#Line4 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#Line5 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#Line6 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#Line7 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#Line8 {
 +
  width: 70%;
 +
  margin-left: 20VW;
 +
  display: inline-block;
 +
}
 +
 
 +
.row #halftext {
 +
  display: inline-block;
 +
  width: 50%;
 +
  vertical-align: top;
 +
}
 +
 
 +
.row #halftext2 {
 +
  display: inline-block;
 +
  width: 50%;
 +
  margin-left: 20vw;
 +
  vertical-align: top;
 +
}
 +
 
 +
.row #halftext3 {
 +
  display: inline-block;
 +
  width: 65%;
 +
  vertical-align: top;
 +
 
 +
}
 +
 
 +
#Analysis1 {
 +
  width: 40%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#Analysis2 {
 +
  width: 27%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
 
 +
#Analysis3 {
 +
  width: 28%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
 
 +
#Analysis4 {
 +
  width: 50%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#Analysis5 {
 +
  width: 38%;
 +
  margin-left: 16vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#Analysis6 {
 +
  width: 38%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
 
 +
#Analysis7 {
 +
  width: 38%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
#Analysis8 {
 +
  width: 50%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 
 +
.thecard p {
 +
   font-size: 13px;
 +
}
 +
 
 +
 
 +
.thecard1 p {
 +
  font-size: 13px;
 +
}
 +
 
 +
a:hover .card-outmore {
 +
  background: #2C3E50;
 +
  color: #fff;
 +
}
 +
 
 +
a:hover .thecard {
 +
  box-shadow: 0 10px 50px rgba(0,0,0,.6);
 +
}
 +
 
 +
a:hover .thecard1 {
 +
  box-shadow: 0 10px 50px rgba(0,0,0,.6);
 +
}
 +
 
 +
.thecard {
 +
  width: 300px;
 +
  margin-left: 20vw;
 +
  padding-bottom: 20px;
 +
  box-shadow: 0 1px 30px rgba(0,0,0,.4);
 +
  display: block;
 +
  background-color: #fff;
 +
  border-radius: 4px;
 +
  transition: 400ms ease;
 +
  display: inline-block;
 +
  align: top;
 +
}
 +
 
 +
.thecard1 {
 +
  width: 300px;
 +
  margin-left: 10px!important;
 +
  padding-bottom: 20px;
 +
  box-shadow: 0 1px 30px rgba(0,0,0,.4);
 +
  display: block;
 +
  background-color: #fff;
 +
  border-radius: 4px;
 +
  transition: 400ms ease;
 +
  display: inline-block;
 +
  align: top;
 +
}
 +
.card-img {
 +
  height: 225px;
 +
  text-align:center!important;
 +
    margin: 0 auto;
 +
}
 +
 
 +
.card-img img {
 +
  width:100%;
 +
  border-radius: 4px 4px 0px 0px;
 +
  text-align:center;
 +
  overflow: hidden!important;
 +
    margin: 0 auto;
 +
}
 +
 
 +
.card-caption {
 +
  position: relative;
 +
  background: #ffffff;
 +
  padding: 15px 25px 5px 25px;
 +
  border-radius: 0px 0px 4px 4px;
 +
}
 +
 
 +
.card-outmore {
 +
  padding: 10px 25px 10px 25px;
 +
  border-radius: 0px 0px 4px 4px;
 +
  border-top: 1px solid #e0e0e0;
 +
  background: #efefef;
 +
  color: #222;
 +
  display: inline-table;
 +
  width: 100%;
 +
  box-sizing: border-box;
 +
  transition: 400ms ease;
 +
}
 +
.card-outmore h5 {
 +
  float: left;
 +
}
 +
.card-outmore i {
 +
  float: right;
 +
}
 +
 
 +
.thecard span.date {
 +
  font-size: 10px;
 +
}
 +
 
 +
.thecard h1 {
 +
  font-size: 22px;
 +
}
 +
 
 +
.thecard h5 {
 +
  margin:0;
 +
}
 +
 
 +
 
 +
.thecard1 span.date {
 +
  font-size: 10px;
 +
}
 +
 
 +
.thecard1 h1 {
 +
  font-size: 22px;
 +
}
 +
 
 +
.thecard1 h5 {
 +
  margin:0;
 +
}
 +
 
 +
#like-btn {
 +
  font-size: 18px;
 +
  background: #446CB3;
 +
  color: #fff;
 +
  padding: 13px 15px;
 +
  border-radius: 50em;
 +
  position: absolute;
 +
  right: 20px;
 +
  top: -22px;
 +
  box-shadow: 0 2px 1px rgba(0,0,0,.2);
 +
  transition: 400ms ease;
 +
        font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
}
 +
 
 +
#like-btn:hover {
 +
  font-size: 18px;
 +
  background: #3B5998;
 +
  color: #fff;
 +
  padding: 13px 15px;
 +
  border-radius: 50em;
 +
  position: absolute;
 +
  right: 20px;
 +
  top: -22px;
 +
  box-shadow: 0 4px 5px rgba(0,0,0,.3);
 +
}
 +
 
 +
#outmore-icon {
 +
  border:1px solid ;
 +
  padding: 1px 6px;
 +
  border-radius: 50em;
 +
}
 +
 
 +
.thecard .card {
 +
    margin-left: 0!important;
 +
    padding-left: 0!important;
 +
    text-align: left!important;
 +
}
 +
 
 +
.thecard .second {
 +
    margin-left: 0!important;
 +
    padding-left: 0!important;
 +
    text-align: left!important;
 +
}
 +
 
 +
.thecard .description {
 +
    margin-left: 0!important;
 +
    padding-left: 0!important;
 +
    text-align: left!important;
 +
}
 +
 
 +
.thecard1 .description {
 +
    margin-left: 0!important;
 +
    padding-left: 0!important;
 +
    text-align: left!important;
 +
}
 +
 
 +
.thecard1 .card {
 +
    margin-left: 0!important;
 +
    padding-left: 0!important;
 +
    text-align: left!important;
 +
}
 +
.row .thecard {
 +
  vertical-align: top;
 +
}
 +
 
 +
.row .thecard1 {
 +
  vertical-align: top;
 +
}
 +
 
 +
#arrow1 {
 +
position: absolute;
 +
        z-index: 70;
 +
        width: 69%;
 +
        margin-left: 17vw;
 +
        margin-top: 15vh;
 +
}
 +
 
 +
.container1{
 +
background:#eee;
 +
width:60%;
 +
    margin-left: 20vw;
 +
}
 +
.articles{
 +
  display:flex;
 +
  overflow:hidden;
 +
  flex-wrap:wrap;
 +
  align-items:stretch;
 +
}
 +
.articleShort{
 +
  display:flex;
 +
  //flex: 0 1 50%; //controll the width, default 1 1 0%
 +
  flex:1 1 0%; //really buggy in safari IOS
 +
 
 +
}
 +
.articleMain{
 +
  display:flex;
 +
  flex: 1 1 100%; //controll the width, default 1 1 0%
 +
}
 +
.card1{
 +
display:flex;
 +
  align-items: center;
 +
  overflow:hidden;
 +
  background-color:white;
 +
  //padding:15px;
 +
  margin: 15px;
 +
 
 +
    .card-content1{
 +
      display:flex;
 +
      flex-direction:column;
 +
      align-items:flex-start;
 +
      flex: 1 1 auto;
 +
     
 +
      h3,p{
 +
        max-width: calc(100% - 30px);
 +
        padding-left:30px;
 +
      }
 +
  }
 +
  .card-image1{
 +
    min-width:262px;
 +
    a{
 +
    img{
 +
      //min-width:162px;
 +
  display: block;
 +
max-width: 100%;
 +
height: auto;
 +
 
 +
    }
 +
  }
 +
  }
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 992px) {
 +
.articleShort{
 +
  flex:1 1 100%;
 +
  }
 +
}
 +
@media screen and (max-width: 480px) {
 +
  .card1{flex-direction:column;
 +
  .card-content1{
 +
    h3,p{text-align:center;
 +
    }
 +
    }
 +
    .card-image{
 +
 
 +
      img{
 +
 
 +
      }
 +
    }
 +
  }
 +
}
 +
 
 +
#hp1 {
 +
    width: auto;
 +
    height: 200px;
 +
}
 +
 
 +
.backgroundHP .thecard a {
 +
    padding-right: 0!important;
 +
    margin-left: 0!important;
 +
    text-decoration: none!important;
 +
    color: white;
 +
}
 +
 
 +
.backgroundHP .thecard {
 +
    width: 800px!important;
 +
    margin-left: 25vw;
 +
}
 +
#Public1 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block!important;
 +
}
 +
 
 +
 
 +
#Public2 {
 +
  width: 35%;
 +
  margin-left: 20vw;
 +
  display: inline-block!important;
 +
}
 +
 
 +
#Public3 {
 +
  width: 35%;
 +
  margin-left: 10px;
 +
  display: inline-block!important;
 +
}
 +
 
 +
 
 +
body {font-family: Verdana, sans-serif; margin:0}
 +
.mySlides {display: none}
 +
img {vertical-align: middle;}
 +
 
 +
/* Slideshow container */
 +
.slideshow-container {
 +
  max-width: 1000px;
 +
  position: relative;
 +
  margin: auto;
 +
  border:1px solid ;
 +
 
 +
}
 +
 
 +
/* Next & previous buttons */
 +
.prev, .next {
 +
  cursor: pointer;
 +
  position: absolute;
 +
  top: 50%;
 +
  width: auto;
 +
  padding: 16px!important;;
 +
  margin-top: -22px!important;;
 +
  color: #3BE7AA;
 +
  font-weight: bold;
 +
  font-size: 60px;
 +
  transition: 0.6s ease;
 +
  border-radius: 0 3px 3px 0;
 +
  padding-right: 0!important;
 +
  margin-left: 0!important;
 +
      text-decoration: none!important;
 +
}
 +
 
 +
/* Position the "next button" to the right */
 +
.next {
 +
  right: 0;
 +
  border-radius: 3px 0 0 3px;
 +
}
 +
 
 +
 
 +
/* Caption text */
 +
.text {
 +
  color: #f2f2f2;
 +
  font-size: 15px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  bottom: 8px;
 +
  width: 100%;
 +
  text-align: center;
 +
}
 +
 
 +
/* Number text (1/3 etc) */
 +
.numbertext {
 +
  color: #f2f2f2;
 +
  font-size: 12px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  top: 0;
 +
}
 +
 
 +
/* The dots/bullets/indicators */
 +
.dot {
 +
  cursor: pointer;
 +
  height: 15px;
 +
  width: 15px;
 +
  margin: 0 2px;
 +
  background-color: #bbb;
 +
  border-radius: 50%;
 +
  display: inline-block;
 +
  transition: background-color 0.6s ease;
 +
}
 +
 
 +
.active, .dot:hover {
 +
  background-color: #717171;
 +
}
 +
 
 +
/* Fading animation */
 +
.fade {
 +
  -webkit-animation-name: fade;
 +
  -webkit-animation-duration: 1.5s;
 +
  animation-name: fade;
 +
  animation-duration: 1.5s;
 +
}
 +
 
 +
@-webkit-keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
 
 +
@keyframes fade {
 +
  from {opacity: .4}
 +
  to {opacity: 1}
 +
}
 +
 
 +
/* On smaller screens, decrease text size */
 +
@media only screen and (max-width: 300px) {
 +
  .prev, .next,.text {font-size: 11px}
 +
}
 +
 
 +
.survey {
 +
  width:50%!important;
 +
  margin-left: 28vw;
 +
}
 +
 
 +
#Model1 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
 
 +
#Bind1 {
 +
  width: 70%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#Bind2 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Bind3 {
 +
  width: 30%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#Bind4 {
 +
  width: 35%;
 +
  margin-left: 15px;
 +
  display: inline-block!important;
 +
}
 +
#Bind5 {
 +
  width: 70%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#Bind6 {
 +
  width: 70%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#Bind7 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#Bind8 {
 +
  width: 40%;
 +
  margin-left: 5px;
 +
  display: inline-block!important;
 +
}
 +
 
 +
#twopics {
 +
  display: inline-block!important;
 +
  width:45%;
 +
}
 +
 
 +
#twopics2 {
 +
  display: inline-block!important;
 +
  width:25%;
 +
vertical-align: middle;
 +
}
 +
#twopics3 {
 +
  display: inline-block!important;
 +
  width:60%;
 +
  margin-left: 20%;
 +
}
 +
 
 +
.indicator #Polymer1 {
 +
font-size: 1vw!important;
 +
}
 +
 
 +
#Basic1 {
 +
  width: 40%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#Basic2 {
 +
  width: 30%;
 +
  margin-left: 20px;
 +
  display: inline-block;
 +
}
 +
#Basic3 {
 +
  width: 40%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#Basic4 {
 +
  width: 30%;
 +
  margin-left: 20px;
 +
  display: inline-block;
 +
}
 +
#Basic5 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
 
 +
#Composite1 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Composite1-2 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
#Composite2 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Composite2-2 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Composite3 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Composite3-2 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Composite3-3 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Composite4 {
 +
  width: 30%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
#Composite5 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
 
 +
#like-btn a {
 +
    padding-right: 0!important;
 +
    margin-left: 0!important;
 +
    text-decoration: none!important;
 +
    color: white;
 +
}
 +
.backgroundProject #like-btn {
 +
  right: 0px!important;
 +
  top: 0px!important;
 +
  position: relative!important;
 +
    margin-left: 20vw!important;
 +
}
 +
 
 +
 
 +
 
 +
#Demonstrate2 {
 +
  width: 40%;
 +
  margin-left: 35vw;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
#Demonstrate3 {
 +
  width: 30%;
 +
  margin-left: 23vw;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
#Demonstrate4 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
#Demonstrate5 {
 +
  width: 50%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
#Demonstrate6 {
 +
  width: 30%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
#Demonstrate7 {
 +
  width: 30%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
#Demonstrate8 {
 +
  width: 70%;
 +
  margin-left: 22vw;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
 
 +
 
 +
.description a {
 +
        padding-left: 0!important;
 +
        margin-left: 0!important;
 +
        padding-right: 0!important;
 +
}
 +
.polaroid #production {
 +
  width: 100%;
 +
  display: inline-block;
 +
  vertical-align: middle;
 +
}
 +
 
 +
.backgroundParts a {
 +
color: #92cd7e;
 +
        padding-left: 0!important;
 +
        margin-left: 0!important;
 +
        padding-right: 0!important;
 +
        text-decoration-color:#92cd7e!important;
 +
}
 +
 
 +
#Safety1 {
 +
  width: 20%;
 +
  margin-left: 17vw;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
 
 +
#Safety2 {
 +
  width: 25%;
 +
  margin-left: 1px;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
 
 +
#Safety3 {
 +
  width: 25%;
 +
  margin-left: 1px;
 +
  display: inline-block;
 +
  vertical-align: top;
 +
}
 +
#ptc1 {
 +
  width: 60%;
 +
}
 +
#ptc2 {
 +
  width: 60%;
 +
}
 +
#ptc3 {
 +
  width: 60%;
 +
}
 +
#ptc4 {
 +
  width: 60%;
 +
}
 +
#ptc5 {
 +
  width: 60%;
 +
}
 +
#ptc5 {
 +
  width: 50%;
 +
}
 +
#ptc6 {
 +
  width: 40%;
 +
}
 +
#ptc7 {
 +
  width: 60%;
 +
}
 +
 
 +
#cb2 {
 +
  width: 45%;
 +
  margin-left: 30vw;
 +
}
 +
#Public0-1  {
 +
  width: 15%;
 +
  margin-left: 20vw;
 +
}
 +
#Public0-2  {
 +
  width: 15%;
 +
  margin-left: 10px;
 +
}
 +
 
 +
#Public0-3  {
 +
  width: 15%;
 +
  margin-left: 10px;
 +
}
 +
#Public0-4  {
 +
  width: 15%;
 +
  margin-left: 20vw;
 +
}
 +
#Public0-5  {
 +
  width: 15%;
 +
  margin-left: 10px;
 +
}
 +
 
 +
#Public0-6  {
 +
  width: 15%;
 +
  margin-left: 10px;
 +
}
 +
 
 +
#res1 {
 +
  width: 38%;
 +
  margin-left: 17vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#res2 {
 +
  width: 35%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#res3 {
 +
  width: 40%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#res4 {
 +
  width: 37%;
 +
  margin-left: 17vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#res5 {
 +
  width: 37%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#res6 {
 +
  width: 37%;
 +
  margin-left: 17vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#res7 {
 +
  width: 37%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
 
 +
#res8 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#res9 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#res10 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#EX1 {
 +
  width: 15%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#EX2 {
 +
  width: 20%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
 
 +
 
 +
#EX3 {
 +
  width: 22%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX4 {
 +
  width: 40%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX5 {
 +
  width: 40%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX6 {
 +
  width: 40%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX7 {
 +
  width: 15%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX8 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX9 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX10 {
 +
  width: 35%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX11 {
 +
  width: 30%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX12 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX13 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX14 {
 +
  width: 30%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX15 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX16 {
 +
  width: 30%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#ihp1 {
 +
  width: 60%;
 +
  margin-left: 27vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#ihp2 {
 +
  width: 60%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#ihp3 {
 +
  width: 60%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#ihp4 {
 +
  width: 60%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#goldmedal1 {
 +
  vertical-align: middle;
 +
text-align:center;
 +
  margin-left: 20vw;
 +
}
 +
 
 +
iframe {
 +
  margin-left: 10vw;
 +
}
 +
 
 +
.slideshow-container1 {
 +
  max-width: 1500px;
 +
  position: relative;
 +
  margin: auto;
 +
  border:1px solid ;
 +
 
 +
}
 +
 
 +
 
 +
.special {
 +
  font-size: 36px!important;
 +
  color: #2ED583!important;
 +
        font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      text-decoration: none!important;
 +
text-align:center;!important;
 
}
 
}
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 02:38, 6 December 2018