@import url('https://fonts.googleapis.com/css?family=Patrick+Hand');

.sweet-reads-wrapper {
	background: rgb(122,192,91);
	background: linear-gradient(180deg, rgba(122,192,91,1) 5%, rgba(152,206,127,1) 15%, rgba(255,255,255,1) 100%)
}

.jumbotron.ice-cream-bg {
	background: transparent !important;
}

.sweet-reads-logo{max-width:350px; margin-bottom:42px;}

.ice-cream-bg h1 {
	font-family: 'Patrick Hand', cursive;
	font-size:28px;
	line-height:33px;
	letter-spacing: 0px;
	color: #fcd672;
	opacity: 1;
	text-transform:uppercase;
}
.icon-headphone {
    height: 25%;
    margin-top: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ice-cream-bg h3 {
	font-family: Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size:20px;
	line-height:53px;
	letter-spacing: 0px;
	color: #FFFFFF;
	opacity: 1;text-transform:uppercase;}
.swr h2
{
	font-family: 'Patrick Hand', cursive;
	letter-spacing: 0px;
	color: #0A2240;
	opacity: 1;
	font-size:28px;
	line-height:33px;
	letter-spacing: 0px;
}
.swr h3
{
	font-family: 'Patrick Hand', cursive;
	font-size:28px;
	line-height:33px;
	letter-spacing: 0px;
	color: #3B3460;
	opacity: 1;
}
.swr h4 
{
	font-family: Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size:20px;
	line-height:26px;
	letter-spacing: 0px;
	color: #555555;
	opacity: 1;
	font-weight:normal;
}
.swr h5 {
	font-family: Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size:24px;
	line-height:28px;
	letter-spacing: 0px;
	font-weight:bold;
	color: #3B3460;
	opacity: 1;
}
.swr p, .swr .webinar p
{
	font-family: Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size:16px;
	line-height:26px;
	letter-spacing: 0px;
	opacity: 1;
}
.swr video + p, .swr video + p + p {color:#3B3460;}
.swr video:focus{border:0; outline:none;}
.swr .kit-category-label
{
	/*font-family: Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size:17px;*/
	font-family: 'Patrick Hand', cursive;
    font-size: 24px;
	font-weight:normal;
	line-height:28px;
}
.swr .kit-description-title
{
	font-family: Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size:18px;
	font-weight:bold;
	line-height:24px;
	margin-bottom:20px;
}
.btn-navy-outline {
    background-color: #3B3460;
    border: #3B3460 solid 3px;
    color: #fff !important;
    cursor: pointer;
	min-width:152px;
}
.btn-purple-outline:hover {
    color: #3B3460 !important;
    border: #3B3460 solid 3px;
    background-color: #fff;
    text-decoration: none;
    padding: .6rem 1rem .4rem 1rem;
}
.btn-green-outline
{
	background-color: #8EC549;
    border: #8EC549 solid 3px;
    color: #fff !important;
    cursor: pointer;
	min-width:152px;
}
.btn-green-outline:hover {
    color: #8EC549 !important;
    border: #8EC549 solid 3px;
    background-color: #fff;
    text-decoration: none;
    padding: .6rem 1rem .4rem 1rem;
	transform:none;
	box-shadow:none;
}
.btn-magenta, .carousel-control.btn-magenta
{
	background-color:#c017a2;
}
.btn-magenta:active, .btn-magenta:hover, .btn-magenta:focus, .carousel-control.btn-magenta:active, .carousel-control.btn-magenta:hover, .carousel-control.btn-magenta:focus
{
	background-color:#a00b86;
}
.btn-navy {
    background-color: #3B3460;
    color: #fff !important;
	cursor: pointer;}
.app-store-btn {height:57px; width:auto;}
.swr .kit-wrapper{border:none;margin-bottom:0;}
.swr .kit-container {height:auto;}
.br-20{border-radius: 20px;}
.br-10{border-radius: 10px;}
.blue-shadow {box-shadow: 4px 4px 10px #74cee280;opacity: 1;}
.green-shadow {box-shadow: 4px 4px 10px #b2c197;opacity: 1;}
.magenta-shadow {box-shadow: 4px 4px 10px #894881;opacity: 1;}
.grey-shadow {box-shadow: 0px 3px 6px #00000040;opacity: 1;}
.lightblue-bg {background-color:#E6FBFF;}
.lightgreen-bg {background-color:#f1f8e5;}
.lightmagenta-bg {background-color:#fce4f8;}
.mediumblue-bg {background-color:#daf0ff;}
.mediumgreen-bg {background-color:#e5f2ce;}
.darkgreen-bg {background-color:#ddf0bb;}
.darkblue-bg {background-color:#C4DAF1;}
.mediummagenta-bg {background-color:#f9d2f2;}
.darkmagenta-bg {background-color:#f5baeb;}
.yellow-bg {background-color:#FFE399;} 
.ice-cream-bar-bg {background-image: url(https://static.od-cdn.com/ice_cream_bar_stars2021.svg); background-position:center;	background-repeat:no-repeat; background-size: 170%; height: 273px; margin:60px 0;}
.ice-cream-cone-bg{background-image: url(https://static.od-cdn.com/ice_cream_cone_stars2021.svg); background-position:center;	background-repeat:no-repeat; background-size: 170%; height: 288px; margin: 0 0 30px 0;}
.pop-bg{background-image:url(/wp-content/uploads/stars-bar_sora-watermark.png); background-position:center;	background-repeat:no-repeat; background-size: 170%; height: 273px; margin:60px 0;}
.candy-bg{background-image: url(/wp-content/uploads/stars-bar-alone.png); background-position:center;	background-repeat:no-repeat; background-size: 170%; height: 288px; margin: 0 0 30px 0;}
.blue-clouds-bg{background-image: url(https://static.od-cdn.com/SSR_blue_cloud_2021.svg); background-position:center bottom;	background-repeat:no-repeat; height: 200px;background-size: calc(max(120%, 1200px));margin-bottom:-100px;}
.cloud-fix{margin-bottom:-4%;}
.seeAllbtn {width:225px;font-size:18px;padding: 5px 20px;}
.seeAllbtn {position: relative;}
.seeAllbtn.on:after {
  content: "See Less";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background: #F15B2C;*/
	background: #8EC549;
	border-radius: 4px;
	padding-top: 5px;
}
.cupcake-cone {margin:96px 0;}
.sora-app-ad{margin:80px 0;}
@media screen and (min-width: 768px) {
	.ice-cream-cone-bg, .ice-cream-bar-bg, .candy-bg, .pop-bg {	background-size:981px; height:290px; }
	.ice-cream-cone-bg, .candy-bg {margin:0 0 45px 0;}
	.candy-bg {height:213px;}
	.blue-clouds-bg{background-size:1440px; height:213px;background-position: top;}
	.ice-cream-bg h1 {	font-size:55px;line-height:63px;}
	.ice-cream-bg h3 {font-size:35px;line-height:53px;}
	.swr h2 {font-size:40px;line-height:48px;}
	.swr h3 {font-size:32px; line-height:38px;}
	.swr h4 {font-size:20px; line-height:26px;}
	.swr h5 {font-size:32px;line-height:38px;}
	.cupcake-cone {margin:60px 0;}
	.sora-app-ad{margin:60px 0;}
}

@media screen and (min-width: 992px) { 
	.blue-clouds-bg{background-size:cover; height:261;background-position: top;/*margin-top:50px;*/ margin-top:-50px;}
	.sweet-reads-logo{max-width:450px;margin-bottom:0;}
	.cupcake-cone {margin-bottom:144px;}
	.ice-cream-bar-bg, .pop-bg{/*margin:121px 0;*/ margin: 90x 0;}
	.ice-cream-cone-bg, .candy-bg {/*margin-bottom:90px;*/}
	
	.cupcake-cone {margin: 0 0 96px 0;}
	.sora-app-ad{margin:115px 0;}
}
@media screen and (min-width: 1440px) { 
	.blue-clouds-bg{height:291px;background-size: cover;background-position: top;/*margin-top:92px;*/}
	.cloud-fix{margin-bottom:-5%;}
	/*.ice-cream-cone-bg {margin-top:-6%;}*/
}


.ice-cream-fix{margin-top:-10%; max-width: 981px;}
.carousel-control { background-color: #E74E39; }
	.carousel-inner img {border-radius: 10px;}
.carousel-control:hover, .carousel-control:focus, .carousel-control:active { background-color: #cc3722; }

.one-item .carousel-col:nth-child(2), .one-item .carousel-col:nth-child(3) { display: block; }

.sliderExpanded .carousel-col { clear: none !important; }

.SR-bottom { border-radius: 0 0 20px 20px; border-top: 1px solid #ddd; margin: 0; padding: 40px; }

.SR-top { background-color: rgba(255, 255, 255, 1); border-radius: 20px 20px 0 0; margin: 0; padding: 40px; }

.SR-top h1, .SR-top h2, .SR-top h3, .SR-top h4, .SR-top h5 { 
	color: #d8be78; 
	font-family: 'Patrick Hand', cursive;
	font-weight: bold; 
	text-transform: uppercase; 
}

.txt-link { color: #F7ADC0 !important }

@media screen and (min-width: 1200px) {
  
  .active > div:first-child + div + div + div, .active > div:first-child + div + div + div + div { display: block; }  
  
  .carousel-col { width: 20%; }
  
  .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next {
    -webkit-transform: translateX(20%);
    -ms-transform: translateX(20%);
    -o-transform: translateX(20%);
    transform: translateX(20%);
  }

  .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev {
    -webkit-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    -o-transform: translateX(-20%);
    transform: translateX(-20%);
  }

  .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left,
  .carousel-inner .carousel-item:first-child.carousel-item-next.carousel-item-left, .carousel-inner .carousel-item-prev.carousel-item-right.last-item { 
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  } 
}

@media (min-width: 601px) and (max-width: 1199px) {

  .active > div:first-child + div + div { display: block; }
  
  .carousel-col { width: 33.33%; }
	
  .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next {
    -webkit-transform: translateX(33.33%);
    -ms-transform: translateX(33.33%);
    -o-transform: translateX(33.33%);
    transform: translateX(33.33%);
  }

  .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev {
    -webkit-transform: translateX(-33.33%);
    -ms-transform: translateX(-33.33%);
    -o-transform: translateX(-33.33%);
    transform: translateX(-33.33%);
  }

  .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left,
  .carousel-inner .carousel-item:first-child.carousel-item-next.carousel-item-left, .carousel-inner .carousel-item-prev.carousel-item-right.last-item { 
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  } 
}

@media screen and (min-width: 451px) and (max-width: 600px) {

  .active > div:first-child + div { display: block; }
  
  .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next {
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
    transform: translateX(50%);
  }

  .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left { 
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  
  .carousel-col { width: 50%; }
}

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

  .active > div:first-child { display: block; }
  
  .carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }

  .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left { 
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  
  .carousel-col { width: 100%; }
}


  @media screen and (max-width: 991px) {
    .SR-top { margin-top: 160px; }
    .SR-bottom { margin-bottom: 80px; }
  }

  @media screen and (max-width: 767px) {
    .SR-top { margin: 60px 0 0 0; padding: 20px 20px 40px 20px; }
    .SR-bottom { margin: 0; padding: 40px 20px; }
  }

  @media screen and (max-width: 400px) {
    .SR-top { margin: 60px 0 0 0; padding: 20px 15px 40px 15px; }
    .SR-bottom { margin: 0; padding: 40px 15px; }
  }
@media screen and (min-width: 1200px) {
	.active > div:first-child + div + div , .active > div:first-child + div + div + div  {
    	display: block;
	}
}
@media (max-width: 1199px) and (min-width: 601px) {
	.active > div:first-child + div  {
    display: block;
}
}