Difference between revisions of "Template:HFUT-China"

(Prototype team template page)
 
Line 1: Line 1:
−
<html>
 
  
−
<script>
+
<!DOCTYPE html>
  
−
// This is the jquery part of your template. 
+
<head>
−
// Try not modify any of this code too much since it makes your menu work.
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<link rel="shortcut icon" href="./img/logo_black_small.png" type="image/png" />
  
−
$(document).ready(function() {
 
  
−
$("#HQ_page").attr('id','');
+
  <title>Team:HFUT-China</title>
  
−
// call the functions that control the menu
+
<!--  <meta name="MobileOptimized" content="width">
−
menu_functionality();
+
<meta name="HandheldFriendly" content="true">
−
hide_show_menu();
+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  
 +
<meta http-equiv="cleartype" content="on">
 +
-->
  
 +
<link href="./css/header.css" rel="stylesheet"/>
 +
<link href="./css/style.css" rel="stylesheet"/>
 +
<style type="text/css">
  
−
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 
−
function menu_functionality() {
 
  
−
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
+
/* #c9ab6c */
−
$(".menu_button").click(function(){
+
  
−
// add or remove the class "open" , this class holds the "-"
 
−
$(this).children().toggleClass("open");
 
−
// show or hide the submenu
 
−
$(this).next('.submenu_wrapper').fadeToggle(400);
 
−
});
 
  
−
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
+
* {
−
$("#display_menu_control").click(function(){
+
  -webkit-box-sizing:border-box;
−
$('#menu_content').fadeToggle(400);
+
  -moz-box-sizing:border-box;
−
});
+
  box-sizing:border-box;
 +
  margin:0;
 +
  padding:0;
 +
  -webkit-font-smoothing:antialiased;
 +
  -moz-font-smoothing:antialiased;
 +
  -o-font-smoothing:antialiased;
 +
  font-smoothing:antialiased
 +
}
 +
a,input,button,*,a:focus,input:focus,button:focus,*:focus,a:active,input:active,button:active,*:active,a:link,input:link,button:link,*:link,a:visited,input:visited,button:visited,*:visited,a:hover,input:hover,button:hover,*:hover {
 +
  outline:0
 +
}
 +
html {
 +
  font-size:100%
 +
}
 +
html,body {
 +
  min-height:100%
 +
}
 +
body {
 +
  position:relative;
 +
  font-family:arial,sans-serif
 +
}
 +
a {
 +
  text-decoration:none
 +
}
 +
table {
 +
  width:100%
 +
}
 +
th,td {
 +
  padding:14px;
 +
  vertical-align:middle
 +
}
 +
tr.odd,tr.even {
 +
  background-color:transparent;
 +
  border-bottom:1px solid #e5e5e5;
 +
  -webkit-transition:all .2s ease-in-out 0s;
 +
  -moz-transition:all .2s ease-in-out 0s;
 +
  -o-transition:all .2s ease-in-out 0s;
 +
  -ms-transition:all .2s ease-in-out 0s;
 +
  transition:all .2s ease-in-out 0s
 +
}
 +
thead {
 +
  background-color:#f0f0f0;
 +
  border-bottom:1px solid #e5e5e5
 +
}
 +
td,th {
 +
  border-bottom:0
 +
}
 +
td,th,td a,th a {
 +
  color:#626262
 +
}
 +
ul.primary {
 +
  position:fixed;
 +
  z-index:20;
 +
  top:150px;
 +
  left:0;
 +
  border-bottom:0;
 +
  padding:0;
 +
  margin:0;
 +
  filter:alpha(opacity=60);
 +
  -ms-filter:alpha(opacity=@opacity-ie);
 +
  -moz-opacity:.6;
 +
  -khtml-opacity:.6;
 +
  opacity:.6;
 +
  -webkit-transition:opacity .3s ease-in-out 0s;
 +
  -moz-transition:opacity .3s ease-in-out 0s;
 +
  -o-transition:opacity .3s ease-in-out 0s;
 +
  -ms-transition:opacity .3s ease-in-out 0s;
 +
  transition:opacity .3s ease-in-out 0s
 +
}
 +
ul.primary:hover,ul.primary:active {
 +
  filter:alpha(opacity=100);
 +
  -ms-filter:alpha(opacity=@opacity-ie);
 +
  -moz-opacity:1;
 +
  -khtml-opacity:1;
 +
  opacity:1
 +
}
 +
ul.primary li {
 +
  display:block
 +
}
 +
ul.primary li a {
 +
  display:block;
 +
  background-color:black;
 +
  color:white;
 +
  border-width:0;
 +
  border:0;
 +
  padding:10px;
 +
  font-size:10px;
 +
  height:auto;
 +
  margin-right:0;
 +
  text-decoration:none;
 +
  -webkit-transition:background .3s ease-in-out 0s;
 +
  -moz-transition:background .3s ease-in-out 0s;
 +
  -o-transition:background .3s ease-in-out 0s;
 +
  -ms-transition:background .3s ease-in-out 0s;
 +
  transition:background .3s ease-in-out 0s
 +
}
 +
ul.primary li a:hover {
 +
  background:grey
 +
}
 +
ul.primary li.active a {
 +
  background-color:white;
 +
  color:black;
 +
  border-width:0;
 +
  border:0
 +
}
 +
body {
 +
  position:absolute;
 +
  top:0;
 +
  left:0;
 +
  right:0;
 +
  bottom:0;
 +
  font-family:'GothamBook';
 +
  overflow-x:hidden;
 +
  max-width:100%;
 +
  background:#fbfbfb
 +
}
 +
body.menu-opened {
 +
  overflow:hidden
 +
}
 +
#page-wrapper {
 +
  height:100%
 +
}
 +
#page {
 +
  height:100%;
 +
  max-width:100%;
 +
  min-width:100%;
 +
  right:0;
 +
  padding-top:48px;
 +
  -webkit-backface-visibilty:hidden;
 +
  position:relative;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s
 +
}
 +
.header-transparent #page {
 +
  padding-top:0
 +
}
 +
.menu-opened #page {
 +
  -webkit-transform:translate(-272px,0);
 +
  -moz-transform:translate(-272px,0);
 +
  -ms-transform:translate(-272px,0);
 +
  transform:translate(-272px,0)
 +
}
 +
#main {
 +
  height:100%;
 +
  position:relative;
 +
  z-index:1
 +
}
 +
@media only screen and (min-width:1025px) {
 +
  #page {
 +
  padding-top:80px
 +
}
 +
.header-transparent #page {
 +
  padding-top:0
 +
}
 +
}.background-color-1 {
 +
  background-color:#000
 +
}
 +
.background-color-2 {
 +
  background-color:#fbfbfb
 +
}
 +
.background-color-3 {
 +
  background-color:#229f7d
 +
}
 +
.background-color-4 {
 +
  background-color:#c9ab6c
 +
}
 +
.background-color-5 {
 +
  background-color:#b91f2f
 +
}
 +
.background-color-6 {
 +
  background-color:#191919
 +
}
 +
.background-color-7 {
 +
  background-color:#767676
 +
}
 +
.background-color-8 {
 +
  background-color:#3460a1
 +
}
 +
.background-color-9 {
 +
  background-color:#28aae1
 +
}
 +
.background-color-10 {
 +
  background-color:#136d9d
 +
}
 +
.background-color-11 {
 +
  background-color:#de5543
 +
}
 +
.background-color-12 {
 +
  background-color:#ee3138
 +
}
 +
.background-color-13 {
 +
  background-color:#16bbed
 +
}
 +
.background-color-14 {
 +
  background-color:#65469c
 +
}
 +
.background-color-15 {
 +
  background-color:#f5f5f5
 +
}
 +
.background-color-16 {
 +
  background-color:#fff
 +
}
 +
.background-color-17 {
 +
  background-color:#fff
 +
}
 +
.background-color-18 {
 +
  background-color:#fff
 +
}
 +
.background-color-19 {
 +
  background-color:#fff
 +
}
 +
.background-color-20 {
 +
  background-color:#fff
 +
}
 +
.color-1,.color-1 a {
 +
  color:#000
 +
}
 +
.color-2,.color-2 a {
 +
  color:#fbfbfb
 +
}
 +
.color-3,.color-3 a {
 +
  color:#229f7d
 +
}
 +
.color-4,.color-4 a {
 +
  color:#c9ab6c
 +
}
 +
.color-5,.color-5 a {
 +
  color:#b91f2f
 +
}
 +
.color-6,.color-6 a {
 +
  color:#191919
 +
}
 +
.color-7,.color-7 a {
 +
  color:#767676
 +
}
 +
.color-8,.color-8 a {
 +
  color:#3460a1
 +
}
 +
.color-9,.color-9 a {
 +
  color:#28aae1
 +
}
 +
.color-10,.color-10 a {
 +
  color:#136d9d
 +
}
 +
.color-11,.color-11 a {
 +
  color:#de5543
 +
}
 +
.color-12,.color-12 a {
 +
  color:#ee3138
 +
}
 +
.color-13,.color-13 a {
 +
  color:#16bbed
 +
}
 +
.color-14,.color-14 a {
 +
  color:#65469c
 +
}
 +
.color-15,.color-15 a {
 +
  color:#f5f5f5
 +
}
 +
.color-16,.color-16 a {
 +
  color:#fff
 +
}
 +
.color-17,.color-17 a {
 +
  color:#fff
 +
}
 +
.color-18,.color-18 a {
 +
  color:#fff
 +
}
 +
.color-19,.color-19 a {
 +
  color:#fff
 +
}
 +
.color-20,.color-20 a {
 +
  color:#fff
 +
}
 +
.color-21,.color-21 a {
 +
  color:#f5a90c
 +
}
 +
.color-22,.color-22 a {
 +
  color:#9b38a3
 +
}
 +
.color-23,.color-23 a {
 +
  color:#333
 +
}
  
−
// call the current page highlight function
 
−
highlight_current_page();
 
−
}
 
  
  
−
// call the highlight current page function to show it on the menu with a different background color
+
.viewport {
−
function highlight_current_page() {
+
  max-width:1240px;
 +
  margin:auto;
 +
  zoom:1;
 +
  position:relative;
 +
  min-height:100%
 +
}
 +
.viewport:after {
 +
  content:'';
 +
  display:table;
 +
  clear:both;
 +
  height:0;
 +
  visibility:0
 +
}
 +
.overflow {
 +
  overflow:hidden
 +
}
 +
a {
 +
  color:#c9ab6c;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s
 +
}
 +
a:hover {
 +
  color:#191919
 +
}
 +
ul.menu {
 +
  padding:0;
 +
  margin:0
 +
}
 +
ul.menu li {
 +
  list-style:none;
 +
  padding:0;
 +
  margin:0
 +
}
 +
h2,h3,h4,p {
 +
  font-weight:normal
 +
}
 +
a.form-submit,input.form-submit {
 +
  background:#c9ab6c;
 +
  text-transform:uppercase;
 +
  color:white;
 +
  padding:10px;
 +
  margin:5px;
 +
  border:0;
 +
  font-family:'GothamBook';
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s
 +
}
 +
a.form-submit:hover,input.form-submit:hover {
 +
  background:#eee;
 +
  color:#191919
 +
}
 +
a.form-submit.delete-line-item,input.form-submit.delete-line-item {
 +
  text-transform:none;
 +
  text-indent:-9999px;
 +
  background:url(/sites/all/themes/mess/images/delete.png) no-repeat center #dadada;
 +
  height:24px;
 +
  width:24px;
 +
  background-size:100%;
 +
  padding:0;
 +
  border:0;
 +
  -webkit-border-radius:48px;
 +
  -moz-border-radius:48px;
 +
  border-radius:48px;
 +
  -moz-background-clip:padding;
 +
  -webkit-background-clip:padding-box;
 +
  background-clip:padding-box;
 +
  -webkit-transition:background .3s ease-in-out 0s;
 +
  -moz-transition:background .3s ease-in-out 0s;
 +
  -o-transition:background .3s ease-in-out 0s;
 +
  -ms-transition:background .3s ease-in-out 0s;
 +
  transition:background .3s ease-in-out 0s
 +
}
 +
a.form-submit.delete-line-item:hover,input.form-submit.delete-line-item:hover {
 +
  background:url(/sites/all/themes/mess/images/delete.png) no-repeat center #b91f2f;
 +
  background-size:100%
 +
}
 +
a.form-submit.checkout-back,input.form-submit.checkout-back,a.form-submit.checkout-cancel,input.form-submit.checkout-cancel {
 +
  background:#efefef;
 +
  font-family:'GothamBook';
 +
  color:grey
 +
}
 +
a.form-submit.checkout-back:hover,input.form-submit.checkout-back:hover,a.form-submit.checkout-cancel:hover,input.form-submit.checkout-cancel:hover {
 +
  background:white;
 +
  color:#b91f2f
 +
}
  
−
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
+
body.admin-menu {
−
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
+
  margin-top:0 !important
 +
}
 +
#header {
 +
  position:absolute;
 +
  height:48px;
 +
  width:100%;
 +
  top:0;
 +
  left:0;
 +
  right:0;
 +
  background:white;
 +
  z-index:20;
 +
  -webkit-backface-visibilty:hidden;
 +
  -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.2);
 +
  -moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.2);
 +
  box-shadow:0 0 10px 0 rgba(0,0,0,0.2)
 +
}
 +
#header .block-context-ui {
 +
  display:none
 +
}
 +
.header-transparent #header {
 +
  background:rgba(0,0,0,0.2)
 +
}
 +
.scrolled #header {
 +
  background:white
 +
}
 +
.scrolled #header .viewport .logo:after {
 +
  right:90px
 +
}
 +
#header .viewport {
 +
  position:static
 +
}
 +
#header .viewport .logo {
 +
  position:absolute;
 +
  height:90px;
 +
  width:100px;
 +
  left:50px;
 +
  top:20%;
 +
  margin-top:-24px;
 +
  z-index:3;
 +
  overflow:hidden
 +
}
 +
#header .viewport .logo a {
 +
  display:block;
 +
  text-indent:-9999px;
 +
  position:absolute;
 +
  top:0;
 +
  left:0;
 +
  right:0;
 +
  bottom:0;
 +
  filter:alpha(opacity=100);
 +
  -ms-filter:alpha(opacity=@opacity-ie);
 +
  -moz-opacity:1;
 +
  -khtml-opacity:1;
 +
  opacity:1;
 +
  z-index:3
 +
}
 +
#header .viewport .logo:active:after,#header .viewport .logo:hover:after,#header .viewport .logo:active:before,#header .viewport .logo:hover:before {
 +
  color:#c9ab6c
 +
}
 +
#header .viewport .logo:after,#header .viewport .logo:before {
 +
  font-family:'icon';
 +
  position:absolute;
 +
  display:block;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s;
 +
  color:#767676;
 +
  -webkit-backface-visibilty:hidden;
 +
  z-index:0
 +
}
 +
.header-transparent #header .viewport .logo:after,.header-transparent #header .viewport .logo:before {
 +
  color:white
 +
}
 +
#header .viewport .logo:after {
 +
  content:"\e603";
 +
  font-size:3em;
 +
  left:0;
 +
  top:0
 +
}
 +
#header .viewport .logo:before {
 +
  content:"\e602";
 +
  font-size:7em;
 +
  left:50px;
 +
  top:-32px
 +
}
 +
#header .viewport .burger {
 +
  height:48px;
 +
  width:48px;
 +
  position:absolute;
 +
  right:0;
 +
  top:0;
 +
  background:#c9ab6c;
 +
  cursor:pointer
 +
}
 +
#header .viewport .burger span {
 +
  display:block;
 +
  height:2px;
 +
  width:24px;
 +
  position:absolute;
 +
  top:0;
 +
  left:0;
 +
  right:0;
 +
  bottom:0;
 +
  margin:auto;
 +
  background:white
 +
}
 +
#header .viewport .burger span.top {
 +
  top:16px
 +
}
 +
#header .viewport .burger span.bottom {
 +
  bottom:16px
 +
}
 +
#header .viewport .navigation-wrapper {
 +
  position:fixed;
 +
  left:100%;
 +
  z-index:20;
 +
  top:0;
 +
  bottom:0;
 +
  overflow-y:scroll;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s;
 +
  zoom:1
 +
}
 +
#header .viewport .navigation-wrapper:after {
 +
  content:'';
 +
  display:table;
 +
  clear:both;
 +
  height:0;
 +
  visibility:0
 +
}
 +
#header .viewport .navigation-wrapper .navigation {
 +
  width:272px;
 +
  min-height:100%;
 +
  position:relative;
 +
  float:right;
 +
  background:#191919;
 +
  overflow-y:scroll
 +
}
 +
#header .viewport .navigation-wrapper .navigation .main-menu {
 +
  padding-top:7px
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu {
 +
  width:100%;
 +
  clear:both
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li {
 +
  float:left;
 +
  width:100%
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a {
 +
  display:block;
 +
  padding:16px 10px;
 +
  height:48px;
 +
  width:100%;
 +
  position:relative;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s;
 +
  -webkit-backface-visibilty:hidden
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a {
 +
  padding-left:47px
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:active {
 +
  color:#767676
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:hover {
 +
  color:#767676
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.active,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:focus {
 +
  color:white
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before {
 +
  text-indent:0;
 +
  font-family:'icon';
 +
  display:block;
 +
  position:absolute;
 +
  top:0;
 +
  left:0;
 +
  right:0;
 +
  bottom:0;
 +
  right:auto;
 +
  text-align:center;
 +
  padding:15px;
 +
  font-size:1.125em;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s;
 +
  -webkit-backface-visibilty:hidden
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.cart:before {
 +
  content:"\e604"
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.user:before {
 +
  content:"\e605"
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login:before {
 +
  content:"\e605"
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.logout:before {
 +
  content:"\ea14"
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart {
 +
  position:relative
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count {
 +
  display:block;
 +
  height:16px;
 +
  width:16px;
 +
  text-align:center;
 +
  color:white;
 +
  background:red;
 +
  font-size:12px;
 +
  font-weight:bold;
 +
  border-radius:16px;
 +
  letter-spacing:-1px;
 +
  line-height:150%;
 +
  text-indent:-1px;
 +
  position:absolute;
 +
  top:6px;
 +
  left:30px
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li {
 +
  width:100%
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a {
 +
  display:block;
 +
  padding:10px 16px;
 +
  height:36px;
 +
  width:100%;
 +
  color:#767676;
 +
  text-transform:uppercase;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a:hover,#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover {
 +
  color:white
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li {
 +
  overflow:hidden;
 +
  position:relative
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler {
 +
  width:36px;
 +
  height:36px;
 +
  position:absolute;
 +
  right:0;
 +
  top:0
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler:before {
 +
  content:"\e601";
 +
  font-family:'icon';
 +
  display:block;
 +
  position:absolute;
 +
  top:0;
 +
  left:0;
 +
  right:0;
 +
  bottom:0;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s;
 +
  -webkit-transform:rotate(90deg);
 +
  -moz-transform:rotate(90deg);
 +
  -ms-transform:rotate(90deg);
 +
  transform:rotate(90deg);
 +
  text-align:center;
 +
  line-height:230%;
 +
  color:#767676
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:focus .toggler:before {
 +
  color:white
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li.opened a {
 +
  color:#c9ab6c
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li.opened .toggler:before {
 +
  -webkit-transform:rotate(-90deg);
 +
  -moz-transform:rotate(-90deg);
 +
  -ms-transform:rotate(-90deg);
 +
  transform:rotate(-90deg);
 +
  color:#c9ab6c
 +
}
 +
#footer {
 +
  background:#191919;
 +
  padding:1px 0 0;
 +
  overflow:hidden
 +
}
 +
#footer .viewport {
 +
  max-width:1340px;
 +
  margin:auto
 +
}
 +
#footer #block-menu-menu-menu-footer-very-bottom {
 +
  display:none
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation {
 +
  text-align:center;
 +
  padding-top:0;
 +
  zoom:1;
 +
  height:0;
 +
  overflow:hidden;
 +
  -webkit-transition:height .3s ease-in-out 0s;
 +
  -moz-transition:height .3s ease-in-out 0s;
 +
  -o-transition:height .3s ease-in-out 0s;
 +
  -ms-transition:height .3s ease-in-out 0s;
 +
  transition:height .3s ease-in-out 0s;
 +
  -webkit-transition:padding .3s ease-in-out 0s;
 +
  -moz-transition:padding .3s ease-in-out 0s;
 +
  -o-transition:padding .3s ease-in-out 0s;
 +
  -ms-transition:padding .3s ease-in-out 0s;
 +
  transition:padding .3s ease-in-out 0s
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation:after {
 +
  content:'';
 +
  display:table;
 +
  clear:both;
 +
  height:0;
 +
  visibility:0
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul {
 +
  text-align:center
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li {
 +
  display:inline-block;
 +
  margin:0;
 +
  vertical-align:top;
 +
  -webkit-transition:margin .3s ease-in-out 0s;
 +
  -moz-transition:margin .3s ease-in-out 0s;
 +
  -o-transition:margin .3s ease-in-out 0s;
 +
  -ms-transition:margin .3s ease-in-out 0s;
 +
  transition:margin .3s ease-in-out 0s
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li.last {
 +
  margin:0
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li a {
 +
  display:block;
 +
  text-align:left;
 +
  color:white;
 +
  text-transform:uppercase;
 +
  font-family:'GothamBook';
 +
  font-size:1.125em;
 +
  margin-bottom:35px;
 +
  padding:8px 10px
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li a:hover {
 +
  color:#c9ab6c
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li {
 +
  float:none;
 +
  display:block;
 +
  margin:0;
 +
  font-size:.875em
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a {
 +
  font-size:1em;
 +
  margin-bottom:0;
 +
  color:#767676;
 +
  position:relative
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a:hover {
 +
  color:white
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch {
 +
  padding-right:52px
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:before {
 +
  display:block;
 +
  position:absolute;
 +
  top:0;
 +
  right:10px;
 +
  width:32px;
 +
  height:32px;
 +
  font-family:'icon';
 +
  text-align:center;
 +
  line-height:32px;
 +
  -webkit-transition:color .3s ease-in-out 0s;
 +
  -moz-transition:color .3s ease-in-out 0s;
 +
  -o-transition:color .3s ease-in-out 0s;
 +
  -ms-transition:color .3s ease-in-out 0s;
 +
  transition:color .3s ease-in-out 0s
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:before {
 +
  background:#28aae1;
 +
  content:"\ea91";
 +
  color:#191919
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:hover:before {
 +
  color:white
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:before {
 +
  background:#3460a1;
 +
  content:"\ea8c";
 +
  color:#191919;
 +
  text-indent:-2px
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:hover:before {
 +
  color:white
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:before {
 +
  background:#de5543;
 +
  content:"\ea88";
 +
  color:#191919
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:hover:before {
 +
  color:white
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:before {
 +
  background:#ee3138;
 +
  content:"\ea99";
 +
  color:#191919
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:hover:before {
 +
  color:white
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:before {
 +
  background:#136d9d;
 +
  content:"\eac9";
 +
  color:#191919
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:hover:before {
 +
  color:white
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:before {
 +
  background:#65469c;
 +
  content:"\ea9b";
 +
  color:#191919
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:hover:before {
 +
  color:white
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:before {
 +
  background:#bd2126;
 +
  content:"\e900";
 +
  color:#191919
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:hover:before {
 +
  color:white
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:before {
 +
  background:#1caad9;
 +
  content:"\e901";
 +
  color:#191919
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:hover:before {
 +
  color:white
 +
}
 +
#footer .logo {
 +
  width:183px;
 +
  height:0;
 +
  margin:40px auto 100px;
 +
  background-size:100%;
 +
  position:relative
 +
}
 +
#footer .logo:after {
 +
  content:"Copyright © 2017 All Right Reserved";
 +
  display:block;
 +
  width:320px;
 +
  position:absolute;
 +
  top:110%;
 +
  left:-120px;
 +
  right:-120px;
 +
  margin:auto;
 +
  text-align:center;
 +
  color:white
 +
}
 +
#footer .logo a {
 +
  position:absolute;
 +
  top:0;
 +
  left:0;
 +
  right:0;
 +
  bottom:0;
 +
  overflow:hidden;
 +
  text-indent:-9999px;
 +
  display:none
 +
}
 +
#footer .logo a:hover:after,#footer .logo a:hover:before {
 +
  color:#c9ab6c
 +
}
 +
#footer .logo a:before {
 +
  content:"\e602";
 +
  font-family:'icon';
 +
  position:absolute;
 +
  color:white;
 +
  display:block;
 +
  text-align:center;
 +
  font-size:8em;
 +
  left:0;
 +
  right:0;
 +
  bottom:-46px;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s;
 +
  -webkit-backface-visibilty:hidden;
 +
  color:#939598;
 +
  text-indent:0
 +
}
 +
#footer .logo a:after {
 +
  content:"\e603";
 +
  font-family:'icon';
 +
  position:absolute;
 +
  color:white;
 +
  display:block;
 +
  text-align:center;
 +
  font-size:5em;
 +
  left:0;
 +
  right:0;
 +
  bottom:25px;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s;
 +
  -webkit-backface-visibilty:hidden;
 +
  color:#939598;
 +
  text-indent:0
 +
}
 +
#footer .block-sitemap {
 +
  display:none
 +
}
 +
#footer .block-sitemap ul.menu {
 +
  zoom:1
 +
}
 +
#footer .block-sitemap ul.menu:after {
 +
  content:'';
 +
  display:table;
 +
  clear:both;
 +
  height:0;
 +
  visibility:0
 +
}
 +
#footer .block-sitemap ul.menu li {
 +
  width:20%;
 +
  float:left;
 +
  padding:20px;
 +
  height:auto !important
 +
}
 +
#footer .block-sitemap ul.menu li a {
 +
  display:block;
 +
  padding:5px;
 +
  margin-bottom:40px;
 +
  color:white;
 +
  font-family:'GothamBook';
 +
  font-size:1.25em;
 +
  text-transform:uppercase
 +
}
 +
#footer .block-sitemap ul.menu li ul.menu li {
 +
  width:100%;
 +
  padding:0
 +
}
 +
#footer .block-sitemap ul.menu li ul.menu li a {
 +
  margin-bottom:0;
 +
  padding:2px 5px;
 +
  color:#767676;
 +
  font-size:1em
 +
}
 +
nav.contextual-navigation {
 +
  height:64px;
 +
  zoom:1;
 +
  text-align:center;
 +
  position:fixed;
 +
  left:0;
 +
  right:0;
 +
  top:48px;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s
 +
}
 +
nav.contextual-navigation:after {
 +
  content:'';
 +
  display:table;
 +
  clear:both;
 +
  height:0;
 +
  visibility:0
 +
}
 +
nav.contextual-navigation.sticky {
 +
  top:0;
 +
  z-index:2
 +
}
 +
nav.contextual-navigation .viewport {
 +
  display:inline-block;
 +
  position:absolute;
 +
  left:0;
 +
  width:100%;
 +
  height:64px
 +
}
 +
nav.contextual-navigation .viewport .menu-block-wrapper {
 +
  width:100%;
 +
  height:64px
 +
}
 +
nav.contextual-navigation .viewport h2 {
 +
  color:#fff;
 +
  padding:20px 10px;
 +
  font-size:1.125em;
 +
  font-family:'GothamBook';
 +
  font-weight:normal;
 +
  float:left
 +
}
 +
nav.contextual-navigation .viewport ul {
 +
  zoom:1;
 +
  float:left;
 +
  white-space:nowrap
 +
}
 +
nav.contextual-navigation .viewport ul:after {
 +
  content:'';
 +
  display:table;
 +
  clear:both;
 +
  height:0;
 +
  visibility:0
 +
}
 +
nav.contextual-navigation .viewport ul li {
 +
  display:inline-block
 +
}
 +
nav.contextual-navigation .viewport ul li a {
 +
  display:block;
 +
  padding:20px 10px;
 +
  font-size:1.125em;
 +
  color:white
 +
}
 +
nav.contextual-navigation .viewport ul li a.active {
 +
  color:#c9ab6c
 +
}
 +
nav.contextual-navigation .viewport ul li a.try,nav.contextual-navigation .viewport ul li a.buy {
 +
  padding:10px;
 +
  margin:10px 0;
 +
  width:76px;
 +
  text-align:center;
 +
  margin-left:10px
 +
}
 +
nav.contextual-navigation .viewport ul li a.buy {
 +
  background:#c9ab6c;
 +
  color:white
 +
}
 +
nav.contextual-navigation .viewport ul li a.try {
 +
  background:white;
 +
  color:black
 +
}
 +
@media(min-width:1025px) {
 +
  body {
 +
  overflow-x:hidden
 +
}
 +
body.menu-opened {
 +
  overflow-x:hidden !important
 +
}
 +
.menu-opened #page-wrapper #page {
 +
  right:0
 +
}
 +
#header {
 +
  height:80px;
 +
  background:white;
 +
  position:fixed;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s
 +
}
 +
.menu-opened #header {
 +
  -webkit-transform:translate(0px,0);
 +
  -moz-transform:translate(0px,0);
 +
  -ms-transform:translate(0px,0);
 +
  transform:translate(0px,0)
 +
}
 +
.header-transparent #header {
 +
  background:rgba(0,0,0,0.2)
 +
}
 +
.header-transparent #header .viewport .logo:after,.header-transparent #header .viewport .logo:before {
 +
  color:white
 +
}
 +
.header-transparent #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a,.header-transparent #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before,.header-transparent #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login {
 +
  color:white
 +
}
 +
.scrolled #header {
 +
  background:white;
 +
  height:60px
 +
}
 +
.scrolled #header .viewport .logo-scrolled a {
 +
  filter:alpha(opacity=100);
 +
  -ms-filter:alpha(opacity=@opacity-ie);
 +
  -moz-opacity:1;
 +
  -khtml-opacity:1;
 +
  opacity:1
 +
}
 +
.scrolled #header .viewport .logo:before,.scrolled #header .viewport .logo:after {
 +
  color:#767676
 +
}
 +
.scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a {
 +
  margin:14px 5px
 +
}
 +
.scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before {
 +
  color:#767676
 +
}
 +
.scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login {
 +
  color:#767676
 +
}
 +
.scrolled #header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a {
 +
  font-size:.875em;
 +
  width:auto;
 +
  height:26px;
 +
  margin:16px 5px;
 +
  padding:6px 13px
 +
}
 +
.scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu {
 +
  padding-top:0
 +
}
 +
.scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a {
 +
  font-size:.875em;
 +
  color:#767676;
 +
  padding:20px 12px;
 +
  height:60px
 +
}
 +
.scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover {
 +
  color:white
 +
}
 +
.scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a {
 +
  padding:10px 12px 7px;
 +
  height:auto;
 +
  color:white
 +
}
 +
#header .viewport {
 +
  max-width:1240px;
 +
  height:100%;
 +
  padding:0 20px;
 +
  margin:auto;
 +
  position:relative
 +
}
 +
#header .viewport .burger {
 +
  display:none
 +
}
 +
#header .viewport .logo a {
 +
  width:194px;
 +
  height:52px;
 +
  margin-top:0;
 +
  top:14px;
 +
  left:20px
 +
}
 +
#header .viewport .navigation-wrapper {
 +
  position:static;
 +
  width:auto;
 +
  background:transparent;
 +
  float:right;
 +
  -webkit-transition:margin .3s ease-in-out 0s;
 +
  -moz-transition:margin .3s ease-in-out 0s;
 +
  -o-transition:margin .3s ease-in-out 0s;
 +
  -ms-transition:margin .3s ease-in-out 0s;
 +
  transition:margin .3s ease-in-out 0s;
 +
  overflow-y:inherit
 +
}
 +
#header .viewport .navigation-wrapper:after {
 +
  display:none
 +
}
 +
#header .viewport .navigation-wrapper .navigation {
 +
  overflow-y:inherit;
 +
  background:transparent;
 +
  width:auto
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu {
 +
  float:left;
 +
  width:auto;
 +
  clear:none
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li {
 +
  width:auto;
 +
  float:left
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a {
 +
  font-size:1em
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu {
 +
  margin-right:15px;
 +
  padding-top:0
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li {
 +
  position:relative;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s;
 +
  height:100% !important;
 +
  overflow:visible
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler {
 +
  display:none
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a {
 +
  color:#767676;
 +
  padding:28px 12px;
 +
  height:100%;
 +
  line-height:150%;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s;
 +
  font-family:'GothamBook'
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a.active:hover {
 +
  color:white
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover {
 +
  background:#c9ab6c
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover {
 +
  background:#c9ab6c
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover a {
 +
  color:white;
 +
  -webkit-transition:none;
 +
  -moz-transition:none;
 +
  -ms-transition:none;
 +
  -o-transition:none;
 +
  transition:none
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover ul {
 +
  display:block;
 +
  top:100%;
 +
  filter:alpha(opacity=100);
 +
  -ms-filter:alpha(opacity=@opacity-ie);
 +
  -moz-opacity:1;
 +
  -khtml-opacity:1;
 +
  opacity:1
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul {
 +
  position:absolute;
 +
  top:0;
 +
  left:0;
 +
  background:#c9ab6c;
 +
  filter:alpha(opacity=0);
 +
  -ms-filter:alpha(opacity=@opacity-ie);
 +
  -moz-opacity:0;
 +
  -khtml-opacity:0;
 +
  opacity:0;
 +
  display:none;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s;
 +
  z-index:2
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li {
 +
  float:none
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a {
 +
  padding:7px 24px;
 +
  height:auto;
 +
  color:white;
 +
  white-space:nowrap;
 +
  width:100%
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a:hover {
 +
  background:#191919
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a {
 +
  width:auto;
 +
  height:34px;
 +
  margin:22px 5px;
 +
  padding:9px 13px;
 +
  background:#c9ab6c;
 +
  color:white;
 +
  text-align:center
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a:hover {
 +
  background:#fbfbfb;
 +
  color:#191919
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a {
 +
  width:32px;
 +
  height:30px;
 +
  margin:23px 5px;
 +
  text-indent:-9999px;
 +
  text-align:center;
 +
  padding-left:0
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before {
 +
  padding:0;
 +
  text-align:center;
 +
  padding-top:7px;
 +
  color:#767676;
 +
  width:100%
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login {
 +
  text-indent:0;
 +
  width:auto;
 +
  padding:11px 0 0 32px;
 +
  font-size:11px;
 +
  text-transform:uppercase;
 +
  color:#767676
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login:before {
 +
  width:32px;
 +
  font-size:18px;
 +
  text-transform:none
 +
}
 +
#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count {
 +
  top:31px;
 +
  left:27px;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s
 +
}
 +
.scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count {
 +
  top:11px
 +
}
 +
#footer #block-menu-menu-menu-footer-navigation {
 +
  height:auto;
 +
  padding-top:40px
 +
}
 +
nav.contextual-navigation {
 +
  height:64px;
 +
  zoom:1;
 +
  text-align:center;
 +
  position:static
 +
}
 +
nav.contextual-navigation:after {
 +
  content:'';
 +
  display:table;
 +
  clear:both;
 +
  height:0;
 +
  visibility:0
 +
}
 +
nav.contextual-navigation.sticky.sticky2 {
 +
  position:fixed;
 +
  top:60px;
 +
  left:0;
 +
  right:0;
 +
  z-index:2;
 +
  -webkit-transition:all .3s ease-in-out 0s;
 +
  -moz-transition:all .3s ease-in-out 0s;
 +
  -o-transition:all .3s ease-in-out 0s;
 +
  -ms-transition:all .3s ease-in-out 0s;
 +
  transition:all .3s ease-in-out 0s
 +
}
 +
nav.contextual-navigation .viewport {
 +
  display:inline-block;
 +
  position:static;
 +
  left:auto;
 +
  width:auto
 +
}
 +
}
  
−
// now that the current_page class has been added to a menu item, make the submenu fade in
+
}.view-gallery-homepage .item-list ul.pager {
−
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
+
  display:none
−
// change the +/- symbol of the corresponding menu button
+
}
−
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
+
.view-gallery-homepage ul {
−
+
  list-style:none
−
}
+
}
 +
.view-gallery-homepage .hide {
 +
  display:none
 +
}
 +
.view-gallery-homepage .view-content {
 +
  overflow:hidden
 +
}
 +
.view-gallery-homepage .view-content .item {
 +
  float:left;
 +
  margin:2px;
 +
  border:1px solid #eee;
 +
  box-sizing:content-box;
 +
  overflow:hidden;
 +
  position:relative
 +
}
  
 +
#page.banner {
 +
  padding-top:108px
 +
}
 +
.header-transparent #page.banner {
 +
  padding-top:0
 +
}
 +
#commercial_banner {
 +
  height:60px;
 +
  background-color:#c9ab6c;
 +
  width:100%;
 +
  z-index:1;
 +
  position:relative
 +
}
 +
#commercial_banner .contextual-links-region {
 +
  position:inherit
 +
}
 +
#commercial_banner a {
 +
  color:#fff;
 +
  text-align:center
 +
}
 +
#commercial_banner p {
 +
  width:100%;
 +
  height:100%;
 +
  display:table;
 +
  position:absolute;
 +
  font-weight:bold
 +
}
 +
#commercial_banner p a {
 +
  display:table-cell;
 +
  vertical-align:middle;
 +
  font-size:3vw;
 +
  padding:0 30px
 +
}
 +
#commercial_banner .close-button {
 +
  height:20px;
 +
  width:20px;
 +
  position:absolute;
 +
  box-sizing:border-box;
 +
  line-height:20px;
 +
  right:5px;
 +
  top:5px
 +
}
 +
#commercial_banner .close-button:before,#commercial_banner .close-button:after {
 +
  transform:rotate(-45deg);
 +
  content:'';
 +
  position:absolute;
 +
  top:50%;
 +
  left:50%;
 +
  margin-top:-2.5px;
 +
  margin-left:-10px;
 +
  display:block;
 +
  height:5px;
 +
  width:20px;
 +
  background-color:#fff
 +
}
 +
#commercial_banner .close-button:after {
 +
  transform:rotate(45deg)
 +
}
 +
@media(min-width:1025px) {
 +
  #page.banner {
 +
  padding-top:140px
 +
}
 +
#commercial_banner p a {
 +
  font-size:1vw
 +
}
 +
}#bannerCookie {
 +
  color:#fff;
 +
  background-color:#000;
 +
  opacity:.8;
 +
  left:0;
 +
  right:0;
 +
  bottom:0;
 +
  padding:1em 1.8em;
 +
  width:100%;
 +
  flex-direction:row;
 +
  display:flex;
 +
  position:fixed;
 +
  align-items:center;
 +
  font-size:16px;
 +
  line-height:1.5em;
 +
  flex-wrap:nowrap;
 +
  z-index:9999
 +
}
 +
#bannerCookie .message {
 +
  flex:1
 +
}
 +
#bannerCookie .message .more {
 +
  opacity:.8;
 +
  display:inline-block;
 +
  padding:.2em;
 +
  text-decoration:underline
 +
}
 +
#bannerCookie .message .more:hover,#bannerCookie .message .more:active {
 +
  text-decoration:none;
 +
  color:#c9ab6c
 +
}
 +
#bannerCookie .button {
 +
  display:flex;
 +
  align-items:center;
 +
  align-content:space-between
 +
}
 +
#bannerCookie .button a {
 +
  min-width:140px;
 +
  color:#fff;
 +
  background-color:#c9ab6c;
 +
  border-color:transparent;
 +
  flex:1;
 +
  display:block;
 +
  padding:.4em .8em;
 +
  font-size:.9em;
 +
  font-weight:700;
 +
  border-width:2px;
 +
  border-style:solid;
 +
  text-align:center;
 +
  white-space:nowrap;
 +
  cursor:pointer
 +
}
 +
#bannerCookie .button a:hover {
 +
  color:#000;
 +
  background-color:#fff
 +
}
  
−
 
−
// allow button on the black menu bar to show/hide the side menu
 
−
function hide_show_menu() {
 
−
 
−
// in case you preview mode is selected, the menu is hidden for better visibility
 
−
if (window.location.href.indexOf("submit") >= 0) {
 
−
$(".igem_2017_menu_wrapper").hide();
 
−
}
 
−
 
−
// if the black menu bar has been loaded
 
−
  if (document.getElementById('bars_item')) {
 
−
 
−
// when the "bars_item" has been clicked
 
−
$("#bars_item").click(function() {
 
−
$("#sideMenu").hide();
 
−
 
−
// show/hide the menu wrapper
 
−
$(".igem_2017_menu_wrapper").fadeToggle("100");
 
−
});
 
−
  }
 
−
 
−
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
 
−
else {
 
−
    setTimeout(hide_show_menu, 15);
 
−
}
 
−
}
 
−
 
−
 
−
});
 
−
 
−
 
−
</script>
 
−
 
−
 
−
 
−
 
−
 
−
<style>
 
−
 
−
 
−
 
−
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 
−
 
−
/* Clear the default wiki settings */
 
−
 
−
#home_logo, #sideMenu { display:none; }
 
−
#sideMenu, #top_title, .patrollink  {display:none;}
 
−
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 
−
body {background-color:white; }
 
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
−
 
−
 
−
 
−
 
−
/**************************************************************** MENU ***************************************************************/
 
−
/* Wrapper for the menu */
 
−
.igem_2017_menu_wrapper {
 
−
width: 15%;
 
−
height:100vh;
 
−
position:fixed;
 
−
right:0%;
 
−
padding:0px;
 
−
float:right;
 
−
border-left: 1px solid #d3d3d3;
 
−
background-color:#dddddd;
 
−
text-align:left;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
overflow-y: auto;
 
−
overflow-x: hidden;
 
−
}
 
−
 
−
/* this hides the scrollbar to keep view consistency */
 
−
.igem_2017_menu_wrappe::-webkit-scrollbar {
 
−
display: none;
 
−
}
 
−
 
−
 
−
/* styling for links in the menu, removes the line under text */
 
−
.igem_2017_menu_wrapper a { 
 
−
text-decoration: none;
 
−
}
 
−
 
−
 
−
/* styling for the images in the menu */
 
−
.igem_2017_menu_wrapper img {
 
−
width: 100%;
 
−
}
 
−
 
−
/* styling for the menu buttons */
 
−
.igem_2017_menu_wrapper .menu_button {
 
−
width: 100%;
 
−
padding: 10px 0px 10px 15px;
 
−
float:left;
 
−
border-bottom: 1px solid #d3d3d3;
 
−
font-size: 12px;
 
−
font-weight: bold;
 
−
color: #5e5f5f;
 
−
cursor: pointer;
 
−
}
 
−
 
−
 
−
.igem_2017_menu_wrapper .menu_bottom_padding {
 
−
width: 100%;
 
−
height: 30px;
 
−
float:left;
 
−
}
 
−
 
−
.menu_button.direct_to_page {
 
−
padding-left: 36px;
 
−
}
 
−
 
−
 
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
 
−
width:10%;
 
−
float:left;
 
−
}
 
−
 
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
 
−
content: "+"; 
 
−
}
 
−
 
−
.open::before {
 
−
content: "-" !important; 
 
−
}
 
−
 
−
 
−
 
−
/* styling for the menu buttons on hover */
 
−
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
 
−
background-color: #3399ff;
 
−
text-decoration: none;
 
−
color:#ffffff;
 
−
}
 
−
 
−
/* styling for the menu button when it is the current page */
 
−
.current_page {
 
−
background-color:#7fc1f7  !important;
 
−
color:#5e5f5f !important;
 
−
}
 
−
 
−
 
−
/* styling for the submenu buttons */
 
−
.igem_2017_menu_wrapper .submenu_button {
 
−
width: 100%;
 
−
padding: 10px 0px 10px 34px;
 
−
float:left;
 
−
background-color:#f2f2f2;
 
−
border-bottom: 1px solid #d3d3d3;
 
−
font-size: 12px;
 
−
color: #5e5f5f;
 
−
cursor: pointer;
 
−
}
 
−
 
−
/* wrapper for the submenu items, they are hidden by default*/
 
−
.igem_2017_menu_wrapper .submenu_wrapper {
 
−
display:none;
 
−
}
 
−
 
−
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
 
−
.igem_2017_menu_wrapper #display_menu_control {
 
−
display:none;
 
−
text-align:center;
 
−
}
 
−
 
−
 
−
/***************************************************** CONTENT OF THE PAGE ****************************************************/
 
−
 
−
/* Wrapper for the content */
 
−
.igem_2017_content_wrapper {
 
−
width: 81%;
 
−
margin: 2%;
 
−
display:block;
 
−
float:left;
 
−
background-color:white;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
−
 
−
 
−
/********************************* HTML STYLING  *********************************/
 
−
 
−
/* styling for the titles h1 h2 */
 
−
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
 
−
padding:5px 15px;
 
−
border-bottom: 0px;
 
−
color: #3399ff;
 
−
}
 
−
 
−
 
−
/* styling for the titles  h3 h4 h5 h6*/
 
−
.igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
 
−
padding:5px 15px;
 
−
border-bottom:0px;
 
−
color: #000000; 
 
−
}
 
−
 
−
 
−
/* font and text */
 
−
.igem_2017_content_wrapper p {
 
−
padding: 0px 15px;
 
−
font-size: 13px;
 
−
}
 
−
 
−
/* Links */
 
−
.igem_2017_content_wrapper a {
 
−
font-weight: bold;
 
−
text-decoration: underline;
 
−
text-decoration-color: #3399ff;
 
−
color:  #3399ff;
 
−
-webkit-transition: all 0.4s ease;
 
−
-moz-transition: all 0.4s ease;
 
−
-ms-transition: all 0.4s ease;
 
−
-o-transition: all 0.4s ease;
 
−
transition: all 0.4s ease;
 
−
}
 
−
 
−
/* hover for the links */
 
−
.igem_2017_content_wrapper a:hover {
 
−
text-decoration:none;
 
−
color:#000000;
 
−
}
 
−
 
−
/* non numbered lists */
 
−
.igem_2017_content_wrapper ul {
 
−
padding:0px 20px;
 
−
font-size: 13px;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
−
 
−
/* numbered lists */
 
−
.igem_2017_content_wrapper ol {
 
−
padding:0px;
 
−
font-size: 13px;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
−
 
−
/* Table */
 
−
.igem_2017_content_wrapper table {
 
−
width: 97%;
 
−
margin:15px 10px;
 
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
−
}
 
−
 
−
/* table cells */
 
−
.igem_2017_content_wrapper  td {
 
−
padding: 10px;
 
−
vertical-align: text-top;
 
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
−
}
 
−
 
−
/* table headers */
 
−
.igem_2017_content_wrapper th {
 
−
padding: 10px;
 
−
vertical-align: text-top;
 
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
−
background-color:#f2f2f2;
 
−
}
 
−
 
−
 
−
/**********************************LAYOUT CLASSES **********************************/
 
−
 
−
/* general class for column divs */
 
−
.igem_2017_content_wrapper .column  {
 
−
padding: 10px 0px;
 
−
float:left;
 
−
}
 
−
 
−
/* class for a full width column */
 
−
.column .full_size {
 
−
width:100%;
 
−
}
 
−
 
−
/* styling for images in a full width column*/
 
−
.column.full_size img {
 
−
width:97%;
 
−
padding: 10px 15px;
 
−
}
 
−
 
−
/* class for a half width column */
 
−
.column.half_size {
 
−
width: 50%;
 
−
}
 
−
/* styling for images in a half width column*/
 
−
.column.half_size img {
 
−
width: 94.5%;
 
−
padding: 10px 15px;
 
−
}
 
−
 
−
 
−
 
−
 
−
/********************************* SUPPORT CLASSES ********************************/
 
−
 
−
/* class that clears content below*/
 
−
.igem_2017_content_wrapper .clear {
 
−
clear:both;
 
−
}
 
−
 
−
 
−
/* adds extra spacing when clearing content */
 
−
.igem_2017_content_wrapper  .clear.extra_space {
 
−
height: 30px;
 
−
}
 
−
 
−
 
−
/* highlight class, makes content slightly smaller */
 
−
.igem_2017_content_wrapper .highlight {
 
−
margin: 0px 15px;
 
−
padding: 15px 0px;
 
−
}
 
−
 
−
 
−
/* highlight class, adds a gray background */
 
−
.igem_2017_content_wrapper .highlight.gray {
 
−
background-color: #f2f2f2;
 
−
}
 
−
 
−
/* highlight with decoration blue line on top */
 
−
.igem_2017_content_wrapper .highlight.blue_top {
 
−
    border-top: 4px solid #3399ff;
 
−
}
 
−
 
−
/* highlight with a full blue border decoration */
 
−
.igem_2017_content_wrapper .highlight.blue_border {
 
−
    border: 4px solid  #3399ff;
 
−
}
 
−
 
−
 
−
/* button class */
 
−
.igem_2017_content_wrapper .button{
 
−
max-width: 35%;
 
−
margin: 30px auto;
 
−
padding: 12px 10px;
 
−
    background-color: #3399ff;
 
−
    text-align: center;
 
−
  color: #ffffff;
 
−
-webkit-transition: all 0.4s ease;
 
−
-moz-transition: all 0.4s ease;
 
−
-ms-transition: all 0.4s ease;
 
−
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 
−
}
 
−
 
−
/* styling for button on hover */
 
−
.igem_2017_content_wrapper .button:hover{
 
−
background-color: #3399ff;
 
−
    color: #000000;
 
−
}
 
−
 
−
 
−
 
−
 
−
/***************************************************** RESPONSIVE STYLING ****************************************************/
 
−
 
−
/* IF THE SCREEN IS LESS THAN 1200PX */
 
−
@media only screen and (max-width: 1200px) {
 
−
 
−
#content {width:100%; }
 
−
.igem_2017_menu_wrapper {width:15%; right:0;}
 
−
.highlight {padding:10px 0px;}
 
−
.igem_2017_menu_wrapper #display_menu_control { display:none; }
 
−
#menu_content { display:block;}
 
−
.menu_button.direct_to_page {padding-left: 17px;}
 
−
 
−
}
 
−
 
−
/* IF THE SCREEN IS LESS THAN 800PX */
 
−
@media only screen and (max-width: 800px) {
 
−
 
−
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 
−
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
 
−
.column.half_size  {width:100%; }
 
−
.column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
 
−
.highlight {padding:15px 5px;}
 
−
.igem_2017_menu_wrapper #display_menu_control { display:block; }
 
−
#menu_content { display:none;}
 
−
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 
−
.menu_bottom_padding {display:none;}
 
−
.menu_button.direct_to_page { padding-left: 36px; }
 
−
}
 
−
 
−
 
−
 
−
 
−
/* special class that the system uses to make sure the team wants a page to be evaluated */
 
−
.judges-will-not-evaluate {
 
−
    width: 96.6%;
 
−
  margin: 5px 15px;
 
−
  display: block;
 
−
border: 4px solid #3399ff;
 
−
    font-weight: bold;
 
−
}
 
−
 
 
</style>
 
</style>
−
 
−
 
−
<!--- THIS IS WHERE THE HTML BEGINS --->
 
−
 
−
 
−
 
−
<head>
 
−
 
−
<!-- This tells the browser that your page is responsive -->
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
 
 
</head>
 
</head>
 +
<body class="html front not-logged-in no-sidebars page-node page-node- page-node-1393 node-type-wall header-transparent">
  
  
 +
   
 +
    <header id="header">
 +
      <div class="viewport">
  
−
<div class="igem_2017_menu_wrapper" >
+
        <img src="./img/logo_black.png" class="logo">
−
 
+
        <div class="burger open"><span class="top"></span><span></span><span class="bottom"></span></div>
−
 
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China">
+
−
<img src="http://placehold.it/350x150">
+
−
</a>
+
−
 
+
−
 
+
−
<!-- this div is hidden by default and will only be displayed if the screen size is too small -->
+
−
<div class="menu_button" id="display_menu_control">
+
−
MENU 
+
−
</div>
+
−
 
+
−
<div id="menu_content">
+
−
+
−
 
+
−
 
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China">
+
−
<div class="menu_button direct_to_page">
+
−
HOME
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
 
+
−
<div class="menu_button">
+
−
<div class="expand_collapse_icon"> </div> TEAM
+
−
</div>  
+
−
 
+
−
<div class="submenu_wrapper" id="team_submenu">
+
−
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Team">
+
−
<div class="submenu_button" id="Team_page">
+
−
Team
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Collaborations">
+
−
<div class="submenu_button"  id="Collaborations_page">
+
−
Collaborations
+
−
</div>
+
−
</a>
+
−
+
−
+
−
</div>
+
−
 
+
−
 
+
−
+
−
+
−
 
+
−
<div class="menu_button">
+
−
<div class="expand_collapse_icon">  </div> PROJECT
+
−
</div>
+
−
 
+
−
<!-- project submenu -->
+
−
<div class="submenu_wrapper">
+
−
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Description">
+
−
<div class="submenu_button"  id="Description_page">
+
−
Description
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Design">
+
−
<div class="submenu_button"  id="Design_page">
+
−
Design
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Experiments">
+
−
<div class="submenu_button"  id="Experiments_page">
+
−
Experiments
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Notebook">
+
−
<div class="submenu_button"  id="Notebook_page">
+
−
Notebook
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/InterLab">
+
−
<div class="submenu_button"  id="InterLab_page">
+
−
InterLab
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Contribution">
+
−
<div class="submenu_button"  id="Contribution_page">
+
−
Contribution
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Model">
+
−
<div class="submenu_button"  id="Model_page">
+
−
Model
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Results">
+
−
<div class="submenu_button"  id="Results_page">
+
−
Results
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Demonstrate">
+
−
<div class="submenu_button"  id="Demonstrate_page">
+
−
Demonstrate
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Improve">
+
−
<div class="submenu_button"  id="Improve_page">
+
−
Improve
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Attributions">
+
−
<div class="submenu_button"  id="Attributions_page">
+
−
Attributions
+
−
</div>
+
−
</a>
+
−
 
+
−
</div>
+
−
 
+
−
+
−
+
−
+
−
+
−
 
+
−
<div class="menu_button">
+
−
<div class="expand_collapse_icon">  </div> PARTS
+
−
</div>
+
−
+
−
<!-- parts submenu -->
+
−
<div class="submenu_wrapper">
+
−
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Parts">
+
−
<div class="submenu_button"  id="Parts_page">
+
−
Parts
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Basic_Part">
+
−
<div class="submenu_button"  id="Basic_Part_page">
+
−
Basic Parts
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Composite_Part">
+
−
<div class="submenu_button"  id="Composite_Part_page">
+
−
Composite Parts
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Part_Collection">
+
−
<div class="submenu_button"  id="Part_Collection_page">
+
−
Part Collection
+
−
</div>
+
−
</a>
+
−
</div>
+
−
 
+
−
+
−
+
−
+
−
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Safety">
+
−
<div class="menu_button direct_to_page">
+
−
SAFETY
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="menu_button" >
+
−
<div class="expand_collapse_icon">  </div> HUMAN PRACTICES
+
−
</div>
+
−
 
+
−
<!-- human practices submenu -->
+
−
<div class="submenu_wrapper">
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/HP/Silver">
+
−
<div class="submenu_button"  id="Silver_page">
+
−
Silver HP
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/HP/Gold_Integrated">
+
−
<div class="submenu_button" id="Gold_Integrated_page">
+
−
Integrated and Gold
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Engagement">
+
−
<div class="submenu_button"  id="Engagement_page">
+
−
Public Engagement
+
−
</div>
+
−
</a>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="menu_button">
+
−
<div class="expand_collapse_icon">  </div> AWARDS
+
−
</div>
+
−
 
+
−
<!-- awards submenu -->
+
−
<div class="submenu_wrapper">
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Applied_Design">
+
−
<div class="submenu_button"  id="Applied_Design_page">
+
−
Applied Design
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Entrepreneurship">
+
−
<div class="submenu_button"  id="Entrepreneurship_page">
+
−
Entrepreneurship
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Hardware">
+
−
<div class="submenu_button"  id="Hardware_page">
+
−
Hardware
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Measurement">
+
−
<div class="submenu_button"  id="Measurement_page">
+
−
Measurement
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Model">
+
−
<div class="submenu_button"  id="Model_page">
+
−
Model
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Plant">
+
−
<div class="submenu_button"  id="Plant_page">
+
−
Plant
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
<a href="https://2017.igem.org/Team:HFUT-China/Software">
+
−
<div class="submenu_button"  id="Software_page">
+
−
Software
+
−
</div>
+
−
</a>
+
−
 
+
−
</div>
+
−
 
+
−
<a href="https://igem.org/2017_Judging_Form?team=HFUT-China">
+
−
<div class="menu_button direct_to_page">
+
−
JUDGING FORM
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
+
−
<div class="menu_bottom_padding" >
+
−
</div>
+
−
+
−
</div>
+
−
 
+
  
 +
        <div class="navigation-wrapper">
 +
          <div class="navigation">
 +
            <div class="main-menu block-menu">
 +
  <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
 +
  <ul class="menu"><li class="first expanded menu-mlid-13507" ><a href="" class="buy">Main page</a><ul class="menu">
 +
</ul></li>
 +
<li class="expanded menu-mlid-664"><a href="" id="header-products">Project</a><ul class="menu"><li class="first leaf menu-mlid-11193"><a href="">Substance Painter</a></li>
 +
<li class="leaf menu-mlid-10352"><a href="">Description</a></li>
 +
<li class="leaf menu-mlid-10294"><a href="">Design </a></li>
 +
<li class="last leaf menu-mlid-14244"><a href="">Validation </a></li>
 +
</ul></li>
 +
<li class="expanded menu-mlid-10285"><a href="">Software</a><ul class="menu"><li class="first leaf menu-mlid-14214"><a href="">User guide</a></li>
 +
<li class="last leaf menu-mlid-11094"><a href="" target="_blank">Technology </a></li>
 +
</ul></li>
 +
<li class="expanded menu-mlid-11093"><a href="">Documents</a><ul class="menu"><li class="first leaf menu-mlid-10677"><a href="" target="_blank">API</a></li>
 +
<li class="leaf menu-mlid-7876"><a href="" title="User Guides of Allegorithmic products" target="_blank">Notebook</a></li>
 +
<li class="last leaf menu-mlid-10349"><a href="/pbr-guide">Unit test</a></li>
 +
</ul></li>
 +
<li class="expanded menu-mlid-665"><a href="">Requirements</a><ul class="menu"><li class="first leaf menu-mlid-14319"><a href="">Medals</a></li>
 +
<li class="leaf menu-mlid-3095"><a href="">Safety</a></li>
 +
<li class="leaf menu-mlid-10347"><a href="">Collaboration </a></li>
 +
</ul></li>
 +
<li class="expanded menu-mlid-665"><a href="">Team</a><ul class="menu"><li class="first leaf has-children menu-mlid-11299"><a href="">Members </a></li>
 +
<li class="leaf menu-mlid-11254"><a href="" name="Jobs">Attribution</a></li>
 +
</ul></li>
 +
<li class="last expanded menu-mlid-670"><a href="">Human practice</a></li>
 +
</ul></div>
 +
</div>
 +
<!-- <div class="last expanded menu-mlid-670">
 +
  <ul class="menu"><li class="leaf menu-mlid-11254"><a href="" class="menu">Human practice</a></li>
 +
</ul></div> -->
 +
          </div>
 +
        </div>
 +
      </div>
  
 +
            <!--  <div id="commercial_banner" >
 +
            <div class="region region-banner">
 +
    <div id="block-block-5" class="block block-block">
  
 +
        <p><a href="">Jul 23: hfut(sui bian xie) &amp;  Designer + upgrades!</a></p>
 +
</div>
 +
  </div>
 +
          <a href="#" class="close-button"></a>
 +
        </div> -->
 +
          </header>
 +
  </div>
 
</div>
 
</div>
 +
<!-- <div class="first">
 +
<img src="img/MainpageF.png" class="btopic">
  
 +
</div> -->
 +
<!-- <ul id="wrap">
 +
<li><a>1</a></li>
 +
<li><a>2</a></li>
 +
<li><a>3</a></li>
 +
</ul> -->
 +
    <script type="text/javascript">
 +
   
  
  
−
<!-- start of content -->
+
      <!--//--><![CDATA[//><!--
−
<div class="igem_2017_content_wrapper">
+
      var _gaq = _gaq || [];
−
<h1>HFUT-China</h1>
+
      _gaq.push(["_setAccount", "UA-2932128-1"]);
 +
      _gaq.push(["_setDomainName", ".allegorithmic.com"]);
 +
      _gaq.push(["_trackPageview"]);
 +
      (function() {
 +
          var ga = document.createElement("script");
 +
          ga.type = "text/javascript";
 +
          ga.async = true;
 +
          ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
 +
          var s = document.getElementsByTagName("script")[0];
 +
          s.parentNode.insertBefore(ga, s);
 +
      })();
 +
      //--><!]]>
 +
  </script>
 +
  <script src="./js/cookie.js"></script>
 +
</body>
 +
</html>

Revision as of 18:05, 12 October 2017

<!DOCTYPE html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="./img/logo_black_small.png" type="image/png" /> 


 <title>Team:HFUT-China</title>


<link href="./css/header.css" rel="stylesheet"/> <link href="./css/style.css" rel="stylesheet"/> <style type="text/css">


/* #c9ab6c */


  • {
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 margin:0;
 padding:0;
 -webkit-font-smoothing:antialiased;
 -moz-font-smoothing:antialiased;
 -o-font-smoothing:antialiased;
 font-smoothing:antialiased

} a,input,button,*,a:focus,input:focus,button:focus,*:focus,a:active,input:active,button:active,*:active,a:link,input:link,button:link,*:link,a:visited,input:visited,button:visited,*:visited,a:hover,input:hover,button:hover,*:hover { 

 outline:0

} html { 

 font-size:100%

} html,body { 

 min-height:100%

} body { 

 position:relative;
 font-family:arial,sans-serif

} a { 

 text-decoration:none

} table { 

 width:100%

} th,td { 

 padding:14px;
 vertical-align:middle

} tr.odd,tr.even { 

 background-color:transparent;
 border-bottom:1px solid #e5e5e5;
 -webkit-transition:all .2s ease-in-out 0s;
 -moz-transition:all .2s ease-in-out 0s;
 -o-transition:all .2s ease-in-out 0s;
 -ms-transition:all .2s ease-in-out 0s;
 transition:all .2s ease-in-out 0s

} thead { 

 background-color:#f0f0f0;
 border-bottom:1px solid #e5e5e5

} td,th { 

 border-bottom:0

} td,th,td a,th a { 

 color:#626262

} ul.primary { 

 position:fixed;
 z-index:20;
 top:150px;
 left:0;
 border-bottom:0;
 padding:0;
 margin:0;
 filter:alpha(opacity=60);
 -ms-filter:alpha(opacity=@opacity-ie);
 -moz-opacity:.6;
 -khtml-opacity:.6;
 opacity:.6;
 -webkit-transition:opacity .3s ease-in-out 0s;
 -moz-transition:opacity .3s ease-in-out 0s;
 -o-transition:opacity .3s ease-in-out 0s;
 -ms-transition:opacity .3s ease-in-out 0s;
 transition:opacity .3s ease-in-out 0s

} ul.primary:hover,ul.primary:active { 

 filter:alpha(opacity=100);
 -ms-filter:alpha(opacity=@opacity-ie);
 -moz-opacity:1;
 -khtml-opacity:1;
 opacity:1

} ul.primary li { 

 display:block

} ul.primary li a { 

 display:block;
 background-color:black;
 color:white;
 border-width:0;
 border:0;
 padding:10px;
 font-size:10px;
 height:auto;
 margin-right:0;
 text-decoration:none;
 -webkit-transition:background .3s ease-in-out 0s;
 -moz-transition:background .3s ease-in-out 0s;
 -o-transition:background .3s ease-in-out 0s;
 -ms-transition:background .3s ease-in-out 0s;
 transition:background .3s ease-in-out 0s

} ul.primary li a:hover { 

 background:grey

} ul.primary li.active a { 

 background-color:white;
 color:black;
 border-width:0;
 border:0

} body { 

 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 font-family:'GothamBook';
 overflow-x:hidden;
 max-width:100%;
 background:#fbfbfb

} body.menu-opened { 

 overflow:hidden

}

  1. page-wrapper {
 height:100%

}

  1. page {
 height:100%;
 max-width:100%;
 min-width:100%;
 right:0;
 padding-top:48px;
 -webkit-backface-visibilty:hidden;
 position:relative;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s

} .header-transparent #page { 

 padding-top:0

} .menu-opened #page { 

 -webkit-transform:translate(-272px,0);
 -moz-transform:translate(-272px,0);
 -ms-transform:translate(-272px,0);
 transform:translate(-272px,0)

}

  1. main {
 height:100%;
 position:relative;
 z-index:1

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

 #page {
 padding-top:80px

} .header-transparent #page { 

 padding-top:0

} }.background-color-1 { 

 background-color:#000

} .background-color-2 { 

 background-color:#fbfbfb

} .background-color-3 { 

 background-color:#229f7d

} .background-color-4 { 

 background-color:#c9ab6c

} .background-color-5 { 

 background-color:#b91f2f

} .background-color-6 { 

 background-color:#191919

} .background-color-7 { 

 background-color:#767676

} .background-color-8 { 

 background-color:#3460a1

} .background-color-9 { 

 background-color:#28aae1

} .background-color-10 { 

 background-color:#136d9d

} .background-color-11 { 

 background-color:#de5543

} .background-color-12 { 

 background-color:#ee3138

} .background-color-13 { 

 background-color:#16bbed

} .background-color-14 { 

 background-color:#65469c

} .background-color-15 { 

 background-color:#f5f5f5

} .background-color-16 { 

 background-color:#fff

} .background-color-17 { 

 background-color:#fff

} .background-color-18 { 

 background-color:#fff

} .background-color-19 { 

 background-color:#fff

} .background-color-20 { 

 background-color:#fff

} .color-1,.color-1 a { 

 color:#000

} .color-2,.color-2 a { 

 color:#fbfbfb

} .color-3,.color-3 a { 

 color:#229f7d

} .color-4,.color-4 a { 

 color:#c9ab6c

} .color-5,.color-5 a { 

 color:#b91f2f

} .color-6,.color-6 a { 

 color:#191919

} .color-7,.color-7 a { 

 color:#767676

} .color-8,.color-8 a { 

 color:#3460a1

} .color-9,.color-9 a { 

 color:#28aae1

} .color-10,.color-10 a { 

 color:#136d9d

} .color-11,.color-11 a { 

 color:#de5543

} .color-12,.color-12 a { 

 color:#ee3138

} .color-13,.color-13 a { 

 color:#16bbed

} .color-14,.color-14 a { 

 color:#65469c

} .color-15,.color-15 a { 

 color:#f5f5f5

} .color-16,.color-16 a { 

 color:#fff

} .color-17,.color-17 a { 

 color:#fff

} .color-18,.color-18 a { 

 color:#fff

} .color-19,.color-19 a { 

 color:#fff

} .color-20,.color-20 a { 

 color:#fff

} .color-21,.color-21 a { 

 color:#f5a90c

} .color-22,.color-22 a { 

 color:#9b38a3

} .color-23,.color-23 a { 

 color:#333

}


.viewport { 

 max-width:1240px;
 margin:auto;
 zoom:1;
 position:relative;
 min-height:100%

} .viewport:after { 

 content:;
 display:table;
 clear:both;
 height:0;
 visibility:0

} .overflow { 

 overflow:hidden

} a { 

 color:#c9ab6c;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s

} a:hover { 

 color:#191919

} ul.menu { 

 padding:0;
 margin:0

} ul.menu li { 

 list-style:none;
 padding:0;
 margin:0

} h2,h3,h4,p { 

 font-weight:normal

} a.form-submit,input.form-submit { 

 background:#c9ab6c;
 text-transform:uppercase;
 color:white;
 padding:10px;
 margin:5px;
 border:0;
 font-family:'GothamBook';
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s

} a.form-submit:hover,input.form-submit:hover { 

 background:#eee;
 color:#191919

} a.form-submit.delete-line-item,input.form-submit.delete-line-item { 

 text-transform:none;
 text-indent:-9999px;
 background:url(/sites/all/themes/mess/images/delete.png) no-repeat center #dadada;
 height:24px;
 width:24px;
 background-size:100%;
 padding:0;
 border:0;
 -webkit-border-radius:48px;
 -moz-border-radius:48px;
 border-radius:48px;
 -moz-background-clip:padding;
 -webkit-background-clip:padding-box;
 background-clip:padding-box;
 -webkit-transition:background .3s ease-in-out 0s;
 -moz-transition:background .3s ease-in-out 0s;
 -o-transition:background .3s ease-in-out 0s;
 -ms-transition:background .3s ease-in-out 0s;
 transition:background .3s ease-in-out 0s

} a.form-submit.delete-line-item:hover,input.form-submit.delete-line-item:hover { 

 background:url(/sites/all/themes/mess/images/delete.png) no-repeat center #b91f2f;
 background-size:100%

} a.form-submit.checkout-back,input.form-submit.checkout-back,a.form-submit.checkout-cancel,input.form-submit.checkout-cancel { 

 background:#efefef;
 font-family:'GothamBook';
 color:grey

} a.form-submit.checkout-back:hover,input.form-submit.checkout-back:hover,a.form-submit.checkout-cancel:hover,input.form-submit.checkout-cancel:hover { 

 background:white;
 color:#b91f2f

}

body.admin-menu { 

 margin-top:0 !important

}

  1. header {
 position:absolute;
 height:48px;
 width:100%;
 top:0;
 left:0;
 right:0;
 background:white;
 z-index:20;
 -webkit-backface-visibilty:hidden;
 -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.2);
 -moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.2);
 box-shadow:0 0 10px 0 rgba(0,0,0,0.2)

}

  1. header .block-context-ui {
 display:none

} .header-transparent #header { 

 background:rgba(0,0,0,0.2)

} .scrolled #header { 

 background:white

} .scrolled #header .viewport .logo:after { 

 right:90px

}

  1. header .viewport {
 position:static

}

  1. header .viewport .logo {
 position:absolute;
 height:90px;
 width:100px;
 left:50px;
 top:20%;
 margin-top:-24px;
 z-index:3;
 overflow:hidden

}

  1. header .viewport .logo a {
 display:block;
 text-indent:-9999px;
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 filter:alpha(opacity=100);
 -ms-filter:alpha(opacity=@opacity-ie);
 -moz-opacity:1;
 -khtml-opacity:1;
 opacity:1;
 z-index:3

}

  1. header .viewport .logo:active:after,#header .viewport .logo:hover:after,#header .viewport .logo:active:before,#header .viewport .logo:hover:before {
 color:#c9ab6c

}

  1. header .viewport .logo:after,#header .viewport .logo:before {
 font-family:'icon';
 position:absolute;
 display:block;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 color:#767676;
 -webkit-backface-visibilty:hidden;
 z-index:0

} .header-transparent #header .viewport .logo:after,.header-transparent #header .viewport .logo:before { 

 color:white

}

  1. header .viewport .logo:after {
 content:"\e603";
 font-size:3em;
 left:0;
 top:0

}

  1. header .viewport .logo:before {
 content:"\e602";
 font-size:7em;
 left:50px;
 top:-32px

}

  1. header .viewport .burger {
 height:48px;
 width:48px;
 position:absolute;
 right:0;
 top:0;
 background:#c9ab6c;
 cursor:pointer

}

  1. header .viewport .burger span {
 display:block;
 height:2px;
 width:24px;
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 background:white

}

  1. header .viewport .burger span.top {
 top:16px

}

  1. header .viewport .burger span.bottom {
 bottom:16px

}

  1. header .viewport .navigation-wrapper {
 position:fixed;
 left:100%;
 z-index:20;
 top:0;
 bottom:0;
 overflow-y:scroll;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 zoom:1

}

  1. header .viewport .navigation-wrapper:after {
 content:;
 display:table;
 clear:both;
 height:0;
 visibility:0

}

  1. header .viewport .navigation-wrapper .navigation {
 width:272px;
 min-height:100%;
 position:relative;
 float:right;
 background:#191919;
 overflow-y:scroll

}

  1. header .viewport .navigation-wrapper .navigation .main-menu {
 padding-top:7px

}

  1. header .viewport .navigation-wrapper .navigation .block-menu {
 width:100%;
 clear:both

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li {
 float:left;
 width:100%

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a {
 display:block;
 padding:16px 10px;
 height:48px;
 width:100%;
 position:relative;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 -webkit-backface-visibilty:hidden

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a {
 padding-left:47px

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:active {
 color:#767676

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:hover {
 color:#767676

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.active,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:focus {
 color:white

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before {
 text-indent:0;
 font-family:'icon';
 display:block;
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 right:auto;
 text-align:center;
 padding:15px;
 font-size:1.125em;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 -webkit-backface-visibilty:hidden

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.cart:before {
 content:"\e604"

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.user:before {
 content:"\e605"

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login:before {
 content:"\e605"

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.logout:before {
 content:"\ea14"

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart {
 position:relative

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count {
 display:block;
 height:16px;
 width:16px;
 text-align:center;
 color:white;
 background:red;
 font-size:12px;
 font-weight:bold;
 border-radius:16px;
 letter-spacing:-1px;
 line-height:150%;
 text-indent:-1px;
 position:absolute;
 top:6px;
 left:30px

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li {
 width:100%

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a {
 display:block;
 padding:10px 16px;
 height:36px;
 width:100%;
 color:#767676;
 text-transform:uppercase;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a:hover,#header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover {
 color:white

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li {
 overflow:hidden;
 position:relative

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler {
 width:36px;
 height:36px;
 position:absolute;
 right:0;
 top:0

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler:before {
 content:"\e601";
 font-family:'icon';
 display:block;
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 -webkit-transform:rotate(90deg);
 -moz-transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 transform:rotate(90deg);
 text-align:center;
 line-height:230%;
 color:#767676

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:focus .toggler:before {
 color:white

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li.opened a {
 color:#c9ab6c

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li.opened .toggler:before {
 -webkit-transform:rotate(-90deg);
 -moz-transform:rotate(-90deg);
 -ms-transform:rotate(-90deg);
 transform:rotate(-90deg);
 color:#c9ab6c

}

  1. footer {
 background:#191919;
 padding:1px 0 0;
 overflow:hidden

}

  1. footer .viewport {
 max-width:1340px;
 margin:auto

}

  1. footer #block-menu-menu-menu-footer-very-bottom {
 display:none

}

  1. footer #block-menu-menu-menu-footer-navigation {
 text-align:center;
 padding-top:0;
 zoom:1;
 height:0;
 overflow:hidden;
 -webkit-transition:height .3s ease-in-out 0s;
 -moz-transition:height .3s ease-in-out 0s;
 -o-transition:height .3s ease-in-out 0s;
 -ms-transition:height .3s ease-in-out 0s;
 transition:height .3s ease-in-out 0s;
 -webkit-transition:padding .3s ease-in-out 0s;
 -moz-transition:padding .3s ease-in-out 0s;
 -o-transition:padding .3s ease-in-out 0s;
 -ms-transition:padding .3s ease-in-out 0s;
 transition:padding .3s ease-in-out 0s

}

  1. footer #block-menu-menu-menu-footer-navigation:after {
 content:;
 display:table;
 clear:both;
 height:0;
 visibility:0

}

  1. footer #block-menu-menu-menu-footer-navigation ul {
 text-align:center

}

  1. footer #block-menu-menu-menu-footer-navigation ul li {
 display:inline-block;
 margin:0;
 vertical-align:top;
 -webkit-transition:margin .3s ease-in-out 0s;
 -moz-transition:margin .3s ease-in-out 0s;
 -o-transition:margin .3s ease-in-out 0s;
 -ms-transition:margin .3s ease-in-out 0s;
 transition:margin .3s ease-in-out 0s

}

  1. footer #block-menu-menu-menu-footer-navigation ul li.last {
 margin:0

}

  1. footer #block-menu-menu-menu-footer-navigation ul li a {
 display:block;
 text-align:left;
 color:white;
 text-transform:uppercase;
 font-family:'GothamBook';
 font-size:1.125em;
 margin-bottom:35px;
 padding:8px 10px

}

  1. footer #block-menu-menu-menu-footer-navigation ul li a:hover {
 color:#c9ab6c

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li {
 float:none;
 display:block;
 margin:0;
 font-size:.875em

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a {
 font-size:1em;
 margin-bottom:0;
 color:#767676;
 position:relative

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a:hover {
 color:white

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch {
 padding-right:52px

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:before,#footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:before {
 display:block;
 position:absolute;
 top:0;
 right:10px;
 width:32px;
 height:32px;
 font-family:'icon';
 text-align:center;
 line-height:32px;
 -webkit-transition:color .3s ease-in-out 0s;
 -moz-transition:color .3s ease-in-out 0s;
 -o-transition:color .3s ease-in-out 0s;
 -ms-transition:color .3s ease-in-out 0s;
 transition:color .3s ease-in-out 0s

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:before {
 background:#28aae1;
 content:"\ea91";
 color:#191919

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitter:hover:before {
 color:white

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:before {
 background:#3460a1;
 content:"\ea8c";
 color:#191919;
 text-indent:-2px

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-facebook:hover:before {
 color:white

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:before {
 background:#de5543;
 content:"\ea88";
 color:#191919

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-google:hover:before {
 color:white

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:before {
 background:#ee3138;
 content:"\ea99";
 color:#191919

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-youtube:hover:before {
 color:white

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:before {
 background:#136d9d;
 content:"\eac9";
 color:#191919

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-linkedin:hover:before {
 color:white

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:before {
 background:#65469c;
 content:"\ea9b";
 color:#191919

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-twitch:hover:before {
 color:white

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:before {
 background:#bd2126;
 content:"\e900";
 color:#191919

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-pinterest:hover:before {
 color:white

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:before {
 background:#1caad9;
 content:"\e901";
 color:#191919

}

  1. footer #block-menu-menu-menu-footer-navigation ul li ul li a#footer-sketchlab:hover:before {
 color:white

}

  1. footer .logo {
 width:183px;
 height:0;
 margin:40px auto 100px;
 background-size:100%;
 position:relative

}

  1. footer .logo:after {
 content:"Copyright © 2017 All Right Reserved";
 display:block;
 width:320px;
 position:absolute;
 top:110%;
 left:-120px;
 right:-120px;
 margin:auto;
 text-align:center;
 color:white

}

  1. footer .logo a {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 overflow:hidden;
 text-indent:-9999px;
 display:none

}

  1. footer .logo a:hover:after,#footer .logo a:hover:before {
 color:#c9ab6c

}

  1. footer .logo a:before {
 content:"\e602";
 font-family:'icon';
 position:absolute;
 color:white;
 display:block;
 text-align:center;
 font-size:8em;
 left:0;
 right:0;
 bottom:-46px;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 -webkit-backface-visibilty:hidden;
 color:#939598;
 text-indent:0

}

  1. footer .logo a:after {
 content:"\e603";
 font-family:'icon';
 position:absolute;
 color:white;
 display:block;
 text-align:center;
 font-size:5em;
 left:0;
 right:0;
 bottom:25px;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 -webkit-backface-visibilty:hidden;
 color:#939598;
 text-indent:0

}

  1. footer .block-sitemap {
 display:none

}

  1. footer .block-sitemap ul.menu {
 zoom:1

}

  1. footer .block-sitemap ul.menu:after {
 content:;
 display:table;
 clear:both;
 height:0;
 visibility:0

}

  1. footer .block-sitemap ul.menu li {
 width:20%;
 float:left;
 padding:20px;
 height:auto !important

}

  1. footer .block-sitemap ul.menu li a {
 display:block;
 padding:5px;
 margin-bottom:40px;
 color:white;
 font-family:'GothamBook';
 font-size:1.25em;
 text-transform:uppercase

}

  1. footer .block-sitemap ul.menu li ul.menu li {
 width:100%;
 padding:0

}

  1. footer .block-sitemap ul.menu li ul.menu li a {
 margin-bottom:0;
 padding:2px 5px;
 color:#767676;
 font-size:1em

} nav.contextual-navigation { 

 height:64px;
 zoom:1;
 text-align:center;
 position:fixed;
 left:0;
 right:0;
 top:48px;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s

} nav.contextual-navigation:after { 

 content:;
 display:table;
 clear:both;
 height:0;
 visibility:0

} nav.contextual-navigation.sticky { 

 top:0;
 z-index:2

} nav.contextual-navigation .viewport { 

 display:inline-block;
 position:absolute;
 left:0;
 width:100%;
 height:64px

} nav.contextual-navigation .viewport .menu-block-wrapper { 

 width:100%;
 height:64px

} nav.contextual-navigation .viewport h2 { 

 color:#fff;
 padding:20px 10px;
 font-size:1.125em;
 font-family:'GothamBook';
 font-weight:normal;
 float:left

} nav.contextual-navigation .viewport ul { 

 zoom:1;
 float:left;
 white-space:nowrap

} nav.contextual-navigation .viewport ul:after { 

 content:;
 display:table;
 clear:both;
 height:0;
 visibility:0

} nav.contextual-navigation .viewport ul li { 

 display:inline-block

} nav.contextual-navigation .viewport ul li a { 

 display:block;
 padding:20px 10px;
 font-size:1.125em;
 color:white

} nav.contextual-navigation .viewport ul li a.active { 

 color:#c9ab6c

} nav.contextual-navigation .viewport ul li a.try,nav.contextual-navigation .viewport ul li a.buy { 

 padding:10px;
 margin:10px 0;
 width:76px;
 text-align:center;
 margin-left:10px

} nav.contextual-navigation .viewport ul li a.buy { 

 background:#c9ab6c;
 color:white

} nav.contextual-navigation .viewport ul li a.try { 

 background:white;
 color:black

} @media(min-width:1025px) { 

 body {
 overflow-x:hidden

} body.menu-opened { 

 overflow-x:hidden !important

} .menu-opened #page-wrapper #page { 

 right:0

}

  1. header {
 height:80px;
 background:white;
 position:fixed;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s

} .menu-opened #header { 

 -webkit-transform:translate(0px,0);
 -moz-transform:translate(0px,0);
 -ms-transform:translate(0px,0);
 transform:translate(0px,0)

} .header-transparent #header { 

 background:rgba(0,0,0,0.2)

} .header-transparent #header .viewport .logo:after,.header-transparent #header .viewport .logo:before { 

 color:white

} .header-transparent #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a,.header-transparent #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before,.header-transparent #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login { 

 color:white

} .scrolled #header { 

 background:white;
 height:60px

} .scrolled #header .viewport .logo-scrolled a { 

 filter:alpha(opacity=100);
 -ms-filter:alpha(opacity=@opacity-ie);
 -moz-opacity:1;
 -khtml-opacity:1;
 opacity:1

} .scrolled #header .viewport .logo:before,.scrolled #header .viewport .logo:after { 

 color:#767676

} .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a { 

 margin:14px 5px

} .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before { 

 color:#767676

} .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login { 

 color:#767676

} .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a { 

 font-size:.875em;
 width:auto;
 height:26px;
 margin:16px 5px;
 padding:6px 13px

} .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu { 

 padding-top:0

} .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a { 

 font-size:.875em;
 color:#767676;
 padding:20px 12px;
 height:60px

} .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover { 

 color:white

} .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a { 

 padding:10px 12px 7px;
 height:auto;
 color:white

}

  1. header .viewport {
 max-width:1240px;
 height:100%;
 padding:0 20px;
 margin:auto;
 position:relative

}

  1. header .viewport .burger {
 display:none

}

  1. header .viewport .logo a {
 width:194px;
 height:52px;
 margin-top:0;
 top:14px;
 left:20px

}

  1. header .viewport .navigation-wrapper {
 position:static;
 width:auto;
 background:transparent;
 float:right;
 -webkit-transition:margin .3s ease-in-out 0s;
 -moz-transition:margin .3s ease-in-out 0s;
 -o-transition:margin .3s ease-in-out 0s;
 -ms-transition:margin .3s ease-in-out 0s;
 transition:margin .3s ease-in-out 0s;
 overflow-y:inherit

}

  1. header .viewport .navigation-wrapper:after {
 display:none

}

  1. header .viewport .navigation-wrapper .navigation {
 overflow-y:inherit;
 background:transparent;
 width:auto

}

  1. header .viewport .navigation-wrapper .navigation .block-menu {
 float:left;
 width:auto;
 clear:none

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li,#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li {
 width:auto;
 float:left

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a,#header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a {
 font-size:1em

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu {
 margin-right:15px;
 padding-top:0

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li {
 position:relative;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 height:100% !important;
 overflow:visible

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li .toggler {
 display:none

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a {
 color:#767676;
 padding:28px 12px;
 height:100%;
 line-height:150%;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 font-family:'GothamBook'

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a.active:hover {
 color:white

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li a:hover {
 background:#c9ab6c

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover {
 background:#c9ab6c

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover a {
 color:white;
 -webkit-transition:none;
 -moz-transition:none;
 -ms-transition:none;
 -o-transition:none;
 transition:none

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li:hover ul {
 display:block;
 top:100%;
 filter:alpha(opacity=100);
 -ms-filter:alpha(opacity=@opacity-ie);
 -moz-opacity:1;
 -khtml-opacity:1;
 opacity:1

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul {
 position:absolute;
 top:0;
 left:0;
 background:#c9ab6c;
 filter:alpha(opacity=0);
 -ms-filter:alpha(opacity=@opacity-ie);
 -moz-opacity:0;
 -khtml-opacity:0;
 opacity:0;
 display:none;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s;
 z-index:2

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li {
 float:none

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a {
 padding:7px 24px;
 height:auto;
 color:white;
 white-space:nowrap;
 width:100%

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.main-menu ul li ul li a:hover {
 background:#191919

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a {
 width:auto;
 height:34px;
 margin:22px 5px;
 padding:9px 13px;
 background:#c9ab6c;
 color:white;
 text-align:center

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.try-buy-menu ul li a:hover {
 background:#fbfbfb;
 color:#191919

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a {
 width:32px;
 height:30px;
 margin:23px 5px;
 text-indent:-9999px;
 text-align:center;
 padding-left:0

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a:before {
 padding:0;
 text-align:center;
 padding-top:7px;
 color:#767676;
 width:100%

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login {
 text-indent:0;
 width:auto;
 padding:11px 0 0 32px;
 font-size:11px;
 text-transform:uppercase;
 color:#767676

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li a.login:before {
 width:32px;
 font-size:18px;
 text-transform:none

}

  1. header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count {
 top:31px;
 left:27px;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s

} .scrolled #header .viewport .navigation-wrapper .navigation .block-menu.user-menu ul li.cart span.item-count { 

 top:11px

}

  1. footer #block-menu-menu-menu-footer-navigation {
 height:auto;
 padding-top:40px

} nav.contextual-navigation { 

 height:64px;
 zoom:1;
 text-align:center;
 position:static

} nav.contextual-navigation:after { 

 content:;
 display:table;
 clear:both;
 height:0;
 visibility:0

} nav.contextual-navigation.sticky.sticky2 { 

 position:fixed;
 top:60px;
 left:0;
 right:0;
 z-index:2;
 -webkit-transition:all .3s ease-in-out 0s;
 -moz-transition:all .3s ease-in-out 0s;
 -o-transition:all .3s ease-in-out 0s;
 -ms-transition:all .3s ease-in-out 0s;
 transition:all .3s ease-in-out 0s

} nav.contextual-navigation .viewport { 

 display:inline-block;
 position:static;
 left:auto;
 width:auto

} }

}.view-gallery-homepage .item-list ul.pager { 

 display:none

} .view-gallery-homepage ul { 

 list-style:none

} .view-gallery-homepage .hide { 

 display:none

} .view-gallery-homepage .view-content { 

 overflow:hidden

} .view-gallery-homepage .view-content .item { 

 float:left;
 margin:2px;
 border:1px solid #eee;
 box-sizing:content-box;
 overflow:hidden;
 position:relative

}

  1. page.banner {
 padding-top:108px

} .header-transparent #page.banner { 

 padding-top:0

}

  1. commercial_banner {
 height:60px;
 background-color:#c9ab6c;
 width:100%;
 z-index:1;
 position:relative

}

  1. commercial_banner .contextual-links-region {
 position:inherit

}

  1. commercial_banner a {
 color:#fff;
 text-align:center

}

  1. commercial_banner p {
 width:100%;
 height:100%;
 display:table;
 position:absolute;
 font-weight:bold

}

  1. commercial_banner p a {
 display:table-cell;
 vertical-align:middle;
 font-size:3vw;
 padding:0 30px

}

  1. commercial_banner .close-button {
 height:20px;
 width:20px;
 position:absolute;
 box-sizing:border-box;
 line-height:20px;
 right:5px;
 top:5px

}

  1. commercial_banner .close-button:before,#commercial_banner .close-button:after {
 transform:rotate(-45deg);
 content:;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-2.5px;
 margin-left:-10px;
 display:block;
 height:5px;
 width:20px;
 background-color:#fff

}

  1. commercial_banner .close-button:after {
 transform:rotate(45deg)

} @media(min-width:1025px) { 

 #page.banner {
 padding-top:140px

}

  1. commercial_banner p a {
 font-size:1vw

} }#bannerCookie { 

 color:#fff;
 background-color:#000;
 opacity:.8;
 left:0;
 right:0;
 bottom:0;
 padding:1em 1.8em;
 width:100%;
 flex-direction:row;
 display:flex;
 position:fixed;
 align-items:center;
 font-size:16px;
 line-height:1.5em;
 flex-wrap:nowrap;
 z-index:9999

}

  1. bannerCookie .message {
 flex:1

}

  1. bannerCookie .message .more {
 opacity:.8;
 display:inline-block;
 padding:.2em;
 text-decoration:underline

}

  1. bannerCookie .message .more:hover,#bannerCookie .message .more:active {
 text-decoration:none;
 color:#c9ab6c

}

  1. bannerCookie .button {
 display:flex;
 align-items:center;
 align-content:space-between

}

  1. bannerCookie .button a {
 min-width:140px;
 color:#fff;
 background-color:#c9ab6c;
 border-color:transparent;
 flex:1;
 display:block;
 padding:.4em .8em;
 font-size:.9em;
 font-weight:700;
 border-width:2px;
 border-style:solid;
 text-align:center;
 white-space:nowrap;
 cursor:pointer

}

  1. bannerCookie .button a:hover {
 color:#000;
 background-color:#fff

}

</style> </head> <body class="html front not-logged-in no-sidebars page-node page-node- page-node-1393 node-type-wall header-transparent"> 


   <header id="header">

       <img src="./img/logo_black.png" class="logo">
  • <a href="" class="buy">Main page</a>
  • <a href="" id="header-products">Project</a>
    • <a href="">Substance Painter</a>
    • <a href="">Description</a>
    • <a href="">Design </a>
    • <a href="">Validation </a>
  • <a href="">Software</a>
    • <a href="">User guide</a>
    • <a href="" target="_blank">Technology </a>
  • <a href="">Documents</a>
    • <a href="" target="_blank">API</a>
    • <a href="" title="User Guides of Allegorithmic products" target="_blank">Notebook</a>
    • <a href="/pbr-guide">Unit test</a>
  • <a href="">Requirements</a>
    • <a href="">Medals</a>
    • <a href="">Safety</a>
    • <a href="">Collaboration </a>
  • <a href="">Team</a>
    • <a href="">Members </a>
    • <a href="" name="Jobs">Attribution</a>
  • <a href="">Human practice</a>
         </header>
 </div>

</div> 

   <script type="text/javascript">
   



     <![CDATA><! ]>
 </script>
  	<script src="./js/cookie.js"></script>

</body> </html>