/* Styles for abbaswedishmassage.com 

Order of load for style sheets:

1. reset.css (html5doctor.com Reset Stylesheet - this zeros out all default browser styles so that ours are actually what styles the content)

2. (link to) Foundation 6 styles

3. style.css (THIS document - all custom styles)

*/

/* The following styles are homegrown; intended to supplement Foundation's CDN content with my own customization. */


/* recommended to improve accessibility across browsers */
@-ms-viewport{ width: device-width; }


/* media="all" styles below */

html {
  height: 100%;
  font-size: 62.5%;
}

body {
  height: 100%;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  /* background-color: #b2edb2; */
  background-color: #c7ebc7;
  font: 1.75em/1.5em sans-serif;
  /* font: 1.6rem sans-serif; */
}

.top-bar {  
  padding: 2rem 1rem;
  text-align:left;
  height: 8em;
  background-color: #c7ebc7;
}

.cent {
  text-align: center;
}

.business-name {
  padding: 1rem 1rem; 
}

.business-name h1 {
  font-family: 'Oswald', sans-serif;
  color: #5C5C5C;
  font-size: 2.25em;
  line-height: 1.0;
  text-transform: uppercase;
}

.business-name p {
  font-family: sans-serif;
  color: #5C5C5C;
  text-transform: uppercase;
  line-height: 1.5;
}

.bg-dark {
  background-color: #196F3D !important;
}

/* ============   Web Body   ===============  */


/* 3-col ROW <div class="grid-x grid-margin-x flex-center"> */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-x {
  margin: auto;
}


.main-img {
  left: 0;
  top: 0px;
  z-index: 1004;
  width: 100%;
  /* height: 540px; */
  /* height: 460px; */
  padding-top: 1em;
  padding-bottom: 4em;
  background-position: center center;
  background-image: url(../images/water_2kx1334.jpg);
  background-attachment: fixed;
  background-repeat: repeat repeat;
  background-size: cover;
  background-color: transparent;
  border-top: 4px solid #5595b0;
  /* push the h4 below the parallax image down a tad */
  margin-bottom: 24px;
}

.main-img .row {
  width: 100%;
  max-width: 74%;
}

.main-img h2 {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 2.8em;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 2px 4px #000;
  line-height: 1.2em;
  padding: 0 8px;
}

.main-img h3 {
  padding-top: 20px;
  color: #2E2E2E;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0em;
  line-height: 1.4em;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  text-align: center;
}

.box {
  /* background-color: rgba(255,255,255,0.84); */
  background-color: rgba(255,255,255,0.74);
  /* height: 200px; */
  min-height: 14em; /* 224px  bump this down to 160 for sm (max 10 em) - also decrease line height */
  height: 100%;
  /* testing this border to see where to put margins if needed, but may leave it in if it looks ok */
  border: 1px #ccc solid;
  margin-top: 1em;

  /* is there such a thing as gutter in Foundation ? */
  /* margin: 0 0.3em; */
}

/* SASS for content?

.page-menu {
	@include xy-grid();
	.menu-description {
		@include xy-cell();
		@include breakpoint(large) {
			@include xy-cell(5);
		}
		p {
			text-align: center;
			line-height: rem-calc(50);
		}
	}
	.menu-image {
		@include xy-cell();
		@include breakpoint(large) {
			@include xy-cell(7);
		}
		this will stick the image at the bottom of its container no matter the viewport 
		@include flex-align(center, bottom);
		@include flex();
	}
}
*/

.content h4 {
  color:#006400;
  font-size: 1.65em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.content .contact h4 {
  font-size: 1.2em;
  font-weight: bold; 
  padding: 16px 0 8px 0;
}

.content p:nth-child(4) {
  font-size: 1.45em;
  font-weight: bold; 
  padding: 16px 0 8px 0;
}

/* contact icons */
.fi-mail {
  color: #004D00;
  /* darker is #003300; */
}

.fi-telephone {
  color: #004D00;
  /* darker is #003300; */
}
/*  END contact icons */

.contact a:link {
  color: #006400;
  text-decoration: none;
  font-style: italic;
}

.contact a:visited {
  color: #006400;
  text-decoration: none;
  font-style: italic;
}

.contact a:hover {
  /* color: #7aff7a; */
  color: #3c3;
  /* border-bottom: 1px #7aff7a dotted; */
  border-bottom: 1px #3c3 dotted;
  font-style: italic;
}

.contact a:active {
  color: #3c3;
  border-bottom: 1px #3c3 dotted;
  font-style: italic;
}

.content a {
  color: #006400;
  font-family: 'Oswald', sans-serif;
  font-size: 1.125em;
}

.intro {
  padding-right: 1em;
}

.round-img {
  height: 100%;
  border-radius: 50%;
  border: 1px solid #5595b0;
  margin-top: 25%;
  /* margin-top: 1em; */
  /* margin-left: 1.6em; */
}

.round-img-bottom {
  height: 20%;
  border-radius: 50%;
  border: 1px solid #5595b0;
  margin-top: 1em;
  margin-left: 0;
}

/* .clip-ellipse {
  margin-top: 4em;
  margin-left: 4em;
  /* clip-path: ellipse(60px 40px at 75px 30px); */
  /* use this one clip-path: ellipse(120px 80px at 150px 120px); */
  /* vertical below */
  /* clip-path: ellipse(120px 150px at 80px 120px); 
} */



/* ============   FOOTER styles ================  */

footer {
  margin-top: 50px;
  background-color: #2E2E2E;
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-size: auto;
  background-position: left top;
  height: 12%;
  /* padding: 0.75em; */
  /* padding: 2rem 1rem; */
  flex-shrink: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
}
	
footer h5 {
  padding-top: 2rem;
  font-size: 90%;
  font-style: italic;
}

footer p {
  font-size: 80%;
}

footer a:link {
  /* color: #7aff7a; */
  /* color: #006400; */
  color: #009900;
  text-decoration: none;
}

footer a:visited {
  /* color: #7aff7a; */
  color: #006400;
  text-decoration: none;
}

footer a:hover {
  /* color: #009900; */
  color: #3c3;
  text-decoration: none;
  border-bottom: 1px #3c3 dotted;
}

footer a:active {
  /* color: #006400; */
  color: #7aff7a;
  text-decoration: none;
  border-bottom: 1px #7aff7a dotted;
}

/* ==============   Custom Media Queries  ================  */

/* ==============   BREAKPOINTS (from ZURB)  ==============   */

/*
DEFAULT FOUNDATION breakpoints:
small: 0
medium: 640px
large: 1024px
xlarge: 1200px
xxlarge: 1440px
*/

/* 760 - 786 */
/* 47.5 em - 49.1 em */


/* three cols still ok @ 796px - bad btw 634 - 694 */

/* Small ONLY */
/* @media screen and (max-width: 49.9em) { */
@media screen and (max-width: 640px) { 

  .main-img h2 {
    font-size: 1.2em;
    line-height: 1em;
    padding: 0.5rem 0.5rem;
  }

  .box {
    min-height: 100%;
  }

  .round-img {
    display: none;
  }

  .main-img h2 {
    border: 0;
    padding: 24px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 2.4em;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0em;
    line-height: 1.2;
    text-align: center;
    text-shadow: 1px 2px 4px #000;
  }

}



/* Medium ONLY */
/* @media screen and (min-width: 50em) and (max-width: 63.9375em) { */
@media screen and (min-width: 641px) and (max-width: 1024px) { 


/* 695 - 635 makes three center cols TOO NARROW */
  .box {
    height: 100%;
    margin-bottom: 1rem;
  }

  .main-img h3 {
    font-size: 1em;
    line-height: 1.2;
    margin-bottom: 1em;
  }

   ul .no-bullet {
    font-size: 0.6em;
    line-height: 1.4;
  }

  li {
    /* line-height: 1em; */
    font-size: 0.8em;
    line-height: 1.8;
  }

  .main-img p {
    line-height: 1.4;
  }

  .intro {
    padding-right: 0;
  }

  .round-img-bottom {
    display: block;
    height: 20%;
    margin-top: 1em;
    margin-left: 0;
  }

  .round-img {
    display: none;
  }

}

/* Medium and UP */

/* THIS IS 640 */
@media screen and (min-width: 641px) {
  /* 695px - 635 seems to be the breakpoint for the three center cols to start misbehaving */

  /* 745 (46~47 em) makes the rt sidebar img jump BUT doesn't let the left col expand (until 636 ) 
MED and UP  - In other words, there's about a 100px gap where the img jumps before hitting the SM breakpoint
*/

} 




/* Large ONLY */
@media screen and (min-width: 1025px) and (max-width: 1200em) {

}


/* Large and UP */

/* @media screen and (min-width: 1025px) { */ 
@media screen and (min-width: 64em) {

  .row {
    max-width: 90rem;
  }

  .column {
    padding-left: 0;
  }

  .column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
    float: left;
  }

  .large-12 {
    width: 85%;
  } 

  .round-img-bottom {
    display: none;
  }

}



@media (max-width: 767.98px) { /* 48 em */

  body {
    font-size: 1.75em;
  }

  .main-img {
    background-attachment: scroll;
    /* height: 400px; */
    min-height: 380px;
    max-height: 100%;
  }

  .main-img h2 {
    border: 0;
    padding: 24px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 2.4em;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 0em;
    line-height: 1.2;
    text-align: center;
    text-shadow: 1px 2px 4px #000;
  }

  .content h4 {
    color:#006400;
    font-size: 1.65em;
    font-weight: bold;
  }

  .content p:nth-child(4) {
    font-size: 1.45em;
  }

  .content a {
    font-size: 1.125em;
  }
/* 
  .round-img {
    display: none;
  }
  */
}