/*
Theme Name: Ask Rheum
Theme URI: http://pixeldesigns.ca
Author: Katrina Isabelle @ Pixel Designs
Author URI: http://pixeldesigns.ca
Description: The 2014 redesign for the Ask Rheum website
*/


/*Import CSS Files*/
@import url('css/style-two.css');
/*

--------------------
Legend          
--------------------
#Temporary

#Utility
#Typography
#General
#Ask The Rheumatologist  
#Forms             
#Sidebar   
#Header
  #Main Nav
  #Secondary Nav
#Home
#Ask The Rheumatologist    
#Patient Portal
#Search
#Footer

#Webfonts
--------------------
/* 

/*  

  #Color Index:
  -
  dark blue .... #1c2c5b
  medium blue .. #1a61ae
  light blue ... #edf4fc
  white ........ #ffffff

*/


/* --------------------------- */
/*  #Utility              
/* --------------------------- */

:root{
  --kr-dark-blue: #1c2c5b;
  --kr-medium-blue: #1a61ae;
  --kr-light-blue: #edf4fc;
  --kr-white: #ffffff;
}

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

*{
  box-sizing: border-box;
}

html{
  height: 100%;
}

body{
  height: 100%;
  position: relative;
  padding-bottom: 125px; /* footer height */
}
body[style]{
  -webkit-transform: none !important;
}
body.login{
  padding: 0 0 125px 0;
}
@media all and (max-width: 475px){
  body{
    padding-bottom: 0;
  }
}

.alignleft{
  float: left;
  margin-right: 15px;
  margin-bottom: 2px;
}
.alignright{
  float: right;
  margin-left: 15px;
  margin-bottom: 2px;
}
.alignright.no-margin-left{
  margin-left: 0;
}
@media (max-width: 500px){
  .alignright, .alignleft{
    float: none;
    display: block;
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .alignleft, .alignright{
    margin-right: auto;
  }
}

.relative{
  position: relative;
}

/* --------------------------- */
/*  #Typography              
/* --------------------------- */

body{
  font-family: 'Roboto', sans-serif;
  /*font-family: 'Proxima Nova', sans-serif;*/
  /*font-weight: 300;*/
  color: #4D4D4D;
  letter-spacing: 0.2px;
}

h1, h2, h3, h4, h5, h6{
  color: var(--kr-dark-blue);
}

b, strong, em{
  /*font-size: 1.1em;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
}

p{
  color: #4D4D4D;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
  line-height: 1.4;
}

h1, h2, h3, h4{
  font-weight: 300;
  color: var(--kr-dark-blue);
}

h2{
  font-size: 1.9em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 350px){
  h2{
    font-size: 1.6em;
  }
}

ol{
  margin-top: .4em;
}
ul ul li{
  /*list-style-type: disc;*/
}
/*ol {
  counter-reset: o-counter;
  list-style-type: none;
}
ol > li:before {
  content: counter(o-counter) ') ';
  counter-increment: o-counter;
}*/

table, .table{
  border: 7px solid #fff;
  outline: 1px solid #ededed;
  margin-bottom: 2.5em;
  font-size: 1em;
}

table ul{
  padding: 0 0 0 1.1em
}
.table-responsive{
  margin-top: 0.8em;
}

.well{
  margin-top: 20px;
}

.container a.button,
.container .content a.button{
  display: inline-block;
  padding: 10px 16px;
  /*background-color: #ccc;*/
  background-color: var(--kr-medium-blue);
  color: #fff;
  font-weight: normal;
  font-size: 14px;
  margin: 15px 0;
  letter-spacing: 0.1px;
  border-radius: 4px;
}
.container a.button:hover{
  color: #fff !important;
  text-decoration: none;
  opacity: 0.7;
}

/*  

  #Color Index:
  -
  purple .... var(--kr-medium-blue)
  blue ...... var(--kr-medium-blue) // var(--kr-medium-blue)
  orange .... var(--kr-medium-blue)
  green ..... var(--kr-medium-blue)
  red ....... var(--kr-medium-blue) // var(--kr-medium-blue)

*/

/* --------------------------- */
/*  #General              
/* --------------------------- */

body{
  background: #E7E7E2;
}

.container{
  background: #FFF;
  padding: 45px 60px;
}

@media (min-width:1200px){.container{width:1260px}}

@media (max-width: 1200px){
  .container{
    padding: 45px;
  }
}
@media (max-width: 992px){
  .container{
    padding: 35px;
  }
}
@media (max-width: 767px){
  .container{
    padding: 20px;
  }
}

#print-logo{
  display: none;
}

.container a.print-page{
  float: right;
  font-size: 0.55em;
  font-weight: bold;
  color: #666 !important; 
  background: #eee;
  border-radius: .75em;
  padding: .7em .5em;
  line-height: 1;
  text-shadow: 1px 1px 0px #F6F6F6;
  text-decoration: none;
}
.container a.print-page.secondary{
  position: absolute;
  top: 35px;
  right: 0;
}
.container a.print-page span{
  vertical-align: middle;
}
.container a.print-page:hover{
  text-decoration: none;
  background-color: #e6e6e6;
}
@media (max-width: 767px){
  .container a.print-page{
    display: none;
  }
}

a.post-edit-link{
  /*float: right;*/
  font-size: 0.5em;
  font-size: 0.55em;
  font-weight: bold;
  /*line-height: 0;*/
  margin-left: .5em;
}
.single a.post-edit-link{
  float: none;
  font-size: .9em;
  margin-left: 10px;
}
/*.page-template-default a.post-edit-link{
  font-size: 0.55em;
}*/
a.post-edit-link span{
  vertical-align: middle;
}
a.post-edit-link:hover{
  text-decoration: none;
  color: #4d4d4d !important;
}

.content article{
  /*font-size: 1.1em;*/
  /*padding-right: 45px;*/
}
.content article.right{
  padding-left: 30px;
  padding-top: 30px;
}
@media (max-width: 1200px){
  .content article{
    padding-right: 15px;
    padding-left: 15px;
  }
  .content article.right{
    padding-right: 15px;
    padding-left: 15px;
  }
}

.content article img{
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.content article p{
  margin: 0 0 1.2em;
  line-height: 1.6;
}
.content article p + ul {
  /*margin: -0.8em 0 0;*/
  margin: -0.5em 0 1.2em;
}
.content article ul + p{
  /*margin-top: 1.7em;*/
  margin-top: 1em;
}
.content article ul li,
.content article ol:not(.carousel-indicators) li{
  margin-bottom: 0.3em;
  line-height: 1.5;
  position: relative;
  left: 2.7em;
  padding-right: 2.7em;
}
@media (max-width: 450px){
  .content article ul li,
  .content article ol:not(.carousel-indicators) li{
    left: 2.3em;
    padding-right: 2.3em;
  }
}
.content article ul,
.content article ol:not(.carousel-indicators){
  padding-left: 0;
  overflow: hidden;
}
.content a{
  color: var(--kr-medium-blue);
}
.content a:hover{
  color: var(--kr-dark-blue);
}

.content article ul ul{
  margin-top: 0.2em;
}

.content .main-column a:hover{
  /*opacity: 0.8;*/
}

/*  

  #Color Index:
  -
  purple .... var(--kr-medium-blue)
  blue ...... var(--kr-medium-blue) // var(--kr-medium-blue)
  orange .... var(--kr-medium-blue)
  green ..... var(--kr-medium-blue)
  red ....... var(--kr-medium-blue) // var(--kr-medium-blue)

*/

.content article h1{
  border-bottom: 4px solid;
  font-size: 1.7em;
  font-weight: normal;
  line-height: 1.65;
  margin-bottom: 0.75em;
  border-color: var(--kr-medium-blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.content article.right h1{
  border-bottom: 0;
  font-size: 1.7em;
}
@media (max-width: 450px){
  .content article h1,
  .content article.right h1{
    font-size: 1.5em;
  }
}


.content article h2{
  font-size: 1.4em;
  font-weight: normal;
  margin-top: 2.4em;
  margin-bottom: 1em;
}
.content article h1 + h2{
  margin-top: 0;
}

.content article h3{
  font-weight: normal;
  font-size: 1.3em;
  margin: 1.9em 0 0.9em;
  /*margin: 2.1em 0 1.2em;*/
}
.content article h1 + h3{
  margin-top: 0;
}

.content article h4{
  font-size: 1.2em;
  font-weight: bold;
  margin: 1.87em 0 0.8em;
}

.content article h5{
  font-weight: 400;
  margin: 2em 0 1.2em;
  font-size: 1.1em;
}
.single .content article h5{
  font-size: 1.2em;
  margin: 1.7em 0 .9em;
}

.content article aside{
  margin: 2em 0 2.5em;
  margin: 0;
}
.content article aside + aside{
  /*margin-top: 2.5em;*/
}
.content article aside h4{
  font-size: 1em;
  margin-bottom: 0.8em;
  text-transform: uppercase;
  line-height: 1.6;
  border-bottom: 3px solid;
  border-color: var(--kr-medium-blue);
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*  

  #Color Index:
  -
  purple .... var(--kr-medium-blue)
  blue ...... var(--kr-medium-blue) // var(--kr-medium-blue)
  orange .... var(--kr-medium-blue)
  green ..... var(--kr-medium-blue)
  red ....... var(--kr-medium-blue) // var(--kr-medium-blue)

*/

.content article .related-videos-list{
  margin: -0.6em 0 2.4em 0;
}

.content article aside .video{
  /*width: 250px;*/
  /*overflow: hidden;*/
  padding-left: 20px;
  font-size: 0.95em;
  /*float: left;*/
}
.content article aside .video:first-child{
  /*padding-left: 0;*/
}

.content article aside h4 + .video{
  /*margin-left: -20px;*/
}
.related-videos .videos{
  width: 100%;
  margin-left: -20px;
}
.related-videos .videos .video{
  display: inline-block;
  margin-bottom: 2em;
}

.content article aside .video .video-title{
  text-align: left;
  margin-bottom: 0;
}
a.video:hover{
  text-decoration: none;
}
.video-screen{
  position: relative;
  display: inline-block;
  width: 250px;
  overflow: hidden;
  background: black;
  border: 1px solid #DEDDD4;
}
.video-screen img{
  width: 260px;
  height: auto;
}

.video-screen p.play-icon{
/*  text-align: center;
  width: 100%;
  position: absolute;
  top: 50%;*/
  margin: 0;
  /*display: none;*/
  opacity: 0.5;

}
.video-screen p.play-icon:after{
  content: 'e';
  font-family: 'ab-rheumatology';
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 3.5em;
  color: white;
  margin-top: -31px;
  margin-left: -23px;
  width: 50px;
  height: 50px;
}
.video-screen:hover img{
  opacity: 0.6;
  transition: 0.4s;
  -moz-transition: 0.4s;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
}
.video-screen:hover p.play-icon{
  /*display: block;*/
  opacity: 1;
  transition: 0.4s;
  -moz-transition: 0.4s;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
}
.video-screen:hover p.play-icon:after{
    color: white;
}
.related-videos .video .video-title{
  margin: 0.4em 0 1em;
}


.related-links ul{
  /*font-size: 0.9em;*/
  padding: 0 2em 0 1.5em;
  float: left;
  max-width: 215px;
  max-width: 275px;
  margin-bottom: 0;
}
.content article .related-links ul li{
  /*line-height: 1.5;*/
  margin-bottom: 0.2em;
  font-weight: normal;
  left: 1.3em;
  padding-right: 1.3em;
}



.google-maps .review-box{
  display: none;
}
.google-map {
  position: relative;
  padding-bottom: 75%; /* This is the aspect ratio*/
  height: 0;
  /*overflow: hidden;*/
}
.google-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% ;
  height: 100% ;
}

/* --------------------------- */
/*  #Ask The Rheumatologist              
/* --------------------------- */

.ask-the-rheumatologist article.main-column{
  transition: height 0.3s;
  -moz-transition: height 0.3s;
  -webkit-transition: height 0.3s;
  -o-transition: height 0.3s;
  padding-right: 175px;
}
@media (max-width: 1200px){
  .ask-the-rheumatologist article.main-column{
    padding-right: 15px;
  }
}

form#search-answers input#s{
  width: 70%;
  display: inline-block;
  max-width: 400px;
  height: 35px;
}
form#search-answers input#searchsubmit{
  float: none;
  display: inline-block;
  height: 35px;
  font-size: 0.9em;
  padding: 0.7em 1em;
  vertical-align: top;
  font-weight: 400;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* --------------------------- */
/*  #Forms     
/* --------------------------- */


.ui-datepicker-title {
  text-align: center;
  color: #000;
}


.ask-a-question .content form{
  margin: 3em 0;
}

/* Labels */
.content form label{
  display: block;
  line-height: 1.6;
}
.content .gform_wrapper .top_label .gfield_label{
  font-weight: normal;
} 
.content .gform_wrapper ul li{
  left: 0;
  padding-right: 0;
}

/* Inputs */

.content .disabled input,
.content input[disabled="disabled"],
.content .disabled textarea{
  background: #F6F6F3;
}

.content form input[type="text"],
.content form input[type="password"],
.content form textarea{
  border: 1px solid #DDDDD8;
  padding: 0.4em 0.6em;
  width: 90%;
  /*margin-bottom: 1.2em;*/
  font-size: 1em;
  color: #666;
}
.content form .ginput_container{
  /*margin-bottom: 1.2em;*/
}
.content form .gfield{
  margin-bottom: 1.2em;
}

.content form textarea{
  width: 100%;
  height: 185px;
  line-height: 1.55;
}
.content form .form-column{
  width: 49%;
  float: left;
}

/* Select Fields */
.content .gform_wrapper select{
  margin-top: 0.2em;
  margin-left: 0;
  font-size: 0.9em;
  font-family: inherit;
  border: 1px solid #ddddd8;
  padding: 4.5px 3px;
}
/* gravity forms exception */
.content .gform_wrapper .gfield_time_ampm select{
  margin-top: 0;
}
/* ie */
.content .gform_wrapper.gf_browser_ie select{
  font-size: 1em;
}
.content .gf_browser_ie.gform_wrapper .gfield_time_ampm{
  padding-top: 0;
}
/* firefox*/
.content .gform_wrapper.gf_browser_gecko select{
  padding: 7px 5px 3px;
}

.content .gform_wrapper select optgroup,
.content .gform_wrapper select option{
  padding-left: 1.3em;
}



/* Submit */
.content .gf_browser_ie.gform_wrapper .gform_footer input.button,
.content form input[type="submit"]{
  border: none;
  background-color: var(--kr-medium-blue);
  color: #fff;
/*  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
  padding: 0.5em 1em;
}
.ask-a-question .content form input[type="submit"]{
  float: right;
}
.content form input[type="submit"]:hover{
  opacity: 0.8;
}
/*  

  #Color Index:
  -
  purple .... var(--kr-medium-blue)
  blue ...... var(--kr-medium-blue) // var(--kr-medium-blue)
  orange .... var(--kr-medium-blue)
  green ..... var(--kr-medium-blue)
  red ....... var(--kr-medium-blue) // var(--kr-medium-blue)

*/

.content .gform_wrapper{
  max-width:  630px;
}

.content .gform_confirmation_wrapper {
  font-size: 1.2em;
  /* font-weight: normal; */
  margin: 1.75em 0 0;
  font-style: italic;
}
.content .gform_wrapper .gform_footer{
  margin: 0;
  padding: 0;
}
.content .gform_wrapper .top_label .gfield_label{
  margin: 0.5em 0;
}
.content .gform_wrapper .top_label textarea.textarea{
  width: 100%;f
}

.content .gform_wrapper .gfield_password_strength{
  margin-bottom: 2.2em;
}

/* Error Messages */

.content .gform_wrapper .description, 
.content .gform_wrapper .gfield_description, 
.content .gform_wrapper .gsection_description, 
.content .gform_wrapper .instruction{
  font-family: inherit;
}
.content .gform_wrapper li.gfield.gfield_error{
  background: none;
  padding: 0;
  border: none;
}
.content form .gfield_error .ginput_container{
  margin: 0 0 0.3em;
  padding: 0;
}
.content .gform_wrapper .gfield_error .gfield_password_strength{
  margin: 0 0 0.5em;
  float: left;
}
.content .gform_wrapper .top_label .gfield_description.validation_message, 
.content .gform_wrapper .gfield_description.validation_message{
  padding: 0 !important;
  margin: 0;
  color: #F22323;
}
.content .gform_wrapper li.gfield.gfield_error.gfield_contains_required label.gfield_label, 
.content .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container{
  margin-top: 0;
}
.content .gform_wrapper li.gfield.gfield_error.gfield_contains_required{
  padding-left: 0 !important;
}
.content .gform_wrapper .gfield_error .gfield_label{
  color: inherit;
}
.content .gform_wrapper li.gfield_error input[type=text], 
.content .gform_wrapper li.gfield_error input[type=url], 
.content .gform_wrapper li.gfield_error input[type=email], 
.content .gform_wrapper li.gfield_error input[type=tel], 
.content .gform_wrapper li.gfield_error input[type=number], 
.content .gform_wrapper li.gfield_error input[type=password], 
.content .gform_wrapper li.gfield_error textarea{
  border-color: #FF9999;
}
.content .gform_wrapper .gfield_required{
  color: #F45858;
}
.content .gform_wrapper div.validation_error{
  color: #F22323;
}


/* section breaks */
.content .gform_wrapper .gsection .gfield_label, 
.content .gform_wrapper h2.gsection_title, 
.content .gform_wrapper h3.gform_title{
  font-weight: 400;
  font-size: 1.3em;
}
.content .gform_wrapper .gsection{
  margin: 3em 0 1em;
}


/* RESPONSIVE */
@media (max-width: 767px){
  .content .gform_wrapper .top_label input.medium, 
  .content .gform_wrapper .top_label select.medium{
    width: 75%;
  }
  .content .gform_wrapper .gform_footer{
    padding-top: 1em;
  }
}


form.post-password-form input{
  /*max-width: 400px;*/
  /*display: inline-block;*/
  display: block;
  margin: .3em 0;
}
form.post-password-form label{
  margin: 0;
  display: inline-block;
}


/* Datepicker calendar IE8 fixes */

.lt-ie9 .ui-datepicker.ui-widget{
  width: 18em;
}
.ui-datepicker-calendar{
  border: 0;
}
.ui-datepicker-calendar,
.ui-datepicker th{
  background: #d7d7d7;
}
.ui-datepicker select option{
  color: #4d4d4d;
}
/*.ui-datepicker td{
  background: inherit;
}
*/


/* --------------------------- */
/*  #Sidebar              
/* --------------------------- */

.content .sidebar h3{
  font-size: 1.3em;
  font-weight: normal;
  border-bottom: 4px solid;
  line-height: 2.1;
  line-height: 1.9;
  margin-bottom: 0.8em;
  margin-top: 1.4em;
  border-color: var(--kr-medium-blue);
}

/*  

  #Color Index:
  -
  purple .... var(--kr-medium-blue)
  blue ...... var(--kr-medium-blue) // var(--kr-medium-blue)
  orange .... var(--kr-medium-blue)
  green ..... var(--kr-medium-blue)
  red ....... var(--kr-medium-blue) // var(--kr-medium-blue)

*/

.content .sidebar h4{
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.9em;
  border-top: 1px solid #E7E7E2;
  padding-top: 1.6em;
  margin-top: 1.6em;
}
.content .sidebar h3 + h4{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.content .sidebar ul{
  padding: 0;
}
.content .sidebar .lists{
  display: table;
  width: 100%;
}
.content .sidebar .lists ul{
  display: table-cell;
  width: 49%;
}
/*.content .sidebar ul.clinic-doctors{
  display: inline-block;
  width: 49%;
}*/
.content .sidebar ul li{
  list-style: none;
  line-height: 1.5;
}
@media (min-width: 992px){
  .content .main-column{
    padding-right: 24px;
  }
  .content .sidebar{
    font-size: 0.95em;
    padding-left: 20px;
    border-left: 1px solid #eee;
  }
}

/*.sidebar li span.dot-leaders{
  letter-spacing: 0.7px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}*/

ul.leaders {
  max-width: 40em;
  padding: 0;
  overflow-x: hidden;
  list-style: none
}
ul.leaders li:before {
  float: left;
  width: 0;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
}
ul.leaders span:first-child {
  padding-right: 0.33em;
  background: white
}
ul.leaders span + span {
  float: right;
  padding-left: 0.33em;
  background: white
}
@media (max-width: 340px){
  ul.leaders li:before{
    content: '';
  }
  ul.leaders li span{
    display: block;
  }
  ul.leaders span + span{
    float: none;
    padding-left: 0;
    margin-bottom: 5px;
  }
}

.sidebar aside.call-out{
  font-size: 1.1em;
  padding: 0.8em;
  line-height: 1.6;
  border: 1px solid #E7E7E2;
  margin: 1.8em 0;
}
.sidebar aside.call-out{
  margin-top: 2.8em;
}
.sidebar aside.call-out + aside.call-out,
.sidebar h3 + aside.call-out{
  margin-top: 1.8em;
}
.sidebar aside.call-out p{
  margin-bottom: 0;
  margin-top: 10px;
}
.sidebar aside.call-out p:first-child{
  margin-top: 0;
}


/* #Sidebar Nav */

@media (max-width: 1200px){
  .sidebar.sidenav{
    padding-right: 30px;
  }
}
@media (max-width: 992px){
  .sidebar.sidenav{
    float: left;
    max-width: 300px;
    margin-bottom: 5em;
    z-index: 5;
  }
  .sidebar.sidenav li{
    /*border-bottom: 1px solid #eee;*/
  }
  .ask-a-question .sidebar.sidenav,
  .browse-answers .sidebar.sidenav,
  .contact-your-rheumatologist .sidebar.sidenav,
  .patient-portal-home .sidebar.sidenav,
  .your-profile .sidebar.sidenav,
  .page-id-243 .sidebar.sidenav,
  .page-id-252 .sidebar.sidenav,
  .page-id-233 .sidebar.sidenav,
  .page-login .sidebar.sidenav,
  .lostpassword .sidebar.sidenav{
    float: none;
    margin-bottom: 0;
    max-width: none;
  }
}
@media (max-width: 767px){
  .medications .sidebar.sidenav,
  .diseases .sidebar.sidenav{
/*    float: none;
    margin-bottom: 0;
    padding-right: 15px;*/
    display: none;
  }
  .sidebar.sidenav{
    /*display: block;*/
    float: none;
    margin-bottom: 0;
    padding-right: 15px;
    max-width: none;
  }
}

.sidebar.sidenav h3{
  margin-bottom: 0;
}

.sidebar.sidenav > ul {
  /*font-size: 1.1em;*/
  background: #F6F6F3;
  background: #F8F8F3;
  padding: 0.5em 0;
}
.sidebar.sidenav ul.sub-menu a{
  padding-left: 1.8em;
}

.sidebar.sidenav a{
  padding: 0.4em 1em;
  display: block;
  color: var(--kr-medium-blue);
}
.sidebar.sidenav a:hover{
  background: #DDDDD8;
  text-decoration: none;
}
.sidebar.sidenav .active>a{
  color: #fff;
  background: var(--kr-medium-blue);
/*  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
  padding: 0.6em 1em;
}
.sidebar.sidenav .current-menu-item > a,
.sidebar.sidenav .current_page_item > a,
.sidebar.sidenav .current-menu-ancestor > a{
  color: #fff;
  background: var(--kr-medium-blue);
}



/*  

  #Color Index:
  -
  purple .... var(--kr-medium-blue)
  blue ...... var(--kr-medium-blue) // var(--kr-medium-blue)
  orange .... var(--kr-medium-blue)
  green ..... var(--kr-medium-blue)
  red ....... var(--kr-medium-blue) // var(--kr-medium-blue)

*/

/* Sidebar Related Links */

.sidebar-related-links li{
  border-bottom: 1px solid #E7E7E2;
}
.sidebar-related-links li a{
  display: inline-block;
  padding: 0.7em 0;
  font-weight: normal;
}
.sidebar-related-links li a.active{
  color: var(--kr-medium-blue);
}
.sidebar-related-links li.current-menu-item a,
.sidebar-related-links li.current_page_item a,
.sidebar-related-links li.current-menu-ancestor a{
  color: var(--kr-medium-blue);
}
.sidebar-related-links li a.active:hover{
  text-decoration: none;
}

.sidebar h3 + ul.sidebar-related-links{
  margin-top: -1.1em;
}

.sidebar-related-links span.note{
  display: block;
  font-size: 0.9em;
  margin-top: -.5em;
  margin-bottom: .7em;
}



/* --------------------------- */
/*  #Header              
/* --------------------------- */

.header-top{
  position: relative;
}


@media (max-width: 750px){
  header .logo{
    width: 100%;
    text-align: center;
    margin: 0 auto 20px;
  }
}

.header-top .logo a{
  display: inline-block;
  width: 301px;
  height: 85px; 
  max-width: 90%;
  background: url('images/Ask-Rheum-Logo.svg') no-repeat; 
  background-size: contain;
}
@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){
  .header-top .logo a{
    background-image: url('images/Ask-Rheum-Logo.svg'); 
    background-size: contain;
  }
}

.site-search-container{
  position: absolute;
  bottom: 12px;
  right: 0;
}
@media (max-width: 750px){
  .site-search-container{
    position: static;
    width: 100%;
    text-align: center;
  }
  form#site-search{
    float: none !important;
  }
}

form#site-search{
  margin: 0;
}
#site-search input{
  border: 1px solid #cfcfcf;
  border-right: 0;
  padding: 0.3em 0.7em;
  width: 236px;
  height: 44px;
  font-size: 14px;
  margin: 0;
}
@media (max-width: 750px){
  #site-search input{
    width: 85%;
  }
}
#site-search button[type="submit"]{
  vertical-align: bottom;
  background-color: var(--kr-medium-blue);
  border: 1px solid var(--kr-medium-blue);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  margin-left: -3px;
  font-weight: normal;
  font-size: 1.2em;
  text-align: center;
}
#site-search button:hover{
  opacity: 0.8;
}
#site-search button[type="submit"] span{
  vertical-align: sub;
  text-align: center;
}




/*  #Main Nav  */
/* --------------------- */

#main-nav{
  margin-top: 40px;
  border: none;
  background: none;
  border-radius: 0;
}
#main-nav .navbar-collapse{
  border: 1px solid #E7E7E2;
  border-left: 0;
  border-right: 0;
  max-height: none;
}

#main-nav .navbar-toggle{
  width: 100%;
  margin-right: 0;
  border-radius: 0;
  border: 3px solid #fff;
  outline: 1px solid #ededed;
}
#main-nav .navbar-toggle:hover, #main-nav .navbar-toggle:focus{
  background: #FBFBF8;
  background: #E7E7E2;
}
#main-nav .navbar-toggle span.navlabel{
  float: left;
  color: #4d4d4d;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.1;
  vertical-align: middle;
  padding-right: 46px;
  margin-top: -1px;
}
#main-nav .navbar-toggle .icon-bar{
  margin-left: auto;
}

/*  Justified Nav Items  */

#main-nav ul.nav{
  width: 100%;
  text-align: justify;
  /*font-size: 0;*/
  font-size: 12px\9; /* IE6-9 only fix */
  max-height: 46px;
}
@media (max-width: 992px){
  #main-nav ul.nav{
    max-height: none;
    width: auto;
  }
}

#main-nav ul.nav > li{
  float: none;
  display: inline-block;
  zoom: 1;
  *display: inline; /* IE stuff again */
  /*padding: 0 10px;*/
}
@media (max-width: 992px){
  #main-nav ul.nav > li{
    display: block;
    background: #F1F1ED;
    border-bottom: 4px solid #fff;
  }
  #main-nav ul.nav > li.active,
  #main-nav ul.nav > li.current-menu-ancestor{
    /*background: #E0E0D9;*/
  }
  #main-nav .navbar-nav .open .dropdown-menu>li>a, #main-nav .navbar-nav .open .dropdown-menu .dropdown-header{
    padding: 5px 10px;
  }
}

#main-nav ul.nav:after{
  content: "";
  width: 100%;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

/* --------------------- */



#main-nav ul.nav > li > a{
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  padding: 14px 0 10px;
  color: #2c2c2c;
  border-bottom: 4px solid;
  border-color: transparent;
}

@media (max-width: 1200px){
  #main-nav ul.nav > li > a {
    font-size: 0.85em;
    font-weight: 600;
  }
}


/*    Multicolored Nav   */
/* --------------------- */

/*  

  #Color Index:
  -
  purple .... var(--kr-medium-blue)
  blue ...... var(--kr-medium-blue) // var(--kr-medium-blue)
  orange .... var(--kr-medium-blue)
  green ..... var(--kr-medium-blue)
  red ....... var(--kr-medium-blue) // var(--kr-medium-blue)

*/

#main-nav ul.nav > li.active > a,
#main-nav ul.nav > li.current-menu-item > a,
#main-nav ul.nav > li.current_page_item > a,
#main-nav ul.nav > li.current-menu-ancestor > a,
#main-nav ul.nav > li > a:hover,
#main-nav ul.nav > li.dropdown.open > a{
  border-bottom: 4px solid;
  background: none;
}

@media (max-width: 992px){
  #main-nav ul.nav > li > a,
  #main-nav ul.nav > li.active > a,
  #main-nav ul.nav > li.current-menu-ancestor > a,
  #main-nav ul.nav > li > a:hover,
  #main-nav ul.nav > li.dropdown.open > a {
    font-size: 0.9em;
    border-bottom: 0;
    padding: 13px 10px;
  }
  #main-nav ul.nav > li.dropdown.open > a{
    border-bottom: 1px solid #e5e5e5;
    border-color: #e5e5e5 !important;
  }
}

#main-nav ul.nav > li:nth-child(1).dropdown.open > a,
#main-nav ul.nav > li:nth-child(1) a:hover,
#main-nav ul.nav > li:nth-child(1).current-menu-item > a,
#main-nav ul.nav > li:nth-child(1).current_page_item > a,
#main-nav ul.nav > li:nth-child(1).current-menu-ancestor > a,
#main-nav ul.nav > li:nth-child(1).active a,
#main-nav ul.nav > li:nth-child(1) .dropdown-menu a:hover,
#main-nav ul.nav > li:nth-child(1) .dropdown-menu .current-menu-item a{
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue); 
  /* brighter purple */
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue);
}
#main-nav ul.nav > li:nth-child(2).dropdown.open > a,
#main-nav ul.nav > li:nth-child(2) a:hover,
#main-nav ul.nav > li:nth-child(2).current-menu-item > a,
#main-nav ul.nav > li:nth-child(2).current_page_item > a,
#main-nav ul.nav > li:nth-child(2).current-menu-ancestor > a,
#main-nav ul.nav > li:nth-child(2).active a,
#main-nav ul.nav > li:nth-child(2) .dropdown-menu a:hover,
#main-nav ul.nav > li:nth-child(2) .dropdown-menu .current-menu-item a{
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue); 
}
#main-nav ul.nav > li:nth-child(2) .dropdown-menu a:hover,
#main-nav ul.nav > li:nth-child(2) .dropdown-menu .current-menu-item a{
  color: var(--kr-medium-blue); 
}

#main-nav ul.nav > li:nth-child(3).dropdown.open > a,
#main-nav ul.nav > li:nth-child(3) a:hover,
#main-nav ul.nav > li:nth-child(3).current-menu-item > a,
#main-nav ul.nav > li:nth-child(3).current_page_item > a,
#main-nav ul.nav > li:nth-child(3).current-menu-ancestor > a,
#main-nav ul.nav > li:nth-child(3).active a,
#main-nav ul.nav > li:nth-child(3) .dropdown-menu a:hover,
#main-nav ul.nav > li:nth-child(3) .dropdown-menu .current-menu-item a{
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue);
}
#main-nav ul.nav > li:nth-child(4).dropdown.open > a,
#main-nav ul.nav > li:nth-child(4) a:hover,
#main-nav ul.nav > li:nth-child(4).current-menu-item > a,
#main-nav ul.nav > li:nth-child(4).current_page_item > a,
#main-nav ul.nav > li:nth-child(4).current-menu-ancestor > a,
#main-nav ul.nav > li:nth-child(4).active a,
#main-nav ul.nav > li:nth-child(4) .dropdown-menu a:hover,
#main-nav ul.nav > li:nth-child(4) .dropdown-menu .current-menu-item a{

  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue);
}
#main-nav ul.nav > li:nth-child(5).dropdown.open > a,
#main-nav ul.nav > li:nth-child(5) a:hover,
#main-nav ul.nav > li:nth-child(5).current-menu-item > a,
#main-nav ul.nav > li:nth-child(5).current_page_item > a,
#main-nav ul.nav > li:nth-child(5).current-menu-ancestor > a,
#main-nav ul.nav > li:nth-child(5).active a,
#main-nav ul.nav > li:nth-child(5) .dropdown-menu a:hover,
#main-nav ul.nav > li:nth-child(5) .dropdown-menu .current-menu-item a{
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue); 
  /* brighter purple */
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue);
}
#main-nav ul.nav > li:nth-child(6).dropdown.open > a,
#main-nav ul.nav > li:nth-child(6) a:hover,
#main-nav ul.nav > li:nth-child(6).current-menu-item > a,
#main-nav ul.nav > li:nth-child(6).current_page_item > a,
#main-nav ul.nav > li:nth-child(6).current-menu-ancestor > a,
#main-nav ul.nav > li:nth-child(6).active a,
#main-nav ul.nav > li:nth-child(6) .dropdown-menu a:hover,
#main-nav ul.nav > li:nth-child(6) .dropdown-menu .current-menu-item a{
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue);
}
#main-nav ul.nav > li:nth-child(2) .dropdown-menu a:hover,
#main-nav ul.nav > li:nth-child(2) .dropdown-menu .current-menu-item a{
  color: var(--kr-medium-blue); 
}

#main-nav ul.nav > li:nth-child(7).dropdown.open > a,
#main-nav ul.nav > li:nth-child(7) a:hover,
#main-nav ul.nav > li:nth-child(7).current-menu-item > a,
#main-nav ul.nav > li:nth-child(7).current_page_item > a,
#main-nav ul.nav > li:nth-child(7).current-menu-ancestor > a,
#main-nav ul.nav > li:nth-child(7).active a,
#main-nav ul.nav > li:nth-child(7) .dropdown-menu a:hover,
#main-nav ul.nav > li:nth-child(7) .dropdown-menu .current-menu-item a{
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue);
}
#main-nav ul.nav > li:nth-child(8).dropdown.open > a,
#main-nav ul.nav > li:nth-child(8) a:hover,
#main-nav ul.nav > li:nth-child(8).current-menu-item > a,
#main-nav ul.nav > li:nth-child(8).current_page_item > a,
#main-nav ul.nav > li:nth-child(8).current-menu-ancestor > a,
#main-nav ul.nav > li:nth-child(8).active a,
#main-nav ul.nav > li:nth-child(8) .dropdown-menu a:hover,
#main-nav ul.nav > li:nth-child(8) .dropdown-menu .current-menu-item a{
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue);
}

#main-nav ul.nav > li.current-menu-item > a,
#main-nav ul.nav > li.current_page_item > a{
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue);
}

#main-nav ul.nav > li > a:hover,
#main-nav ul.nav > li.active > a,
#main-nav ul.nav > li.current-menu-item > a,
#main-nav ul.nav > li.current_page_item > a,
#main-nav ul.nav > li.current-menu-ancestor > a,
#main-nav ul.nav > li.dropdown.open > a{
  border-color: var(--kr-medium-blue);
  color: var(--kr-medium-blue);
}

/* Dropdown Menu Styles */
#main-nav ul.nav .dropdown-menu>li>a{
  /*font-weight: 300;*/
  color: #4D4D4D; 
}
/* hover */
#main-nav ul.nav .dropdown-menu>li>a:hover, #main-nav ul.nav .dropdown-menu>li>a:focus{
  background-color: #f5f5f5;
  background: none;
  color: var(--kr-medium-blue);
}
/* active */
#main-nav ul.nav .dropdown-menu>.active>a, #main-nav ul.nav .dropdown-menu>.active>a:hover, #main-nav ul.nav .dropdown-menu>.active>a:focus{
  color: var(--kr-medium-blue);
  background-color: #f5f5f5;
  background: none;
  /*font-weight: 400;*/
}
#main-nav .dropdown-header{
  font-size: 1em;
  text-align: left;
}

/* --------------------- */


/* Nested Dropdown  */
/* --------------------- */
/*.dropdown{position:relative;}
.dropdown>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown:hover>.dropdown-menu{display:block;}
.dropdown>.dropdown-menu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown>.dropdown-menu:hover>a:after{border-left-color:#ffffff;}
.dropdown>.dropdown-menu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

*/



/*  #Secondary Nav  */
/* --------------------- */

.container.secondary-nav{
  padding: 0;
  background: none;
  margin-bottom: 2.5em;
}
@media (max-width: 767px){
  .container.secondary-nav .secondary-nav{
    text-align: center;
  }
  .secondary-nav ul.nav{
    display: inline-block;
    float: none;
    font-size: .9em;
  }
}
@media (max-width: 350px){
  .secondary-nav ul.nav{
    font-size: .8em;
  }
}

.secondary-nav .nav{
  float: right;
  background: #fff;
  border-left: 1px solid #E7E7E2;
  border-bottom: 1px solid #E7E7E2;
  font-weight: normal;
  margin: 0;
}
.secondary-nav .nav li{
  border-right: 1px solid #E7E7E2;
  float: left;
}

.secondary-nav .nav>li>a:hover, .nav>li>a:focus{
  background: none;
}
.secondary-nav .navbar-nav>li>a{
  padding: 1em;
  color: #666666;
}


.secondary-nav ul.nav > li a:hover,
.secondary-nav ul.nav > li.current-menu-item > a,
.secondary-nav ul.nav > li.current-menu-ancestor > a,
.secondary-nav ul.nav > li.active a{
  color: var(--kr-medium-blue);
}
.secondary-nav ul.nav > li:nth-child(2) a:hover,
.secondary-nav ul.nav > li:nth-child(2).current-menu-item > a,
.secondary-nav ul.nav > li:nth-child(2).current-menu-ancestor > a,
.secondary-nav ul.nav > li:nth-child(2).active a{
  color: var(--kr-medium-blue);
}
.secondary-nav ul.nav > li:nth-child(3) a:hover,
.secondary-nav ul.nav > li:nth-child(3).current-menu-item > a,
.secondary-nav ul.nav > li:nth-child(3).current-menu-ancestor > a,
.secondary-nav ul.nav > li:nth-child(3).active a{
  color: var(--kr-medium-blue);
}

/* --------------------------- */
/*  #Home              
/* --------------------------- */

/*  

  #Color Index:
  -
  purple .... var(--kr-medium-blue)
  blue ...... var(--kr-medium-blue) // var(--kr-medium-blue)
  orange .... var(--kr-medium-blue)
  green ..... var(--kr-medium-blue)
  red ....... var(--kr-medium-blue) // var(--kr-medium-blue)

*/

.slider{
  float: left; 
  /*overflow: hidden;*/
  height: 420px;
}
.content .slider{
  margin-bottom: 2em;
}
.carousel-inner, .slider .item{
  width: 806px;
  height: 420px;
  overflow: hidden;
}
.slider .carousel-inner > .item > img,
.slider .carousel-inner > .item > a > img{
  width: 100%;
  height: 420px;
  object-fit: cover;
}

@media (max-width: 1200px){
  .slider, .carousel-inner, .slider .item{
    width: 100%;
    height: 420px;
  }
  .slider .carousel-inner > .item > img,
  .slider .carousel-inner > .item > a > img{
    width: 100%;
    height: 420px;
    object-fit: cover;
  }
}

a.carousel-control.left, a.carousel-control.right{
  opacity: 1;
  background: none;
  display: none;
}
a.carousel-control:hover{
  opacity: 1;
}
a.carousel-control.left:hover{
  background-image: -webkit-linear-gradient(left,color-stop(rgba(0,0,0,.1) 0),color-stop(rgba(0,0,0,.0001) 100%));
  background-image: linear-gradient(to right,rgba(0,0,0,.1) 0,rgba(0,0,0,.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
a.carousel-control.right:hover{
  background-image: -webkit-linear-gradient(left,color-stop(rgba(0,0,0,.0001) 0),color-stop(rgba(0,0,0,.1) 100%));
  background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.1) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
a.carousel-control span{
  /*display: none;*/
  background: var(--kr-medium-blue); /* green */
  color: #fff;
  padding: .5em .5em .3em .4em;
  padding: .6em .6em .5em;
  text-align: center;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  font-size: .9em;
  text-shadow: none;
}
.slider:hover .carousel-control span{
  /*display: block;*/
}
a.carousel-control.left span{
  left: -2px;
  left: 0;
  padding-left: .55em;
}
a.carousel-control.right span{
  right: -2px;
  right: 0;
  padding-right: .55em;
}
a.carousel-control:hover span{
  background: #5DCE8C;
}

.carousel-caption{
  background: #FBFBF8;
  background: rgba(251,251,248,0.9);
  text-shadow:none;
  padding: 0.9em;
  font-size: .9em;
  max-width: 320px;
  bottom: 55px;
  margin-left: -13%;
}
@media (max-width: 700px){
  .carousel-caption{
    bottom: 0;
    width: 100%;
    display: block;
    max-width: 100%;
    left: 0;
    margin-left: 0;
    padding: 1.15em;
  }
}
@media (max-width: 500px){
  .carousel-caption{
    position: static;
  }
}
.slider h3, .slider p{
  text-align: left;
  /*color: #fff;*/
}
.slider h3{
  margin: 0 0 0.3em;
  font-size: 1.7em;
}
.slider p{
  margin: 0 0 0 0;
}

.carousel-indicators{
  bottom: -35px;
}
.carousel-indicators .active{
  background-color: #C9C9C4; 
  /*border: 1px solid #C9C9C4;*/
}
.carousel-indicators li{
  border: none;
  background: #E2E2DC;
  border-radius: 0;
}


.call-to-action-buttons{
  float: right;
  width: 318px;
}
@media (max-width: 1200px){
  .call-to-action-buttons{
    margin: 5em 0 1em;

    width: 100%;
    text-align: justify;
    /*font-size: 0;*/
    font-size: 12px\9; /* IE6-9 only fix */
  }
  .call-to-action-buttons:after{
    content: "";
    width: 100%;
    display: inline-block;
    zoom: 1;
    *display: inline;
  }
}
@media (max-width: 992px){
  .call-to-action-buttons{
    margin: 4em 0 1em;
  }
}
@media (max-width: 767px){
  .call-to-action-buttons{
    margin: 1em 0 0;
  }
}

.cta{
  display: block;
  width: 318px;
  min-height: 122px;
  border: 1px solid #E7E7E2;
  padding: 18px 20px 16px;
  position: relative;
  margin-top: 11px;
  background: var(--kr-light-blue);
}
.cta:first-child{
  margin-top: 0;
}

@media (max-width: 1200px){
  .cta{
    vertical-align: middle;
    width: 30%;
    margin: 0;
    text-align: left;

    display: inline-block;
    zoom: 1;
    *display: inline; /* IE stuff again */
  }
  .cta:first-child{
    margin-top: .5em;
  }
}
@media (max-width: 992px){
  .cta{
    width: 100%;
    /*max-width: 320px;*/
    min-height: 122px;
    float: none;
    display: block;
    margin: 0.7em auto;
    /*font-size: 1.2em;*/
  }
}

.cta:hover{
  text-decoration: none;
  background: var(--kr-white);
}
.cta:hover h2{
  text-decoration: underline;
}

.cta .border-top{
  position: absolute;
  top: 0;
  left: -1px;
  width: 100.5%;
  border-top: 6px solid;
  border-color: var(--kr-medium-blue);
}

.cta h2{
  font-weight: 400;
  font-size: 1.2em;
  margin: 0 0 8px;
  color: var(--kr-dark-blue);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.cta p{
  font-size: 0.9em;
  margin: 0 0 7px;
}
.cta span.click-here{
  font-weight: bold;
  font-size: 0.9em;
  color: var(--kr-medium-blue);
}

.cta span.arrow-button{
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  display: table;
  background-color: var(--kr-medium-blue);
}
.cta:hover span.click-here{
  /*text-decoration: underline;*/
}
.cta span.arrow-button:hover{
  text-decoration: none;
  opacity: 0.7;
}
.cta span.arrow-button span.icon{
  /*display: table-cell;*/
  /*vertical-align: middle;*/
  display: block;
  margin-left: 3px;
  margin-top: 3px;
}

 
/* #Get Directions 
   --------------------- */

.container .city-nav a{
  color: #fff;
}

.get-directions{
  margin: 70px -60px; /* counteract padding on .container */
  padding: 65px 45px;
  background: #FBFBF8;
  text-align: center;
}
@media (max-width: 1200px){
  .get-directions{
    margin: 50px -45px;
  }
}
@media (max-width: 992px){
  .get-directions{
    margin: 30px -35px;
    padding: 65px 25px;
  }
}
@media (max-width: 767px){
  .get-directions{
    margin: 0 -25px 20px;
    padding: 25px 25px;
  }
}

.get-directions .city-nav{
  margin: 20px 0;
}
.get-directions li{
  display: inline-block;
  list-style: none;
}
.container .get-directions li .button{
  background-color: #B3B3B3;
  font-weight: 300;
  width: 120px;
  padding: 0.5em;
  margin: 3px 5px;
}
.get-directions li .button:hover{
  background-color: #B3B3B3;
}
.get-directions li.active .button,
.get-directions li.active .button:hover{
  background-color: var(--kr-medium-blue);
}

.get-directions .location .location-image{
  width: 210px;
  height: 165px;
  overflow: hidden;
}
.get-directions .location-image img{
  min-width: 100%;
  height: auto;
}
.get-directions .location-image img.map{
  /*width: auto;*/
  width: 242px;
  margin-left: -12px;
}

.get-directions .location{
  display: inline-block;
  width: 230px;
  padding: 8px;
  margin: 5px;
  background: #fff;
  border: 1px solid #E7E7E2;
}
.location span.location-name{
  color: #4D4D4D;
  display: inline-block;
  margin: 8px 0 1px 0;
  font-size: 0.9em;
}
.location:hover span.location-name{
  color: var(--kr-medium-blue);
  /*color: #fff;*/
}
.location:hover{
  /*background-color: var(--kr-medium-blue);*/
  /*border-color: #FFB463;*/
  border-color: #DDDDD8;
}


/* #News
   --------------------- */

.news h3{
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1em;
  border-bottom: 4px solid;
  border-color: var(--kr-medium-blue);
  line-height: 2.4;
  margin-bottom: 15px;
}
@media (max-width: 350px){
  .news h3{
    font-size: .85em;
    line-height: 1.7;
  }
}

@media (max-width: 1200px){
  .featured-video{
    padding-right: 40px;
  }
}
@media (max-width: 992px){
  .featured-video{
    padding-right: 15px;
    margin-bottom: 3em;
  }
  .featured-video iframe{
    height: 300px;
  }
}
@media (max-width: 500px){
  .featured-video iframe{
    height: 210px;
  }
}

.featured-video .video img{
  width: 100%;
}
.video img{
  width: 260px;
  height: auto;
}
.video .video-title{
  color: #4D4D4D;
  font-weight: bold;
  /*font-size: 0.9em;*/
  /*line-height: 2.5;*/
  display: block;
  margin: 0.7em 0 1em;
}
.home .video a.video-title{
  color: #4D4D4D;
}

.news a:hover,
.news a:hover span{
  color: var(--kr-medium-blue);
  text-decoration: none;
}

.pull-letter{
/*  display: block;
  margin-right: 30px;
  float: left;
  height: 80px;*/
  font-weight: bold;
  font-size: 1.1em;
  font-style: normal;
  color: var(--kr-medium-blue);

  display: table-cell;
  vertical-align: top;
  width: 5%;
}

.home .latest-answer p{
  width: auto;
  /*padding-right: 25px;*/
  font-style: normal;
}
.home .latest-answer .question{
  font-weight: bold;
  letter-spacing: 0.2px;
  /*width: 90%;*/
}
.home .latest-answer .answer{
  margin: 0;
  display: table;
  width: auto;
}
.home.page .latest-answer .pull-letter{
  width: 7%;
}
@media (max-width: 500px){
  .home.page .latest-answer .pull-letter{
    display: none;
  }
}


/* --------------------------- */
/*  #Ask The Rheumatologist              
/* --------------------------- */


.page-ask-a-question .main-column{
  padding-right: 175px;
}
@media (max-width: 1200px){
  .page-ask-a-question .main-column{
    padding-right: 15px;
  }
}

/* #Browse Answers */
ul.post-tags {
  padding: 0;
  font-size: 0.9em;
  margin: 0 0 2.5em;
}
.content ul.post-tags li{
  display: inline-block;
  list-style: none;
  left: 0;
  padding-right: 0;
}
ul.post-tags li a{
  color: #fff !important;
  background: #4DD1DF;
  display: inline-block;
  padding: 0.25em 0.9em;
  border-radius: 1.2em;
  margin: 0 0.1em;

/*  color: #4D4D4D !important;
  background: #ccc;*/
}
ul.post-tags li a:hover,
ul.post-tags li a.active{
  text-decoration: none;
  background: var(--kr-medium-blue);

/*  color: #fff !important;
  background: #4DD1DF;
  opacity: 1;*/
}

#more-tags.collapse.in{
  display: inline;
}

/*.question p{
  width: 90%;
  float: left;
}
.question a{
  float: right;
}
.answer{
  padding-left: 48px;
  width: 90%;
}*/

#tag-heading{
  margin-bottom: 1.6em;
}

.page .question,
.browse-answers .question{
  width: 100%;
  display: table;
  margin-bottom: 1.2em;
}
.page .pull-letter,
.browse-answers .pull-letter{
  display: table-cell;
  vertical-align: top;
  width: 5%;
  text-align: left;
  float: none;
  height: auto;
  padding-right: 10px;
}
.page .question p,
.browse-answers .question p,
.single .browse-answers .answer p{
  display: table-cell;
  vertical-align: top;
  margin-bottom: 0;
}

.browse-answers .question .toggle{
  display: table-cell;
  width: 5%;
  text-align: right;
  padding-left: 10px;
}
.browse-answers .question a.toggle-answer{
  color: #fff !important;
  background: var(--kr-medium-blue);
  display: inline-block;
  width: 21px;
  height: 21px;
  border-radius: 100%;
  font-weight: 500;
  position: relative;
}
.browse-answers .question .toggle a:after{
  position: absolute;
  content: '\2013';
  width: 21px;
  text-align: center;
  left: 0px;
  top: -0.9px;
}
.browse-answers .question .toggle a.collapsed:after{
  content: '+';
  top: 0;
}
.browse-answers .question .toggle a:hover{
  text-decoration: none;
  background: #4DD1DF;
}

.page .question,
.browse-answers .question{
  position: relative;
  padding: 0 0 1em 0;
  margin: 0 0 .2em 0;
}
.browse-answers .question a.permalink{
  position: absolute;
  bottom: 0;
  left: 41px;
  font-size: 0.75em;
}


.browse-answers .answer{
  width: 90%;
  margin: 0 auto 1.2em;
  font-style: italic;
}
.single .browse-answers .answer{
  width: 100%;
}

.show-more-tags{
  margin-top: 0.5em;
  padding-left: 5px;
}

.container .browse-answers a.browse-more{
  margin: 2em 0;
  display: inline-block;
  font-size: 0.85em;
  font-weight: normal;
}


/* --------------------------- */
/*  #Patient Portal              
/* --------------------------- */

.content article form p{
  margin: 0 0 1em;
}

/* Login */
.content .login{
  padding: 0;
}
.login p.message, .login p.error{
  padding: 0.5em 0.6em;
  max-width: 700px;
}
.login form p.forgetmenot label {
  display: inline;
  vertical-align: middle;
  font-size: 0.85em;
  margin-left: 0.2em;
}
.content ul.tml-action-links{
  padding: 0;
}
.content ul.tml-action-links li{
  list-style: none;
  left: 0;
  padding-right: 0;
}
/* User Profile */
.extra-fields{
  display: none;
}
form#your-profile input, form#your-profile textarea,
form#loginform input, form#loginform textarea,
#theme-my-login form input, #theme-my-login form textarea{
  max-width: 400px;
}
form span.description,
form p.description{
  font-size: 0.85em;
  display: block;
  max-width: 600px;
}
form span.description{
  /*margin-left: 0.5em;*/
}
form#your-profile p.contact-info{
  margin: 2.5em 0 1em;
}
form#your-profile p#password{
  margin: 2.5em 0 0;
}
#pass-strength-result{
  float: none;
  margin-bottom: 0.7em;
}
form#your-profile p.submit{
  margin: 2em 0 0 0;
}





/* --------------------------- */
/*  #Search              
/* --------------------------- */



.content .search-results h2{
  margin-top: 1.5em;
  margin-bottom: 1.4em;
}

.content .search-results a h4{
  font-size: 1.05em;
  font-weight: bold;
  margin: 1.4em 0 .2em 0;
  color: var(--kr-medium-blue);
}
.search-results span.show-permalink{
  display: block;
  font-size: 0.8em;
  color: #228B36; /*(forestgreen)*/
  font-weight: normal;
}
.search-results a:hover{
  text-decoration: none;
}
.search-results a h4:hover{
  text-decoration: underline;
}

.content .search-results p{
  font-size: 0.9em;
  margin-top: 0.1em;
}
a.read-more{
  font-weight: normal;
  display: block;
  margin-top: 0.15em;
}
a.read-more:hover{
  text-decoration: underline;
}

.navigation{
  /*float: right;*/
  margin-top: 2em;
}
.browse-answers .navigation{
  margin-top: 3em;
  font-size: 0.9em;
  float: right;
}
.navigation span.page-numbers,
.navigation a{ 
  display: inline-block;
  color: #fff;
  padding: 0.3em 0.7em;
  background-color: var(--kr-medium-blue);
}
.navigation span.page-numbers,
.navigation a:hover{
  opacity: 0.7;
  text-decoration: none;
}
.navigation span.page-numbers{
  margin-bottom: 3px;
}

.current-page{
  float: right;
  color: #999;
  font-size: 0.85em;
}
#tag-heading.browse-all .current-page{
  /*float: left;*/
}
#tag-heading.browse-all{
  min-height: 10px;
}

.content article p.num-results{
  display: none;
  color: #888;
  font-size: 0.95em;
  font-weight: normal;
  margin: 0.8em 0 0;
}



/* --------------------------- */
/*  #Links / Accordions              
/* --------------------------- */

.content h4.panel-title{
  margin: 0;
  font-size: 1.1em;
}
.content h4.panel-title a{
  color: #4d4d4d;
}
.content .accordion .panel{
  font-size: 0.9em;

}
.content .panel ul{
  padding-left: 0;
}
.content .panel ul li{
  margin-top: 1em;
  list-style: none;
  left: 0;
  padding-right: 0;
}
.content .panel ul li:first-child{
  /*margin-top: 0;*/
}
.panel-body{
  margin-left: -5%;
}
.content article .panel-body p, .content article .panel-body ul li{
  float: left;
  width: 40%;
  margin-left: 5%;
}


/* -------------------------------------- */
/*  #Gallery / Image Gallery / Galleria           
/* -------------------------------------- */

.content .galleria-container{
  background: #E7E7E2;
}

.content .galleria-thumbnails .galleria-image{
  border: 1px solid #fff;
}

.galleria-lightbox-close{
  right: 11px !important;
}

.galleria{
  max-width: 600px;
  height: 430px;
  margin-bottom: 1em;
}
@media (max-width: 767px){
  .galleria{
    height: auto;
  }
}


/* -------------------------------------- */
/*  #Image of the Month     
/* -------------------------------------- */


.image-of-the-month-container, .wp-caption{
  border: 1px solid #E7E7E2;
  text-align: center;
  /*padding: 1em;*/
  max-width: 550px;
  /*width: auto !important;*/
  min-width: 170px;
  margin-bottom: 1.5em;
  box-shadow: 0px 1px 2px #eee;

  /*border: 1em solid #fff;*/
  /*outline: 1px solid #e7e7e2;*/
  padding: .6em;
}
.image-of-the-month .wp-caption{
  min-width: 400px;
}
@media (max-width: 767px){
  .image-of-the-month .wp-caption{
    width: auto;
    width: 100% !important;
    min-width: 0;
    float: none;
    display: block;
  }
}

.image-of-the-month-container .image, .wp-caption{
  background: #E7E7E2;
  background: #EFEFEB;
  /*background: #EBEBE7;*/
  background: #F6F6F0;
}
.image-of-the-month-container img, .wp-caption img{
  /*margin: 1em 0;*/
  /*width: 100%;*/
  max-width: 100%;
}
.image-of-the-month-container p.caption,
.wp-caption p.wp-caption-text{
  /*border-top: 1px dotted #E7E7E2;*/
  padding-top: .6em;
  text-align: left;
  font-size: .85em;
  margin-bottom: 0;
  /*background: #fff;*/
  font-style: italic;
}
.image-of-the-month .wp-caption p.wp-caption-text{
  font-size: .9em;
}

.image-of-the-month .gform_wrapper{
  font-size: .9em;
  padding: 1em;
  background: #F6F6F0;
  border: 1px solid #E7E7E2;
}

.page-child .carousel-caption{
  color: #4d4d4d;

  bottom: 0;
  width: 100%;
  display: block;
  max-width: 100%;
  left: 0;
  margin-left: 0;
  padding: 1.15em;
  text-align: left;

  position: static;
  border-top: 9px solid white;
}
.page-child .carousel-inner, 
.page-child  .slider .item{
  width: 100%;
  max-width: 600px;
  height: 385px;
}
.page-child .carousel-inner img{
  width: auto;
  height: 260px;
  margin: 0 auto;
  border: 8px solid #F3F3EC;
}
@media (max-width: 1200px){
  .page-child .carousel-inner img{
    height: auto;
    max-height: 260px;
  }
  .page-child .carousel-inner, 
  .page-child  .slider .item{
    height: auto;
  }
}


/* --------------------------- */
/*  #Footer              
/* --------------------------- */

footer#main-footer{
  margin-top: 60px;
  border-top: 1px solid #E7E7E2;
  padding: 40px 0 10px 0;
}

footer h3{
  font-size: 1.4em;
  font-weight: 400;
  /*font-size: 1.5em;*/
}

footer .call-out{
  padding-right: 30px;
}
footer .call-out p{
  min-height: 60px;
}
@media (max-width: 1200px){
  footer .call-out p{
    min-height: 80px;
  }
}
@media (max-width: 992px){
  footer .call-out p{
    min-height: 0;
  }
  footer .call-out{
    padding-bottom: 1em;
  }
}


#main-footer .call-out .button{
  margin: 10px 0;
}
@media (max-width: 992px){
  #main-footer .call-out .button{
    margin: 5px 0;
  }
}

footer .line{
  width: 45px;
  border-top: 4px solid;
  border-color: var(--kr-medium-blue);
  margin: 13px 0;
}

.container.sub-footer{
  background: none;
  padding: 25px 60px 65px;
}
@media (max-width: 1200px){
  .container.sub-footer{
    padding: 20px 45px 65px;
  }
}

.footer-logo a{
  display: inline-block;
  width: 196px;
  height: 55px;
  background: url('images/Ask-Rheum-Logo.svg') no-repeat;
  background-size: contain;
  margin-bottom: 8px;
  vertical-align: middle;
}

@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){
  .footer-logo a{
    background: url('images/Ask-Rheum-Logo.svg') no-repeat;
    background-size: contain;
  }
}

@media (max-width: 992px){
  .footer-logo{
    margin: 0 0 .6em 0;
  }
  .container.sub-footer{
    padding: 20px 35px 65px;
  }
}
@media (max-width: 767px){
  .footer-logo{
    margin: 1.5em 0 .6em;
  }
}

.sub-footer .disclaimer p{
  font-weight: normal;
  font-size: 0.9em;
  padding-right: 20px;
}
@media (max-width: 600px){
  .sub-footer .disclaimer p{
    padding-right: 0;
  }
}

.sub-footer nav.terms,
nav.terms a, nav.terms a:hover{
  color: #808080;
  font-size: 0.9em;
}
nav.terms a{
  display: inline-block;
  position: relative;
  margin-right: 16px;
  padding-right: 16px;
}
nav.terms a:after{
  content: "|";
  position: absolute;
  right: 0;
  color: #b0b0b0;
}
nav.terms a:last-child{
  margin-right: 0;
  padding-right: 0;
}
nav.terms a:last-child:after{
  content: "";
}
nav.terms a:hover{
  text-decoration: underline;
}
/*
.footer-logo img{
  width: 196px;
  height: auto;
}*/

/*  

  #Color Index:
  -
  purple .... var(--kr-medium-blue)
  blue ...... var(--kr-medium-blue) // var(--kr-medium-blue)
  orange .... var(--kr-medium-blue)
  green ..... var(--kr-medium-blue)
  red ....... var(--kr-medium-blue) // var(--kr-medium-blue)

*/




/*
  Yb        dP 888888 88""Yb 888888  dP"Yb  88b 88 888888 .dP"Y8 
   Yb  db  dP  88__   88__dP 88__   dP   Yb 88Yb88   88   `Ybo." 
    YbdPYbdP   88""   88""Yb 88""   Yb   dP 88 Y88   88   o.`Y8b 
     YP  YP    888888 88oodP 88      YbodP  88  Y8   88   8bodP' 
*/


/* --------------------------- */
/*  # Webfonts              
/* --------------------------- */


@charset "UTF-8";

@font-face {
  font-family: "ab-rheumatology";
  src:url("fonts/ab-rheumatology/fonts/ab-rheumatology.eot");
  src:url("fonts/ab-rheumatology/fonts/ab-rheumatology.eot?#iefix") format("embedded-opentype"),
    url("fonts/ab-rheumatology/fonts/ab-rheumatology.woff") format("woff"),
    url("fonts/ab-rheumatology/fonts/ab-rheumatology.ttf") format("truetype"),
    url("fonts/ab-rheumatology/fonts/ab-rheumatology.svg#ab-rheumatology") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "ab-rheumatology" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "ab-rheumatology" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
  content: "a";
}
.icon-youtube-play:before {
  content: "b";
}
.icon-play-circle:before {
  content: "c";
}
.icon-play-1:before {
  content: "e";
}
.icon-left-open-big:before {
  content: "d";
}
.icon-right-open-big:before {
  content: "h";
}
.icon-angle-right:before {
  content: "i";
}
.icon-angle-left:before {
  content: "j";
}
.icon-pencil-1:before {
  content: "g";
}
.icon-ptint:before {
  content: "f";
}
.icon-print:before {
  content: "k";
}
.icon-graph-trend:before {
  content: "l";
}
.icon-graph-pie:before {
  content: "m";
}
.icon-graph-bar:before {
  content: "n";
}
.icon-graph:before {
  content: "o";
}
.icon-design-graphic-tablet-streamline-tablet:before {
  content: "p";
}
.icon-graph-horizontal:before {
  content: "q";
}
.icon-bar-chart:before {
  content: "r";
}
.icon-chart-area:before {
  content: "s";
}
.icon-chart-bar:before {
  content: "t";
}
.icon-chart-line:before {
  content: "u";
}
.icon-chart-pie:before {
  content: "v";
}