/*
 Theme Name:   Harrow Dental Blog
 Theme URI:    http://example.com/twentysixteen/
 Description:  Harrow Dental Blog
 Author:       Design4dentists
 Author URI:   http://example.com
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  harrow-dental-blog
*/


body, html { font-family: "museo-sans",sans-serif; font-weight: 100; }


.tel { font-size: 1.875em; vertical-align: middle; }
.contactinfo { font-size: 1.1em; text-transform: uppercase; }
.contactinfo .fa-comments-o { font-size: 1.3em; }
.contactinfo .fa { padding: 0 0 0 5px; }

.banner .title { font-size: 2.625em; color: #FFF; }
.banner .subtitle { font-size: 1.375em; color: #b2b2b2; }
.banner .fa { color: #FFF; margin-top: 15px; }

.widget { border-top: 4px solid #392346; }
.widget h2 { color: #392346; }
.widget a { font-size: 1.2em; }

.divcontent { position: relative; max-width: 1100px; margin: auto; padding: 50px 20px; }
.divcontentnopad { position: relative; max-width: 1100px; margin: auto; padding: 0 20px; }

.header { position: relative; width: 100%; min-height: 160px; padding: 15px 0 0; margin: 0; 
background: url(https://www.harrowdentalpractice.co.uk/images/header-top-fade.png) repeat-x top; z-index: 9999; }
.header .divlogo { float: left; width: 580px; height: auto; } 
.header .divlogo IMG { width: 100%; height: auto; }
.header .social IMG { width: 35px; height: 35px; }
.header .contact { float: right; margin-top: 20px; }


.banner { position: relative; display: block; width: 100%; height: 550px; margin-top: -80px; margin-bottom: -100px; background: url(https://www.harrowdentalpractice.co.uk/images/banners/special-offers-banner.jpg) no-repeat center; background-size: cover; z-index: 999; } 
.banner .divtop { position: absolute; top: 0; width: 100%; height: 75px; background: url(https://www.harrowdentalpractice.co.uk/images/top-curve.png) no-repeat center bottom; background-size: 100% 100%; z-index: 99; }
.banner .divbot { position: absolute; bottom: 0; width: 100%; height: 75px; background: url(https://www.harrowdentalpractice.co.uk/images/bot-curve.png) no-repeat center top; background-size: 100% 100%; z-index: 99; }

.divbannercontent { display: inline-block; width: 400px; margin-top: 120px; }

.site-inner {
	margin: 0 auto;
	max-width: 1200px;
	position: relative;
}

/**
 * 6.2 - Menus
 */

.main-navigation { float: left; width: 100%; font-family: "museo-sans",sans-serif; font-weight: 100; text-transform: uppercase; text-align: center; }
.main-navigation ul { display: inline-block; list-style: none; padding: 0; margin: auto; text-align: center; }

.main-navigation li {
	border-top: none;
	display: inline-block; 
	padding: 0 5px;	
	position: none;
}

.main-navigation a {
	color: #1a1a1a;
	line-height: 1em;
	outline-offset: -1px;
	padding: 0;
	display: inline-block; 
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: #007acc;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
	font-weight: 100;
}

.main-navigation ul ul {
	display: none;
	margin-left: 0.875em;
}

.no-js .main-navigation ul ul {
	display: block;
}

.main-navigation ul .toggled-on {
	display: block;
}

.main-navigation .primary-menu {
	border-bottom: none;
}



/**
 * 11.6 - Footer
 */

.site-footer {
	padding: 0 7.6923% 1.75em;
	background: #392346;
	text-align: center;
}

.site-info {
	color: #FFF;
	font-size: 14px;
	font-size: 0.8125rem;
	line-height: 1.6153846154;
	text-align: center;
}

.site-info a {
	color: #FFF;
}

.site-info a:hover,
.site-info a:focus {
	color: #CCC;
}

.site-footer .site-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
}

.site-footer .site-title:after {
	content: "\002f";
	display: inline-block;
	font-family: Montserrat, sans-serif;
	opacity: 0.7;
	padding: 0 0.307692308em 0 0.538461538em;
	color: #FFF;
}


@media only screen 
and (min-width : 768px) 
and (max-width : 1020px) {

body { font-size: 15px; }

.tel { font-size: 1.6em; }

/* ------------------------------------------------------------------------------------ */
/* STRUCTURE */
/* ------------------------------------------------------------------------------------ */

.header { min-height: 145px; }
.header .divlogo { width: 400px; height: auto; } 
.header .contact { float: right; margin-top: 10px; }
.header .social IMG { width: 28px; height: 28px; }
	
.banner .divtop { height: 60px; }
.banner .divbot { height: 60px; }
	
}


@media only screen 
and (min-width : 320px) 
and (max-width : 420px) {

.header { text-align: center; }	
.header .divlogo IMG { width: 290px; height: auto; } 	
.banner { height: 300px; margin-top: 0; margin-bottom: -50px; } 
.divbannercontent { width: 70%; margin-top: 20px; }
.header .social IMG { display: none; }
	
}

@media only screen 
and (min-width : 421px) 
and (max-width : 767px) {
	
.header { text-align: center; }		
.header .divlogo IMG { width: 350px; height: auto; } 	
.banner { height: 400px; margin-top: 10px; margin-bottom: -50px; } 
.divbannercontent { width: 50%; margin-top: 10px; }
.header .social IMG { width: 30px; height: 30px; }
	
}


@media only screen 
and (min-width : 320px) 
and (max-width : 767px) {
	
body { font-size: 15px; }
	
/* ------------------------------------------------------------------------------------ */
/* TYPE */
/* ------------------------------------------------------------------------------------ */

.tel { font-size: 1.5em;  }
.contactinfo { font-size: 1em; }
.contactinfo .fa-comments-o { font-size: 1.1em; }

.banner .title { font-size: 1.65em; }
.banner .subtitle { font-size: 1.15em; }

/* ------------------------------------------------------------------------------------ */
/* STRUCTURE */
/* ------------------------------------------------------------------------------------ */

.divcontent { width: 90%; margin: auto; padding: 15% 5%; }
.divcontentnopad { width: 90%; margin: auto; padding: 0 5%; }

.header .divlogo { float: left; width: 100%; height: auto; text-align: center } 
.header .contact { float: left; margin-top: 20px; width: 100%; }

.banner .divtop { height: 40px; }
.banner .divbot { height: 40px; }

}