@charset "utf-8"; /* -------------------- Cols -------------------- */ .col-0-5, .col-1-5, .col-2-5, .col-3-5, .col-4-5, .col-5-5, .col-6-5, .col-7-5, .col-8-5, .col-9-5, .col-10-5, .col-11-5, .col-12-5, .col-13-5, .col-14-5, .col-15-5, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16, .colp-0-5, .colp-1-5, .colp-2-5, .colp-3-5, .colp-4-5, .colp-5-5, .colp-6-5, .colp-7-5, .colp-8-5, .colp-9-5, .colp-10-5, .colp-11-5, .colp-12-5, .colp-13-5, .colp-14-5, .colp-15-5, .colp-1, .colp-2, .colp-3, .colp-4, .colp-5, .colp-6, .colp-7, .colp-8, .colp-9, .colp-10, .colp-11, .colp-12, .colp-13, .colp-14, .colp-15, .colp-16, .cont-0-5, .cont-1-5, .cont-2-5, .cont-3-5, .cont-4-5, .cont-5-5, .cont-6-5, .cont-7-5, .cont-8-5, .cont-9-5, .cont-10-5, .cont-11-5, .cont-12-5, .cont-13-5, .cont-14-5, .cont-15-5, .cont-1, .cont-2, .cont-3, .cont-4, .cont-5, .cont-6, .cont-7, .cont-8, .cont-9, .cont-10, .cont-11, .cont-12, .cont-13, .cont-14, .cont-15, .cont-16{ display:inline; float:left; overflow:hidden; } .col-0-5, .col-1-5, .col-2-5, .col-3-5, .col-4-5, .col-5-5, .col-6-5, .col-7-5, .col-8-5, .col-9-5, .col-10-5, .col-11-5, .col-12-5, .col-13-5, .col-14-5, .col-15-5, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16, .colp-0-5, .colp-1-5, .colp-2-5, .colp-3-5, .colp-4-5, .colp-5-5, .colp-6-5, .colp-7-5, .colp-8-5, .colp-9-5, .colp-10-5, .colp-11-5, .colp-12-5, .colp-13-5, .colp-14-5, .colp-15-5, .colp-1, .colp-2, .colp-3, .colp-4, .colp-5, .colp-6, .colp-7, .colp-8, .colp-9, .colp-10, .colp-11, .colp-12, .colp-13, .colp-14, .colp-15, .colp-16{ margin-right:20px; } .colh-0-5, .colh-1-5, .colh-2-5, .colh-3-5, .colh-4-5, .colh-5-5, .colh-6-5, .colh-7-5, .colh-8-5, .colh-9-5, .colh-10-5, .colh-11-5, .colh-12-5, .colh-13-5, .colh-14-5, .colh-15-5, .colh-1, .colh-2, .colh-3, .colh-4, .colh-5, .colh-6, .colh-7, .colh-8, .colh-9, .colh-10, .colh-11, .colh-12, .colh-13, .colh-14, .colh-15, .colh-16, .colph-0-5, .colph-1-5, .colph-2-5, .colph-3-5, .colph-4-5, .colph-5-5, .colph-6-5, .colph-7-5, .colph-8-5, .colph-9-5, .colph-10-5, .colph-11-5, .colph-12-5, .colph-13-5, .colph-14-5, .colph-15-5, .colph-1, .colph-2, .colph-3, .colph-4, .colph-5, .colph-6, .colph-7, .colph-8, .colph-9, .colph-10, .colph-11, .colph-12, .colph-13, .colph-14, .colph-15, .colph-16{ margin-bottom:20px; } .colp-0-5, .colp-1-5, .colp-2-5, .colp-3-5, .colp-4-5, .colp-5-5, .colp-6-5, .colp-7-5, .colp-8-5, .colp-9-5, .colp-10-5, .colp-11-5, .colp-12-5, .colp-13-5, .colp-14-5, .colp-15-5, .colp-1, .colp-2, .colp-3, .colp-4, .colp-5, .colp-6, .colp-7, .colp-8, .colp-9, .colp-10, .colp-11, .colp-12, .colp-13, .colp-14, .colp-15, .colp-16, .colph-0-5, .colph-1-5, .colph-2-5, .colph-3-5, .colph-4-5, .colph-5-5, .colph-6-5, .colph-7-5, .colph-8-5, .colph-9-5, .colph-10-5, .colph-11-5, .colph-12-5, .colph-13-5, .colph-14-5, .colph-15-5, .colph-1, .colph-2, .colph-3, .colph-4, .colph-5, .colph-6, .colph-7, .colph-8, .colph-9, .colph-10, .colph-11, .colph-12, .colph-13, .colph-14, .colph-15, .colph-16{ padding:20px 20px 20px 20px; } .col-0-5 { width:20px; } .col-1 { width:60px; } .col-1-5 { width:100px; } .col-2 { width:140px; } .col-2-5 { width:180px; } .col-3 { width:220px; } .col-3-5 { width:260px; } .col-4 { width:300px; } .col-4-5 { width:340px; } .col-5 { width:380px; } .col-5-5 { width:420px; } .col-6 { width:460px; } .col-6-5 { width:500px; } .col-7 { width:540px; } .col-7-5 { width:580px; } .col-8 { width:620px; } .col-8-5 { width:660px; } .col-9 { width:700px; } .col-9-5 { width:740px; } .col-10 { width:780px; } .col-10-5 { width:820px; } .col-11 { width:860px; } .col-11-5 { width:900px; } .col-12 { width:940px; } .col-12-5 { width:980px; } .col-13 { width:1020px; } .col-13-5 { width:1060px; } .col-14 { width:1100px; } .col-14-5 { width:1140px; } .col-15 { width:1180px; } .col-15-5 { width:1220px; } .col-16 { width:1260px; } .colh-0-5 { height:20px; } .colh-1 { height:60px; } .colh-1-5 { height:100px; } .colh-2 { height:140px; } .colh-2-5 { height:180px; } .colh-3 { height:220px; } .colh-3-5 { height:260px; } .colh-4 { height:300px; } .colh-4-5 { height:340px; } .colh-5 { height:380px; } .colh-5-5 { height:420px; } .colh-6 { height:460px; } .colh-6-5 { height:500px; } .colh-7 { height:540px; } .colh-7-5 { height:580px; } .colh-8 { height:620px; } .colh-8-5 { height:660px; } .colh-9 { height:700px; } .colh-9-5 { height:740px; } .colh-10 { height:780px; } .colh-10-5 { height:820px; } .colh-11 { height:860px; } .colh-11-5 { height:900px; } .colh-12 { height:940px; } .colh-12-5 { height:980px; } .colh-13 { height:1020px; } .colh-13-5 { height:1060px; } .colh-14 { height:1100px; } .colh-14-5 { height:1140px; } .colh-15 { height:1180px; } .colh-15-5 { height:1220px; } .colh-16 { height:1260px; } .cont-0-5 { width:40px; } .cont-1 { width:80px; } .cont-1-5 { width:120px; } .cont-2 { width:160px; } .cont-2-5 { width:200px; } .cont-3 { width:240px; } .cont-3-5 { width:280px; } .cont-4 { width:320px; } .cont-4-5 { width:360px; } .cont-5 { width:400px; } .cont-5-5 { width:440px; } .cont-6 { width:480px; } .cont-6-5 { width:520px; } .cont-7 { width:560px; } .cont-7-5 { width:600px; } .cont-8 { width:640px; } .cont-8-5 { width:680px; } .cont-9 { width:720px; } .cont-9-5 { width:760px; } .cont-10 { width:800px; } .cont-10-5 { width:840px; } .cont-11 { width:880px; } .cont-11-5 { width:920px; } .cont-12 { width:960px; } .cont-12-5 { width:1000px; } .cont-13 { width:1040px; } .cont-13-5 { width:1080px; } .cont-14 { width:1120px; } .cont-14-5 { width:1160px; } .cont-15 { width:1200px; } .cont-15-5 { width:1240px; } .cont-16 { width:1280px; } .conth-0-5 { height:40px; } .conth-1 { height:80px; } .conth-1-5 { height:120px; } .conth-2 { height:160px; } .conth-2-5 { height:200px; } .conth-3 { height:240px; } .conth-3-5 { height:280px; } .conth-4 { height:320px; } .conth-4-5 { height:360px; } .conth-5 { height:400px; } .conth-5-5 { height:440px; } .conth-6 { height:480px; } .conth-6-5 { height:520px; } .conth-7 { height:560px; } .conth-7-5 { height:600px; } .conth-8 { height:640px; } .conth-8-5 { height:680px; } .conth-9 { height:720px; } .conth-9-5 { height:760px; } .conth-10 { height:800px; } .conth-10-5 { height:840px; } .conth-11 { height:880px; } .conth-11-5 { height:920px; } .conth-12 { height:960px; } .conth-12-5 { height:1000px; } .conth-13 { height:1040px; } .conth-13-5 { height:1080px; } .conth-14 { height:1120px; } .conth-14-5 { height:1160px; } .conth-15 { height:1200px; } .conth-15-5 { height:1240px; } .conth-16 { height:1280px; } .colp-0-5 { width:-20px; } .colp-1 { width:20px; } .colp-1-5 { width:60px; } .colp-2 { width:100px; } .colp-2-5 { width:140px; } .colp-3 { width:180px; } .colp-3-5 { width:220px; } .colp-4 { width:260px; } .colp-4-5 { width:300px; } .colp-5 { width:340px; } .colp-5-5 { width:380px; } .colp-6 { width:420px; } .colp-6-5 { width:460px; } .colp-7 { width:500px; } .colp-7-5 { width:540px; } .colp-8 { width:580px; } .colp-8-5 { width:620px; } .colp-9 { width:660px; } .colp-9-5 { width:700px; } .colp-10 { width:740px; } .colp-10-5 { width:780px; } .colp-11 { width:820px; } .colp-11-5 { width:860px; } .colp-12 { width:900px; } .colp-12-5 { width:940px; } .colp-13 { width:980px; } .colp-13-5 { width:1020px; } .colp-14 { width:1060px; } .colp-14-5 { width:1100px; } .colp-15 { width:1140px; } .colp-15-5 { width:1180px; } .colp-16 { width:1220px; } .colph-0-5 { height:-20px; } .colph-1 { height:20px; } .colph-1-5 { height:60px; } .colph-2 { height:100px; } .colph-2-5 { height:140px; } .colph-3 { height:180px; } .colph-3-5 { height:220px; } .colph-4 { height:260px; } .colph-4-5 { height:300px; } .colph-5 { height:340px; } .colph-5-5 { height:380px; } .colph-6 { height:420px; } .colph-6-5 { height:460px; } .colph-7 { height:500px; } .colph-7-5 { height:540px; } .colph-8 { height:580px; } .colph-8-5 { height:620px; } .colph-9 { height:660px; } .colph-9-5 { height:700px; } .colph-10 { height:740px; } .colph-10-5 { height:780px; } .colph-11 { height:820px; } .colph-11-5 { height:860px; } .colph-12 { height:900px; } .colph-12-5 { height:940px; } .colph-13 { height:980px; } .colph-13-5 { height:1020px; } .colph-14 { height:1060px; } .colph-14-5 { height:1100px; } .colph-15 { height:1140px; } .colph-15-5 { height:1180px; } .colph-16 { height:1220px; } /* Column margins - left, right, top, bottom */ .left-0-5 { margin-left:40px; } .left-1 { margin-left:80px; } .left-1-5 { margin-left:120px; } .left-2 { margin-left:160px; } .left-2-5 { margin-left:200px; } .left-3 { margin-left:240px; } .left-3-5 { margin-left:280px; } .left-4 { margin-left:320px; } .left-4-5 { margin-left:360px; } .left-5 { margin-left:400px; } .left-5-5 { margin-left:440px; } .left-6 { margin-left:480px; } .left-6-5 { margin-left:520px; } .left-7 { margin-left:560px; } .left-7-5 { margin-left:600px; } .left-8 { margin-left:640px; } .left-8-5 { margin-left:680px; } .left-9 { margin-left:720px; } .left-9-5 { margin-left:760px; } .left-10 { margin-left:800px; } .left-10-5 { margin-left:840px; } .left-11 { margin-left:880px; } .left-11-5 { margin-left:920px; } .left-12 { margin-left:960px; } .left-12-5 { margin-left:1000px; } .left-13 { margin-left:1040px; } .left-13-5 { margin-left:1080px; } .left-14 { margin-left:1120px; } .left-14-5 { margin-left:1160px; } .left-15 { margin-left:1200px; } .left-15-5 { margin-left:1240px; } .left-16 { margin-left:1280px; } .right-0-5 { margin-right:40px; } .right-1 { margin-right:80px; } .right-1-5 { margin-right:120px; } .right-2 { margin-right:160px; } .right-2-5 { margin-right:200px; } .right-3 { margin-right:240px; } .right-3-5 { margin-right:280px; } .right-4 { margin-right:320px; } .right-4-5 { margin-right:360px; } .right-5 { margin-right:400px; } .right-5-5 { margin-right:440px; } .right-6 { margin-right:480px; } .right-6-5 { margin-right:520px; } .right-7 { margin-right:560px; } .right-7-5 { margin-right:600px; } .right-8 { margin-right:640px; } .right-8-5 { margin-right:680px; } .right-9 { margin-right:720px; } .right-9-5 { margin-right:760px; } .right-10 { margin-right:800px; } .right-10-5 { margin-right:840px; } .right-11 { margin-right:880px; } .right-11-5 { margin-right:920px; } .right-12 { margin-right:960px; } .right-12-5 { margin-right:1000px; } .right-13 { margin-right:1040px; } .right-13-5 { margin-right:1080px; } .right-14 { margin-right:1120px; } .right-14-5 { margin-right:1160px; } .right-15 { margin-right:1200px; } .right-15-5 { margin-right:1240px; } .right-16 { margin-right:1280px; } .top-0-5 { margin-top:40px; } .top-1 { margin-top:80px; } .top-1-5 { margin-top:120px; } .top-2 { margin-top:160px; } .top-2-5 { margin-top:200px; } .top-3 { margin-top:240px; } .top-3-5 { margin-top:280px; } .top-4 { margin-top:320px; } .top-4-5 { margin-top:360px; } .top-5 { margin-top:400px; } .top-5-5 { margin-top:440px; } .top-6 { margin-top:480px; } .top-6-5 { margin-top:520px; } .top-7 { margin-top:560px; } .top-7-5 { margin-top:600px; } .top-8 { margin-top:640px; } .top-8-5 { margin-top:680px; } .top-9 { margin-top:720px; } .top-9-5 { margin-top:760px; } .top-10 { margin-top:800px; } .top-10-5 { margin-top:840px; } .top-11 { margin-top:880px; } .top-11-5 { margin-top:920px; } .top-12 { margin-top:960px; } .top-12-5 { margin-top:1000px; } .top-13 { margin-top:1040px; } .top-13-5 { margin-top:1080px; } .top-14 { margin-top:1120px; } .top-14-5 { margin-top:1160px; } .top-15 { margin-top:1200px; } .top-15-5 { margin-top:1240px; } .top-16 { margin-top:1280px; } .bottom-0-5 { margin-bottom:40px; } .bottom-1 { margin-bottom:80px; } .bottom-1-5 { margin-bottom:120px; } .bottom-2 { margin-bottom:160px; } .bottom-2-5 { margin-bottom:200px; } .bottom-3 { margin-bottom:240px; } .bottom-3-5 { margin-bottom:280px; } .bottom-4 { margin-bottom:320px; } .bottom-4-5 { margin-bottom:360px; } .bottom-5 { margin-bottom:400px; } .bottom-5-5 { margin-bottom:440px; } .bottom-6 { margin-bottom:480px; } .bottom-6-5 { margin-bottom:520px; } .bottom-7 { margin-bottom:560px; } .bottom-7-5 { margin-bottom:600px; } .bottom-8 { margin-bottom:640px; } .bottom-8-5 { margin-bottom:680px; } .bottom-9 { margin-bottom:720px; } .bottom-9-5 { margin-bottom:760px; } .bottom-10 { margin-bottom:800px; } .bottom-10-5 { margin-bottom:840px; } .bottom-11 { margin-bottom:880px; } .bottom-11-5 { margin-bottom:920px; } .bottom-12 { margin-bottom:960px; } .bottom-12-5 { margin-bottom:1000px; } .bottom-13 { margin-bottom:1040px; } .bottom-13-5 { margin-bottom:1080px; } .bottom-14 { margin-bottom:1120px; } .bottom-14-5 { margin-bottom:1160px; } .bottom-15 { margin-bottom:1200px; } .bottom-15-5 { margin-bottom:1240px; } .bottom-16 { margin-bottom:1280px; } /* Paddings - left, right, top, bottom */ .pleft-0-5{ padding-left:40px; } .pleft-1{ padding-left:80px; } .pleft-1-5{ padding-left:120px; } .pleft-2{ padding-left:160px; } .pleft-2-5{ padding-left:200px; } .pleft-3{ padding-left:240px; } .pleft-3-5{ padding-left:280px; } .pleft-4{ padding-left:320px; } .pleft-4-5{ padding-left:360px; } .pleft-5{ padding-left:400px; } .pleft-5-5{ padding-left:440px; } .pleft-6{ padding-left:480px; } .pleft-6-5{ padding-left:520px; } .pleft-7{ padding-left:560px; } .pleft-7-5{ padding-left:600px; } .pleft-8{ padding-left:640px; } .pleft-8-5{ padding-left:680px; } .pleft-9{ padding-left:720px; } .pleft-9-5{ padding-left:760px; } .pleft-10{ padding-left:800px; } .pleft-10-5{ padding-left:840px; } .pleft-11{ padding-left:880px; } .pleft-11-5{ padding-left:920px; } .pleft-12{ padding-left:960px; } .pleft-12-5{ padding-left:1000px; } .pleft-13{ padding-left:1040px; } .pleft-13-5{ padding-left:1080px; } .pleft-14{ padding-left:1120px; } .pleft-14-5{ padding-left:1160px; } .pleft-15{ padding-left:1200px; } .pleft-15-5{ padding-left:1240px; } .pleft-16{ padding-left:1280px; } .pright-0-5 { padding-right:40px; } .pright-1 { padding-right:80px; } .pright-1-5 { padding-right:120px; } .pright-2 { padding-right:160px; } .pright-2-5 { padding-right:200px; } .pright-3 { padding-right:240px; } .pright-3-5 { padding-right:280px; } .pright-4 { padding-right:320px; } .pright-4-5 { padding-right:360px; } .pright-5 { padding-right:400px; } .pright-5-5 { padding-right:440px; } .pright-6 { padding-right:480px; } .pright-6-5 { padding-right:520px; } .pright-7 { padding-right:560px; } .pright-7-5 { padding-right:600px; } .pright-8 { padding-right:640px; } .pright-8-5 { padding-right:680px; } .pright-9 { padding-right:720px; } .pright-9-5 { padding-right:760px; } .pright-10 { padding-right:800px; } .pright-10-5 { padding-right:840px; } .pright-11 { padding-right:880px; } .pright-11-5 { padding-right:920px; } .pright-12 { padding-right:960px; } .pright-12-5 { padding-right:1000px; } .pright-13 { padding-right:1040px; } .pright-13-5 { padding-right:1080px; } .pright-14 { padding-right:1120px; } .pright-14-5 { padding-right:1160px; } .pright-15 { padding-right:1200px; } .pright-15-5 { padding-right:1240px; } .pright-16 { padding-right:1280px; } .ptop-0-5 { padding-top:40px; } .ptop-1 { padding-top:80px; } .ptop-1-5 { padding-top:120px; } .ptop-2 { padding-top:160px; } .ptop-2-5 { padding-top:200px; } .ptop-3 { padding-top:240px; } .ptop-3-5 { padding-top:280px; } .ptop-4 { padding-top:320px; } .ptop-4-5 { padding-top:360px; } .ptop-5 { padding-top:400px; } .ptop-5-5 { padding-top:440px; } .ptop-6 { padding-top:480px; } .ptop-6-5 { padding-top:520px; } .ptop-7 { padding-top:560px; } .ptop-7-5 { padding-top:600px; } .ptop-8 { padding-top:640px; } .ptop-8-5 { padding-top:680px; } .ptop-9 { padding-top:720px; } .ptop-9-5 { padding-top:760px; } .ptop-10 { padding-top:800px; } .ptop-10-5 { padding-top:840px; } .ptop-11 { padding-top:880px; } .ptop-11-5 { padding-top:920px; } .ptop-12 { padding-top:960px; } .ptop-12-5 { padding-top:1000px; } .ptop-13 { padding-top:1040px; } .ptop-13-5 { padding-top:1080px; } .ptop-14 { padding-top:1120px; } .ptop-14-5 { padding-top:1160px; } .ptop-15 { padding-top:1200px; } .ptop-15-5 { padding-top:1240px; } .ptop-16 { padding-top:1280px; } .pbottom-0-5 { padding-bottom:40px; } .pbottom-1 { padding-bottom:80px; } .pbottom-1-5 { padding-bottom:120px; } .pbottom-2 { padding-bottom:160px; } .pbottom-2-5 { padding-bottom:200px; } .pbottom-3 { padding-bottom:240px; } .pbottom-3-5 { padding-bottom:280px; } .pbottom-4 { padding-bottom:320px; } .pbottom-4-5 { padding-bottom:360px; } .pbottom-5 { padding-bottom:400px; } .pbottom-5-5 { padding-bottom:440px; } .pbottom-6 { padding-bottom:480px; } .pbottom-6-5 { padding-bottom:520px; } .pbottom-7 { padding-bottom:560px; } .pbottom-7-5 { padding-bottom:600px; } .pbottom-8 { padding-bottom:640px; } .pbottom-8-5 { padding-bottom:680px; } .pbottom-9 { padding-bottom:720px; } .pbottom-9-5 { padding-bottom:760px; } .pbottom-10 { padding-bottom:800px; } .pbottom-10-5 { padding-bottom:840px; } .pbottom-11 { padding-bottom:880px; } .pbottom-11-5 { padding-bottom:920px; } .pbottom-12 { padding-bottom:960px; } .pbottom-12-5 { padding-bottom:1000px; } .pbottom-13 { padding-bottom:1040px; } .pbottom-13-5 { padding-bottom:1080px; } .pbottom-14 { padding-bottom:1120px; } .pbottom-14-5 { padding-bottom:1160px; } .pbottom-15 { padding-bottom:1200px; } .pbottom-15-5 { padding-bottom:1240px; } .pbottom-16 { padding-bottom:1280px; } /* Media Queries */ @media screen and (max-width:1020px){ .left-0-5 { margin-left:0px; } .left-1 { margin-left:0px; } .pleft-0-5 { padding-left:0px; } .pleft-1 { padding-left:0px; } .left-1-5 { margin-left:120px; } .left-2 { margin-left:80px; } .pleft-1-5 { padding-left:120px; } .pleft-2 { padding-left:80px; } .left-2-5 { margin-left:200px; } .left-3 { margin-left:160px; } .pleft-2-5 { padding-left:200px; } .pleft-3 { padding-left:160px; } .left-3-5 { margin-left:280px; } .left-4 { margin-left:240px; } .pleft-3-5 { padding-left:280px; } .pleft-4 { padding-left:240px; } .left-4-5 { margin-left:360px; } .left-5 { margin-left:320px; } .pleft-4-5 { padding-left:360px; } .pleft-5 { padding-left:320px; } .left-5-5 { margin-left:440px; } .left-6 { margin-left:400px; } .pleft-5-5 { padding-left:440px; } .pleft-6 { padding-left:400px; } .left-6-5 { margin-left:520px; } .left-7 { margin-left:480px; } .pleft-6-5 { padding-left:520px; } .pleft-7 { padding-left:480px; } .left-7-5 { margin-left:600px; } .left-8 { margin-left:560px; } .pleft-7-5 { padding-left:600px; } .pleft-8 { padding-left:560px; } .left-8-5 { margin-left:680px; } .left-9 { margin-left:640px; } .pleft-8-5 { padding-left:680px; } .pleft-9 { padding-left:640px; } .left-9-5 { margin-left:760px; } .left-10 { margin-left:720px; } .pleft-9-5 { padding-left:760px; } .pleft-10 { padding-left:720px; } .left-10-5 { margin-left:840px; } .left-11 { margin-left:800px; } .pleft-10-5 { padding-left:840px; } .pleft-11 { padding-left:800px; } .left-11-5 { margin-left:920px; } .left-12 { margin-left:880px; } .pleft-11-5 { padding-left:920px; } .pleft-12 { padding-left:880px; } .left-12-5 { margin-left:1000px; } .left-13 { margin-left:960px; } .pleft-12-5 { padding-left:1000px; } .pleft-13 { padding-left:960px; } .left-13-5 { margin-left:1080px; } .left-14 { margin-left:1040px; } .pleft-13-5 { padding-left:1080px; } .pleft-14 { padding-left:1040px; } .left-14-5 { margin-left:1160px; } .left-15 { margin-left:1120px; } .pleft-14-5 { padding-left:1160px; } .pleft-15 { padding-left:1120px; } .left-15-5 { margin-left:1240px; } .left-16 { margin-left:1200px; } .pleft-15-5 { padding-left:1240px; } .pleft-16 { padding-left:1200px; } .right-0-5 { margin-right:0px; } .right-1 { margin-right:0px; } .pright-0-5 { padding-right:0px; } .pright-1 { padding-right:0px; } .right-1-5 { margin-right:120px; } .right-2 { margin-right:80px; } .pright-1-5 { padding-right:120px; } .pright-2 { padding-right:80px; } .right-2-5 { margin-right:200px; } .right-3 { margin-right:160px; } .pright-2-5 { padding-right:200px; } .pright-3 { padding-right:160px; } .right-3-5 { margin-right:280px; } .right-4 { margin-right:240px; } .pright-3-5 { padding-right:280px; } .pright-4 { padding-right:240px; } .right-4-5 { margin-right:360px; } .right-5 { margin-right:320px; } .pright-4-5 { padding-right:360px; } .pright-5 { padding-right:320px; } .right-5-5 { margin-right:440px; } .right-6 { margin-right:400px; } .pright-5-5 { padding-right:440px; } .pright-6 { padding-right:400px; } .right-6-5 { margin-right:520px; } .right-7 { margin-right:480px; } .pright-6-5 { padding-right:520px; } .pright-7 { padding-right:480px; } .right-7-5 { margin-right:600px; } .right-8 { margin-right:560px; } .pright-7-5 { padding-right:600px; } .pright-8 { padding-right:560px; } .right-8-5 { margin-right:680px; } .right-9 { margin-right:640px; } .pright-8-5 { padding-right:680px; } .pright-9 { padding-right:640px; } .right-9-5 { margin-right:760px; } .right-10 { margin-right:720px; } .pright-9-5 { padding-right:760px; } .pright-10 { padding-right:720px; } .right-10-5 { margin-right:840px; } .right-11 { margin-right:800px; } .pright-10-5 { padding-right:840px; } .pright-11 { padding-right:800px; } .right-11-5 { margin-right:920px; } .right-12 { margin-right:880px; } .pright-11-5 { padding-right:920px; } .pright-12 { padding-right:880px; } .right-12-5 { margin-right:1000px; } .right-13 { margin-right:960px; } .pright-12-5 { padding-right:1000px; } .pright-13 { padding-right:960px; } .right-13-5 { margin-right:1080px; } .right-14 { margin-right:1040px; } .pright-13-5 { padding-right:1080px; } .pright-14 { padding-right:1040px; } .right-14-5 { margin-right:1160px; } .right-15 { margin-right:1120px; } .pright-14-5 { padding-right:1160px; } .pright-15 { padding-right:1120px; } .right-15-5 { margin-right:1240px; } .right-16 { margin-right:1200px; } .pright-15-5 { padding-right:1240px; } .pright-16 { padding-right:1200px; } } @media screen and (max-width:768px){ .left-0-5 { margin-left:0px; } .left-1 { margin-left:0px; } .pleft-0-5 { padding-left:0px; } .pleft-1 { padding-left:0px; } .left-1-5 { margin-left:0px; } .left-2 { margin-left:0px; } .pleft-1-5 { padding-left:0px; } .pleft-2 { padding-left:0px; } .left-2-5 { margin-left:0px; } .left-3 { margin-left:0px; } .pleft-2-5 { padding-left:0px; } .pleft-3 { padding-left:0px; } .left-3-5 { margin-left:0px; } .left-4 { margin-left:0px; } .pleft-3-5 { padding-left:0px; } .pleft-4 { padding-left:0px; } .left-4-5 { margin-left:120px; } .left-5 { margin-left:80px; } .pleft-4-5 { padding-left:120px; } .pleft-5 { padding-left:80px; } .left-5-5 { margin-left:200px; } .left-6 { margin-left:160px; } .pleft-5-5 { padding-left:200px; } .pleft-6 { padding-left:160px; } .left-6-5 { margin-left:280px; } .left-7 { margin-left:240px; } .pleft-6-5 { padding-left:280px; } .pleft-7 { padding-left:240px; } .left-7-5 { margin-left:360px; } .left-8 { margin-left:320px; } .pleft-7-5 { padding-left:360px; } .pleft-8 { padding-left:320px; } .left-8-5 { margin-left:440px; } .left-9 { margin-left:400px; } .pleft-8-5 { padding-left:440px; } .pleft-9 { padding-left:400px; } .left-9-5 { margin-left:520px; } .left-10 { margin-left:480px; } .pleft-9-5 { padding-left:520px; } .pleft-10 { padding-left:480px; } .left-10-5 { margin-left:600px; } .left-11 { margin-left:560px; } .pleft-10-5 { padding-left:600px; } .pleft-11 { padding-left:560px; } .left-11-5 { margin-left:680px; } .left-12 { margin-left:640px; } .pleft-11-5 { padding-left:680px; } .pleft-12 { padding-left:640px; } .left-12-5 { margin-left:760px; } .left-13 { margin-left:720px; } .pleft-12-5 { padding-left:760px; } .pleft-13 { padding-left:720px; } .left-13-5 { margin-left:840px; } .left-14 { margin-left:800px; } .pleft-13-5 { padding-left:840px; } .pleft-14 { padding-left:800px; } .left-14-5 { margin-left:920px; } .left-15 { margin-left:880px; } .pleft-14-5 { padding-left:920px; } .pleft-15 { padding-left:880px; } .left-15-5 { margin-left:1000px; } .left-16 { margin-left:960px; } .pleft-15-5 { padding-left:1000px; } .pleft-16 { padding-left:960px; } .right-0-5 { margin-right:0px; } .right-1 { margin-right:0px; } .pright-0-5 { padding-right:0px; } .pright-1 { padding-right:0px; } .right-1-5 { margin-right:0px; } .right-2 { margin-right:0px; } .pright-1-5 { padding-right:0px; } .pright-2 { padding-right:0px; } .right-2-5 { margin-right:0px; } .right-3 { margin-right:0px; } .pright-2-5 { padding-right:0px; } .pright-3 { padding-right:0px; } .right-3-5 { margin-right:0px; } .right-4 { margin-right:0px; } .pright-3-5 { padding-right:0px; } .pright-4 { padding-right:0px; } .right-4-5 { margin-right:120px; } .right-5 { margin-right:80px; } .pright-4-5 { padding-right:120px; } .pright-5 { padding-right:80px; } .right-5-5 { margin-right:200px; } .right-6 { margin-right:160px; } .pright-5-5 { padding-right:200px; } .pright-6 { padding-right:160px; } .right-6-5 { margin-right:280px; } .right-7 { margin-right:240px; } .pright-6-5 { padding-right:280px; } .pright-7 { padding-right:240px; } .right-7-5 { margin-right:360px; } .right-8 { margin-right:320px; } .pright-7-5 { padding-right:360px; } .pright-8 { padding-right:320px; } .right-8-5 { margin-right:440px; } .right-9 { margin-right:400px; } .pright-8-5 { padding-right:440px; } .pright-9 { padding-right:400px; } .right-9-5 { margin-right:520px; } .right-10 { margin-right:480px; } .pright-9-5 { padding-right:520px; } .pright-10 { padding-right:480px; } .right-10-5 { margin-right:600px; } .right-11 { margin-right:560px; } .pright-10-5 { padding-right:600px; } .pright-11 { padding-right:560px; } .right-11-5 { margin-right:680px; } .right-12 { margin-right:640px; } .pright-11-5 { padding-right:680px; } .pright-12 { padding-right:640px; } .right-12-5 { margin-right:760px; } .right-13 { margin-right:720px; } .pright-12-5 { padding-right:760px; } .pright-13 { padding-right:720px; } .right-13-5 { margin-right:840px; } .right-14 { margin-right:800px; } .pright-13-5 { padding-right:840px; } .pright-14 { padding-right:800px; } .right-14-5 { margin-right:920px; } .right-15 { margin-right:880px; } .pright-14-5 { padding-right:920px; } .pright-15 { padding-right:880px; } .right-15-5 { margin-right:1000px; } .right-16 { margin-right:960px; } .pright-15-5 { padding-right:1000px; } .pright-16 { padding-right:960px; } } /*@media screen and (max-width:768px){ } @media screen and (max-width:600px){ } /*@media screen and (max-width:440px){ }*/ /* General @media columns */ @media screen and (max-width:1020px){ .mq-large-col{ width:660px; } .mq-medium-col{ width:640px; } } @media screen and (max-width:768px){ .mq-large-col{ width:540px; } .mq-medium-col{ width:540px; } .mq-small-col{ width:380px; } } @media screen and (max-width:600px){ .mq-large-col{ width:380px; } .mq-medium-col{ width:380px; } } @media screen and (max-width:440px){ .mq-large-col{ width:280px; } .mq-medium-col{ width:280px; } .mq-small-col{ width:280px; } .mq-auto-col{ width:auto; } .mq-small-col.right{ float:left; } } /* -------------------- Helpers -------------------- */ /* * Paragraphs */ .break-words{ -ms-word-break:break-all; word-break:break-word; word-wrap:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; } .break-all-words, .break-all-words p, .break-all-words span, .break-all-words em, .break-all-words ul, .break-all-words a{ -ms-word-break:break-all; word-break:break-word; word-wrap:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; } .break-p-words p{ -ms-word-break:break-all; word-break:break-word; word-wrap:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; } .break-span-words span{ -ms-word-break:break-all; word-break:break-word; word-wrap:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; } /* * First/Last */ .last{ margin-right:0!important; } /* * Underlines/Borders */ .no-ul{ text-decoration:none; } .ul{ text-decoration:underline; } /* * Alignment */ .left{ display:inline; float:left; } .right{ float:right; } .abs-left{ left:0; } .abs-right{ right:0; } .center{ margin-left:auto; margin-right:auto; } .center-text{ text-align:center; } /* * Old-school Clear */ .clear, .clear-left{ clear:both; font-size:0px; line-height:0px!important; height:0px!important; margin:0px!important; padding:0px!important; } .clear-left{ clear:left; } /* * Modern Clear */ .clearfix:before, .clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ zoom:1; /* For IE 6/7 (trigger hasLayout) */ } /* * Vertical align (span) */ .valign, .valign-top, .valign-bottom{ display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline; vertical-align:middle; } .valign-top{ vertical-align:top; } .valign-bottom{ vertical-align:bottom; } /* * Vertical align (simple) */ .valign-fixed{ position:relative; height:100%; } .valign-fixed .valign-content{ position:absolute; width:100%; top:50%; left:0; } /* * Vertical Alignment */ .valign-outer{ display:table; position:absolute; top:0; height:100%; width:100%; overflow:visible; } .ie6 .valign-outer, .ie7 .valign-outer{ display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline; overflow:hidden; } .valign-wrapper{ display:table-cell; vertical-align:middle; width:100%; overflow:hidden; margin:0 auto; } .ie6 .valign-wrapper, .ie7 .valign-wrapper{ display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline; top:50%; position:relative; overflow:visible; } .valign-inner{ margin:0 auto; width:auto; overflow:visible; position:relative; } .ie6 .valign-inner, .ie7 .valign-inner{ display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline; top:-50%; position:relative; } /* * Margins + Paddings */ /* Margin top */ .mtn{ margin-top:0; } .mtxs{ margin-top:20px; } .mts{ margin-top:60px; } .mtm{ margin-top:100px; } .mtl{ margin-top:140px; } .mtxl{ margin-top:180px; } .mtxxl{ margin-top:220px; } .mtxxxl{ margin-top:260px; } /* Margin bottom */ .mbn{ margin-bottom:0; } .mbxs{ margin-bottom:20px; } .mbs{ margin-bottom:60px; } .mbm{ margin-bottom:100px; } .mbl{ margin-bottom:140px; } .mbxl{ margin-bottom:180px; } .mbxxl{ margin-bottom:220px; } .mbxxxl{ margin-bottom:260px; } /* Padding top */ .ptn{ padding-top:0; } .ptxs{ padding-top:20px; } .pts{ padding-top:60px; } .ptm{ padding-top:100px; } .ptl{ padding-top:140px; } .ptxl{ padding-top:180px; } .ptxxl{ padding-top:220px; } .ptxxxl{ padding-top:260px; } /* Padding bottom */ .pbn{ padding-bottom:0; } .pbxs{ padding-bottom:20px; } .pbs{ padding-bottom:60px; } .pbm{ padding-bottom:100px; } .pbl{ padding-bottom:140px; } .pbxl{ padding-bottom:180px; } .pbxxl{ padding-bottom:220px; } .pbxxxl{ padding-bottom:260px; } /* * Click through */ .click-through{ pointer-events:none; } /* * Mouse cursors */ /* Hand point */ .cursor-hand{ cursor:pointer; cursor:hand; } /* Grab */ .cursor-grab { cursor:move; /* fallback if grab cursor is unsupported */ cursor:grab; cursor:url(http://maps.gstatic.com/intl/en_us/mapfiles/openhand.cur), move); /*cursor:url(http://maps.gstatic.com/intl/en_us/mapfiles/openhand_8_8.cur) 8 8, move);*/ cursor:-moz-grab; cursor:-webkit-grab; } .cursor-grab:active { cursor:grabbing; cursor:url(http://maps.gstatic.com/intl/en_us/mapfiles/closedhand.cur), move); /*cursor:url(http://maps.gstatic.com/intl/en_us/mapfiles/closedhand_8_8.cur) 8 8, move);*/ cursor:-moz-grabbing; cursor:-webkit-grabbing; } /* * Desktop, Mobile & Tablets */ @media screen and (min-width:1020px){ .desktop-hide{ display:none; } /* Hide on desktop devices */ } @media screen and (min-width:767px) and (max-width:1020px){ .tablet-hide{ display:none; } /* Hide on tablet devices */ } @media screen and (min-width:439px) and (max-width:768px){ .handheld-hide{ display:none; } /* Hide on handheld devices */ } @media screen and (max-width:440px){ .mobile-hide{ display:none; } /* Hide on mobile devices */ } /* -------------------- Fonts -------------------- */ @font-face{ font-family:"HelveticaNeueW01-55Roma"; src:url("../../assets/fonts/HelveticaNeueW01-55Roma/HelveticaNeueW01-55Roma.eot?#iefix"); src:url("../../assets/fonts/HelveticaNeueW01-55Roma/HelveticaNeueW01-55Roma.eot?#iefix") format("eot"), url("../../assets/fonts/HelveticaNeueW01-55Roma/HelveticaNeueW01-55Roma.woff2") format("woff2"), url("../../assets/fonts/HelveticaNeueW01-55Roma/HelveticaNeueW01-55Roma.woff") format("woff"), url("../../assets/fonts/HelveticaNeueW01-55Roma/HelveticaNeueW01-55Roma.ttf") format("truetype"), url("../../assets/fonts/HelveticaNeueW01-55Roma/HelveticaNeueW01-55Roma.svg#HelveticaNeueW01-55Roma") format("svg"); } @font-face{ font-family:"HelveticaNeueW01-75Bold"; src:url("../../assets/fonts/HelveticaNeueW01-75Bold/HelveticaNeueW01-75Bold.eot?#iefix"); src:url("../../assets/fonts/HelveticaNeueW01-75Bold/HelveticaNeueW01-75Bold.eot?#iefix") format("eot"), url("../../assets/fonts/HelveticaNeueW01-75Bold/HelveticaNeueW01-75Bold.woff2") format("woff2"), url("../../assets/fonts/HelveticaNeueW01-75Bold/HelveticaNeueW01-75Bold.woff") format("woff"), url("../../assets/fonts/HelveticaNeueW01-75Bold/HelveticaNeueW01-75Bold.ttf") format("truetype"), url("../../assets/fonts/HelveticaNeueW01-75Bold/HelveticaNeueW01-75Bold.svg#HelveticaNeueW01-75Bold") format("svg"); } /* -------------------- General CSS -------------------- */ /*---Reset Stylesheet---*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, a, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } /*---HTML5 Definitions---*/ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display:block; } /*---General CSS---*/ h1, h2, h3{ font:63px/60px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; color:#0F233D; margin:0 0 10px 0; } .title{ font:63px/60px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; margin-top:-8px; } h2, h3, .large{ font:28px/30px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; } /* Styles */ .light, .dark-page .h1, .dark-page h2, .dark-page h3, .dark-page h4, .dark-page .large{ color:#FFF; } .dark, .light-page .h1, .light-page h2, .light-page h3, .light-page h4, .light-page .large{ color:#FFF; } /* Media Queries */ @media screen and (max-width:768px){ .title{ font:48px/50px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; } .h2, h3, .large{ font:22px/24px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; } } @media screen and (max-width:600px){ .title{ font:38px/40px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; margin-top:-7px; } .h2, h3, .large{ font:18px/20px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; } } @media screen and (max-width:440px){ .title{ font:28px/30px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; margin-top:-5px; } } p{ margin-bottom:10px; } .dark-page p{ color:#FFF; } a, a:active{ color:#0F233D; text-decoration:underline; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } a:hover, a.selected{} a img{ border:0; } /* Box buttons */ a.button{ clear:both; display:inline; float:left; padding:2px 5px; background:; } a.button:hover{ color:; background:#FFF; } /* Image buttons */ a.button{ font:15px/18px "HelveticaNeueW01-55Roma", Helvetica, Arial, sans-serif; color:#FFF; padding-left:20px; background:url(../../assets/images/icons/cv_off.gif) left no-repeat; } a.button:hover{ color:#FFF; background:url(../../images/icons/cv_on.gif) left no-repeat; } em{ color:#FFF; font:; } em a{ color:#FFF; } em a:hover{ color:#FFF; } strong{ color:#FFF; font:15px/18px "HelveticaNeueW01-55Roma", Helvetica, Arial, sans-serif; } .error{ color:#FFF; } img{ outline:none; } .ie img{ -ms-interpolation-mode:bicubic; } /* ie7+ */ ul, ol{ margin-left:20px; } li{ margin-bottom:10px } table{ border-collapse:collapse; border-spacing:0; table-layout:fixed; margin-bottom:10px; } td, th{ padding:0 0 5px 0; text-align:left; } input, select{ vertical-align:middle; } address{ font-style:normal; margin-bottom:10px } /* -------------------- Layout -------------------- */ html{ height:100%; overflow-y:scroll; } body{ height:100%; font:15px/18px "HelveticaNeueW01-55Roma", Helvetica, Arial, sans-serif; color:#0F233D; background:#FFF; } .ie body, .ie .body{ min-width:1020px; } .wrapper{ height:100%; } .body{ position:absolute; top:0; width:100%; height:100%; } .page{ height:100%; } .header-offset{ position:relative; height:70%; } .page section{ position:relative; } .page .header-section{ height:30%; } .full-page{ height:100%; } .min-full-page{ min-height:100%; } .page-strip{ height:700px; } .light-bg{ background-color:#FFF; } .dark-bg{ background-color:#0F233D; } /* Media Queries */ @media screen and (max-width:600px){ .header-section .content{ margin-top:15px; } .header-section .arrow-down{ position:absolute; bottom:20px; } .header-section .arrow-down, .header-section .arrow-down-large{ width:20px; height:12px; } .header-section .arrow-down-large{ background-image:url(/assets/images/icons/arrow_down_large_mobile.png); } .header-section .introduction{ margin-left:0; } .header-section .valign-outer{ display:block; } .header-section .valign-wrapper{ display:block; height:100%; vertical-align:top; } .header-section .valign-inner{ height:100%; } } @media screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 600px), screen and (min-resolution: 144dpi) and (max-width: 600px), screen and (min-resolution: 1.5dppx) and (max-width: 600px){ .header-section .arrow-down-large{ background-image:url("/assets/images/icons/arrow_down_large_mobile_x3.png"); background-size:20px 12px; } } @media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 600px), screen and (min-resolution: 192dpi) and (max-width: 600px), screen and (min-resolution: 2dppx) and (max-width: 600px){ .header-section .arrow-down-large{ background-image:url("/assets/images/icons/arrow_down_large_mobile_x2.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 3) and (max-width: 600px), screen and (min-resolution: 288dpi) and (max-width: 600px), screen and (min-resolution: 3dppx) and (max-width: 600px){ .header-section .arrow-down-large{ background-image:url("/assets/images/icons/arrow_down_large_mobile_x3.png"); } } @media screen and (max-width:440px){ .page .header-section{ height:45%; } .header-section .introduction{ width:280px; } } @media screen and (max-height:440px){ .page .header-section{ height:50%; } } .content{ margin-left:auto; margin-right:auto; width:960px; padding-left:20px; } .mq-content{ width:960px; } /* Media Queries */ @media screen and (max-width:1020px){ .mq-content{ width:720px; } } @media screen and (max-width:768px){ .mq-content{ width:560px; } } @media screen and (max-width:600px){ .mq-content{ width:400px; } } @media screen and (max-width:440px){ .mq-content{ width:auto; } } /*---Header/Footer---*/ header{ height:100%; z-index:1; } header .main{ position:relative; height:70%; width:100%; } .full-page .main{ height:100%; } /* Logo */ header .logo{ position:absolute; top:30px; right:30px; background:url(/assets/images/logos/swiss_ocean_logo.png) no-repeat center center; width:77px; height:80px; z-index:2; } header.dark .logo{ background-image:url('/assets/images/logos/swiss_ocean_logo_dark.png'); } /* Media Queries */ @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 1.5dppx){ header .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_x3.png"); background-size:77px 80px; } header.dark .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark_x3.png"); background-size:77px 80px; } } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx){ header .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_x2.png"); } header.dark .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark_x2.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min-resolution: 288dpi), screen and (min-resolution: 3dppx){ header .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_x3.png"); } header.dark .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark_x3.png"); } } @media screen and (max-width:768px){ header .logo{ top:20px; right:20px; width:42px; height:43px; background-image:url(/assets/images/logos/swiss_ocean_logo_mobile.png); } header.dark .logo{ background-image:url('/assets/images/logos/swiss_ocean_logo_mobile_dark.png'); } } @media screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 768px), screen and (min-resolution: 144dpi) and (max-width: 768px), screen and (min-resolution: 1.5dppx) and (max-width: 768px){ header .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_mobile_x3.png"); background-size:42px 43px; } header.dark .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_mobile_dark_x3.png"); background-size:42px 43px; } } @media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px), screen and (min-resolution: 192dpi) and (max-width: 768px), screen and (min-resolution: 2dppx) and (max-width: 768px){ header .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_mobile_x2.png"); } header.dark .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_mobile_dark_x2.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 3) and (max-width: 768px), screen and (min-resolution: 288dpi) and (max-width: 768px), screen and (min-resolution: 3dppx) and (max-width: 768px){ header .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_mobile_x3.png"); } header.dark .logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_mobile_dark_x3.png"); } } @media screen and (max-width:440px){ header .main, .header-offset{ height:55%; } } @media screen and (max-height:440px){ header .main, .header-offset{ height:50%; } } /* Title */ .header-title{ position:absolute; top:183px; left:10px; } .header-title h1{ color:#FFF; } .dark .header-title h1{ color:#0F233D; } /* Media Queries */ @media screen and (max-width:1020px){ .header-title{ top:243px; } } @media screen and (max-width:768px), screen and (max-height:600px){ .menu-wrapper{ padding-left:20px; } .header-title{ top:96px; left:auto; } } @media screen and (min-width:1020px) and (max-height:440px){ .header-title .title{ font:48px/50px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; } } @media screen and (max-height:440px){ .header-title{ top:56px; } /*.header-title .title{ font:28px/30px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; }*/ } footer{ float:right; position:relative; margin-top:-68px; padding:25px 30px 25px; text-align:right; font:13px/18px "HelveticaNeueW01-55Roma", Helvetica, Arial, sans-serif; z-index:1; color:#0F233D; } /*.page footer{ margin-top:0; }*/ footer p{ margin:0; } footer a{ color:#0F233D; text-decoration:none; } footer a:hover{ text-decoration:underline; } footer.light a{ color:#FFF; } /* Media Queries */ @media screen and (max-height:600px), screen and (max-width:1020px){ footer{ margin-top:-38px; padding:10px 20px 10px; } } @media screen and (max-height:440px){ footer{ margin-top:-28px; padding-top:5px; padding-bottom:5px; } } @media screen and (max-width:1180px){ footer a:first-child{ display:none; } } @media screen and (max-width:768px){ .body footer{ display:none; } } /*---Main menu---*/ .menu-wrapper{ position:relative; margin:0 auto; height:100%; overflow:hidden; z-index:1; } .main-menu{ height:100%; } .main-menu .top-level{ height:100%; margin-left:0; padding-left:1px; background:url("/assets/images/backgrounds/trans_tile_1px.png") repeat-y center left; } .dark .main-menu .top-level{ background:url("/assets/images/backgrounds/trans_dark_tile_1px.png") repeat-y center left; } .main-menu .top-level > li{ display:inline; float:left; width:159px; height:100%; margin-bottom:0; font:14px/16px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; color:#FFF; padding-right:1px; background:url("/assets/images/backgrounds/trans_tile_1px.png") repeat-y center right; } .dark .main-menu .top-level > li{ background:url("/assets/images/backgrounds/trans_dark_tile_1px.png") repeat-y center right; } .main-menu .top-level > li.last{ padding-right:0; background-image:none; } .main-menu .top-level > li > a{ display:block; padding:30px 10px 10px; font:14px/16px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; color:#FFF; text-decoration:none; } .main-menu li a:hover, .main_menu .active a{ color:#FFF; } .ie .main-menu li li > a{ color:#CECECE; } .ie .main-menu li li > a:hover{ color:#FFF; } /* Dark */ .dark .main-menu .top-level > li > a{ color:#0F233D; } .dark .main-menu li a:hover, .dark .main_menu li a.selected{ color:; } .ie .dark .main-menu li li > a{ color:#87919E; } .ie .dark .main-menu li li > a:hover{ color:#0F233D; } /*--- Mobile menu ---*/ .mobile-menu{ display:none; position:absolute; top:0; left:0; width:0px; height:100%; z-index:3; } .mobile-menu .sub-menu{ height:0; } /* Text */ .mobile-btn-text{ display:block; position:absolute; top:20px; left:60px; color:#FFF; text-decoration:none; opacity:0.7; } .mobile-btn-text:active{ color:#FFF; text-decoration:none; } /* Button */ .mobile-btn{ display:block; position:absolute; top:20px; left:20px; width:18px; height:16px; background:url(/assets/images/backgrounds/fulltrans_tile.png) repeat; z-index:1; } .mobile-btn span{ display:block; position:absolute; top:7px; width:18px; height:2px; background:rgb(135,145,158);background:rgba(255,255,255, 0.7); transition-delay:0.3s; } .mobile-btn span::before, .mobile-btn span::after{ position:absolute; display:block; left:0; width:100%; height:2px; background:rgb(135,145,158);background:rgba(255,255,255, 0.7); content:""; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s; } .mobile-btn span::before{ top:-7px; transition-property:top, transform; } .mobile-btn span::after{ bottom:-7px; transition-property:bottom, transform; } /*--- active state, i.e. menu open ---*/ .mobile-btn:hover/*.active*/ span{ background:none; } .mobile-btn:hover/*.active*/ span{ transition-delay:0.3s; } .mobile-btn:hover/*.active*/ span::before{ top:0; transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .mobile-btn:hover/*.active*/ span::after{ bottom:0; transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .mobile-btn:hover/*.active*/ span::before, .mobile-btn:hover/*.active*/ span::after { transition-delay:0s, 0.3s; } /* Cover */ .mobile-menu .menu-cover{ position:relative; top:0; left:0; min-height:100%; height:auto!important; height:100%; background:#0F233D; overflow:hidden; } .menu-cover .mobile-btn-text{ opacity:0.7; } .mobile-menu footer{ position:absolute; top:auto; bottom:0; padding:0 0 20px 20px; width:140px; text-align:left; opacity:0.7; } .mobile-menu footer span{ display:none; } /* Fonts & Colours */ .mobile-menu .top-level{ width:220px; margin-left:0; padding:96px 0 60px; } .mobile-menu ul li > a, .dark .mobile-menu ul li > a{ padding:0 20px; color:#FFF; text-decoration:none; } .mobile-menu ul li{ margin-bottom:0; } .mobile-menu ul li a{ display:block; margin-bottom:10px; font:15px/18px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; } /* Media Queries */ @media screen and (max-width:1020px){ .main-menu .top-level > li{ width:119px; } } @media screen and (max-width:768px), screen and (max-height:600px){ .main-menu{ display:none; } .mobile-menu{ display:block; } /*--- Active mobile menu ---*/ .mobile-menu-on{ overflow-x:hidden; } .mobile-menu-on .wrapper{ position:relative; padding-left:220px; /* 0px > 220px */ } .mobile-menu-on .mobile-menu{ width:220px; /* 0px > 220px */ } .mobile-menu-on header .main, .mobile-menu-on .body{ position:fixed; } } /*---Sub menu---*/ .sub-menu{ position:relative; overflow:hidden; } .sub-menu ul{ list-style:none; margin-left:0; } .sub-menu ul > li{ display:block; height:auto; position:relative; margin-bottom:4px; } .sub-menu li > a{ display:block; padding:0 10px; font:14px/16px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; color:#FFF; text-decoration:none; white-space:nowrap; opacity:0.5; } .sub-menu li a:hover, .sub-menu .active a{ opacity:1; } .dark .sub-menu li > a{ color:#0F233D; } /* Media Queries */ @media screen and (max-width:1020px){ .sub-menu li > a{ white-space:normal; } } /*-------------------------------------------------------------------------------------------------*/ /* * Scrollbar * * - Google Chrome * :horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation. * :vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation. * :decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar). * :increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar). * :start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb. * :end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb. * :double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons. * :single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button. * :no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track. * :corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present. * :window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.) * */ /* Chrome */ /*--- body ---*/ body::-webkit-scrollbar{ width:10px; height:10px; background:#EEEEEE; border-left:0px solid #EEEEEE; border-right:0px solid #EEEEEE; border-top:0px solid #EEEEEE; border-bottom:0px solid #EEEEEE; } body::-webkit-scrollbar-thumb{ background:#0F233D; } .body::-webkit-scrollbar-thumb:vertical{ background:#EEEEEE; } .body::-webkit-scrollbar-thumb:horizontal{ background:#EEEEEE; } /*--- .scrollbar-timeline ---*/ .scrollbar-timeline::-webkit-scrollbar{ width:10px; height:10px; background:#EEEEEE; border-left:0px solid #EEEEEE; border-right:0px solid #EEEEEE; border-top:0px solid #EEEEEE; border-bottom:0px solid #EEEEEE; } .scrollbar-timeline::-webkit-scrollbar-thumb{ background:#000000; } ..scrollbar-timeline::-webkit-scrollbar-thumb:vertical{ background:#EEEEEE; } ..scrollbar-timeline::-webkit-scrollbar-thumb:horizontal{ background:#EEEEEE; } /*-------------------------------------------------------------------------------------------------*/ /* * Icons * */ /*--- Logos ---*/ .logo a{ display:block; height:100%; text-indent:100%; white-space:nowrap; overflow:hidden; } .small-logo{ width:77px; height:80px; background:url(/assets/images/logos/swiss_ocean_logo.png) no-repeat center center; } .dark.small-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark.png"); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 1.5dppx){ .small-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_x3.png"); background-size:77px 80px; } .dark.small-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark_x3.png"); background-size:77px 80px; } } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx){ .small-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_x2.png"); } .dark.small-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark_x2.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min-resolution: 288dpi), screen and (min-resolution: 3dppx){ .small-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_x3.png"); } .dark.small-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark_x3.png"); } } .large-logo{ width:142px; height:147px; background:url("/assets/images/logos/swiss_ocean_logo_large.png") no-repeat center center; } .dark.large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_large_dark.png"); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 1.5dppx){ .large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_large_x3.png"); background-size:142px 147px; } .dark.large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_large_dark_x3.png"); background-size:142px 147px; } } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx){ .large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_large_x2.png"); } .dark.large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_large_dark_x2.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min-resolution: 288dpi), screen and (min-resolution: 3dppx){ .large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_large_x3.png"); } .dark.large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_large_dark_x3.png"); } } @media screen and (max-width:600px){ .large-logo{ width:77px; height:80px; background-image:url("/assets/images/logos/swiss_ocean_logo.png"); } .dark.large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 600px), screen and (min-resolution: 144dpi) and (max-width: 600px), screen and (min-resolution: 1.5dppx) and (max-width: 600px){ .large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_x3.png"); background-size:77px 80px; } .dark.large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark_x3.png"); background-size:77px 80px; } } @media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 600px), screen and (min-resolution: 192dpi) and (max-width: 600px), screen and (min-resolution: 2dppx) and (max-width: 600px){ .large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_x2.png"); } .dark.large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark_x2.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 3) and (max-width: 600px), screen and (min-resolution: 288dpi) and (max-width: 600px), screen and (min-resolution: 3dppx) and (max-width: 600px){ .large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_x3.png"); } .dark.large-logo{ background-image:url("/assets/images/logos/swiss_ocean_logo_dark_x3.png"); } } /*--- Arrows ---*/ .arrow-right{ width:14px; height:23px; background:url("/assets/images/icons/arrow_right.png") no-repeat center center; } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 1.5dppx){ .arrow-right{ background-image:url("/assets/images/icons/arrow_right_x3.png"); background-size:14px 23px; } } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx){ .arrow-right{ background-image:url("/assets/images/icons/arrow_right_x2.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min-resolution: 288dpi), screen and (min-resolution: 3dppx){ .arrow-right{ background-image:url("/assets/images/icons/arrow_right_x3.png"); } } .arrow-down-large{ width:98px; height:52px; background:url("/assets/images/icons/arrow_down_large.png") no-repeat center center; } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 1.5dppx){ .arrow-down-large{ background-image:url("/assets/images/icons/arrow_down_large_x3.png"); background-size:98px 52px; } } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx){ .arrow-down-large{ background-image:url("/assets/images/icons/arrow_down_large_x2.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min-resolution: 288dpi), screen and (min-resolution: 3dppx){ .arrow-down-large{ background-image:url("/assets/images/icons/arrow_down_large_x3.png"); } } /*--- Open & Close ---*/ .plus-small{ width:11px; height:11px; background:url("/assets/images/icons/plus_small.png") no-repeat center center; } .light.plus-small, .dark-page .plus-small{ background-image:url("/assets/images/icons/plus_small_light.png"); } .plus-small.active{ background-image:url("/assets/images/icons/plus_small.png"); } .light.plus-small.active, .dark-page .plus-small.active{ background-image:url("/assets/images/icons/plus_small_light.png"); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 1.5dppx){ .plus-small{ background-image:url("/assets/images/icons/plus_small_x3.png"); background-size:11px 11px; } .light.plus-small, .dark-page .plus-small{ background-image:url("/assets/images/icons/plus_small_light_x3.png"); background-size:11px 11px; } } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx){ .plus-small{ background-image:url("/assets/images/icons/plus_small_x2.png"); } .light.plus-small, .dark-page .plus-small{ background-image:url("/assets/images/icons/plus_small_light_x2.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min-resolution: 288dpi), screen and (min-resolution: 3dppx){ .plus-small{ background-image:url("/assets/images/icons/plus_small_x3.png"); } .light.plus-small, .dark-page .plus-small{ background-image:url("/assets/images/icons/plus_small_light_x3.png"); } } .plus-big{ width:19px; height:19px; background:url("/assets/images/icons/plus_big.png") no-repeat center center; } .light.plus-big, .dark-page .plus-big{ background-image:url("/assets/images/icons/plus_big_light.png"); } .plus-big.active{ background-image:url("/assets/images/icons/plus_big.png"); } .light.plus-big.active, .dark-page .plus-big.active{ background-image:url("/assets/images/icons/plus_big_light.png"); } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi), screen and (min-resolution: 1.5dppx){ .plus-big{ background-image:url("/assets/images/icons/plus_big_x3.png"); background-size:19px 19px; } .light.plus-big, .dark-page .plus-big{ background-image:url("/assets/images/icons/plus_big_light_x3.png"); background-size:19px 19px; } } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx){ .plus-big{ background-image:url("/assets/images/icons/plus_big_x2.png"); } .light.plus-big, .dark-page .plus-big{ background-image:url("/assets/images/icons/plus_big_light_x2.png"); } } @media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min-resolution: 288dpi), screen and (min-resolution: 3dppx){ .plus-big{ background-image:url("/assets/images/icons/plus_big_x3.png"); } .light.plus-big, .dark-page .plus-big{ background-image:url("/assets/images/icons/plus_big_light_x3.png"); } } /*-------------------------------------------------------------------------------------------------*/ /* * Backgrounds * * - Automatically fills space vertically + horizontally. * - IE7+ * - Image alignment. * - Additions - overlay * */ .bgs{ position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; } .bgs-wrapper{ position:relative; left:0; height:100%; /*min-width:960px; min-height:700px;*/ z-index:-1; } .bgs-content{ position:absolute; top:0; left:0; width:100%; height:100%; } section .bgs{ z-index:-1; } .bgs .middle{ display:inline-block; height:100%; vertical-align:middle; } /*--- Background content ---*/ .slide-title{ position:absolute; top:183px; width:780px; z-index:1; } .slide-title .title{ font:45px/50px "HelveticaNeueW01-75Bold", Helvetica, Arial, sans-serif; color:#FFF; } .slide-title{ display:none; filter: alpha(opacity=0) ; opacity: 0; zoom: 1 ; } .slide-title:first-child{ filter: alpha(opacity=99) ; opacity: 0.99; zoom: 1 ; } .slide-title.active{ display:block; filter: alpha(opacity=99) ; opacity: 0.99; zoom: 1 ; } /* Media Queries */ @media screen and (max-width:1020px){ .slide-title{ top:243px; width:540px; } } /*--- Background types ---*/ /* Default */ .bgs .bg, .bgs .cover{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; } .bgs .bg img, .bgs .cover img{ position:absolute; min-height:100%; min-width:100%; } .bgs .bg{ display:none; filter: alpha(opacity=0) ; opacity: 0; zoom: 1 ; } .bgs .bg:first-child{ filter: alpha(opacity=100) ; opacity: 1; zoom: 1 ; } .bg.active{ display:block; filter: alpha(opacity=100) ; opacity: 1; zoom: 1 ; } /* Slide */ .slideshow .slide{ vertical-align:top; white-space:nowrap; } .slideshow .slide .bg{ position:static; display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline; } /* Crop */ /* .bgs .crop { position:relative; width:100%; height:100%; overflow:hidden; } .bgs .crop img { display:block; position:absolute; left:50%; top:50%; height:100%; width:auto; min-width:100%; transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .bgs .crop .portrait{ width:100%; height:auto; }*/ /* Horizontal crop */ /*.bgs .hvcrop{ position:absolute; top:-50%; left:-50%; width:200%; height:200%; } .bgs .hvcrop img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }*/ /* z-index */ .zindex-0{ z-index:0; } .zindex-1{ z-index:1; } .zindex-2{ z-index:2; } .zindex-3{ z-index:3; } .zindex-4{ z-index:4; } .zindex-5{ z-index:5; } .zindex-6{ z-index:6; } .zindex-7{ z-index:7; } .zindex-8{ z-index:8; } .zindex-9{ z-index:9; } .zindex-10{ z-index:10; } .zindex-11{ z-index:11; } .zindex-12{ z-index:12; } .zindex-13{ z-index:13; } .zindex-14{ z-index:14; } .zindex-15{ z-index:15; } .zindex-16{ z-index:16; } .zindex-17{ z-index:17; } .zindex-18{ z-index:18; } .zindex-19{ z-index:19; } .zindex-20{ z-index:20; } .zindex-21{ z-index:21; } .zindex-22{ z-index:22; } .zindex-23{ z-index:23; } .zindex-24{ z-index:24; } .zindex-25{ z-index:25; } .zindex-26{ z-index:26; } .zindex-27{ z-index:27; } .zindex-28{ z-index:28; } .zindex-29{ z-index:29; } .zindex-30{ z-index:30; } .zindex-31{ z-index:31; } .zindex-32{ z-index:32; } .zindex-33{ z-index:33; } .zindex-34{ z-index:34; } .zindex-35{ z-index:35; } .zindex-36{ z-index:36; } .zindex-37{ z-index:37; } .zindex-38{ z-index:38; } .zindex-39{ z-index:39; } .zindex-40{ z-index:40; } .zindex-41{ z-index:41; } .zindex-42{ z-index:42; } .zindex-43{ z-index:43; } .zindex-44{ z-index:44; } .zindex-45{ z-index:45; } .zindex-46{ z-index:46; } .zindex-47{ z-index:47; } .zindex-48{ z-index:48; } .zindex-49{ z-index:49; } .zindex-50{ z-index:50; } .zindex-51{ z-index:51; } .zindex-52{ z-index:52; } .zindex-53{ z-index:53; } .zindex-54{ z-index:54; } .zindex-55{ z-index:55; } .zindex-56{ z-index:56; } .zindex-57{ z-index:57; } .zindex-58{ z-index:58; } .zindex-59{ z-index:59; } .zindex-60{ z-index:60; } .zindex-61{ z-index:61; } .zindex-62{ z-index:62; } .zindex-63{ z-index:63; } .zindex-64{ z-index:64; } .zindex-65{ z-index:65; } .zindex-66{ z-index:66; } .zindex-67{ z-index:67; } .zindex-68{ z-index:68; } .zindex-69{ z-index:69; } .zindex-70{ z-index:70; } .zindex-71{ z-index:71; } .zindex-72{ z-index:72; } .zindex-73{ z-index:73; } .zindex-74{ z-index:74; } .zindex-75{ z-index:75; } .zindex-76{ z-index:76; } .zindex-77{ z-index:77; } .zindex-78{ z-index:78; } .zindex-79{ z-index:79; } .zindex-80{ z-index:80; } .zindex-81{ z-index:81; } .zindex-82{ z-index:82; } .zindex-83{ z-index:83; } .zindex-84{ z-index:84; } .zindex-85{ z-index:85; } .zindex-86{ z-index:86; } .zindex-87{ z-index:87; } .zindex-88{ z-index:88; } .zindex-89{ z-index:89; } .zindex-90{ z-index:90; } .zindex-91{ z-index:91; } .zindex-92{ z-index:92; } .zindex-93{ z-index:93; } .zindex-94{ z-index:94; } .zindex-95{ z-index:95; } .zindex-96{ z-index:96; } .zindex-97{ z-index:97; } .zindex-98{ z-index:98; } .zindex-99{ z-index:99; } .zindex-100{ z-index:100; } /* Alignment */ .bgs .align-t img, .bgs .align-tl img, .bgs .align-tr img{ top:0; } .bgs .align-b img, .bgs .align-bl img, .bgs .align-br img{ bottom:0; } .bgs .align-tl img, .bgs .align-l img, .bgs .align-bl img{ left:0; } .bgs .align-tr img, .bgs .align-r img, .bgs .align-br img{ right:0; } .bgs .align-m, .bgs .align-m img{ top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); } .bgs .align-c, .bgs .align-c img{ left:50%; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); } .bgs .align-mc, .bgs .align-mc img{ top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); } .ie .bgs .align-m, .ie .bgs .align-m img, .ie .bgs .align-c, .ie .bgs .align-c img, .ie .bgs .align-mc, .ie .bgs .align-mc img{ top:auto; left:auto; } /* Additions */ .bgs .overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:url('/assets/images/backgrounds/bg_overlay_cover.png') repeat center center; } /*-------------------------------------------------------------------------------------------------*/ /* * Pagination * */ .pagination-wrapper{ position:absolute; bottom:30px; width:100%; } .pagination{ position:relative; left:11px; /* Gutter + 1px border for menu wrapper. */ z-index:1; } .pagination.right{ left:auto; right:32px; /* Gutter + 1px border for menu wrapper. */ } .pagination ul{ margin-left:0px; } .pagination li{ list-style:none; display:inline; float:left; margin-right:10px; margin-bottom:0; } .pagination li.last{ margin-right:0; } .pagination a{ display:block; width:8px; height:8px; border:1px solid rgb(206,206,206); border:1px solid rgba(255,255,255,0.5); background:transparent; /* Transitions */ transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .pagination a:hover, .pagination .active a{ border:1px solid rgb(255,255,255); border:1px solid rgba(255,255,255,1); background:#FFF; } /* Vertical */ .pagination.vertical li{ clear:left; margin-right:0; margin-bottom:10px; } .pagination.vertical li.last{ margin-bottom:0; } /*-------------------------------------------------------------------------------------------------*/ /* * Figure Captions * * Two opposite facing feature images * along with two opposite facing pieces of caption text. * * */ .figure-captions{ } .figure-captions .holder{ position:relative; width:50%; } .ie7 .figure-captions .holder{ width:49.999%; /* Fixes IE sub-pixel rounding issue */ } .figure-captions figure{ margin:0 20px 20px 0; } .figure-captions figure > .holder:first-child{ display:inline; float:left; } .figure-captions figure > .holder:first-child + .holder{ float:right; position:relative; left:20px; } .figure-captions img{ display:block; width:100%; } /* Content alignment */ .mq-content-left, .mq-content-right{ position:absolute; } .mq-content-left{ left:-480px; margin-left:-20px; } .mq-content-right{ right:-480px; margin-right:-20px; } /* Media Queries */ @media screen and (max-width:1290px){ .figure-captions .top-2{ margin-top:80px; } .figure-captions .right-2{ margin-right:80px; } .figure-captions .left-2{ margin-left:80px; } } @media screen and (max-width:1060px){ .figure-captions .top-2{ margin-top:0; } .figure-captions .right-2{ margin-right:0; } .figure-captions .left-2{ margin-left:0; } } @media screen and (max-width:1020px){ .mq-content-left{ left:-360px; } .mq-content-right{ right:-360px; } } @media screen and (max-width:768px){ .mq-content-left, .mq-content-right{ width:auto; left:0; right:0; } .mq-content-left div, .mq-content-right div{ width:auto; } } @media screen and (max-width:600px){ .mq-content-left, .mq-content-right{ width:auto; left:0; right:0; } .mq-content-left div, .mq-content-right div{ width:auto; } } @media screen and (max-width:440px){ .mq-content-left, .mq-content-right{ width:auto; left:0; right:0; } .mq-content-left div, .mq-content-right div{ width:auto; } } /*-------------------------------------------------------------------------------------------------*/ /* * Button Links * */ .button-links{ position:relative; clear:both; } .button-links ul{ margin:0 auto; list-style:none; } .button-links li{ display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline; margin:0 20px 30px 0; width:220px; text-align:left; } .button-links a{ display:block; text-decoration:none; } .button-links h3{ margin-bottom:21px; padding-bottom:15px; border-bottom:1px solid #87919E; } .button-links .arrow{ display:block; } /* Centered */ .button-links.center ul{ text-align:center; } /* Media Queries */ @media screen and (max-width:1020px){ .button-links{ width:560px; } } @media screen and (max-width:600px){ .button-links{ width:240px; } .button-links li{ width:220px; } } @media screen and (max-width:440px){ .button-links{ width:280px; } .button-links li{ width:260px; } } /*-------------------------------------------------------------------------------------------------*/ /* * Timeline * */ .timeline{ position:relative; overflow:hidden; height:480px; /* no-js */ overflow-x:scroll; height:507px; /*- Make up for scrollbar*/ } .timeline-align{ position:relative; min-width:100%; padding-left:50%; margin-left:-470px; height:100%; } .timeline-content{ height:100%; padding-left:160px; /* inline-block fix */ vertical-align:top; white-space:nowrap; } .timeline-content > div > div{ white-space:normal; } /* Sections */ .timeline .main-section{ display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline; width:1120px; height:100%; position:relative; } .timeline .main-section.last{ padding-right:160px; } .timeline .sub-section{ display:inline; float:left; width:320px; height:239px; /*background:#FFF;*/ font:15px/18px "HelveticaNeueW01-55Roma", Helvetica, Arial, sans-serif; position:relative; } .timeline .sub-section.top{ height:239px; margin-left:-160px; border-bottom:1px solid #0F233D; } .dark-page .timeline .sub-section.top{ border-bottom:1px solid #FFF; } .timeline .sub-section.bottom{ height:240px; margin:240px 0 0 -160px; } /* Content */ .timeline .section-content{ position:absolute; width:129px; padding-left:10px; border-left:1px solid #87919E; } .timeline .section-header .section-content{ width:226px; height:239px; line-height:239px; padding-left:10px; border-left:4px solid #0F233D; } .dark-page .timeline .section-header .section-content{ border-left:4px solid #FFF; } .timeline .top .section-content{ bottom:0; } .timeline .section-content span{ display:block; font:15px/18px "HelveticaNeueW01-55Roma", Helvetica, Arial, sans-serif; } .timeline .bottom span{ padding-top:10px; display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline; vertical-align:bottom; } .ie7 .timeline .bottom span{ position:absolute; bottom:0; } /* Reveal content */ .timeline .reveal-content{ position:relative; overflow:hidden; height:0; } .timeline .reveal-content p:first-child{ margin-top:15px; } .timeline .active .reveal-content{ height:auto; } /* Fonts */ .timeline h4{ margin-bottom:0; font-weight:normal; } .timeline .section-header p{ margin-bottom:0; } /* Button */ .timeline-content .sub-section + .sub-section a{ display:block; width:11px; height:11px; margin:-11px 0 0 -11px; padding:11px; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .timeline .active a{ transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); } /* Border heights */ .timeline .b1 .section-content, .timeline .b2 .section-content, .timeline .b3 .section-content{ border-left:1px solid #87919E; } .timeline .b1 .section-content{ min-height:80px; height:auto!important; height:80px; line-height:80px; } .timeline .b2 .section-content{ min-height:160px; height:auto!important; height:160px; line-height:160px; } .timeline .b3 .section-content{ min-height:240px; height:auto!important; height:240px; line-height:240px; } /* Media Queries */ @media screen and (max-width:1500px){ .timeline-content{ padding-left:120px; } .timeline .main-section{ width:840px; } .timeline .main-section.last{ padding-right:120px; } .timeline .section-header, .timeline .sub-section{ width:240px; } .timeline .sub-section.top, .timeline .sub-section.bottom{ margin-left:-120px; } } @media screen and (max-width:1020px){ .timeline-align{ margin-left:-350px; } } @media screen and (max-width:768px){ .timeline-align{ margin-left:-270px; } } @media screen and (max-width:600px){ .timeline-align{ margin-left:-190px; } } @media screen and (max-width:440px){ .timeline-align{ width:280px; margin-left:0; padding-left:20px; } } /* -------------------- Homepage -------------------- */ .index{ } /* -------------------- Yachts -------------------- */ /*-Overview-*/ .yachts-index{ } /* Approach */ .approach-detail h3{ margin-bottom:20px; } /* Media Queries */ @media screen and (max-width:768px){ .approach-title{ margin-bottom:40px; } .approach-details{ /*float:left;*/ width:400px; } .approach-detail{ width:auto; margin-bottom:20px; } } @media screen and (max-width:440px){ .approach-details{ width:auto; } } /* Technology */ .technology-diagram{ position:absolute; top:0; left:0; width:100%; height:621px; background:url("/assets/images/yachts/yacht_technology.png") no-repeat center center; z-index:-1; } /* Media Queries */ @media screen and (max-width:930px){ .technology-diagram{ display:none; } } /* Features */ .feature-content{ position:relative; } .feature-content > div{ display:none; position:absolute; top:0; } .feature-content div:first-child{ display:block; } .feature-item{ margin-bottom:25px; } .feature-item-title a{ position:relative; padding-right:35px; text-decoration:none; color:#FFF; } .feature-item-title span{ position:absolute; right:0; height:100%; } .feature-item-content{ display:none; } /* Prepared */ .yacht-outline{ position:absolute; bottom:0; left:-32%; width:100%; height:333px; background:url("/assets/images/yachts/yacht_outline.png") no-repeat right center; z-index:-1; } /* Timeline */ .timeline-section{ min-height:759px; } /* Media Queries */ @media screen and (max-width:1020px){ .timeline-intro{ margin-left:240px; } } @media screen and (max-width:768px){ .timeline-intro{ margin-left:160px; } } @media screen and (max-width:600px){ .timeline-intro{ margin-left:0; } } /* Footer */ .yachts-index .footer-links{ position:absolute; width:100%; bottom:80px; z-index:1; } .footer-section{ margin-top:-340px; } .footer-section-logo .valign-inner{ padding-top:180px; } /* -------------------- Aviation -------------------- */ /*-Overview-*/ .aviation-index{ } /* -------------------- Team -------------------- */ .team-index{ } /* -------------------- Contact -------------------- */ .contact-index{ }