@charset "UTF-8"; /* Sets the encoding of the style sheet to Unicode UTF-8. Don't move it.
----------------------------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////////////////////
//  TABLE OF CONTENTS
////////////////////////////////////////////////////////////////////////////////////////////////////
----------------------------------------------------------------------------------------------------

01 - GENERAL STUFF FIRST
1A   - Patterns
1B   - Bootstrap Override
1C   - Backgrounds
**
02 - LAYOUT
2A   - Header
2B   - Banner
2C   - Content
2D   - Footer
2E   - Internet Explorer
**
03 - MEDIAQUERIES
3A   - High DPI
3B   - Above widths
3C   - Dektop
3D   - Tablets
3E   - Cellular

/*--------------------------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////////////////////
01 - STYLE.CSS : GENERAL STUFF FIRST
////////////////////////////////////////////////////////////////////////////////////////////////////
----------------------------------------------------------------------------------------------------
COLORS:
#f3f3f3 => GREY LITE
#a2a2a2 => GREY
#404345 => GREY DARK

#981f23 => RED
#b32d32 => RED LITE
----------------------------------------------------------------------------------------------------
FONTS:
*/
@font-face {
	font-family: 'National';
	src: url('../fonts/NationalWeb-Regular.eot');
	src: local(':)'),
	url('../fonts/NationalWeb-Regular.woff') format('woff'),
	url('../fonts/NationalWeb-Regular.ttf') format('truetype'),
	url('../fonts/NationalWeb-Regular.svg') format('svg');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'National';
	src: url('../fonts/NationalWeb-Bold.eot');
	src: local(':)'),
	url('../fonts/NationalWeb-Bold.woff') format('woff'),
	url('../fonts/NationalWeb-Bold.ttf') format('truetype'),
	url('../fonts/NationalWeb-Bold.svg') format('svg');
	font-weight: 800;
	font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
/*
font-family: 'National', Helvetica, Arial, sans-serif;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
----------------------------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////////////////////
//  GENERAL
////////////////////////////////////////////////////////////////////////////////////////////////////
------------------------------------------------------------------------------------------------- */
*                                                           { box-sizing: border-box; backface-visibility: hidden;}

html                                                        { font-size: 10px;}

body                                                        { font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 100%; color: #000; background: #fff;}

img                                                         { display: block; max-width: 100%; vertical-align: bottom;}
                                                            /* Responsive images. Also, fixed spacing at bottom of image sometimes. */

div, span, p,
ol, ol li,
ul, ul li                                                   { list-style-type: none; vertical-align: top; padding: 0; margin: 0;}
                                                            /* Fixes alignment issues */

h1,   h2,  h3,  h4,  h5,  h6,
.h1, .h2, .h3, .h4                                          { font-family: 'National', Helvetica, Arial, sans-serif; font-style: normal; display: block; margin: 0; font-weight: 700; line-height: 1.05;}


h1, .h1                                                     { font-size: 4.6em; letter-spacing: -0.015em; line-height: 0.9;}
h2, .h2                                                     { font-size: 3.75em;}
h3, .h3                                                     { font-size: 3.0em;}
h4, .h4                                                     { font-size: 1.9em;}

p, li, dl                                                   { font-size: 1.6em; line-height: 2;}

a, i, img                                                   { text-decoration: none; border: none; outline: none; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease;}
a                                                           { color: #981f23;}
a:hover,  .btn:hover,
a:focus,  .btn:focus,
a:active, .btn:active, .btn:active:focus                    { color: #981f23; outline: 0; text-decoration: none;}

blockquote                                                  { display: block; font-size: 2.0em; line-height: 1.35; font-style: italic; text-align: left; color: #990000;}
blockquote span                                             { display: block; font-size: 70%; font-style: normal; margin-top: 10px; font-weight: 700;}

hr                                                          { border-color: #231f20;}

form                                                        { text-align: left;}
form ul                                                     { }
form ul li                                                  { position: relative; float: left; width: 100%; margin: 15px 0 0;}
form ul li.half                                             { width: 48.5%; margin-right: 3%;}
form ul li.half + .half                                     { margin-right: 0;}
form .submit                                                { text-align: center;}
form .btn                                                   { margin: 40px auto 0; font-size: 150%; line-height: 1; width: 100%; max-width: 300px; padding: 20px; font-size: 1.6em;}
form .hide                                                  { position: absolute; z-index: 0; width: 0; height: 0; background-color: transparent; padding: 0; line-height: 0; border: none; -webkit-border-radius: 0; visibility: hidden;}

label                                                       { color: #404345; font-size: 75%; font-weight: 700; margin: 0;}
select                                                      { font-weight: 700; background: url('../images/icon-select.png') #fff no-repeat center right 17px; padding-right: 50px; background-size: 11px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
select option                                               { font-weight: 400;}
select::-ms-expand                                          { display: none;}

.input                                                      { width: 100%; background-color: #f2f2f2; padding: 10px; min-height: 40px; font-weight: 700; line-height: 1; border: 1px solid #cccccc; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease;}
.input:focus, .input:active                                 { outline: none; box-shadow: none;}

.select-wrap                                                { position: relative;}
.select-wrap::before                                        { content: ""; position: absolute; top: 8px; right: 45px; bottom: 8px; background: #cccccc; width: 1px;-webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease;}
.select-wrap select                                         { padding-right: 45px; line-height: 1.5;}

.error .select-wrap::before                                 { background: #b89292;}
.padding-bottom												{ padding-bottom: 40px;}


[class*="shaded"] .input                                    { background-color: #fff;}

form li.error .input                                        { background-color: #f3c9c9; border-color: #b89292;}
form li.error .select-wrap::before                          { background: #b89292;}

.compact form                                               { }
.compact form label                                         { display: none; position: absolute; top: 5px; left: 10px;}
.compact form select                                        { color: #6c757d;}
.compact form .input                                        { padding: 15px; height: auto;}
.compact form select.input                                  { padding-right: 55px; white-space: normal;}
.compact form ul li,
.compact form ul li.half                                    { margin: 0; position: relative;}
.compact form ul li.half                                    { width: 50%;}
.compact form ul li.select                                  { margin-top: 25px;}
/**/
.compact form .group .input                                 { -webkit-border-radius: 0; border-radius: 0; margin-bottom: -1px;}
.compact .half + .half .input                               { border-left: none;}
/**/
.compact form .group .tl                                    { -webkit-border-radius: 4px 0px 0px 0px; border-radius: 4px 0px 0px 0px;}
.compact form .group .tr                                    { -webkit-border-radius: 0px 4px 0px 0px; border-radius: 0px 4px 0px 0px;}
.compact form .group .bot                                   { -webkit-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px;}
/**/
.compact form .location                                     { margin: 0 0 20px}
.compact form .location span                                { margin: 15px 0; display: block;}

#locations-wrapper .background                          { background-image: url('../images/banner-map@2x.jpg');}


/* 1A.Patterns
----------------------------------------
////////////////////////////////////// */
.dark                                                       { color: #404345; }

.white                                                      { color: #fff;}

.color-1                                                    { color: #990000!important;}
.color-1 a                                                  { color: inherit!important;}

.color-2                                                    { color: #ffcc00!important;}
.color-2 a                                                  { color: inherit!important;}

.line                                                       { position: relative; padding-top: 15px;}
.line::before                                               { content: ""; position: absolute; top: -14px; left: 0; margin: auto; width: 50px; height: 8px; background: #990000;}



/*******************
** Buttons
*******************/
.btn                                                        { background-color: #990000; color: #fff; display: inline-block; position: relative; border: none; height: auto; padding: 16px 22px; cursor: pointer; font-size: 1.6em; font-weight: 700; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease;}

.btn:hover,  .btn:focus,
.btn:active, .btn:active:focus                              { background-color: #990000; color: #fff; outline: none; -webkit-box-shadow: none; box-shadow: none;}


.btn.style-2                                                { background-color: #ffcc00; color: #231f20;}
.btn.style-2:hover,  .btn.style-2:focus,
.btn.style-2:active, .btn.style-2:active:focus              { background-color: #ffcc00; color: #231f20;}

.btn.hasIcon                                                { padding-left: 45px; background-position: left 18px center; background-repeat: no-repeat; background-size: 16px auto;}

.btn.hasIcon,
.btn.hasIcon:active,
.btn.hasIcon:active:focus                                   { background-image: url('../images/icon-calendar.png');}

.btn.hasIcon.search,
.btn.hasIcon.search:active,
.btn.hasIcon.search:active:focus                            { background-image: url('../images/icon-search.png');}


p .btn, li .btn                                             { font-size: 100%;}


/*******************
** Vertical Align
*******************/
[class*="va-"]                                              { position: relative; height: 100%; font-size: 0;}
[class*="va-"] > *                                          { display: inline-block; float: none; font-size: 10px; height: auto;}
[class*="va-"] > .fill                                      { font-size: 0!important; width: 0; height: 100%;}

.va-t > *                                                   { vertical-align: top;}
.va-m > *                                                   { vertical-align: middle;}
.va-b > *                                                   { vertical-align: bottom;}


/*******************
** Box Spacing
*******************/
.box-sm                                                     { padding: 15px;}
.box                                                        { padding: 30px;}
.box-lg                                                     { padding: 45px;}


/*******************
** Responsive
*******************/
.iframe-wrapper                                             { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; min-height: 575px;}


/*******************
** Spacing
*******************/
.text ul, .text ol, .text p, .text blockquote                { margin: 20px auto;}

.text li a:not(.btn),
.text p a:not(.btn)                                          { text-decoration: underline;}

.text ul, .text ol                                           { padding: 0 5px 0 20px;}
.text ul li                                                  { list-style: disc; }
.text ol li                                                  { list-style: decimal;}
.text ul li:first-child,
.text ol li:first-child                                      { margin-top: 0;}
.text ul ul, .text ol ul,
.text ul ol, .text ol ol                                     { margin: 0; padding-left: 30px;}
.text h2                                                     { margin: 45px 0 20px;}

.text .icon                                                  { margin-bottom: 30px;}

.text > :first-child                                         { margin-top: 0;}
.text > :last-child                                          { margin-bottom: 0;}

.text ul.list-icon                                           { list-style-type: none; padding: 0; left: auto;}
.text ul.list-icon li                                        { list-style-type: none; padding-left: 60px; position: relative; min-height: 50px;}
.text ul.list-icon li img                                    { position: absolute; top: 0; left: 0; max-width: 40px;}
.text ul.list-icon li + li                                   { margin-top: 15px;}





/* 1B. Bootstrap Override
----------------------------------------
////////////////////////////////////// */
[class^="container"]                                        { width: 100%; max-width: 100%; margin: 0 auto; -webkit-transition: padding 0.25s ease; -moz-transition: padding 0.25s ease; transition: padding 0.25s ease;}
[class^="container"] [class^="container"]                   { padding-left: 15px; padding-right: 15px;}

.section .row + .row                                        { margin-top: 60px;}

.section.padd-xs                                            { padding-top: 15px;  padding-bottom: 15px;}
.section.padd-sm                                            { padding-top: 30px;  padding-bottom: 30px;}
.section                                                    { padding-top: 60px;  padding-bottom: 60px; position: relative;}
.section.padd-md                                            { padding-top: 75px;  padding-bottom: 75px;}
.section.padd-lg                                            { padding-top: 90px;  padding-bottom: 90px;}
.section.padd-xl                                            { padding-top: 80px; padding-bottom: 80px;}
.section.padd-xxl                                           { padding-top: 120px; padding-bottom: 120px;}
.section.padd-nn                                            { padding-top: 0;     padding-bottom: 0;}

.section.no-gutter [class^="container"]                     { padding-left: 0; padding-right: 0;}
.section.no-gutter .row,
.section.no-inner-gutter .row                               { margin: 0 auto;}
.section.no-gutter .row > div,
.section.no-inner-gutter .row > div                         { padding: 0;}

.section.plain + .section.plain                             { padding-top: 0;}

.shaded                                                     { background-color: #ededed;}
.shaded-dark                                                { background-color: #4f4c4d;}
.shaded-color-1                                             { background-color: #990000;}

.shaded-dark h1, .shaded-dark h2,
.shaded-dark h3, .shaded-dark h3,
.shaded-dark h5, .shaded-dark h6                            { color: #ffcc00;}

.shaded-dark ul, .shaded-dark ol,
.shaded-dark p,  .shaded-dark a:not(.btn),

.shaded-color-1 h1, .shaded-color-1 h2,
.shaded-color-1 h3, .shaded-color-1 h3,
.shaded-color-1 h5, .shaded-color-1 h6,
.shaded-color-1 ul, .shaded-color-1 ol,
.shaded-color-1 p,  .shaded-color-1 a:not(.btn),

.background h1, .background h2,
.background h3, .background h3,
.background h5, .background h6,
.background ul, .background ol,
.background p,  .background a:not(.btn)                     { color: #fff;}




/* 1C. Backgrounds
----------------------------------------
////////////////////////////////////// */
.background                                                 { background-repeat: no-repeat; background-position: center; background-size: cover;}

.background.bg-overlay                                      { position: relative;}
.background.bg-overlay::before                              { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: #222; opacity: 0.7;}




/* 1C. Post
----------------------------------------
////////////////////////////////////// */
.post-preview                                               { box-shadow: 0px 0px 35px -10px rgba(0,0,0,0.35); height: auto;}
.post-preview .post-details                                 { background: #fff; }

.post-image                                                 { position: relative;}
.post-image img                                             { width: 100%;}
.post-image .box                                            { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; z-index: 10; font-weight: 700;}
.post-image .box p                                          { line-height: 1.5;}


.gradient-black                                             { position: relative; color: #fff;}
.gradient-black img                                         { position: relative; z-index: 0;}
.gradient-black::after                                      { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+85,1+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0% rgba(0,0,0,0.75) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}


.post-details                                               { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto;}
.post-details > div                                         { margin: 0;}
.post-details > div + div                                   { margin-top: 15px;}
.post-details > .post-btns                                  { margin-top: 30px;}





/* -------------------------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////////////////////
02 - STYLE.CSS : LAYOUT
////////////////////////////////////////////////////////////////////////////////////////////////////
-------------------------------------------------------------------------------------------------
html, body, #overlay, #wrapper                              { width: 100%; height: 100%;}
html, body                                                  { width: 100%; height: 100%;}
*/

html                                                        { opacity: 0;}
html.ready                                                  { opacity: 1; -webkit-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; transition: opacity 0.5s ease;}

.nowrap                                                     { white-space: nowrap;}
.upper                                                      { text-transform: uppercase;}

#wrapper                                                    { position: relative; z-index: 0; width: 100%; max-width: 2000px; margin: 0 auto;}

.overlay                                                    { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; z-index: 0;}

.form-wrap                                                  { position: relative; max-width: 650px; margin: 0 auto; padding: 60px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.35);}
.form-wrap .h1                                              { margin-bottom: 0px;}
.form-wrap .text                                            { margin-bottom: 30px;}
.form-wrap .close-overlay                                   { position: absolute; top: 0; right: 0; padding: 20px; cursor: pointer; z-index: 10;}
.form-wrap .form-p                                          { margin-top: 30px; text-align: center; font-size: 1.8em; line-height: 1.5;}
.form-wrap .form-p a                                        { font-size: 125%; font-weight: 700;}

#scroll-nav                                                 { position: static; top: 0; left: 0; margin: 0; background: #fff; width: 100%; padding: 30px 0; -webkit-box-shadow: 0 0 rgba(0,0,0,0); box-shadow: 0 0 rgba(0,0,0,0); -webkit-transition: all 0.25s box-shadow; transition: all 0.25s box-shadow;}
#scroll-nav .mobile-select                                  { display: none; cursor: pointer; position: relative; background-color: #ffcc00; color: #231f20; border: 1px solid #231f20; padding: 12px; padding-right: 45px; text-transform: uppercase; font-size: 1.8em; font-weight: 700; }
#scroll-nav .mobile-select ul                               { position: absolute; top: 0; right: 15px; bottom: 0; left: auto; margin: auto; width: auto; height: 12px;}
#scroll-nav .mobile-select ul li                            { width: 20px; height: 1px; background: #231f20;}
#scroll-nav .mobile-select ul li.mid                        { margin: 4px 0;}
#scroll-nav .mobile-select + .btns ul                       { border-top: 0;}




/* 2A. Header
----------------------------------------
////////////////////////////////////// */
#header                                                     { }
#header .logo-l                                             { float: left;}
#header .logo-r                                             { float: right;}




/* 2B. Banner
----------------------------------------
////////////////////////////////////// */
#banner                                                     { }
#banner .row                                                { min-height: 550px; width: 1230px;}
#banner .background                                         { background-image: url('../images/header.jpg'); background-position: right 50% center;}
#banner h1                                                  { font-size: 11.0em; line-height: 0.8; margin: 0; text-transform: uppercase; letter-spacing: -4px;}
#banner p                                                   { font-size: 1.8em; line-height: 1.5; color: #000; max-width: 700px; margin-left: 0;}

.thank-you #banner p                                        { max-width: 600px;}




/* 2C. Content
----------------------------------------
////////////////////////////////////// */
#content                                                    { padding: 0;}


.btns ul                                                    { font-weight: 700; padding: 0; margin: 0 -10px;}
.btns ul li                                                 { margin: 10px;}
.btns ul li:not(:last-child)                                { margin-right: 30px;}
.btns ul li a                                               { display: block; position: relative; color: #000; text-transform: uppercase; padding: 0;}
.btns ul li a::after                                        { content: ""; position: absolute; top: 105%; height: 4px; width: 0; background: #fff; opacity: 0; transition: 0.25s all ease;}
.btns ul li.active a,
.btns ul li:hover a                                         { color: #990000;}
.btns ul li a::after                                        { content: ""; position: absolute; top: 102.5%; left: 0; height: 3px; width: 0; background: #fff; opacity: 0; transition: 0.25s all ease;}
.btns ul li.active a::after,
.btns ul li:hover a::after                                  { width: 100%; background: #990000; opacity: 1;}


#locations-wrapper                                          { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}

#map                                                        { width: 100%; height: 100%;}
#map .marker                                                { }
#map .gm-style img                                          { max-width: 100%;}
#map .gm-style .gm-style-iw                                 { font-size: 100%; padding: 30px; border-radius: 0; }
#map .gm-style .gm-ui-hover-effect                          { /*display: none!important;*/ top: 4px!important; right: 5px!important;}
#map .marker-details                                        { max-width: 350px; height: auto;}
#map .marker-details a:hover                                { text-decoration: underline;}

#map .gm-style .gm-style-iw-t::after                        { width: 35px!important; height: 35px!important;}

#map .gm-style .gm-style-iw-c                               { min-height: 455px;}
/* #map .gm-style .gm-style-iw-t::after                        { transform: translate(-50%,-50%) rotate(45deg);} */

.location-select                                            { display: none; padding: 15px;}
.location-select select                                     { font-size: 1.8em; font-weight: 700; background-color: #fff;}

.location-list                                              { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: auto; height: auto; overflow-y: auto;}
.location-list .location                                    { padding: 25px 35px; cursor: pointer; background: #ededed; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
.location-list .location + .location:not(.active)           { border-top: 1px solid #231f20;}
.location-list .location.active + .location                 { border-top: 1px solid #ededed;}

.location-list .location.hover:not(.active)                 { background: #c6c6c6;}

.location p                                                 { font-size: 1.7em;}
.location a                                                 { color: #000;}
.location a:hover                                           { text-decoration: underline;}
.location .title                                            { }
.location .title *                                          { color: #231f20;}
.location .address,
.location .link                                             { display: none;}
.location .view                                             { display: block; text-decoration: none;}
.location .view:hover                                       { text-decoration: underline;}
/**/
.location.active,
.location.active:hover                                      { color: #fff; background: #990000; cursor: default; border-top: 1px solid #990000;}
.location.active *                                          { color: #fff;}
.location.active .view                                      { display: none;}
.location.active .address,
.location.active .link                                      { display: block;}

.specialty-bullets										  	{ margin-left:22px; margin-top: 1.8em; font-size: 1.3em;}




.section.doctors .row + .row                                { margin: 0;}
.doctor                                                     { margin: 45px auto 0;}
.doctor .image                                              { position: relative; margin: 0; padding: 0; border-bottom: 1px solid #e2e2e2;}
.doctor .image img                                          { width: 100%;}
.doctor .image::after                                       { content: ""; position: absolute; bottom: -1px; left: 0; height: 4px; width: 45px; background: #981f23;}
.doctor p                                                   { margin: 15px 0 5px; line-height: 1.35;}
.doctor a                                                   { font-size: 1.6em; text-decoration: none;}
.doctor a:hover                                             { text-decoration: underline;}


#side                                                       { padding-right: 0;}
#side .video                                                { text-decoration: underline;}
#side .video p                                              { font-size: 14px; margin: 0 0 0 15px;}

#floater                                                    { position: fixed; bottom: 0; left: 0; margin: auto; width: 100%; transform: translate3d(0,100%,0); transition: transform 0.25s ease;}
#floater.visible                                            { transform: translate3d(0,0,0);}
#floater .btn                                               { -webkit-border-radius: 0; border-radius: 0; width: 100%;background-color: #ffcc00;color: #231f20;}




/* 2D. Footer
----------------------------------------
////////////////////////////////////// */
#footer                                                     { background: #363636; padding: 45px 0; color: #999999;}
#footer a                                                   { color: #999999; text-decoration: underline;}
#footer p + p                                               { margin-top: 15px;}




/* 2E. Internet Explorer
----------------------------------------
////////////////////////////////////// */

html.ie9                                                    { }

html.ie8-7                                                  { }








/* -------------------------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////////////////////
03 - MEDIAQUERIES
////////////////////////////////////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////////////////////
//  TABLE OF CONTENTS
////////////////////////////////////////////////////////////////////////////////////////////////////
----------------------------------------------------------------------------------------------------
03 - MEDIAQUERIES
3A   - High DPI
3B   - Above widths
3C   - Dektop
3D   - Tablets
3E   - Cellular
/* -------------------------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////////////////////////
04 - MEDIAQUERIES
////////////////////////////////////////////////////////////////////////////////////////////////////
----------------------------------------------------------------------------------------------------
/* 4A. High DPI
----------------------------------------
////////////////////////////////////// */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-device-pixel-ratio: 2),
       (min-resolution: 192dpi)
{
    .btn.hasIcon.calendar,
    .btn.hasIcon.calendar:active,
    .btn.hasIcon.calendar:active:focus                      { background-image: url('../images/icon-calendar@2x.png');}

	.btn.search.calendar,
    .btn.search.calendar:active,
    .btn.search.calendar:active:focus                       { background-image: url('../images/icon-search@2x.png');}

	#banner .background                                     { background-image: url('../images/header.jpg');}

	#locations-wrapper .background                          { background-image: url('../images/banner-map@2x.jpg');}
}




/* 4B. Above widths
----------------------------------------
////////////////////////////////////// */
@media screen and (min-width: 1901px)
{
    body                                                    { font-size: 115%;}

    [class*="va-"] > *                                      { font-size: 11.5px;}
}

@media screen and (min-width: 1200px)
{
    [class*="container"]                                    { padding-right: 10.8em; padding-left: 10.8em;}

	.row                                                    { margin-left: -30px; margin-right: -30px;}
	.row > div                                              { padding-left: 30px; padding-right: 30px;}
	.phys-padding > div                                 	{ padding-left: 0px;}
	
	.no-italics 											{font-style: normal;}

	.row.add-gap                                            { margin-left: -60px; margin-right: -60px;}
	.row.add-gap > div                                      { padding-left: 60px; padding-right: 60px;}

}


@media screen and (min-width: 992px)
{
	#floater                                                { top: 75px; right: 0; left: auto; bottom: auto; width: auto; transform: translate3d(100%,0,0);}
	#floater .btn                                           { -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;}

	#scroll-nav .mobile-select + .btns                      { display: block!important;}

	#banner p                                               { margin-top: 30px; font-size: 2.0em;}
	#banner .background::before                             { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 70%; height: auto; background: #fff;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,1+15,0+100 */
		background: -moz-linear-gradient(left,  rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 55%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 55%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
	}

	#form-wrapper-top                                       { margin-top: -180px;}
		
	.col-lg-2-half 											{ -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%;}

}

@media screen and (min-width: 768px)
{
    .thank-you #banner                                      { display: table; height: 600px; width: 100%;}
    .thank-you #banner .container                           { display: table-cell; vertical-align: middle;}
}




/* 4C. Dektop
----------------------------------------
////////////////////////////////////// */
@media screen and (max-width: 1199px)
{
	.post-preview .post-details                             { padding: 30px;}

	#scroll-nav                                             { padding: 15px 0;}

	.form-wrap                                              { padding: 30px;}

	#banner .row                                            { min-height: 400px;}
	
}




/* 4D. Tablets
----------------------------------------
////////////////////////////////////// */
@media screen and (max-width: 1024px)
{

}


@media screen and (max-width: 991px)
{
	h1, .h1                                                 { font-size: 3.8em;}
	h2, .h2                                                 { font-size: 2.9em;}
	h3, .h3                                                 { font-size: 2.4em;}
	h4, .h4, blockquote                                     { font-size: 1.9em;}

	p, li, dl, .btn                                         { font-size: 1.7em;} 

	.btn                                                    { padding: 12px 18px; width: 100%;}

	.text ul, .text ol, .text p, .text blockquote           { margin: 15px auto;}
	.text p + h2                                            { margin-top: 30px;}

	.box                                                    { padding: 15px;}
	.box-lg                                                 { padding: 30px;}

	.section, .section[class*="padd-"]                      { padding-top: 45px; padding-bottom: 45px;}
	.section.padd-sm                                        { padding-top: 30px;  padding-bottom: 30px;}
	.section.padd-xs                                        { padding-top: 15px;  padding-bottom: 15px;}
	.section.padd-nn                                        { padding-top: 0; padding-bottom: 0;}

	.section .row + .row                                    { margin-top: 45px;}

	.form-wrap                                              { max-width: 100%;}

	#scroll-nav                                             { padding: 0;}
	#scroll-nav .mobile-select                              { display: block;}
	#scroll-nav .mobile-select + .btns                      { display: none;}

	#first                                                  { padding-top: 30px;}
	#form-wrapper-top                                       { margin-bottom: 45px;}

	.btns ul                                                { margin: 0; text-align: center; border-top: 1px solid #000;}
	.btns ul li                                             { margin: 0; width: 100%; border: 1px solid #000; border-top: none; font-size: 1.6em; text-align: left;}
	.btns ul li:not(:last-child)                            { margin-right: 0;}
	.btns ul li a                                           { padding: 12px; text-transform: uppercase;}
	.btns ul li a::after                                    { content: none;}
	.btns ul li.active a,
	.btns ul li:hover a                                     { color: #fff; background: #990000;}

	#banner                                                 { font-size: 100%; padding: 0;}
	#banner .row                                            { min-height: 0; width: 100% !important; margin: 0px; padding: 0px;}
	#banner .background                                     { position: relative; width: 100%; padding-top: 42%; background-position: center;}
	#banner .text                                           { margin: 30px auto;}
	#banner h1                                              { font-size: 6.8em;}

	#footer                                                 { padding-bottom: 90px;}
	
	.col-lg-10.col-xl-10 									{ padding: 0px;}
	
	.col-md-5.donate 										{ padding-right: 0px !important; padding-bottom: 45px;}
	
	.col-lg-7.col-xl-7 										{ padding: 0px 0px 0px 2px !important; }
}


@media screen and (max-width: 767px)
{
    .section, .section[class*="padd-"]                      { padding-top: 45px; padding-bottom: 45px;}
	.section.padd-xs                                        { padding-top: 15px;  padding-bottom: 15px;}
	.section.padd-nn                                        { padding-top: 0; padding-bottom: 0;}

    #header                                                 { padding: 20px 0;}
    #header .logo-l                                         { margin: 0 auto; float: none !important; padding-bottom: 18px;}
	#header .logo-r                                         { clear: both; float: none !important; text-align: center;}

	#side                                                   { padding: 15px 0 0;}

	.location-select                                        { display: block;}
	.location-list                                          { display: none; position: relative; height: auto;}
}


@media screen and (max-width: 500px){
	
	#banner h1                                              { font-size: 5.4em !important; } 
}

/* 4E. Cellular
----------------------------------------
////////////////////////////////////// */
@media screen and (max-width: 667px)
{
	/*
    body                                                    { font-size: 85%;}

    [class*="va-"] > *                                      { font-size: 8.5px;}
	*/

	#banner h1                                              { font-size: 6.5em;}

	.form-wrap                                              { padding: 30px 15px; text-align: center;}

    form ul li.half                                         { width: 100%; margin-right: 0;}
	
	.col-2.col-lg-2-half 									{  max-width: 100%; flex: auto; }
	
	logo-r.header-number a 									{  line-height: 33px !important; }
}


@media screen and (max-width: 480px)
{
	#banner h1                                              {font-size: 4.4em !important; letter-spacing: -2px !important;}
	.post-preview											{margin-bottom: 50px;}
}


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

}

.align-items-center .col-lg-10.col-xl-10 					{ flex: 0 0 100%;}

#locations-wrapper .infowindow 								{ padding: 30px; background: #fff;}

#header .logo-r 											{ float: right;} 

.header-number   											{ font-size:23px; }

.logo-r.header-number										{ line-height: 0px; }

.logo-r.header-number a 									{ line-height: 19px;}

.col-md-5.donate											{ padding-right: 93px;}

.col-lg-7.col-xl-7 											{ padding: 0px 0px 0px 7px;}

.text h1 													{ margin-left: -8px; }

.col-sm-10 h2 												{ padding-bottom: 20px; }

.request-appointment-link									{ font-size: 1.5em; }
.location.active .request-appointment-map 					{ text-align: center; border-color: #fff; border-style: solid; border-width: 2px; color: #fff; padding: 4px 4px 4px 4px; margin-top: 1.8em;}
.location.active .request-appointment-map a					{ text-decoration: none; }
.request-appointment-patient-story						{ font-size: 1.8em; font-weight: bolder; }
.request-appointment-patient-story a						{ text-decoration: underline; }	
.view p										{ font-size: 1.3em; text-decoration: underline; }
.request-appointment-map a 							{ font-size: 1.3em; text-decoration: underline; }