/*
Theme Name: Joshua Medical Clinic 2016
Theme URI: https://wordpress.org/themes/twentysixteen/
Author: PlainJoe Studios
Author URI: https://plainjoestudios.com/
Description: Joshua Medical Clinic 2016 is a PJS custom built wordpress theme designed for Joshua Medical Clinic.
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, white, dark, light, one-column, two-columns, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support
Text Domain: 2016
*/

/*
 * Table of Contents for Stylesheet
 *
 * 1.0 - Basic HTML
 * 2.0 - Announcement Bar
 * 3.0 - Header
 * 4.0 - Banner
 * 5.0 - Announcement Ribbon
 * 6.0 - Homepage
 * 7.0 - Subpage
 * 8.0 - Footer
 * 9.0 - Miscellaneous
 * 10.0 - Responsive
 */

/* 1.0 - Basic HTML Styling */

html,body {width:auto; height:auto; margin:0; padding:0; background-color:#fff;}
h1,h2,h3,h4,h5,ul,ol,li,form {margin:0; padding:0; letter-spacing:.05em;}
div {width:auto; height:auto; margin:0 auto; color:#242424; letter-spacing:.04em;}
p {margin:0; padding-bottom:20px; font-family:"proxima-nova", Arial, Sans-serif; letter-spacing:.04em;}
a {color:#fff; outline:none; text-decoration:none; cursor:pointer; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;}
a:hover {color:#faa854; text-decoration:none;}
img {border:0; outline:none; max-width:100%; height:auto;}
object,embed {outline:none; display:block;}
input,textarea,select {outline:none;}
ul {list-style:disc; margin:0;}
ol {margin:0;}
iframe {max-width:100%; max-height:100%;}
::-moz-selection {background:#fbaf34; color:#fff; text-shadow:none;}
::selection {background:#fbaf34; color:#fff; text-shadow:none;}
::-webkit-input-placeholder {color:#c8c8c8;}
:-moz-placeholder {color:#c8c8c8;}
::-moz-placeholder {color:#c8c8c8;}
:-ms-input-placeholder {color:#c8c8c8;}

/* 2.0 - Announcement Bar Styling */

.announcement-bar {padding:10px 0; font:300 14px "proxima-nova", Arial, Sans-serif; color:#fff; text-align:center; text-transform:uppercase; letter-spacing:.05em; background-color:#303030; display:block;}
.announcement-bar .section {color:#fff; padding:0 20px; display:inline-block;}
.announcement-bar .section a {font-weight:700; display:inline-block;}

/* 3.0 - Header Styling */

.header {width:100%; height:auto; margin:0; padding:30px 0; background-color:rgba(11,52,59,.7); position:absolute; z-index:6; display:inline-block;}
.header.pinned {padding:18px 0; position:fixed; top:0;}
.header .container {width:auto; padding:0 40px; display:block;}
.header .container .logo {width:50%; margin:0; padding:0; float:left; display:inline-block;}
.header .container .navigation {width:50%; margin:0; padding-top:6px; text-align:right; float:left; display:inline-block;}
.header .container .navigation ul {width:auto; margin:0; padding:0; display:block;}
.header .container .navigation ul li {width:auto; margin:0 20px; padding:0; text-transform:uppercase; letter-spacing:.05em; display:inline-block; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;}
.header .container .navigation ul li .sub-navigation {max-width:220px; width:100%; height:0; margin-top:7px; background-color:#25525a; position:absolute; overflow:hidden; display:block; -webkit-transform:translateX(-35%); -moz-transform:translateX(-35%); -ms-transform:translateX(-35%); transform:translateX(-35%);}
.header .container .navigation ul li .sub-navigation.open {height:165px; padding:10px 0;}
.header .container .navigation ul li .sub-navigation li {margin:0; padding:0; display:block; text-align:left;}
.header .container .navigation ul li .sub-navigation li a {padding:10px 20px; border:none; display:block;}
.header .container .navigation ul li .sub-navigation li a:hover {background-color:#20494f; border:none; display:block;}
.header .container .navigation ul li a {padding:5px 0; font:300 14px "proxima-nova", Arial, Sans-serif; color:#fff; border-bottom:2px solid transparent;}
.header .container .navigation ul li a:hover {border-bottom:2px solid #faa854;}
.header .container .navigation ul li a.selected {border-bottom:2px solid #faa854;}
.header .container .navigation ul li a.special {margin:0 10px; border-bottom:0;}
.header .container .navigation ul li a.special {padding:7px 14px; font-weight:600; border-radius:32px; background-color:#54b191; display:block;}
.header .container .navigation ul li a.special:hover {color:#faa854; background-color:#fff; display:block;}
.header .container .mobile-navigation {display:none;}
.header .container .mobile-navigation {width:12%; padding-top:14px; float:left; text-align:right; display:none;}
.header .container .mobile-navigation .btn {font-size:24px; height:22px; position:relative; display:block;}
.header .container .mobile-navigation .btn span {width:26px; height:3px; display:block; position:absolute; background:#fff; border-radius:3px; opacity:1; right:0; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out;}
.header .container .mobile-navigation .btn span:nth-child(1) {top:0px; -webkit-transform-origin:left center; -moz-transform-origin:left center; -o-transform-origin:left center; transform-origin:left center;}
.header .container .mobile-navigation .btn span:nth-child(2) {top: 8px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
.header .container .mobile-navigation .btn span:nth-child(3) {top: 16px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
.header .container .mobile-navigation .btn.open span:nth-child(1) {-webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); top:0;}
.header .container .mobile-navigation .btn.open span:nth-child(2) {width:0%; opacity:0;}
.header .container .mobile-navigation .btn.open span:nth-child(3) {-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); top:18px;}

.mobile-menu {width:100%; height:0; color:#fff; background-color:rgba(11,52,59,.95); list-style:none; position:fixed; top:0; z-index:5; overflow:hidden; display:none;}
.mobile-menu.open {height:100%;}
.mobile-menu .main-menu {width:100%; position:absolute; top:0; left:0; display:block;}
.mobile-menu .main-menu.close {-webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%);}
.mobile-menu .main-menu li {width:auto; margin:0 auto; padding:4px 20px; font:300 16px "proxima-nova", Arial, Sans-serif; text-transform:uppercase; text-align:left; display:block;}
.mobile-menu .main-menu li.spacer {height:70px;}
.mobile-menu .main-menu li.divider {width:25%; height:1px; margin:0; padding:20px 20px 30px 20px; line-height:1px; display:block;}
.mobile-menu .main-menu li.divider hr {padding:0; margin:0;}
.mobile-menu .main-menu li a {padding:12px 0; color:#fff; letter-spacing:0.08em; display:inline-block;}
.mobile-menu .main-menu li a i {margin-left:10px; color:#faa854;}
.mobile-menu .submenu {width:100%; position:absolute; top:0; left:100%; display:block;}
.mobile-menu .submenu.open {-webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%);}
.mobile-menu .submenu li {width:auto; margin:0 auto; padding:4px 20px; font:300 16px "proxima-nova", Arial, Sans-serif; text-transform:uppercase; text-align:left; display:block;}
.mobile-menu .submenu li.spacer {height:70px;}
.mobile-menu .submenu li a {padding:12px 0; color:#fff; letter-spacing:0.08em; display:inline-block;}
.mobile-menu .submenu li a i {margin-right:10px; color:#faa854;}

/* 4.0 - Banner Styling */

.homepage-banner {width:100%; height:auto; margin:0; padding:0; position:relative; display:block;}
.homepage-banner .blue-overlay {width:100%; height:100%; background-color:rgba(56,168,187,.75); position:absolute; z-index:2; display:block;}
.homepage-banner .tribal-overlay {width:85px; height:100%; background:url(/wp-content/uploads/2016/08/tribal.png) no-repeat left; background-size:cover; position:absolute; z-index:3; display:block;}
.homepage-banner .container {max-width:600px; width:100%; height:auto; margin:0 auto; padding:15% 0 10% 0; color:#fff; text-align:center; position:relative; z-index:4; display:block;}
.homepage-banner .container h1 {width:100%; height:auto; margin:0; padding:0; font:700 54px/54px "proxima-nova", Arial, Sans-serif; letter-spacing:.05em;}
.homepage-banner .container h2 {width:100%; height:auto; margin:0; padding:0; font:500 28px/36px "proxima-nova", Arial, Sans-serif; letter-spacing:.05em;}
.homepage-banner .container .spacer {width:200px; height:3px; margin:15px auto; background-color:#faa854;}

.subpage-banner {width:100%; height:380px; margin:0; padding:0; position:relative; display:block;}
.subpage-banner .blue-overlay {width:100%; height:100%; background-color:rgba(56,168,187,.75); position:absolute; z-index:2; display:block;}
.subpage-banner .tribal-overlay {width:85px; height:100%; background:url(/wp-content/uploads/2016/08/tribal.png) no-repeat left; position:absolute; z-index:3; display:block;}

/* 5.0 - Announcement Ribbon Styling */

.announcement-ribbon {max-width:680px; width:100%; margin:0; background-color:#28616b; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); position:absolute; z-index:4;}
.announcement-ribbon .spacer {width:3%; height:55px; margin:10px 0; background-color:#faa854; vertical-align:middle; float:left; display:inline-block;}
.announcement-ribbon .content {width:90%; margin:10px 2% 10px 5%; color:#fff; vertical-align:middle; float:left; display:inline-block;}
.announcement-ribbon .content a:hover {color:#fff;}
.announcement-ribbon .content h1 {font:500 32px "proxima-nova", Arial, Sans-serif; text-transform:uppercase;}
.announcement-ribbon .content p {padding-bottom:0; font:500 16px "proxima-nova", Arial, Sans-serif;}

/* 6.0 - Homepage Styling */

#hp1 {padding-top:100px; position:relative;}
#hp1 .container {max-width:1060px; margin:0 auto;}
#hp1 .container h1 {color:#30a8bf;}
#hp1 .container .two-column {padding:50px 0; display:inline-block;}
#hp1 .container .two-column .image {max-width:300px; max-height:220px; float:left; display:inline-block;}
#hp1 .container .two-column .content {max-width:730px; padding-left:30px; font:500 17px/26px "proxima-nova", Arial, Sans-serif; float:left; display:inline-block;}

#hp2 {background:url(/wp-content/uploads/2016/08/hp2.jpg) no-repeat center; background-size:cover; position:relative;}
#hp2 .gray-overlay {width:100%; height:100%; background-color:rgba(57,57,57,.75); position:absolute; z-index:2; top:0; left:0;}
#hp2 .container {max-width:720px; margin:0 auto; position:relative; z-index:3;}
#hp2 .container h1 {color:#fff;}
#hp2 .container .content {width:100%; padding:50px 0; font:500 17px/26px "proxima-nova", Arial, Sans-serif; color:#fff; display:block;}
#hp2 .buttons a {color:#fff;}

#hp3 {position:relative;}
#hp3 .container {max-width:740px; margin:0 auto;}
#hp3 .container h1 {color:#30a8bf;}
#hp3 .container .quote {padding-top:50px; text-align:center;}
#hp3 .container .content {width:100%; padding:50px 0; font:italic 500 17px/26px "proxima-nova", Arial, Sans-serif;}
#hp3 .container .content .byline {padding-top:20px; font:normal 500 16px/26px "proxima-nova", Arial, Sans-serif; text-align:center;}
#hp3 .container .content .byline span {font-weight:600;}
#hp3 .container .quotes-pagination .swiper-pagination-bullet {width:12px; height:12px; background-color:#faa854; opacity:1;}
#hp3 .container .quotes-pagination .swiper-pagination-bullet-active {background-color:#acacac;}

#hp4 {background:url(/wp-content/uploads/2016/08/hp4.jpg) no-repeat center; background-size:cover; position:relative; width:auto; height:auto; margin:0 auto; padding:70px 20px; display:block;}
#hp4 .blue-overlay {width:100%; height:100%; background-color:rgba(29,143,165,.8); position:absolute; z-index:2; top:0; left:0;}
#hp4 .container {max-width:880px; margin:0 auto; position:relative; z-index:3;}
#hp4 .container h1 {color:#fff; text-align:left; font: 300 30px "proxima-nova", Arial, Sans-serif; text-transform: uppercase;}
#hp4 .container .two-column {padding:50px 0; display:inline-block;}
#hp4 .container .two-column .image {max-width:540px; float:left; display:inline-block;}
#hp4 .container .two-column .content {max-width:300px; padding-right:40px; font:500 17px/26px "proxima-nova", Arial, Sans-serif; color:#fff; float:left; display:inline-block;}
#hp4 .buttons {text-align:left;}
#hp4 .buttons a {color:#fff; margin:0;}

/* 7.0 - Subpage Styling */

#subpage {width:100%; padding:100px 0 80px 0; position:relative;}
#subpage .container {max-width:800px; padding:0 20px;}
#subpage .container h1 {font:300 30px "proxima-nova", Arial, Sans-serif; color:#30a8bf; text-align:center; text-transform:uppercase;}
#subpage .container .content {padding:40px 0; font:500 17px/26px "proxima-nova", Arial, Sans-serif;}
#subpage .container .content ol {margin:0 0 20px 40px;}
#subpage .container .content ul {margin:0 0 20px 40px;}
#subpage .container .content p {font:500 17px/26px "proxima-nova", Arial, Sans-serif;}
#subpage .container .content a {color:#30a8bf;}
#subpage .container .content a:hover {color:#faa854;}
#subpage .container .buttons {width:100%; height:auto; text-align:center;}
#subpage .container .buttons a {min-width:140px; margin:10px; padding:20px; font:500 15px "proxima-nova", Arial, Sans-serif; color:#2a2a2a; text-transform:uppercase; border:2px solid #faa854; border-radius:40px; display:inline-block;}
#subpage .container .buttons a:hover {color:#2a2a2a; background-color:#faa854;}
.share {padding-top:40px; text-align:center; font:700 15px "proxima-nova", Arial, Sans-serif; text-transform:uppercase;}
.share ul {padding-top:10px;}
.share ul li {width:40px; height:40px; margin:0 5px; display:inline-block;}
.share ul li a {color:#fff; background-color:#faa854; border-radius:50%; display:block;}
.share ul li a:hover {color:#242424;}
.share ul li a i {font-size:24px; line-height:40px;}
.lshare{padding-bottom:80px;}

/* 8.0 - Footer Sytling */

.pre-footer {width:100%; padding:40px 0; background-color:#1b1b1b; clear:both; display:block;}
.pre-footer .container {max-width:500px; padding:0 20px; display:block;}
.pre-footer .container .holder {/* display:inline-block; */ display:block;}
.pre-footer .container .holder .social {width:230px; padding-right:20px; /* text-align:right; float:left; display:inline-block; */ text-align:center; display:block;}
.pre-footer .container .holder .social .inner {font:700 15px/26px "proxima-nova", Arial, Sans-serif; color:#fff; text-align:center; text-transform:uppercase; /* float:right; display:inline-block; */ display:block;}
.pre-footer .container .holder .social .inner ul {padding-top:10px;}
.pre-footer .container .holder .social .inner ul li {width:40px; height:40px; margin:0 5px; display:inline-block;}
.pre-footer .container .holder .social .inner ul li a {color:#1b1b1b; background-color:#fff; border-radius:50%; display:block;}
.pre-footer .container .holder .social .inner ul li a:hover {color:#fff; background-color:#faa854;}
.pre-footer .container .holder .social .inner ul li a i {font-size:24px; line-height:40px;}
.pre-footer .container .holder .hipaa {width:230px; padding-left:20px; text-align:left; float:left; display:inline-block;}

.footer {width:100%; color:#fff; font:500 13px "proxima-nova", Arial, Sans-serif; text-transform:uppercase; background-color:#242424; clear:both; display:inline-block;}
.footer .container {padding:0 10px; display:block;}
.footer .container .holder {width:100%; display:inline-block;}
.footer .container .holder .designer {width:38%; padding:10px 0; text-align:left; float:left; display:inline-block;}
.footer .container .holder .designer a {opacity:.3;}
.footer .container .holder .designer a:hover {opacity:1;}
.footer .container .holder .copyright {width:62%; padding:10px 0; color:#fff; text-align:right; float:left; display:inline-block;}

/* 9.0 - Miscellaneous Styling */

.wrapper {width:100%; height:auto; margin:0; padding:0; position:relative;}
.trans {-webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;}

section {width:auto; height:auto; margin:0 auto; padding:70px 20px; display:block;}
section h1 {font:300 30px "proxima-nova", Arial, Sans-serif; text-align:center; text-transform:uppercase;}
section .buttons {width:100%; height:auto; text-align:center;}
section .buttons a {min-width:140px; margin:10px; padding:20px; font:500 15px "proxima-nova", Arial, Sans-serif; color:#2a2a2a; text-transform:uppercase; border:2px solid #faa854; border-radius:40px; display:inline-block;}
section .buttons a:hover {color:#fff; background-color:#faa854;}

.ninja-forms-all-fields-wrap {margin:0 auto; margin-top:20px; margin-left:-5px; margin-right:-5px; font-family:"proxima-nova", Arial, Sans-serif;}
.ninja-forms-form-wrap label {font-weight:initial !important;}
.ninja-forms-form-wrap input {padding:7px 10px; font:300 17px/26px "proxima-nova", Arial, Sans-serif;}
.ninja-forms-required-items {display:none;}
#ui-datepicker-div {font-family:"proxima-nova", Arial, Sans-serif;}
#ui-datepicker-div a {color:#30a8bf;}
#ui-datepicker-div .ui-datepicker-header {padding:0 0 5px 0 !important;}
#ui-datepicker-div .ui-datepicker-calendar td {padding:0 !important;}
#ui-datepicker-div .ui-datepicker-calendar td a {padding:5px; display:block;}
#ui-datepicker-div .ui-datepicker-calendar td a:hover {background-color:#fff;}
.ui-datepicker-next, .ui-datepicker-prev, .ui-datepicker-title {padding:5px;}
.ui-datepicker-next:hover, .ui-datepicker-prev:hover {background-color:#faa854; color:#fff !important;}
#ninja_forms_field_7_label {visibility:hidden;}
#ninja_forms_field_7 {height:44px; font:300 17px/44px "proxima-nova", Arial, Sans-serif; text-indent:7px; border-radius:0;}
#ninja_forms_field_3 {padding:7px 10px; font:300 17px/26px "proxima-nova", Arial, Sans-serif;}
#ninja_forms_field_4 {padding:10px 20px; font:300 20px "proxima-nova", Arial, Sans-serif; color:#fff; background-color:#30a8bf; border-radius:5px; border:0; cursor:pointer; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;}
#ninja_forms_field_4:hover {background-color:#faa854;}

.health-list, .service-list{text-align:center;}
.services-list {text-align: center;}
.services-list ul{width: 225px; display: inline-block; text-align: center; vertical-align: top; margin: 0px 20px!important;}
.service-item { vertical-align: top; padding: 8px 0px; text-align: left;}

.service-content{margin:40px 0;}

/* 10.0 - Responsive Styling */

@media(max-width:1120px) {
	.header .container .logo {width:40%;}
	.header .container .navigation {width:60%;}
	.header .container .navigation ul li {margin:0 10px;}
	.header .container .navigation ul li a.special {margin:0;}
	
	.homepage-banner .container {padding:22% 0 14% 0;}
	
	#hp1 .container .two-column {display:block;}
	#hp1 .container .two-column .image {margin-bottom:20px; float:none; display:block;}
	#hp1 .container .two-column .content {padding-left:0; float:none; display:block;}
}

@media(max-width:940px) {
	#hp4 .container {max-width:100%; display:block;}
	#hp4 .container h1 {text-align:center;}
	#hp4 .container .two-column {display:block;}
	#hp4 .container .two-column .image {max-width:100%; padding-top:20px; text-align:center; float:none; display:block;}
	#hp4 .container .two-column .content {max-width:540px; padding-right:0; float:none; display:block;}
	#hp4 .buttons {text-align:center;}
}

@media(max-width:760px) {
	.announcement-bar {display:none;}
	
	.header {padding:10px 0; border-bottom:1px solid rgba(255,255,255,.5);}
	.header.pinned {padding:10px 0; position:fixed; top:0;}
	.header .container {padding:0 20px;}
	.header .container .logo {width:88%;}
	.header .container .navigation {display:none;}
	.header .container .mobile-navigation {display:inline-block;}
	
	.mobile-menu {display:block;}
	
	.homepage-banner .container {width:auto; padding:22% 20px 18% 20px;}
	.homepage-banner .container h1 {font-size:42px; line-height:initial;}
	.homepage-banner .container h2 {font-size:20px; line-height:28px;}
	
	.homepage-banner .tribal-overlay {display:none;}
	
	.announcement-ribbon {max-width:100%; width:100%; display:block;}
	.announcement-ribbon .spacer {width:3%; margin:20px 0 20px 0; float:left; display:inline-block;}
	.announcement-ribbon .content {width:90%; margin:20px 2% 20px 5%; float:left; display:inline-block;}
	.announcement-ribbon .content h1 {font-size:24px;}
	.announcement-ribbon .content p {font-size:14px;}
	
	#hp3 .container .content {text-align:center;}
	#hp4 .container .two-column .content {text-align:center;}
	
	.footer .container {padding:10px 0;}
	.footer .container .holder .designer {width:auto; padding:10px 20px; text-align:center; float:none; display:block;}
	.footer .container .holder .copyright {width:auto; padding:10px 20px; text-align:center; float:none; display:block;}
}

@media(max-width:700px) {
	.announcement-bar {font-size:13px; line-height:18px;}
	.announcement-bar .section {display:block;}
}

@media(max-width:560px) {
	.homepage-banner .container {width:auto; padding:28% 20px 28% 20px;}
	.homepage-banner .container h1 {font-size:36px; line-height:initial;}
	
	.pre-footer .container .holder {display:block;}
	.pre-footer .container .holder .social {width:100%; padding:0 0 40px 0; text-align:center; float:none; clear:both;}
	.pre-footer .container .holder .social .inner {float:none;}
	.pre-footer .container .holder .hipaa {width:100%; padding:0; text-align:center; float:none; clear:both;}
}

@media(max-width:400px) {
	.header .container {padding:0 15px;}
	
	.homepage-banner .container {width:auto; padding:32% 20px 34% 20px;}
	.homepage-banner .container h1 {font-size:36px; line-height:initial;}
	.homepage-banner .container h2 {font-size:18px; line-height:24px;}
}

@media(max-width:340px) {
	.header .container .mobile-navigation {padding-top:12px;}
}