/* --------------

Child Development Centre
Responsive CSS by Design Station
29 May 2018
-------------- */

/* 1) Desktop ----- */
@media (min-width:992px) {
/* Global */
.container { width: 1000px; }
.background:after { content: ""; position: absolute; top: -100px; left: -200px; z-index: -1; display: block; background-image: url('../images/backgrounds/shape-blue+purple.svg'); background-repeat: no-repeat; width: 115%; height: 115%; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); opacity: 0.55; }
/* Home */
#main-content .col-xlarge-3 { width: calc(25% - 25px); margin: 0 25px 0 0; }
#main-content .col-xlarge-3:nth-child(4) { margin: 0 0 0 0; }

.news .col-xlarge-4 { padding: 0 25px; }
.news .col-xlarge-4:nth-child(2) { border-left: 1px solid #A1CBFF; border-right: 1px solid #A1CBFF; }

#main-content.boxed, #sub-content.boxed { position: relative; width: 1000px; margin: 0 auto; background: #FFFFFF; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

/* Sub */

.sub-right .col-xlarge-4.thumbnail { width: calc(33.333333% - 20px); }
.sub-right .thumbnail:nth-child(2) { margin: 0 30px; }
/* Footer */

.footer-contact { width: 100%; margin: 0 auto; padding: 25px; }
}

/* 2) Small Desktop and Landscape Tablet ----- */

@media (min-width:992px) and (max-width:1099px) {
/* Global */
.container { width: 970px; }
/* Home */
#main-content.boxed, #sub-content.boxed { width: 970px; margin: 0 auto; }
/* Sub */



}

/* 3) Mobile & Tablet ----- */
@media (max-width: 991px) {
	

}





/* 4) Tablet ----- */
@media (min-width:600px) and (max-width: 991px) {
/* Global */
.background:after { content: ""; position: absolute; top: 0; left: -100px; z-index: -1; display: block; background-image: url('../images/backgrounds/shape-blue+purple.svg'); background-repeat: no-repeat; width: 125%; height: 125%; -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); opacity: 0.55; }

#site-logo { width: 200px; height: 92px; background-size: 160px 48px; }
.mini-nav { height: 92px; z-index: 2; }

#main-content.boxed, #sub-content.boxed { position: relative; width: calc(100% - 50px); margin: 0 25px; background: #FFFFFF; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
/* Home */





#featured-slideshow-outer { height: 500px; }
.featured-slide { height: 500px; }

.home-buttons { margin: -40px 0 0 0; padding: 0 25px; }
#main-content .col-medium-3 { width: 25%; margin: 0; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; }
#main-content .col-medium-3:nth-child(1) { border-left: none; }
#main-content .col-medium-3:nth-child(4) { border-right: none; }

.home-buttons h2 { font-size: 15pt; }
.news .col-medium-4 { padding: 0 25px; }
.news .col-medium-4:nth-child(2) { border-left: 1px solid #A1CBFF; border-right: 1px solid #A1CBFF; }


/* Sub */
.sub-right .col-medium-6.thumbnail { width: calc(50% - 12.5px); }
.sub-right .thumbnail:nth-child(1) { margin: 0 25px 25px 0; }
.sub-right .thumbnail:nth-child(2) { margin: 0 0 25px 0; }
/* Footer */

.footer-contact { width: 100%; margin: 0 auto; padding: 25px; text-align: center; }

}	


/* 5) Phone ----- */
@media (max-width:599px) {

/* Global */


#site-logo { width: 200px; height: 92px; background-size: 160px 48px; }
.mini-nav { height: 92px; z-index: 2; }

#main-content.boxed, #sub-content.boxed { width: 100%; padding: 0; }

.container { width: 100%; padding: 0; }

#site-header { position: relative; height: 117px; }


nav { position: relative; width: calc(100% - 40pt); height: auto; border: 1px solid #DBE8F7; text-align: center; z-index: 1; padding: 20pt; margin: 20pt; border-radius: 10px; }
nav ul { list-style: none; display: block; }
nav ul li, nav li:first-child, nav li:last-child { font-size: 14pt; width: auto; margin: 5pt; padding: 5px; }


/* Home */

.mini-nav ul { list-style: none; display: list-item; vertical-align: middle; position: relative; top: 50%; transform: translateY(-50%); }
.mini-nav ul li { display: list-item; font-size: 14pt; line-height: 14pt; font-weight: 500; margin: 0 25px 10px 0; }


#featured-slideshow-outer { height: 350px; }
.featured-slide { height: 350px; }
.featured-slide-content { width:75%; }

#main-content .col-small-6:nth-child(1) { border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;  }
#main-content .col-small-6:nth-child(2) { border-left: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;  }
#main-content .col-small-6:nth-child(3) { border-right: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;  }
#main-content .col-small-6:nth-child(4) { border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;  }



.home-buttons { margin: 0; padding: 0; }
.home-buttons h2 { font-size: 15pt; }


section.news { padding-left: 25px; padding-right: 25px; }

.news .col-small-12 { padding-left: 25px; padding-right: 25px; }
.news .col-small-12:nth-child(1) { padding-bottom: 25px ; }
.news .col-small-12:nth-child(2) { border-top: 1px solid #A1CBFF; border-bottom: 1px solid #A1CBFF; padding: 25px; }
.news .col-small-12:nth-child(3) { padding-top: 25px ; }

section.about { padding: 25px; }
.about-left { padding: 0 25px 0 0; }

#main-content .about h1, #main-content .about h2, #main-content .about p { font-size: 14pt; }
/* Footer */

footer .footer-copyright { width: 100%; padding: 20pt 20pt 0; margin: 0 0 20pt 0; }

.about h2 { font-size: 16pt; }

.footer-contact { width: 100%; margin: 0 auto; padding: 20pt; text-align: center; }
.footer-contact .col-small-12 { margin: 0; padding: 0 0 20pt 0; }
#main-content .footer-contact .col-small-6 { margin: 20pt 0 0 0; padding: 0 5pt; border: none; }

.footer-contact h2 { font-family: 'Architects Daughter', cursive; font-size: 16pt; line-height: 1; margin: 0 0 6pt 0; color: #FFFFFF; text-align: center; }
.footer-contact h3 { font-weight: 600; font-size: 10pt; line-height: 1.3; text-transform: uppercase; margin: 10pt 0 0 0; color: #FFFFFF; text-align: center; }
.footer-contact p, .footer-contact address { font-size: 11pt; line-height: 1.3; font-style: normal; margin: 0; color: #FFFFFF; text-align: center; }



.footer-copyright ul li { font-size: 7pt; margin: 2pt; }


/* Sub */

.sub-header { height: 300px; }

section.sub .row { display: flex; flex-direction: column; }

.sub-left { order: 2; padding: 25pt 20pt;  }
.sub-right { order: 1; padding: 0 20pt 40px; }

.sub-left h2 { font-size: 16pt; margin: 24pt 0 11pt 0; }
.sub-left p { font-size: 11pt; margin: 0 0 11pt 0; }
.sub-left ul li { font-size: 11pt; line-height: 1.25; margin: 0 0 6pt 0;  }

.sub-right .col-small-12.thumbnail { width: 100%; margin: 0 0 25px 0; }





}





/* 6) Small Devices ----- */
@media (max-width:310px) {


}