/*
Theme Name: Circumference Child
Theme URI: http://demo.styledthemes.com/circumference/
Description: For anyone wanting a serious business website, Circumference is the one for you because of what this theme includes. You get responsive design, multiple blog layout options such as a masonry layout, retina ready graphics, several page templates, post formats, gorgeous typography elements, tons of widget positions, a custom child theme, WooCommerce support, Jetpack support, video tutorials, and more!

Template: circumference
Version: 1.0.0
Author: StyledThemes.com
Author URI: http: //www.styledthemes.com/
Tags: custom-colors, white, light, two-columns, three-columns, fluid-layout, responsive-layout, fixed-layout, custom-background, custom-header, custom-menu, featured-images, flexible-header, full-width-template, microformats, post-formats, sticky-post, theme-options, translation-ready, microformats
License: GNU General Public License v3
License URI: license.txt 

Copyright: 2014 Styledthemes.com


This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/



	
/* Add your custom  css below */

.nav-menu li {
	font-size: 1.2em
}

.nav-menu li a {
    display: block;
    line-height: 1;
    padding: 0.8em 0.75em;
    text-decoration: none;
}


/*.nav-menu li a:hover {
	color: #09516a;
}*/

.nav-menu li a:hover {
	color: #fff;
	font-style: italic;
}

#secondary-nav .nav-menu li a:hover {
	color: #f0ebdd;
	font-style: italic;
}


#cir-site-tagline {
	/*font:normal 1em "Segoe UI", sans-serif, "Open Sans";*/
	font:italic 1.5em Calibri,Helvetica,sans-serif;
	margin: 0.063em 0 0;
	color: #378b92;
	padding: 0 0 0 200px;
	width: 1000px;
	text-align: center;
	
}

#cir-banner {
    background-color: #7faab5;
    background-position: center center;
    min-height: 500px;
}

#cir-announcement {
    font-size: 0.95em;
	text-align: center;
}

#cir-site-header {
    padding: 1em 0;
}

#cir-content-wrapper {
    padding: 2em 0;
}

#socialbar .icomoon {
    border-radius: 50%;
    font-size: 1em;
    height: 32px;
    margin-left: 2px;
    padding: 8px 0 0;
    width: 32px;
	border: 1px solid #999;
}

.nav-menu .sub-menu, .nav-menu .children {
    border-bottom: 0.613em solid #dd992a;
    border-top: 0 none;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.3);
    display: none;
    margin: 0;
    padding: 0.8em 0;
    position: absolute;
    text-align: center;
    z-index: 99999;
}

h3 {
    font-size: 1.5em;
    line-height: 1.35;
}

h4 {
    font-size: 1.275em;
    line-height: 1.25;
}

h5 {
    font-size: 1.15em;
    line-height: 1.45;
}


.cir-iconbox-top .cir-iconbox-icon {
    background-color: #09516a;
    border-radius: 50%;
    box-sizing: content-box;
    color: #fff;
    font-size: 36px;
    height: 40px;
    left: 50%;
    line-height: 24px;
    margin: 0 0 0 -30px;
    padding: 10px;
    position: absolute;
    top: -30px;
    width: 40px;
}

.cir-iconbox-top.tan {
    background-color: #c9a266;
    border: medium none;
}

blockquote.brown {
    border-color: #c9a266;
    color: #704a0e;
}

blockquote.aqua {
    border-color: #09516a;
    color: #07789f;
}

blockquote.pull-left {
    margin: 0.638em 2em 0.638em 0;
    width: 36%;
}

blockquote.pull-right {
    margin: 0.638em 0 0.638em 2em;
    width: 36%;
}

.cir-divider-top .cir-toplink {
    background-color: #f0ebdd;
    bottom: -8px;
    font-size: 0.813em;
    padding: 0 0.5em;
    position: absolute;
    right: 0;
}

.cir-divider-dotline, .cir-divider-top {
    border-bottom: 1px solid #999;
    position: relative;
}

blockquote cite {
    color: #667;
    font-size: 0.75em;
    font-weight: 400;
    line-height: 1.5;
}

.panel-default > .panel-heading {
    background-color: #c9c9c9;
    border-color: #c9c9c9;
    color: #000;
}

.panel-aqua > .panel-heading {
    background-color: #07789f;
}

.panel-tan > .panel-heading {
    background-color: #c9a266;
}

.panel-brown > .panel-heading {
    background-color: #704a0e;
}

/* Quote rotator (Strong Testimonials, view #4 in the Page Right Sidebar).
   The plugin's slider only initialises on window.load, which the globally
   enqueued Google Maps API script can delay, so rotation is done in pure CSS
   instead. The view renders all 11 quotes in random order (display mode) and
   the rules below cross-fade them on a 66s loop (11 quotes x 6s: if quotes are
   added, add an :nth-child delay and extend the duration to match). Reproduces
   the old flexi-quote-rotator #quotearea panel: beige, italic, author bottom-right. */
#strong-testimonials-view-widget-2 .strong-content {
	display: grid;
	box-sizing: border-box;
	min-height: 130px;
	margin: 0;
	padding: 20px 30px;
	background: #f0ebdd;
	font-size: 1.15em;
	font-style: italic;
	line-height: 155%;
}

/* Stack every quote in one cell; each takes its turn in the fade loop. */
#strong-testimonials-view-widget-2 .wpmtst-testimonial {
	grid-area: 1 / 1;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	animation: chiro-quote-fade 66s infinite;
}

/* first quote also visible by default, so the panel is never empty if the
   animation does not run (unsupported/environment-disabled CSS animations) */
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(1)  { opacity: 1; visibility: visible; animation-delay: 0s; }
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(2)  { animation-delay: 6s; }
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(3)  { animation-delay: 12s; }
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(4)  { animation-delay: 18s; }
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(5)  { animation-delay: 24s; }
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(6)  { animation-delay: 30s; }
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(7)  { animation-delay: 36s; }
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(8)  { animation-delay: 42s; }
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(9)  { animation-delay: 48s; }
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(10) { animation-delay: 54s; }
#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(11) { animation-delay: 60s; }

@keyframes chiro-quote-fade {
	0%   { opacity: 0; visibility: hidden; }
	1.5% { opacity: 1; visibility: visible; }
	7.5% { opacity: 1; visibility: visible; }
	9%   { opacity: 0; visibility: hidden; }
	100% { opacity: 0; visibility: hidden; }
}

/* Quote first, author beneath it; the plugin's card chrome stays out of the way. */
#strong-testimonials-view-widget-2 .wpmtst-testimonial-inner {
	display: flex;
	flex-direction: column;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
}

#strong-testimonials-view-widget-2 .wpmtst-testimonial-inner > * {
	margin-top: 0;
	margin-bottom: 0;
}

#strong-testimonials-view-widget-2 .wpmtst-testimonial-content {
	order: 1;
}

#strong-testimonials-view-widget-2 .wpmtst-testimonial-field.testimonial-name {
	order: 2;
	margin: 0.6em 0 0;
	color: #667;
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	text-align: right;
}

/* Respect reduced-motion: no rotation, just one (still random) quote. */
@media (prefers-reduced-motion: reduce) {
	#strong-testimonials-view-widget-2 .wpmtst-testimonial {
		animation: none;
	}
	#strong-testimonials-view-widget-2 .wpmtst-testimonial:nth-child(1) {
		opacity: 1;
		visibility: visible;
	}
}

#cir-announcement h1, .cir-iconbox-content h4.fancy {
	font-family: 'Lucida Calligraphy', 'Lucida Handwriting', Georgia, serif;
}

/* Custom mobile styling 
-------------------------------------------------------------- */

@media screen and (max-width: 320px) {

}

@media (min-width: 321px) and (max-width: 480px) {

}

@media screen and (max-width: 480px) {

}

@media (min-width: 481px) and (max-width: 768px) {

}

@media screen and (max-width: 768px) {

}