/* Colors: */ 
a {text-decoration:none;color: #AB1802;}
.bgcolor1 {background-color:#D86900;color:#fff}
.bgcolor2 {background-color:#AB1802;color:#fff}


/* Base Styles */
* {margin:0;padding:0;box-sizing: border-box}
html {font-size:10px}
body {font-family: 'Roboto Slab', serif;font-size:1.4rem;font-weight: 400;line-height:1.7;color:#000;background-color: #000;}
body.home,body.photos {background: url('../img/chp-splash-01.jpg') no-repeat;background-position-x: right;background-size: cover;background-attachment: fixed;background-color: #000;} {height: 100vh;background: url('../img/chp-splash-01.jpg') no-repeat;background-position-x: right;background-size: cover;background-attachment: fixed;}
body.menu {background: url('../img/chp-splash-01.jpg') no-repeat;background-position-x: right;background-size: cover;background-attachment: fixed;}




body.home main {margin: 0 0 0 0;}
body.menu main {margin: 250px 0 0 0;}
main .hero {}
.navigation {display:none}
footer {background-color:#fff;display:flex;position: fixed;bottom:0;width:100%;}
footer a {font-size:2rem;padding: 0.3rem;margin:1rem 0;flex:1;text-align:center;background-color: #fff;}
footer a:first-child {border-right:1px solid #ddd}

main .tagline {font-family: 'Alegreya SC', serif;text-align:center;font-size:2rem;line-height:1.2;padding:1rem 0;box-shadow: #0003 0px -3px 6px;}
main .main-options a {font-family: 'Alegreya SC', serif;display:block;text-align:center;margin-bottom:2px;padding: 1.6vh 0;font-size:2.5rem;}


/* Header */
.header {background-color: transparent;position:fixed;width:100%;top :0;z-index: 2;transition: all .3s;margin: 0;padding: 0;}
.header .logo {background-image: url(../img/logo-01.png);background-repeat: no-repeat;height: 170px;background-size: 794px;overflow: hidden;text-indent: -9999px;position: relative;left: 0;top: 0;}
.header.menu {
    background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 48%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 48%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
    height: 190px;
}
.header.menu h2 {color:#fff;position: absolute;top: 118px;font-size: 50px;left: 47px;text-shadow: 2px 2px 16px #000;padding: 10px 20px;background-color: #000;box-shadow: 2px 4px 32px #000;padding-top: 0;}
.header.menu nav {position:absolute;left: 444px;top: 156px;font-size: 29px;}
.header.menu nav a {padding:10px;box-shadow: 2px 4px 32px #000;}

.header .brand {position: absolute;top: 1px;left:0;width:100%;height:50px;background:url('../img/bbn-blk.svg') no-repeat;background-position: center;background-size: 15rem;}
.header .brand a {display:block;width: 85%;height:50px;right: 0;position: absolute;}
.header.menu-active .brand {background:url('../img/bbn-wht.svg') no-repeat;background-position: center;background-size: 15rem;}

.menu-btn {position: absolute;z-index: 3;left: 17px;top: 16px;cursor:pointer;}
.menu-btn .btn-line {width:28px;height:3px;margin:0 0 5px 0;background-color: #d9d8d8;transition: all .3s;}
.menu-btn.close .btn-line:nth-child(1) {transform: rotate(45deg) translate(5px,5px);}
.menu-btn.close .btn-line:nth-child(2) {opacity:0}
.menu-btn.close .btn-line:nth-child(3) {transform: rotate(-45deg) translate(7px,-6px)}

/* Content */
main .hero p.description {padding: 20px;text-indent: 0;color: white;font-size: 21px;position: relative;top: 244px;text-shadow: 2px 2px 1px black;width: 732px;background-color: #0000007a;}
main .hero .location {color:#fff;background: url(../img/pin.svg);width: 271px;position:relative;left: 435px;background-repeat: no-repeat;background-size: 38px;top: -5px;}
main .hero .location span {display:block;text-align:right;line-height: 27px;text-shadow: 2px 2px 1px black;}
main .hero .location span.address1 {font-size: 28px;padding-top: 3px;}
main .hero .location span.address2 {font-size: 18px;}
.menu p.description {display:none}


.home main nav {bottom:0;}
.home main nav a {display:block;color:white;font-size: 40px;margin-bottom:20px;padding-left:40px;position:relative;top: 200px;width: fit-content;padding-right: 40px;border-bottom: 4px solid transparent;}
.home main nav a:hover {border-bottom:4px solid #ffac00}
.home main nav .sublinks a {font-size: 17px;text-align: center;font-weight: bolder;background-color: #0000008f;margin-right: 20px;padding: 20px;border-bottom:2px solid black;cursor: pointer;}
.home main nav .sublinks a:last-child {margin-right:0}
.home main nav .sublinks a:hover {border-bottom:2px solid #ffac00}

div.menu {background: #ffffff00;padding: 20px 20px;font-size: 26px;max-width: 740px;margin-left: 20px;color:#fff;margin-top: 70px;}
div.menu h2 {color: #ffffff;font-size:60px;background: #fff0;}
div.menu h3 {color:#f9c240;font-size: 50px;background-color: #000000c9;padding: 0 30px;}
div.menu h3 span.subtext {font-size:25px; color: #ffb300}
div.menu .smalltext {font-size:15px;position: relative;display: block;}
div.menu table {background-color: #00000082;padding: 30px;}
div.menu td {width:400px;border-bottom: 1px solid #eeeeee82;}
div.menu td.title {width:85%}

main.menu nav {position:absolute;right:0;}
main.menu .hero {height:auto;}
main.menu table {margin-bottom:100px}


.subpage main {margin-bottom:300px}
.container {margin:1rem 2rem 2rem 2rem}
nav.content ul  {list-style-type:none;margin-bottom:2rem}
nav.content ul li {display:inline-block}
nav.content ul li a {border-right: 1px solid #d9d8d8;padding-right:.5rem;font-size:1.6rem;}
nav.content ul li:last-child a {border-right:none}

h1 {font-weight:normal;margin: 0;padding: 0;position: relative;}
p {margin-bottom: 1.5rem;font-size:1.6rem;line-height: 1.6;}
p.lead {font-weight:600;}

.sublinks {margin-top: 25px;display: flex;}
img.logolink {width:50px}

/* Content Heros */

.subpage.microblading .hero {background:url('../img/hero-microblading.jpg')no-repeat;border-bottom:7px solid #ED1A64;height:100px}
.subpage.bridal .hero {background:url('../img/hero-bridal.jpg')no-repeat;border-bottom:7px solid #7F1C52;height:100px}
.subpage .hero {background-size: cover !important}

.home main nav a.slicelink {background-color:red;padding:0 40px;display: flex;align-items: center;}
.home main nav a.slicelink img {height:70px;margin-top:10px}
.home main nav a.slicelink span {margin: 0 0 0 20px;}


/* Gallery */
body.photos {}
body.photos main {margin-top:240px;padding:40px;}
body.photos .gallery-tns {}
body.photos .img-tn {width: 270px;border:2px solid white;margin-right:20px;height: 200px;margin-bottom: 20px;}

/* Break Points */

/* Larger Screens */
@media only screen and (min-width: 1650px){
    .header .logo {background-size:1130px;height:270px;}
    main .hero p.description {font-size: 29px;width: 940px;top: 330px;}
    main .hero .location {left: 638px;width: 390px;padding-top: 0px;background-size: 56px;top: 30px;}
    main .hero .location span {line-height: 46px;}
    main .hero .location span.address1 {font-size: 40px;}
    main .hero .location span.address2 {font-size:30px}
    .home main nav a {font-size: 50px;top: 238px;}

    .header.menu {height:220px}

    .header.menu h2 {top: 158px;}
    .header.menu nav {left: 654px;top: 186px;}
}

/* Below Laptop / Tablet */
@media only screen and (max-width: 770px){
    .header .logo {top:0;background-size: 90%;background-position-x: center;background-position-y: center;}
    main .hero .location {position: relative;right: 44px;left: auto;width: 100%;padding: 10px;padding-right: 20px;background pointer-events: all;}
    div.menu {margin: 130px auto;margin-bottom: 0;}
    .header.menu {background-color:#000000b5}
    .header.menu nav {left:auto;right: 50px;top: 140px;}
    .header.menu h2 {top:120px;font-size:40px;left:26px}
    div.menu h3 {font-size:40px}
    div.menu h3 span.subtext {font-size:16px}
}

/**/
@media only screen and (max-width: 600px){
    body.menu main {margin:0 auto}
    .header.menu {height:115px}
    .header.menu h2 {font-size:30px;top:70px;left: 20px;}
    .header.menu nav {right:20px;font-size:20px;top: 85px;}
    .header.menu nav a {padding: 0;}
    .header .logo {height: 120px;background-color: #000;}
    div.menu h3 {font-size:30px;padding: 0 20px;}
    div.menu table {padding:20px}
    div.menu h3 span.subtext {font-size:16px;display:block;position:relative;top:-8px}
    main .hero p.description {padding-top: 0px;width: 100%;top: 136px;font-size: 20px;padding: 16px;}
    body.photos main {margin: 0 auto;margin-top: 128px;}
    body.photos .img-tn {margin-right:0;width: 100%;}
    .home main nav a {font-size:30px}
    main .hero .location {position: fixed;top: 109px;background: #313131;width: 100%;right: auto;box-shadow: 0 4px 34px #000;text-align: center;color: #a8a8a8;z-index: 2;padding: 2px;}
    main .hero .location span.address1 {font-size:16px;line-height:16px;display:inline-block}
    main .hero .location span.address2 {font-size:16px;display:inline-block}
    span.telnumber {display:block;background-color: #AB1802;position: relative;top: -6px;padding: 0 10px;left: -10px;line-height: 34px;} 
    .home main nav .sublinks a {margin:0}

}

@media only screen and (max-width: 415px){
    .header .logo {height: 90px;background-position-y: 10px;background-size: 337px;background-color: #000;box-shadow: 0 4px 34px #000;}
    main .hero {background: transparent;}
    main .hero .location {text-align: center;font-size: 12px;top: 84px;box-shadow: none;}
    .home main nav a {font-size: 30px;width: 100%;text-align: center;top: 124px;}
    a.contact {line-height: 34px;padding:10px 0;}
    span.telnumber {display:block;background-color: #AB1802;position: relative;top: 6px;padding: 0 10px;left: auto;} 
    main.menu .hero .location {position:relative;background-position-x: 84px;background-position-y: 8px;}
    div.menu table { margin-bottom: 20px;}
    div.menu td {font-size:18px}
    div.menu .smalltext {top:0;line-height: 16px;font-size:13px;}
    .home main nav .sublinks a {margin-right:0;padding: 10px;}
    main .hero p.description {top: auto;line-height:25px;font-size:18px;background: #00000082;margin-top: 113px;padding: 10px 30px;}
    .home main nav a {top: 10px;font-size:30px;padding: 0;}
    .home main nav a.btn {border: 2px solid #00000038;box-shadow: 0 2px 12px #0000008f;}
    .home span.telnumber {top: -3px;}
    .home span.calltoorder {font-size: 21px;line-height: 8px;}
}

@media only screen and (max-width: 376px){
    main .hero p.description {line-height:25px;}
    .home main nav a {top: 10px;font-size:30px;padding: 0;}
    .home main nav a.btn {border: 2px solid #00000038;box-shadow: 0 2px 12px #0000008f;}
    .home span.telnumber {top: -3px;}
    .home span.calltoorder {font-size: 21px;line-height: 8px;}
    .home main nav a.slicelink span {line-height:30px;font-size:24px}
}

@media only screen and (max-width: 321px){
    main .hero p.description {line-height:25px;top:90px;}
    .home main nav a {top:90px;font-size:30px;}
    .home span.telnumber {top:0}

    main .hero .location {display:none}

}