/* General */
* { margin: 0; padding: 0; outline: 0; }

body, html { height: 100%; font-family: 'Josefin Sans', sans-serif !important;}

body {
    font-size: 14px;
    line-height: 18px;
    font-family: 'SegoeUI', arial, sans-serif;
    color: #EEE;
    background: #FFF;
}

ul, ol { margin: 0; }

a { text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; }
a img { border: 0; }

input, textarea, select { font-size: 14px; color:#393939;  }
textarea { overflow: auto; }
p { margin-bottom: 20px;	}

.text-center { text-align: center;}


/* Big Slide JS */
.panel {
	position: fixed;
	left: -15.625em; /*left or right and the width of your navigation panel*/
	width: 15.625em; /*should match the above value*/
}

.wrap {
	position: relative;
}

.big-slide-panel{
	background: #2C3E50;
	z-index: 9999;
}

.big-slide-panel ul{
	border-top: 2px solid #34495D;
}			

.big-slide-panel li{
	font-size: 16px;
	list-style: none;
}

.big-slide-panel a:link, .big-slide-panel a:visited {
	color: #fff;
}

.big-slide-panel a {
	display: block;
	border-bottom: 2px solid #34495D;
	padding: 1em;
}

.mobile-nav-icon img{
	width: 20%;
	margin: 0% 30%;
	text-align: center;
	border-radius: 50%;
	border: 1px solid #FFF;
	padding: 5% 10%;
}


/* GENERIC STYLES */
.fancy-quote{
	font-size: 45px;
	font-family: 'Josefin Sans', sans-serif ;
	position: relative;
	top: 10px;
	left: -2px;
}				

.map-overlay {
   background:transparent; 
   position:relative; 
   width:100%;
   height:600px; /* your iframe height */
   top:600px;  /* your iframe height */
   margin-top:-600px;  /* your iframe height */
}

.mobile-only{
	display: none;
}

.center-text{
    text-align: center;
}

/* CUSTOM STYLES */
#nav{
	position: fixed;
	background: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	right: 0;
	height: 50px;
	z-index: 10;
	overflow: hidden;
}

#nav a{
	color: #FFF;
	padding: 15px 0px 18px;
	transition: ease .2s all;
	-webkit-transition: ease .2s all;
}

#nav a:hover{
	color: #CCC;
}

#left-nav{
	text-align: left;	
}

#left-nav li:not(:first-child){
	margin-top: 5px;
}


#right-nav{
	float: right;
	font-size: 18px;
}

#right-nav a{
	font-size: 18px;
}

#nav-logo{
	text-align: left;	    	
	padding: 2px 30px;			
	color: #FFF;
	font-size: 28px;
	font-family: 'Lobster Two', cursive; 
    margin: 0;
    line-height: 18px;
}	

#nav-logo span{
	font-variant: small-caps;
}    	    

#nav ul li {
	float: left;
	list-style: none;
	color: #FFF;
	margin-right: 25px;
	font-size: 16px;
	font-weight: 100;
	padding: 15px 0 5px;
	cursor: pointer;		
	transition: ease .2s all;
	-webkit-transition: ease .2s all;
}

#nav ul#right-nav li{
	padding: 20px 0 5px;
}

#nav ul li:hover{
	color: #CCC;
}

.mobile-menu {
	position: absolute;
	top: 0;
	right: 0;	
	z-index: 10;
}

#left-nav .header-address{
	margin-right: 350px;
}

.header-address a{	
	font-size: 14px !important;
}

/* SECTIONS */
.section{
	color: #222;
	padding: 40px;
	font-size: 20px;
	line-height: 30px;
	border-bottom: 10px solid #ADD8E6;		
	position: relative;
	z-index: 5;
	background: #fff;
}	

.section:first-child{
	margin-top: 50px;
}

.section:last-child{
	border: none;	
}			

.section h2{
	text-align: center;
	margin-bottom: 25px;
	font-size: 34px;
	line-height: 40px;
}

.section.footer h2 {
    text-align: left;
    margin-bottom: 50px;
}

.section a{
	color: #0aaade;
}

.section a.black{
	color: #222;
}

.section:nth-child(even){
	background: #EEE;
	color: #222;		
}

.sub-section{
	margin-bottom: 20px;
}

.sub-section h3{
	text-align: left;
}

.section h3 a:not(.btn){
	color: #222;
	border-bottom: 1px dashed #CCC;
	transition: ease .2s all;
	-webkit-transition: ease .2s all;
}



.section h3 a:hover{
	border-bottom: 1px solid #CCC;
}

.sub-section p{
	color: #666;
}

.sub-section.bio{	
    min-height: 150px;
    margin: 0 auto 10px;
    clear: both;	
}

.sub-section .headshot{
	float: left;
    height: 150px;
	margin-right: 15px;
    border-radius: 10px;
}

.sub-header{
	font-size: 15px;
}

.row{
	display: block;
	position: relative;
}

.col-xs-2, 
.col-xs-4, 
.col-xs-8, 
.col-xs-12, 
.col-sm-2, 
.col-sm-4, 
.col-sm-8, 
.col-sm-12, 
.col-md-2, 
.col-md-4, 
.col-md-8, 
.col-md-12, 
.col-lg-2, 
.col-lg-4, 
.col-lg-8, 
.col-lg-12 {
	float: left;
}

.col-lg-2{
	width: 16.6666%;	
}

.col-lg-3{
	width: 25%;	
}

.col-md-4, .col-lg-4{
	width: 33.3333%;	
}

.col-lg-5{
	width: 41.6666%;	
}

.col-md-8{
	width: 66.6666%;		
}


/* BUTTONS */
.btn{		
	border-radius: 4px;
	padding: 8px 15px 6px;			
	display: block;
	transition: ease .2s all;
	-webkit-transition: ease .2s all;
	font-size: 16px;
	font-weight: bold;  
	text-align: center;
}

.btn-info, a.btn-info, .section a.btn-info{
	background: #2C3E50;
	color: #FFF;
	width: 20%;
	margin: 5px 38% 15px;
}

.btn-info:hover, a.btn-info:hover, .section a.btn-info:hover{
	background: #18212b;
}

.btn.btn-inline{
	display: inline;
}

.bg-danger {
	padding: 4px 10px 2px;
	color: #FF0000;
}

.make-appt {
	background: #FFFF22;			
	color: #000;
	width: 200px;
	margin: 0px auto 20px;
}

.section a.make-appt{
	color: #000;
	line-height: 18px;
}

.make-appt:hover{
	background: #ecec20;
}

/* Main Background */
.main-bg { 
	position:relative; 
	overflow:hidden; 
	left:0; 
	right:0; 
	z-index: 1; 
	width:100%; 
	height:100%; 
	/* background-color: #ADD8E6; */
	padding: 0;
	background: url(images/Beach-Smile-min.png) no-repeat 50% 50%;
	background-size: cover;
}
.main-bg img { width:100%; min-height:auto;   position:relative;  opacity: 1; -moz-opacity: 0; filter:alpha(opacity=0); }

.main-bg .content-box { 	
	width: 410px;
    z-index: 2;
    position: absolute;
    left: 10%;
	top: 50px;
}

.tooth {
    background: transparent; 
	border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	text-align: center;
	padding-bottom: 37px;
	margin-bottom: 11px;
	padding-top: 70px;
	height: 500px;
	width: 100%;
	background-image: url(images/tooth/tooth.svg);
	background-size: contain;
	background-repeat: no-repeat;
	color: #000;
	opacity: .70;
}

.tooth h2 {
	line-height:28px; 
	letter-spacing:-1px; 
	padding: 35px 40px 0px;
	margin-bottom: 20px;
	font-weight: bold;
	color: #000;
	font-size: 24px;
}

.tooth p{
	line-height: 18px;
	padding-bottom:5px; 
	font-size: 16px;  
}


/* LISTS */
.centered-list{
	width: 60%;
    margin: 0 0 0 40%;
}

.section ul{
	list-style: none;	
	cursor: pointer;
}

.section ul  > li{
	font-size: 28px;
	font-weight: bold;
	line-height: 40px;
	margin-bottom: 25px;
	cursor: poiner;
	transition: ease .3s all;
	-webkit-transition: ease .3s all;
}

.section ul > li > a{
	color: #222;
}

.section ul > li > ul{
	list-style: disc;
	margin-left: 75px;	
}

.section ul > li > ul > li{
	font-size: 26px;
	font-weight: normal;
	line-height: 36px;
	color: #666;
	margin-bottom: 0;
}

.section ul > li > ul > li > a {
	color: #666;
}

.section ul > li > ul > li > ul{
	list-style: circle;	
	margin-left: 40px;
}

.section ul > li > ul > li > ul > li{
	font-size: 18px;
	font-weight: normal;
	line-height: 28px;	
}

.section ul > li > ul > li > ul > li > ul{
	list-style: square;	
	margin-left: 25px;
	margin-left: 25px;
}

.section ul > li > ul > li > ul > li > ul > li{
	font-size: 16px;
	font-weight: 100;	
}

.section ul li a:hover{
	text-decoration: underline;
	color: #222;	
}

.section.background-style-1{
	background: url(images/backgrounds/ales-krivec-edit-4.jpg) 0% 0% / cover no-repeat;
}

.section.background-style-2{
	background: url(images/backgrounds/joshua-earle-edit-5.jpg) 0% 0% / cover no-repeat;
}

.no-article{
	color: #666;
	font-style: italic;
}

.request-info-btn{
	margin: 0;
	padding: 8px 30px 6px;
}

.modal .btn{
	display: inline-block;
}

.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6{
	color: #666;
	text-align: center;
}

.control-label{
	color: #666;
}

.article-contents{
    max-width: 800px;
    margin: auto;
}

/* MEDIA STYLES */
@media only screen and (max-width: 1800px) {
	#left-nav .header-address{
		margin-right: 300px;
	}
}

@media only screen and (max-width: 1700px) {
	#left-nav .header-address{
		margin-right: 200px;
	}
}

@media only screen and (max-width: 1550px) {
	#left-nav .header-address{
		margin-right: 100px;
	}
}

@media only screen and (max-width: 1400px) {
	#left-nav .header-address{
		margin-right: 50px;
	}
}

@media only screen and (max-width: 1300px) {
	#left-nav .header-address{
		margin-right: 20px;
	}
}

@media only screen and (max-width: 1230px) {
    #left-nav .header-address{
    	display: none;
    }
}

@media only screen and (max-width: 1124px) {
	.main-bg .content-box {
		left: 5%;
		width: 350px;
	}
	
	.tooth h2{
		font-size: 18px;
		line-height: 22px;
		padding-top: 22px;
	}
	
	.make-appt {
		width: 148px;
	}
}

@media only screen and (max-width: 950px) {
	.main-bg .content-box{
		width: 325px;
	}

	.tooth p{
		display: none;
	}
}

@media only screen and (max-width: 900px) {
	.col-md-12{
		width: 100%;	
		float: none;
		clear: both;
	}	
}

@media only screen and (max-width: 850px) {
	.main-bg .content-box{
		width: 275px;
	}
	
	.tooth h2{
		padding-top: 5px;
		margin-bottom: 5px;
	}
	
	.make-appt {
		width: 90px;
	}
	
	.hide-lg{
		display: none;			
	}
}

@media only screen and (max-width: 710px) {    		
	.hide-md{
		display: none;			
	}
	
	.btn-info, a.btn-info, .section a.btn-info {
		width: 80%;
		margin: 5px 0% 20px;
	}
	
	.last-section a.make-appt {
		color: #000;
		line-height: 18px;
		width: 80%;
	}
	
	.centered-list{
		width: 70%;
		margin: 0 0 0 30%;
	}
}

@media only screen and (max-width: 585px) {
	#nav ul#right-nav li{
		display: none;
	}

	#nav ul#right-nav li.mobile-only{
		display: block;
	}
	
	.hide-sm{
		display: none;
	}
	
	.col-sm-12{
		width: 100%;	
		float: none;
		clear: both;		
	}
	
	.section {
		color: #222;
		padding: 30px 20px;
	}
	
	.centered-list{
		width: 100%;
		margin: 0;
	}
}

@media only screen and (max-width: 500px) {
    
	body, html { height: 800px; }
	.main-bg img { min-width:100%; width: auto; left: -450px !important;}
}

@media only screen and (max-width: 450px) {
    
	.col-xs-12{
		width: 100%;
		float: none;
		clear: both;
	}

	#nav-logo {
		font-size: 23px;
	}
}

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

	#nav-logo {
		font-size: 18px;
	}
}