@charset "utf-8";
/* CSS Document */


/* ensures images don't leave frames */
img
{ 
max-width: 100% !important; 
}


/* BODY */
body
{
	background-image:url(../images/kindergartenkit_background.jpg);
	margin: 0px;
	padding: 0px;
}



/* PARAGRAPH/FONT STYLES */

/* Basic */
p, ul, li {
	font-family: "arial",sans-serif;
	font-size: 1em;
	color:#333;
}

a:link, a:visited, a:hover, a:active {
	color: #ffa64d;
	text-decoration: none;
}

a img {outline : none;}
img {border : 0;}

/* Headers */
h1 {
	color:#f2702b;
	margin:0px;
	padding:0px 0px 0px 10px;
	text-align:left;
	font: 67.5% 'Lucida Grande', Verdana, Helvetica, sans-serif;
	font-size:3em;
	font-weight:bold;
	text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}

/* used for index text */
/* black title text */
h2 {
	color: #333333;
	text-shadow: rgb(224, 224, 224) 1px 1px 0px;
	margin:0px;
	padding:30px 0px 0px 0px;
	text-align:center;
	font: 67.5% 'Lucida Grande', Verdana, Helvetica, sans-serif;
	font-size:2em;
	font-weight:bold;
}
/* black sub text */
h3 {
	color: #555555;
	text-shadow: rgb(224, 224, 224) 1px 1px 0px;
	margin:30px;
	padding:5px 0px 0px 0px;
	text-align:center;
	font: 67.5% 'Lucida Grande', Verdana, Helvetica, sans-serif;
	font-size:1.3em;
}
/* 0800 KIDPOWER text */
h4 {
	color: #8A8A8A;
	text-shadow: rgba(255, 255, 255, 0.0980392) -1px -1px 1px, rgba(0, 0, 0, 0.498039) 1px 1px 1px;
	margin:0px;
	padding:30px 20px 0px 20px;
	text-align:center;
	font: 67.5% 'Lucida Grande', Verdana, Helvetica, sans-serif;
	font-size:3.5em;
	font-weight:bold;
}
/* Orange Handwriting */
h5 {
	color: #ff751a; 
	text-shadow: rgb(224, 224, 224) 1px 1px 0px;
	margin:0px;
	padding:30px 0px 0px 0px;
	text-align:center;
	font-family: 'Shadows Into Light', cursive;
	font-size:2em;
	font-weight:bold;
}

/* quotes */
blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
}
/* supporters */
p.supporters {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	position: relative;
	color: white;
}
/* instructors */
p.instructors {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	position: relative;
	color: #999999;
	padding: 5%;
	padding-bottom: 0% !important;
}
p.orange {
	color: #f2702b;
	padding-top: -0% !important;
}



/* Footer */
p.footer {
	color: #cccccc;
	line-height:10px;
	margin: -6px 0px 0px 0px;
	padding: 0px 0px 15px 0px;
	text-align:center;
	font: 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
	font-size:12px;
	text-shadow:2px 2px 4px #111;
}
.footer a:link {
	color: #cccccc;
}
.footer a:visited {
	color: #cccccc;
}
.footer a:hover {
	color: #f2702b;
}
.footer a:active {
	color: #cccccc;
}

/* Orange body text */
p.orange {
	color: #ffa64d;
}

/* DIVS */

/* Main Content */
.shadow_box {
	width: 80%;
	max-width:960px;
	box-shadow: 1px 1px 7px 2px #555;
	margin: 0 auto;
	overflow: visible;
}

.shadow_box_empty {
	box-shadow: none; !important
	background: none; !important
}

.container {
	width: 100%;
	max-width:960px;
	background: #FFFFFF;
	margin: 0 auto;
	overflow: hidden;
}
.container_menu{
	width: 100%;
	max-width:960px;
	background: #333333;
}


.body_1column {
	width: 90%;
	min-width: 300px;
	margin: 0 auto;
/*	padding: 0px 15px 0px 25px;  */
	padding: 0% 0% 0% 2%;
	overflow: hidden;
	float: left;
/*	background-color: #FFF;  */
}

.body_2column {
	width: 45%;
	min-width: 300px;
	margin: 0 auto;
/*	padding: 0px 15px 0px 25px;  */
	padding: 0% 0% 0% 2%;
	overflow: hidden;
	float: left;
/*	background-color: #FFF;  */
}

.index_container_carousel {
	width: 100%;
	height: auto;
	background: #FFF;
	overflow: visible;
	padding: 0px 0px 0px 0px;
}


.index_facebook_container {
	min-width: 300px;
	height: 200px;
	padding: 0% 0% 0% 2%;
	overflow: hidden;
	float: left;
	background-color: #FFF;
}

.index_facebook_box {
	background-image: url('../images/index_facebookbg.png');
	position:absolute;
	width: 300px;
	height: 351px;
	margin: auto;
	margin: -2% 0% 0% 1%;
	padding: 8px 0px 0px 8px;
	overflow: hidden;
	background-position:left top;
	background-repeat:no-repeat;
	z-index: 100;
}

.index_text_container {
	width: 45%;
	margin: 0 auto;
	padding: 0% 0% 0% 2%;
	overflow: hidden;
	float: left;
	background-color: #FFF;
}

.index_container_dark {
	width: 100%;
	max-width:960px;
	background: #333333;
	margin: 0 auto;
	padding: 0% 0% 5% 0%;
	overflow: hidden;
}

.index_container_grey {
	width: 100%;
	max-width:960px;
	background:  #f6f1ed;
	margin: 0 auto;
	padding: 0% 0% 5% 0%;
	overflow: hidden;
}

.index_container_dark_shadow {
	width: 100%;
	max-width:960px;
	height:34px;
	background-image:url('../images/index_shadow.png');
	margin: 0 auto;
	overflow: visible;
}

.index_container_dark_shadow_inverse {
	width: 100%;
	max-width:960px;
	height:34px;
	background-image:url('../images/index_shadow_inverse.png');
	margin: 0 auto;
	overflow: visible;
	background-color: #f6f1ed;
	margin-top: -10px !important;
}

.googleandfb_box {
/*	width:960px;*/
	overflow: visible;
	margin: 0 auto;
	margin-top:10px;
}

/* images on the supporters/donate page */
.support {
 padding: 5px;
 max-width: 15% !important;
}
.support {
 padding: 5px;
 max-width: 26% !important;
}

.side_bar_contact {
	width: 185px;
	height: 126px;
	background-repeat:no-repeat;
position:fixed;
bottom: 5%;
left: 50%;
margin-left: 462px;
	z-index: 100;
}

/* PAYPAL */
.paypal-cart {
	float:right;
	margin-top:-35px;
}

/* HEALTHY RELATIONSHIPS SPECIFIC CSS */

.hr-top-background {
/* height: 1000px; */
background-image: url('../hr/images/hr_background_A.png');
background-size: 1600px auto;
background-position: center top;
margin:0px;
padding:0;
}

.hr-top-background-B {
/* height: 1000px; */
background-image: url('../hr/images/hr_background_B.png');
background-size: 1600px auto;
background-position: center top;
margin:0px;
padding:0;
}

.hr-top-background-C {
/* height: 1000px; */
background-image: url('../hr/images/hr_background_C.png');
background-size: 1600px auto;
background-position: center top;
margin:0px;
padding:0;
}

.hr-main-top {
background-image: url('../hr/images/hr_background.png');
background-size:cover;
background-width-max:100vw;
background-position: center top;
height:100vh;
min-height:860px;
margin-bottom:-20%;
padding-bottom:20%;
}

.hr-sky-bg {
background: linear-gradient(rgb(153, 204, 255) 20%,  rgb(255, 255, 255) 80%);
}

.hr_spacer {
height: 0vh;
}

.hr_morestories {
position: fixed;
display: none;
margin-left: 100px;
margin-top: -300px;
float:left;
}

.hr_shop_image {
max-width:50%;
height:auto;
 float: right;
}


/* HEALTHY RELATIONSHIPS BUTTON ROLLOVER SPRITESHEET */

.sprite {
    background-image: url(../images/hr_spritesheet.png);
    background-repeat: no-repeat;
    display: block;
    float:left;
    width: 100%;
    height: 210px;
}

.sprite-hr_a_button_med {
    width: 33%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -5px -5px;
}

.sprite-hr_a_button_med:hover {background: url('../images/hr_spritesheet.png') -290px -5px;}

.sprite-hr_a_button_med_over {
    width: 33%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -290px -5px;
}

.sprite-hr_b_button_med {
    width: 33%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -5px -225px;
}

.sprite-hr_b_button_med:hover {background: url('../images/hr_spritesheet.png') -290px -225px;}

.sprite-hr_b_button_med_over {
    width: 33%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -290px -225px;
}

.sprite-hr_c_button_med {
    width: 33%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -5px -445px;
}

.sprite-hr_c_button_med:hover {background: url('../images/hr_spritesheet.png') -290px -445px;}

.sprite-hr_c_button_med_over {
    width: 33%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -290px -445px;
}

.sprite-hr_main_button_med {
    width: 275px;
    height: 210px;
    background-position: -575px -5px;
}

.sprite-hr_main_button_med:hover {background: url('../images/hr_spritesheet.png') -575px -225px;}

.sprite-hr_main_button_med_over {
    width: 275px;
    height: 210px;
    background-position: -575px -225px;
}

/* HEALTHY RELATIONSHIPS BUTTON ROLLOVER SPRITESHEET (SMALL*/

.sprite_small_container {
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    height: 105px;
    float:left;
	overflow: hidden;
}

.sprite_small {
    background-image: url(../images/hr_spritesheet_small.png);
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 105px;
    width: 137px;
}

.sprite-hr_a_button_small {
    width: 137px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -5px -5px;
}

.sprite-hr_a_button_small:hover {background: url('../images/hr_spritesheet_small.png') -152px -5px;}

.sprite-hr_a_button_small_over {
    width: 137px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -152px -5px;
}

.sprite-hr_b_button_small {
    width: 137px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -5px -235px;
}

.sprite-hr_b_button_small:hover {background: url('../images/hr_spritesheet_small.png') -152px -235px;}

.sprite-hr_b_button_small_over {
    width: 137px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -152px -235px;
}

.sprite-hr_c_button_small {
    width: 137px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -299px -5px;
}

.sprite-hr_c_button_small:hover {background: url('../images/hr_spritesheet_small.png') -299px -120px;
}

.sprite-hr_c_button_small_over {
    width: 137px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -299px -120px;

}

.sprite-hr_main_button_small {
    width: 137px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -5px -120px;
}

.sprite-hr_main_button_small:hover {background: url('../images/hr_spritesheet_small.png') -152px -120px;}

.sprite-hr_main_button_small_over {
    width: 137px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-position: -152px -120px;
}

/* HEALTHY RELATIONSHIPS BUTTON ROLLOVER SPRITESHEET (APPS SMALL) */

.sprite_wrapper_small {
    width: 274px;
	margin: 0 auto;
}

.sprite_app_small {
    background-image: url(../images/hr_app_spritesheet_small.png);
    background-repeat: no-repeat;
    height: 105px;
    width: 137px;
	float:left;
}

.sprite-hr_apple_button_small {
    width: 137px;
    background-position: -152px -5px;
}

.sprite-hr_apple_button_small:hover {background: url('../images/hr_app_spritesheet_small.png') -152px -120px;}

.sprite-hr_android_button_small {
    width: 137px;
    background-position: -5px -5px;
}

.sprite-hr_android_button_small:hover {background: url('../images/hr_app_spritesheet_small.png') -5px -120px;}


/* HIDE + SHOW CONTENT BOXES */

h3.flip1,h3.flip2,h3.flip3,h3.flip4,h3.flip5,h3.flip6,h3.flip7,h3.flip8,h3.flip9,h3.flip10,h3.flip11
{
margin:auto;
padding:5px;
border:solid 1px #666;
background: #fff3e6;
}

h3.flip1:hover,h3.flip2:hover,h3.flip3:hover,h3.flip4:hover,h3.flip5:hover,h3.flip6:hover,h3.flip7:hover,h3.flip8:hover,h3.flip9:hover,h3.flip10:hover,h3.flip11:hover
{
background: #ffdab3;
}

div.panel1,div.panel2,div.panel3,div.panel4,div.panel5,div.panel6,div.panel7,div.panel8,div.panel9,div.panel10,div.panel11
{
display:none;
}

h3.flip1,h3.flip2,h3.flip3,h3.flip4,h3.flip5,h3.flip6,h3.flip7,h3.flip8,h3.flip9,h3.flip10,h3.flip11
{
cursor:pointer;
}

/* orange borders on boxes */
h3.orange
{
margin:auto;
padding:5px;
border:solid 1px #ffa64d;
background: #fff3e6;
}

h3.orange:hover
{
background: #ffdab3;
}

/* MAKE YOUTUBE VIDEO SCALE PROPERLY */
.wrapper         {width:100%;height:100%;margin:0 auto;background:#ffffff}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:70%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
iframe, object, embed {max-width: 100%;}


/* SUPPORTER FLIP CARDS */

#f1_container {
  overflow: hidden;
  position: relative;
  float: left;
  padding: 10px auto;
  width: 25%;
  height: 80px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
  background-color: #f6f1ed;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-style: solid;
  border-width: 2px;
  border-color:   #f6f1ed !important;
  background-color: white;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  text-align: center;
  background-color: #ff8c1a;
}
.face.back.silver {
  background-color: #40bf40 !important;
}
.face.back.bronze {
  background-color: #8c1aff !important;
}
.supporter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#f1_container2 {
  overflow: hidden;
  position: relative;
  float: left;
  padding: 10px auto;
  width: 20%;
  height: 80px;
  z-index: 1;
}

#f1_container3 {
  overflow: hidden;
  position: relative;
  float: left;
  padding: 10px auto;
  width: 15%;
  height: 80px;
  z-index: 1;
}

#f1_containerBig {
  overflow: hidden;
  position: relative;
  float: left;
  padding: 10px auto;
  width: 50%;
  height: 160px;
  z-index: 1;
}
#f1_containerBig {
  perspective: 1000;
  background-color: #f6f1ed;
}
#f1_containerBig:hover #f1_card {
  transform: rotateY(180deg);
}

/* LARGER FLIP BOXES */

#f1_container_instructor {
  overflow: hidden;
  position: relative;
  float: left;
  padding: 10px auto;
  width: 33%;
  height: 250px;
  z-index: 1;
}
#f1_container_instructor:hover #f1_card {
  transform: rotateY(180deg);
}
.face.back.white {
  background-color: white !important;
}


/* ISSUU IN ABOUT PAGE */
.issuuembed {
	width: 610px;
	height: 500px;
  }


/* RESPONSIVE */


/* if browser screen is >1800px (full width) */
@media screen and (min-width: 1800px) {
/* hides 'click for more stories' in HR stories */
.hr_morestories {
 display: inline !important;
}
}

/* if browser screen is >1100px (full width) */
@media screen and (min-width: 1100px) {
/* makes index text container fill the screen more */
.index_text_container {
	width: 60% !important;
  }
/* makes content center better */
.body_1column {
	width: 95% !important;
  }
.body_2column {
	width: 47% !important;
  }
/* makes facebook box sit up a bit more */
.index_facebook_box {
	margin: -4% 0% 0% 1% !important;
}
}

/* if browser screen is <1250px (full width) */
@media screen and (max-width: 1250px) {
/* makes contact box disappear */
.side_bar_contact {
	 display: none;
}
}

/* if browser screen is <1050px */
@media screen and (max-width: 1050px) {
/* makes 2 column boxes sit properly */
.body_2column {
	width: 43%;
	min-width: 100px;
	padding: 0% 0% 0% 4%;
	}
.body_1column {
	width: 92% !important;
	padding: 0% 0% 0% 4%;
}
}


.hr_mobile_only	{
	 display: none;
}
/* if browser screen is <970px ) */
@media screen and (max-width: 970px) {
/* hides and shows HR selection buttons */
.hr_screen_only	{
	 display: none;
}
.hr_mobile_only	{
	 display: inline;
}
}


/* if browser screen is <749px ) */
@media screen and (max-width: 749px) {
/* makes website scale and makes 2 column boxes fill page */
.shadow_box {
	width: 90%;
	}
.body_2column {
	width: 90% !important;
	min-width: 100px;
	}
.body_1column {
	width: 90% !important;
	min-width: 100px;
}
/* makes index facebook container drop down a bit */
.index_facebook_container {
	padding: 5% 0% 0% 2% !important;
}
/* makes 0800 text smaller */
h4 {
	font-size:3em !important;
	padding:30px 10px 30px 10px !important;
}
/* makes donator slides take up more space */
#f1_container {
  width: 25%;
  height: 90px;
}
#f1_containerBig {
  width: 50%;
  height: 180px;
}
/* makes instructor pictures go from 3 > 2 */
#f1_container_instructor {
  width: 49%;
}
}


/* if browser screen is <660px ) */
/* makes facebook box and text on index page drop below one another */
@media screen and (max-width: 660px) {
.index_facebook_container {
	width: 50% !important;
	height: 320px !important;
	margin: 0 auto !important;
	float: none !important;
}
.index_text_container {
	width: 90% !important;
	padding: 0% 4% 0% 4% !important;
}
h4 {
	font-size:2.5em !important;
	padding:30px 10px 30px 10px !important;
}
.index_facebook_container {
	padding: 2% 0% 0% 2% !important;
}
/* makes donator slides take up more space */
#f1_container {
  width: 33%;
  height: 90px;
}
#f1_containerBig {
  width: 33%;
  height: 90px;
}
/* images on the supporters/donate page */
.support {
 padding: 5px;
 max-width: 40% !important;
}
/* makes issuu embed in about page smaller */
.issuuembed {
	width: 100%;
	height: 300px;
  }
.hr-top-background {
background-size: 1200px auto;
}
.hr-top-background-B {
background-size: 1200px auto;
}
.hr-top-background-C {
background-size: 1200px auto;
}
}



/* if browser screen is <470px ) */
/* makes index text smaller */
@media screen and (max-width: 470px) {
h2 {
	font-size:1.5em !important;
	padding:30px 0px 0px 0px !important;
}
h3 {
	font-size:1em !important;
/*	margin-top:10px !important; */
}
h4 {
	font-size:2.5em !important;
	padding:30px 10px 30px 10px !important;
}
/* centers index facebook box */
.index_facebook_container {
	min-width: none !important;
	padding: 10% 0% 0% 0% !important;
}
/* makes donator slides take up more space */
#f1_container {
  width: 50%;
  height: 90px;
}
#f1_containerBig {
  width: 100%;
  height: 180px;
}
/* makes instructor pictures go from 2 > 1 */
#f1_container_instructor {
  width: 99%;
}
/* makes footer text smaller */
p.footer {
	font-size:10px; !important
	margin: 2px 0px 0px 0px;
}
.hr-top-background {
background-size: 1000px auto;
}
.hr-top-background-B {
background-size: 1000px auto;
}
.hr-top-background-C {
background-size: 1000px auto;
}
}


/* if browser screen is <400px ) */
@media screen and (max-width: 400px) {
/* makes hr top part minimum height a bit smaller */
.hr-main-top {
min-height:700px;
}
/* makes google and fb like buttons squeeze up on small screen */
#___plusone_0 {
	width: 40px !important;
	overflow: hidden !important;
}
}


/* if browser screen is >500px high ) */
/* makes hr page space out a bit more */
@media screen and (min-height: 500px) {
.hr_spacer {
	height: 6vh !important;
}
}


/* RESPONSIVE - MOBILE OR SCREEN ONLY */

/* Screen Only */
.screen_only	{
	 display: none;
}

@media screen and (min-width: 750px) {
.screen_only {
    display: inline !important;
  }
}


/* Mobile Only */
.mobile_only	{
	 display: none;
}

@media screen and (max-width: 749px) {
.mobile_only {
    display: inline !important;
  }
}

/* site design by simon.m.hartman@gmail.com */