/* 
	media queries for "Clean and Blue"
	----------------------------------
	1300px max-width design with a 
	slide-in mobile menu
	
 */


/* make footer stacked */

@media all and (min-width: 280px) {

	.logo {
		width: 50%;
	}

	.hero-box {
		margin-left: auto;
		margin-right: auto;
		width: 90%;
	}
	
	.footer {
 		width: 85%;
 		font-size: 0.9rem;
 		text-align: center;
 	}

 	.footer .col-1 {
 		height: 30px;
 	}

 	.footer .col-2, .footer .col-6 {
 		width: 100%;
 	}

}


/* buckets become "pills", footer's divs becomes left floated */

@media all and (min-width: 515px) {

	.logo {
		width: 30%;
	}

	.hero {
		height: 500px;
	}

	.buckets .col-4 {
		padding: 0 30px 30px 30px;
		margin-bottom: 30px;
	}

	.masked {
		height: 188px;
		background-color: #2980B9;
		border-radius: 20px;
	}

	.masked:hover {
		background-color: #E74C3C;
		cursor: pointer;
	}

	.masked img {
		float: left;
		padding-right: 20px;
	}

	.mask h3 {
		padding-top: 15px;
		color: #0E162E !important;
		text-shadow: none;
	}

	.mask p, .mask h3 {
		margin-right: 20px;
	}

	.mask p {
		display: block;
		max-width: none;
	}

	.office-hours h3 {
		float: left;
		width: 50%;
		display: inline-block;
		height: 120px;
		font-size: 2rem;
		line-height: 2.2rem;
		color: #E74C3C !important;
		margin-top: 40px;
	}

	.footer {
		text-align: left;
		width: 90%;
	}

	.footer .col-1 {
		width: 8.333333334%;
		height: 0;
	}

	.footer .col-2 {
		width: 16.666666667%;
	}

	.footer .col-6 {
		width: 50%;
	}

}


/* inflate top to 150px height, show title/subtitle */

@media all and (min-width: 600px) {

	.top-wrapper {
		height: 150px;
	}

	.top {
		padding-top: 25px;
	}

	.hero {
		margin-top: 190px;
	}

	.hamburger {
		height: 149px;
		width: 150px;
	}

	.hamburger i {
		margin-top: 60px;
	}

	.logo {
		width: 70%;
	}

	.title, .subtitle {
		display: block;
	}

	.title {
		font-size: 1.5rem;
	}

	.subtitle {
		font-size: 1.15rem;
	}

	.mask h3 {
		padding-top: 30px;
	}

	.office-hours {
		margin-left: 10%;
		margin-right: 10%;
	}

}


/* show bg image in menu drawer */

@media all and (min-width: 800px) {

	body {
		background-position: -830px 150px;
	}

	.logo {
		width: 60%;
	}

	.hero {
		height: 900px;
	}

	.hero-box {
		max-width: 500px;
		margin-left: 5%;
	}

	.left {
		padding-left: 20%;
		padding-right: 20%;
	}

	.footer {
		width: 90%;
	}

}


/* 	enable masks on buckets and float them right */

@media all and (min-width: 925px) {

	body {
		background-position: -750px 150px;
	}

	.bucket-wrapper {
		padding-top: 200px;
	}

	.buckets {
		padding-bottom: 0;
	}

	.buckets .col-4 {
		position: relative;
		display: inline-block;
		width: 33.333333334%;
		padding: 0;
		height: 215px;
	}

	.buckets h2 {
		color: #8A0617;
	}

	/* bucket fade-in in sequence animation */

	@keyframes fdsseq { 100% { opacity: 1; } }
	.fds img { animation: fdsseq .5s forwards; }
	.bucket-family img { animation-delay: .1s; }
	.bucket-cosmetic img { animation-delay: .25s; }
	.bucket-orthodontics img { animation-delay: .45s; }

	.buckets img {
		opacity: 0;
	}
	
	.masked {
		width: 266px;
		height: 188px;
		margin: 0 auto;
		background-color: transparent;
	}

	.mask {
		overflow: hidden;
		width: 296px;
		height: 209px !important;
		z-index: 100;
		position: relative;
		top: -202px;
		left: -15px;
		border-radius: 20px;
		padding: 10px;
		color: #FFF;
		text-shadow: 0.7px 0.7px #0E162E;
	}

	.mask h3 {
		padding-top: 0;
		font-size: 1.5rem;
		color: #F1EDEC !important;
		text-shadow: 0.7px 0.7px #0E162E;
	}

	.mask p {
		font-size: 1.2rem;
		margin-left: 0;
	}

	/*	mask animation */
	.masked img {
	   -webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	   -o-transition: all 0.2s linear;
	   -ms-transition: all 0.2s linear;
	   transition: all 0.2s linear;
	   position: relative;
	   float: none;
	   padding-right: 0;
	}

	.masked .mask {
	   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	   filter: alpha(opacity=0);
	   opacity: 0;
	   background-color: rgba(231,76,60, 0.85);
	   -webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	   -o-transition: all 0.4s ease-in-out;
	   -ms-transition: all 0.4s ease-in-out;
	   transition: all 0.4s ease-in-out;
	}
	.masked h3 {
	   -webkit-transform: translateY(-100px);
	   -moz-transform: translateY(-100px);
	   -o-transform: translateY(-100px);
	   -ms-transform: translateY(-100px);
	   transform: translateY(-100px);
	   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	   filter: alpha(opacity=0);
	   opacity: 0;
	   -webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	   -o-transition: all 0.2s ease-in-out;
	   -ms-transition: all 0.2s ease-in-out;
	   transition: all 0.2s ease-in-out;
	}
	.masked p {
	   -webkit-transform: translateY(100px);
	   -moz-transform: translateY(100px);
	   -o-transform: translateY(100px);
	   -ms-transform: translateY(100px);
	   transform: translateY(100px);
	   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	   filter: alpha(opacity=0);
	   opacity: 0;
	   -webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	   -o-transition: all 0.2s linear;
	   -ms-transition: all 0.2s linear;
	   transition: all 0.2s linear;
	}
	.masked:hover img {
	   -webkit-transform: scale(1.1,1.1);
	   -moz-transform: scale(1.1,1.1);
	   -o-transform: scale(1.1,1.1);
	   -ms-transform: scale(1.1,1.1);
	   transform: scale(1.1,1.1);
	}

	.masked:hover .mask {
	   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	   filter: alpha(opacity=100);
	   opacity: 1;
	}
	.masked:hover h3,
	.masked:hover p {
	   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	   filter: alpha(opacity=100);
	   opacity: 1;
	   -webkit-transform: translateY(0px);
	   -moz-transform: translateY(0px);
	   -o-transform: translateY(0px);
	   -ms-transform: translateY(0px);
	   transform: translateY(0px);
	}
	.masked:hover p {
	   -webkit-transition-delay: 0.1s;
	   -moz-transition-delay: 0.1s;
	   -o-transition-delay: 0.1s;
	   -ms-transition-delay: 0.1s;
	   transition-delay: 0.1s;
	}

}


/* sidr menu gets a bg image */

@media all and (min-width: 1000px) {

	#sidr {
		background: #FFF url('../images/logo.png') bottom center no-repeat;
    	background-position: 50% 95%;
	}

	.footer input[type=submit] {
	    float: right;
	    padding: 5px 15px;
	    width: 25%;
	    margin-right: 20px;
	}

}


/* content becomes three column left floated */

@media all and (min-width: 1066px) {

	body {
		background-position: -600px 150px;
	}

	.logo {
		width: 45%;
	}

	.hero-box {
		margin-left: 15%;
		max-width: 600px;
	}

	.content {
		width: 90%;
	}

	.content .col-1 {
		width: 8.333333334%;
	}

	.content .col-2 {
		width: 16.666666667%;
	}

	.content .col-6 {
		width: 50%;
	}

	.content-img {
		display: block;
	}

	.content .col-2 h3 {
		padding-top: 40px;
		color: #2980B9;
	}

	.left {
		margin-top: 0;
		margin-bottom: 0;
		padding: 0;
		background-color: transparent;
	}

	.quote-box {
		position: relative;
		padding: 15px;
		background: #2C3E50;
		border: #2C3E50 solid 2px;
		border-radius: 15px;
		font-size: 1.1rem;
		line-height: 1.5rem;
		color: #FFF;
	}

	.quote-box:after {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 18px 15px 0;
		border-color: #2C3E50 transparent;
		display: block;
		width: 0;
		margin-left: 0px;
		bottom: -18px;
		left: 21%;
	}

	.quote-author {
		font-size: 1.25rem;
		font-weight: bold;
		padding-top: 25px;
		padding-left: 15px;
		float: none;
	}

	.quote-author:before {
		content: '';
	}

	.center {
		padding: 0;
	}

	.content-right {
		padding: 0;
		text-align: left;
	}

	.office-hours {
		background-color: transparent;
		margin: 0;
		padding: 0;
		color: #131B22;
	}

	.office-hours h3 {
		display: block;
		float: none;
		margin-top: 20px;
		margin-bottom: 20px;
		width: 100%;
		font-size: 1.2rem;
		padding-top: 30px;
		height: auto;
		color: #2980B9 !important;
	}

}


/* 	menu converts to main-menu from mobile-menu, social-icons disappear */

@media all and (min-width: 1150px) {

	body {
		background-position: -450px 150px;
	}

	.logo {
		width: 35%;
	}

	.title {
		font-size: 1.3rem;
	}

	.subtitle {
		font-size: 1.03rem;
	}

	.hamburger {
		display: none;
	}
	
	.main-menu {
		display: block;
	}

	.main-menu li {
		padding-right: 3%;
	}

	.social-icons {
		display: block;
	}


}


@media all and (min-width: 1200px) {

	body {
		background-position: -400px 150px;
	}

	.title {
		font-size: 1.5rem;
	}

	.subtitle {
		font-size: 1.15rem;
	}

	.main-menu li {
		padding-right: 4%;
	}

	.hero-box {
		margin-left: 20%;
	}

}


@media all and (min-width: 1368px) {

	body {
		background-position: -380px 150px;
	}

	.scale-up:hover {
		-webkit-transform: scale(1.1,1.1);
	   -moz-transform: scale(1.1,1.1);
	   -o-transform: scale(1.1,1.1);
	   -ms-transform: scale(1.1,1.1);
	   transform: scale(1.1,1.1);
	}

	.hero-box {
		margin-left: 255px;
	}

	.content {
		max-width: 1300px;
		padding-right: 40px;
		padding-left: 40px;
	}

	.footer {
		max-width: 1150px;
	}

}


@media all and (min-width: 1500px) {

	body {
		background-position: -300px 150px;
	}

	.main-menu li {
		padding-right: 5%;
	}

	.footer {
		max-width: 1200px;
	}

	.footer input[type=submit] {
	    margin-right: 30px;
	}

}