Template:HFUT-China

<!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>