/*Well, here I am again, coding a whole seven hours after the last time I saw this code, and already I am
certain that I have no idea what the fuck I was doing before. I think I need professional help. Not with the code.*/



.sidebar {
height: auto;
width:12%
}



a{text-decoration:none;
color:#00E5FF}

a:hover{
color:#00FF7F}
00FF7F
a:active{
color:#00FFFF}


*/would work if the actual links worked.
a:visited{
color:#9370DB}

img {
  max-width: 100%;
  height: auto;
}





body{
background-color:#000000;
color:#fff;
font-family:'Roboto', sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}


h1{
color:#7DF9FF; 
font-family:'Raleway', sans-serif;}

h2{
color:#7DF9FF;
font-family:'Raleway', sans-serif;
font-size:27px}

h3{
color:#7DF9FF;
font-family:'Raleway', sans-serif;
font-size:21px}

h4{
color:#7DF9FF;
font-family:'Noto Sans KR', sans-serif;
font-size:21px}

h5{
color:#7DF9FF;
font-family:'Noto Sans KR', sans-serif;
font-size:16px}




.container{
overflow:hidden;
margin:.5% .5%;
}

.containerContent{
overflow:hidden;
margin: 30px 30px;
}



.spacer{
width:100%;
margin:auto;
min-height:3%;
overflow:hidden;
}



#mainHeader{
background-color:#121212;
color:#7DF9FF;
font-family:'Comfortaa', cursive;
margin:5%;}



#navBar{
background-color:#0a0a0a;
color:#c9fff4;
margin:.5% .5%;}

#navBar ul{
padding:0;
color:#fff;
list-style:none;
}

#navBar li{
display:inline;
color:#fff;
}

#navBar a{
color:#fff;
text-decoration:none;
font-size:18px;
padding-right:15px;
font-family:'Raleway', sans-serif;

}

#navBar h1{
color:#fff;
font-family:'Raleway', sans-serif;
font-size:20px;
padding-right:20px;
padding-left:0px;
display:inline;
margin-left:2.5%;
text-align:left;
}




#showcase{
background-color:#000000;
background-position:center right;
margin:.5%;
min-height:300px;
margin-bottom:1.5%;
text-align:center;
}

#showcase h1{
color:#fff;
font-size:50px;
line-height:1.6em;
padding-top:30px;
}

#main{
float:left;
width:70%;
padding:0 30px;
box-sizing:border-box;
}

#sideBar{
float:right;
width:30%;
padding:10px;
box-sizing:border-box;
background-color:#333;
color:#fff;
}




#mainFooter{
background:#0a0a0a;
color:#fff;
text-align:center;
padding:20px;
margin-top:40px;
}

@media(max-width:600px){
#main{
width:100%;
float:none;
}
#sideBar{
width:100%;
float:none;
}
}













































/*--------------------------------------
Animation Block Start!
---------------------------------------*/

.layout-dark #particle-line {
    height: 540px;
}
#particles,
#particles-1,
#particle-line,
#particle-dot-line,
#particles-2,
#particle-bubble,
#bw-footer {
/*the width controls the width of the animation, it is left justified, height controls height from onset as defined by the div id particle
line in the html file */
    width: 100%;
    height: 420px;
    background-color: transparent;
    background-position: 50% 50%;
    z-index: 1;
    position: absolute;
}
.parallax {
    padding: 180px;
}
.layout-bw .parallax {
    background: rgba(0, 0, 0, 0) url("http://placehold.it/1854x833") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.layout-dark .parallax {
    background: rgba(0, 0, 0, 0) url("http://placehold.it/1854x833") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.layout-minimal .parallax {
    background: rgba(0, 0, 0, 0) url("http://placehold.it/1854x833") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.layout-makeup .parallax {
    background: rgba(0, 0, 0, 0) url("http://placehold.it/1854x833") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.layout-dental .parallax {
    background: rgba(0, 0, 0, 0) url("http://placehold.it/1854x833") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.layout-yoga .parallax {
    background: rgba(0, 0, 0, 0) url("http://placehold.it/1854x833") center center no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.parallax {
    padding: 125px 0px;
}
.parallax .alt-result-item {
    float: right;
    display: inline-block;
}
.parallax .alt-price-item {
    float: left;
    display: inline-block;
}
.parallax .alt-service-item {
    display: inline-block;
}

/*--------------------------------------
Animation End!
---------------------------------------*/