@charset "UTF-8";
/* CSS Document - BANDY DENTAL */
/* NOTES: container is full width, col-sm-12 gives you 20px padding on either side*/

/* here is where you put the customizations - load this last */

body {background-color:#FFF;font-family: 'Open Sans', sans-serif; font-size:16px;}

/* NOTE: width of the container is set by bootstrap according to device - use container like wrapper - put each major section into a container
/* container is full width, the columns (ie. col-sm-12) gives you 20px left and right padding */

.container {background:transparent;}

/* background that spans the top of entire html page 
#top {width:100%;height:200px;background-color:#F00; border-bottom:5px solid #FFF;}
*/
#header {width:100%; height:auto; }
.logo {margin-top:0;}
.tagline {padding-top:30px;}
.phone {font-weight:bold; font-size:1.35em;} 
/* turguaise like logo background-color:#35a5cd; */

#navigation {background-color:#428ac9;  width:100%;margin-top:15px;}
.navbar-inverse {background-color:transparent;border:none;}
.navbar-nav ul {padding:0;}
.navbar-nav li {text-transform:uppercase;padding-bottom:0;}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {background-color:#6FAADC;}
.navbar-inverse .navbar-nav>li>a {color:#efefef;padding-bottom:0;padding-right:20px;}
.navbar {margin-bottom:0;} !important

/* center navbar */
.navbar-nav {
    display: inline-block; !important
    float: none;
}
navbar.navbar-collapse {
    text-align: center;
}
/* below not used*/
navbar.navbar-nav.navbar-center {
            position: absolute;
            left: 50%;
            transform: translatex(-50%);
        }

.jumbotron {position:relative; z-index:999; background:transparent;text-align:center;color:#FFF; font-size:1.5em;padding-top:15.33%;}
.jumbotron-title {font-size:44px;}

.parallax {
	/* The image used */
	background-image: url(../images/hero-comp2.jpg);

    /* Set a specific height */
    height: 425px;
	/* Create the parallax scrolling effect */
    background-attachment: fixed;
	background-position:center;
	background-repeat: no-repeat;
	background-size: contain;
	border-bottom:2px solid #FFF;
}
/* messes up clickable features on home page smartphone
#section1 {position:relative; cursor:pointer; width:100%;padding:20px 0; } */
#section .container {padding-top:20px; padding-bottom:20px;}

#title-block {padding:15px 0 20px 0;background:linear-gradient(#003366,#145c96);text-align:center;color:#FFF;}

.team {color:#6FAADC;}
.team span {font-size:90%;color:#999; font-style:italic;}

#cta {width:100%; background-color:#549ecd;background-color:#519cdc;padding-bottom:15px;border-top:2px solid #369;color:#060606;}
#cta a {color:#000;}

#section2 {width:100%; height:auto; background-color:#f1f1f1;padding-top:20px;}

/* HOME PAGE TESTIMONIALS SECTION */
#testimonials {width:100%; height:auto;padding:20px 0;background-color:#069;}
#testimonials h1 {font-family: 'Qwigley', cursive;font-size:5em; text-align:center;}
.carousel-caption {top:8%; padding-bottom:0;}
.carousel-control.left {background:none;}
.carousel-control.right {background:none;}
/* ---------- */

#office-banner {margin-bottom:80px;}

#bigfoot {width:100%; height:auto; padding:20px 0;color:#040404;border-top:3px solid #6FAADC;margin-top:20px;}
#footer {width:100%; height:auto; background-color:#1bbecd;border-top:2px solid #145c98;}
#footer p {color:#f1f1f1; font-size:.9em; text-align:center;padding:15px 0 15px 0;}

/* TEXT STYLING ----- */
/* set headings relative to body text size */
h1 {font-size:2em;}
h2 {font-size:1.7em;}
h3 {font-size:1.4em;}
.title {font-family: 'Qwigley', cursive;font-size:3em;}

/* display text over image */
.text-overlay {
color:white;
margin-top:-12rem;
position:relative;
text-align:center;
}


/* photo frames */
.frame {border:3px solid #e8e8e8;}
.frame2 {padding:10px;background:#fff;box-shadow: 3px 5px 8px rgba(0,0,0,0.70);-moz-box-shadow: 3px 5px 8px rgba(0,0,0,0.70);-webkit-box-shadow: 3px 5px 8px rgba(0,0,0,0.70)}
.frame3 {margin:15px;padding:10px;background:#fff;box-shadow: 3px 5px 8px rgba(164,166,173,0.70);-moz-box-shadow: 3px 5px 8px rgba(164,166,173,0.70);-webkit-box-shadow: 3px 5px 8px rgba(164,166,173,0.70)}
/* frame 3 is lighter */

/* shadow border bottom - box-shadow: [horizontal offset] [vertical offset] [blur radius] [color];*/
.shadow-bottom {
  -webkit-box-shadow: 0 10px 5px #888888;
  -moz-box-shadow: 0 10px 5px #888888;
  box-shadow: 0 10px 5px #888888;
}

/* IPAD  ----- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
{
/* styles here */
.parallax {
	/* The image used 
	background: url(../images/hero-comp2-1024.jpg) no-repeat;*/

    /* Set a specific height
    height: 200px; */
	/* Create the parallax scrolling effect */
    background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom:2px solid #FFF;
}
.jumbotron p {color:#FFF; font-size:1.5em;}
.jumbotron-title {font-size:48px;color:#FFF;padding-top:50px;}

.carousel-caption {top:0; bottom:0; padding-bottom:0;}
.carousel-indicators {display:none;}

}

/* SMARTPHONE */
@media only screen 
and (max-device-width : 440px) {
/* styles here */
.mobile-hide {display:none;}
#section1 {position:relative; z-index:-999; width:100%; }
.parallax {	display:none;	}
.jumbotron {/*display:none;*/}

.carousel {min-height:500px;}
.carousel-caption {top:0; padding-bottom:0;min-height:400px;}
blockquote {padding:0;}

#cta h2 {font-size:1.2em;text-align:center;}
#office-banner {margin-bottom:0;}
.navbar-inverse .navbar-nav>.open>.dropdown-menu>li>a {color:#f1f1f1;}

/* text overlay for office banner at footer */
.text-overlay {
color:white;
font-size:14px;
margin-top:-35px;
position:relative;
text-align:center;
height:auto;
}
/*
 
.jumbotron {position:relative; z-index:999; text-align:center;}
.jumbotron h1 {font-size:20px;color:#FFF;padding-top:10px;}
.jumbotron p {color:#FFF; font-size:1em;}
*/
}