/********************************

Page type: Sesame Workshop Stylesheet

	Written by: Vortilla Digital
	Project: Healthy Play
	Date created: May 11 2015 at 10:35 am
	Last updated: 8/24/2015 12:03PM

********************************/

@font-face { font-family:'VAGRoundedBold'; src:url(../fonts/VAGRoundedBold.eot); src:url(../fonts/VAGRoundedBold.eot) format("embedded-opentype"), url(../fonts/VAGRoundedBold.woff2) format("woff2"), url(../fonts/VAGRoundedBold.woff) format("woff"), url(../fonts/VAGRoundedBold.ttf) format("truetype"), url(../fonts/VAGRoundedBold.svg#VAGRoundedBold) format("svg") }
* { margin:0 }

@font-face { font-family:'VAGRounded-Light'; src:url(../fonts/VAGRounded-Light.eot); src:url(../fonts/VAGRounded-Light.eot) format("embedded-opentype"), url(../fonts/VAGRounded-Light.woff) format("woff"), url(../fonts/VAGRounded-Light.ttf) format("truetype"), url(../fonts/VAGRounded-Light.svg#VAGRounded-Light) format("svg") }
* { margin:0 }

html,body { height:100%; overflow-x:hidden }
.wrapper { height:100%; width:100% }
body { font-family:'VAGRoundedBold',sans-serif; letter-spacing:1px; font-size: 15px; }
/** Grid **/
.bar { width:100% }
#menu { position:fixed; height: 15vh;min-height: 80px;  z-index: 99999; margin: 0 10px; background: #FFF; border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; }
#form-views {  padding-top: 15vh;}
.content { height: 55vh; }
.character { height: 20vh; text-align:center }
/** Typography **/
h2 { color:#fff; font-weight:400; margin:0; padding: 10px 0; }
p { margin: 0; padding: 5px 0; }
.font_small { font-size:.6em }
.font_large { font-size:1.2em }
.sweet-alert h2,.sweet-alert p,.sa-button-container .confirm { font-family:'VAGRoundedBold',sans-serif; color:#80ade3 }
.sweet-alert p { color:#666 }
.sweet-alert { padding:40px; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px }
.sa-button-container .confirm,.sa-button-container .confirm:hover,.sweet-alert[data-has-cancel-button=false] button { background-color:#80ade3!important; width:100%; border-radius:30px; padding:.4em; color:#fff; font-size:3em; -webkit-box-shadow:0 10px 0 0 rgba(0,0,0,0.3)!important; -moz-box-shadow:0 10px 0 0 rgba(0,0,0,0.3)!important; box-shadow:0 10px 0 0 rgba(0,0,0,0.3)!important }
/** Buttons **/
.btn_hp { -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; padding: 1vh 4vw; min-width: 45vw; color:#fff; -webkit-box-shadow:0 10px 0 0 rgba(0,0,0,0.3); -moz-box-shadow:0 10px 0 0 rgba(0,0,0,0.3); box-shadow:0 10px 0 0 rgba(0,0,0,0.3); transition: all 0.5s ease-out; margin: 10px auto; }
.btn_hp:hover,.btn_hp:focus { color:#fff; transition: all 0.2s ease-out; }
.btn_pri { background-color:#69afe5 }
.btn_pri:hover,.btn_pri:focus { background-color:#66b0e5; transform:scale(1.1,1.1) }
.btn_sec { background-color:#c84dab }
.btn_sec:hover,.btn_sec:focus { background-color:#66b0e5; transform:scale(1.1,1.1) }
/** Palettes **/
.palette_1 { background:url(../img/palettes/1/bg.png) top center #16c3a0 }
.palette_2 { background:url(../img/palettes/2/bg.png) top center #d60e76 }
.palette_3 { background:url(../img/palettes/3/bg.png) top center #84c823 }
.palette_4 { background:url(../img/palettes/4/bg.png) top center #283a66 }
.palette_5 { background-image:url(../img/palettes/5/lines.png),url(../img/palettes/5/bar.jpg); background-size:99% auto ,20% auto,50% 50%; background-repeat:no-repeat,no-repeat,repeat-x; background-color:#322433 /* #ffa801 */}

@keyframes animatedLines {
	from { background-position:-1000px center,100% bottom,center 100%; background-size:99% auto ,0% 50%,50% 50% }
	to { background-position:0 center,100% bottom,bottom right; background-size:99% auto ,100% 50%,50% 50% }
}

@-webkit-keyframes animatedLines {
	from { background-position:-1000px center,100% bottom,center 100%; background-size:99% auto ,0% 50%,50% 50% }
	to { background-position:0 center,100% bottom,bottom right; background-size:99% auto ,100% 50%,50% 50% }
}
.palette_5 { animation:animatedLines 1s linear forwards; -webkit-animation:animatedLines 1s linear forwards }
.palette_6 { background-image:url(../img/palettes/6/4.png),url(../img/palettes/6/5.png),url(../img/palettes/6/house.png),url(../img/palettes/6/bar.jpg); background-size:20% auto ,20% auto,20% auto,50% 50%; background-repeat:no-repeat,no-repeat,no-repeat,repeat-x; background-color:#ffa801 /* #ffa801 */ }

@keyframes animatedCloud {
	from { background-position:-50% 25%,150% 25%,center 150%,center 100% }
	to { background-position:5% 25%,95% 25%,bottom center,bottom right }
}

@-webkit-keyframes animatedCloud {
	from { background-position:-50% 25%,150% 25%,center 150%,center 100% }
	to { background-position:5% 25%,95% 25%,bottom center,bottom right }
}
.palette_6 { -webkit-animation:animatedCloud 1s linear forwards }
.palette_7 { background:url(../img/palettes/7/bg.png) top center #cbd934 }
.palette_8 { background:url(../img/palettes/8/bg.png) top center #f8cb19 }
/** Character list **/
.muppet { margin:auto; background:top center no-repeat; height:100%; max-width:20%; min-width:200px; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover }
.muppet_1 { background-image:url(../img/characters/muppet_1.png) }
.muppet_2 { background-image:url(../img/characters/muppet_2.png) }
.muppet_3 { background-image:url(../img/characters/muppet_3.png) }
.muppet_4 { background-image:url(../img/characters/muppet_4.png) }
.muppet_5 { background-image:url(../img/characters/muppet_5.png) }
.muppet_6 { background-image:url(../img/characters/muppet_6.png) }
/** Menu **/
.top_nav { text-align:center; }
.hamburger-menu { cursor: pointer; padding: 10px; }
.vert-align { position:relative; top:50%; transform:translateY(-50%) }
/* .content-align { position: relative; top: 30%; transform: translateY(-20%); padding: 0 5%; text-align: center; } */
.content-align,.step-content { text-align:center; height:100%; position:relative }
.step-content { padding:0 5%; width:90% }
.desktop-select, .mobile-select, .activity-select { position: absolute; display: table; height: 100%; width: 100% }
.desktop-content, .mobile-content, .activity-content { display: table-cell; vertical-align: middle; text-align: center; width: 100%; }
.content-block {max-width: 900px;  margin: auto; margin-bottom:180px;}

/** Color palettes **/
.primary-p {background-color: #e615ab !important; color: #fff !important;}
.primary-p:hover {background-color: #b9128a !important; }
.secondary-p {background-color: #29b2e8 !important; color: #fff !important;}
.secondary-p:hover {background-color: #2193c0 !important; }

.activity-content { padding: 0 20px;  padding-left: 10px;}
.fav_btn, .fav_btn:hover {position: fixed; z-index:999999; right: 20px; top: 5%; font-size: 50px; cursor: pointer; color: #f9dc2d;}
.fav_btn:hover i:before {content: "\f005";}

.drop_menu { z-index:2; height:auto; position:absolute; background:#fff; margin-left: 10px; top: 16vh; padding:0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;  }
.drop_menu.show { display: block; }
.hidden_menu {display: none;}
.drop_menu li { list-style:none; padding:0; text-align:left }
.drop_menu li a { display:block; padding:15px; padding-left:20px; font-size:1.8em; color:#bfbfbf; text-transform:capitalize }
.drop_menu li a.end { padding-bottom:20px }
.drop_menu li.breaker { border-bottom:2px solid #bfbfbf; width:108px; margin:auto; height:2px; display:block; padding:0 }
.drop_menu li a:hover,.drop_menu li a:focus { text-decoration:none; color:#1eb2e6 }
/** Components **/
.activity_description { color:#fff; }
.shadow { -webkit-box-shadow:0 10px 0 0 rgba(184,184,184,.5); box-shadow:0 10px 0 0 rgba(184,184,184,.5) }
.copyright { float:right; text-transform:capitalize }
.copyright a {color: #fff;}
.footer_contents { background-color: green; height:100%; border-top:3px solid #fff; }
.scaled_bg { -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover }
.tiled_bg { }
/** Circles **/
.circles { width:100% }
/* .circle-3 { width:23%; float:left; text-align:center; margin:1% } 
	.circle-4 { width:31%; float:left; text-align:center; margin:1% }
	.circle-6 { width:45%; float:left; text-align:center; margin:1% }
*/
.circle-3 { width:22%; display: inline-block; text-align:center; margin:1% }
.circle-4 { width:30%; display: inline-block; text-align:center; margin:1% }
.circle-6 { width:45%; max-width: 250px; display: inline-block; text-align:center; margin:1% }

.favorites_list, .favorites_list li {padding: 0; margin: 0; text-align: left; }
.favorites_list {border: 2px solid #ccc; -webkit-border-radius: 10px; -moz-border-radius:  10px; border-radius:  10px; background-color: #fff;}
.favorites_list li { list-style: none; padding: 20px; border-bottom: 2px solid #ccc; font-weight: normal; color: #888; font-size: 1.2em; cursor: pointer;}
.favorites_list li:hover {background-color: #f1f1f1;}

.favorites_list li:last-child {border-bottom: none; -webkit-border-radius: 0 0 10px 0; -moz-border-radius:   0 0 10px 0; border-radius:   0 0 10px 0;}
.favorites_list li:first-child:hover { -webkit-border-radius: 10px 10px 0 0 ; -moz-border-radius:  10px 10px  0 0 ; border-radius:   10px 10px 0 0;}
.favorites_list li:last-child:hover {border-bottom: none; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius:   0 0 10px 10px; border-radius:   0 0 10px 10px;}
.fav_list_btn, .fav_list_btn:hover {float:right; cursor: pointer; color: #f9dc2d; font-size: 1.4em;}
.fav_list_btn:hover i:before {content: "\f006";}

.pull-right {float: right; display: block;}
.circle { margin-left:auto; margin-right:auto; border-radius:50%; width:100%; padding:10px; position:relative; background-color:#fff; cursor:pointer; color:#bfbfbf; transition:all .2s ease; max-width: 240px; }
.slide { margin-left:auto; margin-right:auto; padding:10px; position:relative; background:none; cursor:pointer; color:#bfbfbf; transition:all .2s ease; width: 100%; max-width: 240px; }
.desktop-select .circle:hover,#scrolling li.itemslide-active .circle,.m-active .circle { background-color:#1eb2e6; color:#fff; font-size: 1em; }
.circle-solid { background-color:#f5f5f5 }
.circle:before { content:""; display:block; padding-top:100% }
.circle-inner { position:absolute; top:0; left:0; bottom:0; right:0; text-align:center }
.circle-text,.circle-text-d { margin:auto; position:absolute; top:0; left:0; bottom:0; right:0; height:1em; line-height:1em }
.textfill {     max-width: 240px;
    height: 240px;
    width: 240px;max-width: 240px;}

/* TEST */
.text-box { width:100%; height:100%; position:relative }
.text-content { position:absolute; width:100%; height:100%; padding:10px; display:table }
.text-content p { display:table-cell; vertical-align:middle; text-align:center; line-height:1.4em; padding-top:0; font-size: 2em; }
.mobile-select { position:relative; width:100%; height:100%; overflow:hidden; display:none; }
/*.flickity-slider { width:80%; margin: 0 auto; }*/
.slide.is-selected .circle { background-color:#1eb2e6; color:#fff; }
.slide.is-selected { transform: scale(1.08, 1.08); }
/** Sliders **/
#scrolling { overflow:hidden; width:100% }
#scrolling ul { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; margin:0; padding:0; position:absolute; margin-top:4vh; height:80%; list-style-type:none; -webkit-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d }
#scrolling li { font-size:8vmin; /*cool*/ float:left; width:25vw; min-width:300px; height:50%; color:#000; font-weight:300; text-align:center; cursor:pointer; background:none; -webkit-transform:scale(0.95); -ms-transform:scale(0.95); -moz-transform:scale(0.95); transform:scale(0.95) }
#scrolling li.itemslide-active { -webkit-transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); transform:scale(1) }
/** Assets **/
.end_message { color:#fff; font-size:2.5em; margin:0; margin-bottom:30px }
.steps,.steps li { list-style:none; color:#fff; margin:0; padding:0; top:0; position:absolute; height:100%; width:100% }
#loader { background:url(../img/dotted_bg.jpg) top center; position:fixed; display:block!important; top:0; left:0; height:100%; width:100%; background-color:#fff; z-index:99999; text-align:center }
#load-block { height:260px }
#loading { width: 200px; height: 200px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#inner_loading { width: 220px; height: 240px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.loading_char { position:absolute; }
/*
#content_yes_no .btn-yes,#content_yes_no .btn-no { }
#content_start_game .btn-play-game,#content_start_game .btn-no-thanks { }
#content_start_game .btn-play-game-african,#content_start_game .btn-no-thanks-african { width:70%; margin:0 1%; max-width:520px }
#content_start_game .btn-play-game { margin-bottom:20px }
#content_start_game .btn-play-game-african { margin-bottom:20px }
#content_start_game .btn-no-thanks { font-size:2.4em }
#content_play_game .btn-play-option { width:30%; margin:1.33%; font-size:2.5em }
#content_play_game .btn-play-option-african { width:30%; margin:1.33%; font-size:1.6em }
*/
.btn-arrow-left,.btn-arrow-left:active,.btn-arrow-left:focus { background-image:url(../img/arrow_l.png); float:left; left:10%; position:relative }
.btn-arrow-left:hover { background-image:url(../img/arrow_l_h.png) }
.btn-arrow-right,.btn-arrow-right:focus,.btn-arrow-right:active { background-image:url(../img/arrow_r.png); float:right; right:10%; position:relative }
.btn-arrow-right:hover { background-image:url(../img/arrow_r_h.png) }
.btn-arrow { background-color:#fff; height:100px; width:100px; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover }
.btn-arrow:hover { transform:scale(1.2,1.2) }
.content_half { width:50% }
.content_third { width:40% }
/** Languages **/
.language-select { }
/*.js-flickity { display:none }*/
/** **/




/* For debugging */
/*div { box-shadow: inset 1px 1px #000, inset -1px -1px #000 !important; }*/

#header_left { display: table-cell; vertical-align: middle; width: 80px; }
#header_left img { width: 40px; height: auto; }
#header_center { display: table-cell; vertical-align: middle; width: auto; }
#header_right { display: table-cell; vertical-align: middle; width: 80px; }
.logo { display: block; margin: 0 auto; max-width: 85%; height: auto; max-height: 76%; }

#footer { z-index:99998; position:fixed; bottom: 0; width: 100%; background: green; color: #FFF; height: 10vh; display: table; }
#footerleft { display: table-cell; vertical-align: middle; width: 50%; padding: 0 0 0 20px; }
#footerright { display: table-cell; vertical-align: middle; width: 50%; text-align: right; padding: 0 20px 0 0; }
#footerleft img { height: 8vh; width: auto; padding: 1vh 10px; display: inline-block; }

.return { padding: 0 10px 0 0; }
.gridtable { display: table; width: 100%; table-layout: fixed; }
#menu .gridtable { height: 100%; }



h2 { font-size: 3em; }
.circle-text { font-size: 2em; }
.activity_description { font-size: 2em; }
.steps, .steps li { font-size: 1.8em; }
.btn_hp { font-size: 2em; }
#footer { font-size: 1em; }

/*.slide { box-shadow: inset 0 0 20px #000; }
.circle-4 { box-shadow: inset 0 0 20px #00F; }
.circle-3 { box-shadow: inset 0 0 20px #F00; }
*/

.dropdown_link{
    cursor: pointer !important;
}