/******** FONTS ********/

@font-face {
	font-family: "source_sans_pro";
	font-style: normal;
	font-weight: 400;
	src: url(/fonts/sourcesanspro-regular.eot);
	src: url(/fonts/sourcesanspro-regular.eot?#iefix) format("embedded-opentype"), url(/fonts/sourcesanspro-regular.woff) format("woff"), url(/fonts/sourcesanspro-regular.ttf) format("truetype");
}

@font-face {
	font-family: "source_sans_pro";
	font-style: normal;
	font-weight: 600;
	src: url(/fonts/sourcesanspro-semibold.eot);
	src: url(/fonts/sourcesanspro-semibold.eot?#iefix) format("embedded-opentype"), url(/fonts/sourcesanspro-semibold.woff) format("woff"), url(/fonts/sourcesanspro-semibold.ttf) format("truetype");
}

@font-face {
	font-family: "source_sans_pro";
	font-style: normal;
	font-weight: 700;
	src: url(/fonts/sourcesanspro-bold.eot);
	src: url(/fonts/sourcesanspro-bold.eot?#iefix) format("embedded-opentype"), url(/fonts/sourcesanspro-bold.woff) format("woff"), url(/fonts/sourcesanspro-bold.ttf) format("truetype");
}

@font-face {
	font-family: "source_sans_pro";
	font-style: italic;
	font-weight: 400;
	src: url(/fonts/sourcesanspro-it.eot);
	src: url(/fonts/sourcesanspro-it.eot?#iefix) format("embedded-opentype"), url(/fonts/sourcesanspro-it.woff) format("woff"), url(/fonts/sourcesanspro-it.ttf) format("truetype");
}

@font-face {
	font-family: "source_sans_pro";
	font-style: italic;
	font-weight: 700;
	src: url(/fonts/sourcesanspro-boldit.eot);
	src: url(/fonts/sourcesanspro-boldit.eot?#iefix) format("embedded-opentype"), url(/fonts/sourcesanspro-boldit.woff) format("woff"), url(/fonts/sourcesanspro-boldit.ttf) format("truetype");
}

@font-face {
    font-family: "source_sans_pro";
    font-style: normal;
    font-weight: 800;
    src: url(/fonts/SourceSansPro-Black.ttf) format("truetype");
}

@font-face {
    font-family: "source_sans_pro";
    font-style: italic;
    font-weight: 800;
    src: url(/fonts/SourceSansPro-BlackItalic.ttf) format("truetype");
}

/******** GENERAL ********/

html { 
    font-size: 16px;
    scroll-behavior: smooth;
}

.ital { font-style:italic; }
.flt-l { float: left; }
.flt-r { float: right; }
.clr { clear: both; }
.tight { letter-spacing: -0.5px; }
.nobr { white-space: nowrap; }
br.force { display: none; }

a, area, input, button { outline: none; }

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

.group:after {
	content: "";
	display: table;
	clear: both;
}

body, p, div, h1, h2, h3, h4, h5, h6, ul, ol, li, span {
	margin: 0;
	padding: 0;
	font-family: source_sans_pro, sans-serif;
}

body {
    width:100vw;
	min-width: 375px;
    max-width:100%;
    padding-top:80px;
	margin-top: -40px;
}

img {
	display: block;
	border: 0;
}

ol ul { list-style: disc; }

.print-only { display: none; }

.reptxt {
	overflow: hidden;
	text-indent: -3000px;
}

button, .accord-top {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

button {
    display: block;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

p, li {
    font-size: 1.25rem;
    line-height: 1.6875rem;
    color: #707070;
}

#footer li, #navbar li, .subnav li {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    color: #002C49;
}

h1 {
    font-size: 3.125rem;
    line-height: 3.3125rem;
}

.btn-menu { 
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    background: #FF781D;
}

/******** TOP NAV BAR ********/

#navbar {
    width: 100%;
    height: 40px;
    background-color: #FF781D;
    position:fixed;
    top:0;
    z-index: 50;
}

#navbar > .group {
    position: relative;
    width:100%;
    margin:0 auto;
}

#navbar a.f8sprite2 {
	display: block;
	float: left;
	width: 46px;
	height: 40px;
	background-position: 10px 1px;
	background-repeat: no-repeat;
    background-size: 254px 195px;
}

#navbar.homepage a.f8sprite2 {
    background-position: -15px 1px;
    background-size: 146px 112px;
    margin-left: 5px;
}

.unitlink {
    display:block;
    float:left;
    margin-left:10px;
    font-size: 0.75rem;
    line-height: 40px;
    font-weight: 600;
    -webkit-font-smoothing: subpixel-antialiased;
    color:#fff;
    text-decoration: none;
}

.backnav {
    display:block;
    float:left;
    width:11px;
    height:19px;
    margin-top: 11px;
    margin-right: 3px;
    background-position: -374px -94px;
}

.nav-btn {
    float: right;
    width: 55px; 
    height: 40px;
}

.nav-btn.closed { background-color:#FF781D; }
.nav-btn.open { background-color:#3954AA; }

.nav-btn button {
    background-repeat: no-repeat;
    width: 55px;
    height: 40px;
    margin-left:6px;
    background-size: 100px 28px;
    touch-action: manipulation;
}

.nav-btn button.open { 
    background-position: -68px 6px;
    margin-left: 10px;
}

.nav-btn button.closed { background-position: -26px 6px; }

#menu-wrap {
    width: 280px;
    height: 320px;
    background: #3954aa;
    float: right;
    position: absolute;
    overflow: hidden;
    top: 40px;
    right: 0;
    z-index: 55;
}

#menu-wrap.es-lang { height: 340px; }
#menu-wrap.closed { display: none; }
#menu-wrap.open { display: block; }

.nav-menu {
    width: 280px;
    height: 320px;
    position: absolute;
}

.nav-menu div.f8sprite2 {
    width: 171px;
    height: 31px;
    background-position: 1px -166px;
	background-repeat: no-repeat;
    margin:20px auto;
    background-size:264px 203px;
}

.nav-menu .btn-menu {
    width: 230px;
    margin: 10px 25px;
    padding:9px 0;
    font-size: 1rem;
    line-height: 1.375rem;
    text-align: center;
    font-weight: 700;
    -webkit-font-smoothing: subpixel-antialiased;
    border-radius:12px;
    text-shadow:0 1px #0000004D;
}

.nav-menu .btn-menu:hover {
    background:#FF9D55;
}

.nav-menu .btn-menu.current {
    color: #002C49;
    background: #FEDC2F;
    cursor: default;
    text-shadow: none;
    pointer-events: none;
}

.btn.current:hover, .btn-small.current:hover {
    background: #FEDC2F;
}

.lang-btns {
    display:block;
    float:right;
    background:#fff;
    width:95px;
    height:20px;
    margin-top:8px;
    margin-right:8px;
    border-radius:6px;
    box-shadow:0 2px rgba(0,0,0,0.15);
    padding:2px;
    font-weight: 600;
    z-index: 60;
}

.lang-btns p, .lang-btns a{
    display:block;
    float:left;
    font-size: 0.5625rem;
    line-height: 1.25rem;
    width: 47px;
    text-align:center;
}

.lang-btns p.lang-act{
    background:#3B9A92;
    height: 20px;
    color:#fff;
    border-radius:4px;
}

.lang-btns a:link, .lang-btns a:visited {
    text-decoration: none;
    color:#707070;
}

.lang-btns a:hover {
    text-decoration: none;
    opacity:0.6;
}

/******** BACK TO TOP ********/

.bktop {
    width:100%;
    height:50px;
    background-repeat:repeat-x;
}

.bktop .ofs-ctr {
    width:325px;
    margin: 0 auto;
    padding-left:50px;
}

.bktop .btt-bg {
    width:198px;
    height:50px;
    background-repeat: no-repeat;
    background-position:-0px 4px;
    margin:0 auto;
}

.bktop a {
    display:block;
    width:150px;
    height:50px;
    margin:0 auto;
    padding-right:48px;
    text-decoration: none;
    text-align: center;
    font-size: 0.75rem;
}

.bktop a:link, .bktop a:visited { color:#707070; }

.bktop a:hover { opacity:0.6; }

.bktop img {
    display:block;
    padding-top:11px;
    padding-bottom:2px;
    margin-left:65px;
}

/******** FOOTER ********/

#footer {
    border-bottom: 12px solid #FF781D;
    background: #fff;
    padding:0 3%;
    margin-top:34px;
}

#footer [class*="col-"] {
    width: 100%;
}

#footer a:link, #footer a:visited {
	text-decoration: none;
	color: #3954aa;
}

#footer a:hover { text-decoration: underline; }

#footer li {
	font-size: 1.0625rem;
	line-height: 1.5rem;
    list-style:none;
    margin-bottom: 6px;
}

#footer ul {
    margin-bottom:45px;
}

#footer > .group p {
    margin: 0 10px 12px 0;
}

#footer img {
    margin-bottom:30px;
}

p.credit {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

#footer .ftrchars {
    width:121px;
    height:66px;
	clear: both;
    background-position: -0px -56px;
}

/******** ACTIVITIES AND UNITS ********/

.act-plants .bdr, 
.units #plants .unithdr, 
.units #plantas .unithdr, 
.units #plants .bdr, 
.units #plantas .bdr { 
    border-color:#6ABC35 !important;
}
.units #plants a.bdr:hover,
.units #plantas a.bdr:hover { 
    border-color:#81DD45 !important;
}
.act-ramps .bdr, 
.units #ramps .unithdr, 
.units #rampas .unithdr, 
.units #ramps .bdr, 
.units #rampas .bdr { 
    border-color:#38B2E8 !important;
}
.units #ramps a.bdr:hover,
.units #rampas a.bdr:hover { 
    border-color:#63CCFA !important;
}
.act-shadows .bdr, 
.units #shadows .unithdr, 
.units #sombras .unithdr, 
.units #shadows .bdr, 
.units #sombras .bdr { 
    border-color:#8864E2 !important;
}
.units #shadows a.bdr:hover, 
.units #sombras a.bdr:hover { 
    border-color:#9E8BEF !important;
}

.act-plants .bg,
.units #plants .bg,
.units #plantas .bg { 
    background-color:#6ABC35;
}
.units #plants a.bg:hover,
.units #plantas a.bg:hover { 
    background-color:#81DD45;
}
.act-ramps .bg,
.units #ramps .bg,
.units #rampas .bg { 
    background-color:#38B2E8;
}
.units #ramps a.bg:hover,
.units #rampas a.bg:hover { 
    background-color:#63CCFA;
}
.act-shadows .bg,
.units #shadows .bg,
.units #sombras .bg { 
    background-color:#8864E2;
}
.units #shadows a.bg:hover, 
.units #sombras a.bg:hover { 
    background-color:#9E8BEF;
}

.act-plants .txt { color:#6ABC35 !important; }
.act-ramps .txt { color:#38B2E8 !important; }
.act-shadows .txt { color:#8864E2 !important; }

.act-plants .btn-pdf { 
    background-color:#6ABC35;
    box-shadow:0 3px #387B0C;
}
.act-plants .btn-pdf:hover { 
    background-color:#81DD45;
    box-shadow:0 3px #6ABC35;
}
.act-ramps .btn-pdf {
    background-color:#38B2E8;
    box-shadow:0 3px #1672AC;
}
.act-ramps .btn-pdf:hover {
    background-color:#63CCFA;
    box-shadow:0 3px #38B2E8;
}
.act-shadows .btn-pdf {
    background-color: #8864E2;
    box-shadow:0 3px #5727C3;
}
.act-shadows .btn-pdf:hover {
    background-color:#9E8BEF; 
    box-shadow:0 3px #8864E2;
}

.activity, .units {
    width:375px;
    margin:0 auto;
}

.activity header {
    width:301px;
    height:70px;
    padding-left:74px;
    margin-bottom: 25px;
    background-repeat: no-repeat;
    overflow:hidden;
}

.act-plants header { background-position:-635px -600px; }
.act-ramps header { background-position:-635px -680px; }
.act-shadows header { background-position:-635px -760px; }

.activity h1 {
    width:226px;
    height:70px;
    font-weight: 700;
    font-size:1.125rem;
    line-height:1.25;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.activity h2 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    padding-bottom:10px;
    text-align: center;
}

.activity #content {
    width:100%;
}

.activity #desc {
    margin: 0 10px 20px 10px;
    min-height:88px;
}

.activity #desc img { 
    display:block;
    float:left;
    width: 135px;
    height: 88px;
    border-radius: 12px;
    margin-right: 12px;
}

.activity #desc p, .activity .box-view p, .activity li {
    font-size:0.75rem;
    line-height:1.0625rem;
}

.activity #desc p:first-of-type { padding-bottom: 2px; }

.activity #desc .timer {
    padding-left: 160px;
    background-repeat: no-repeat;
    background-size:10px 11px;
    background-position:147px 2px;
}

.act-plants #char-msg { background-position: -635px -0px; }
.act-ramps #char-msg { background-position: -635px -200px; }
.act-shadows #char-msg { background-position: -635px -400px; }

#char-msg {
    position:relative;
    width:375px;
    height:190px;
    margin-bottom:20px;
}

#char-msg p {
    display: flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    width: 170px;
    height: 60px;
    font-size:0.75rem;
    line-height:1rem;
}

#char-msg #msg1 {
    top:20px;
    left:100px;
}

#char-msg #msg2 {
    top:109px;
    left:118px;
}

.activity #steps, .activity .wrapup {
    margin: 0 10px 30px 10px;
}

.activity #steps b, .activity .wrapup b {
    color: #002C49;
}

.activity .box-view {
    padding:10px 15px;
    border: 2px dashed;
    border-radius: 12px;
}

.activity .box-view ul {
    margin:5px 0 0 20px;
}

#steps h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    margin:15px 0 4px 0;
}

#steps h3:first-of-type {
    margin:2px 0 4px 0;
}

#steps p.spacer, #steps p + p, #steps ul + p {
    margin-top: 9px;
}

.units #left-col { display:none; }

.units .unit_section {
    padding-top: 40px;
    margin-top: -40px;
}

.unit_section section {
    margin:0 10px;
}

.unit_section section:first-of-type {
    margin-left:0;
    margin-right:0;
}

.units .unithdr {
    width:173px;
    height:192px;
    padding-top:28px;
    margin-bottom:20px;
    text-align:center;
    border-style:solid none solid none;
    border-width:10px;
    background-repeat:no-repeat;
}

#plants .unithdr, #plantas .unithdr {
    padding-left:42px;
    padding-right:160px;
    background-position: -635px -0px;
    border-top-style:none;
}

#ramps .unithdr, #rampas .unithdr {
    padding-left:147px;
    padding-right:55px;
    background-position: -635px -230px;
}

#shadows .unithdr, #sombras .unithdr {
    padding-left:103px;
    padding-right:99px;
    background-position: -635px -460px;
}

.unit_section .ctr-col {
    height:85px;
    display:flex;
    justify-content: center;
    align-items: center; 
    flex-direction:column;
}

.unit_section .title {
    width:173px;
    height:26px;
    margin-bottom:6px;
}

.unithdr .unitic {
    display:inline-block;
    width:26px;
    height:26px;
    vertical-align:top;
}

#plants .unitic, #plantas .unitic { background-position: -426px -54px; }
#ramps .unitic, #rampas .unitic { background-position: -462px -46px; }
#shadows .unitic, #sombras .unitic { background-position: -426px -90px; }

.unithdr h2 {
    display:inline-block;
    line-height: 28px;
    font-size: 1.625rem;
}

.unithdr p {
    font-size:0.75rem;
    line-height:1.0625rem;
}

.units h3 {
    font-size:1.25rem;
    line-height:1.75rem;
    text-align:center;
    margin-bottom:13px;
}

.units .activities h3 { margin-top:24px; }
.units .activities h3:first-of-type {margin-top:17px;}

.units .box-view {
    padding:10px 15px;
    border: 2px dashed;
    border-radius: 12px;
}

.units .box-view ul {
    margin:5px 0 0 20px;
}

.units .trymore li {
    font-size:0.75rem;
    line-height:1.0625rem;
    margin-bottom:10px;
}

.units .activities .act-cont {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 18px 15px;
}
 
.units .trymore {
    margin:15px 0 30px 0;
}

.units .activities a {
    display:block;
    width:170px;
    height:130px;
    text-decoration: none;
    border: 2px solid;
    border-radius:12px;
    box-shadow: 0 2px rgba(0,0,0,0.15);
    box-sizing: border-box;
    background-clip:border-box;
    overflow:hidden;
}

.units .btn-act div {
    display:flex;
    justify-content: center;
    align-items: center; 
    width:100%;
    height:36px;
    text-align:center;
}

.units .btn-act p {
    padding: 0 8px;
    font-weight:700;
    font-size:0.75rem;
    line-height:0.9375rem;
    color:#fff;
    text-shadow: 0 1px #0000004D;
}

.units .btn-act img {
    width:170px;
    height:94px;
}

/******** ACCORDION *********/

.accord {
    display:block;
    background-color:#fff;
    border: 2px solid;
    box-shadow:0 2px rgba(0,0,0,0.15);
    border-radius: 12px;
    overflow:hidden;
    transition: max-height 1000ms;
}

.units .accord[data-state='closed'],
.activity .accord[data-state='closed'] {
    max-height:40px;
}

.activity .accord[data-state='open'] {
    max-height:850px;
}

.units .accord[data-state='open'] .caret,
.activity .accord[data-state='open'] .caret {
    transform: rotate(-180deg); 
}

.accord-top { 
    cursor: pointer;
    touch-action: manipulation;
}

.accord .caret {
    float:right;
    width:29px;
    height:16px;
    margin-top:11px;
    margin-right:15px;
    transform: rotate(0);
    transition: transform 700ms;
}

#plants .caret, #plantas .caret, .act-plants .caret { background-position:-462px -108px; }
#ramps .caret, #rampas .caret, .act-ramps .caret { background-position:-462px -82px; }
#shadows .caret, #sombras .caret, .act-shadows .caret { background-position:-335px -94px; }

.slideshow .accord-body {
    clear:both;
}


.accord h2 {
    font-size:1rem;
    line-height:1.375rem;
    text-align:left;
    margin-left:15px;
    padding-top:9px;
    padding-bottom:10px;
}

.accord hr {
  display: block;
  height: 2px;
  border: 0;
  background: url(../img/rule3.png);
  margin: 0 0 15px;
}

/******** ACCORDION MATERIALS ********/

#ready .accord {
    margin: 0 10px 20px 10px;
}

.accord h3 {
    font-size:0.75rem;
    line-height:1.0625rem;
    margin-left:15px;
    margin-bottom:5px;
}

.accord ul {
    margin:0 15px 20px 35px;
}

.accord ul li, .box-view ul li {
    margin-bottom:5px;
}

.accord ul li:last-of-type, .box-view ul li:last-of-type {
    margin-bottom:0;
}

.accord .btn-pdf {
    display: block;
    width: 190px;
    padding:10px 0 10px 14px;
    margin-left:15px;
    margin-bottom:20px;
    color: #fff;
    font-size: 1rem;
    line-height: 1.5625rem;
    font-weight: 800;
    text-decoration: none;
    text-align:left;
    border-radius: 12px;
    text-shadow: 0 1px #0000004D;
}

.accord .btn-pdf .menu-sprite {
    width: 24px;
    height: 23px;
    float: right;
    margin: 2px 14px 0 0;
    background-size: 86px 24px;
    background-position: 0 -1px;
}

.accord .btn-app {
    display:block;
    width:149px;
    height:44px;
    margin-left:15px;
    margin-bottom:20px;
    background-image: url(../img/appstore_badge.png);
    background-size:149px 44px;
}

/******** ACCORDION SLIDESHOW ********/

.units .accord[data-state='open'] {
    height:360px;
    max-height:360px;
}

.units .accord[data-state="open"].overfl {
    height: 380px;
    max-height: 380px;
}

.slideshow .info {
    float:left;
    width:13px;
    height:13px;
    margin-top:13px;
    margin-right:6px;
    margin-left:15px;
    background-position:-284px -110px;
}

.activ-slides > div {
    position:relative;
    width:351px;
    height:302px;
    overflow:hidden;
	background: #fff;
}

.activ-slides > div.overfl {
    height:322px;
}

.activ-slides img {
	position: absolute;
    width: 100%;
    max-width: 351px;
}

#pl_slide, #rp_slide, #sh_slide {
	top: 0;
	left: 0;
}

#pl_slide-move, #rp_slide-move, #sh_slide-move {
	top: 0;
	left: 100%;
	visibility: hidden;
}

#pl_btn-nxt-slide, #pl_btn-prv-slide,
#rp_btn-nxt-slide, #rp_btn-prv-slide,
#sh_btn-nxt-slide, #sh_btn-prv-slide {
	position: absolute;
	top: 37%;
	width: 28px;
	height: 28px;
    background-position: -388px -54px;
}

#pl_btn-nxt-slide,
#rp_btn-nxt-slide,
#sh_btn-nxt-slide {
    right: 4px; 
}

#pl_btn-prv-slide,
#rp_btn-prv-slide,
#sh_btn-prv-slide {
	display: none;
	left: 4px;
	transform: rotate(180deg);
}

#pl_capt-wrap,
#rp_capt-wrap,
#sh_capt-wrap {
	position: absolute;
	width: 100%;   
	top: 262px;
	height: 0;
}

#pl_capt-wrap p,
#rp_capt-wrap p,
#sh_capt-wrap p {
	position: absolute;
	top: 0;
	width: 96%;
	padding: 3px 2%;
	margin: 0;
    font-size:0.75rem;
	line-height: 1.0625rem;
	color: #002C49;
}

#pl_capt-move,
#rp_capt-move,
#sh_capt-move {
	left: 100%;
	visibility: hidden;
}

/**** CSS ANIMATION ****/

.slide_out_left {
    animation-duration:500ms;
    animation-name:slide_out_left;
    animation-fill-mode: forwards;
}

.slide_in_left {
    animation-duration:500ms;
    animation-name:slide_in_left;
    animation-fill-mode: forwards;
}

.slide_out_right {
    animation-duration:500ms;
    animation-name:slide_out_right;
    animation-fill-mode: forwards;
}

.slide_in_right {
    animation-duration:500ms;
    animation-name:slide_in_right;
    animation-fill-mode: forwards;
}

@keyframes slide_out_left {
    from { left:0%; }
    to { left:-100%; }
}

@keyframes slide_in_left {
    from { left:100%; }
    to { left:0%; }
}

@keyframes slide_out_right {
    from { left:0%; }
    to { left:100%; }
}

@keyframes slide_in_right {
    from { left:-100%; }
    to { left:0%; }
}

/******** BACKGROUND IMAGE / ICONS DISPLAY ********/

.bktop { background-size: 100px 100px; }
.act-sprite { background-size: 1010px 1628px; }
.unit-sprite { background-size: 1010px 680px; }
.icons-sprite { background-size: 492px 124px;}
.menu-sprite { background-size: 122px 34px; }

@media (-webkit-max-device-pixel-ratio: 1.99), (max-resolution: 191dpi) {
	.f8sprite2 { background-image: url(../img/f8_sprites2.png); }
    .bktop { background-image: url(../img/bg_pattern_orange.png); }
    .timer { background-image: url(../img/icon_timer_large.png); }
    .act-sprite { background-image: url(../img/ngps_fg_activity_img.png); }
    .unit-sprite { background-image: url(../img/ngps_fg_units_img.png); }
    .icons-sprite { background-image: url(../img/ngps_fg_general_img.png); }
    .menu-sprite { background-image: url(../img/ngps_fg_icons_img.png); }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.f8sprite2 { background-image: url(../img/f8_sprites2_2x.png); }
    .bktop { background-image: url(../img/bg_pattern_orange@2x.png); }
    .timer { background-image: url(../img/icon_timer_large@2x.png); }
    .act-sprite { background-image: url(../img/ngps_fg_activity_img@2x.png); }
    .unit-sprite { background-image: url(../img/ngps_fg_units_img@2x.png); }
    .icons-sprite { background-image: url(../img/ngps_fg_general_img@2x.png); }
    .menu-sprite { background-image: url(../img/ngps_fg_icons_img@2x.png); }
}

/******** BREAKPOINTS ********/

@media only screen and (min-width: 768px) {
 
    body { 
        padding-top:120px;
        margin-top: -60px;
    }
    
    #navbar { height: 60px; }

    #navbar > .group { 
        width:100%;
        max-width:796px;
        height:60px;
    }

    #navbar a.f8sprite2 {
        width: 56px;
        height: 60px;
        background-position: 12px 6px;
        background-size: 318px 244px;
    }

    #navbar.homepage a.f8sprite2 {
        background-position: -27px 1px;
        background-size: 216px 166px;
        margin-left: 14px;
    }

    #navbar.homepage a.f8sprite2 {
        background-position: -27px 1px;
        background-size: 216px 166px;
        margin-left: 9px;
    }

    .unitlink {
        font-size: 1.2rem;
        line-height: 60px;
    }
    
    .backnav {
        margin-top: 20px;
        margin-right: 9px;
    }

    .nav-btn {
        width: 69px; 
        height: 60px;
    }

    .nav-btn button {
        width: 57px;
        height: 60px;
        background-size: 122px 34px;
    }

    .nav-btn button.closed { background-position: -32px 13px; }
    .nav-btn button.open { background-position: -81px 13px; }

    #menu-wrap { top: 60px; }
        
    .lang-btns {
        width:143px;
        height:28px;
        margin-top:12px;
        margin-right:12px;
        padding:3px;
    }
    
    .lang-btns p, .lang-btns a {
        font-size: 0.875rem;
        line-height: 1.75rem;
        width: 70px;
    }
    
    .lang-btns p.lang-act{
        height: 28px;
    }

    #footer {
        padding:0;
        margin-top:0;
    }

    #footer > .group {
        max-width: 1024px;
        margin: 43px auto 0;
    }

    #footer .col-4 { width: 30.93333333332%; }

    #footer [class*="col-"] {
        margin: 1.2%;
        float: left;
    }

    #footer .col-8 { width: 64.26666666664%; }
    #footer ul { margin-left: 10px; }   
    #footer img { margin-bottom:24px; }
    #footer .ftrchars { margin-left: 17px; }

    .activity {  width:768px; }
    
    .activity header {
        width:659px;
        height:100px;
        padding-left:109px;
    }

    .act-plants header { background-position:-0px -1308px; }
    .act-ramps header { background-position:-0px -1418px; }              
    .act-shadows header { background-position:-0px -1528px; }
    
    .activity h1 {
        font-size:1.75rem;
        line-height:2.125rem;
        width:550px;
        height:100px;
    }

    .activity h2 {
        font-size: 1.5rem;
        line-height: 2.1875rem;
        padding-bottom:13px;
    }
        
    .activity #content {
        width:625px;
        margin:0 auto;
    }
    
    .activity #desc {
        margin: 0 0 20px 0;
        min-height:160px;
    }
    
    .activity #desc img { 
        width: 245px;
        height: 160px;
        margin-right: 25px;
        border-radius: 12px;
    }
   
    .activity #desc p, .activity .box-view p, .activity li {
        font-size:1rem;
        line-height:1.375rem;       
    }
    
    .activity #desc p:first-of-type { padding-bottom: 6px; }
    
    .activity #desc .timer {
        padding-left: 287px;
        background-size:14px 16px;
        background-position:270px 2px;
    }
    
    #ready .accord { margin: 0 0 20px 0; }
       
    .accord {
        margin: 0 0 20px 0;
        width:621px;
    }

    .accord h2 {
        font-size:1.25rem;
        line-height:1.375rem;
        margin-left:15px;
    }
      
    .accord h3 {
        font-size:1rem;
        line-height:1.375rem;
        margin-bottom:9px;
    }
    
    .accord ul li, .box-view ul li {
        margin-bottom:9px;
    }

    .activity .box-view ul {
        margin:9px 0 0 20px;
    }

    .act-plants #char-msg { background-position: -0px -0px; }
    .act-ramps #char-msg { background-position: -0px -326px; }
    .act-shadows #char-msg { background-position: -0px -652px; }
    
    #char-msg {
        width:625px;
        height:316px;
    }
    
    #char-msg p {
        width: 268px;
        height: 80px;
        font-size:1.25rem;
        line-height:1.6rem;
    }
   
    #char-msg #msg1 {
        top:40px;
        left:180px;
    }
    
    #char-msg #msg2 {
        top:190px;
        left:212px;
    }

    .activity #steps {
        margin: 0 0 20px 0;
        width:100%;
    }

    .activity .wrapup {
        margin: 0 auto 30px auto;
        width:84%;
    }

    #steps h3 {
        font-size: 1.5rem;
        line-height: 2rem;
        margin: 17px 0 6px 0;
    }

    #steps h3:first-of-type {
        margin:4px 0 6px 0;
    }
 
    .units {  width:625px; }

    .units .unit_section {
        padding-top: 60px;
        margin-top: -60px;
    }

    .unit_section section {
        margin:0 0;
    }
    
    .units .unithdr { 
        width:225px;
        margin-bottom:30px;
    }

    #plants .unithdr, #plantas .unithdr, #ramps .unithdr, #rampas .unithdr, #shadows .unithdr, #sombras .unithdr {
        padding-left:200px;
        padding-right:200px;
    }

    #plants .unithdr, #plantas .unithdr { background-position: -0px -0px; }
    #ramps .unithdr, #rampas .unithdr { background-position: -0px -230px; }
    #shadows .unithdr, #sombras .unithdr { background-position: -0px -460px; }

    .unit_section .ctr-col { height:125px; }    

    .unit_section .title {
        width:225px;
        height:30px;
    }

    .unithdr .unitic {
        width:30px;
        height:30px;
    }

    #plants .unitic, #plantas .unitic { background-position: -255px -70px; }
    #ramps .unitic, #rampas .unitic { background-position: -295px -70px; }
    #shadows .unitic, #sombras .unitic { background-position: -348px -54px; }

    .unithdr h2 {
        line-height: 32px;
        font-size: 1.625rem;
    }

   .unithdr p {
        font-size:1rem;
        line-height:1.375rem;
    }

    .units h3 {
        font-size:1.5rem;
        line-height:2.1875rem;
        margin-bottom:16px;
    }

    .units .activities h3 { margin-top:28px; }
    .units .activities h3:first-of-type {margin-top:29px;}

    .units .trymore {
        margin:22px 60px 35px 60px;
    }

    .units .trymore li {
        font-size:1rem;
        line-height:1.25rem;
        margin-bottom:14px;
    }
    
    .units .box-view ul {
        margin:9px 0 0 20px;
    }

    .units .activities .act-cont {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 24px 20px;
    }
    
    .units .activities a {
        width:195px;
        height:161px;
    }
    
    .units .btn-act div { height:53px; }
    
    .units .btn-act p {
        font-size:1rem;
        line-height:1.25rem;
    }
    
    .units .btn-act img {
        width:195px;
        height:108px;
    }

    .units .accord[data-state='open'] {
        height:582px;
        max-height:582px;
    }

    .units .accord[data-state="open"].overfl {
        height:582px;
        max-height:582px;
    }
        
    .slideshow .accord { margin: 0; }
    
    .slideshow .info {
        width:17px;
        height:17px;
        margin-top:11px;
        background-position:-395px -92px;
    }

    .activ-slides > div {
        position:relative;
        width:621px;
        height:582px;
    }

    .activ-slides > div.overfl {
        height:582px;
    }
    
    .activ-slides img {
        max-width: 621px;
    }
    
    #pl_btn-nxt-slide, #pl_btn-prv-slide,
    #rp_btn-nxt-slide, #rp_btn-prv-slide,
    #sh_btn-nxt-slide, #sh_btn-prv-slide {
        width: 36px;
        height: 36px;
        background-position: -456px -0px;
    }
    
    #pl_btn-nxt-slide,
    #rp_btn-nxt-slide,
    #sh_btn-nxt-slide {
        right: 8px; 
    }
    
    #pl_btn-prv-slide,
    #rp_btn-prv-slide,
    #sh_btn-prv-slide {
        left: 8px;
    }
    
    #pl_capt-wrap,
    #rp_capt-wrap,
    #sh_capt-wrap {
        top: 464px;
        padding-bottom: 60px;
    }
    
    #pl_capt-wrap p,
    #rp_capt-wrap p,
    #sh_capt-wrap p {
        padding: 9px 2%;
        font-size:1rem;
        line-height: 1.375rem;
    }    
    
}

@media only screen and (min-width: 1366px) {

    #navbar > .group { 
        max-width: none;
        width:1026px; 
    }

    #footer { padding:0 13%; }
    
    .activity, .units { width:1000px; }
    
    .activity header { 
        width:776px;
        padding-left:224px;
    }

    .act-plants header { background-position:-0px -978px; }
    .act-ramps header { background-position:-0px -1088px; }       
    .act-shadows header { background-position:-0px -1198px; }

    .activity h1 {
        width:550px;
        height:100px;
    }    

    .activity #content {
        width:100%;
        margin:0;
        overflow: hidden;
    }

    #left-col {
        float:left;
        width: 355px;
        margin-right:20px;
    }

    .activity .accord[data-state='open'] {
        max-height:1200px;
    } 

    .activity #right-col {
        float:right;
        width: 625px;
        display: flex; 
        flex-flow: column;
    }

    .units #right-col {
        width: 625px;
        overflow:hidden;
    }

    #char-msg { order: 2; }
    #steps { order: 1; }
    #review { order: 3; }
    #tips { order: 4; }

    .activity #desc {
        min-height:231px;
        width:355px;
    }
    
    .activity #desc img { 
        width: 355px;
        height: 231px;
        margin-right: 0;
        margin-bottom: 8px;
        border-radius: 12px;
        float:none;
    }

    .activity #desc .timer {
        padding-left: 17px;
        background-position:0px 2px;
    }
 
    #left-col .accord { width:349px; }
    .accord-top { cursor: default; }

    .units #left-col {  display:block; }
    .units #right-col { margin-left: 375px; }

    #unit-toc {
        position:fixed;
        top:80px;
        z-index:40;
    }

    .units .accord {
        border: 2px solid;
        box-shadow: none;
        border-color: #FF781D;
    }

    .units .accord li {
        font-size:1rem;
        line-height:1.375rem;
        color:#707070;
    }

    .units .accord a, .units .accord a:visited {
        text-decoration:none;
        color:#707070;
    }

    .units .accord a:hover, .units .accord a:active {
        text-decoration:underline;
    }

    .toc-tgt {
        padding-top: 86px !important;
        margin-top: -58px !important;
    }

    .units .trymore { margin: 0 60px 35px 60px; }

    .ftr-view { 
        position:relative;
        background-color:#fff;
        z-index:45;
    }

    .accord h2.toc-hdr {
        padding-top:20px;
        padding-bottom:10px;
    }

}

@media only screen and (min-width: 1920px) {

    #footer { padding:0 24%; }

}