/* copy/pasteables black: #21211F grey: #444441 white: #EEE7DA lightTan: #D4C9B6 darkTan: #BCB19D blue: #30818C yellow: #E5C119 orange: #CC662B red: #C1323A purple: #B28597 */ /* base stuff */ body { background:#21211F; color:#EEE7DA; font-size:16px; line-height:24px; font-family:"SansMedium","Futura","Century Gothic",sans-serif; -webkit-font-smoothing:antialiased; } .wrapper { width:88%; margin:0 auto; position:relative; max-width:1200px; } a { color:#EEE7DA; text-decoration:none; } h1 { font-size:36px; line-height:44px; font-family:"Slab","Rockwell","Futura","Century Gothic",sans-serif; } h2 { font-size:56px; line-height:72px; text-shadow:2px 0 1px #30818C, -3px 0 1px #C1323A; font-family:"Slab","Rockwell","Futura","Century Gothic",sans-serif; } @media screen and (min-width:940px) { h1 { font-size:44px; line-height:52px; } } @media screen and (min-width:1024px) { h1 { font-size:48px; line-height:60px; } h1 span { display:block; } h2 { font-size:72px; line-height:64px; } } /* header */ header { background:#21211F; } header .logo { margin:12px 0 0 -4px; } .hamburger { position:absolute; width:48px; height:48px; top:12px; right:-4px; text-indent:300%; overflow:hidden; white-space:nowrap; display:block; cursor:pointer; } .hamburger .line1 { width:28px; height:4px; background:#EEE7DA; position:absolute; top:12px; left:10px; transition:ease all 300ms; } .hamburger .line2 { width:28px; height:4px; background:#EEE7DA; position:absolute; top:20px; left:10px; transition:ease all 200ms; } .hamburger .line3 { width:28px; height:4px; background:#EEE7DA; position:absolute; top:28px; left:10px; transition:ease all 300ms; } nav ul { margin-top:32px; display:none; } nav li { height:40px; margin-bottom:24px; opacity:0; transition:ease all 300ms; } nav li a { text-transform:uppercase; font-size:20px; line-height:40px; display:inline-block; padding:0 12px; background:#21211F; margin-left:12px; font-weight:bold; letter-spacing:0.5px; transition:all ease 300ms; } nav li a:hover { text-shadow:2px 1px 1px #30818C, -3px -1px 1px #C1323A; } nav .li1 { background:#30818C; transition-delay:150ms; } nav .li2 { background:#4D8954; transition-delay:125ms; } nav .li3 { background:#E5C119; transition-delay:100ms; } nav .li4 { background:#CC662B; transition-delay:75ms; } nav .li5 { background:#C1323A; transition-delay:50ms; } nav .li6 { background:#B28597; transition-delay:25ms; } nav .li7 { background:#BCB19D; transition-delay:0ms; } nav.open .hamburger .line1 { transform:rotate(45deg) translate3d(0,0,0); top:20px; } nav.open .hamburger .line2 { transform:scaleX(0) translate3d(0,0,0); } nav.open .hamburger .line3 { transform:rotate(-45deg) translate3d(0,0,0); top:20px; } nav.open li { opacity:1; } nav.open .li1 { transition-delay:0; } nav.open .li2 { transition-delay:25ms; } nav.open .li3 { transition-delay:50ms; } nav.open .li4 { transition-delay:75ms; } nav.open .li5 { transition-delay:100ms; } nav.open .li6 { transition-delay:125ms; } nav.open .li7 { transition-delay:150ms; } @media screen and (min-width:1024px) { header { position:fixed; top:0; left:0; width:100%; z-index:90; height:76px; box-shadow:0 1px 4px #21211F; } header .logo { float:left; } .hamburger { display:none; } nav { float:right; } nav ul { display:block!important; margin-top:18px; } nav li { background:none!important; margin-bottom:none; display:inline-block; opacity:1!important; } nav li a { margin-left:0; } } @media screen and (min-width:1200px) { nav li a { padding:0 20px; } } /* hero vid */ #hero { position:relative; z-index:4; } #hero_vid { width:100%; height:auto; } #hero_vid img { width:100%; height:400px; margin:0 auto; } #hero_banner { display:block; width:100%; height:auto; } .stripes { position:absolute; bottom:-80px; left:0; width:100%; } .stripes span { width:100%; display:block; margin-bottom:4px; } .stripes .stripe1 { background:#30818C; height:20px; } .stripes .stripe2 { background:#E5C119; height:16px; } .stripes .stripe3 { background:#CC662B; height:12px; } .stripes .stripe4 { background:#C1323A; height:8px; } .stripes .stripe5 { background:#B28597; height:4px; } @media screen and (min-width:1024px) { #hero { margin-top:76px; } } /* about */ #about { background:url(../img/bio_bg.jpg) repeat; background-size:341px 341px; padding-top:108px; position:relative; z-index:3; } #about h1 { margin-bottom:18px; } #about p { font-size:18px; line-height:24px; margin-bottom:16px; } #about .right { position:relative; } #about .polaroid { width:327px; height:auto; display:block; margin:0 auto } #about .play_button { width:128px; height:128px; position:absolute; top:128px; left:50%; margin-left:-64px; text-indent:300%; white-space:nowrap; overflow:hidden; background:url(../img/videoPlayButton.png) center center no-repeat; background-size:128px 128px; transition:all ease 300ms; } #about .play_button:hover { transform:scale(1.08) translate3d(0,0,0) } #about .top_edge { margin-bottom:-10px; width:100%; height:40px; padding-top:28px; } @media screen and (min-width:720px) { #about { padding-top:120px; } #about .left { width:calc(100% - 247px); max-width:692px; } #about .right { width:327px; position:absolute; top:0; right:-48px; transform:scale(0.72); } #about .top_edge { height:auto; padding-top:44px; } } @media screen and (min-width:940px) { #about { padding-top:132px; } #about .left { width:calc(100% - 347px); float:left; } #about .right { position:relative; right:auto; top:auto; transform:none; float:right; } #about p { font-size:20px; line-height:28px; } } @media screen and (min-width:1200px) { #about .right { right:3%; } } /* the guys */ #the_guys { background:url(../img/guys_bg.jpg) repeat; background-size:250px 250px; padding:40px 0; } #the_guys h2 { margin-bottom:24px; } #the_guys .guy { margin-bottom:24px; } #the_guys .pic img { width:280px; margin-left:-16px; } #the_guys .bio { margin-top:-16px; } #the_guys h3 { font-family:"Slab","Rockwell","Futura","Century Gothic",sans-serif; font-size:32px; line-height:64px; margin-bottom:16px; } #the_guys span { font-family:"SansMedium","Futura","Century Gothic",sans-serif; font-size:12px; line-height:12px; color:#BCB19D; text-transform:uppercase; letter-spacing:1px; opacity:0.6; font-weight:bold!important; } #the_guys h3 span { margin-top:-12px; display:block; } #the_guys .bio p { margin-bottom:16px; } #the_guys .stat { margin-bottom:16px; } @media screen and (min-width:600px) { #the_guys .stat { width:46%; margin-right:4%; float:left; } } @media screen and (min-width:768px) { #the_guys { padding:60px 0; } #the_guys h2 { margin-left:247px; } #the_guys .pic { float:left; width:248px; } #the_guys .text { float:left; width:calc(100% - 248px); padding-top:26px; } } @media screen and (min-width:1024px) { #the_guys h2 { margin-bottom:40px; margin-left:260px; padding-top:20px; } #the_guys .pic { width:260px; } #the_guys .text { width:calc(100% - 260px); } #the_guys .bio { float:left; width:64%; } #the_guys .stats { float:right; width:32%; padding-top:48px; } #the_guys .stat { width:100%; margin-right:0; float:none; } #the_guys h3 { font-size:40px; line-height:64px; } #the_guys h3 span { margin-top:-4px; } } @media screen and (min-width:1200px) { #the_guys h2 { margin-left:272px; } #the_guys .pic { width:272px; } #the_guys .text { width:calc(100% - 272px); } #the_guys .bio { width:60%; } } /* dates */ #dates { background:#444441 url(../img/dates_bg.jpg) repeat; background-size:125px 125px; } #dates h2 { margin-bottom:24px; } #dates .bottom_edge { width:100%; height:40px; margin-bottom:32px; } #dates .top_edge { margin-bottom:-10px; width:100%; height:40px; padding-top:40px; } .dates li { background:#21211F; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.4); padding:4px 0 20px 0; margin-bottom:16px; position:relative; } .dates li .photo { position:relative; height:192px; margin:0 4px 4px 4px; border-radius:4px 4px 0 0; background:#444441 center center no-repeat; background-size:cover; overflow:hidden; } .dates li.date1 .photo { background-image:url(../img/dates1.jpg); } .dates li.date2 .photo { background-image:url(../img/dates2.jpg); } .dates li.date3 .photo { background-image:url(../img/dates3.jpg); } .dates li.date4 .photo { background-image:url(../img/dates4.jpg); } .dates li.date5 .photo { background-image:url(../img/dates5.jpg); } .dates li.date6 .photo { background-image:url(../img/dates6.jpg); } .dates li .photo .date { position:absolute; left:0; top:4px; text-align:center; z-index:2; } .dates li .photo .date span { display:block; font-size:14px; line-height:16px; padding-top:6px; font-weight:bold; text-transform:uppercase; color:#EDE7DB; } .dates li .photo .date strong { font-family:"Slab","Rockwell","Futura","Century Gothic",sans-serif; font-size:32px; line-height:32px; } .dates li .photo:before { content:url(../img/dateScrim.png); width:103px; height:112px; position:absolute; top:0; left:0; z-index:1; } .dates li .action { position:absolute; top:158px; right:2px; z-index:9; background:#21211F; padding:8px 12px; border-radius: 8px 0 0 0; } .dates li .action img { display:inline-block; position:relative; top:2px; padding-right:6px;} .dates li .rainbow { display:block; height:4px; margin:0 4px 14px 4px; } .rainbow { background:-moz-linear-gradient(left, #792272 0%, #c76774 11%, #f28c71 22%, #faa655 35%, #fdbe00 48%, #c9bf2a 61%, #91bb48 74%, #00b297 88%, #009fcf 100%); background: -webkit-linear-gradient(left, #792272 0%,#c76774 11%,#f28c71 22%,#faa655 35%,#fdbe00 48%,#c9bf2a 61%,#91bb48 74%,#00b297 88%,#009fcf 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #792272 0%,#c76774 11%,#f28c71 22%,#faa655 35%,#fdbe00 48%,#c9bf2a 61%,#91bb48 74%,#00b297 88%,#009fcf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#792272', endColorstr='#009fcf',GradientType=1 ); } .dates p { color:#BBB29E; margin:0 12px; } .dates p strong { color:#EDE7DB; font-weight:bold; } @media screen and (min-width:600px) { #dates h2 { text-align:center; } .dates li.date1, .dates li.date3, .dates li.date5 { width:48.5%; float:left; } .dates li.date2, .dates li.date4, .dates li.date6 { width:48.5%; float:right; } } @media screen and (min-width:720px) { #dates .bottom_edge { height:auto; } #dates .top_edge { height:auto; padding-top:64px; } } @media screen and (min-width:1024px) { #dates .bottom_edge { margin-bottom:48px; } #dates h2 { margin-bottom:48px; } .dates li.date1, .dates li.date4 { width:32%; float:left; } .dates li.date2, .dates li.date5 { width:32%; float:left; margin:0 2% 16px 2%; } .dates li.date3, .dates li.date6 { width:32%; float:right; } } /* tunes */ #tunes { background:url(../img/guys_bg.jpg) repeat; background-size:250px 250px; padding:40px 0 80px; } #tunes h2 { margin-bottom:24px; } #tunes li { font-size:16px; line-height:24px; color:#9D9383; } #tunes li strong { color:#EEE7DA; font-weight:bold; } @media screen and (min-width:680px) { #tunes h2 { text-align:center; } #tunes .three_col { -moz-column-count:2; -webkit-column-count:2; column-count:2; -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px; } #tunes li { text-align:left; } } @media screen and (min-width:1024px) { #tunes { padding-top:64px; } #tunes h2 { margin-bottom:56px; } #tunes .three_col { -moz-column-count:3; -webkit-column-count:3; column-count:3; } } /* merch */ #merch { background:url(../img/guys_bg.jpg) repeat; background-size:250px 250px; padding:40px 0 80px; text-align:center; } #merch h2 { padding:16px 0 20px; } #merch ul { margin:0 auto; max-width:440px; } #merch li { display:block; margin-bottom:16px; padding:16px; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,0.4); overflow:hidden; } #merch li a { display:block; background:#fff; } #merch li a img { width:100%; height:auto; } #merch li.first { transform:rotate(-0.5deg); } #merch li.third { transform:rotate(0.5deg); } #merch p { display:block; margin:28px auto 40px; max-width:520px; } #merch .button { font-family:"SansMedium","Futura","Century Gothic",sans-serif; font-weight:bold; background:#CC662B; font-size:20px; line-height:24px; padding: 17px 24px 15px 24px; text-align:center; color:#EEE7DA; border-radius:99px; } @media screen and (min-width:680px) { #merch ul { column-count:3; column-gap:16px; max-width:none; } #merch p { margin-top:16px; } } @media screen and (min-width:1024px) { #merch h2 { padding-bottom:40px; } } /* eye candy */ #candy { background:#A49F9A url(../img/eye_candy_bg.jpg) repeat; background-size:250px 250px; overflow-x:hidden; } #candy .bottom_edge { width:100%; height:40px; margin-bottom:32px; } #candy .top_edge { margin-bottom:-12px; width:100%; height:59px; padding-top:28px; } #candy .h2 { margin:8px 0 36px -2%; transform:rotate(-1deg); background:#21211F; width:104%; display:block; box-shadow:0 1px 4px rgba(0,0,0,0.4); } #candy .h2 .rainbow { height:8px; position:relative; top:8px; } #candy h2 { padding:16px 0 20px; } #candy .row { display:block; } #candy .row img { display:block; box-sizing:border-box; border:8px solid #EEE7DA; border-radius:4px; width:100%; height:auto; margin-bottom:20px; box-shadow:0 1px 4px rgba(0,0,0,0.4); } #pic1, #pic7, #pic9, #pic14, #pic19 { transform:rotate(-0.5deg); } #pic4, #pic6, #pic12, #pic18 { transform:rotate(0.5deg); } #pic16, #pic21 { transform:rotate(1deg); } @media screen and (min-width:600px) { #candy .row.big_lefty .littles img, #candy .row.big_righty .littles img { width:calc(50% - 10px); float:left; } #candy .row.big_lefty .littles .first, #candy .row.big_righty .littles .first { margin-right:20px; } #candy .row.three_wide img { float:left; width:calc(33.333% - 13.5px); margin-right:20px; } #candy .row.three_wide .last { float:right; margin-right:0; } } @media screen and (min-width:680px) { #candy .row.two_wide img { width:calc(50% - 10px); float:left; } #candy .row.two_wide .first { margin-right:20px; } #candy .h2 { margin-bottom:48px; } #candy h2 { text-align:center; } } @media screen and (min-width:760px) { #candy .row.big_lefty .big { width:calc(66.666% - 10px); margin-right:20px; float:left; } #candy .row.big_lefty .littles { width:calc(33.333% - 10px); float:right; } #candy .row.big_lefty .littles img { width:100%; float:none; margin-right:0!important; } #candy .row.big_righty .big { width:calc(66.666% - 10px); margin-left:20px; float:right; } #candy .row.big_righty .littles { width:calc(33.333% - 10px); float:left; } #candy .row.big_righty .littles img { width:100%; float:none; margin-right:0!important; } #candy .row .littles img { margin-bottom:10px; } } @media screen and (min-width:1024px) { #candy h2 { padding:24px 0 28px; } } /* contact */ #booking { background:url(../img/guys_bg.jpg) repeat; background-size:250px 250px; padding:48px 0 64px; margin-top:-1px; } #booking h2 { margin-bottom:32px; } #booking h3 { font-family:"Slab","Rockwell","Futura","Century Gothic",sans-serif; font-size:32px; line-height:52px; margin:12px 0 8px; } #booking h3 span { font-family:"SansMedium","Futura","Century Gothic",sans-serif; display:block; font-size:12px; line-height:16px; letter-spacing:0.5px; color:#BCB19D; text-transform:uppercase; font-weight:bold; opacity:0.6;} #booking h3 .spinning { width:24px; height:auto; position:absolute; bottom:14px; left:260px; } #booking h3 .spinning.hide { display:none; } #booking .form { margin-bottom:48px; } #booking input, #booking textarea { display:block; color:#EEE7DA; font-size:18px; line-height:24px; padding:13px 16px 11px; width:calc(100% - 32px); background:rgba(68,68,65,0.6); border-radius:4px; border:none; font-family:"SansMedium","Futura","Century Gothic",sans-serif; margin:0; -webkit-transition:all ease-in-out 150ms; -moz-transition:all ease-in-out 150ms; transition:all ease-in-out 150ms; -webkit-appearance:none; } #booking input[type="submit"] { font-family:"SansMedium","Futura","Century Gothic",sans-serif; font-weight:bold; background:#CC662B; font-size:20px; line-height:24px; padding: 17px 0 15px 0; width:244px; text-align:center; color:#EEE7DA; } #booking input::-webkit-input-placeholder, #booking textarea::-webkit-input-placeholder { color:#eee7da; opacity:0.6; } #booking input:focus, #booking textarea:focus { background:rgba(68,68,65,0.4); box-shadow:none; outline:none; } #booking #submit:focus, #booking #submit:hover { background:#A94D18; cursor:pointer; } #booking input.err, #booking textarea.err { box-shadow:inset 0 0 0 2px #C1323A; } #booking .fn { margin-bottom:16px; } #booking .row { margin-bottom:16px; width:100%; } #booking .righty p { font-size:16px; line-height:24px; margin-top:5px; color:#BBB29E; } #booking .righty p strong { font-weight:bold; color:#EDE7DB; font-size:18px; margin-top:16px; display:inline-block; margin-top:16px; } #booking .righty a { color:#D4C9B6; text-decoration:none; } #booking .righty a:hover { text-decoration:underline; } #booking .socials { margin-top:35px; } #booking .socials li { display:inline-block; margin-right:6px; } #booking .msg { font-family:"SansMedium","Futura","Century Gothic",sans-serif; color:#EEE7DA; background:#C1323A; font-size:16px; line-height:24px; font-weight:bold; padding:12px 16px; display:block; border-radius:4px; margin-bottom:16px; display:none; } #booking .msg.success { background:#30818C; } @media screen and (min-width:480px) { #booking .fn { width:48.5%; float:left; margin-bottom:0; } #booking .ln { width:48.5%; float:right; } } @media screen and (min-width:760px) { #booking h2 { text-align:center; } #booking .form { float:left; width:48%; } /*#booking .righty { width:45%; float:right; }*/ #booking .booking, #booking .socials { float:left; width:50%; text-align:center; margin-top:0; } #booking .socials li { margin-top: 24px; } } @media screen and (min-width:1024px) { #booking h3 { font-size:40px; line-height:64px; margin:24px 0 8px; } #booking { padding-top:76px; } #booking .row { margin-bottom:20px; } } /* footer */ footer { background:#181816; } footer p { padding:20px 0; font-size:16px; line-height:24px; color:#7D766A; } footer p a { color:#D4C9B6; font-weight:bold;} footer p a:hover, footer p a:focus { cursor:pointer; text-decoration:underline; } /* video modal */ .blackout { position:fixed; z-index:998; background:rgba(24,24,22,0.8); top:0; left:0; bottom:0; right:0; visibility:hidden; opacity:0; transition:all ease 250ms; } .blackout .vid_modal { box-sizing:border-box; border:8px solid #EEE7DA; border-radius:4px; width:calc(100% - 32px); max-width:1024px; margin:32px auto 0; box-shadow:0 1px 4px rgba(0,0,0,0.4); } .blackout .vid_modal iframe { width:100%; display:block; } .blackout .close { position:absolute; top:16px; right:16px; transition:all ease 200ms; padding:8px; border-radius:50%; } .blackout .close:hover, .blackout .close:focus { transform:scale(1.2); } .blackout .close img { display:block; } .blackout.show { visibility:visible; opacity:1; } @media screen and (max-width:1200px) and (max-height:760px) { .blackout .close { background:#21211F; } }