@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
@import url("//fonts.googleapis.com/css?family=Muli:300,400,300italic,400italic");
@import url("//fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("//fonts.googleapis.com/css?family=Dancing+Script:400,700");


@import url(foundation.css);
@import url(CommonStyles.css);

@import url(font-awesome/css/font-awesome.css);

/*  colors   
----------------------------------------- */

.MainTextColour {
    color: #010101;
}

	.TxtBlack  	 {	color:#101318;  	}
    .TxtWhite    {  color: #fff;        }
    .TxtLtGrey   {  color: #bbbbbb;     }

/*  Typefaces   
----------------------------------------- */		
	.Montserrat {	font-family: 'Montserrat', sans-serif; font-weight:400	}
	.OpenSans 	{	font-family: 'Open Sans', sans-serif;	}	
	.Muli		{	font-family: 'Muli', sans-serif;	    }	
	.Dancin		{	font-family: 'Dancing Script', cursive;	}


/*  Shared Styles   
----------------------------------------- */

html {
    -webkit-font-smoothing: antialiased !important;
}

body {
    background: #fff;
    color: #111;
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size:1rem;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    position: relative;
    cursor: default; 
    -webkit-font-smoothing: antialiased !important;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    padding: 0;
}

h1 { 
		font-size: 2.75rem;
		font-family: 'Muli', sans-serif;
		font-weight:300;
        margin:0 0 1.15rem 0;
}
h2 {
		font-size: 2.35rem;
		font-family: 'Muli', sans-serif;
		font-weight:300;
}
h3 { 
		font-size: 2rem;
		font-family: 'Muli', sans-serif;
		font-weight:300;
}
h4 { 
		font-size: 1.75rem;
		font-family: 'Muli', sans-serif;
		font-weight:400;
}
h5 { 
		font-size: 1.5rem;
		font-family: 'Muli', sans-serif;
		font-weight:400;
}
h6 { 
		font-size: 1.25rem;
		font-family: 'Muli', sans-serif;
        margin:0 0 0.75rem 0;
		font-weight:400;
}


p { 
    font-family: 'Open Sans', Helvetica, Arial, sans-serif; 
    line-height: 1.5rem; 
    margin-bottom: 1.5rem;
    -webkit-font-smoothing: antialiased !important;
}

.HeadBG {
    background-color:#010101;
    /*background-image:url(../Images/SalonSpa_HeadBg.png);*/
}

.HeadLogo {
    background-image:url(../Images/SalonSpa_WebHead.png);
    background-position:center center;
    display:block;
    height:175px;
    width:300px;
}

header, nav, footer {

}

header {
    margin: 1.25rem 0;
}

nav {

}

footer {
    padding:1.5rem 0;
    background-color:#010101;
    color:#fff;
    line-height:1.25rem;
}

input, textarea, select {
    border-radius:0;
}

.TxtSm {
    font-size:0.777rem
}

.TxtMid {
    font-size:0.875rem
}


.ButtonPlacement {
    position:relative;
    top:-70px;
    left:290px;
    z-index:1005
}



/* ----------------------------------------------------------------------------------
                        Heading Backgrounds 
---------------------------------------------------------------------------------- */

.ThemeBgColourVyLt {
    background-color:#fcf4f4;   
}

.ThemeBgColourLt {
    background-color:#f7a7a7;   
}
.ThemeBgColourMd {
    background-color:#e45d5d;
}
.ThemeBgColourDk {
    background-color:rgba(0,0,0,0.35);
}

.ThemeBgColourDkGrey {
    background-color:#333;
}

.ThemeHeadingPadd {
    padding:0.425rem 0.625rem;
}
/* ----------------------------------------------------------------------------------
                        Social Network Links
---------------------------------------------------------------------------------- */

.SocialNetLinks {
    font-size: 0.875rem;
    height:26px;
    width:26px;
    background-color: #fff;
    color: #010101;
    border-radius: 50%;
    padding: 0.5rem;
        transition: all 0.9s ease,
                padding 0.8s linear;
}
.SocialNetLinks:hover {
    background-color: #222;
    color: #fff;
        transition: all 0.9s ease,
                padding 0.8s linear;
}


/* Borders 
----------------------------------------- */

.LightRuleTB {
    border-top: thin solid #e1e1e1;
    border-bottom: thin solid #e1e1e1;
}

.LightRuleB     {   border-bottom: thin solid #e1e1e1;  }
.LightRuleR     {   border-right: thin solid #bbb;  }

.ImgBorderGry	{	border: thin solid #bbb;		}
.ImgBorderDkGry	{	border: thin solid #666;		}

.FormBg {
    background-color: #e1e1e1;
    color: #fff;
    text-align:center;
}

optgroup {
    padding:50px;
    font-size:1rem;
}

.Rotate45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.RotateMinus45 {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}



/* FORMS 
----------------------------------------- */

.st_form_div {
	padding:10px 12px;
	margin:4px 0;
	background-color: #f2f2f2;
	display:block;
}

.st_pink 	{	color:#d26571;	}

.st_submitDk 	{
    font-size:0.9rem;
	background-color:#333; 
	color:#fff;
	text-align:center;
	cursor:pointer; 
	padding:10px 14px;
    border:0;
	}
	
.st_submitDk:hover {
	background-color:#d26571; 
	color:#fff; 
	}



/* Links 
----------------------------------------- */

a { 
    color: blue; 
    text-decoration: none; 
    line-height: inherit;
}
a:hover { 
    color: purple; 
}
a:focus { 
    outline: #00ffff; 
}



a.HeadLink { 
    font-size:1.5rem !important;
    color:#fff;
    text-decoration: none; 
    line-height: inherit; 
    display:inline-block;
    padding:12px 17px;
    background-color:rgba(0,0,0,0.35);
        -webkit-transition: background-color 800ms ease-out;
        -moz-transition: background-color 800ms ease-out;
        transition: background-color 800ms ease-out;
}
a.HeadLink:hover { 
    color:#f2f2f2;
    background-color:rgba(0,0,0,0.6);
}

a.link1 { 
    background-color: #d26571;
    color:#fff;
    text-decoration: none; 
    line-height: inherit; 
    padding:0.85rem 1.66888rem;
    display:inline-block;
        -webkit-transition: background-color 800ms ease-out;
        -moz-transition: background-color 800ms ease-out;
        transition: background-color 800ms ease-out;
}
a.link1:hover { 
    background-color: #a3443e;
    color: #fff; 
}

.LinkOpacity75:hover {
    opacity:0.75;
}

/* TimeLine  
----------------------------------------- */


.AppointmentTimeLineContainer {
    height:auto; 
    width:100%; 
    overflow-x:scroll; 
    overflow-y: hidden; 
    border:0 solid #d9d9d9;
}
.TimeLineSlotBusy {
    display:inline-block;
    color:#fff;
    background-color:#9e0b0f;
    text-align:center;
    padding: 0.5rem 1.75rem 0.75rem;
    font-size: 0.6875rem;
}
.TimeLineSlotFree {
    display:inline-block;
    color:#fff;
    background-color:#43ac6a;
    text-align:center;
    padding: 0.5rem 1.75rem 0.75rem;
    font-size: 0.6875rem;
}



/**** THESE ARE NEEDED FOR MASONRY PLUGIN ****/	
	#container {  
	  float:none;
	  background: #ffffff;
	  padding: 0;
	  margin:0 auto;
	  margin-bottom:30px;
	  /* optional */
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	  /* content-box is NEEDED. if border-box is enabled
	     then it when Masonry calculates the height and width
		 of the container it counts incorrectly and the result
		 images running to the edge of the container on the right
		 and bottom sides. Only apply content-box to the container. */
	  -webkit-box-sizing:content-box;
	  -moz-box-sizing:content-box;
	  box-sizing:content-box;
	}
	
	.box {
	  margin: 5px;
	  float: left;
	  /* optional */
	  -webkit-border-radius: 5px;
	  -moz-border-radius: 5px;
	  border-radius: 5px;
	}
	.box img, { display: block; width: 100%; }
	
	/* unfortunately masonry needs hard pxs for images */
	.col1 { width: 120px; }
	.col2 { width: 200px; }
	.col3 { width: 280px; }
	.col4 { width: 380px; }
	.col5 { width: 480px; }
	.col1 img { max-width: 120px; }
	.col2 img { max-width: 200px; }
	.col3 img { max-width: 280px; }
	.col4 img { max-width: 380px; }
	.col5 img { max-width: 480px; }
	
	/* animations for the transition/reordering */
	.transitions-enabled.masonry,
	.transitions-enabled.masonry .masonry-brick {
	  -webkit-transition-duration: 0.7s;
	  -moz-transition-duration: 0.7s;
	  -ms-transition-duration: 0.7s;
	  -o-transition-duration: 0.7s;
	  transition-duration: 0.7s;
	}
	.transitions-enabled.masonry {
	  -webkit-transition-property: height, width;
	  -moz-transition-property: height, width;
	  -ms-transition-property: height, width;
	  -o-transition-property: height, width;
	  transition-property: height, width;
	}
	.transitions-enabled.masonry  .masonry-brick {
	  -webkit-transition-property: left, right, top;
	  -moz-transition-property: left, right, top;
	  -ms-transition-property: left, right, top;
	  -o-transition-property: left, right, top;
	  transition-property: left, right, top;
	}




/* Media Queries
----------------------------------------- */



@media only screen and (max-width: 640px) {


a.HeadLink { 
    font-size:1.25rem;
    color:#fff;
    text-align:center;
    text-decoration: none; 
    line-height: inherit; 
    /*width:300px;*/
    display:block;
    padding:12px 0;
    background-color:rgba(0,0,0,0.35);
        -webkit-transition: background-color 800ms ease-out;
        -moz-transition: background-color 800ms ease-out;
        transition: background-color 800ms ease-out;
    margin-right:0;
    margin-bottom:3px;
}
a.HeadLink:hover { 
    color:#f2f2f2;
    background-color:rgba(0,0,0,0.6);
}


/*.HeadLogo {
    background-image:url(../Images/SalonSpa_WebHead_Lrg.png);
    background-repeat:no-repeat;
    display:block;
    border:yellow thin solid;
    height:350px;
    width:600px;
}*/

}