/* Basic
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
	font-family: 'Josefin Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 2rem;
  /* background-color: #1f7a7a; */ /* #ebfafa; */
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Averia Serif Libre', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header {
  margin-top: 35px;
}

header a {
  color: #555;
  text-decoration: none;
}

header a:hover {
  color: #555;
  text-decoration: none;
}

/* Header - Logo
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#logo {
  float: none;
  text-align: center;
  margin: 0 auto;
}

/* Larger than tablet */
@media (min-width: 750px) {
  #logo {
    float: left;
    text-align: left;
  }
}

#logo h1, #logo h2 {
  font-family: 'Josefin Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  margin-bottom: 0;
}

#logo h1 {
  text-transform: uppercase;
  font-size: 3rem;
}

#logo h2 {
  text-transform: lowercase;
  font-size: 2.2rem;
}

/* Larger than tablet */
@media (min-width: 750px) {
  #logo h1, #logo h2 {
  }
}

/* Header - Nav
–––––––––––––––––––––––––––––––––––––––––––––––––– */

nav {
  margin-top: 10px;
  float: none;
  font-family: 'Josefin Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav li {
  display: inline-block;
  margin: 0 16px;
  font-size: 1.8rem;
}

nav a {
  text-decoration: none;
  cursor: pointer;
  color: #1f7a7a;
}

nav a.selected {
  border-bottom: 1px solid #1f7a7a;
}

nav a:hover {
  color: #1f7a7a;
  border-bottom: 1px solid #1f7a7a;
}

/* Larger than tablet */
@media (min-width: 750px) {
  nav {
    margin-top: 0;
    float: right;
    text-align: right;
  }
  nav li {
    margin: 0 0 0 20px;
    font-size: 2rem;
  }
}

/* Radio Buttons for Speech Bubbles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[name="servicesGroup"] {
  display: none;
}

/* Speech Bubbles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.bubble-wrapper {
  padding: 10px 0px;
  clear: both;
  margin: 0 auto 30px;
  position: relative;
  cursor: pointer;
}

.bubble {
  background-color: #007399;
  color: white;
  text-align: center;
  padding: 15px 10px;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.bubble:after {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width: 30px 0 0 20px; /* vary these values to change the angle of the vertex */
  border-style: solid;
  border-color: #007399 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.bubble h1, .main-bubble h1 {
  font-size: 2rem;
  margin-bottom: 0;
  letter-spacing: 0;
}

.about-bubble h1 {
  font-size: 2.5rem;
  margin-bottom: 0;
  letter-spacing: 0;
}

.main-bubble-wrapper {
  padding: 20px 0px;
  clear: both;
  margin: 0 auto;
  width: 290px;
  position: relative;
} 

.main-bubble {
  text-align: center;
  color: white;
  padding: 50px 5px;
  -webkit-border-top-left-radius: 1600px 700px;
  -webkit-border-top-right-radius: 1600px 700px;
  -webkit-border-bottom-right-radius: 1600px 700px;
  -webkit-border-bottom-left-radius: 1600px 700px;
  border-radius: 1600px / 700px;
  background-color: #1f7a7a;
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#1f7a7a), to(#2aa2a2));
  background:-moz-linear-gradient(#1f7a7a, #2aa2a2);
  background:-o-linear-gradient(#1f7a7a, #2aa2a2);
  background:linear-gradient(#1f7a7a, #2aa2a2);
}

/* creates part of the curve */
.main-bubble:before {
  content:"";
  position:absolute;
  z-index:-1;
  top: 5px;
  left: 20%;
  height: 60px;
  border-left: 60px solid #1f7a7a;
  background: #1f7a7a; /* need this for webkit - bug in handling of border-radius */
  /* css3 */
  -webkit-border-top-left-radius: 70px 60px;
  border-top-left-radius: 70px 60px;
  /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
  -webkit-transform:translate(0, -2px) rotate(-10deg);
  -moz-transform:translate(0, -2px) rotate(-10deg);
  -ms-transform:translate(0, -2px) rotate(-10deg);
  -o-transform:translate(0, -2px) rotate(-10deg);
  transform:translate(0, -2px) rotate(-10deg);
}

/* creates part of the curved pointy bit */
.main-bubble:after {
  content:"";
  position:absolute;
  z-index:-1;
  top: 5px;
  left: 20%;
  width: 52px;
  height: 60px;
  background: #fff;
  /* css3 */
  -webkit-border-top-left-radius:40px 50px;
  border-top-left-radius:40px 50px;
  /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
  -webkit-transform:translate(40px, -20px);
  -moz-transform:translate(40px, -20px);
  -ms-transform:translate(40px, -20px);
  -o-transform:translate(40px, -20px);
  transform:translate(40px, -20px);
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
  .main-bubble-wrapper {
    padding: 30px 0px;
    width: 450px;
  } 
  .main-bubble {
    -webkit-border-top-left-radius: 850px 250px;
    -webkit-border-top-right-radius: 850px 250px;
    -webkit-border-bottom-right-radius: 850px 250px;
    -webkit-border-bottom-left-radius: 850px 250px;
    border-radius: 850px / 250px;
  }
  .bubble h1, .main-bubble h1, .about-bubble h1 {
    font-size: 2.5rem;
  }
}

/* Larger than tablet */
@media (min-width: 750px) {
  .bubble {
    background-color: #d9e6f2;
    color: #555;
  }

  .bubble:after {
    border-color: #d9e6f2 transparent;
  }

  .bubble:hover, input[name="servicesGroup"]:checked + label .bubble {
    background-color: #007399;
    color: white;
  }

  .bubble:hover:after, input[name="servicesGroup"]:checked + label .bubble:after {
    border-color: #007399 transparent;
  }

  .main-bubble-wrapper {
    padding: 40px 0px;
    width: 650px;
  } 
  .main-bubble {
    -webkit-border-top-left-radius: 1200px 250px;
    -webkit-border-top-right-radius: 1200px 250px;
    -webkit-border-bottom-right-radius: 1200px 250px;
    -webkit-border-bottom-left-radius: 1200px 250px;
    border-radius: 1200px / 250px;
  }
  .bubble h1 {
    font-size: 2rem;
  }
  .main-bubble h1, .about-bubble h1 {
    font-size: 3rem;
  }
  /* creates part of the curve */
  .main-bubble:before {
    content:"";
    position:absolute;
    z-index:-1;
    top: 20px;
    left: 15%;
    height: 60px;
    border-right: 65px solid #1f7a7a;
    border-left: none;
    background: #1f7a7a; /* need this for webkit - bug in handling of border-radius */
    /* css3 */
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 70px 60px;
    border-top-right-radius: 70px 60px;
  }
  /* creates part of the curved pointy bit */
  .main-bubble:after {
    content:"";
    position:absolute;
    z-index:-1;
    top: 15px;
    left: 13%;
    width: 52px;
    height: 60px;
    background: #fff;
    /* css3 */
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:40px 50px;
    border-top-right-radius:40px 50px;
    /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
    -webkit-transform:translate(-18px, -2px);
    -moz-transform:translate(-18px, -2px);
    -ms-transform:translate(-18px, -2px);
    -o-transform:translate(-18px, -2px);
    transform:translate(-18px, -2px);
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {
  .main-bubble-wrapper {
    width: 850px;
  } 
  .main-bubble {
    -webkit-border-top-left-radius: 1400px 250px;
    -webkit-border-top-right-radius: 1400px 250px;
    -webkit-border-bottom-right-radius: 1400px 250px;
    -webkit-border-bottom-left-radius: 1400px 250px;
    border-radius: 1400px / 250px;
  }
  .bubble h1 {
    font-size: 2.8rem;
  }
  .main-bubble h1, .about-bubble h1 {
    font-size: 4rem;
  }
}

/* Bordered Box
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bordered-box {
  border: 1px solid #007399;
  padding: 20px;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  margin-bottom:20px;
}

.bordered-box h5 {
  color: #007399;
}

.bordered-box p, .bordered-box li {
  font-weight: 300;
  font-size: 1.8rem;
}

.bordered-box ul {
  list-style: none;
}

.bordered-box li {
  margin-left: 20px;
}

.bordered-box li:before {    
  font-family: 'FontAwesome';
  content: '\f058';
  margin:0 10px 0 -20px;
  font-size: 1.8rem;
  color: #007399;
}

.large.bordered-box {
  display: none;
}

.mobile.bordered-box {
  display: block;
}

/* input[name="servicesGroup"]:checked + label .mobile.bordered-box {
  display: block;
} */

/* Larger than tablet */
@media (min-width: 750px) {
  .bordered-box h5 {
    font-size: 2rem;
  }
  .bordered-box p, .bordered-box li, .bordered-box li:before {
    font-size: 2rem;
  }
  /*input[name="servicesGroup"]:checked + label .mobile.bordered-box {
    display: none;
  }*/
  .mobile.bordered-box {
    display: none;
  }
  .large.bordered-box {
    display: block;
  }
}

/* About Bubble
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.about-bubble-wrapper {
  clear: both;
  position: relative;
  padding: 25px 0px;
  margin: 0 auto;
  width: 90%;
}

.about-bubble {
  padding: 25px;
  color: #1a6565; /* white */
  border: 1px solid #1a6565;
  /*background-color: #1f7a7a;
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#1f7a7a), to(#2fb6b6));
  background:-moz-linear-gradient(#1f7a7a, #2fb6b6);
  background:-o-linear-gradient(#1f7a7a, #2fb6b6);
  background:linear-gradient(#1f7a7a, #2fb6b6);*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.about-bubble h1 {
  margin-bottom: 10px;
}

.about-bubble a {
  /*color: #c2efef;*/
  color: #2fb6b6;
  text-decoration: none;
}
.about-bubble a:hover {
  color: #1a6565;
  /* color: white; */
  text-decoration: underline;
}

.about-bubble ul {
  list-style: none;
}

.about-bubble li {
  font-weight: 300;
  font-size: 1.8rem;
  margin-left: 20px;
  margin-bottom: 0;
}

.about-bubble li:before {    
  font-family: 'FontAwesome';
  content: '\f058';
  margin:0 10px 0 -20px;
  font-size: 1.8rem;
}

.about-bubble:before {
  content: "";
  position: absolute;
  top: -15px;
  left: 43%;
  border: 20px solid transparent;
  border-bottom-color: #1a6565;
  display: block;
  width: 0;
}

.about-bubble:after {
  content: "";
  position: absolute;
  top: -14px;
  left: 43%;
  border: 20px solid transparent;
  border-bottom-color: white;
  display: block;
  width: 0;
}

/* Larger than tablet */
@media (min-width: 750px) {
  .about-bubble-wrapper {
    padding: 45px 0px;
  }
  .about-bubble:before {
    top: 5px;
    left: 90px;
  }

  .about-bubble:after {
    top: 6px;
    left: 90px;
  }
}

/* Contact
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.contact {
  text-align: center;
  margin-bottom: 40px;
}

.contact .button {
  display: block;
  margin: 10px auto;
  background-color: #d9e6f2;
  color: #555;
  font-size: 1.8rem;
  width: 200px;
  height: 50px;
  line-height: 53px;
  border-radius: 8px;
  border: 1px solid #007399;
}

.contact .button:hover {
  background-color: #007399;
  color: white;
}