/*
Colors: 
#ED1A64
#7F1C52
#550932
*/

/* Base Styles */
* {margin:0;padding:0;box-sizing: border-box}
html {font-size:10px}
body {font-family: 'Montserrat', sans-serif;font-size:1.4rem;font-weight: 400;line-height:1.7;color:#000}

/* Global */
a {text-decoration:none;color:#ED1A64}
.bgcolor1 {background-color:#ED1A64;color:#fff}
.bgcolor2 {background-color:#7F1C52;color:#fff}
.bgcolor3 {background-color:#550932;color:#fff}



main {margin: 50px 0 0 0;}
main .hero {height: 250px;width:100%;background: url('../img/hero-m.jpg') no-repeat;background-position-x: right;background-color: #EBE7CE;}
.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 {height:50px;font-family: 'Alegreya SC', serif;background-color: white;position:fixed;width:100%;top :0;z-index: 2;box-shadow: #0003 0px 3px 6px;transition: all .3s}
.header.menu-active {background-color:#ED1A64}

.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)}

.header nav {height: 100vh;margin-top: 50px;transition: all .3s;opacity: 0;transform:translate(0,-110vh)}
.header.menu-active nav {opacity:1;transform:translate(0,0vh)}
.header nav ul {list-style-type:none;margin:0;padding:0;font-size:3rem;color:#F877A5;margin: 2rem 1.5rem;}
.header nav ul ul {margin:0;color:#fff;border-bottom:1px solid #ED1A64}
.header nav ul ul.no-border{border-bottom:none}
.header nav ul ul a {color:#fff}


/* Content */
.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-family:'Alegreya SC', serif;font-weight:normal;font-size:2.5rem;color:#7F1C52;margin: 0;padding: 0;}
h2 {color:#7F1C52;font-size:1.7rem;margin-bottom: 1.5rem;}
p {margin-bottom: 1.5rem;font-size:1.6rem;line-height: 1.6;}
p.lead {font-weight:600;}



/* 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}