Difference between revisions of "Team:NRP-UEA-Norwich/CSS/MAIN"

(Created page with "var web; $(document).ready(function(){ web = { defaults: { "url": "home", "pagesDir": "pages", "contentWrapper": $("#contentWrapper"), "pageLoaded": false...")
 
 
Line 1: Line 1:
−
var web;
+
body{
−
$(document).ready(function(){
+
font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
−
web = {
+
overflow-x:hidden;
−
defaults: {
+
color: #444;
−
"url": "home",
+
}
−
"pagesDir": "pages",
+
−
"contentWrapper": $("#contentWrapper"),
+
−
"pageLoaded": false
+
−
},
+
  
−
initialize: function(){
+
a{
 +
color: #4444ff;
 +
}
 +
 
 +
a:hover{
 +
text-decoration: underline;
 +
}
 +
 
 +
*, *:after, *:before {
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
}
 +
 
 +
.showFullSizeImage{
 +
cursor: pointer;
 +
}
 +
 
 +
.imageTextWrap{
 +
float: right;
 +
margin: 5px;
 +
}
 +
 
 +
.centerMiddle{
 +
margin: auto;
 +
display: block;
 +
}
 +
 
 +
.italics{
 +
font-style: italic;
 +
}
 +
 
 +
.underline{
 +
text-decoration: underline;
 +
}
 +
 
 +
.centerTextMiddle{
 +
text-align: center;
 +
}
 +
 
 +
/* Content Wrapper */
 +
#container{
 +
 
 +
}
 +
#contentWrapper{
 +
margin: auto;
 +
}
 +
 
 +
/* Header menu */
 +
#menu{ width:100%; border-bottom: solid 1px rgb(169,169,169); }
 +
 
 +
#menu > ul {
 +
width:940px;
 +
margin:0 auto 0;
 +
height: 73px;
 +
}
 +
#menu > ul > li{
 +
color: rgb(140,154,161);
 +
    list-style-type: none;
 +
    display: inline-block;
 +
    width: 100px;
 +
    text-align: center;
 +
    cursor: pointer;
 +
    height: 100%;
 +
    vertical-align: middle;
 +
    position: relative;
 +
}
 +
#menu > ul > li:hover{
 +
color:rgb(64,64,64);
 +
background-color:rgb(240,240,240);
 +
}
 +
#logoWrapper:hover{
 +
background-color: transparent !important;
 +
cursor: default;
 +
}
 +
#menu li:hover .subMenu{ display: block; }
 +
#menu li > a{
 +
    text-decoration: none;
 +
    color: rgb(140,154,161);
 +
    display: block;
 +
    font-size: 16px;
 +
    display: table;
 +
    height: 100%;
 +
    width: 100%;
 +
}
 +
#logo{
 +
    width: 62px;
 +
    height: 62px;
 +
    background-image: url("../images/logo.png");
 +
    background-size: 62px 62px;
 +
    background-repeat: no-repeat;
 +
    display: block !important;
 +
    margin: 5px auto;
 +
}
 +
.subMenu{
 +
position: absolute;
 +
background: #fff;
 +
width: 100%;
 +
text-align: left;
 +
top: 70px;
 +
display: none;
 +
z-index: 3;
 +
}
 +
.subMenu li a{
 +
padding: 3px 6px;
 +
border-bottom: 1px solid;
 +
font-size: 13px !important;
 +
}
 +
.subMenu li a:hover{ background-color: #f0f0f0; }
 +
#menu li div{
 +
display: table-cell;
 +
vertical-align: middle;
 +
line-height: 16px;
 +
}
 +
 
 +
/* Home Page */
 +
#video{
 +
margin-top: -3px;
 +
position:relative;
 +
z-index:0;
 +
}
 +
#video video{
 +
width: 100%;
 +
}
 +
 +
#videoOverlay{
 +
width: 600px;
 +
height: 400px;
 +
position: absolute;
 +
z-index: 1;
 +
color: white;
 +
left: 0;
 +
right: 0;
 +
top: 0;
 +
bottom: 0;
 +
margin: auto;
 +
text-align:center;
 +
text-transform:uppercase;
 +
line-height:60px;
 +
-webkit-transition: transform 0.3s ease-in-out;
 +
visibility:visible;
 +
}
 +
#videoOverlay:hover{
 +
transform: scale(1.1);
 +
}
 +
#videoOverlay > p{
 +
font-size:60px;
 +
}
 +
#videoOverlay > span{
 +
font-size:30px;
 +
}
 +
#videoOverlay > img{
 +
width:200px;
 +
height:200px;
 +
background-color:grey;
 +
}
 +
#videoPlayImg{
 +
width:200px;
 +
height:200px;
 +
background-image:url("../images/playButton.png");
 +
background-size:contain;
 +
cursor:pointer;
 +
margin:0 auto;
 +
}
 +
#stopVideoButton{
 +
width:64px;
 +
height:64px;
 +
background-image:url("../images/stopVideo.png");
 +
background-size:contain;
 +
position:absolute;
 +
bottom:80px;
 +
left:0;
 +
right:0;
 +
margin:0 auto;
 +
cursor:pointer;
 +
-webkit-transition: transform 0.3s ease-in-out;
 +
visibility:hidden;
 +
}
 +
#stopVideoButton:hover{
 +
transform: scale(1.2);
 +
}
 +
 
 +
.pageSection{
 +
position: relative;
 +
min-height: 410px;
 +
}
 +
 
 +
#introductionContainer{
 +
width:100%;
 +
margin:0 auto;
 +
text-align:center;
 +
font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
 +
font-size:21px;
 +
margin-top: -5px;
 +
margin-bottom:-65px;
 +
background: #fff;
 +
}
 +
 
 +
#introductionContainer > span{
 +
color: #777;
 +
display: inline-block;
 +
margin-top: 60px;
 +
line-height: 25px;
 +
width:780px;
 +
}
 +
 
 +
#introductionContainer > span > strong{
 +
line-height: 52px;
 +
font-size: 24px;
 +
}
 +
#introPlayVideoButton{
 +
width: 460px;
 +
padding: 15px;
 +
border-radius: 5px;
 +
color: white;
 +
background-color: #2b78ea;
 +
margin: 80px auto;
 +
cursor:pointer;
 +
}
 +
#introPlayVideoButton:hover{
 +
background-color:#056fbc;
 +
}
 +
 
 +
#learnAboutContainer{
 +
border-top: 1px solid #d0d0d6;
 +
border-bottom: 1px solid #d0d0d6;
 +
background-color: #f3f3f3;
 +
margin-top: -3px;
 +
}
 +
.learnAboutInnerWrapper{
 +
width: 1000px;
 +
margin:3px auto;
 +
}
 +
#learnWrapper{
 +
text-align: center;
 +
padding-bottom: 20px;
 +
}
 +
.pageSection:before{
 +
position: absolute;
 +
content: '';
 +
border-left: 20px solid transparent;
 +
border-right: 20px solid transparent;
 +
border-top: 20px solid #739ede;
 +
width: 300px;
 +
left: 50%;
 +
margin-left: -150px;
 +
top: 0px;
 +
z-index: 1;
 +
}
 +
.pageSection h2{
 +
text-align: center;
 +
font-size: 18px;
 +
text-transform: uppercase;
 +
padding: 40px 0px 4px;
 +
letter-spacing: 2px;
 +
border-bottom: 1px solid #b7afaf;
 +
width: 500px;
 +
margin: 0 auto 30px;
 +
position: relative;
 +
z-index: 2;
 +
}
 +
.learnSection {
 +
width: 314px;
 +
height: 200px;
 +
background: url(../images/learn.png);
 +
background-size:contain;
 +
display: inline-block;
 +
margin: 0px 7px 16px 7px;
 +
cursor:pointer;
 +
-webkit-transition: transform 0.3s ease-in-out;
 +
}
 +
.learnSection:hover{
 +
transform: scale(1.1);
 +
}
 +
#interactContainer{
 +
width: 100%;
 +
margin: auto;
 +
display:inline-block;
 +
}
 +
.interactSocial{
 +
    width: 1000px;
 +
    margin: -20px auto 20px;
 +
    overflow: hidden;
 +
}
 +
.interactIcon{
 +
display: inline-block;
 +
float: left;
 +
}
 +
.interactIcon:nth-child(1){
 +
position: absolute !important;
 +
left: 50%;
 +
margin-left: -42px;
 +
}
 +
.interactIcon:last-child{
 +
float: right !important;
 +
}
 +
.interactIcon .icon{
 +
display: inline-block;
 +
width: 40px;
 +
height: 40px;
 +
vertical-align: top;
 +
background-size: 100% !important;
 +
}
 +
.interactIcon .name{
 +
display: inline-block;
 +
font-weight: bold;
 +
margin-top: 10px;
 +
font-size: 13px;
 +
}
 +
.interactIcon .icon.facebook{ background: url("../images/interact/facebook.svg"); }
 +
.interactIcon .icon.twitter{ background: url("../images/interact/twitter.svg"); }
 +
.interactIcon .icon.instagram{ background: url("../images/interact/instagram.svg"); }
 +
#interactImages{
 +
background-image: url('../images/socBanner.png');
 +
height: 400px;
 +
width: 100%;
 +
background-size: cover;
 +
}
 +
.interactFiler{
 +
width: 100%;
 +
background: #3b6f8b;
 +
position: absolute;
 +
top: 133px;
 +
opacity: 0.6;
 +
z-index: 1;
 +
bottom: 0;
 +
}
 +
#socMsg{
 +
background-image: url('../images/checkUsOut.png');
 +
background-size: contain;
 +
width: 1000px;
 +
height: 100px;
 +
margin: 150px auto;
 +
left:0;
 +
right:0;
 +
position:absolute;
 +
z-index:3;
 +
}
 +
.instagramBlock{
 +
float: left;
 +
width: 180px;
 +
}
 +
.instagramBlock img{
 +
width: 100%;
 +
}
 +
 
 +
/* Team */
 +
#teamSection{
 +
width: 1000px;
 +
margin: auto;
 +
}
 +
.team{
 +
text-align: center;
 +
position: relative;
 +
}
 +
.teamShowMore{
 +
width: 107px;
 +
height: 100px;
 +
background-size: 100%;
 +
background-image: url(../images/arrow_left.svg);
 +
position: fixed;
 +
top: 50%;
 +
margin-top: -50px;
 +
cursor: pointer;
 +
z-index: 3;
 +
}
 +
.teamShowMore.active{ background-image: url(../images/arrow_right.svg); }
 +
#teamSupervisors{
 +
position: fixed;
 +
right: -1000px; /* IMPORTANT must be negative of its own width */
 +
background: #fff;
 +
width: 1000px;
 +
z-index: 3;
 +
border: 1px solid #ccc;
 +
display: none;
 +
top: 50%;
 +
height: 577px;
 +
border-radius: 30px;
 +
}
 +
#teamSupervisors li{
 +
position: absolute;
 +
width: 56%;
 +
padding: 10px;
 +
text-align: center;
 +
}
 +
#teamSupervisors li:nth-child(1){ top: 350px; }
 +
#teamSupervisors li:last-child .leftCol{ float: right !important; }
 +
#teamSupervisors li:last-child .description{ float: left !important; }
 +
#teamSupervisors li:last-child{
 +
top: 200px;
 +
right: 0px;
 +
}
 +
#teamSupervisors li .leftCol{
 +
float: left;
 +
width: 50%;
 +
}
 +
#teamSupervisors li .description{
 +
float: right;
 +
width: 50%;
 +
}
 +
.team li{
 +
width: 28%;
 +
display: inline-block;
 +
margin-bottom: 160px;
 +
vertical-align: top;
 +
margin: 0 2% 70px 2%;
 +
}
 +
.teamImage, #teamSupervisors .teamImage{
 +
border-radius: 100%;
 +
overflow: hidden;
 +
width: 180px;
 +
height: 180px;
 +
margin: auto;
 +
}
 +
.teamImage img, #teamSupervisors img{
 +
width: 100%;
 +
margin-top:-15px;
 +
}
 +
.team .name, #teamSupervisors .name{
 +
font-size: 18px;
 +
color: #000;
 +
margin: 10px 0 10px;
 +
}
 +
.team .position, #teamSupervisors .position{
 +
font-size: 13px;
 +
color: #777676;
 +
}
 +
.team .description, #teamSupervisors .description{
 +
font-size: 12px;
 +
letter-spacing: 0px;
 +
margin-top: 20px;
 +
}
 
 
−
var $this = this;
+
#teamIntro{
 +
width:800px;
 +
margin:0 auto;
 +
font-size:21px;
 +
background: #fff;
 +
border-bottom: 1px solid #d0d0d6;
 +
font-size: 13px;
 +
color: #777;
 +
line-height: 25px;
 +
}
  
−
//check if url isnt empty
+
#teamHello{
−
checkUrl = this.getPath(true);
+
font-size: 50px;
−
if(checkUrl.length > 0)
+
    margin-top: 60px;
−
this.defaults.url = checkUrl;
+
    color: #2f6fce;
 +
}
  
−
// load the page
+
.HL{
−
this.loadPage(this.defaults.url);
+
font-weight:bold;
 +
color:#2f6fce;
 +
}
  
−
this.defaults.pageLoaded = true;
+
.legend{
 +
color:#966b6b !important;
 +
margin-top: -35px !important;
 +
    padding-bottom: 55px;
 +
    font-style: italic;
 +
    font-size: 14px;
 +
    width: 650px !important;
 +
line-height:0px;
 +
}
 +
.rubic{
 +
background: url(../images/rubic.png);
 +
width: 36px;
 +
height: 36px;
 +
vertical-align: top;
 +
}
  
−
//timeline close open event
+
.lightBulb{
−
$(document).on("click", ".close_timeline_event", function(){
+
    background: url(../images/light_bulb.png);
−
$this.timelineResetPosition();
+
    width: 27px;
−
$this.timelineCloseEvents(null);
+
    height: 32px;
 +
    vertical-align: top;
 +
}
  
−
sideOpen = "none";
+
.electricity_graph{
−
});
+
display: block;
 +
margin: auto;
 +
}
  
−
//select list item from protocols page
+
.project_fig_three{
−
$(document).on("click", ".protocols_list li", function(){
+
width: 180px;
−
$("#protocols_sub_list_main > li").hide();
+
    float: right;
−
$("#protocols_sub_list_main > li").eq($(".protocols_list li").index(this)).show();
+
    margin-top: 10px;
 +
    margin-left: 60px;
 +
}
  
−
$(".protocols_list li").removeClass("active");
+
.timeIcon{
−
$(this).addClass("active");
+
background: url(../images/clock.png);
 +
width: 32px;
 +
height: 32px;
 +
vertical-align: top;
 +
}
  
−
});
+
.subTitle{
 +
    font-size: 12px;
 +
    font-weight: bold;
 +
    margin-top: 8px;
 +
    margin-bottom: 20px;
 +
    color: #222223;
 +
}
  
−
//image pop up close
+
.timeTitle{
−
$(document).on("click", "#closeImage, #showImageBG", function(){
+
    margin-top: 4px;
−
$("#showImageBG, #showImage").hide();
+
    margin-left: 5px;
−
});
+
}
  
−
//image pop up show image
+
/* Sponsors */
−
$(document).on("click", ".showFullSizeImage", function(){
+
#sponContainer{
−
$("#showImage img").attr("src", this.getAttribute("src"));
+
margin-top: -1px;
−
$("#showImageBG, #showImage").show();
+
border-top: 1px solid #d0d0d6;
−
});
+
z-index: 0;
 +
}
  
−
//timeline show selected event
+
/* Footer */
−
var sideOpen = "none";
+
−
$(document).on("click", ".timeline_event_header", function(e){
+
−
if($(e.target).is(".close_timeline_event"))
+
−
return;
+
  
−
selected = $(this).attr("data-side");
+
#footer{
 +
width: 100%;
 +
height: 120px;
 +
background-color: #2F4F4F;
 +
text-align: center;
 +
font-size: 10px;
 +
color: #fff;
 +
letter-spacing: 2px;
 +
text-transform: uppercase;
 +
padding-top: 10px;
 +
}
 +
.footerInnerWrapper{
 +
width: 1000px;
 +
margin: auto;
 +
}
 +
.footerLeft{
 +
float: left;
 +
margin-top: 10px;
 +
text-align: left;
 +
}
 +
.footerRight{
 +
float: right;
 +
margin-top: 10px;
 +
text-align: right;
 +
}
 +
.footerRow{
 +
margin-bottom: 5px;
 +
cursor: pointer;
 +
}
 +
.footerRow:hover, .footerRow a:hover{
 +
color: #22ffad;
 +
text-decoration: underline;
 +
}
 +
.footerRow span{
 +
display: inline-block;
 +
line-height: 30px;
 +
margin-left: #22ffad;
 +
}
 +
.footerRow a{
 +
color: #fff;
 +
}
 +
.footerIcon{
 +
width: 30px;
 +
height: 30px;
 +
display: inline-block;
 +
vertical-align: top;
 +
}
 +
.footerIcon.twitter{
 +
background: url(../images/twitter.svg);
 +
}
 +
.footerIcon.facebook{
 +
background: url(../images/facebook.svg);
 +
}
  
−
if(sideOpen != selected && sideOpen != "none")
+
/*Page transition */
−
$this.timelineResetPosition();
+
#block1{
 +
background-color:#767FEA;
 +
position:fixed;
 +
z-index:4;
 +
}
 +
#block2{
 +
background-color:#DBE0DF;
 +
position:fixed;
 +
z-index:4;
 +
}
 +
.pageTransition{
 +
width: 100%;
 +
}
 +
.pageTransitionAnimate{
 +
bottom: 0px !important;
 +
left: 0px !important;
 +
top: auto !important;
 +
}
  
−
$this.timelineCloseEvents(this);
+
.pageBanner{
 +
width:100%;
 +
height:550px;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover;
 +
}
  
−
sideOpen = selected;
+
.cd-container {
 +
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 +
  width: 90%;
 +
  max-width: 1170px;
 +
  margin: 0 auto;
 +
}
 +
.cd-container::after {
 +
  /* clearfix */
 +
  content: '';
 +
  display: table;
 +
  clear: both;
 +
}
  
−
$(this)
+
.clear{
−
.addClass("active")
+
clear: left;
−
.animate({
+
}
−
width: 640
+
−
}, function(){
+
−
height = $(".timeline_event_container", this).css("height", "auto").height();
+
  
−
$(".timeline_event_container", this)
+
.bold{
−
.css({
+
font-weight: bold;
−
height: 0,
+
color: #000;
−
visibility: "visible"
+
}
−
})
+
−
.animate({
+
−
height: height
+
−
});
+
−
+
−
});
+
  
−
$(".timeline_vline")
+
/* --------------------------------
−
.addClass("active")
+
−
.animate({
+
−
margin: 0,
+
−
left: sideOpen == "right" ? 300 : 700
+
−
});
+
−
});
+
  
−
$(document).on("click", ".teamShowMore", function(){
+
Main components
−
offset = !$(this).hasClass("active") ? $("#teamSection").offset().left : "-"+ + $("#teamSection").width()+"px";
+
  
−
$("#teamSupervisors")
+
-------------------------------- */
−
.show()
+
header {
−
.css("margin-top", "-"+($("#teamSupervisors").height() / 2)+"px")
+
  height: 200px;
−
.animate({right: offset}, {duration:800, easing:"easeInOutCubic"});
+
  line-height: 200px;
 +
  text-align: center;
 +
  background: #303e49;
 +
}
 +
header h1 {
 +
  color: white;
 +
  font-size: 18px;
 +
  font-size: 1.125rem;
 +
}
 +
@media only screen and (min-width: 1170px) {
 +
  header {
 +
    height: 300px;
 +
    line-height: 300px;
 +
  }
 +
  header h1 {
 +
    font-size: 24px;
 +
    font-size: 1.5rem;
 +
  }
 +
}
  
−
$(this).toggleClass("active");
+
#cd-timeline {
−
});
+
  position: relative;
 +
  padding: 2em 0;
 +
  margin-top: 2em;
 +
  margin-bottom: 2em;
 +
}
 +
#cd-timeline::before {
 +
  /* this is the vertical line */
 +
  content: '';
 +
  position: absolute;
 +
  top: 0;
 +
  left: 18px;
 +
  height: 100%;
 +
  width: 4px;
 +
  background: #d7e4ed;
 +
}
 +
@media only screen and (min-width: 1170px) {
 +
  #cd-timeline {
 +
    margin-top: 3em;
 +
    margin-bottom: 3em;
 +
  }
 +
  #cd-timeline::before {
 +
    left: 50%;
 +
    margin-left: -2px;
 +
  }
 +
}
  
−
$(document).on("click", "a", function(e){
+
.cd-timeline-block {
−
if($(this).hasClass("directFile"))
+
  position: relative;
−
return true;
+
  margin: 2em 0;
 +
}
 +
.cd-timeline-block:after {
 +
  content: "";
 +
  display: table;
 +
  clear: both;
 +
}
 +
.cd-timeline-block:first-child {
 +
  margin-top: 0;
 +
}
 +
.cd-timeline-block:last-child {
 +
  margin-bottom: 0;
 +
}
 +
@media only screen and (min-width: 1170px) {
 +
  .cd-timeline-block {
 +
    margin: 4em 0;
 +
  }
 +
  .cd-timeline-block:first-child {
 +
    margin-top: 0;
 +
  }
 +
  .cd-timeline-block:last-child {
 +
    margin-bottom: 0;
 +
  }
 +
}
  
−
e.preventDefault();
+
.cd-timeline-img {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 40px;
 +
  height: 40px;
 +
  border-radius: 50%;
 +
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
 +
}
 +
.cd-timeline-img img {
 +
  display: block;
 +
  width: 24px;
 +
  height: 24px;
 +
  position: relative;
 +
  left: 50%;
 +
  top: 50%;
 +
  margin-left: -12px;
 +
  margin-top: -12px;
 +
}
 +
.cd-timeline-img.cd-picture {
 +
  background: #f9f9f9;
 +
}
 +
.cd-timeline-img.cd-movie {
 +
  background: #c03b44;
 +
}
 +
.cd-timeline-img.cd-location {
 +
  background: #f0ca45;
 +
}
 +
@media only screen and (min-width: 1170px) {
 +
  .cd-timeline-img {
 +
    width: 60px;
 +
    height: 60px;
 +
    left: 50%;
 +
    margin-left: -30px;
 +
    /* Force Hardware Acceleration in WebKit */
 +
    -webkit-transform: translateZ(0);
 +
    -webkit-backface-visibility: hidden;
 +
  }
 +
  .cssanimations .cd-timeline-img.is-hidden {
 +
    visibility: hidden;
 +
  }
 +
  .cssanimations .cd-timeline-img.bounce-in {
 +
    visibility: visible;
 +
    -webkit-animation: cd-bounce-1 0.6s;
 +
    -moz-animation: cd-bounce-1 0.6s;
 +
    animation: cd-bounce-1 0.6s;
 +
  }
 +
}
  
−
url = this.getAttribute("href");
+
@-webkit-keyframes cd-bounce-1 {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale(0.5);
 +
  }
  
−
//empty url
+
  60% {
−
if(url == "#" || url.length == 0)
+
    opacity: 1;
−
return;
+
    -webkit-transform: scale(1.2);
 +
  }
  
−
web.defaults.url = this.getAttribute("href");
+
  100% {
 +
    -webkit-transform: scale(1);
 +
  }
 +
}
 +
@-moz-keyframes cd-bounce-1 {
 +
  0% {
 +
    opacity: 0;
 +
    -moz-transform: scale(0.5);
 +
  }
  
−
window.history.pushState({path: web.defaults.url}, "", web.defaults.url);
+
  60% {
 +
    opacity: 1;
 +
    -moz-transform: scale(1.2);
 +
  }
  
−
$this.loadPage(web.defaults.url);
+
  100% {
−
});
+
    -moz-transform: scale(1);
 +
  }
 +
}
 +
@keyframes cd-bounce-1 {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: scale(0.5);
 +
    -moz-transform: scale(0.5);
 +
    -ms-transform: scale(0.5);
 +
    -o-transform: scale(0.5);
 +
    transform: scale(0.5);
 +
  }
  
−
$(window).bind('popstate', function() {
+
  60% {
−
if(window.history.state == null)
+
    opacity: 1;
−
web.defaults.url = "";
+
    -webkit-transform: scale(1.2);
−
else
+
    -moz-transform: scale(1.2);
−
web.defaults.url = window.history.state.path;
+
    -ms-transform: scale(1.2);
 +
    -o-transform: scale(1.2);
 +
    transform: scale(1.2);
 +
  }
  
−
$this.loadPage(web.defaults.url);
+
  100% {
−
});
+
    -webkit-transform: scale(1);
−
},
+
    -moz-transform: scale(1);
 +
    -ms-transform: scale(1);
 +
    -o-transform: scale(1);
 +
    transform: scale(1);
 +
  }
 +
}
 +
.cd-timeline-content {
 +
  position: relative;
 +
  margin-left: 60px;
 +
  background: white;
 +
  border-radius: 0.25em;
 +
  padding: 1em;
 +
  box-shadow: 0 3px 0 #d7e4ed;
 +
}
 +
.cd-timeline-content:after {
 +
  content: "";
 +
  display: table;
 +
  clear: both;
 +
}
 +
.cd-timeline-content h2 {
 +
  color: #303e49;
 +
}
 +
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
 +
  font-size: 13px;
 +
  font-size: 0.8125rem;
 +
}
 +
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
 +
  display: inline-block;
 +
}
 +
.cd-timeline-content p {
 +
  margin: 1em 0;
 +
  line-height: 1.6;
 +
}
 +
.cd-timeline-content .cd-read-more {
 +
  float: right;
 +
  padding: .8em 1em;
 +
  background: #acb7c0;
 +
  color: white;
 +
  border-radius: 0.25em;
 +
}
 +
.no-touch .cd-timeline-content .cd-read-more:hover {
 +
  background-color: #bac4cb;
 +
}
 +
.cd-timeline-content .cd-date {
 +
  float: left;
 +
  padding: .8em 0;
 +
  opacity: .7;
 +
}
 +
.cd-timeline-content::before {
 +
  content: '';
 +
  position: absolute;
 +
  top: 16px;
 +
  right: 100%;
 +
  height: 0;
 +
  width: 0;
 +
  border: 7px solid transparent;
 +
  border-right: 7px solid white;
 +
}
 +
@media only screen and (min-width: 768px) {
 +
  .cd-timeline-content h2 {
 +
    font-size: 20px;
 +
    font-size: 1.25rem;
 +
  }
 +
  .cd-timeline-content p {
 +
    font-size: 16px;
 +
    font-size: 1rem;
 +
  }
 +
  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
 +
    font-size: 14px;
 +
    font-size: 0.875rem;
 +
  }
 +
}
 +
@media only screen and (min-width: 1170px) {
 +
  .cd-timeline-content {
 +
    margin-left: 0;
 +
    padding: 1.6em;
 +
    width: 45%;
 +
  }
 +
  .cd-timeline-content::before {
 +
    top: 24px;
 +
    left: 100%;
 +
    border-color: transparent;
 +
    border-left-color: white;
 +
  }
 +
  .cd-timeline-content .cd-read-more {
 +
    float: left;
 +
  }
 +
  .cd-timeline-content .cd-date {
 +
    position: absolute;
 +
    width: 100%;
 +
    left: 80%;
 +
    top: 6px;
 +
    font-size: 16px;
 +
    font-size: 1rem;
 +
  }
 +
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
 +
    float: right;
 +
  }
 +
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
 +
    top: 24px;
 +
    left: auto;
 +
    right: 100%;
 +
    border-color: transparent;
 +
    border-right-color: white;
 +
  }
 +
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
 +
    float: right;
 +
  }
 +
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
 +
    left: auto;
 +
    right: 122%;
 +
    text-align: right;
 +
  }
 +
  .cssanimations .cd-timeline-content.is-hidden {
 +
    visibility: hidden;
 +
  }
 +
  .cssanimations .cd-timeline-content.bounce-in {
 +
    visibility: visible;
 +
    -webkit-animation: cd-bounce-2 0.6s;
 +
    -moz-animation: cd-bounce-2 0.6s;
 +
    animation: cd-bounce-2 0.6s;
 +
  }
 +
}
  
−
getPath: function(string){
+
@media only screen and (min-width: 1170px) {
−
url = window.location.pathname;
+
  /* inverse bounce effect on even content blocks */
−
url = url.split("/");
+
  .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
−
url = url.slice(1, 100);
+
    -webkit-animation: cd-bounce-2-inverse 0.6s;
 +
    -moz-animation: cd-bounce-2-inverse 0.6s;
 +
    animation: cd-bounce-2-inverse 0.6s;
 +
  }
 +
}
 +
@-webkit-keyframes cd-bounce-2 {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-100px);
 +
  }
  
−
if(string === true)
+
  60% {
−
return url.join("/");
+
    opacity: 1;
−
else
+
    -webkit-transform: translateX(20px);
−
return url;
+
  }
−
},
+
  
−
timelineCloseEvents: function(exclude){
+
  100% {
−
$.each($(".timeline_event_container"), function(){
+
    -webkit-transform: translateX(0);
 +
  }
 +
}
 +
@-moz-keyframes cd-bounce-2 {
 +
  0% {
 +
    opacity: 0;
 +
    -moz-transform: translateX(-100px);
 +
  }
  
−
if(exclude == $(this).parents(".timeline_event_header")[0])
+
  60% {
−
return;
+
    opacity: 1;
 +
    -moz-transform: translateX(20px);
 +
  }
  
−
$(this).animate({
+
  100% {
−
height: 0
+
    -moz-transform: translateX(0);
−
}, function(){
+
  }
−
$(this).css("visibility", "hidden");
+
}
 +
@keyframes cd-bounce-2 {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-100px);
 +
    -moz-transform: translateX(-100px);
 +
    -ms-transform: translateX(-100px);
 +
    -o-transform: translateX(-100px);
 +
    transform: translateX(-100px);
 +
  }
  
−
$(this).parents(".timeline_event_header").animate({
+
  60% {
−
width: 150
+
    opacity: 1;
−
}, function(){
+
    -webkit-transform: translateX(20px);
−
$(this).removeClass("active")
+
    -moz-transform: translateX(20px);
−
});
+
    -ms-transform: translateX(20px);
−
});
+
    -o-transform: translateX(20px);
−
});
+
    transform: translateX(20px);
−
},
+
  }
  
−
timelineResetPosition: function(){
+
  100% {
−
console.log("test")
+
    -webkit-transform: translateX(0);
−
$(".timeline_vline")
+
    -moz-transform: translateX(0);
−
.addClass("active")
+
    -ms-transform: translateX(0);
−
.animate({
+
    -o-transform: translateX(0);
−
margin: "-2px",
+
    transform: translateX(0);
−
left: "50%"
+
  }
−
});
+
}
−
},
+
@-webkit-keyframes cd-bounce-2-inverse {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(100px);
 +
  }
  
−
resetPageTransition: function(el){
+
  60% {
−
$(el)
+
    opacity: 1;
−
.removeClass("pageTransitionAnimate")
+
    -webkit-transform: translateX(-20px);
−
.css({
+
  }
−
top: 0,
+
−
left: 0
+
−
})
+
−
.animate({
+
−
height: 0
+
−
}, 400, "easeOutQuint");
+
−
},
+
  
−
animatePageTransition: function(){
+
  100% {
−
var $this = this;
+
    -webkit-transform: translateX(0);
 +
  }
 +
}
 +
@-moz-keyframes cd-bounce-2-inverse {
 +
  0% {
 +
    opacity: 0;
 +
    -moz-transform: translateX(100px);
 +
  }
  
−
$(".pageTransition").addClass("pageTransitionAnimate");
+
  60% {
 +
    opacity: 1;
 +
    -moz-transform: translateX(-20px);
 +
  }
  
−
$("#block1").animate(
+
  100% {
−
{ height: $(window).width() + "px" },
+
    -moz-transform: translateX(0);
−
700, "easeInQuad",
+
  }
−
function(){
+
}
−
$this.resetPageTransition(this);
+
@keyframes cd-bounce-2-inverse {
−
}
+
  0% {
−
);
+
    opacity: 0;
 +
    -webkit-transform: translateX(100px);
 +
    -moz-transform: translateX(100px);
 +
    -ms-transform: translateX(100px);
 +
    -o-transform: translateX(100px);
 +
    transform: translateX(100px);
 +
  }
  
−
$("#block2").animate(
+
  60% {
−
{ height: $(window).width() + "px" },
+
    opacity: 1;
−
1000, "easeInQuad",
+
    -webkit-transform: translateX(-20px);
−
function(){
+
    -moz-transform: translateX(-20px);
−
$this.resetPageTransition(this);
+
    -ms-transform: translateX(-20px);
−
}
+
    -o-transform: translateX(-20px);
−
);
+
    transform: translateX(-20px);
−
},
+
  }
  
−
resize: function(){
+
  100% {
−
width = window.innerWidth;
+
    -webkit-transform: translateX(0);
−
height = window.innerHeight;
+
    -moz-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    -o-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
  
−
//resize only current page elements
+
#globalTemp{
−
/*if(this.defaults.url == "home"){
+
position:relative;
−
$(".instagramBlock").css({
+
width:720px;
−
width: width / Math.ceil(width / $(".instagramBlock").width())
+
height:610px;
−
});
+
margin: 0 auto;
−
}*/
+
margin-bottom: 30px;
 +
}
  
−
if(this.defaults.url == "team"){
+
.timeSeriesImage{
−
$(".teamShowMore").css("right", $("#teamSection").offset().left / 2);
+
position:absolute;
−
}
+
top:100px;
−
},
+
left:0;
 +
width:100%;
 +
height:405px;
 +
visibility:hidden;
 +
}
  
−
/*renderHomePage: function(){
+
.currentSeriesImage{
−
var prefix = "media/images/instagram/";
+
visibility:visible;
−
var instagramImages = [];
+
}
−
+
−
for(var i=1; i<=20; i++){
+
−
// imagePath = prefix + i + ".jpg";
+
−
imagePath = prefix+"2.jpg";
+
  
−
$("#interactImages").append('\
+
#changeSeriesImage{
−
<div class="instagramBlock">\
+
position:absolute;
−
<img src="'+imagePath+'" />\
+
bottom:0;
−
</div>'
+
left:0;
−
);
+
}
−
}
+
−
},*/
+
  
−
loadPage: function(url){
+
#tempHeader > #leftCol{
−
//dont animate page transition if website was just loaded/reloaded
+
float: left;
−
if(this.defaults.pageLoaded !== false)
+
    text-align: left;
−
this.animatePageTransition();
+
    color: #c15a4f;
 +
    font-weight: bold;
 +
    font-size: 20px;
 +
display:inline-block;
 +
}
  
−
var $this = this;
+
#tempHeader > #leftCol > span{
 +
font-size: 10px;
 +
    display: inline-block;
 +
    color: #000;
 +
    line-height: 14px;
 +
}
  
 +
#tempHeader > #rightCol{
 +
    float: right;
 +
    font-size: 20px;
 +
    color: #0bbd9e;
 +
    margin-top: 7px;
 +
}
  
−
if(url.length == 0){
+
.time_series{
−
url = this.getPath(false);
+
    text-align: center;
−
url = url.join("/");
+
    margin-bottom: 36px;
−
}
+
    color: #000;
 +
    font-weight: bold;
 +
    font-size: 12px;
 +
    margin-top: 30px;
 +
}
  
−
url = url.replace(/\/$/, "");
+
#tempSlider{
−
+
width: 530px;
−
$.ajax({
+
    position: absolute;
−
"url": "/"+this.defaults.pagesDir+"/"+url+".html",
+
    bottom: 3px;
−
"dataType": "html",
+
    left: 115px;
−
success: function(response){
+
    background-color: #c15a4f;
−
setTimeout(function(){
+
height:10px;
−
$this.defaults.contentWrapper.html(response);
+
}
  
−
if($this.defaults.url == "project"){
+
.ui-slider-handle{
−
var lastChild = 2;
+
    border-radius: 100%;
−
+
    height: 25px;
−
//global temperature slider
+
    width: 25px;
−
$("#tempSlider").slider({
+
    margin-top: -3px;
−
min: 2,
+
border-color:#c15a4f !important;
−
max: 5,
+
border-width:3px !important;
−
slide: function(event, ui){
+
cursor:move !important;
−
var child = ui.value;
+
}
−
+
−
$("#globalTemp .timeSeriesImage:nth-child("+lastChild+")").removeClass("currentSeriesImage");
+
−
$("#globalTemp .timeSeriesImage:nth-child("+child+")").addClass("currentSeriesImage");
+
−
var year = $("#globalTemp .timeSeriesImage:nth-child("+child+")").attr("title");
+
−
+
−
//idk why but it goes undefined so we gotta do an extra check
+
−
if(child == 2){
+
−
year = "1884";
+
−
}
+
−
+
−
$("#tempHeader > #rightCol").text(year);
+
−
lastChild = child;
+
−
}
+
−
});
+
−
}
+
−
+
−
//$this.renderHomePage();
+
−
$this.resize();
+
−
}, 500);
+
−
},
+
−
error: function(jqXHR){
+
−
alert("Error page could not be loaded!");
+
−
console.log(jqXHR);
+
−
}
+
−
});
+
−
}
+
−
};
+
  
−
web.initialize();
+
.ui-slider-handle:hover, .ui-slider-handle:active, .ui-state-active{
−
+
background-color:white;
−
$(document).on("click", "#videoPlayImg", function(){
+
}
−
$("#bannerVideo").css('opacity', 1).animate( { opacity: 0 }, 400).animate( { opacity: 1 }, 500);
+
 
−
$("#videoOverlay").fadeOut("slow");
+
#playTemp{
−
$("#stopVideoButton").css("visibility","visible").fadeIn("slow");
+
width: 30px;
−
+
    height: 30px;
−
setTimeout(function(){
+
    position: absolute;
−
document.getElementById("bannerVideo").play();
+
    bottom: -6px;
−
}, 600);
+
    left: 6px;
−
});
+
    background-image: url(../images/playTemp.png);
 +
    background-repeat: no-repeat;
 +
    cursor: pointer;
 +
    background-position: 50%;
 +
}
 +
 
 +
 
 +
#timeline{
 +
width: 1000px;
 +
margin: auto;
 +
position: relative;
 +
}
 +
 
 +
.timeline_vline{
 +
position: relative;
 +
height: 100%;
 +
width: 3px;
 +
background-color: #ee4d4d;
 +
left: 50%;
 +
margin-left: -2px;
 +
padding-bottom: 130px;
 +
}
 +
 
 +
.timeline_vline.active{
 
 
−
$(document).on("click", "#stopVideoButton", function(){
+
}
−
document.getElementById("bannerVideo").pause();
+
 
−
$("#videoOverlay").fadeIn("slow");
+
.timeline_bubble{
−
$("#stopVideoButton").fadeOut("slow");
+
width: 40px;
−
});
+
height: 40px;
−
+
background-color: #ee4d4d;
−
$(document).on("click", "#introPlayVideoButton", function(){
+
margin: 0px 0px 60px -18px;
−
$('body, html').animate({ scrollTop: $("#bannerVideo").offset().top }, 600);
+
border-radius: 33px;
−
$("#videoPlayImg").trigger("click");
+
position: relative;
−
});
+
background-image: url(../images/star.png);
−
+
background-repeat: no-repeat;
−
//play the global temp gallery
+
background-size: 18px;
−
var playing = 0;
+
background-position: 11px 11px;
−
var timer;
+
}
−
+
 
−
function playGlobalTempGallery(){
+
 
−
var element = $("#globalTemp").find(".currentSeriesImage");
+
.timeline_event_header{
−
var childNum = $(".timeSeriesImage").index(element)+2;
+
    background: #ee4d4d;
−
+
    position: absolute;
−
timer = setTimeout(function(){
+
    left: 62px;
−
+
    top: 6px;
−
if(childNum < 5){
+
    color: #fff;
−
$("#globalTemp .timeSeriesImage:nth-child("+childNum+")").removeClass("currentSeriesImage");
+
    border-radius: 4px;
−
$("#globalTemp .timeSeriesImage:nth-child("+(++childNum)+")").addClass("currentSeriesImage");
+
    width: 150px;
−
$("#tempSlider").slider("value",$("#tempSlider").slider("value")+1);
+
    cursor: pointer;
−
console.log("hug");
+
}
−
+
 
−
var year = $("#globalTemp .timeSeriesImage:nth-child("+childNum+")").attr("title");
+
.timeline_event_header_container{
−
$("#tempHeader > #rightCol").text(year);
+
padding: 5px 10px;
−
+
    text-align: center;
−
playGlobalTempGallery();
+
    font-weight: bold;
−
}else{
+
    color: #fff;
−
clearTimeout(timer);
+
}
−
+
 
−
setTimeout(function(){
+
.timeline_event_header:hover, .timeline_event_header.active{
−
$("#globalTemp .timeSeriesImage:nth-child("+childNum+")").removeClass("currentSeriesImage");
+
background-color: #00a4ff;
−
$("#globalTemp .timeSeriesImage:nth-child(2)").addClass("currentSeriesImage");
+
}
−
$("#tempSlider").slider("value",2);
+
 
−
playing = 0;
+
.timeline_event_header:hover:before, .timeline_event_header.active:before{
−
$("#playTemp").css("background-image","url(media/images/playTemp.png)");
+
border-right: 13px solid #00a4ff;
−
$("#tempHeader > #rightCol").text("1884");
+
}
−
},1000);
+
 
−
}
+
.timeline_bubble:nth-child(2n):hover .timeline_event_header:before,
−
+
.timeline_bubble:nth-child(2n) .timeline_event_header.active:before{
−
}, 500)
+
border-left: 13px solid #00a4ff;
−
}
+
}
−
+
 
−
$(document).on("click", "#playTemp", function(){
+
.timeline_event_header.active .timeline_event_container{
−
if(playing == 0){
+
}
−
playing = 1;
+
 
−
$("#playTemp").css("background-image","url(media/images/pauseTemp.png)");
+
.timeline_event_container{
−
playGlobalTempGallery();
+
    background-color: #fff;
−
}else{
+
    border: 1px solid #00a4ff;
−
clearTimeout(timer);
+
    color: #777;
−
playing = 0;
+
    cursor: auto;
−
$("#playTemp").css("background-image","url(media/images/playTemp.png)");
+
    overflow: hidden;
−
}
+
    height: 0px;
−
});
+
    visibility: hidden;
−
});
+
}
 +
 
 +
.timeline_event_inner{
 +
padding: 8px 8px 20px;
 +
}
 +
 
 +
.timeline_event_inner p{
 +
margin-bottom: 10px;
 +
}
 +
 
 +
.close_timeline_event{
 +
    width: 16px;
 +
    height: 16px;
 +
    background: url(../images/close_up.png);
 +
    position: absolute;
 +
    bottom: 4px;
 +
    left: 50%;
 +
    margin-left: -7px;
 +
    cursor: pointer;
 +
}
 +
 
 +
.timeline_event_inner img{
 +
    max-width: 130px;
 +
    float: right;
 +
    margin-left: 10px;
 +
    margin-bottom: 10px;
 +
}
 +
 
 +
.timeline_event_header:before{
 +
    width: 0;
 +
    height: 0;
 +
    border-top: 7px solid transparent;
 +
    border-right: 13px solid #ee4d4d;
 +
    border-bottom: 7px solid transparent;
 +
    content: '';
 +
    position: absolute;
 +
    left: -13px;
 +
    top: 6px;
 +
}
 +
 
 +
.timeline_bubble:nth-child(2n) .timeline_event_header{
 +
left: auto;
 +
right: 62px;
 +
}
 +
 
 +
.timeline_bubble:nth-child(2n) .timeline_event_header:before{
 +
    border-right: 0px;
 +
    border-left: 13px solid #ee4d4d;
 +
    left: auto;
 +
    right: -13px;
 +
}
 +
 
 +
.displayInline{
 +
    display: inline-block;
 +
}
 +
 
 +
#showImage{
 +
    width: 500px;
 +
    padding: 20px;
 +
    position: fixed;
 +
    left: 50%;
 +
    margin-left: -250px;
 +
    background: #fff;
 +
    z-index: 9999;
 +
    top: 10%;
 +
    border: 1px solid #ccc;
 +
    border-radius: 5px;
 +
    display: none;
 +
}
 +
 
 +
#showImageBG{
 +
    position: fixed;
 +
    width: 100%;
 +
    height: 100%;
 +
    background: url(../images/transparent_bg.png);
 +
    top: 0px;
 +
    left: 0px;
 +
    z-index: 999;
 +
    display: none;
 +
}
 +
 
 +
#closeImage{
 +
position: absolute;
 +
top: 5px;
 +
right: 5px;
 +
background: url(../images/close.png);
 +
width: 16px;
 +
height: 16px;
 +
cursor: pointer;
 +
}
 +
 
 +
#showImage img{
 +
width: 100%;
 +
}
 +
 
 +
 
 +
.protocols{
 +
width: 900px;
 +
margin: auto;
 +
}
 +
 
 +
.protocols_list{
 +
    width: 200px;
 +
    background: #716d6d;
 +
    color: #fff;
 +
    border-right: 6px solid #57c7f1;
 +
    vertical-align: top;
 +
}
 +
 
 +
.protocols_list li.active{
 +
background: #57c7f1;
 +
}
 +
 
 +
.protocols_list li{
 +
    padding: 11px 11px;
 +
    font-size: 11px;
 +
    font-weight: bold;
 +
    border-bottom: 1px solid #565656;
 +
    cursor: pointer;
 +
}
 +
 
 +
.protocols_list li:hover{
 +
background: #57c7f1;
 +
}
 +
 
 +
#protocolsSection{
 +
width: 680px;
 +
vertical-align: top;
 +
}
 +
 
 +
#protocols_content{
 +
padding: 30px 0;
 +
}
 +
 
 +
.protocols_sub_list{
 +
padding: 0 20px;
 +
}
 +
 
 +
.protocols_sub_list li{
 +
padding: 10px 0px;
 +
}
 +
 
 +
#protocols_sub_list_main > li{
 +
display: none;
 +
}
 +
 
 +
#partsSection{
 +
width: 900px;
 +
margin: auto;
 +
}
 +
 
 +
.tables{
 +
    border: 1px solid #b7afaf;
 +
    border-bottom: 0px;
 +
    border-right: 0px;
 +
    border-spacing: 0;
 +
    margin-top: 20px;
 +
    width: 100%;
 +
}
 +
 
 +
.tables td, .tables th{
 +
    border-bottom: 1px solid #b7afaf;
 +
    border-right: 1px solid #b7afaf;
 +
    text-align: center;
 +
    padding: 5px;
 +
}
 +
 
 +
.tables th{
 +
background: #e9f8ff;
 +
}
 +
 
 +
#safetySection{
 +
width: 900px;
 +
margin: auto;
 +
}
 +
 
 +
.safety_image{
 +
float: right;
 +
margin-left: 40px;
 +
}
 +
 
 +
.safety_protocols_title{
 +
margin-top: 85px;
 +
}
 +
 
 +
.safety_protocols{
 +
margin-left: 23px;
 +
margin-bottom: 30px;
 +
}
 +
 
 +
.safety_lists{
 +
list-style: initial;
 +
margin-left: 12px;
 +
margin-bottom: 30px;
 +
}
 +
 
 +
#attributions{
 +
width: 900px;
 +
margin: auto;
 +
}
 +
 
 +
.attr_name{
 +
display: inline-block;
 +
width: 120px;
 +
font-weight: bold;
 +
color: #000;
 +
}
 +
 
 +
.attr_name_title{
 +
 
 +
}
 +
 
 +
.attr_team li{
 +
padding-top: 6px;
 +
}
 +
 
 +
.attr_team{
 +
float: left;
 +
width: 530px;
 +
margin-bottom: 30px;
 +
}
 +
 
 +
.attr_team.rightCol {
 +
float: right;
 +
width: 500px;
 +
}
 +
 
 +
.attr_team.rightCol .attr_name{
 +
float: right;
 +
text-align: right;
 +
}
 +
 
 +
.attr_team.rightCol .attr_name_title{
 +
text-align: right;
 +
    display: inline-block;
 +
    width: 380px;
 +
}
 +
 
 +
.attr_teamwork{
 +
    background: url(../images/teamwork.png);
 +
    width: 128px;
 +
    height: 125px;
 +
    margin-left: 20px;
 +
    margin-bottom: 20px;
 +
}
 +
 
 +
.attr_tech p{
 +
margin-bottom: 10px;
 +
}
 +
 
 +
.attr_additionally{
 +
margin: 30px 0;
 +
}
 +
 
 +
#virtual_list{
 +
list-style-type: disc;
 +
}
 +
 
 +
#virtual_list a{
 +
display: inline-block;
 +
    width: 70px;
 +
    color: #0b28bd;
 +
}
 +
 
 +
#virtual_list a:hover{
 +
text-decoration: underline;
 +
}
 +
 
 +
#practice_section{
 +
width: 900px;
 +
margin: auto;
 +
}
 +
 
 +
.practices_section img{
 +
    max-width: 300px;
 +
    vertical-align: top;
 +
}
 +
 
 +
.practices_section{
 +
overflow: hidden;
 +
margin-bottom: 30px;
 +
}
 +
 
 +
.practices_wrapper p{
 +
margin-bottom: 15px;
 +
}
 +
 
 +
.practices_wrapper{
 +
margin-bottom: 30px;
 +
}
 +
 
 +
.practices_button{
 +
    position: absolute;
 +
    color: #fff;
 +
    border: 2px solid #fff;
 +
    display: block;
 +
    top: 50%;
 +
    left: 50%;
 +
    width: 130px;
 +
    font-size: 17px;
 +
    font-weight: bold;
 +
    text-align: center;
 +
    padding: 6px 0px;
 +
    margin-left: -65px;
 +
    margin-top: -17px;
 +
    webkit-transform: rotateY(90deg);
 +
    -moz-transform: rotateY(90deg);
 +
    -ms-transform: rotateY(90deg);
 +
    -o-transform: rotateY(90deg);
 +
    transform: rotateY(90deg);
 +
    -webkit-transition: all 0.5s ease 0s;
 +
    -moz-transition: all 0.5s ease 0s;
 +
    -ms-transition: all 0.5s ease 0s;
 +
    -o-transition: all 0.5s ease 0s;
 +
    transition: all 0.5s ease 0s;
 +
}
 +
 
 +
.practices_image_cont:hover .practices_button{
 +
    -webkit-transform: rotatey(0deg);
 +
    -moz-transform: rotatey(0deg);
 +
    -ms-transform: rotatey(0deg);
 +
    -o-transform: rotatey(0deg);
 +
    transform: rotatey(0deg);
 +
}
 +
 
 +
.practices_image_cont{
 +
position: relative;
 +
    margin-left: 160px;
 +
    float: right;
 +
    margin-top: 12px;
 +
}
 +
 
 +
.practices_image_cont:before{
 +
background: rgba(70, 109, 156, 0.69);
 +
content: '';
 +
width: 100%;
 +
height: 100%;
 +
position: absolute;
 +
-webkit-transform: rotateX(90deg);
 +
-moz-transform: rotateX(90deg);
 +
-ms-transform: rotateX(90deg);
 +
-o-transform: rotateX(90deg);
 +
transform: rotateX(90deg);
 +
-webkit-transition: all 0.5s ease 0s;
 +
-moz-transition: all 0.5s ease 0s;
 +
-ms-transition: all 0.5s ease 0s;
 +
-o-transition: all 0.5s ease 0s;
 +
transition: all 0.5s ease 0s;
 +
}
 +
 
 +
.practices_image_cont:hover:before{
 +
    -webkit-transform: rotatex(0deg);
 +
    -moz-transform: rotatex(0deg);
 +
    -ms-transform: rotatex(0deg);
 +
    -o-transform: rotatex(0deg);
 +
    transform: rotatex(0deg);
 +
}

Latest revision as of 15:07, 17 October 2016

body{ font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; overflow-x:hidden; color: #444; }

a{ color: #4444ff; }

a:hover{ text-decoration: underline; }

  • , *:after, *:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

}

.showFullSizeImage{ cursor: pointer; }

.imageTextWrap{ float: right; margin: 5px; }

.centerMiddle{ margin: auto; display: block; }

.italics{ font-style: italic; }

.underline{ text-decoration: underline; }

.centerTextMiddle{ text-align: center; }

/* Content Wrapper */

  1. container{

}

  1. contentWrapper{

margin: auto; }

/* Header menu */ #menu{ width:100%; border-bottom: solid 1px rgb(169,169,169); }

#menu > ul { width:940px; margin:0 auto 0; height: 73px; } #menu > ul > li{ color: rgb(140,154,161); list-style-type: none; display: inline-block; width: 100px; text-align: center; cursor: pointer; height: 100%; vertical-align: middle; position: relative; } #menu > ul > li:hover{ color:rgb(64,64,64); background-color:rgb(240,240,240); } #logoWrapper:hover{ background-color: transparent !important; cursor: default; } #menu li:hover .subMenu{ display: block; } #menu li > a{ text-decoration: none; color: rgb(140,154,161); display: block; font-size: 16px; display: table; height: 100%; width: 100%; } #logo{ width: 62px; height: 62px; background-image: url("../images/logo.png"); background-size: 62px 62px; background-repeat: no-repeat; display: block !important; margin: 5px auto; } .subMenu{ position: absolute; background: #fff; width: 100%; text-align: left; top: 70px; display: none; z-index: 3; } .subMenu li a{ padding: 3px 6px; border-bottom: 1px solid; font-size: 13px !important; } .subMenu li a:hover{ background-color: #f0f0f0; } #menu li div{ display: table-cell; vertical-align: middle; line-height: 16px; }

/* Home Page */

  1. video{

margin-top: -3px; position:relative; z-index:0; } #video video{ width: 100%; }

#videoOverlay{ width: 600px; height: 400px; position: absolute; z-index: 1; color: white; left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align:center; text-transform:uppercase; line-height:60px; -webkit-transition: transform 0.3s ease-in-out; visibility:visible; } #videoOverlay:hover{ transform: scale(1.1); } #videoOverlay > p{ font-size:60px; } #videoOverlay > span{ font-size:30px; } #videoOverlay > img{ width:200px; height:200px; background-color:grey; } #videoPlayImg{ width:200px; height:200px; background-image:url("../images/playButton.png"); background-size:contain; cursor:pointer; margin:0 auto; } #stopVideoButton{ width:64px; height:64px; background-image:url("../images/stopVideo.png"); background-size:contain; position:absolute; bottom:80px; left:0; right:0; margin:0 auto; cursor:pointer; -webkit-transition: transform 0.3s ease-in-out; visibility:hidden; } #stopVideoButton:hover{ transform: scale(1.2); }

.pageSection{ position: relative; min-height: 410px; }

  1. introductionContainer{

width:100%; margin:0 auto; text-align:center; font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:21px; margin-top: -5px; margin-bottom:-65px; background: #fff; }

#introductionContainer > span{ color: #777; display: inline-block; margin-top: 60px; line-height: 25px; width:780px; }

#introductionContainer > span > strong{ line-height: 52px; font-size: 24px; } #introPlayVideoButton{ width: 460px; padding: 15px; border-radius: 5px; color: white; background-color: #2b78ea; margin: 80px auto; cursor:pointer; } #introPlayVideoButton:hover{ background-color:#056fbc; }

  1. learnAboutContainer{

border-top: 1px solid #d0d0d6; border-bottom: 1px solid #d0d0d6; background-color: #f3f3f3; margin-top: -3px; } .learnAboutInnerWrapper{ width: 1000px; margin:3px auto; } #learnWrapper{ text-align: center; padding-bottom: 20px; } .pageSection:before{ position: absolute; content: ; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #739ede; width: 300px; left: 50%; margin-left: -150px; top: 0px; z-index: 1; } .pageSection h2{ text-align: center; font-size: 18px; text-transform: uppercase; padding: 40px 0px 4px; letter-spacing: 2px; border-bottom: 1px solid #b7afaf; width: 500px; margin: 0 auto 30px; position: relative; z-index: 2; } .learnSection { width: 314px; height: 200px; background: url(../images/learn.png); background-size:contain; display: inline-block; margin: 0px 7px 16px 7px; cursor:pointer; -webkit-transition: transform 0.3s ease-in-out; } .learnSection:hover{ transform: scale(1.1); }

  1. interactContainer{

width: 100%; margin: auto; display:inline-block; } .interactSocial{ width: 1000px; 

   	margin: -20px auto 20px;
   	overflow: hidden;

} .interactIcon{ display: inline-block; float: left; } .interactIcon:nth-child(1){ position: absolute !important; left: 50%; margin-left: -42px; } .interactIcon:last-child{ float: right !important; } .interactIcon .icon{ display: inline-block; width: 40px; height: 40px; vertical-align: top; background-size: 100% !important; } .interactIcon .name{ display: inline-block; font-weight: bold; margin-top: 10px; font-size: 13px; } .interactIcon .icon.facebook{ background: url("../images/interact/facebook.svg"); } .interactIcon .icon.twitter{ background: url("../images/interact/twitter.svg"); } .interactIcon .icon.instagram{ background: url("../images/interact/instagram.svg"); } #interactImages{ background-image: url('../images/socBanner.png'); height: 400px; width: 100%; background-size: cover; } .interactFiler{ width: 100%; background: #3b6f8b; position: absolute; top: 133px; opacity: 0.6; z-index: 1; bottom: 0; } #socMsg{ background-image: url('../images/checkUsOut.png'); background-size: contain; width: 1000px; height: 100px; margin: 150px auto; left:0; right:0; position:absolute; z-index:3; } .instagramBlock{ float: left; width: 180px; } .instagramBlock img{ width: 100%; }

/* Team */

  1. teamSection{

width: 1000px; margin: auto; } .team{ text-align: center; position: relative; } .teamShowMore{ width: 107px; height: 100px; background-size: 100%; background-image: url(../images/arrow_left.svg); position: fixed; top: 50%; margin-top: -50px; cursor: pointer; z-index: 3; } .teamShowMore.active{ background-image: url(../images/arrow_right.svg); } #teamSupervisors{ position: fixed; right: -1000px; /* IMPORTANT must be negative of its own width */ background: #fff; width: 1000px; z-index: 3; border: 1px solid #ccc; display: none; top: 50%; height: 577px; border-radius: 30px; } #teamSupervisors li{ position: absolute; width: 56%; padding: 10px; text-align: center; } #teamSupervisors li:nth-child(1){ top: 350px; } #teamSupervisors li:last-child .leftCol{ float: right !important; } #teamSupervisors li:last-child .description{ float: left !important; } #teamSupervisors li:last-child{ top: 200px; right: 0px; } #teamSupervisors li .leftCol{ float: left; width: 50%; } #teamSupervisors li .description{ float: right; width: 50%; } .team li{ width: 28%; display: inline-block; margin-bottom: 160px; vertical-align: top; margin: 0 2% 70px 2%; } .teamImage, #teamSupervisors .teamImage{ border-radius: 100%; overflow: hidden; width: 180px; height: 180px; margin: auto; } .teamImage img, #teamSupervisors img{ width: 100%; margin-top:-15px; } .team .name, #teamSupervisors .name{ font-size: 18px; color: #000; margin: 10px 0 10px; } .team .position, #teamSupervisors .position{ font-size: 13px; color: #777676; } .team .description, #teamSupervisors .description{ font-size: 12px; letter-spacing: 0px; margin-top: 20px; }

  1. teamIntro{

width:800px; margin:0 auto; font-size:21px; background: #fff; border-bottom: 1px solid #d0d0d6; font-size: 13px; color: #777; line-height: 25px; }

  1. teamHello{

font-size: 50px; 

   margin-top: 60px;
   color: #2f6fce;

}

.HL{ font-weight:bold; color:#2f6fce; }

.legend{ color:#966b6b !important; margin-top: -35px !important; 

   padding-bottom: 55px;
   font-style: italic;
   font-size: 14px;
   width: 650px !important;

line-height:0px; } .rubic{ background: url(../images/rubic.png); width: 36px; height: 36px; vertical-align: top; }

.lightBulb{ 

   background: url(../images/light_bulb.png);
   width: 27px;
   height: 32px;
   vertical-align: top;

}

.electricity_graph{ display: block; margin: auto; }

.project_fig_three{ width: 180px; 

   float: right;
   margin-top: 10px;
   margin-left: 60px;

}

.timeIcon{ background: url(../images/clock.png); width: 32px; height: 32px; vertical-align: top; }

.subTitle{ 

   font-size: 12px;
   font-weight: bold;
   margin-top: 8px;
   margin-bottom: 20px;
   color: #222223;

}

.timeTitle{ 

   margin-top: 4px;
   margin-left: 5px;

}

/* Sponsors */

  1. sponContainer{

margin-top: -1px; border-top: 1px solid #d0d0d6; z-index: 0; }

/* Footer */

  1. footer{

width: 100%; height: 120px; background-color: #2F4F4F; text-align: center; font-size: 10px; color: #fff; letter-spacing: 2px; text-transform: uppercase; padding-top: 10px; } .footerInnerWrapper{ width: 1000px; margin: auto; } .footerLeft{ float: left; margin-top: 10px; text-align: left; } .footerRight{ float: right; margin-top: 10px; text-align: right; } .footerRow{ margin-bottom: 5px; cursor: pointer; } .footerRow:hover, .footerRow a:hover{ color: #22ffad; text-decoration: underline; } .footerRow span{ display: inline-block; line-height: 30px; margin-left: #22ffad; } .footerRow a{ color: #fff; } .footerIcon{ width: 30px; height: 30px; display: inline-block; vertical-align: top; } .footerIcon.twitter{ background: url(../images/twitter.svg); } .footerIcon.facebook{ background: url(../images/facebook.svg); }

/*Page transition */

  1. block1{

background-color:#767FEA; position:fixed; z-index:4; }

  1. block2{

background-color:#DBE0DF; position:fixed; z-index:4; } .pageTransition{ width: 100%; } .pageTransitionAnimate{ bottom: 0px !important; left: 0px !important; top: auto !important; }

.pageBanner{ width:100%; height:550px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.cd-container { 

 /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
 width: 90%;
 max-width: 1170px;
 margin: 0 auto;

} .cd-container::after { 

 /* clearfix */
 content: ;
 display: table;
 clear: both;

}

.clear{ clear: left; }

.bold{ font-weight: bold; color: #000; }

/* --------------------------------

Main components

*/

header { 

 height: 200px;
 line-height: 200px;
 text-align: center;
 background: #303e49;

} header h1 { 

 color: white;
 font-size: 18px;
 font-size: 1.125rem;

} @media only screen and (min-width: 1170px) { 

 header {
   height: 300px;
   line-height: 300px;
 }
 header h1 {
   font-size: 24px;
   font-size: 1.5rem;
 }

}

  1. cd-timeline {
 position: relative;
 padding: 2em 0;
 margin-top: 2em;
 margin-bottom: 2em;

}

  1. cd-timeline::before {
 /* this is the vertical line */
 content: ;
 position: absolute;
 top: 0;
 left: 18px;
 height: 100%;
 width: 4px;
 background: #d7e4ed;

} @media only screen and (min-width: 1170px) { 

 #cd-timeline {
   margin-top: 3em;
   margin-bottom: 3em;
 }
 #cd-timeline::before {
   left: 50%;
   margin-left: -2px;
 }

}

.cd-timeline-block { 

 position: relative;
 margin: 2em 0;

} .cd-timeline-block:after { 

 content: "";
 display: table;
 clear: both;

} .cd-timeline-block:first-child { 

 margin-top: 0;

} .cd-timeline-block:last-child { 

 margin-bottom: 0;

} @media only screen and (min-width: 1170px) { 

 .cd-timeline-block {
   margin: 4em 0;
 }
 .cd-timeline-block:first-child {
   margin-top: 0;
 }
 .cd-timeline-block:last-child {
   margin-bottom: 0;
 }

}

.cd-timeline-img { 

 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);

} .cd-timeline-img img { 

 display: block;
 width: 24px;
 height: 24px;
 position: relative;
 left: 50%;
 top: 50%;
 margin-left: -12px;
 margin-top: -12px;

} .cd-timeline-img.cd-picture { 

 background: #f9f9f9;

} .cd-timeline-img.cd-movie { 

 background: #c03b44;

} .cd-timeline-img.cd-location { 

 background: #f0ca45;

} @media only screen and (min-width: 1170px) { 

 .cd-timeline-img {
   width: 60px;
   height: 60px;
   left: 50%;
   margin-left: -30px;
   /* Force Hardware Acceleration in WebKit */
   -webkit-transform: translateZ(0);
   -webkit-backface-visibility: hidden;
 }
 .cssanimations .cd-timeline-img.is-hidden {
   visibility: hidden;
 }
 .cssanimations .cd-timeline-img.bounce-in {
   visibility: visible;
   -webkit-animation: cd-bounce-1 0.6s;
   -moz-animation: cd-bounce-1 0.6s;
   animation: cd-bounce-1 0.6s;
 }

}

@-webkit-keyframes cd-bounce-1 { 

 0% {
   opacity: 0;
   -webkit-transform: scale(0.5);
 }

 60% {
   opacity: 1;
   -webkit-transform: scale(1.2);
 }

 100% {
   -webkit-transform: scale(1);
 }

} @-moz-keyframes cd-bounce-1 { 

 0% {
   opacity: 0;
   -moz-transform: scale(0.5);
 }

 60% {
   opacity: 1;
   -moz-transform: scale(1.2);
 }

 100% {
   -moz-transform: scale(1);
 }

} @keyframes cd-bounce-1 { 

 0% {
   opacity: 0;
   -webkit-transform: scale(0.5);
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
   -o-transform: scale(0.5);
   transform: scale(0.5);
 }

 60% {
   opacity: 1;
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -o-transform: scale(1.2);
   transform: scale(1.2);
 }

 100% {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

} .cd-timeline-content { 

 position: relative;
 margin-left: 60px;
 background: white;
 border-radius: 0.25em;
 padding: 1em;
 box-shadow: 0 3px 0 #d7e4ed;

} .cd-timeline-content:after { 

 content: "";
 display: table;
 clear: both;

} .cd-timeline-content h2 { 

 color: #303e49;

} .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { 

 font-size: 13px;
 font-size: 0.8125rem;

} .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { 

 display: inline-block;

} .cd-timeline-content p { 

 margin: 1em 0;
 line-height: 1.6;

} .cd-timeline-content .cd-read-more { 

 float: right;
 padding: .8em 1em;
 background: #acb7c0;
 color: white;
 border-radius: 0.25em;

} .no-touch .cd-timeline-content .cd-read-more:hover { 

 background-color: #bac4cb;

} .cd-timeline-content .cd-date { 

 float: left;
 padding: .8em 0;
 opacity: .7;

} .cd-timeline-content::before { 

 content: ;
 position: absolute;
 top: 16px;
 right: 100%;
 height: 0;
 width: 0;
 border: 7px solid transparent;
 border-right: 7px solid white;

} @media only screen and (min-width: 768px) { 

 .cd-timeline-content h2 {
   font-size: 20px;
   font-size: 1.25rem;
 }
 .cd-timeline-content p {
   font-size: 16px;
   font-size: 1rem;
 }
 .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
   font-size: 14px;
   font-size: 0.875rem;
 }

} @media only screen and (min-width: 1170px) { 

 .cd-timeline-content {
   margin-left: 0;
   padding: 1.6em;
   width: 45%;
 }
 .cd-timeline-content::before {
   top: 24px;
   left: 100%;
   border-color: transparent;
   border-left-color: white;
 }
 .cd-timeline-content .cd-read-more {
   float: left;
 }
 .cd-timeline-content .cd-date {
   position: absolute;
   width: 100%;
   left: 80%;
   top: 6px;
   font-size: 16px;
   font-size: 1rem;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content {
   float: right;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
   top: 24px;
   left: auto;
   right: 100%;
   border-color: transparent;
   border-right-color: white;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
   float: right;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
   left: auto;
   right: 122%;
   text-align: right;
 }
 .cssanimations .cd-timeline-content.is-hidden {
   visibility: hidden;
 }
 .cssanimations .cd-timeline-content.bounce-in {
   visibility: visible;
   -webkit-animation: cd-bounce-2 0.6s;
   -moz-animation: cd-bounce-2 0.6s;
   animation: cd-bounce-2 0.6s;
 }

}

@media only screen and (min-width: 1170px) { 

 /* inverse bounce effect on even content blocks */
 .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
   -webkit-animation: cd-bounce-2-inverse 0.6s;
   -moz-animation: cd-bounce-2-inverse 0.6s;
   animation: cd-bounce-2-inverse 0.6s;
 }

} @-webkit-keyframes cd-bounce-2 { 

 0% {
   opacity: 0;
   -webkit-transform: translateX(-100px);
 }

 60% {
   opacity: 1;
   -webkit-transform: translateX(20px);
 }

 100% {
   -webkit-transform: translateX(0);
 }

} @-moz-keyframes cd-bounce-2 { 

 0% {
   opacity: 0;
   -moz-transform: translateX(-100px);
 }

 60% {
   opacity: 1;
   -moz-transform: translateX(20px);
 }

 100% {
   -moz-transform: translateX(0);
 }

} @keyframes cd-bounce-2 { 

 0% {
   opacity: 0;
   -webkit-transform: translateX(-100px);
   -moz-transform: translateX(-100px);
   -ms-transform: translateX(-100px);
   -o-transform: translateX(-100px);
   transform: translateX(-100px);
 }

 60% {
   opacity: 1;
   -webkit-transform: translateX(20px);
   -moz-transform: translateX(20px);
   -ms-transform: translateX(20px);
   -o-transform: translateX(20px);
   transform: translateX(20px);
 }

 100% {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
 }

} @-webkit-keyframes cd-bounce-2-inverse { 

 0% {
   opacity: 0;
   -webkit-transform: translateX(100px);
 }

 60% {
   opacity: 1;
   -webkit-transform: translateX(-20px);
 }

 100% {
   -webkit-transform: translateX(0);
 }

} @-moz-keyframes cd-bounce-2-inverse { 

 0% {
   opacity: 0;
   -moz-transform: translateX(100px);
 }

 60% {
   opacity: 1;
   -moz-transform: translateX(-20px);
 }

 100% {
   -moz-transform: translateX(0);
 }

} @keyframes cd-bounce-2-inverse { 

 0% {
   opacity: 0;
   -webkit-transform: translateX(100px);
   -moz-transform: translateX(100px);
   -ms-transform: translateX(100px);
   -o-transform: translateX(100px);
   transform: translateX(100px);
 }

 60% {
   opacity: 1;
   -webkit-transform: translateX(-20px);
   -moz-transform: translateX(-20px);
   -ms-transform: translateX(-20px);
   -o-transform: translateX(-20px);
   transform: translateX(-20px);
 }

 100% {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
 }

}

  1. globalTemp{

position:relative; width:720px; height:610px; margin: 0 auto; margin-bottom: 30px; }

.timeSeriesImage{ position:absolute; top:100px; left:0; width:100%; height:405px; visibility:hidden; }

.currentSeriesImage{ visibility:visible; }

  1. changeSeriesImage{

position:absolute; bottom:0; left:0; }

  1. tempHeader > #leftCol{

float: left; 

   text-align: left;
   color: #c15a4f;
   font-weight: bold;
   font-size: 20px;

display:inline-block; }

  1. tempHeader > #leftCol > span{

font-size: 10px; 

   display: inline-block;
   color: #000;
   line-height: 14px;

}

  1. tempHeader > #rightCol{
   float: right;
   font-size: 20px;
   color: #0bbd9e;
   margin-top: 7px;

}

.time_series{ 

   text-align: center;
   margin-bottom: 36px;
   color: #000;
   font-weight: bold;
   font-size: 12px;
   margin-top: 30px;

}

  1. tempSlider{

width: 530px; 

   position: absolute;
   bottom: 3px;
   left: 115px;
   background-color: #c15a4f;

height:10px; }

.ui-slider-handle{ 

   border-radius: 100%;
   height: 25px;
   width: 25px;
   margin-top: -3px;

border-color:#c15a4f !important; border-width:3px !important; cursor:move !important; }

.ui-slider-handle:hover, .ui-slider-handle:active, .ui-state-active{ background-color:white; }

  1. playTemp{

width: 30px; 

   height: 30px;
   position: absolute;
   bottom: -6px;
   left: 6px;
   background-image: url(../images/playTemp.png);
   background-repeat: no-repeat;
   cursor: pointer;
   background-position: 50%;

}


  1. timeline{

width: 1000px; margin: auto; position: relative; }

.timeline_vline{ position: relative; height: 100%; width: 3px; background-color: #ee4d4d; left: 50%; margin-left: -2px; padding-bottom: 130px; }

.timeline_vline.active{

}

.timeline_bubble{ width: 40px; height: 40px; background-color: #ee4d4d; margin: 0px 0px 60px -18px; border-radius: 33px; position: relative; background-image: url(../images/star.png); background-repeat: no-repeat; background-size: 18px; background-position: 11px 11px; }


.timeline_event_header{ 

   background: #ee4d4d;
   position: absolute;
   left: 62px;
   top: 6px;
   color: #fff;
   border-radius: 4px;
   width: 150px;
   cursor: pointer;

}

.timeline_event_header_container{ padding: 5px 10px; 

   text-align: center;
   font-weight: bold;
   color: #fff;

}

.timeline_event_header:hover, .timeline_event_header.active{ background-color: #00a4ff; }

.timeline_event_header:hover:before, .timeline_event_header.active:before{ border-right: 13px solid #00a4ff; }

.timeline_bubble:nth-child(2n):hover .timeline_event_header:before, .timeline_bubble:nth-child(2n) .timeline_event_header.active:before{ border-left: 13px solid #00a4ff; }

.timeline_event_header.active .timeline_event_container{ }

.timeline_event_container{ 

   background-color: #fff;
   border: 1px solid #00a4ff;
   color: #777;
   cursor: auto;
   overflow: hidden;
   height: 0px;
   visibility: hidden;

}

.timeline_event_inner{ padding: 8px 8px 20px; }

.timeline_event_inner p{ margin-bottom: 10px; }

.close_timeline_event{ 

   width: 16px;
   height: 16px;
   background: url(../images/close_up.png);
   position: absolute;
   bottom: 4px;
   left: 50%;
   margin-left: -7px;
   cursor: pointer;

}

.timeline_event_inner img{ 

   max-width: 130px;
   float: right;
   margin-left: 10px;
   margin-bottom: 10px;

}

.timeline_event_header:before{ 

   width: 0;
   height: 0;
   border-top: 7px solid transparent;
   border-right: 13px solid #ee4d4d;
   border-bottom: 7px solid transparent;
   content: ;
   position: absolute;
   left: -13px;
   top: 6px;

}

.timeline_bubble:nth-child(2n) .timeline_event_header{ left: auto; right: 62px; }

.timeline_bubble:nth-child(2n) .timeline_event_header:before{ 

   border-right: 0px;
   border-left: 13px solid #ee4d4d;
   left: auto;
   right: -13px;

}

.displayInline{ 

   display: inline-block;

}

  1. showImage{
   width: 500px;
   padding: 20px;
   position: fixed;
   left: 50%;
   margin-left: -250px;
   background: #fff;
   z-index: 9999;
   top: 10%;
   border: 1px solid #ccc;
   border-radius: 5px;
   display: none;

}

  1. showImageBG{
   position: fixed;
   width: 100%;
   height: 100%;
   background: url(../images/transparent_bg.png);
   top: 0px;
   left: 0px;
   z-index: 999;
   display: none;

}

  1. closeImage{

position: absolute; top: 5px; right: 5px; background: url(../images/close.png); width: 16px; height: 16px; cursor: pointer; }

  1. showImage img{

width: 100%; }


.protocols{ width: 900px; margin: auto; }

.protocols_list{ 

   width: 200px;
   background: #716d6d;
   color: #fff;
   border-right: 6px solid #57c7f1;
   vertical-align: top;

}

.protocols_list li.active{ background: #57c7f1; }

.protocols_list li{ 

   padding: 11px 11px;
   font-size: 11px;
   font-weight: bold;
   border-bottom: 1px solid #565656;
   cursor: pointer;

}

.protocols_list li:hover{ background: #57c7f1; }

  1. protocolsSection{

width: 680px; vertical-align: top; }

  1. protocols_content{

padding: 30px 0; }

.protocols_sub_list{ padding: 0 20px; }

.protocols_sub_list li{ padding: 10px 0px; }

  1. protocols_sub_list_main > li{

display: none; }

  1. partsSection{

width: 900px; margin: auto; }

.tables{ 

   border: 1px solid #b7afaf;
   border-bottom: 0px;
   border-right: 0px;
   border-spacing: 0;
   margin-top: 20px;
   width: 100%;

}

.tables td, .tables th{ 

   border-bottom: 1px solid #b7afaf;
   border-right: 1px solid #b7afaf;
   text-align: center;
   padding: 5px;

}

.tables th{ background: #e9f8ff; }

  1. safetySection{

width: 900px; margin: auto; }

.safety_image{ float: right; margin-left: 40px; }

.safety_protocols_title{ margin-top: 85px; }

.safety_protocols{ margin-left: 23px; margin-bottom: 30px; }

.safety_lists{ list-style: initial; margin-left: 12px; margin-bottom: 30px; }

  1. attributions{

width: 900px; margin: auto; }

.attr_name{ display: inline-block; width: 120px; font-weight: bold; color: #000; }

.attr_name_title{

}

.attr_team li{ padding-top: 6px; }

.attr_team{ float: left; width: 530px; margin-bottom: 30px; }

.attr_team.rightCol { float: right; width: 500px; }

.attr_team.rightCol .attr_name{ float: right; text-align: right; }

.attr_team.rightCol .attr_name_title{ text-align: right; 

   display: inline-block;
   width: 380px;

}

.attr_teamwork{ 

   background: url(../images/teamwork.png);
   width: 128px;
   height: 125px;
   margin-left: 20px;
   margin-bottom: 20px;

}

.attr_tech p{ margin-bottom: 10px; }

.attr_additionally{ margin: 30px 0; }

  1. virtual_list{

list-style-type: disc; }

  1. virtual_list a{

display: inline-block; 

   width: 70px;
   color: #0b28bd;

}

  1. virtual_list a:hover{

text-decoration: underline; }

  1. practice_section{

width: 900px; margin: auto; }

.practices_section img{ 

   max-width: 300px;
   vertical-align: top;

}

.practices_section{ overflow: hidden; margin-bottom: 30px; }

.practices_wrapper p{ margin-bottom: 15px; }

.practices_wrapper{ margin-bottom: 30px; }

.practices_button{ 

   position: absolute;
   color: #fff;
   border: 2px solid #fff;
   display: block;
   top: 50%;
   left: 50%;
   width: 130px;
   font-size: 17px;
   font-weight: bold;
   text-align: center;
   padding: 6px 0px;
   margin-left: -65px;
   margin-top: -17px;
   webkit-transform: rotateY(90deg);
   -moz-transform: rotateY(90deg);
   -ms-transform: rotateY(90deg);
   -o-transform: rotateY(90deg);
   transform: rotateY(90deg);
   -webkit-transition: all 0.5s ease 0s;
   -moz-transition: all 0.5s ease 0s;
   -ms-transition: all 0.5s ease 0s;
   -o-transition: all 0.5s ease 0s;
   transition: all 0.5s ease 0s;

}

.practices_image_cont:hover .practices_button{ 

   -webkit-transform: rotatey(0deg);
   -moz-transform: rotatey(0deg);
   -ms-transform: rotatey(0deg);
   -o-transform: rotatey(0deg);
   transform: rotatey(0deg);

}

.practices_image_cont{ position: relative; 

   margin-left: 160px;
   float: right;
   margin-top: 12px;

}

.practices_image_cont:before{ background: rgba(70, 109, 156, 0.69); content: ; width: 100%; height: 100%; position: absolute; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; }

.practices_image_cont:hover:before{ 

   -webkit-transform: rotatex(0deg);
   -moz-transform: rotatex(0deg);
   -ms-transform: rotatex(0deg);
   -o-transform: rotatex(0deg);
   transform: rotatex(0deg);

}