/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Home styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Home styles
--------------------------------------------------------------*/

/*he Jumbotron at the Beggining of the Joziverse*/

.jumbotron {
	background-image: url("../imgs/home-search.jpg");
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
	background-position: center bottom;
	background-size:cover;
	-o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
	color:white;
	border-radius:0;
	margin-bottom:0;
	position:relative;
}

.jumbotron h1 {
	color:rgba(255,255,255,1);
	font-size:3rem;
	font-weight:600;
	line-height:1;
	text-shadow: 0 16px 40px rgba(0,0,0,.14);
	margin-bottom:12px;
	letter-spacing:.1rem;
}

.vertical-center {
	min-height: 420px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding:30px 0 0;

}
.jumbotron h2 {
	color:rgba(255,255,255,1);
	font-size:1.4rem;
	font-weight:400;
	margin-top:3px;
	margin-bottom:18px;
}

.jumbotron .box {
	padding-bottom:0;
	line-height:1.3;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: grey;
}
::-moz-placeholder { /* Firefox 19+ */
  color: grey;
}
:-ms-input-placeholder { /* IE 10+ */
  color: grey;
}
:-moz-placeholder { /* Firefox 18- */
  color: grey;
}
.home .btn.btn-headersearch {
    height: 55px;
}
.home .headersearch {
    justify-content: start;
}
.home .form-inline .form-control.search-field-first {
	width: 50%;
}
.home .form-inline .form-control.search-field-second {
	width: 30%;
}
.ads {
	padding: 24px;
}
#about {
	height:24px;
}
.home .newsletter .btn, .home .btn-headersearch {
    width: 75px;
}
.jumbotron .jozi-button {
	background:#7296AD;
	color:#292F33;

}
.home-boxes a {
	position:relative;
	color:#484848;
	display:block;
	box-sizing:border-box;

}
.home-boxes-text {
    padding: 10px 8px 25px;
}
.home-boxes .col-md-4 > a {
	border: 1px solid #dee4e9;
}
.home-boxes .col-md-4 > a:hover {
	-webkit-transition:0.2s;
	transition: 0.2s;
}
.home-boxes a:hover {
	text-decoration:none;
}
.home-boxes-text .btn.btn-primary {
    margin-top: 20px;
}
/* Added: Sean */
.extra-murals-home .image-container {
	background:url(../imgs/home-EXTRA-MURALS-violin.jpg);
   background-color: transparent;
   position: relative;
   width: 100%;
   padding-top: 66.66%; /* 3:2 Aspect Ratio */
   background-position: center;background-size: cover!important;
}
.parties-home .image-container {
	background:url(../imgs/home-PARTIES.jpg);
   background-color: transparent;
   position: relative;
   width: 100%;
   padding-top: 66.66%; /* 3:2 Aspect Ratio */
   background-position: center;background-size: cover!important;
}
.education-home .image-container  {
	background:url(../imgs/home-EDUCATION-eclah_preschool.jpg);
   background-color: transparent;
   position: relative;
   width: 100%;
   padding-top: 66.66%; /* 3:2 Aspect Ratio */
   background-position: center;background-size: cover!important;
}

.places-home .image-container {
	background:url(../imgs/home-Places-to-go.jpg);
   background-color: transparent;
   position: relative;
   width: 100%;
   padding-top: 66.66%; /* 3:2 Aspect Ratio */
   background-position: center;background-size: cover!important;
}
.products-home .image-container {
	background:url(../imgs/home-PRODUCTS-timelesstoys.jpg);
   background-color: transparent;
   position: relative;
   width: 100%;
   padding-top: 66.66%; /* 3:2 Aspect Ratio */
   background-position: center;background-size: cover!important;
}
.services-home .image-container  {
	background:url(../imgs/home-SERVICES-TOP-TOTS.jpg);
   background-color: transparent;
   position: relative;
   width: 100%;
   padding-top: 66.66%; /* 3:2 Aspect Ratio */
   background-position: center;background-size: cover!important;
}
.image-container {
   background-color: transparent;
   position: relative;
   width: 100%;
   padding-top: 66.66%; /* 3:2 Aspect Ratio */
   background-position: center;background-size: cover!important;
}


.home .home-boxes h2 {
	color:#7196b0;
	font-size:24px;
	margin:3px 0 8px;
}
.reverse {
	color:white;
}
.home-boxes .row.is-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.home-boxes .row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.home .btn.btn-headersearch {
    border: 0px solid transparent;
}
/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand.
* Use a preprocesser with autoprefixing.
*/
.home-boxes .row.is-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.home-boxes .row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}


 .card:first-of-type { border-top: 1px solid rgba(0,0,0,.125) !important;}
}



/* -------------------------------------------------- The Carousels */


body #articles .cblock h3 {
	color:#7296AD;
	line-height:1;
	font-size:21px;
	font-weight:600;
}

.carousels-home .carousel-control-next,
.carousels-home .carousel-control-prev {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: start;
    -webkit-box-align: start;
            align-items: start;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
    color: #fff;
    padding-top:6.6rem;
}

#featured h3 {
	margin-bottom:18px;
}


.carousels-home .carousel-inner .container {
	padding-left:0;
	padding-right:0;
}
.carousels-home .carousel-control-prev {
	left:-85px;
}
.carousels-home .carousel-control-next {
	right:-85px;
}
.carousels-home .carousel-control-prev ,
.carousels-home .carousel-control-next {
	opacity:1;

}
.carousel-indicators {
	display:none;
}
.carousels-home .carousel-control-next-icon,
.carousels-home .carousel-control-prev-icon {
	display: inline-block;
    cursor: pointer;
    text-align: center;
    line-height: 42px;
    width:42px;
    height:42px;
    background-size:60% auto;
    background-color:white;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: #efefef;
    /*url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='484848' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")*/;
}
.carousels-home .carousel-control-prev-icon {
    background-image: url(../imgs/back.png) /*url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='484848' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")*/;
}
.carousels-home .carousel-control-next-icon {
    background-image: url(../imgs/forward.png) /*url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='484848' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");*/
}
.carousels-home .carousel-indicators li {
    background-color: black!important;
}
.carousels-home .carousel-indicators {
	top:calc(100% + 12px);
}

/* ---------------------------------------------------------- Subscription Box */

.subscribe-box {
	float:right;
	position:absolute;
	right:15px;
	top:0;
	width:44%;
}
.subscribe-box h4 {
	color:#7296AD;
	font-size:17px;
	display:inline-block;
	float:left;
	top:6px;
	position: relative;
}

.subscribe-box form {
	float: right;
}


/* ---------------------------------------------------------- Also The Newsletter */

.home-blog {
	margin-bottom:12px;
}


.home-blog input {
	float:left;
	margin-right:6px;
}

.home-newsletter form {
	display:block;
}



.newsletter {
	background: url(../imgs/newsletter.jpg) no-repeat fixed center center;
	padding-bottom:72px;
	line-height:1.2;
	padding-top:54px;
	color:white;
}
.newsletter h2 {
	color:white;
	margin-bottom: 3px;
}
html .home-blog .btn,
html .newsletter .btn {
	font-size:1.2rem;
	background:#7296AD;

}



@media screen and (max-width:1366px) {
.vertical-center {padding:1.2vw 0 2vw;	}
}


@media(max-width:1200px){
.vertical-center {padding:0.9vw 0 1vw; min-height: 360px; }

   .home-boxes-text {
      padding: 15px 15px 20px!important;
   }
}
@media(max-width:990px){
.vertical-center {padding:80px 0 10px; min-height: 320px; }
.jumbotron h1 {font-size:2.4rem;}
.jumbotron h2 {font-size:1.2rem; }
.home-boxes-text {padding: 15px 15px 10px!important; }
}


@media(max-width:768px){
.vertical-center {padding:70px 0 5px; min-height: 250px; }
.jumbotron h1 {font-size:2.1rem;margin-bottom: 7px;}
.jumbotron h2 {font-size:1.1rem; font-weight:500;}
.home-boxes-text {   padding: 7px 10px 4px!important;  }
.home .home-boxes h2 { color: #7196b0; font-size: 21px;  margin: 3px 0 7px;}
  .jumbotron .form-control { height: 45px; font-size: 1.0rem; font-weight: 300; color: black; background-color: white; border: none;  }
.home .btn.btn-headersearch { height: 45px;}
}

@media(max-width:560px){
.vertical-center {padding:50px 0 0px; min-height: 220px; }
.jumbotron h1 {font-size:1.9rem;margin-bottom: 7px;}
.jumbotron h2 {font-size:1.1rem; font-weight:500;}
.home-boxes-text {padding: 3px 8px 3px!important;   }
   .image-container {
   background-color: transparent;
   position: relative;
   width: 100%;
   margin: 0;
   padding-top: 59%!important; /* 3:2 Aspect Ratio */
   background-position: center;background-size: cover!important;
   }
  .home-boxes a { margin: 0 2px 0 2px;}
  .home .home-boxes h2 { color: #7196b0; font-size: 20px;  margin: 3px 0 6px;}
.jumbotron .form-control { height: 35px; font-size: 0.95rem; font-weight: 300; color: black; background-color: white; border: none;  }
.home .btn.btn-headersearch { height: 35px;font-size: 17px;line-height:25px;}
.jumbotron .mb-5 { margin-bottom: 5px!important;}

}
@media(max-width:420px){
.vertical-center {padding:40px 0 0px; min-height: 200px; }
.jumbotron h1 {font-size:1.7rem;margin-bottom: 5px;}
.jumbotron h2 {font-size:1.0rem; font-weight:500;}
.home-boxes-text {      padding: 3px 8px 1px!important;   }
.home .home-boxes h2 { color: #7196b0; font-size: 19px;  margin: 3px 0 5px;}
.jumbotron .form-control { height: 25px; font-size: 0.9rem; font-weight: 300; color: black; background-color: white; border: none;  }
.home .btn.btn-headersearch { height: 25px;}
}