body {
  background-color: #FFFFFF;
    font-family: "Lato";
    font-weight: 300;
    font-size: 16px;
    color: #555;
    padding-top: 50px;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway";
    font-weight: 300;
    color: #333;
}


/* Paragraph & Typographic */
p {
    line-height: 28px;
    margin-bottom: 25px;
}

.centered {
    text-align: center;
}

/* Links */
a {
    color: #009E8E;
    word-wrap: break-word;

    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #F79E03;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/* ==========================================================================
   Wrap Sections
   ========================================================================== */

#headerwrap {
	/* background-color: #009e8e; */
  /* background-color: #2B7A78; */
	padding-top: 30px;
    /*padding-bottom: 20px;*/
     /* background: url(../png/DoctorWithPatient.jpg) no-repeat center top; */
}

/*

#headerwrap h1 {
	margin-top: 5px;
	color: black;
	font-size: 40px;
	
}

#headerwrap h2 {
    color: black;
    font-size: 30px;
}

*/

#headerwrap h3 {
	color: black;
	font-size: 20px;
}

#headerwrap h5 {
	color: black;
	font-weight: 700;
	text-align: left;
}

#headerwrap p {
	text-align: left;
	color: black
}

#headerwrap h1 {
  margin-top: 5px;
  color: black;
  font-size: 30px;
  text-align: centre;
  padding: 0 10px;
}

#headerwrap h4 {
  margin-top: 5px;
  color: black;
  font-size: 30px;
  text-align: center;
  padding: 0 10px;
}

#headerwrap h8 {
  margin-top: 5px;
  color: black;
  font-size: 20px;
  text-align: center;
  padding: 0 10px;
}

#headerwrap h7 {
  margin-top: 5px;
  color: black;
  font-size: 20px;
  text-align: center;
}

#transbox {
  margin: 0px;
  /*

  background-color: #ffffff;
  opacity: 0.65;
  filter: alpha(opacity=60);  
  */
}


#middlewrap {
    background-color: #009e8e;
    padding-top: 10px;
    /*padding-bottom: 20px;*/
}

#middlewrap h1 {
    margin-top: 5px;
    color: white;
    font-size: 40px;
    
}

#middlewrap h3 {
    color: white;
    font-size: 20px;
}

#middlewrap h5 {
    color: white;
    font-weight: 700;
    text-align: left;
}

#middlewrap p {
    text-align: left;
    color: white
}


/* intro Wrap */

#intro {
	padding-top: 35px;
  font-family: Arial, Helvetica, sans-serif;
	/* border-top: #bdc3c7 solid 5px; */
}

#features {
	padding-top: 40px;
  font-family: Arial, Helvetica, sans-serif;
	/* padding-bottom: 50px; */
    /* background: url(../png/PatientExercise.jpg) no-repeat center top; */
    /* border-top: #bdc3c7 solid 5px; */
}

#features h4 {
    color: black;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

#features .ac a{
	font-size: 20px;
}

/* Showcase Wrap */

#showcase {
	display: block;
	background-color: #34495e;
	padding-top: 50px;
	padding-bottom: 50px;
}

#showcase h1 {
	color: white;
}

#footerwrap {
	background-color: #808080;
	color: white;
	padding-top: 30px;
	padding-bottom: 40px;
	text-align: left;
    /* border-top: #bdc3c7 solid 5px; */
}

#footerwrap h3 {
	font-size: 28px;
	color: white;
}

#footerwrap h1 {
    font-size: 40px;
    color: white;
}

#footerwrap p {
	color: white;
	font-size: 18px;
}

/* Copyright Wrap */

#c {
	background: #222222;
	padding-top: 15px;
	text-align: right;
}

#c p {
	color: white
}

#ifr1 {border:none; height: 100%;}



/*       Just setting CSS for the page   */

* {
  margin: 0;
  padding: 0;
}

html,
css {
  width: 100%;
  height: 100%;
}

.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
}

#workarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1e1a3e;
  font-family: Raleway;
}

#personal {
  color:white;
  text-decoration:none;
  position:absolute;
  bottom:15px;
  right:2%;
}
/*    start code for the actual button:         */


/*   
    Spot is the span on the inside of the href that
    fills the parent and makes the hover and link work
    for the entire div
*/

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/*
    This is the outer svg wrapper that the SVG itself will 
    fill. Multiple svg-wrapper classes can be put side by side.
*/

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  /*make sure to use same height/width as in the html*/
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}
/*
  This is where we define the fill, color, thickness,
  and stroke pattern of the SVG when there is no hover.
  The dasharray and offset together define the line position
  under the words. Here's also where the transition speed is set.
*/

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #009FFD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}
/* 
    Pushing the text up into the SVG. Without this the
    text would be below the div's.
*/

#text {
  margin-top: -35px;
  text-align: center;
}

#text a {
  color: black;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.2em;
}
/* 
    Changing the shape on hover. I change the color of the stroke,
make it thinner, then set it to again wrap around the entire parent element.
*/

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #06D6A0;
}


.callus {
    position: fixed;
    top: 125px;
    border-radius: 4px;
    right: -190px;
    /*background: url("/png/callus.png") no-repeat 8px center rgba(50, 50, 50, .8);*/
    background: url("/png/callus.png") no-repeat 8px center rgba(204, 151, 17, 1);
    z-index: 10
}

.callus:hover, .quick-question:hover {
    right: -26px
}

.callus span, .quick-question span {
    padding: 0 28px;
    position: relative;
    top: 0;
    opacity: 0
}

.callus:hover span, .quick-question:hover span {
    opacity: 1
}

.callus a, .quick-question a {
    color: #fff;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 15px;
    display: block 
}


.sideappt {
    position: fixed;
    top: 200px;
    border-radius: 4px;
    right: -190px;
    /*background: url("/png/icons8-calendar-17.jpg") no-repeat 8px center rgba(50, 50, 50, .8);*/
    background: url("/png/icons8-calendar-17.jpg") no-repeat 8px center rgba(204, 151, 17, 1);
    z-index: 10
}

.sideappt:hover, .quick-question:hover {
    right: -26px
}

.sideappt span, .quick-question span {
    padding: 0 28px;
    position: relative;
    top: 0;
    opacity: 0
}

.sideappt:hover span, .quick-question:hover span {
    opacity: 1
}

.sideappt a, .quick-question a {
    color: #fff;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 15px;
    display: block 
}

/* 
For the Front Page
*/


our-services
{
  display: flex;
}

our-services p
{
  min-height: 40px;
  padding: 0 10px;

  font-size: 16px;
  line-height: 25px;
  display: block;
  margin-left: 0px;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: left 5px;
  margin-bottom: 4px;
}

 our-services p:hover
 {
    font-weight: 600;
    display: inline-block;
 } 

#our-services-second-part
{
  margin-left: 89px;
}


our-services a
{
  color: #fff;
  text-decoration: none;
}

@media  screen and (max-width: 1250px)
{ 
  #arrow-img-desktop-container
  {
    margin-left: -128px;
    margin-top: 83px;
  }

  #arrow-img-desktop-container img
  {
    width: 390px;
    transform: rotate(8deg);
  }
}

@media  screen and (max-width: 1180px)
{ 
  #arrow-img-desktop-container
  {
    display: none;
  }

  header h1
  {
    font-size: 30px;
        line-height: 34px;
        margin-top: 55px;
  }

  #our-services-second-part
  {
    margin-left: 5px;
  }

  our-services p
  {
    min-height: 33px;
  }

  #arrow-img-ipad-container
  {
    display: block;
    margin-left: -127px;
    margin-top: 100px;
  }

  #arrow-img-ipad-container img
  {
    height: 250px;
      width: 239px;
      transform: rotate(2deg);
  }
}

@media  screen and (max-width: 935px)
{
  header
  {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media  screen and (max-width: 935px)
{
  header h1
  {
    font-size: 28px;
  }

  #header-info
  {
    font-size: 15px;
    line-height: 1.4;
  }

  our-services p
  {
    font-size: 16px;
  }
}

@media  screen and (max-width: 885px)
{
  #arrow-img-ipad-container
  {
    display: none;
  }

  section
  {
    margin-right: 35px;
  }
}

@media  screen and (max-width: 840px)
{
  header
  {
    display: block;
    padding: 0;
    margin: 0;
    padding-top: 35px;
    padding-bottom: 30px;
    text-align: center;
  }

  section, #arrow-img-desktop-container, #arrow-img-ipad-container, our-services,#our-services-second-part,#header-info,section h1
  {
    padding: 0;
    margin: 0;
  }

  header h1
  {
    font-size: 25px;
    line-height: 31px;
  }

  #header-info
  {
    margin-top: 15px;
  }

  our-services
  {
    
    display: flex;
    justify-content: space-around;
    text-align: left;
    margin-top: 23px;
  }

  our-services p
  {
      min-height: 34px;
      font-size: 13px;
      line-height: 23px;
      padding-right: 0px;
      margin-bottom: -6px;
      background-size: 14px 14px;
      background-repeat: no-repeat;
      background-position: left 5px;
  }

  form
  {
      margin:auto;
      width: 83%;
      margin-top: 23px;
  }
}

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


#headerwrap {
  /*
  background-color: #2B7A78;
  /*
  background-color: #235D79;
  */
  padding-top: 20px;
}


#headerwrap h1 {
  margin-top: 1px;
  color: black;
  font-size: 30px;
  text-align: center;
}

#headerwrap h4 {
  margin-top: 1px;
  color: black;
  font-size: 30px;
  text-align: center;
}

#headerwrap h8 {
  margin-top: 1px;
  color: black;
  font-size: 20px;
  text-align: center;
}


#headerwrap h2 {
    color: black;
    font-size: 30px;
}


#headerwrap h3 {
  color: black;
  font-size: 20px;
}

#headerwrap h5 {
  color: black;
  font-weight: 700;
  text-align: left;
}


  #headerwrap h6 {
  margin-top: 10px;
  color: black;
  font-size: 12px;
  text-align: center;
}

  our-services p{
    text-align: left;
  }

}


.button {
  background-color: #2B7A78; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
}


.divlink {
  background-color:#FFFFFF; 
  border:#FFFFFF; 
  border-width:2px; 
  border-style:solid; 
  border-radius:10px; 
  margin-left: 0px; 
  margin-right: 0px; 
  margin-bottom: 0px;
}
.link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}