@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lily+Script+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

@keyframes fadeIn{
        0%{opacity:0;}
        100%{opacity:1;}        
}

@keyframes fadeOut{
        0%{opacity:1;}
        100%{opacity:0;}        
}

@keyframes flip{
        0%{transform: rotate3d(0, 1, 0, 0deg);}
        10%{transform: rotate3d(0, 1, 0, 180deg);}
        20%{transform: rotate3d(0, 1, 0, 360deg);}
        30%{transform: rotate3d(0, 1, 0, 360deg);}
        40%{transform: rotate3d(0, 1, 0, 360deg);}
        50%{transform: rotate3d(0, 1, 0, 540deg);}
        60%{transform: rotate3d(0, 1, 0, 720deg);}
        70%{transform: rotate3d(0, 1, 0, 900deg);}
        80%{transform: rotate3d(0, 1, 0, 900deg);}
        90%{transform: rotate3d(0, 1, 0, 900deg);}
        100%{transform: rotate3d(0, 1, 0, 1080deg);}
}

/* RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td 
        {
                margin: 0;
                padding: 0;
                border: 0;
                font-weight: inherit;
                font-style: inherit;
                font-family: inherit;
                scroll-behavior: smooth;
        }
strong 
        {
	        font-weight: bold;
        }
ul
        {
                list-style:none;
                font-family: 'Montserrat', sans-serif;
                font-size:20px;
        }

html, body 
        {
                margin:0;
                padding:0;
                height:100%;
                overflow-x:hidden;
                background-color: #fefefe;
        }
/* /END RESET */

.fade-in
        {
                animation:fadeIn 1300ms ease-in-out forwards;
        }
.fade-out
        {
                animation:fadeOut 1500ms ease-in-out;
        }
.flip
        {
                animation:flip 1200ms ease-in-out infinite alternate;
        }
h1		
        {
                font-size:2rem;
                font-family:'Roboto', sans-serif;
        }
h2		
        {
                font-size:1.6rem;
                margin:1rem 0;
                font-family:'Montserrat', sans-serif;
        }
h3		
        {
                font-size:1.2rem;
                font-family: 'Montserrat', sans-serif;
        }
h4		
        {
                font-size:2rem;
        }
h5		
        {
                font-size:2rem;
        }
h6		
        {
                font-size:2rem;
        }
p       
        {
                margin:1rem 0;
                font-size:20px;
                line-height: 1.4;
                font-family: 'Montserrat', sans-serif;
        }
a
        {
                text-decoration: none;
                color:#212120;
        }
.m0
        {
                margin:0;
        }
li      
        {
                padding:.2rem;
        }
ul
        {
                margin-bottom:2rem;
        }
.body-wrapper
        {
                margin:0 2.5rem;
        }
button
        {
                cursor: pointer;
                background-color: transparent;
                border-style: solid;
                border-color:#C2185B;
                padding:1rem 2rem;
        }
button:hover
        {
                border-color:#C2185B;
                color:#C2185B;
        }
button:focus
        {
                color:#C2185B;
        }
nav     
        {
                display:flex;
                flex-direction: row;
                justify-content: space-between;
                align-items:center;
                width:100%;   
                position:sticky;
                top:0;
                z-index:10;
                align-content: center;
                background-color:#fefefe;
                height:50px;
        }
nav h2  
        {
                margin:0;
                color: #C2185B;
                font-family:'Roboto';
                font-size:1.6rem;
                align-self:center;
        }
nav a
        {
                color:#fefefe;
        }
.contact
        {
                display:flex;
                justify-content:flex-end;
                margin-top:.1rem;
                align-items:center;
        }
#coin 
        {
                position: relative;
                margin: 0 .5rem;
                width: 36px;
                height: 36px;
                cursor: pointer;
                animation-name: flip;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                animation-delay:1s;
                animation-duration: 10s;
                transform: rotateY(0deg);
                transform-style: preserve-3d;
        }
#coin div 
        {
                width: 100%;
                height: 100%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                  border-radius: 50%;
                -webkit-box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
                -moz-box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
                box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
                position: absolute;
                top: 0;
                left: 0;
                backface-visibility: hidden;
        }
.side-a 
        {
                background-color: #C2185B;
                display:flex;
                justify-content:center;
                align-items:center;
                font-size:2rem;
                z-index: 2;
                transform: rotateY(0deg);
        }
.side-a h2
        {
                color:#fefefe;
        }
.side-b 
        {
                background-color: #fefefe;
                display:flex;
                justify-content:center;
                align-items:center;
                font-size:2rem;
                color:#fefefe;
                z-index: 1;
                transform: rotateY(180deg);
        }
.side-b h2
        {
                color:#C2185B;
        }
nav img 
        {
                width:36px;
                height:36px;
                margin-right:.5rem;
        }

nav button      
        {
                margin:0;
                background-color: #C2185B;
                border: 1.5px solid #C2185B;
                font-size:20px;
                padding:.4rem 1rem;
                color:#fefefe;
                font-family: 'Roboto';
        }
nav button:hover        
        {
                background-color:#C2185B;
                border-color: #C2185B;
        }
.vh100
        {
            height:calc(100vh - 55px);
        }
.height-100
        {
            height:100%;
        }
.height-50
        {
            height:50%;
        }
.flex
        {
                display:flex;
                flex-direction: row;
                justify-content:space-between;
                flex-wrap: wrap;
                align-content:center;
        }
.flex-col
        {
                display:flex;
                flex-direction: column;
                justify-content:center;
                flex-wrap: wrap;
                flex:1;
                width:100%;
        }
img     
        {
                width:auto;
                height:100%;
        }
.center
        {
                text-align: center;
                margin:auto;
        }
.title
        {
                line-height:51px;
                padding:0 8%;
                border-bottom: 2px solid #C2185B;
                margin:0;
                background-color:#fefefe;
        }
#payments 
        {
                text-align: center;
                position: absolute;
                z-index: 100;
                background-color: #fefefe;
                width: 60%;
                height: 95%;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
                border: 7px solid #c2185b;
        }
.payment-wrapper 
        {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content:space-around;
                align-items: center;
        }
.payment-title
        {
                display:flex;
                justify-content:space-between;
                align-items:center;
                width:75%;
        }
.payment-choices
        {
                display:flex;
                justify-content:space-around;
                align-items:center;
        }
.payment-choices button
        {
                background-color:#c2185b;
                color:#fefefe;
        }
.paypal
        {
                flex: .3 .3 3%;
        }
.venmo
        {
                flex:.3 .3 3%;
        }
.payment-choices img
        {
                width:75%;
                height:auto;
                margin:auto;
        }
header
        {
                background-size: contain;
                background-position: center;
                text-align:center;
                height:auto;
                
        }
.header-wrapper
        {
                margin-top:-3rem;
        }
.head-title
        {
                align-self:center;
        }
.row1 img
        {
                top:100px;
        }
.row2 img
        {
                bottom:100px;
        }
header img
        {
                width:80%;
                height:auto;
        }
figure 
        {
                flex:.9;
                margin:0;
                text-align:center;
        }
.figcap-right
        {
                flex:1;
                align-self:center;
                margin:2.5rem;
        }
.figcap-left
        {
                flex:1;
                align-self:center;
                order:-1;
                margin:2.5rem;
                text-align:left;
        }
.lux-hair
        {
                background-color: transparent;
                position:sticky;
                top:0;
                z-index:20;
                display:flex;
                justify-content:center;
                width: fit-content;
                white-space: nowrap;
                margin: auto;
                margin-bottom:8rem;
        }
#luxHair
        {
                margin-bottom: 8rem;
        }
.original-halo
        {
                background-color:#efede9;
                text-align:left;
                color:black;
                display:flex;
                justify-content:space-evenly;
                flex-direction:row;
                padding-top:2rem;
                position:sticky;
                top:55px;
                z-index:1;

        }
.original-halo figcaption
        {
                align-self:center;
        }
.lux-hair-picture
        {
                
        }
.lux-hair-inner-right
        {
                display:flex;
                flex-direction:column;
                flex:1;
                justify-content:center;
                align-self:center;
                margin-right:2rem;
        }
.hair-pic
        {
                width:auto;
                
        }
.lux-hair-inner-left
        {
                display:flex;
                flex-direction:column;
                flex:1;
                order:-1;
                justify-content:center;
                align-self:center;
                margin-left:2rem;
        }
.lux-hair-picture
        {
                text-align:left;
        }
.hair-info
        {
                display:none;
                opacity:0;
                align-self:center;
                width:100%;
                margin:1rem;
                text-align:left;
                transition: all 1500ms ease-in-out;
        }
.hair-info p
        {
                margin:1 !important;
        }
.layered-halo
        {
                background-color:#efede9;
                text-align:left;
                color:black;
                display:flex;
                justify-content:flex-start;
                position:sticky;
                top:55px;
                z-index:2;
        }
.lay-hair-picture
        {
                text-align:right;
        }
.layered-halo figcaption
        {
                align-self:center;
        }
.hair-sizes
        {
                opacity:0;
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                z-index:100;
                background-color:#fefefe;
        }
.hair-sizes img
        {
                width:100%;
                height:auto;
                padding-top:125px;
        }
.the-fall
        {
                background-color:#efede9;
                text-align:left;
                color:black;
                display:flex;
                justify-content:flex-start;
                position:sticky;
                top:55px;
                z-index:4;
        }
.the-fall-picture
        {
                text-align: right;
        }
.the-fall figcaption
        {
                align-self:center;
        }    
        
.the-ponytail
        {
                background-color:#efede9;
                text-align:left;
                color:black;
                display:flex;
                justify-content:flex-end;
                position:sticky;
                top:55px;
                z-index:3;
        }
.pony-tail-picture
        {
                flex:1;
                text-align: left;
        }
.the-ponytail figcaption
        {
                align-self:center;
        }
#color-collection
        {
                
                display:flex;
                flex-direction: column;
        }
.color-collection-title
        {
                position:sticky;
                top:0;
                z-index:30;
                display:flex;
                justify-content:center;
                margin-top:4rem;
                width: fit-content;
                white-space: nowrap;
                margin: auto;
        }
.color-collection
        {
                background-color:#fefefe;
                display:flex;
                justify-content: space-evenly;
                flex-wrap:wrap;
                margin-top:auto;
                margin-bottom:auto;
                height:auto;
                align-items:center;
                margin:10rem 5rem;
        }
.colors
        {
                background: linear-gradient(0deg,rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.30)),url('../img/1.jpg') no-repeat center;
                background-size: cover;
                color:white;
                cursor: pointer;
                margin:1rem;
                height:200px;
                display:flex;
                flex:1 1 auto;
        }
.bcolor
        {
                background: linear-gradient(0deg,rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.30)),url('../img/B427.jpg') no-repeat center;
                background-size:cover;
        }
.colors h2      
        {
                padding:1rem;
        }
.color-list
        {
                display:none;
                position:absolute;
                display:flex;
                flex-direction:column;
                width:100%;
                height:100%;
                left:0;
                top:0;
                background-color:#fefefe;
                z-index:100;
        }
.color-list img
        {
                height:auto !important;
                width:100% !important;
        }    
.x-close
        {
                font-size: 2rem !important;
                color: #C2185B;
                align-self:center;
                cursor: pointer;
                font-weight:bold;
        }
.color-title
        {
                display:flex;
                padding-top:1rem;
                justify-content:space-around;
                position:fixed;
                width:100%;
                background-color:#fefefe;
        }
.color-wrapper
        {
                margin:2rem;
                margin-top:7rem;
                display:flex;
                flex-wrap:wrap;
                justify-content:center;
        }
.color-subtitle
        {
                margin:2;
        }
.color-wrapper div
        {
                margin:1rem 2rem;
                text-align:center;
                width:30vh;
        }
.secret
        {
                background:url('../img/Natalie1Slant.jpg') no-repeat;
                background-size:contain;
                background-position: center;
                color:white;
                display:flex;
                flex-direction:column;
                justify-content:center;
                align-content:center;
                height:calc(100vh - 55px);
                margin-bottom:8rem;
        }
.secret-words
        {
                padding:2rem;
                background-color:#c2185b;
                color:white;
                margin:0 35% 10rem;
        }
#testimonials
        {
                position:sticky;
                top:0;
                z-index:40;
                display:flex;
                justify-content:center;
                margin-bottom:5rem;
        }
.quotes
        {
                
                text-align:center;
                margin-bottom:4rem;
        }
.quote-mark
        {
                font-family:'Lily Script One', cursive;
                font-size:5rem;
                height:7vh;
                margin:0;
        }
.testimonial
        {
                margin:1rem;
                
                display:flex;
                flex-direction:column;
                justify-content: center;
                flex:1;
        }
.testi-pic
        {
                height:60vh;
        }
.testi-pic img 
        {
                width:auto;
                height:inherit;
        }
footer  
        {
                height:70px;
                border-top:1.5px solid #C2185B;   
                text-align:center;
        }
footer img
        {
                margin-top:1rem;
                width:52px;
                height:52px;
        }
footer p
        {
                font-size:14px;
        }


/*++++++++++++++____START MOBILE____++++++++++++++++*/

@media screen and (max-width: 966px){
        
        html, body
                {
                        font-size:80%;
                }
        .body-wrapper
                {
                        margin:0;
                }
        .vh100
                {
                        height:auto;
                }
        .flex
                {
                        flex-direction: column;
                }
        .contact
                {
                        margin:0;
                }
        .contact a
                {
                        font-size:16px;
                }
        #coin
                {
                        width:36px;
                        height:36px;
                }
        nav img
                {
                        display:none;
                }
        nav button
                {
                        margin:0;
                        font-size:14px;
                        padding:.4rem;
                }
        #payments
                {
                        width:90%;
                        height:90%;
                }
        .payment-choices
                {
                        flex-direction:column;
                        height:90%;
                }
        .venmo img   
                {
                        display:none;
                }
        header
                {
                        height:auto;
                        margin-bottom:5rem;
                }
        .header-wrapper
                {
                        margin-top:3rem;
                }
        .row1 img
                {
                        top:0;
                }
        .row2 img
                {
                        bottom:0;
                }
        figure img
                {
                        width:75%;            
                }
        .title
                {
                        padding:1rem;
                }
        .lux-hair, .color-collection-title, #testimonials
                {
                        position:unset;
                        z-index:0;
                        white-space:normal;
                        margin-bottom:5rem;
                }
        .original-halo, .layered-halo, .the-ponytail, .the-fall
                {
                        flex-direction:column;
                        height:auto;
                        position:unset;
                        z-index:0;
                }
        .lux-hair-picture
                {
                        height:auto;
                }
        .hair-pic
                {
                        width:100%;
                        height:auto;
                        max-width:425.6px;
                }
        .lux-hair-inner-left
                {
                        order:0;
                        margin:1rem;
                }
        .lux-hair-inner-right
                {
                        margin:1rem;
                }
        #luxHair
                {
                        margin-bottom:5rem;
                }
        .color-collection
                {
                        margin:5rem 0;
                }
        .secret
                {
                        margin-bottom:-2rem;
                }
        .quote-text
                {
                        text-align:left;
                }

}

@media screen and (min-width: 2560px){
        html, body
                {
                    font-size:150%;
                }
}