@font-face {
    font-family: 'Playfair';
    src: url('./fonts/PlayfairDisplay-VariableFont_wght.ttf') format("truetype-variations");
    font-weight: 1 999;
}
@font-face {
font-family: 'Playfair Italic';
src: url('./fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format("truetype-variations");
font-weight: 1 999;
}
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 100;
}
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 200;
}
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 300;
}
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 500;
}
@font-face {
    font-family: 'Poppins';
    src: url('./fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 600;
}

/*  ==================== Page Controls =======================  */
* {
    box-sizing: border-box;
}

.form-control:focus {
    box-shadow: none;
}

html {
    font-family: 'Poppins', 'Roboto', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 10px;
}

body {
    font-family: 'Poppins', 'Roboto', 'Lucida Sans Unicode';
    font-weight: 100;
    background-color: rgb(250, 250, 250);
}

/*==================  Nav Bar  ==================    */
.navbar {
    background-color: black;
}
.dropdown-menu {
    background-color: black;
}
.navLogo {
    height: 4.4rem;
    width: 3rem;
    margin-bottom: 1.2rem;
    margin-right: 1.2rem;
}

#brandtext{
    letter-spacing: .18rem;
    background-color: #000;
    color: rgb(255, 255, 255);
    font-family: 'Playfair Italic';
    font-size: 3.3rem;
    position: relative;
    left: -1rem;
    font-weight: 300;
    transition: all 0.2;
    -webkit-transition: all 0.2;
    -moz-transition: all 0.2;
    -ms-transition: all 0.2;
    -o-transition: all 0.2;
}
#brandtext b {
    position: relative;
    left: -.7rem;
}
#brandtext a:hover {
    text-shadow: .3rem .3rem .4rem #FFFFAC;
}

.nav-item {
    font-size: 1.5rem;
}

#fade a {
    color: #fff;
    position: relative;
    font-weight: 200;
    transition: all 0.22s ease-in-out;
    -webkit-transition: all 0.22s ease-in-out;
    -moz-transition: all 0.22s ease-in-out;
    -ms-transition: all 0.22s ease-in-out;
    -o-transition: all 0.22s ease-in-out;
}

#fade a:hover {
    text-shadow: 0 0 .1rem #f5f59a;
    color: #f5f59a;
}
#fade a:active {
    text-shadow: 0 0 .3rem #f5f59a;
}
.dropdown {
    margin-bottom: -.5rem;
}

.dropdown-menu {
    border: none;
}

.dropdown-item {
    font-size: 1.3rem;
}

.dropdown-item:hover {
    background: none;
}

.dropdown-item:all {
    background: none; 
    box-shadow: inset 20px 20px none;
}

.dropdown-toggle {
    margin-right: -1rem;
}

#firstDropdown {
    margin-top: -1.1rem;
}

/*==============================  Text ===============================    */

.brandTitle {
    text-align: center;
    font-family: 'Playfair Italic', sans-serif;
    font-size: 6rem;
    text-shadow: .1rem .1rem .2rem rgb(65, 65, 65);
    line-height: 5.5rem;
    letter-spacing: .3rem;
    color: rgb(0, 0, 0);
    position: relative;
    font-weight: 400;
    margin-bottom: 2rem;
}
.pageTitle h1{
    margin-top: 3rem;
    margin-bottom: 2rem;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 4.5rem;
    text-shadow: .1rem .1rem .2rem rgb(65, 65, 65);
    letter-spacing: .18rem;
    color: rgb(0, 0, 0);
    position: relative;
    font-weight: 500;
}
span {
    font-family: 'Poppins';
    font-weight: 500;
}
h1 {
    font-weight: 100;
    margin-top: 1.1rem;
    margin-bottom: 1.1rem;
}
h2 {
    font-weight: 100;
}
h3 {
    font-weight: 100;
}
h4 {
    font-weight: 100;
}
h5 {
    font-weight: 100;
}
.micro h1 {
    font-weight: 100;
}
.micro h2 {
    font-size: 2.4rem;

}
.micro h3 {
    font-size: 2.2rem;
}
.micro h4 {
    font-size: 1.7rem;
}
.micro p {
    font-size: 1.7rem;
}
.microCard h4 {
    margin-top: .4rem;
}
.microCard p {
    margin-top: 1rem;
    margin-bottom: -2rem;
}
.hairCardTxtLeft {
    position: relative;
    top: 3rem;
    margin-bottom: 2rem;
}

#moreInfo1 {
    margin-bottom: .8rem
}
#moreInfo2 {
    margin-top: 1rem;
}
.after {
    font-size: 1.6rem;
}
b {
    font-weight:200;
}
p {
    font-size: 1.5rem;
}
p a {
    background: radial-gradient(ellipse farthest-corner at right bottom, rgb(254, 219, 55) 0%, rgb(253, 185, 49) 8%, rgb(159, 121, 40) 30%, rgb(165, 134, 63) 40%, transparent 80%),                radial-gradient(ellipse farthest-corner at left top, rgb(255, 255, 255) 0%, rgb(255, 255, 172) 8%, rgb(209, 180, 100) 25%, rgb(190, 158, 82) 62.5%, rgb(170, 139, 68) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
}
a:hover {
    text-shadow: 0 0 .2rem #f5f59a;
}
.text {
    text-decoration: none;
    position: relative;
    font-weight: 200;
    transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
}


#lashText {
    margin-top: -1rem;
}
.card-title {
    margin-top: -.6rem;
}
.card-text {
    font-size: 1.3rem;
    margin-bottom: -1rem;
}

/*==========================  Cards ===========================    */

.card-img-top {
    min-width: 22.805rem;
    min-height: 18rem;
    max-height: 18rem;
    width: 100%;
    max-height: 18vw;
    object-fit: cover;
    border-radius: 1.5rem 1.5rem 0 0;
    -webkit-border-radius: 1.5rem 1.5rem 0 0;
    -moz-border-radius: 1.5rem 1.5rem 0 0;
    -ms-border-radius: 1.5rem 1.5rem 0 0;
    -o-border-radius: 1.5rem 1.5rem 0 0;
}

.card {
    margin: 1.5rem 3rem;
    height: 40rem;
    width: 23rem;
    min-width: 23rem;
    box-shadow: .15rem .15rem .5rem #000;
    border-radius: 1.5rem;
    -webkit-border-radius: 1.5rem;
    -moz-border-radius: 1.5rem;
    -ms-border-radius: 1.5rem;
    -o-border-radius: 1.5rem;
}
.microMain {
    height: 38.85rem;
}
.microCard {
    height: 36rem;
}
.navCard {
    height: 35rem;
}
/*================================  Images =================================    */
.navbar img {
    margin-bottom: 1rem;
}
.lash-main {
    align-items: center;
    margin-top: 2rem;
    height: 43rem;
    width: 33rem;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
}
.contact-main {
    align-items: center;
    margin-top: 2rem;
    height: 30rem;
    width: 33rem;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
}
.bio-one {
    align-items: center;
    margin-top: 2rem;
    height: 41rem;
    width: 33rem;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
}
.bio-two {
    align-items: center;
    margin-top: 2rem;
    height: 33rem;
    width: 33rem;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
}
#bridal .carousel {
    height: 45rem;
    max-width: 37.7rem;
    box-shadow: .3rem .2rem .6rem #000000;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}
#micro .carousel {
    padding: auto 2rem;
    margin: 1rem 2rem;
    height: 44rem;
    max-width: 44rem;
    box-shadow: .3rem .2rem .6rem #000000;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}
#bridalCarousel img {
    height: 45rem;
    width: 37.7rem;
    min-width: 100%;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}
#microbladeCarousel img {
    height: 44rem;
    max-width: 44rem;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}
.carousel-inner > .carousel-item {
    border-radius: 1rem;
    height: 50rem;

    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
}
#microbladeCarousel .carousel-inner > .carousel-item {
    border-radius:1rem;
    height: 44rem;
    width: 44rem;
    -webkit-border-radius:1rem;
    -moz-border-radius:1rem;
    -ms-border-radius:1rem;
    -o-border-radius:1rem;
}
.carousel-control.left, .carousel-control.right {
    left: 0;
    z-index: 1;
  }
.pageImage {
    border-radius: 1.3rem;
    -webkit-border-radius: 1.3rem;
    -moz-border-radius: 1.3rem;
    -ms-border-radius: 1.3rem;
    -o-border-radius: 1.3rem;
}

#lisaImage {
    margin-bottom: -.2rem;    
    height: auto;
    width: auto;

}
#mainPage {
    align-items: center;
    margin-top: 2rem;
    max-height: 45rem;
    width: auto;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    box-shadow:.3rem .2rem .6rem #000000;
}
.boxShadow {
    box-shadow:.3rem .2rem .6rem #000000;
}
#mainImg {
    min-width:33rem;
}
/*================================  Button =================================    */
.navbar-toggler {
    background-color: #000000;
    box-shadow: 0 0 .35rem rgb(224, 191, 197);
}
.navbar-toggler:focus {
    outline: none;
}
.bigButton {
    display: inline-block;
    padding: .7em 1.5em;
    margin: 0 0.1em 0.1em 0;
    border-radius:1.5em;
    box-sizing: border-box;
    background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),    radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    font-size: 2.2rem;
    font-weight:300;
    color:#ffffff;
    text-shadow: .2rem .1rem rgba(0,0,0,0.35);
    text-align:center;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -webkit-border-radius:1.5em;
    -moz-border-radius:1.5em;
    -ms-border-radius:1.5em;
    -o-border-radius:1.5em;
}
.bigButton:hover{

    text-shadow: .1rem .1rem .18rem #f5f59a;
    box-shadow: .1rem .1rem .3rem #f5f59a;
    background-image: url(./trianglify.png);
    color: #000000;
    
    border-color: #000000;

}
.bigButton:active{
    box-shadow: .1rem .1rem .3rem rgb(148, 118, 74);
    color: #000000;
    background-image: none;
    background-color: #fff;
    border-color: #000000;

}
.bigButton:focus {
    outline: none;
}


.lilButton {
    display: relative;
    padding: .7em 2em;
    margin: 0 0.1em 0.1em .1em;
    border-radius: 1em;
    box-sizing: border-box;
    background-image: radial-gradient(ellipse farthest-corner at right bottom, rgb(254, 218, 57) 0%, rgb(253, 185, 49) 8%, rgb(204, 160, 64) 30%, rgb(177, 143, 64) 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, rgb(255, 255, 255) 0%, rgb(255, 255, 172) 8%, rgb(230, 204, 134) 25%, rgb(167, 136, 64) 62.5%, rgb(155, 128, 65) 100%);
    text-decoration: none;
    text-shadow: .08rem .08rem .05rem #313131;
    font-size: 1.5rem;
    font-weight: 300;
    color: #ffffff;
    text-align: center;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    -ms-border-radius: 1em;
    -o-border-radius: 1em;
}
.lilButton:hover{
    text-shadow: .1rem .1rem .18rem #f5f59a;
    box-shadow: .1rem .1rem .3rem rgb(148, 118, 74);
    color: #313131;
    background-image: url(./trianglify.png);
    border-color: #000000;


}
.lilButton:active{
    box-shadow: .1rem .1rem .3rem rgb(148, 118, 74);
    text-shadow: .1rem .1rem .18rem #f5f59a;
    color: #313131;
    background-image: none;
    background-color: #fff;
    border-color: #000000;
}
.lilButton:focus {
    outline: none;
}
#lashButton2 {
    position: relative;
    margin-top: -.5rem;
}
#lashButton{
    position: relative;
    margin-top: -4.4rem;
}
.navbtn{
    position: relative;
    bottom: 1.5rem;
    margin: 1.5rem;
}
.microbtn {
    margin: 1rem;
    position: relative;
    top: -.8rem;
}
.microbtnMainMiddle {
    margin: 1rem;
    position: relative;
    top: -2.7rem;
}
#hairBtnLeft{
    position: relative;
    bottom: -1.8rem;

}
#hairBtnMdl{
    position: relative;
    top: -1.5rem;
}
#hairBtnRight{
    position: relative;
    top: -1rem;
}
#hairBtnMen{
    position: relative;
    top: 1.5rem;
}
#mail {
    position: relative;
    top: 2rem;
    left: -1.3rem;
}
/* ================= Social Media =================*/

.social {
    text-decoration: none;
}
.social i {
    background: radial-gradient(ellipse farthest-corner at right bottom, rgb(254, 219, 55) 0%, rgb(253, 185, 49) 8%, rgb(159, 121, 40) 30%, rgb(165, 134, 63) 40%, transparent 80%),                radial-gradient(ellipse farthest-corner at left top, rgb(255, 255, 255) 0%, rgb(255, 255, 172) 8%, rgb(209, 180, 100) 25%, rgb(190, 158, 82) 62.5%, rgb(170, 139, 68) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    position: relative;
    left: 1.6rem;
    margin: 3rem 1.5rem;
    font-weight: 400;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

i:hover {
    text-shadow: 0 0 .2rem #f5f59a;
}
@media all and (max-width:30em){

    .bigButton {
        display:block;
        margin:0.2em auto;
    }
}
@media only screen  
  and (max-width: 1920px)  { 
    html {
        font-size: 10px;
    }
}
@media only screen  
  and (max-width: 800px)  { 
    html {
        font-size: 9px;
    }
    .microMain {
        height: 42rem;
    }
    .microCard {
        height: 38rem;
    }
    .mediaL {
        position: relative;
        margin-top: 3rem;
    }
    .mediaR {
        margin-top: 2rem;
    }
}
@media only screen  
  and (max-width: 640px)  { 
    html {
        font-size: 8px;
    }
}