Difference between revisions of "Template:SYSU CHINA/MAINCSS"

Line 745: Line 745:
 
   #timeline {
 
   #timeline {
 
     width: 800px;
 
     width: 800px;
−
     height: 600px;
+
     height: 650px;
 
     overflow: hidden;
 
     overflow: hidden;
 
     margin: 0 auto;
 
     margin: 0 auto;
Line 776: Line 776:
 
     #issues {
 
     #issues {
 
       width: 800px;
 
       width: 800px;
−
       height: 580px;
+
       height: 630px;
 
       overflow: hidden;
 
       overflow: hidden;
 
     }  
 
     }  
 
       #issues li {
 
       #issues li {
 
         width: 800px;
 
         width: 800px;
−
         height: 580px;
+
         height: 630px;
 
         list-style: none;
 
         list-style: none;
 
         float: left;
 
         float: left;

Revision as of 16:46, 18 September 2015

/* SUI Config*/ /* hint-color: rgba(50, 132, 252, 1)*/


/* Reset default stylesheet. */

  • {
 margin: 0;
 padding: 0;
 box-shadow: none;
 outline: none;
 border: none;
 background-color: transparent;
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 -webkit-appearance: none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 color: #333;
 font-family: "Century Gothic", sans-serif;

}

html, body { 

 width: 100%;
 height: 100%;

}

a { 

 cursor: pointer;
 text-decoration: none;
 color: #333;

}

a:hover {text-decoration: underline; }

h1, h2, h3, h4, h5 {margin-bottom: 20px; border-bottom: none;}

h2 {font-size: 30px; }

h3 {font-size: 24px; }

h4 {font-size: 20px; }

h5 {font-size: 16px; }

p { 

 font-weight: normal;
 font-size: 16px;
 margin-bottom: 20px;

}

ul, ol { 

 padding-left: 30px;
 margin-bottom: 20px;

}

li { 

 margin-bottom: 20px;

}

p, li { 

 line-height: 1.6;

}

img {display: block; }

/* SUI Components */

.sui-x-img { 

 background-position: center;
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 background-size: cover;

}

/* SUI Layout */ .sui-l-fullpage { 

 position: relative;
 height: 100%;
 width: 100%;
 overflow: hidden;

}

.sui-l-center-wrapper { 

 position: relative;
 width: 100%;
 height: 100%;

}

.sui-l-center-block { 

 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate3D(-50%, -50%, 0);
 -ms-transform: translate3D(-50%, -50%, 0);
 -o-transform: translate3D(-50%, -50%, 0);
 transform: translate3D(-50%, -50%, 0);

}

/* Simple Grid*/ .sui-row { 

 width: 100%;
 overflow: hidden;
 clear: both;

}

.sui-col-1-2 { 

 width: 50%;
 float: left;

}

.sui-col-2-3 { 

 width: 66.6%;
 float: left;

}

.sui-col-1-3 { 

 width: 33.3%;
 float: left;

}

.sui-avatar { 

 display: block;
 border-radius: 50%;

}

.sui-button { 

 cursor: pointer;
 text-transform: uppercase;
 font-weight: bold;
 border-radius: 4px;
 box-shadow: 0 1px 2px rgba(0,0,0,.4);
 display: inline-block;
 padding: 10px 20px;
 color: #fff;
 background-color: rgba(50, 132, 252, 1);
 border: 1px solid rgba(30, 112, 222, 1);

}

.sui-bordered-button { 

 cursor: pointer;
 background-color: transparent;
 border: 1px solid rgba(50, 132, 252, 1);
 color: rgba(50, 132, 252, 1);
 display: inline-block;
 padding: 10px 20px;
 border-radius: 4px;
 font-weight: bold;
 text-transform: uppercase;

}

.sui-bordered-button:hover { 

 background-color: rgba(50, 132, 252, 1);
 color: #fff;

}


.sui-paginator { 

 display: inline-block;
 padding: 0;
 margin: 0;

}

.sui-horizontal li { 

 display: inline-block;
 margin: 0 0 0 20px;

}

.sui-vertical li { 

 display: block;
 margin: 0 0 10px 0;

}

.sui-paginator li { 

 list-style: none;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 border: 1px solid #ccc;
 cursor: pointer;

}

.sui-paginator li:hover { 

 background-color: #ccc;

}

.sui-paginator li.current { 

 border: 1px solid rgba(50, 132, 252, 1);
 background-color: rgba(50, 132, 252, 1);

}

.sui-dropdown { 

 position: absolute;
 left: 0;
 display: block;
 /*border: 1px solid #1B1B1B;*/
 width: 120px;
 padding: 0;
 margin: 0;
 overflow: hidden;

}

.sui-dropdown li { 

 cursor: pointer;
 position: relative;
 background-color: #505050;
 margin-bottom: 0;
 padding: 10px 20px;
 height: 40px;
 line-height: 20px;
 list-style: none;
 color: #fff;
 border-left: 1px solid #1b1b1b;
 border-right: 1px solid #1b1b1b;

}

.sui-dropdown li:after { 

 content: " ";
 height: 1px;
 position: absolute;
 bottom: 0;
 left: 12px;
 right: 12px;
 background-color: #727272;

} .sui-dropdown li:first-child { 

 /*border-top-left-radius: 4px;*/
 /*border-top-right-radius: 4px;*/

} .sui-dropdown li:last-child { 

 border-bottom: 1px solid #1b1b1b;
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;

}

.sui-dropdown li:last-child:after { 

 display: none;

} .sui-dropdown li:hover { 

 background-color: rgba(50, 132, 252, 1);

}


.sui-loader { 

 display: none;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(49, 45, 63);

} .sui-dropdown li:hover:after { 

 display: none;

} .sui-menu { 

 display: block;
 width: 100%;
 padding: 0;
 border-bottom: 1px solid #1b1b1b;

}

.sui-menu>li { 

 cursor: pointer;
 position: relative;
 list-style: none;
 float: left;
 width: calc(100% / 7);
 text-align: center;
 height: 60px;
 line-height: 60px;
 margin: 0;
 background-color: #505050;
 color: #fff;
 text-transform: uppercase;
 font-size: 13px;

}

.sui-menu>li .sui-dropdown { 

 display: none;
 top: 60px;

}

.sui-menu>li:hover { 

 background-color: rgba(50, 132, 252, 1);

} .sui-menu>li:hover .sui-dropdown { 

 display: block;

}


/* custom */

  1. footer {
 position: fixed;
 width: 100%;
 bottom: 0;

} .footer-wrapper { 

 overflow: hidden;
 padding-bottom: 10px;
 font-size: 12px;
 width: 90%;
 margin: 0 auto;
 text-align: center;

}

.footer-left { 

 /*float: left;*/
 line-height: 1.5;
 border-top: 1px solid #555;
 padding-top: 10px;
 color: #aaa;

} .cover { 

 background-color: #323232;

}

.logo-wrapper { 

 height: 100%;
 width: 100%;
 background-image: url(../img/sui_logo_black.gif);
 -webkit-background-size: 340px;
 background-size: 340px;
 background-position: center;
 background-repeat: no-repeat;

} .cover-logo { 

 height: 150px;
 width: 150px;
 border-radius: 50%;
 background-color: #fff;
 color: #000;
 text-align: center;
 font-size: 30px;
 -webkit-transform-origin: center center;
 -moz-transform-origin: center center;
 -ms-transform-origin: center center;
 -o-transform-origin: center center;
 transform-origin: center center;

}

.cover-domino { 

 position: absolute;
 bottom: 0;
 width: 102%;
 padding: 0;
 margin: 0 0 0 -2%;

}

.cover-domino li { 

 list-style: none;
 display: inline-block;
 margin-left: 2%;
 margin-bottom: 0;
 border-radius: 4px;
 height: 280px;
 width: 4.25%;
 background-color: #fff;

 -webkit-transform-origin: bottom right;
 -moz-transform-origin: bottom right;
 -ms-transform-origin: bottom right;
 -o-transform-origin: bottom right;
 transform-origin: bottom right;

}


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

 .cover-domino li {
   height: 140px;
 }

}


.member-avatar { 

 width: 200px;
 height: 200px;
 float: left;
 background-color: #00c4cc;

}

  1. fp-nav ul li a span, .fp-slidesNav ul li a span {
 background-color: #fff;

}

.element { 

 width: 230px;
 position: absolute;
 margin-left: -115px;
 margin-top: -115px;
 top: 50%;
 left: 50%;

}


  1. fullpage {
 width: 100%;
 height: 100%;
 position: relative;
 overflow: hidden;

}

  1. fullpage .sui-l-fullpage {
 width: 100%;
 height: 100%;
 display: none;
 position: absolute;
 top: 0;
 left: 0;

}


  1. arrow_right {
 position: fixed;
 z-index: 1000;
 width: 2%;
 right: 2.5%;
 top: 50%;
 margin-top: -3.3%;
 cursor: pointer;
 opacity: 1;

}

  1. arrow_left {
 position: fixed;
 z-index: 1000;
 width: 2%;
 left: 2.5%;
 top: 50%;
 margin-top: -3.3%;
 cursor: pointer;
 display: none;
 -webkit-transform: scaleX(-1);
 -ms-transform: scaleX(-1);
 transform: scaleX(-1);

}

  1. arrow_left_height {
 background-image: url(../img/sui_arrow_left.png);
 background-repeat: no-repeat;
 -webkit-background-size: 20px;
 background-size: 20px;
 height: 100px;
 color: #fff;

}

  1. arrow_right_height {
 background-image: url(../img/sui_arrow_left.png);
 background-repeat: no-repeat;
 -webkit-background-size: 20px;
 background-size: 20px;
 height: 100px;
 color: #fff;
 -webkit-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);

}

.clock { 

 width: 230px;

} .cell-clock-res { 

 display: none;

}

.sui-top-banner { 

 position: relative;
 width: 100%;
 height: 200px;
 background-color: #fff;

} .sui-menu { 

 overflow: hidden;
 width: 100%;
 margin: 0 auto;
 border-bottom: 1px solid #000;

} .sui-menu li { 

 background-color: #fff;
 height: 40px;
 line-height: 40px;

} .sui-menu li { 

 color: #323232;

} .sui-content { 

 width: 100%;
 margin: 60px auto;
 overflow: hidden;

} .sui-side-nav { 

 width: 24%;
 float: left;

} .sui-article { 

 width: 75%;
 float: right;

}

.sui-article img { 

 display: block;
 max-width: 80%;
 margin: 0 auto;

} .sui-article a { 

 color: #000;
 border-bottom: 1px dashed #000;

} .sui-article a:hover { 

 text-decoration: none;
 border-bottom: 1px dashed #000;

} .scrollto { 

 margin-bottom: 90px;

} .scrollto>.scrollto { 

 margin-bottom: 40px;

} .sui-article h1 { 

 margin-bottom: 30px;

} .sui-article h2 { 

 font-size: 18px;
 margin-bottom: 30px;

} .sui-article h3 { 

 font-size: 15px;
 margin-bottom: 30px;

} .sui-menu li.active { 

 border-top: 5px solid #000;

} .sui-side-nav>ul>li { 

 position: relative;
 /*width: 120px;*/
 /*border-radius: 50%;*/
 background: #fff;
 /*border: 1px solid #000;*/
 /*height: 120px;*/
 list-style: none;

} .sui-side-nav ul li.active { 

 text-decoration: underline;

} .to-top-btn { 

 position: fixed;
 bottom: 80px;
 right: 38px;
 width: 50px;
 height: 50px;
 color: #fff;

} .to-top-btn button { 

 font-size: 40px;
 width: 100%;
 color: #000;
 text-align: center;

} .mid-logo { 

 width: 140px;
 height: 140px;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 border-radius: 50%;
 background-image: url(../img/sui_logo_white.gif);
 -webkit-background-size: cover;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;

} .to-top-btn.down { 

 -webkit-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);

}

.animated.anim-slow { 

 -webkit-animation-duration: 2.8s;
 animation-duration: 2.8s;

}


.sui-carousel { 

 display: block;

}

.carousel-wrapper { 

 width: 3200px;

} .sui-carousel li { 

 display: inline-block;
 list-style: none;
 border-radius: 50%;
 background-color: #000;
 width: 200px;
 height: 200px;

}

.main-wrapper { 

 width: 1100px;
 margin: 0 auto;
 background-color: #fff;

}

.sticky { 

 top: 20px;
 width: 250px;
 overflow: hidden;

}

.sub-ul { 

 max-height: 0;
 overflow: hidden;
 opacity: .5;
 padding-left: 20px;
 margin-bottom: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

 -webkit-transition: max-height .3s;
 -o-transition: max-height .3s;
 transition: max-height .3s;

} .sub-ul li { 

 margin-bottom: 3px;
 list-style: none;
 color: #aaa;

}

.sub-ul li:first-child { 

 margin-top: 10px;

} .sui-side-nav a { 

 position: relative;

} .sui-side-nav a.active:before{ 

 content: " ";
 display: block;
 position: absolute;
 left: -12px;
 height: 15px;
 width: 4px;
 top: 1px;
 background-color: #000;

} .sui-side-nav a { 

 color: #000;

} .sui-side-nav>ul>li>a.active + ul { 

 max-height: 300px;

}

.svg-wrapper { 

 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate3D(-50%, -50%, 0);
 -ms-transform: translate3D(-50%, -50%, 0);
 -o-transform: translate3D(-50%, -50%, 0);
 transform: translate3D(-50%, -50%, 0);

}

  1. second-page {
 background-color: rgba(0,0,0,.50);

} .button_bg { 

   display: none;
   z-index: -3;
   position: absolute;
   width: auto;
   background-color: rgba(0,0,0,.1);
   height: auto;
   top: -10px;
   left: -10px;
   right: -10px;
   bottom: 0;
   border-radius: 6px;

}

  1. arrow_left:hover .button_bg {
 display: block;

}

  1. arrow_right:hover .button_bg {
 display: block;

}

.sui-menu { 

 border-bottom: none;

}

.sui-content { 

 margin: 0 auto 0 auto;
 padding-bottom: 50px;

}

.sui-menu li>a { 

 -webkit-transition: -webkit-transform .4s;
 -o-transition: -o-transform .4s;
 transition: transform .4s;

}

.sui-menu li>a:hover { 

 -webkit-transform: translate3D(0, -10px, 0);
 -ms-transform: translate3D(0, -10px, 0);
 -o-transform: translate3D(0, -10px, 0);
 transform: translate3D(0, -10px, 0);

}


  1. timeline a {
 color: #ccc;
 text-decoration: none;
 -webkit-transition: 0.5s;
 -moz-transition: 0.5s;
 -o-transition: 0.5s;
 -ms-transition: 0.5s;
 transition: 0.5s;
 text-decoration: none;
 border-bottom: none;

} 

 #timelinea:hover,
 #timelinea.selected {
   color: #ffcc00;
 }


.sociales { 

 text-align: center;
 margin-bottom: 20px;

} 

 #timeline {
   width: 800px;
   height: 650px;
   overflow: hidden;
   margin: 0 auto;
   position: relative;
   background: url('https://static.igem.org/mediawiki/2015/4/4d/Sui_dot.png') left 34px repeat-x;
 }
   #dates {
     width: 800px;
     height: 60px;
     overflow: hidden;
   }
     #dates li {
       list-style: none;
       float: left;
       width: 100px;
       height: 35px;
       font-size: 12px;
       text-align: center;
       background: url('https://static.igem.org/mediawiki/2015/e/e4/Sui_biggerdot.png') center bottom no-repeat;
     }
       #dates a {
         line-height: 38px;
         padding-bottom: 10px;
       }
       #dates .selected {
         font-size: 16px;
         color: #000;
       }
   
   #issues {
     width: 800px;
     height: 630px;
     overflow: hidden;
   } 
     #issues li {
       width: 800px;
       height: 630px;
       list-style: none;
       float: left;
     }
       #issues li.selected img {
         -webkit-transform: scale(1.1,1.1);
         -moz-transform: scale(1.1,1.1);
           -o-transform: scale(1.1,1.1);
           -ms-transform: scale(1.1,1.1);
           transform: scale(1.1,1.1);
       }
       #issues li img {
         float: left;
         margin: 10px 30px 10px 50px;
         background: transparent;
         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */      
         zoom: 1;
         -webkit-transition: all 2s ease-in-out;
         -moz-transition: all 2s ease-in-out;
         -o-transition: all 2s ease-in-out;
         -ms-transition: all 2s ease-in-out; 
         transition: all 2s ease-in-out;
         -webkit-transform: scale(0.7,0.7);
         -moz-transform: scale(0.7,0.7);
           -o-transform: scale(0.7,0.7);
           -ms-transform: scale(0.7,0.7);
           transform: scale(0.7,0.7);
       }
       #issues li h1 {
         color: #ffcc00;
         font-size: 48px;
         margin: 20px 0;
       }
       #issues li p {
         font-size: 14px;
         margin-right: 70px;
         font-weight: normal;
         line-height: 22px;
       }
   
   #grad_left,
   #grad_right {
     width: 100px;
     height: 350px;
     position: absolute;
     top: 0;
   }
     #grad_left {
           left: 0;
           background: url('https://static.igem.org/mediawiki/2015/5/5f/Sui_ga_left.png') repeat-y;
     }
     #grad_right {
           right: 0;
           background: url('https://static.igem.org/mediawiki/2015/5/53/Sui_ga_right.png') repeat-y;
     }
   
   #next,
   #prev {
     position: absolute;
     top: 0;
     font-size: 70px;
     top: 170px;
     width: 22px;
     height: 38px;
     background-position: 0 0;
     background-repeat: no-repeat;
     text-indent: -9999px;
     overflow: hidden;
   }
     #next:hover,
     #prev:hover {
       background-position: 0 -76px;
     }
     #next {
       right: 0;
       background-image: url('../images/next.png');
     }
     #prev {
       left: 0;
       background-image: url('../images/prev.png');
     }
       #next.disabled,
       #prev.disabled {
         opacity: 0.2;
       }

.sui-highlight { 

    height: 4px !important;

}


@-webkit-keyframes left-right { 

 0% {
   -moz-transform: translateY(-20%) translateX(-10%);
   -ms-transform: translateY(-20%) translateX(-10%);
   -webkit-transform: translateY(-20%) translateX(-10%);
   transform: translateY(-20%) translateX(-10%); }
 100% {
   -moz-transform: translateY(0%) translateX(10%);
   -ms-transform: translateY(0%) translateX(10%);
   -webkit-transform: translateY(0%) translateX(10%);
   transform: translateY(0%) translateX(10%); } }

@-moz-keyframes left-right { 

 0% {
   -moz-transform: translateY(-20%) translateX(-10%);
   -ms-transform: translateY(-20%) translateX(-10%);
   -webkit-transform: translateY(-20%) translateX(-10%);
   transform: translateY(-20%) translateX(-10%); }
 100% {
   -moz-transform: translateY(0%) translateX(10%);
   -ms-transform: translateY(0%) translateX(10%);
   -webkit-transform: translateY(0%) translateX(10%);
   transform: translateY(0%) translateX(10%); } }

@-ms-keyframes left-right { 

 0% {
   -moz-transform: translateY(-20%) translateX(-10%);
   -ms-transform: translateY(-20%) translateX(-10%);
   -webkit-transform: translateY(-20%) translateX(-10%);
   transform: translateY(-20%) translateX(-10%); }
 100% {
   -moz-transform: translateY(0%) translateX(10%);
   -ms-transform: translateY(0%) translateX(10%);
   -webkit-transform: translateY(0%) translateX(10%);
   transform: translateY(0%) translateX(10%); } }

@keyframes left-right { 

 0% {
   -moz-transform: translateY(-20%) translateX(-10%);
   -ms-transform: translateY(-20%) translateX(-10%);
   -webkit-transform: translateY(-20%) translateX(-10%);
   transform: translateY(-20%) translateX(-10%); }
 100% {
   -moz-transform: translateY(0%) translateX(10%);
   -ms-transform: translateY(0%) translateX(10%);
   -webkit-transform: translateY(0%) translateX(10%);
   transform: translateY(0%) translateX(10%); } }

@-webkit-keyframes right-left { 

 0% {
   -moz-transform: translateY(0%) translateX(10%);
   -ms-transform: translateY(0%) translateX(10%);
   -webkit-transform: translateY(0%) translateX(10%);
   transform: translateY(0%) translateX(10%); }
 100% {
   -moz-transform: translateY(-20%) translateX(-10%);
   -ms-transform: translateY(-20%) translateX(-10%);
   -webkit-transform: translateY(-20%) translateX(-10%);
   transform: translateY(-20%) translateX(-10%); } }

@-moz-keyframes right-left { 

 0% {
   -moz-transform: translateY(0%) translateX(10%);
   -ms-transform: translateY(0%) translateX(10%);
   -webkit-transform: translateY(0%) translateX(10%);
   transform: translateY(0%) translateX(10%); }
 100% {
   -moz-transform: translateY(-20%) translateX(-10%);
   -ms-transform: translateY(-20%) translateX(-10%);
   -webkit-transform: translateY(-20%) translateX(-10%);
   transform: translateY(-20%) translateX(-10%); } }

@-ms-keyframes right-left { 

 0% {
   -moz-transform: translateY(0%) translateX(10%);
   -ms-transform: translateY(0%) translateX(10%);
   -webkit-transform: translateY(0%) translateX(10%);
   transform: translateY(0%) translateX(10%); }
 100% {
   -moz-transform: translateY(-20%) translateX(-10%);
   -ms-transform: translateY(-20%) translateX(-10%);
   -webkit-transform: translateY(-20%) translateX(-10%);
   transform: translateY(-20%) translateX(-10%); } }

@keyframes right-left { 

 0% {
   -moz-transform: translateY(0%) translateX(10%);
   -ms-transform: translateY(0%) translateX(10%);
   -webkit-transform: translateY(0%) translateX(10%);
   transform: translateY(0%) translateX(10%); }
 100% {
   -moz-transform: translateY(-20%) translateX(-10%);
   -ms-transform: translateY(-20%) translateX(-10%);
   -webkit-transform: translateY(-20%) translateX(-10%);
   transform: translateY(-20%) translateX(-10%); } }

/* added to the original element calling slippry */ .sy-box.sy-loading { 

 background: url("/images/sy-loader.gif") 50% 50% no-repeat;
 -moz-background-size: 32px;
 -o-background-size: 32px;
 -webkit-background-size: 32px;
 background-size: 32px;
 min-height: 40px; }
 .sy-box.sy-loading .sy-slides-wrap, .sy-box.sy-loading .sy-pager {
   visibility: hidden; }

/* element that wraps the slides */ .sy-slides-wrap { 

 position: relative;
 height: 100%;
 width: 100%; }
 .sy-slides-wrap:hover .sy-controls {
   display: block; }

/* element that crops the visible area to the slides */ .sy-slides-crop { 

 height: 100%;
 width: 100%;
 position: absolute;
 overflow: hidden; }

/* list containing the slides */ .sy-list { 

 width: 100%;
 height: 100%;
 list-style: none;
 margin: 0;
 padding: 0;
 position: absolute; }
 .sy-list.horizontal {
   -moz-transition: left ease;
   -o-transition: left ease;
   -webkit-transition: left ease;
   transition: left ease; }
 .sy-list.vertical {
   -moz-transition: top ease;
   -o-transition: top ease;
   -webkit-transition: top ease;
   transition: top ease; }

/* single slide */ .sy-slide { 

 position: absolute;
 width: 100%;
 z-index: 2; }
 .sy-slide.kenburns {
   width: 140%;
   left: -20%; }
   .sy-slide.kenburns.useCSS {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
     transition-property: opacity; }
     .sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
       -webkit-animation-name: left-right;
       -webkit-animation-fill-mode: forwards;
       -moz-animation-name: left-right;
       -moz-animation-fill-mode: forwards;
       -o-animation-name: left-right;
       -o-animation-fill-mode: forwards;
       animation-name: left-right;
       animation-fill-mode: forwards; }
     .sy-slide.kenburns.useCSS.sy-ken:nth-child(2n) {
       -webkit-animation-name: right-left;
       -webkit-animation-fill-mode: forwards;
       -moz-animation-name: right-left;
       -moz-animation-fill-mode: forwards;
       -o-animation-name: right-left;
       -o-animation-fill-mode: forwards;
       animation-name: right-left;
       animation-fill-mode: forwards; }
 .sy-slide.sy-active {
   z-index: 3; }
 .sy-slide > img {
   margin: 0;
   padding: 0;
   display: block;
   width: 100%;
   border: 0; }
 .sy-slide > a {
   margin: 0;
   padding: 0;
   display: block;
   width: 100%; }
   .sy-slide > a > img {
     margin: 0;
     padding: 0;
     display: block;
     width: 100%;
     max-width: 100%;
     border: 0; }

/* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */ .sy-controls { 

 display: none;
 list-style: none;
 height: 100%;
 width: 100%;
 position: absolute;
 padding: 0;
 margin: 0; }
 .sy-controls li {
   position: absolute;
   width: 10%;
   min-width: 4.2em;
   height: 100%;
   z-index: 33; }
   .sy-controls li.sy-prev {
     left: 0;
     top: 0; }
     .sy-controls li.sy-prev a:after {
       background-position: -5% 0; }
   .sy-controls li.sy-next {
     right: 0;
     top: 0; }
     .sy-controls li.sy-next a:after {
       background-position: 105% 0; }
   .sy-controls li a {
     position: relative;
     width: 100%;
     height: 100%;
     display: block;
     text-indent: -9999px; }
     .sy-controls li a:link, .sy-controls li a:visited {
       opacity: 0.4; }
     .sy-controls li a:hover, .sy-controls li a:focus {
       opacity: 0.8;
       outline: none; }
     .sy-controls li a:after {
       content: "";
       background-image: url("/images/arrows.svg");
       background-repeat: no-repeat;
       -moz-background-size: cover;
       -o-background-size: cover;
       -webkit-background-size: cover;
       background-size: cover;
       text-align: center;
       text-indent: 0;
       line-height: 2.8em;
       color: #111;
       font-weight: 800;
       position: absolute;
       background-color: #fff;
       width: 2.8em;
       height: 2.8em;
       left: 50%;
       top: 50%;
       margin-top: -1.4em;
       margin-left: -1.4em;
       -moz-border-radius: 50%;
       -webkit-border-radius: 50%;
       border-radius: 50%; }
 @media only screen and (max-device-width: 600px) {
   .sy-controls {
     display: block; }
     .sy-controls li {
       min-width: 2.1em; }
       .sy-controls li a:after {
         width: 1.4em;
         height: 1.4em;
         margin-top: -0.7em;
         margin-left: -0.7em; } }

/* captions, styled fo the overlay variant */ .sy-caption-wrap { 

 position: absolute;
 bottom: 2em;
 z-index: 12;
 left: 50%; }
 .sy-caption-wrap .sy-caption {
   position: relative;
   left: -50%;
   background-color: rgba(0, 0, 0, 0.54);
   color: #fff;
   padding: 0.4em 1em;
   -moz-border-radius: 1.2em;
   -webkit-border-radius: 1.2em;
   border-radius: 1.2em; }
   .sy-caption-wrap .sy-caption a:link, .sy-caption-wrap .sy-caption a:visited {
     color: #e24b70;
     font-weight: 600;
     text-decoration: none; }
   .sy-caption-wrap .sy-caption a:hover, .sy-caption-wrap .sy-caption a:focus {
     text-decoration: underline; }
 @media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
   .sy-caption-wrap {
     left: 0;
     bottom: 0.4em; }
     .sy-caption-wrap .sy-caption {
       left: 0;
       padding: 0.2em 0.4em;
       font-size: 0.92em;
       -moz-border-radius: 0;
       -webkit-border-radius: 0;
       border-radius: 0; } }

/* pager bubbles */ .sy-pager { 

 overflow: hidden;
 *zoom: 1;
 display: block;
 width: 100%;
 margin: 1em 0 0;
 padding: 0;
 list-style: none;
 text-align: center; }
 .sy-pager li {
   display: inline-block;
   width: 1.2em;
   height: 1.2em;
   margin: 0 1em 0 0;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%; }
   .sy-pager li.sy-active a {
     background-color: #e24b70; }
   .sy-pager li a {
     width: 100%;
     height: 100%;
     display: block;
     background-color: #ccc;
     text-indent: -9999px;
     -moz-background-size: 2em;
     -o-background-size: 2em;
     -webkit-background-size: 2em;
     background-size: 2em;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%; }
     .sy-pager li a:link, .sy-pager li a:visited {
       opacity: 1.0; }
     .sy-pager li a:hover, .sy-pager li a:focus {
       opacity: 0.6; }

/* element to "keep/ fill" the space of the content, gets intrinsic height via js */ .sy-filler { 

 width: 100%; }
 .sy-filler.ready {
   -moz-transition: padding 600ms ease;
   -o-transition: padding 600ms ease;
   -webkit-transition: padding 600ms ease;
   transition: padding 600ms ease; }

.sui-article .sy-box a { 

   border-bottom: none;

} 

   .sui-intro-row {
     width: 825px;
     overflow: hidden;
     margin-bottom: 40px;
   }
   .sui-intro-col {
     width: 33.3%;
     float: left;
   }
   .sui-intro-avatar {
     display: block;
     width: 220px;
     height: 220px;
     border-radius: 50%;
     background-color: #000;
     margin: 0 auto;
     background-position: center;
     background-size: 240px;
     background-repeat: no-repeat;
   }
   .sui-intro-col h3 {
     font-weight: bold;
     width: 220px;
     margin: 30px auto 20px auto;
   }
   .sui-intro-desc {
     display: block;
     width: 220px;
     margin: 0 auto;
   }


.sui-f-item { 

     margin-bottom: 10px;
   }
   .sui-f-bar {
     cursor: pointer;
     background: rgb(231, 107, 86);
     color: #fff;
     height: 30px;
     line-height: 30px;
     border-radius: 10px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     padding: 0 10px;
   }
   .sui-f-des {
     max-height: 0;
     overflow: hidden;
     -webkit-transition: max-height .6s;
     -o-transition: max-height .6s;
     transition: max-height .6s;
   }
   .sui-f-des p {
     padding-top: 20px;
     padding-left: 30px;
   }
   .sui-f-item.bar-active .sui-f-des {
     max-height: 1700px;
   }

.sui-article .figure { 

 text-align: left;
 width: 80%;
 margin: 0 auto 40px auto;
 color: #888;
 font-size: 14px;
 line-height: 1.3;

}

.sui-article a.fancybox { 

   display: block;
  border-bottom: none;
   width: 100%;

}

.sui-article { 

  font-size: 16px;

}

.sui-article table { border: 1px solid #ddd; width: 100%; 

   max-width: 100%;

border-spacing: 0; 

   border-collapse: collapse;

} .sui-article table>thead:first-child>tr:first-child>th { 

   border-top: 0;

}

.sui-article table>thead>tr>th { 

   border-bottom-width: 2px;
   border: 1px solid #ddd;
   vertical-align: bottom;
   border-bottom: 2px solid #ddd;

padding: 8px; 

   line-height: 1.42857143;

}

.sui-article table>tbody>tr>td { border: 1px solid #ddd; padding: 8px; 

   line-height: 1.42857143;
   vertical-align: top;

}