* {
box-sizing: border-box
}
html,body,div,span,object,iframe,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,var,fieldset,form,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {
vertical-align: baseline;
margin: 0;
padding: 0
}
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {
display: block
}
body {
background: #fff;
color: #000;
font: 75%/1.5em Arial,Helvetica,"DejaVu Sans","Liberation sans","Bitstream Vera Sans",sans-serif;
position: relative
}
textarea {
font: 101%/1.5em Arial,Helvetica,"DejaVu Sans","Liberation sans","Bitstream Vera Sans",sans-serif;
border: 1px solid #ccc;
border-bottom-color: #eee;
border-right-color: #eee;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0.29em 0
}
blockquote,q {
quotes: none
}
blockquote:before,blockquote:after,q:before,q:after {
content: none
}
:focus {
outline: none
}
a {
text-decoration: none;
border: 0;
color: inherit
}
a:hover,a:focus {
text-decoration: underline
}
a img {
border: 0
}
abbr,acronym {
border-bottom: 1px dotted;
cursor: help;
font-variant: small-caps
}
address,cite,em,i {
font-style: italic
}
blockquote p {
margin: 0 1.5em 1.5em;
padding: .75em
}
code,kbd,tt {
font-family: "Courier New",Courier,monospace,serif;
line-height: 1.5
}
del {
text-decoration: line-through
}
dfn {
border-bottom: 1px dashed;
font-style: italic
}
dl {
margin: 0 0 1.5em
}
dd {
margin-left: 1.5em
}
h1,h2,h3,h4,h5,h6 {
font-weight: 700;
padding: 0
}
h1 {
font-size: 2em;
margin: 0 0 0.75em
}
h2 {
font-size: 1.5em;
margin: 0 0 1em
}
h3 {
font-size: 1.1666em;
margin: 0 0 1.286em
}
h4 {
font-size: 1em;
margin: 0 0 1.5em
}
h5 {
font-size: .8333em;
margin: 0 0 1.8em
}
h6 {
font-size: .666em;
margin: 0 0 2.25em
}
img {
display: inline-block;
vertical-align: text-bottom
}
ins {
text-decoration: overline
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: 700
}
ol {
list-style: outside decimal
}
p {
font-weight: 400;
margin: 0 0 1.5em
}
pre {
font-family: "Courier New",Courier,monospace,serif;
margin: 0 0 1.5em
}
sub {
top: .4em;
font-size: .85em;
line-height: 1;
position: relative;
vertical-align: baseline
}
sup {
font-size: .85em;
line-height: 1;
position: relative;
bottom: .5em;
vertical-align: baseline
}
ul {
list-style: outside disc
}
ul,ol {
margin: 0 0 1.5em 1.5em;
padding: 0
}
li ul,li ol {
margin: 0 0 1.5em 1.5em;
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.5em;
padding: 0
}
caption {
font-style: italic;
text-align: left
}
tr.alt td {
background: #eee
}
td {
border: 1px solid #000;
vertical-align: middle;
padding: .333em
}
th {
font-weight: 700;
vertical-align: middle;
padding: .333em
}
button {
cursor: pointer;
display: block;
font-size: 1em;
height: 2em;
line-height: 1.5em;
margin: 1.75em 0 0;
padding: 0 0.5em
}
button::-moz-focus-inner {
border: 0
}
fieldset {
border: 0;
position: relative;
margin: 0 0 1.5em;
padding: 1.5em 0 0
}
fieldset fieldset {
clear: both;
margin: 0 0 1.5em;
padding: 0 0 0 1.5em
}
input {
border: 1px solid #ccc;
border-bottom-color: #eee;
border-right-color: #eee;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
font-size: 12px;
height: 1.5em;
line-height: 1.5em;
width: 100%;
margin: 0 0 0.75em;
padding: 0.29em 0
}
input[type=file] {
height: 2.25em;
padding: 0
}
select {
border: 1px solid #ccc;
border-bottom-color: #eee;
border-right-color: #eee;
font-size: 1em;
height: 2.25em;
_margin: 0 0 1.3em;
margin: 0 0 0.8em;
padding: 0.2em 0 0
}
optgroup {
font-weight: 700;
font-style: normal;
text-indent: .2em
}
optgroup+optgroup {
margin-top: 1em
}
option {
font-size: 1em;
height: 1.5em;
text-indent: 1em;
padding: 0
}
label {
cursor: pointer;
display: block;
height: auto;
line-height: 1.4em;
width: 100%;
margin: 0;
padding: 0
}
label input {
background: 0;
border: 0;
height: 1.5em;
line-height: 1.5em;
width: auto;
margin: 0 0.5em 0 0;
padding: 0
}
legend {
font-size: 1.1666em;
font-weight: 700;
left: 0;
margin: 0;
padding: 0
}
dt,strong,b {
font-weight: 700
}
.button,.button-inverse,nav .menu,.queue .slide .box a,.buttoncontainer a,form button {
display: inline-block;
border: 1px solid #000;
border-radius: 4px;
font-family: 'Source Sans Pro';
font-size: 16px;
font-weight: 400;
letter-spacing: 1.6px;
line-height: 40px;
text-transform: uppercase;
font-variant: small-caps;
height: 60px;
line-height: 60px;
padding: 0 90px 0 30px;
background: transparent url(../img/cta.png) no-repeat 100% 50%;
text-decoration: none;
color: #000
}
.button:hover,.button-inverse:hover,nav .menu:hover,.queue .slide .box a:hover,.buttoncontainer a:hover,form button:hover,.button:active,.button-inverse:active,nav .menu:active,.queue .slide .box a:active,.buttoncontainer a:active,form button:active {
background: #000 url(../img/cta-w.png) no-repeat 100% 50%;
text-decoration: none;
color: #fff
}
.thumbbanner.clickable:hover .button,.thumbbanner.clickable:hover .button-inverse,.thumbbanner.clickable:hover nav .menu,nav .thumbbanner.clickable:hover .menu,.thumbbanner.clickable:hover .queue .slide .box a,.queue .slide .box .thumbbanner.clickable:hover a,.thumbbanner.clickable:hover .buttoncontainer a,.buttoncontainer .thumbbanner.clickable:hover a,.thumbbanner.clickable:hover form button,form .thumbbanner.clickable:hover button,.list .listitem.clickable:hover .button,.list .listitem.clickable:hover .button-inverse,.list .listitem.clickable:hover nav .menu,nav .list .listitem.clickable:hover .menu,.list .listitem.clickable:hover .queue .slide .box a,.queue .slide .box .list .listitem.clickable:hover a,.list .listitem.clickable:hover .buttoncontainer a,.buttoncontainer .list .listitem.clickable:hover a,.list .listitem.clickable:hover form button,form .list .listitem.clickable:hover button {
border-color: #000;
background: #000 url(../img/cta-w.png) no-repeat 100% 50%;
text-decoration: none;
color: #fff
}
.button-inverse,nav .menu,.queue .slide .box a {
color: #fff;
background: transparent url(../img/cta-w.png) no-repeat 100% 50%;
border: 1px solid #fff;
text-decoration: none
}
.button-inverse:hover,nav .menu:hover,.queue .slide .box a:hover,.button-inverse:focus,nav .menu:focus,.queue .slide .box a:focus {
border-color: #000;
background: #fff url(../img/cta.png) no-repeat 100% 50%;
text-decoration: none;
color: #000
}
.queue .slide.clickable:hover a,.banner.clickable:hover a {
border-color: #000;
background: #fff url(../img/cta.png) no-repeat 100% 50%;
text-decoration: none;
color: #000
}
html {
min-height: 100%;
height: 100%
}
body {
-webkit-text-size-adjust: none;
color: #000;
background: #fff;
font-family: "Source Sans Pro",sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 40px;
min-width: 1000px;
min-height: 100%
}
a {
color: #000;
text-decoration: underline
}
a:hover,a:focus {
text-decoration: none
}
form input,form textarea,form select,form button {
font-family: "Source Sans Pro",sans-serif;
font-size: 20px;
font-weight: 400
}
.inner {
width: 960px;
margin: 0 auto;
position: relative;
clear: both
}
#main {
position: relative;
background: #fff;
clear: both;
overflow: hidden
}
.clickable {
cursor: pointer
}
.hr {
display: block;
position: relative;
height: 44px;
width: 960px;
background: url(../img/titlebg.png) no-repeat center;
margin: 0 0 50px;
clear: both
}
header {
position: relative;
background: #000;
min-height: 180px
}
header .menu-overlay {
z-index: 5;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 180px;
background-color: rgba(0,0,0,0.33);
padding: 40px 0;
color: #fff
}
header .menu-overlay img {
border-radius: 100px;
width: 100px;
height: 100px;
float: left;
margin-right: 40px
}
header .menu-overlay h2 {
font-family: 'Source Sans Pro';
color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 30px;
text-align: left;
padding-top: 25px;
margin: 0
}
header .menu-overlay h3 {
font-family: 'Source Sans Pro';
color: #afabac;
font-size: 20px;
font-weight: 400;
line-height: 30px;
text-align: left;
margin: 0
}
header .branding-overlay {
z-index: 4;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 86px;
background: #000;
text-decoration: none;
color: #fff;
text-align: center;
line-height: 86px;
font-family: Oswald;
color: #959595;
font-size: 9px;
font-weight: 400;
text-transform: uppercase
}
header .branding-overlay div.sizer {
display: inline-block;
width: 80px;
height: 86px;
background: url(../img/logo.png) no-repeat left center;
vertical-align: middle
}
header .branding-overlay span {
vertical-align: middle;
display: inline-block;
text-align: left;
height: 86px;
letter-spacing: 2.6px
}
header .branding-overlay b {
color: #fff;
font-weight: 400
}
header .branding-overlay:hover span,header .branding-overlayfocus span {
text-decoration: underline
}
@media screen and (max-aspect-ratio:10/9) {
header {
display: none
}
header .menu-overlay {
display: none
}
}
nav {
position: absolute;
right: 0;
top: 20px
}
nav .menu {
background-image: url(../img/menu-w.png)
}
nav .menu:hover,nav .menu:focus {
background-color: transparent;
border-color: #fff;
background-image: url(../img/menu-w.png);
color: #fff
}
nav.hovered>.menu {
background-color: #fff;
color: #000;
border-color: #000;
background-image: url(../img/menu.png);
border-radius: 4px 4px 0 0;
border-bottom: 0
}
nav.hovered>ul {
display: block
}
nav>ul {
display: none;
width: 360px;
margin: 0 auto;
list-style: none;
text-align: left;
position: absolute;
z-index: 99;
right: 0;
top: 59px;
background: #fff;
border-radius: 4px 0 4px 4px;
border: 1px solid #000
}
nav>ul li {
position: relative
}
nav>ul li a {
font-size: 16px;
display: block;
height: 58px;
line-height: 58px;
font-weight: 400;
text-decoration: none;
background: url(../img/menu-arr.png) no-repeat left center;
text-transform: uppercase;
padding-left: 80px;
border-bottom: 1px solid #000
}
nav>ul li a:focus,nav>ul li a:hover {
text-decoration: none;
background: url(../img/menu-arr-hover.png) no-repeat left center
}
nav>ul li:last-child a {
border-bottom: 0
}
nav>ul li:hover>a {
text-decoration: none;
background: url(../img/menu-arr-hover.png) no-repeat left center
}
nav>ul li ul {
display: block;
background: #F3F3F3;
padding: 20px;
margin: 0;
border-bottom: 1px solid #000
}
nav>ul li ul li {
display: block;
float: none;
width: 100%;
height: 40px;
line-height: 40px
}
nav>ul li ul li a {
border-top: 0;
border-bottom: 1px dotted #999;
line-height: 40px;
height: 40px;
padding-left: 60px;
background: url(../img/menu-arr-small.png) no-repeat left center
}
nav>ul li ul li a:hover {
background: url(../img/menu-arr-small.png) no-repeat 10px center
}
.scrollnav {
z-index: 99;
position: fixed;
left: 0;
top: -80px;
width: 100%;
height: 80px;
background: #000;
line-height: 80px;
padding: 0 23px;
-webkit-transition: 0.3s top ease;
transition: 0.3s top ease
}
.scrollnav.active {
top: 0
}
.scrollnav p {
line-height: 80px;
margin: 0;
padding: 0;
color: rgba(255,255,255,0.42);
font-size: 16px;
font-weight: 400;
letter-spacing: 1.6px;
text-transform: uppercase
}
.scrollnav p img {
vertical-align: middle;
margin-right: 20px;
width: 40px;
height: 40px;
border-radius: 40px
}
.scrollnav p b {
font-weight: 400;
color: #fff;
display: inline-block;
margin-right: 20px
}
.scrollnav nav {
top: 0;
height: 80px
}
.scrollnav .menu {
background-image: none!important;
border: 0;
padding: 0;
border-radius: 0;
border: 0;
top: 0;
height: 80px;
line-height: 80px;
padding-right: 20px
}
.scrollnav .menu img {
vertical-align: baseline;
margin-left: 12px;
width: auto;
height: auto;
border-radius: 0;
float: none;
margin-right: 0
}
.scrollnav .menu:hover {
background: none
}
.scrollnav.hovered .menu {
background: none;
color: #fff;
border-radius: 0;
border: 0
}
.scrollnav.active nav.hovered .menu {
background: none;
color: #fff;
border-radius: 0;
border: 0
}
.scrollnav.active nav.hovered>ul {
display: block
}
.scrollnav nav>ul {
display: none;
width: 360px;
margin: 0 auto;
list-style: none;
text-align: left;
position: absolute;
z-index: 99;
right: 1px;
top: 80px;
background: #fff;
border-radius: 0 0 4px 4px;
border: 1px solid #000
}
.scrollnav nav>ul li {
position: relative
}
.scrollnav nav>ul li a {
font-size: 16px;
display: block;
height: 58px;
line-height: 58px;
font-weight: 400;
text-decoration: none;
background: url(../img/menu-arr.png) no-repeat left center;
text-transform: uppercase;
padding-left: 80px;
border-bottom: 1px solid #000
}
.scrollnav nav>ul li a:focus,.scrollnav nav>ul li a:hover {
text-decoration: none;
background: url(../img/menu-arr-hover.png) no-repeat left center
}
.scrollnav nav>ul li:last-child a {
border-bottom: 0
}
.scrollnav nav>ul li:hover>a {
text-decoration: none;
background: url(../img/menu-arr-hover.png) no-repeat left center
}
.scrollnav nav>ul li ul {
display: block;
background: #F3F3F3;
padding: 20px;
margin: 0;
border-bottom: 1px solid #000
}
.scrollnav nav>ul li ul li {
display: block;
float: none;
width: 100%;
height: 40px;
line-height: 40px
}
.scrollnav nav>ul li ul li a {
border-top: 0;
border-bottom: 1px dotted #999;
line-height: 40px;
height: 40px;
padding-left: 60px;
background: url(../img/menu-arr-small.png) no-repeat left center
}
.scrollnav nav>ul li ul li a:hover {
background: url(../img/menu-arr-small.png) no-repeat 10px center
}
@media screen and (max-aspect-ratio:10/9) {
.scrollnav {
width: 500px;
top: 0
}
.scrollnav p {
padding-top: 20px;
padding-left: 50px;
line-height: 20px;
color: #afabac;
font-size: 12px
}
.scrollnav p img {
position: absolute;
top: 20px;
left: 20px
}
.scrollnav p b {
display: block;
color: #fff;
font-size: 16px
}
.scrollnav nav .menu,.scrollnav nav:hover .menu {
color: #fff
}
.scrollnav nav.hovered .menu {
background: none;
color: #fff;
border-radius: 0;
border: 0
}
.scrollnav nav.hovered>ul {
display: block
}
}
footer {
position: relative;
background: #000;
clear: both;
height: 86px;
overflow: hidden
}
footer .branding-overlay {
z-index: 51;
width: 100%;
display: block;
height: 86px;
background: #000;
text-decoration: none;
color: #fff;
text-align: center;
line-height: 86px;
font-family: Oswald;
color: #959595;
font-size: 9px;
font-weight: 400;
text-transform: uppercase
}
footer .branding-overlay div.sizer {
display: inline-block;
width: 80px;
height: 86px;
background: url(../img/logo.png) no-repeat left center;
vertical-align: middle
}
footer .branding-overlay span {
vertical-align: middle;
display: inline-block;
text-align: left;
height: 86px;
letter-spacing: 2.6px
}
footer .branding-overlay b {
color: #fff;
font-weight: 400
}
footer .branding-overlay:hover span,footer .branding-overlayfocus span {
text-decoration: underline
}
.queue {
position: relative;
width: 100%;
background: #000;
margin-bottom: 80px;
min-height: 562px
}
.queue .slide {
position: absolute;
color: #fff;
width: 100%!important;
min-height: 100%;
background-position: center;
background-size: cover;
overflow: hidden;
left: 0!important;
top: 0!important;
text-align: center
}
.queue .slide:before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
content: " ";
background: rgba(0,0,0,0.5) url(../img/gridoverlay.png) repeat center;
opacity: 0.5
}
.queue .slide .box {
width: 960px;
position: absolute;
left: 50%;
top: 30%;
margin-left: -480px
}
.queue .slide .box h1 {
font-family: Oswald;
color: #fff;
font-size: 50px;
font-weight: 400;
line-height: 56px;
text-align: center;
text-shadow: 0 1px 0 #282219;
text-transform: uppercase;
letter-spacing: 2px
}
.queue .slide .box a {
margin: 0 auto;
display: inline-block
}
.queue .menu-overlay {
bottom: 0px
}
@media screen and (max-height:600px) {
.queue .slide .box {
top: 10%
}
}
@media screen and (max-aspect-ratio:10/9) {
.queue {
display: block;
margin-bottom: 80px
}
.queue .slide .box {
width: 500px;
left: 0;
margin-left: 0;
padding: 0 20px;
line-height: 36px
}
.queue .slide .box h1 {
font-size: 28px
}
}
.detailqueue {
width: 100%;
height: 510px;
position: relative;
overflow: hidden
}
.detailqueue .slide {
height: 510px!important;
width: 100%!important;
background-size: cover;
background-position: center
}
@media screen and (max-aspect-ratio:10/9) {
.detailqueue {
height: 266px
}
.detailqueue .slide {
height: 266px!important
}
}
.intro {
position: relative;
background: #fff;
margin: 0 auto;
text-align: center;
padding: 0 50px
}
.intro p {
margin-bottom: 40px
}
.buttoncontainer {
position: relative;
text-align: center;
padding-bottom: 80px;
overflow: hidden
}
.buttoncontainer a {
text-align: left
}
.fullsizer {
position: relative;
overflow: hidden;
background: #e5eff6;
padding-top: 60px;
padding-bottom: 80px;
margin-bottom: 80px
}
.fullsizer .inner .title {
margin-bottom: 30px
}
.fullsizer .inner .title h2 {
font-size: 20px;
font-weight: 600;
line-height: 18px;
text-align: center
}
.fullsizer .inner .title h2:after {
background-image: url(../img/lighttop.png);
margin-bottom: 20px
}
.fullsizer .inner .slider {
height: 100px;
width: 960px
}
.fullsizer .inner .slider .bar {
width: 960px
}
.fullsizer .inner .slider .bar img {
vertical-align: middle;
padding: 0 40px
}
.fullsizer .inner .slider-sliderNext {
display: block;
background: #000 url(../img/arrow-white.png) no-repeat center;
width: 50px;
height: 50px;
position: absolute;
right: -60px;
margin-top: -75px;
cursor: pointer;
z-index: 99
}
.fullsizer .inner .slider-sliderNext:hover {
background-color: #e89d44
}
.fullsizer .inner .slider-sliderPrev {
display: block;
width: 50px;
height: 50px;
background: #000 url(../img/prev.png) no-repeat center;
position: absolute;
left: -60px;
margin-top: -75px;
cursor: pointer;
z-index: 99
}
.fullsizer .inner .slider-sliderPrev:hover {
background-color: #e89d44
}
@media screen and (max-aspect-ratio:10/9) {
.fullsizer .inner {
width: 362px;
min-width: 362px
}
.fullsizer .inner .slider {
width: 362px
}
.fullsizer .inner .slider-sliderNext {
right: -50px
}
.fullsizer .inner .slider-sliderPrev {
left: -50px
}
}
.thumbs {
clear: both;
position: relative;
overflow: hidden;
margin-left: -30px;
margin-top: -30px;
margin-bottom: 35px
}
.thumbs .thumb {
position: relative;
overflow: hidden;
width: 300px;
height: 240px;
margin-left: 30px;
margin-top: 30px;
margin-bottom: 45px;
float: left
}
.thumbs .thumb img {
width: 150px;
height: 150px;
display: block;
border-radius: 150px;
margin: 0 auto 40px
}
.thumbs .thumb .txt {
position: relative;
display: block;
text-decoration: none;
text-align: center;
height: 50px;
line-height: 25px;
color: #afabac;
font-weight: 400
}
.thumbs .thumb .txt b {
font-weight: 600;
color: #000;
display: block;
text-align: center
}
.thumbs .thumb.clickable:hover div.overlay {
position: absolute;
left: 50%;
margin-left: -75px;
top: 0;
width: 150px;
height: 150px;
background: rgba(0,0,0,0.5) url(../img/additional-overlay.png) no-repeat center;
border-radius: 150px
}
@media screen and (max-aspect-ratio:10/9) {
.thumbs:after {
content: " ";
display: block;
clear: both;
width: 342px;
height: 1px;
margin: 80px auto 60px;
background-color: rgba(0,0,0,0.22)
}
}
.thumbbanner {
position: relative;
width: 440px;
margin-bottom: 80px
}
.thumbbanner img {
width: 440px;
display: block
}
.thumbbanner .txtcontainer {
border: 1px dotted rgba(0,0,0,0.4);
border-top: 0;
border-radius: 0 0 4px 4px;
text-align: center;
opacity: .8;
padding-bottom: 50px
}
.thumbbanner .txtcontainer .title {
margin-top: 0
}
.thumbbanner .txtcontainer h2 {
font-size: 30px;
padding-top: 40px
}
@media screen and (max-aspect-ratio:10/9) {
.thumbbanner {
margin: 0 auto 80px
}
}
.banner {
clear: both;
position: relative;
overflow: hidden;
height: 510px;
background: url(../img/bannerbg.png) no-repeat center;
margin-bottom: 80px
}
.banner.parallax {
background-attachment: fixed
}
.banner.parallax:before {
background-attachment: fixed
}
@media screen and (orientation:landscape) and (max-width:1000px) {
.banner {
background-size: cover;
background-attachment: initial
}
.banner.parallax {
background-size: cover;
background-attachment: initial
}
}
.banner:before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
content: " ";
background: rgba(0,0,0,0.5) url(../img/gridoverlay.png) repeat center;
opacity: 0.5
}
.banner .inner {
padding-top: 140px;
text-align: center
}
.banner h2 {
margin: 0 auto;
max-width: 500px;
font-family: Oswald;
color: #fff;
font-size: 32px;
font-weight: 400;
line-height: 40px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px
}
.banner h2:after {
oposition: relative;
display: block;
content: " ";
background-color: rgba(0,0,0,0.22);
width: 120px;
height: 1px;
margin: 40px auto 40px
}
@media screen and (max-aspect-ratio:10/9) {
.banner {
margin-bottom: 80px;
height: 365px;
background-size: cover
}
.banner .inner {
padding-top: 80px
}
.banner.parallax {
background-attachment: initial;
background-size: cover
}
.banner.parallax:before {
background-attachment: initial
}
}
.breadcrumb {
position: relative;
height: 40px;
line-height: 40px
}
.breadcrumb .inner div,.breadcrumb .inner a {
display: inline-block
}
.breadcrumb .inner a {
color: #999;
font-weight: 400;
font-size: 14px;
background: url(../img/arrow-breadcrumb.png) no-repeat left center;
padding-left: 15px;
line-height: 40px;
padding-right: 8px
}
.breadcrumb .inner a.current {
color: #000
}
.breadcrumb .inner a:hover,.breadcrumb .inner a:focus {
text-decoration: none;
color: #000
}
.breadcrumb .inner span:first-child a {
padding-left: 0;
background: none
}
@media screen and (max-aspect-ratio:10/9) {
.breadcrumb {
display: none
}
}
h4 {
text-align: center;
font-family: Oswald;
color: #888;
font-size: 11px;
font-weight: 400;
line-height: 118px;
text-transform: uppercase;
margin-bottom: 80px;
letter-spacing: 2px
}
h4:after,h4:before {
content: " ";
display: block;
margin: 0 auto;
width: 120px;
height: 1px;
background: rgba(0,0,0,0.2)
}
.cmscontent {
position: relative;
margin: 0 auto;
color: #555;
line-height: 40px
}
.cmscontent.centered {
text-align: center
}
.cmscontent.article .title {
margin-bottom: 40px
}
@media screen and (max-aspect-ratio:10/9) {
.cmscontent.article .page-container {
margin-bottom: 0
}
}
.cmscontent h1,.cmscontent h2 {
font-family: Oswald;
color: #000;
font-size: 30px;
font-weight: 400;
line-height: 1;
text-align: left;
margin-bottom: 35px
}
.cmscontent h3 {
color: #000;
font-size: 20px;
font-weight: 600;
line-height: 30px;
text-align: left;
margin-bottom: 35px
}
.cmscontent blockquote {
width: 100%;
background: #000;
overflow: hidden;
position: relative;
margin-bottom: 40px;
padding: 80px 100px
}
.cmscontent blockquote p {
font-family: Oswald;
color: #fff;
font-size: 32px;
font-weight: 400;
line-height: 40px;
text-align: center;
margin: 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 2px
}
.cmscontent blockquote p:after {
content: " ";
display: block;
margin: 38px auto 0;
width: 120px;
height: 1px;
background: rgba(255,255,255,0.22)
}
.cmscontent ul {
margin: 0 0 40px;
padding: 0
}
.cmscontent ul li {
list-style: none;
background: url(../img/li.png) no-repeat 22px 10px;
padding-left: 70px
}
.cmscontent table {
width: 100%;
margin-bottom: 35px;
border: 1px solid #d6d6d6;
background: #fff
}
.cmscontent table td {
border: 1px solid #e7e7e8;
padding: 5px 20px;
line-height: 30px
}
.cmscontent table th {
padding: 5px 20px;
line-height: 30px;
border: 1px solid #000;
background: #000;
color: #fff;
text-align: left;
font-weight: normal
}
.cmscontent .page-container {
overflow: hidden;
padding: 0 75px 50px
}
.left {
position: relative;
width: 440px;
float: left
}
.right {
position: relative;
width: 440px;
float: right
}
.left .page-container,.right .page-container {
padding: 0 0 50px
}
.left blockquote,.right blockquote {
padding: 40px 20px
}
.left blockquote p,.right blockquote p {
font-size: 24px;
line-height: 36px;
text-align: center
}
.left>img,.right>img,.cmscontent>img {
max-width: 100%;
margin-bottom: 30px;
display: block
}
.title {
position: relative;
text-align: center;
margin: 80px auto 80px
}
.title h1,.title h2 {
font-family: Oswald;
color: #000;
font-size: 32px;
font-weight: 400;
line-height: 40px;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 0;
letter-spacing: 2px
}
.title.subtitle h2,.title h3 {
font-family: Oswald;
color: #888;
font-size: 11px;
font-weight: 400;
line-height: 1;
text-align: center;
margin: 15px 0 0;
letter-spacing: 2px;
text-transform: uppercase
}
.title.subtitle h2:after,.title h3:after {
content: " ";
display: block;
position: relative;
margin: 40px auto 80px;
width: 120px;
height: 1px;
background-color: rgba(0,0,0,0.2)
}
.title p {
max-width: 820px;
margin: 0 auto 40px;
color: #555;
font-size: 20px;
font-weight: 400;
line-height: 40px;
text-align: center
}
@media screen and (max-aspect-ratio:10/9) {
.title {
padding: 0 25px;
margin-bottom: 80px
}
}
.sidekick {
position: relative;
width: 960px;
margin-bottom: 80px
}
.sidekick>img {
display: block;
width: 960px;
margin-bottom: 1px
}
.sidekick .sidekickcontent {
border-width: 1px;
border-color: rgba(0,0,0,0.3);
border-style: dotted;
padding: 0 70px 50px
}
.right .sidekick,.left .sidekick {
width: 440px
}
.right .sidekick>img,.left .sidekick>img {
display: block;
width: 440px
}
.right .sidekick .sidekickcontent,.left .sidekick .sidekickcontent {
padding: 0 30px 40px
}
@media screen and (max-aspect-ratio:10/9) {
.right .sidekick,.left .sidekick {
width: 460px;
margin: 0 auto 80px
}
.right .sidekick>img,.left .sidekick>img {
display: block;
width: 460px
}
.right .sidekick .sidekickcontent,.left .sidekick .sidekickcontent {
padding: 0 20px 40px
}
}
@media screen and (max-aspect-ratio:10/9) {
.sidekick {
width: 460px;
margin: 0 auto 80px
}
.sidekick>img {
display: block;
width: 460px
}
.sidekick .sidekickcontent {
padding: 0 20px 40px
}
}
.ckTabs {
margin-bottom: 30px
}
.ckTabs .tabContent {
border: 1px solid #ccc;
background-color: #f0f0f0;
border-radius: 0;
padding: 29px 29px 0;
margin-top: -1px
}
.ckTabs .tabContent .tab {
display: none
}
.ckTabs .tabHeader ul {
list-style: none;
padding: 0;
margin: 0;
height: 43px;
overflow: hidden
}
.ckTabs .tabHeader ul li {
padding: 0;
background: none;
float: left;
display: inline
}
.ckTabs .tabHeader ul li+li {
margin-left: 10px
}
.ckTabs .tabHeader ul li a {
display: block;
background: none;
padding: 0 20px;
border-radius: 0 0 0 0;
border: 1px solid #ccc;
border-bottom: 0;
height: 43px;
line-height: 43px;
color: inherit;
text-decoration: none
}
.ckTabs .tabHeader ul li a:hover,.ckTabs .tabHeader ul li a:focus {
color: #000
}
.ckTabs .tabHeader ul li.activeTab a {
color: #000;
font-weight: 600;
background: #f0f0f0
}
@media screen and (max-aspect-ratio:10/9) {
.ckTabs .tabHeader ul {
height: auto
}
.ckTabs .tabHeader ul li {
float: none;
display: block
}
.ckTabs .tabHeader ul li+li {
margin: 0
}
.ckTabs .tabHeader ul li a {
border-radius: 0
}
}
.left .tabHeader ul,.right .tabHeader ul {
height: auto
}
.left .tabHeader ul li,.right .tabHeader ul li {
float: none;
display: block
}
.left .tabHeader ul li+li,.right .tabHeader ul li+li {
margin: 0
}
.left .tabHeader ul li a,.right .tabHeader ul li a {
border-radius: 0
}
.gallery-container {
margin: 0 auto 80px
}
.gallery {
overflow: hidden;
width: 960px;
height: 640px
}
.gallery a {
width: 960px!important;
height: 640px!important;
display: block;
float: left;
position: relative
}
.gallery img {
width: 100%!important;
height: 100%!important
}
.right .gallery,.left .gallery {
position: relative;
width: 440px;
height: 300px;
overflow: hidden;
margin-bottom: 40px
}
.right .gallery a,.left .gallery a {
margin: 0;
width: 440px!important;
height: 300px!important
}
.gallery-sliderNext {
display: block;
width: 50px;
height: 50px;
background: #000 url(../img/next.png) no-repeat center;
position: absolute;
right: 0;
margin-top: -350px;
cursor: pointer;
z-index: 99;
box-shadow: 0 1px 0 0 rgba(255,255,255,0.25);
border-radius: 2px 0 0 2px
}
.gallery-sliderNext:hover {
background: #fff url(../img/next-hover.png) no-repeat center;
box-shadow: 0 1px 0 0 rgba(0,0,0,0.25)
}
.right .gallery-sliderNext,.left .gallery-sliderNext {
margin-top: -215px
}
.gallery-sliderPrev {
display: block;
width: 50px;
height: 50px;
background: #000 url(../img/prev.png) no-repeat center;
position: absolute;
left: 0;
margin-top: -350px;
cursor: pointer;
z-index: 99;
box-shadow: 0 1px 0 0 rgba(255,255,255,0.25);
border-radius: 0 2px 2px 0
}
.gallery-sliderPrev:hover {
background: #fff url(../img/prev-hover.png) no-repeat center;
box-shadow: 0 1px 0 0 rgba(0,0,0,0.25)
}
.right .gallery-sliderPrev,.left .gallery-sliderPrev {
margin-top: -215px
}
@media screen and (max-aspect-ratio:10/9) {
.gallery-container {
position: relative;
width: 500px;
margin: auto
}
.gallery,.right .gallery,.left .gallery {
position: relative;
width: 500px;
height: 333px;
margin-bottom: 80px
}
.gallery a,.gallery img,.right .gallery a,.right .gallery img,.left .gallery a,.left .gallery img {
width: 500px!important;
height: 333px!important
}
.gallery-sliderNext,.left .gallery-sliderNext,.right .gallery-sliderNext {
margin-top: -265px
}
.gallery-sliderPrev,.left .gallery-sliderPrev,.right .gallery-sliderPrev {
margin-top: -265px
}
}
.additionals-container {
margin-bottom: 80px
}
.additionals {
position: relative;
margin-left: -80px;
margin-top: -40px;
overflow: hidden
}
.additionals .additional {
position: relative;
float: left;
margin: 40px 0 0 80px;
width: 440px;
border: 1px solid #000;
border-radius: 4px;
height: 100px;
overflow: hidden
}
.additionals .additional img {
float: left;
width: 150px;
height: 100px;
padding-right: 1px;
background: url(../img/additional-dots.png) no-repeat 100% 0;
margin-right: 25px
}
.additionals .additional.clickable:hover .overlay {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 100px;
padding-right: 1px;
background: rgba(0,0,0,0.5) url(../img/additional-overlay.png) no-repeat center
}
.additionals .additional h3 {
padding-top: 20px;
font-family: 'Source Sans Pro';
color: #000;
font-size: 20px;
font-weight: 400;
margin-bottom: 0
}
.additionals .additional h3 a {
text-decoration: none
}
@media screen and (max-aspect-ratio:10/9) {
.additionals {
width: 440px;
margin: -40px auto 0
}
.additionals .additional {
margin-left: 0
}
}
.downloads {
position: relative;
overflow: hidden;
margin-bottom: 80px;
margin-left: -80px;
margin-top: -40px
}
.downloads p {
width: 440px;
float: left;
margin: 0;
margin-left: 80px;
margin-top: 40px;
height: 60px;
font-size: 16px
}
.downloads p a {
height: 60px;
line-height: 60px;
display: inline-block;
width: 440px;
background: url(../img/download.png) no-repeat 100% 0;
border: 1px solid #000;
border-radius: 4px;
text-decoration: none;
padding-left: 30px;
padding-right: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: uppercase
}
.downloads p a:hover,.downloads p a:focus {
text-decoration: none;
background: url(../img/download-hover.png) no-repeat 100% 0
}
@media screen and (max-aspect-ratio:10/9) {
.downloads {
width: 440px;
margin-left: auto;
margin-right: auto
}
.downloads p {
margin-left: 0
}
}
.links {
position: relative;
overflow: hidden;
margin-bottom: 80px;
margin-left: -80px;
margin-top: -40px
}
.links p {
width: 440px;
float: left;
margin: 0;
margin-left: 80px;
margin-top: 40px;
height: 60px;
font-size: 16px
}
.links p a {
height: 60px;
line-height: 60px;
display: inline-block;
width: 440px;
background: url(../img/link.png) no-repeat 100% 0;
border: 1px solid #000;
border-radius: 4px;
text-decoration: none;
padding-left: 30px;
padding-right: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: uppercase
}
.links p a span {
color: #c1c1c1
}
.links p a:hover,.links p a:focus {
text-decoration: none;
background: url(../img/link-hover.png) no-repeat 100% 0
}
@media screen and (max-aspect-ratio:10/9) {
.links {
width: 440px;
margin-left: auto;
margin-right: auto
}
.links p {
margin-left: 0
}
}
.horizontalForm>fieldset {
margin: 0;
padding: 0
}
.horizontalForm input,.horizontalForm textarea,.horizontalForm iframe {
float: left;
width: 450px;
margin: 0;
height: 50px;
font-size: 16px;
font-weight: 400;
line-height: auto;
padding: 0 18px;
background: #fff;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 4px;
margin-bottom: 10px
}
.horizontalForm iframe {
height: 40px;
padding-top: 15px;
padding-left: 0;
padding-right: 0;
float: left
}
.ui-datepicker-trigger {
display: block;
float: right;
margin-top: -59px;
margin-right: 25px;
cursor: pointer
}
.horizontalForm select {
float: left;
margin: 0;
padding: 0;
background: #fff;
width: 450px;
height: 50px;
line-height: 45px;
font-size: 16px;
vertical-align: middle;
padding-left: 9px;
margin-bottom: 5px;
border-radius: 0;
background: #fff;
border: 1px solid #e7e7e8
}
.horizontalForm label,.horizontalForm legend,.horizontalForm p {
clear: left;
float: left;
width: 110px;
padding: 0;
line-height: 25px;
margin: 12px 0 12px;
padding-right: 5px;
font-family: 'Source Sans Pro';
color: #000;
font-size: 20px;
font-weight: 600;
line-height: 25px
}
.horizontalForm p {
width: auto;
font-weight: 400;
margin-top: 0;
line-height: 60px
}
.horizontalForm label input {
height: 1em;
line-height: 1.5em;
width: auto;
margin: 1em 0.5em 0 0;
font-size: 16px
}
.horizontalForm label.singleLine {
clear: both;
float: none;
height: 50px;
width: 100%;
padding: 0 0 0 164px;
line-height: 50px;
font-weight: 400
}
.horizontalForm textarea {
height: 6em;
padding: 10px
}
.horizontalForm fieldset.horizontal label {
display: inline-block;
clear: none;
float: none;
padding-right: 5px
}
.horizontalForm a {
color: #000;
text-decoration: underline
}
.horizontalForm a:hover {
text-decoration: none
}
fieldset fieldset {
padding-left: 164px;
position: relative;
margin-bottom: 10px
}
.horizontalForm fieldset fieldset legend {
position: absolute;
left: 0;
top: 0;
font-family: 'Source Sans Pro';
color: #000;
font-size: 20px;
font-weight: 600;
line-height: 25px;
width: 140px
}
.horizontalForm fieldset fieldset label {
line-height: 24px;
width: auto;
color: #000;
padding: 0;
margin: 0
}
.horizontalForm fieldset fieldset input {
margin-top: 0.25em
}
label.error,legend.error {
color: #f00
}
input.error,textarea.error,select.error {
color: #f00;
border-color: #f00
}
input.catcher {
visibility: hidden;
position: absolute;
left: -9999em
}
form button {
margin-left: 140px;
width: 375px;
font-size: 16px;
text-align: left;
padding-left: 40px;
color: #000
}
.horizontalForm.sidebar {
border: 1px dotted rgba(0,0,0,0.2);
border-radius: 4px;
width: 440px;
background-color: #fff;
margin-bottom: 80px
}
.horizontalForm.sidebar h3 {
line-height: 90px;
border-bottom: 1px solid rgba(128,128,128,0.22);
padding-left: 20px;
font-family: 'Source Sans Pro';
color: #000;
font-size: 16px;
font-weight: 400;
letter-spacing: 1.6px;
text-align: left;
text-transform: uppercase;
margin: 0;
border-right: 1px dotted rgba(0,0,0,0.11)
}
.horizontalForm.sidebar>fieldset {
padding: 30px 20px
}
.horizontalForm.sidebar label,.horizontalForm.sidebar legend {
width: 120px
}
.horizontalForm.sidebar input,.horizontalForm.sidebar select,.horizontalForm.sidebar textarea,.horizontalForm.sidebar iframe {
width: 278px
}
.horizontalForm.sidebar label input {
width: auto
}
.horizontalForm.sidebar fieldset fieldset {
padding-left: 120px;
line-height: 25px;
padding-top: 10px
}
.horizontalForm.sidebar fieldset fieldset label {
line-height: 25px;
width: auto;
font-weight: 400
}
.horizontalForm.sidebar button {
width: 278px;
margin-left: 120px;
margin-top: 0;
margin-bottom: 0;
padding-left: 28px
}
.horizontalForm.sidebar .singleLine {
display: block;
padding-left: 120px;
width: auto;
height: auto;
line-height: 1.2;
margin-bottom: 10px
}
.horizontalForm.sidebar .singleLine input {
margin-top: 4px;
margin-bottom: 0.5em
}
@media screen and (max-aspect-ratio:10/9) {
.horizontalForm.sidebar {
width: 460px;
margin: 0 auto 80px
}
}
.formcontainer {
width: 960px;
overflow: hidden;
margin-bottom: 80px;
border-radius: 4px;
border: 1px dotted rgba(0,0,0,0.2);
background: rgba(25,25,25,0.05)
}
.formcontainer .aside {
width: 340px;
float: right;
padding: 0
}
.formcontainer .aside h4 {
line-height: 90px;
border-bottom: 1px solid rgba(128,128,128,0.22);
padding-left: 50px;
font-family: 'Source Sans Pro';
color: #000;
font-size: 16px;
font-weight: 400;
letter-spacing: 1.6px;
text-align: left;
text-transform: uppercase;
margin: 0
}
.formcontainer .aside h4:before,.formcontainer .aside h4:after {
display: none
}
.formcontainer .aside p {
padding: 40px 40px 0;
margin: 0
}
.formcontainer .aside p .button,.formcontainer .aside p .button-inverse,.formcontainer .aside p nav .menu,nav .formcontainer .aside p .menu,.formcontainer .aside p .queue .slide .box a,.queue .slide .box .formcontainer .aside p a,.formcontainer .aside p .buttoncontainer a,.buttoncontainer .formcontainer .aside p a,.formcontainer .aside p form button,form .formcontainer .aside p button {
background-image: url(../img/tel-btn.png)
}
.formcontainer .aside p .button:hover,.formcontainer .aside p .button-inverse:hover,.formcontainer .aside p nav .menu:hover,nav .formcontainer .aside p .menu:hover,.formcontainer .aside p .queue .slide .box a:hover,.queue .slide .box .formcontainer .aside p a:hover,.formcontainer .aside p .buttoncontainer a:hover,.buttoncontainer .formcontainer .aside p a:hover,.formcontainer .aside p form button:hover,form .formcontainer .aside p button:hover,.formcontainer .aside p .button:focus,.formcontainer .aside p .button-inverse:focus,.formcontainer .aside p nav .menu:focus,nav .formcontainer .aside p .menu:focus,.formcontainer .aside p .queue .slide .box a:focus,.queue .slide .box .formcontainer .aside p a:focus,.formcontainer .aside p .buttoncontainer a:focus,.buttoncontainer .formcontainer .aside p a:focus,.formcontainer .aside p form button:focus,form .formcontainer .aside p button:focus {
background-image: url(../img/tel-btn-hover.png)
}
.formcontainer form {
float: left;
width: 618px;
border-top: 0;
background: #fff
}
.formcontainer form h3 {
line-height: 90px;
border-bottom: 1px solid rgba(128,128,128,0.22);
padding-left: 70px;
font-family: 'Source Sans Pro';
color: #000;
font-size: 16px;
font-weight: 400;
letter-spacing: 1.6px;
text-align: left;
text-transform: uppercase;
margin: 0;
border-right: 1px dotted rgba(0,0,0,0.11)
}
.formcontainer form fieldset {
padding: 40px 25px 40px 70px;
border-right: 1px dotted rgba(0,0,0,0.11)
}
.formcontainer form label,.formcontainer form legend {
width: 140px
}
.formcontainer form label input,.formcontainer form legend input {
width: auto
}
.formcontainer form fieldset fieldset,.formcontainer form label.singleLine {
width: auto;
padding: 0 0 0 140px;
line-height: 25px
}
.formcontainer form fieldset fieldset label,.formcontainer form label.singleLine label {
font-weight: 400
}
.formcontainer form fieldset fieldset {
padding-top: 10px
}
.formcontainer form label.singleLine {
line-height: 50px
}
.formcontainer form input,.formcontainer form select,.formcontainer form textarea,.formcontainer form iframe {
width: 375px
}
.formcontainer .datepicker {
margin-right: 10px
}
@media screen and (max-aspect-ratio:10/9) {
.formcontainer {
padding-bottom: 0;
background: none;
width: 460px;
margin: 0 auto 80px
}
.formcontainer .aside {
width: 100%;
background: #f3f3f3;
padding-bottom: 40px
}
.formcontainer .horizontalForm {
width: 460px
}
.formcontainer .horizontalForm>fieldset {
padding: 30px 40px 40px
}
.formcontainer .horizontalForm label,.formcontainer .horizontalForm legend {
width: 110px
}
.formcontainer .horizontalForm input,.formcontainer .horizontalForm select,.formcontainer .horizontalForm textarea,.formcontainer .horizontalForm iframe {
width: 266px
}
.formcontainer .horizontalForm label input {
width: auto
}
.formcontainer .horizontalForm fieldset fieldset {
padding-left: 120px
}
.formcontainer .horizontalForm fieldset fieldset label {
width: auto
}
.formcontainer .horizontalForm .ui-datepicker-trigger {
margin-right: 50px
}
.formcontainer .horizontalForm button {
width: 266px;
margin-left: 110px;
margin-top: 25px;
margin-bottom: 0
}
.formcontainer .horizontalForm .singleLine {
display: block;
padding-left: 120px;
width: auto;
height: auto;
line-height: 1.2;
margin-bottom: 10px
}
.formcontainer .horizontalForm .singleLine input {
margin-top: 4px;
margin-bottom: 0.5em
}
}
.relatedlinks h3 {
color: #e89d44;
font-size: 20px;
font-weight: 600;
line-height: 24px;
text-align: left
}
.relatedlinks ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
border-top: 0
}
.relatedlinks ul li {
list-style: none;
background: none;
padding: 0;
width: 50%;
float: left
}
.relatedlinks ul li a {
display: block;
color: #fff;
height: 40px;
line-height: 40px;
background: url(../img/footerli.png) no-repeat left center;
padding-left: 21px;
text-decoration: none!important
}
.relatedlinks ul li a:hover,.relatedlinks ul li a:focus {
text-decoration: none!important;
background-image: url(../img/footerli-hover.png)
}
.authors {
padding-bottom: 60px
}
.authors .author {
width: 450px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 0;
background: #fff;
border: 1px solid #ccc;
margin-bottom: 20px;
padding-right: 80px
}
.authors .author.clickable:hover {
border-color: #aaa
}
.authors .author img {
float: left;
width: 100px;
height: 100px;
margin-right: 20px
}
.authors .author h3 {
color: #000;
font-size: 16px;
font-weight: 700;
line-height: 50px;
text-align: left;
margin: 20px 0 10px;
line-height: 1
}
.authors .author h3 a {
text-decoration: none
}
.authors .author h4 {
color: #000;
font-size: 14px;
font-weight: 300;
line-height: 1;
text-transform: none;
text-align: left;
margin: 0 0 8px
}
.authors .author h4:after {
display: none
}
.authors .author .social a {
display: block;
float: left;
width: 24px;
height: 24px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
border-radius: 0;
text-indent: -9999em
}
.authors .author .social a.linkedin {
background-image: url(../img/linkedin.png)
}
.authors .author .social a.tel {
background-image: url(../img/tel-small.png)
}
.authors .author .social a.mail {
background-image: url(../img/email.png)
}
.authors .author .social a+a {
margin-left: 6px
}
.authors .author .social a:hover,.authors .author .social a:focus {
background-color: #000
}
.left .authors,.right .authors {
padding-bottom: 10px
}
.list .listitem {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 80px;
padding-bottom: 80px;
border-bottom: 1px solid #cecece
}
.list .listitem img {
float: left;
width: 560px;
height: 373px
}
.list .listitem:nth-child(even) img {
float: right
}
.list .listitem:nth-child(even) .txtcontainer {
padding-left: 0;
padding-right: 30px
}
.list .listitem .txtcontainer {
float: left;
width: 400px;
padding: 35px 0 0 30px;
text-align: center
}
.list .listitem .txtcontainer h3 {
font-family: Oswald;
color: #000;
font-size: 32px;
font-weight: 400;
line-height: 40px;
text-align: left;
text-transform: uppercase;
margin: 0;
letter-spacing: 2px
}
.list .listitem .txtcontainer h3 a {
color: #000;
text-decoration: none
}
.list .listitem .txtcontainer h3:after {
display: block;
content: " ";
background-color: rgba(0,0,0,0.22);
width: 120px;
height: 1px;
margin: 10px 0 35px
}
.list .listitem .txtcontainer p {
font-family: 'Source Sans Pro';
color: #000;
font-size: 20px;
font-weight: 400;
line-height: 30px;
text-align: left
}
@media screen and (max-aspect-ratio:10/9) {
.list .listitem {
width: 500px;
margin-left: auto;
margin-right: auto;
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 45px
}
.list .listitem:nth-child(even) img {
float: none
}
.list .listitem img {
height: 300px;
float: none;
display: block
}
.list .listitem .txtcontainer {
width: 340px;
float: none;
margin: 0 auto;
padding-top: 80px;
padding-left: 0;
padding-right: 0
}
.list .listitem:last-child:after {
content: " ";
display: block;
width: 342px;
height: 1px;
margin: 80px auto 60px;
background-color: rgba(0,0,0,0.22)
}
}
.pagination {
clear: both;
overflow: hidden;
text-align: center;
height: 60px;
line-height: 60px;
font-size: 16px;
color: rgba(0,0,0,0.5);
margin: 0 auto 80px;
border: 1px solid #000;
display: block;
width: 220px;
border-radius: 4px
}
.pagination a {
display: inline-block
}
.pagination span {
display: inline-block;
padding: 0 0
}
.pagination a:hover,.pagination a:focus {
color: #000;
text-decoration: none
}
.pagination .prev {
float: left;
text-indent: -9999em;
display: inline-block;
width: 60px;
height: 60px;
border-right: 1px dotted #000;
background: url(../img/prev-hover.png) no-repeat center;
text-align: left;
margin-left: 0;
margin-right: 0
}
.pagination .prev:hover,.pagination .prev:focus {
background: #000 url(../img/prev.png) no-repeat center
}
.pagination .next {
float: right;
text-indent: -9999em;
display: inline-block;
width: 60px;
height: 60px;
background: url(../img/next-hover.png) no-repeat center;
border-left: 1px dotted #000;
text-align: left;
margin-right: 0;
margin-left: 0
}
.pagination .next:hover,.pagination .next:focus {
background: #000 url(../img/next.png) no-repeat center
}
.left .pagination,.right .pagination {
width: 440px
}
@media screen and (max-aspect-ratio:10/9) {
.pagination {
width: 342px;
margin-bottom: 80px
}
}
.filter {
z-index: 4;
width: 100%;
height: 50px;
line-height: 50px;
position: relative;
margin: -153px 0 40px;
clear: both;
font-size: 16px
}
.filter form {
position: relative;
width: 100%;
border: 1px solid #afafaf;
border-radius: 4px;
height: 60px;
margin-bottom: 53px
}
.filter form input {
background: transparent;
bordeR: 0;
height: 60px;
line-height: 60px;
color: #fff;
text-transform: uppercase;
width: 80%;
float: left;
margin: 0;
padding: 0;
padding-left: 20px;
font-size: 16px
}
.filter form input:hover,.filter form input:active {
background: transparent
}
.filter form button {
border-radius: 0;
border: 0;
text-indent: -9999em;
float: right;
height: 58px;
margin: 0;
padding: 0;
width: 60px;
background: url(../img/search.png) no-repeat left center
}
.filter form:hover button,.filter form input:focus+button,.filter form button:hover,.filter form button:active {
background: #fff url(../img/search-hover.png) no-repeat left center
}
.filter .selector {
position: relative;
height: 60px;
line-height: 0;
float: left;
width: 300px;
border: 1px solid #000;
border-radius: 4px;
cursor: pointer;
background: url(../img/download.png) no-repeat top right
}
.filter .selector+.selector {
margin-left: 30px
}
.filter .selector .type {
text-transform: uppercase;
width: 240px;
line-height: 60px;
height: 60px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 30px;
padding-left: 20px;
background: url(../img/dropdown.png) no-repeat 146px center
}
.filter .selector ul {
display: none
}
.filter .selector.hovered {
z-index: 20;
border-color: #000;
background: #000 url(../img/download-hover.png) no-repeat top right
}
.filter .selector.hovered .type {
color: #fff
}
.filter .selector.hovered ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
position: absolute;
left: -1px;
top: 58px;
min-width: 300px;
width: 100%;
border: 1px solid #ddd;
background: #fff;
border-radius: 0 0 4px 4px .filter .selector.hovered ul;
border-radius-position: absolute;
border-radius-left: 20px;
border-radius-top: -10px;
border-radius-content: " ";
border-radius-width: 0;
border-radius-height: 0;
border-radius-border: 10px solid #fff;
border-radius-border-top-width: 5px;
border-radius-border-bottom-width: 5px;
border-radius-border-color: transparent transparent white transparent;
border-radius-z-index: 11
}
.filter .selector.hovered ul li {
display: block;
float: none;
width: 100%;
height: 40px;
line-height: 40px
}
.filter .selector.hovered ul li+li {
border-top: 1px solid #e1e1e1
}
.filter .selector.hovered ul li a {
float: none;
width: auto;
display: block;
color: #000;
padding-left: 60px;
padding-right: 10px;
height: 40px;
line-height: 40px;
text-shadow: 0 0 0;
background: url(../img/next-hover.png) no-repeat 20px center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
text-decoration: none
}
.filter .selector.hovered ul li a span {
border: 0;
padding: 0
}
.filter .selector.hovered ul li a:focus,.filter .selector.hovered ul li a:hover,.filter .selector.hovered ul li a.selected {
background: url(../img/next-hover.png) no-repeat 20px center;
color: #000;
text-decoration: underline
}
.filter .selector.hovered ul li a:focus span,.filter .selector.hovered ul li a:hover span,.filter .selector.hovered ul li a.selected span {
border-color: transparent
}
@media screen and (max-aspect-ratio:10/9) {
.filter {
margin-top: -152px;
padding: 0 20px
}
.filter form {
margin-bottom: 32px
}
.filter .selector {
width: 100%;
margin-bottom: 20px
}
.filter .selector+.selector {
margin-left: 0
}
}
.menubtn,nav i,.responsive {
display: none
}
@media screen and (max-device-width:1000px) {
@ -ms-viewport {
width: 1000px
}
}
@media screen and (max-aspect-ratio:10/9) {
@ -o-viewport {
width: 500px
}@ viewport {
width: 500px
}@ -webkit-viewport {
width: 500px
}@ -ms-viewport {
width: 500px
}
html,body,.inner {
min-width: 500px;
width: 500px;
max-width: 500px
}
.responsive {
display: block
}
img {
max-width: 100%
}
.left,.right {
float: none;
margin: 0 auto;
padding-bottom: 0;
width: 100%
}
.thumbs {
width: 300px;
margin: -30px auto 40px
}
.thumbs .thumb {
margin-left: 0
}
.cmscontent {
width: 100%
}
.cmscontent .page-container {
padding-left: 20px;
padding-right: 20px
}
.cmscontent blockquote {
padding: 40px 20px
}
.cmscontent blockquote p {
font-size: 32px;
line-height: 40px;
text-align: center
}
.cmscontent .ctabutton {
width: 100%
}
}
.detailqueue .slide .box h1 {
font-family: Oswald;
color: #fff;
font-size: 50px;
font-weight: 400;
line-height: 56px;
text-align: center;
text-shadow: 0 1px 0 #282219;
text-transform: uppercase;
letter-spacing: 2px
}
.detailqueue .slide .box {
width: 960px;
position: absolute;
left: 50%;
top: 23%;
margin-left: -480px
}
@media screen and (orientation:landscape) and (max-width:1600px) {
.detailqueue .slide .box h1 {
font-size: 46px
}
.detailqueue {
height: 400px
}
.detailqueue .slide {
height: 400px!important
}
}
@media screen and (orientation:landscape) and (max-width:1000px) {
.detailqueue .slide .box h1 {
font-size: 36px
}
.detailqueue {
height: 255px
}
.detailqueue .slide {
height: 255px!important
}
}
@media screen and (max-aspect-ratio:10/9) {
.detailqueue .slide .box {
width: 500px;
left: 0;
margin-left: 0;
padding: 0 20px;
line-height: 36px
}
.detailqueue .slide .box h1 {
font-size: 20px;
line-height: 24px
}
.detailqueue {
height: 150px
}
.detailqueue .slide {
height: 150px!important
}
}