body {
font-family: NeueHaasUnicaPro-Regular, sans-serif;
font-size: 16px;
background-color: #fff;
overflow-x:hidden;
-webkit-overflow-scrolling: touch;
}
* {
margin: 0px;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
hr {
border-width:3px;
border-style:solid;
}
@-webkit-keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
-webkit-animation: fadeIn .9s ease-in 1 forwards;
animation: fadeIn .9s ease-in 1 forwards;
opacity: 0;
}
.head {
position: fixed;
display: block;
z-index: 999;
padding: 10px;
top:0;
right: 0;
width: 100vw;
background-color: #fff;
border-bottom: solid 1px #999;
}
/* start type */
h1 {
font-family: "NeueHaasUnicaPro-Bold", sans-serif;
font-style: normal;
font-weight: normal;
padding: 0;
margin: 0;
font-size: 30px;
line-height: 38px;
color: #000;
text-rendering: optimizeLegibility;
letter-spacing: 1px;
}
h2 {
font-family: "NeueHaasUnicaPro-Bold", sans-serif;
font-weight: normal;
padding: 0;
margin: 0;
font-size: 50px;
line-height: 58px;
text-rendering: optimizeLegibility;
letter-spacing: 1px;
}
h3 {
font-family: "NeueHaasUnicaPro-Light", sans-serif;
font-weight: 400;
padding: 0;
margin: 0;
font-size: 24px;
line-height: 32px;
color: #000;
text-rendering: optimizeLegibility;
letter-spacing: 1px;
}
.justify {
text-align: justify;
width: 800px;
padding-top: 80px;
}
blockquote {
text-indent: -8px;
padding:50px;
}
h4 {
font-family: "NeueHaasUnicaPro-Regular", sans-serif;
font-style: normal;
font-weight: normal;
margin: 0;
font-size: 18px;
line-height: 25px;
text-rendering: optimizeLegibility;
letter-spacing: 1px;
}
h5 {
font-family: "NeueHaasUnicaPro-Regular", sans-serif;
font-weight: normal;
font-size: 16px;
line-height: 22px;
text-rendering: optimizeLegibility;
letter-spacing: .25px;
}
h6 {
margin-top:10px;
font-family: "NeueHaasUnicaPro-Regular", sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 18px;
color: #000;
text-rendering: optimizeLegibility;
letter-spacing: .5px;
}
@font-face {
font-family: "NeueHaasUnicaPro-Bold";
src: url(https://files.persona.co/57089/30D531_7_0.woff);
}
@font-face {
font-family: "NeueHaasUnicaPro-Regular";
src: url(https://files.persona.co/57089/30D531_10_0.woff);
}
@font-face {
font-family: "NeueHaasUnicaPro-Light";
src: url(https://files.persona.co/57089/30D531_11_0.woff);
}
/* end type */
/* start intro items */
.header1 {padding-top:38px;}
.introcontainer1 {
height: 100vh;
width: calc(50% - 85px);
position: relative;
padding-right: 50px;
display: block;
color: #fff;
}
.introimage {
width: calc(55% - 85px);
right: -24px;
top: -24px;
position: absolute;
margin: 25px;
background-image: url("https://images.surfacemag.com/app/uploads/2017/10/11184334/AvenueRoad_0386_v1.jpg");
background-position: center;
background-size: cover;
height: 100%;
}
.introimage1 {
width: calc(50% - 80px);
left: 50%;
top: 64px;
position: absolute;
margin: 25px;
background-image: url("https://images.surfacemag.com/app/uploads/2017/10/11181722/AvenueRoad_0271.jpg");
background-position: center;
background-size: cover;
height: 89vh;
}
.introimage2 {
width: calc(50% - 80px);
left: 50%;
top: 64px;
position: absolute;
margin: 25px;
background-image: url("https://images.surfacemag.com/app/uploads/2017/10/11175401/Travelers-5.jpg");
background-position: center;
background-size: cover;
height: 89vh;
}
.introimage3 {
width: calc(50% - 80px);
left: 50%;
top: 64px;
position: absolute;
margin: 25px;
background-image: url("https://images.surfacemag.com/app/uploads/2017/10/12121105/Surface_AR_Illo___.jpg");
background-position: center;
background-size: cover;
height: 89vh;
}
.subintro {
height: 15vh;
width: 80%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
bottom: 35px;
vertical-align: bottom;
}
.subintro1 {
height: 15vh;
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
bottom: 20px;
vertical-align: bottom;
}
.subintro2 {
display: none;
}
/* end intro items */
/* start tablet */
@media (max-width: 1150px) {
.justify {
width: 88%;
padding-top: 40px;
}
.tabile-only {display:block!important;}
.wrap2 .text{display:none;}
.introcontainer1 {
width: calc(100% - 81px);
padding-left: 0px;
height: 120vh;
}
.subintro1 {
position: absolute;
display: block;
top: 105vh;
}
.header1 {padding-left:20px;}
.subintro2 {
position: relative;
display: block;
top: 97vh;
right:40px;
}
.subintro {
width: 80%;
display: block;
position: relative;
top: 85vh;
left:25px;
}
h3 {
font-size: 17px;
line-height: 26px;
hyphens: auto;
word-break: break-all;
}
.introimage {
display:none;
}
.introimage1 {
width: calc(100% - 85px);
left: 0;
padding-left: 0px;
top: 200px;
height: 77vh;
postion: relative;
}
.introimage2 {
width: calc(97% - 85px);
left: 0;
padding-left: 0px;
top: 200px;
height: 77vh;
postion: relative;
}
.introimage3 {
width: calc(97% - 85px);
left: 0;
padding-left: 0px;
top: 200px;
height: 77vh;
postion: relative;
}
}
@media (min-width: 699px) {
.desktop-only {
display: block!important;
}
.mobile-only {
display: none!important;
}
.tablet-only {
display: none!important;
}
}
@media (min-width: 1150px) {
.introcontainer {
height: 95.5vh;
width: calc(50% - 85px);
position: relative;
padding: 30px ;
display: block;
color: #fff;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
.wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}
.content {
width: 77%;
}
.sidebar {
width: 100%;
color: #000;
}
.sidebar h3 {
}
.sidebar, .content
{
float: left;
}
/* The sticky */
.sidebar {
position: -webkit-sticky;
position: sticky;
top: 40px;
}
}
/* end tablet items */
@media (max-width: 1150px) and (min-width: 700px) {
.tablet-only {
display: block !important;
}
.desktop-only1 {
display: none;
}
.prev, .prev1, .prev2, .next, .next1, .next2 {top: 35%!important; font-size: 20px!important;}
.introcontainer {
width: calc(100% - 31px);
padding: 30px 30px 30px 0;
height: 125vh;
color: #fff;
}
.header {padding-left:25px;}
}
@media (min-width: 1150px) {
.tablet-only {
display: none !important;
}
.tabile-only {display:none;}
.wrap{
position: relative;
z-index:999;
}
.wrap2 .text{
font-family: 'NeueHaasUnicaPro-Bold';
width: calc(100% - 70px);
position: absolute;
float:left; padding: 35px;
z-index: 2; margin-bottom: -20px;
color:#fff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#131313+0,000000+85&0.25+0,0+85 */
background: -moz-linear-gradient(top, rgba(19,19,19,0.25) 0%, rgba(0,0,0,0) 85%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(19,19,19,0.25) 0%,rgba(0,0,0,0) 85%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(19,19,19,0.25) 0%,rgba(0,0,0,0) 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40131313', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.newspaper {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
column-gap: 25px;
right: 30px;
}
}
/* start mobile */
@media (max-width: 700px) {
.mobile-only {
display: block !important;
}
.desktop-only {
display: none !important;
}
.desktop-only1 {
display: none !important;
}
.tablet-only {
display: none !important;
}
.uberAccordion > li > div {
background-color: #fff;
height: calc(100vh - 250px);
width:100%;
}
.prev, .prev1, .prev2, .next, .next1, .next2 {top: 32%!important; font-size: 20px!important;}
.introcontainer {
width: calc(100% - 31px);
padding: 30px 30px 30px 0;
height: auto;
color: #fff;
}
.menu-button2 {
display: block;
position: fixed;
right:10px;
bottom: -2px;
padding-left: 0%;
padding-top: 7%;
z-index:999;
text-align: center;
color: black;
}
.menu-wrap2 {
background-color: #12ab8d;;
padding: 40px 0;
overflow: scroll;
transition: all 0.3s;
position: fixed;
width: 100%;
top: 43px;
left: 100%;
bottom: 0;
z-index: 7;
}
.menu-close2 {
background: url(https://images.surfacemag.com/app/uploads/2017/10/13161134/x1.png) no-repeat scroll transparent;
position: absolute;
width: 50px;
height: 50px;
right: 10px;
top: 50px;
z-index:999;
text-indent: -9999px;
transition: all 0.3s;
}
.justify {
padding-top: 80px;
text-align: left;
}
.qa {
text-indent: 25px;
}
}
.content {
height: auto;
overflow: scroll;
}
.uberAccordion {
padding: 0;
}
.uberAccordion > li {
list-style: none;
margin: 0;
}
.uberAccordion li:nth-child(1) {
background-color: #fff;
color: #000;
}
.uberAccordion li:nth-child(2) {
background-color: #a3a5d6;
}
.uberAccordion li:nth-child(3) {
background-color: #12ab8d;
}
.uberAccordion li:nth-child(4) {
background-color: #ffa39a;
}
.uberAccordion li:nth-child(5) {
background-color: #fff;
}
.uberAccordion > li > h1 {
margin: 0;
font-size: 12px;
padding: 7px;
cursor: pointer;
}.uberAccordion > li > h2 {
margin: 0;
font-size: 12px;
cursor: pointer;
}
.uberAccordion > li > div {
background-color: #fff;
padding: 0;
}
/* Default CSS for sub-accordion */
.uberAccordion .uberAccordion > li > h1 {
padding: 0;
}
.uberAccordion .uberAccordion > li > div {
background-color: #fff;
color: #fff;
height: 100vh;
}
::-webkit-scrollbar {
display: none;
}
/* Default CSS for vertical orientation */
.uberAccordion.accordion-vertical {
height: 100vh;
overflow:scroll;
}
.box-content {
}
.box-cell {
margin-bottom: 10px;
}
@media (min-width: 1150px) {
.boxes {
display: table;
width: 100%;
}
.box-row {
display: table-row;
}
.box-cell {
display: table-cell;
vertical-align: top;
width: 33.333333333%;
padding-left:20px;
}
.box-cell1 {
display: table-cell;
vertical-align: top;
width: 66.666666666%;
padding-right:20px;
padding-top:8px;
}
}
@media (max-width: 1150px) {
.boxes {
display: table;
width: 100%;
}}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
font-stretch: ultra-condensed;
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
color: white;
font-size: 30px;
font-family:'NeueHaasUnicaPro-Light';
transition: 0.6s ease;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
color:#ffa39a;
}
/* The dots/bullets/indicators */
.dot {
position: relative;
right: 0;
top:-30px;
cursor: pointer;
display: inline-block;
transition: background-color 0.6s ease;
color: #999;
}
.dot:hover {color:#ffa39a;}
.active {
color: #000;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* Slideshow container */
.slideshow-container1 {
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev1, .next1 {
font-stretch: ultra-condensed;
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
color: white;
font-size: 30px;
font-family:'NeueHaasUnicaPro-Light';
transition: 0.6s ease;
}
/* Position the "next button" to the right */
.next1 {
right: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev1:hover, .next1:hover {
color:#ffa39a;
}
/* The dots/bullets/indicators */
.dot1 {
position: relative;
right: 0;
top:-30px;
cursor: pointer;
display: inline-block;
transition: background-color 0.6s ease;
color: #999;
}
.text1{
}
.dot1:hover {color:#ffa39a;}
.active1 {
color: #000;
}
/* Fading animation */
.fade1 {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* Slideshow container */
.slideshow-container2 {
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev2, .next2 {
font-stretch: ultra-condensed;
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
color: white;
font-size: 30px;
font-family:'NeueHaasUnicaPro-Light';
transition: 0.6s ease;
}
/* Position the "next button" to the right */
.next2 {
right: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev2:hover, .next2:hover {
color:#ffa39a;
}
/* The dots/bullets/indicators */
.dot2 {
position: relative;
right: 0;
top:-30px;
cursor: pointer;
display: inline-block;
transition: background-color 0.6s ease;
color: #999;
}
.text2{
}
.dot2:hover {color:#ffa39a;}
.active2 {
color: #000;
}
/* Fading animation */
.fade2 {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* masthead */
@media (min-width: 700px) {
.menu-button2 {
display: block;
position: fixed;
left:15px;
bottom: 15px;
padding-left: 0%;
padding-top: 7%;
z-index:999;
text-align: center;
color: black;
}
.menu-wrap2 {
background-color: #12ab8d;;
padding: 40px 0;
overflow: scroll;
transition: all 0.3s;
position: fixed;
width: 46.35%;
top: 0;
left: -46.35%;
bottom: 0;
z-index: 7;
}
.menu-close2 {
background: url(https://images.surfacemag.com/app/uploads/2017/10/13161134/x1.png) no-repeat scroll transparent;
position: absolute;
width: 50px;
height: 50px;
right: 15px;
top: 80px;
z-index:999;
text-indent: -9999px;
transition: all 0.3s;
}
}
.menu-overlay {
background: rgba(0, 0, 0, 0.1);
display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
.menu-wrap:hover .menu-close {
opacity: 1;
}
.menu-toggle {
display: none;
}
.menu-toggle:checked + .menu-wrap {
right: 0;
}
.menu-toggle:checked + .menu-wrap2 {
left: 0;
}
.menu-toggle:checked ~ .menu-overlay {
display: block;
}
.menu-title {
color: #fff;
padding: 10px 50px;
font-family: NeueHaasUnicaPro-Regular;
font-size: 11px;
line-height: 15PX;
}
.menu-wrap:hover .menu-close {
opacity: 1;
}
.menu-toggle {
display: none;
}
.menu-toggle:checked + .menu-wrap {
right: 0;
}
.menu-toggle:checked + .menu-wrap2 {
left: 0;
}
.menu-toggle:checked ~ .menu-overlay {
display: block;
}
.menu-list {
position: absolute;
top: 120px;
left: 0;
bottom: 0px;
width: 100%;
height: inherit;
display: block;
overflow: hidden;
}