html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

body {font-family:'Source Sans Pro', Arial, sans-serif; font-size:18px; color:#484848; background:#fff; margin:0; width: 100%; height:100%; text-align:center;}
hr {height: 1px; color: #d9d9d9; background: #d9d9d9; font-size: 0; border: 0; width:100%; margin:30px auto 0 auto;}
p, li, blockquote {line-height:135%;}
h1 {color:#AD0D2B; margin:0; font-size:28px;}
h2 {margin:0 0 10px 0; padding:0 0 0 20px; font-size:18px; color:#AD0D2B; font-weight:normal;}
h3 {color:#AD0D2B; font-size:20px; font-weight:bold; margin:0;}
hr {margin-right:28%; margin-bottom:30px;}

a:link {color:#0EA4D7; text-decoration:underline;}
a:active, a:visited {color:#666; text-decoration:underline;}
a:hover {color:#AD0D2B; text-decoration:underline;}

.container {/*max-width:1200px; width:90%;*/ text-align:left; margin:0 auto; clear:both;}
.widecontainer { width:90%; text-align:left; margin:0 auto; clear:both;}

.header {background:transparent; /*background:linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);*/ position:absolute; top:0; width:100%; z-index:2;}
.header h1 {text-align:left; margin:auto; padding:25px 0 20px 0; max-width:100%;}
.header h1 img {width:100%; max-width:150px; height:auto;}
.header h1:hover img {opacity:0.9;}
.header h2 {display:none; text-align:center; margin:45px auto 0 auto; padding:0; color:#E8ABB8; font-size:18px; font-weight:bold;}
.header h1 img {animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}

.imagecard {border-radius:10px; box-shadow:0 10px 50px rgba(0,0,0,0.5); margin-top:-100px;}
.imagecard:hover {box-shadow:0 5px 30px rgba(0,0,0,0.7);}

section {padding:50px 0;}
section p {font-size:20px;}
section h5 {letter-spacing:5px; color:#d31f48; text-transform: uppercase; font-size:16px; padding-bottom:10px; border-bottom:5px solid rgba(0,0,0,0.1); display:inline-block; margin-bottom:20px;}

section.hero {padding:0; width:100%; min-height:90vh; height:90vh; overflow: hidden; position:relative;}
section.hero video {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: -1; height: 100%; width: 177.77777778vh; min-width: 100%; min-height: 56.25vw;}
section.hero img {width:100%; height:auto;}
section.hero h3 {max-width:950px; color:rgba(255,255,255,1); text-shadow:0 0 5px rgba(0,0,0,0.3); margin:50px auto 10px auto; font-size:35px; font-weight:bold; text-align:center; line-height:135%; /* */ display:inline-block;}
section.hero h4 {color:rgba(255,255,255,0.8); text-shadow:0 0 5px rgba(0,0,0,0.3); margin:0 auto 50px auto; font-size:25px; font-weight:normal; text-align:center; line-height:135%; max-width:700px;}
section.hero .gradetoblack {width:100%; background:linear-gradient(to top, transparent, transparent); z-index:0; position:absolute; bottom:0; min-height:300px;}
/*section.hero .gradetoblack {width:100%; background:linear-gradient(to top, #fff, transparent); z-index:0; position:absolute; bottom:0; min-height:300px;}*/
section.hero .videodesc {background:rgba(255,255,255,0.5); color:#999; font-size:11px; position:absolute; bottom:70px; right:20px; width:150px; border-radius: 3px; padding:5px 10px; z-index:2; text-align: left;}

section.heroslim {min-height:30vh; height:30vh;}
section.heroslim .gradetoblack {display:none;}
section.heroslim .videodesc {background:rgba(0,0,0,0.5); color:#fff; font-size:11px; position:absolute; bottom:20px; right:20px; width:150px; border-radius: 3px; padding:5px 10px; z-index:2; text-align: left;}

section.trio {padding:30px 0;}
section.buffer {padding:150px 0 70px 0; min-height:50vh;}

section.charcoal {background:#333;}
section.red {background:#d31f48;}
section.white {background:#fff;}

section.bigabout h3 {font-size:30px; text-align:center; text-transform: uppercase; margin-bottom:20px; margin-top:60px;}
section.bigabout p {font-size:30px; text-align:center;}

section.content h3 {font-size:30px; text-align:center; text-transform: uppercase; margin-bottom:40px; margin-top:40px;}
section.content p {font-size:24px; text-align:left; max-width:800px; margin:25px auto;}
section.content ul {max-width:800px; margin:30px auto; list-style:none;}
section.content ul li {font-size:18px; line-height:135%; color:#484848; padding:10px 0; border-bottom:1px solid #d9d9d9;}
section.content ul li:first-child {padding-top:0;}
section.content ul li:last-child {border-bottom:0;}
section.content ul li b {font-size:18px; color:#000;}

section.streaks {background:#eee; text-align:left; margin:30px 0 0 0; padding:100px 0;}
section.streaks h2 {flex:1 0 100%; text-align:center; font-size:30px; font-weight:bold; margin-bottom:30px;}
section.streaks a {transition:0.1s; display:block;}
section.streaks img {max-width:100%; height:auto; padding:20px;}
section.streaks a:hover img {transform: scale(0.95); opacity:0.9;}
section.streaks h3 {color:#333; font-weight:normal; font-size:25px; padding:0; line-height:135%; text-align:center; margin-bottom:15px;}
section.streaks p {text-align:center; padding:0; margin:0 auto 20px auto;}
section.streaks p a {color:#333; padding:0;}
section.streaks p img {padding:0 20px 0 0;}

section.newfolio {padding:0; width:100%;}
section.newfolio img {width:50%; float:left;}

section.shopifylogos {padding:0 0 30px 0; width:100%; text-align: center;}
section.shopifylogos div div {display:flex; flex-wrap:wrap; justify-content:center; max-width:100%;}
section.shopifylogos img {width:100px; height:100px; margin:50px;}

section.content ul.shopifyfeatures {display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; padding:40px; border:1px solid #eee; border-left:0; border-right:0; list-style:none; margin:20px auto;}
section.content ul.shopifyfeatures li {flex:1 0 50%; border-bottom:0; padding:5px 0; color:#AD0D2B;}

section.trio .container .row {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; align-content:flex-start;}

a.homecard {transition:0.2s; max-width:400px; flex:1 1; display:flex; border-radius:5px; text-decoration: none; box-shadow:0 10px 30px rgba(0,0,0,0.5); background:#fff; margin:-80px 20px -80px 20px; text-align:center; position:relative;}
a.homecard .homecardinner {align-items:stretch; display:flex; flex-direction:column; justify-content:flex-start;}
a.homecard h3 {color:rgba(255,255,255,1); font-size:22px; padding:40px 25px 10px 25px; margin:0; text-decoration: none;}
a.homecard h4 {color:rgba(255,255,255,0.6); font-size:14px; margin:0; padding:10px 40px; font-weight:normal; display:inline-block; text-decoration: underline;}
a.homecard h4:hover {color:rgba(255,255,255,0.7);}
a.homecard p {font-size:15px; color:rgba(255,255,255,0.7); padding:10px 30px 0 30px; margin:0; text-decoration: none;}
a.homecard img {width:100%; height:auto; margin:auto 0 0 0; border-radius: 0 0 5px 5px;}
a.homecard:hover {box-shadow:0 10px 15px rgba(0,0,0,0.5);}
a.homecard:hover .homecardinner {transition:0.2s; background:linear-gradient(to bottom, rgba(255,255,255,0.3), transparent, transparent, transparent);}
a.homecard.loadedforanim {animation: flip-in-hor-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

.people {width:100%; max-width:800px; border-top:1px solid rgba(0,0,0,0.1); margin:50px auto; color:rgba(0,0,0,0.8); padding:20px 0 0 0; display:flex; justify-content:space-between; flex-wrap:wrap;}
.people div {flex:1 1 35%; color:rgba(0,0,0,0.5); padding:20px 0; margin:0 40px; font-size:18px; display:flex; justify-content:space-between;}
.people div b {color:rgba(0,0,0,1); font-size:18px;}
.people div img {width:60px; height:60px; margin-right:30px;}
.people div p {flex:1 0; font-size:16px; text-align:left; margin: 0;}

.colcard {margin:0 40px;}
.colcard p, .colcard li {color:rgba(0,0,0,0.7); font-size:18px;}
.colcard p a, .colcard li a {color:rgba(0,0,0,1);}
.colcard img {width:100%; height:auto;}

.contentregion {margin:0 28% 0 22%;}
.contentregion p:first-child {margin-top:0;}

section.content .bluebox {background:#0EA4D7; color:#fff; max-width:500px; margin:50px auto 30px auto; padding:20px; border-radius:3px; text-align:center;}
section.content .bluebox h3 {color:#ABDFF1; font-size:18px; margin:0; padding:0 0 20px 0; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.2);}
section.content .bluebox p {margin:10px 0; padding:0; color:#fff; font-size:18px; text-align:center;}
section.content .bluebox p a {color:#fff;}

.sidebar {background:#0EA4D7; color:#fff; width:23%; float:right;}
.sidebar h3 {color:#ABDFF1; font-size:14px; margin:20px 20px 10px 20px; padding:0; font-weight:bold;}
.sidebar p {margin:0 20px; padding:10px 0; color:#fff; font-size:12px; border-top:1px solid #4ABBE1;}
.sidebar p a {color:#fff;}
.sidebar ul {font-size:11px; margin:0px 20px 5px 30px; padding:0; text-indent:none; list-style:square inside;}
.sidebar ul li {text-indent:none; margin:0;}
.sidebar img.staffphoto {float:right; margin:0 0 10px 10px;}
.earlysidebar {display:block;}
.latesidebar {display:none;}
.latesidebar p, .latesidebar li {font-size:14px;}

.nav {clear:both; padding:25px 0; z-index:5;}
.nav ul {list-style:none; margin:0; padding:0; text-align:right; font-weight:normal;}
.nav ul li {display:inline; margin:0 3px; padding:0; text-indent:0; text-transform: uppercase;}
.nav ul li.selected {opacity:1;}
.nav ul li a {padding:5px 10px; color:#fff; text-decoration:none; margin:0; font-size:14px;}
.nav ul li.selected a {background:rgba(0,0,0,0.1); color:#fff; padding:3px 10px; opacity:1; border-radius: 3px;}
.nav ul li a, .nav ul li a {text-decoration:none; opacity:1;}
.nav ul li a:hover, .nav ul li.selected a:hover {opacity:0.8; text-decoration:none;}
.nav ul li span.extraneous {display:none;}

.folio {width:100%; margin:0 auto; padding:30px 0; display:block; background:#fff; display:flex; justify-content:space-between; flex-wrap:wrap; align-items:stretch;}

.folioitem {width:33.33333333%; margin:0; display:flex;}
.folioiteminner {margin:25px; position:relative;/* box-shadow:0 0 20px rgba(0,0,0,0.2);*/ text-align:center; align-items:stretch; flex-grow:1;}
.folioitem:hover {box-shadow:0 0 5px rgba(0,0,0,0.1);}
.folioitem img {width:100%; height:auto ; position:relative; z-index:4; border-radius:0 0 5px 5px;}
.folioitemcaption {position:relative; z-index:5; text-align:left; background:#fff; color:#333; padding:8px 10px 12px 0; bottom:0; left:0; right:0; 
    margin: 0; border-radius:5px 5px 0 0; display:block; font-size:18px;}
.folioitemcaption span {font-size:14px; opacity:0.5; font-weight:normal;}
.folioitemcaption span:before {content:"\a"; white-space: pre;}
.folioitem:hover .folioitemcaption {display:block;}

.foliobutton .folioiteminner {color:#666; text-decoration: none; display:flex; align-items:center;}
.foliobutton p {text-align:center; padding:40px; flex-grow:1;}
.foliobutton i {font-size:40px; margin-bottom:10px;}

.currently .row {max-width:900px; margin:30px auto; display:flex; justify-content: space-between; flex-wrap:wrap;}
.currently h2 {flex:1 0 100%; text-align:center; font-size:30px; font-weight:bold; margin-bottom:30px;}
.currently .currentlycol {flex:1 1 40%; padding:0 30px;}
.currently .currentlycol ul {list-style: none; margin:20px 0 0 0; padding:0;}
.currently .currentlycol ul li {padding:5px 0; font-size:15px;}

.foliofull {margin-left:0;}
.contentfolio {margin:40px 0 20px 0; clear:both; border-top:1px solid rgba(0,0,0,0.1);}
.contentfolio h2 {width:100%; font-size:15px; padding:10px 0; color:#666; float:none;}

a.button {background:#0EA4D7; font-size:18px; padding:10px 40px; margin:20px 0; border-radius: 5px; display:inline-block; color:#fff; text-decoration: none; font-weight:bold;}
a.button i {opacity:0.5; margin-left:10px;}
a.button:hover {opacity:0.8;}

.foliohalf {width:15%; height:190px; margin:0 0 10px 0; padding:0; float:left; display:inline; font-size:11px; color:#999; text-align:left;}
.foliohalf span {width:15%; text-align:center; padding:0; margin:0;}
.foliohalf span img {border:1px solid #d9d9d9; margin:0 0 3px 0;}
.foliohalf a {text-decoration:none; color:#999;}

table.contact {border-collapse:collapse; margin:50px auto; max-width:600px; width:100%;}
table.contact tr {vertical-align:top;}
table.contact tr th {padding:15px; text-align:left; font-weight:normal; opacity:0.7; font-size:18px;}
table.contact tr td {padding:15px; font-size:18px; text-align:left;}
table.contact tr td p {font-size:18px; text-align:left;}

.aside {font-size:11px; margin:20px 0 0 30px;}

form {margin:0px;}

ul.front {margin:0; padding:0; list-style:square inside;}
ul.front li {font-size:18px; line-height:135%; color:#fff; padding-bottom:10px;}

cite {font-style:normal; font-weight:normal; font-size:12px; color:#999; line-height:115%;}

.footer {background:#d31f48; padding:40px 0; clear:both;}
.footer .row {display: flex; justify-content:space-between; flex-wrap:wrap;}
.footer .footercol {flex:1 0 30%;}
.footer .footercol .footerlogo {width:80%; max-width:200px; margin-top:10px;}
.footer ul.contact {list-style:none; margin:0; padding:0;}
.footer ul.contact li {color:#fff; margin:5px 0; font-size:18px;}
.footer ul.contact li cite {color:#fff; opacity:0.5;}
.footer ul.contact li a {color:#fff;}
.footer .adelaide {flex:1 1 100%; text-align:center; padding-top:20px; margin:50px 0 0 0; border-top:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.3);}

@media all and (max-width:850px) {
    .contentregion {margin:15px; width:100%;}
    hr {max-width:100%; margin:15px 0; padding:0;}
    .sidebar {width:26%; margin-right:2%; margin-bottom:30px;}
    h2 {margin:15px; padding:0; font-size:24px; color:#AD0D2B; font-weight:bold;}
}

@media all and (max-width:768px) {
    .header h1 {text-align: center; padding:30px 0 20px 0;}
    .nav {padding:0 0 20px 0;}
    .nav ul {text-align: center;}
    .nav ul li {margin:0 1px;}
    .nav ul li a {padding:10px 5px; font-size:13px;}

    section.hero h3 {font-size:24px; padding-left:20px; padding-right:20px;}
    section.hero h4 {font-size:20px;}

    section.content p {font-size:18px; max-width:500px; margin-left:auto; margin-right:auto;}

    section.content ul {padding:0 20px;}
    .footer .footercol {text-align:center;}

    section.bigabout p {font-size:20px; max-width:500px; margin-left:auto; margin-right:auto;}
    section.buffer {padding:30px 0 20px 0; min-height:initial;}

    a.homecard {flex:1 1 100%; margin:0 auto 30px auto;}
    a.homecard:nth-of-type(1) {margin-top:-80px;}

    .footer .footercol {flex:1 0 100%; padding:15px;}
    .adelaide {display:none;}

    .currently .currentlycol {flex:1 0 100%;}

    section.hero .videodesc {color:#999; font-size:11px; position:absolute; bottom:70px; left:0; right:0; width:300px; margin:auto; border-radius: 3px; 
        padding:5px 10px; z-index:2; text-align: center;}
    section.heroslim .videodesc {bottom:20px;}

    .sidebar {float:none; clear:both; width:100%; padding:2% 0; margin-top:30px;}
    .earlysidebar {display:none;}
    .latesidebar {display:block;}
    hr {margin-right:0;}
}

@media all and (max-width:650px) {
    .container {width:92%;}
    .widecontainer {width:92%;}
    .folio {width:90%;}
    .folioitem {width:100%;}
    section.shopifylogos img {margin:30px;}

    section.streaks img {padding:20px 0;}
    section.streaks h3 {font-size:20px; margin-bottom:15px;}
    section.streaks p {margin-bottom:40px;}
}

@media all and (max-width:500px) {
    .currently {display:none;}
    .folioiteminner {margin:20px 0;}
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

@-webkit-keyframes flip-in-hor-top {
  0% {
    -webkit-transform: rotateX(-80deg);
            transform: rotateX(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-top {
  0% {
    -webkit-transform: rotateX(-80deg);
            transform: rotateX(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}





.pageresponse {padding:20px; background:#ffc; border-bottom:1px solid rgba( 0,0,0, .1 );}
.pageresponse .container {}