﻿/* ----------------------------------------------------------------

    RB Marketing Stylesheet v4.0 (Feb 2025)

        00. Reset
        01. Globals
        02. Typography
        03. Page
        04. Block
        05. List
        06. Form
        07. Article

        Colors
            Blue            #0B164A
            Dark Blue       #03063D
            Orange          #FDAB22
            Green           #3ABC2E

---------------------------------------------------------------- *>

/* 00. Reset
------------------------------------------------------------------------------------------------------------------------------------- */

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del,
    dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
    tbody, tfoot, thead, tr, th, td, figure, figure img, figcaption { margin: 0; padding: 0; border: 0; }
    article, aside, figure, figure img, figcaption, hgroup, footer, header, nav, section, video, object { display: block; }
    a img { border: 0; }
    figure { position: relative; }
    figure img { width: 100%; }
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    html, body { -webkit-text-size-adjust: none; }
    li { list-style: none; }
    video::-internal-media-controls-download-button { display: none !important; }


/* 01. Globals
------------------------------------------------------------------------------------------------------------------------------------- */

    body { background-color: #00023D; }
    h1, h2, h3, h4, h5, p, a, span, div { color: #fff; }

    .reader { /* -- HIDES TEXT FROM VIEW BUT SCREENREADER ACCESSIBLE -- */
        height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; 
        white-space: nowrap; border: 0; clip: rect(0 0 0 0); clip-path: polygon(0px 0px, 0px 0px, 0px 0px); -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); 
        }

    .logo { display: block; margin: 13px 0 0 15px;  }
    .logo img { display: block; width: 200px; }
    .page--footer .logo img { width: 40px; margin-bottom: 10px; }

    .gnav { display: flex; flex-flow: row; justify-content: space-between; background-color: #0B164A; position: fixed; z-index: 10; width: 100%; height: 70px; }
    /*.gnav--list { display: none; }*/
    .gnav--list a { color: #fff; }
    .gnav--list .cta { color: #0B164A; }
    .gnav--list.gnav--list--mobile { display: none; }

    .cta { display: inline-block; background-color: #FDAB22; color: #03063D; padding: 10px 20px; border: 0 none; }
    .cta.cta--blue { background-color: #03063D; color: #fff; }
    .cta[type="submit"] { display: block; }

    .content--highlight { background-color: #03063D; border-radius: 15px; /*padding: 40px;*/ overflow: hidden; }
    .content--highlight img { width: 100% !important; }
    .content--highlight .content { padding: 40px; margin: 0 !important; }
    .content--highlight .content p { margin: 0; padding: 10px 0 0 0; }
    .content--highlight h3 { padding: 0; }
    .content--highlight p { padding-bottom: 10px; }
    .content--highlight a { display: block; padding-top: 15px; }
        
        @media only screen and (min-width: 37.50em) { /* ~600px */
            .cta { border-radius: 5px; }
            .logo { margin: 0;  }
            .gnav {  align-items: center; padding: 15px 200px 15px 200px; }
            }

        @media only screen and (min-width: 78.125em) { /* ~1250px */
            
            .gnav--list { display: flex; flex-flow: row; align-items: center; justify-content: space-between; justify-items: right; gap: 25px; }
            }


/* 02. Typography
------------------------------------------------------------------------------------------------------------------------------------- */
    
    body, textarea, .textarea, input, select, button { 
        position: relative; 
        font-family: "Open Sans", sans-serif; 
        font-weight: 400; /* 300 - 800 */ 
        font-size: 18px; 
        font-optical-sizing: auto;
        font-variation-settings: "wdth" 100;
        text-rendering: optimizeLegibility; 
        }

    h1, h2, h3, h4, h5, h6 {
        font-family: "Oxygen", sans-serif;
        font-weight: 700; /* 300, 400, 700 */
        font-style: normal;
        }

    a { text-decoration: none; color: #EEAE00; }
    a.emphasis { font-weight: bold; }
    p { line-height: 1.9rem; }
    .gnav { font-size: 0.95rem; }

    h1 { font-size: 2.8rem; line-height: 3.2rem; padding-bottom: 25px; }
    h2 { padding-bottom: 20px; }
    h3, h4 { padding-bottom: 10px; }

    .kicker { display: block; font-size: .9rem; text-transform: uppercase; color: #FDAB22; }
    
    .meta { font-size: 0.8rem; }

        @media only screen and (min-width: 37.50em) { /* ~600px */
            h1 { font-size: 3.4rem; line-height: 3.3rem; }
            h2 { font-size: 2.4rem; line-height: 2.5rem; }
            .contact h3 { font-size: 2.4rem; line-height: 2.5rem; }
            h3 { font-size: 1.8rem; }
            h4 { font-size: 1.2rem; }
            .icn { font-size: 3rem; }
            .center { text-align: left; }
            }


    /* Mobile Menu Controls
    -------------------------------------------- */

	    .menu-button {
		    width: 60px; height: 70px; display: block; position: fixed; right: 20px; top: 0; z-index: 100; font-size: 22px; line-height: 65px; text-align: center; color: #fff; cursor: pointer;
		    -o-transition: all .3s linear; -moz-transition: all .3s linear; -khtml-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear;
		    }
	
	    .menu {
		    position: fixed; top: 0; right: -250px; z-index: 90; width: 250px; height: 100vh; padding-top: 60px; box-shadow: -3px 1px 12px rgba(0,0,0,.2);
		    -o-transition: all .1s linear; -moz-transition: all .1s linear; -khtml-transition: all .1s linear; -webkit-transition: all .1s linear; -ms-transition: all .1s linear; transition: all .1s linear;
		    background: #0B164A;
		    }
		
	    .menu.open { right: 0; }
	
	    .closify span {
		    display: inline-block; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); vertical-align: middle;
		    -o-transition: all .1s linear; -moz-transition: all .1s linear; -khtml-transition: all .1s linear; -webkit-transition: all .1s linear; -ms-transition: all .1s linear; transition: all .1s linear;
		    }

	    .closify span:first-of-type { opacity: 1; }
	    .closify .fa-times { position: absolute; top: 12px; left: 21px; opacity: 0; transform: rotate(-135deg); -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); margin-top: 4px; }
	    .closify.open span:first-of-type { opacity: 0; transform: rotate(135deg); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); }
	    .closify.open .fa-times { opacity: 1; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); }
	
    /* Mobile Panel Layout
    -------------------------------------------- */

	    .menu li { border-top: 1px solid rgba(255,255,255,.2); }
	    .menu li > ul > li a { padding-left: 35px; }
	    .menu li > ul > li:last-of-type { border-bottom: 0 none; }
	    .menu li:last-of-type { border-bottom: 1px solid rgba(255,255,255,.2); }
	    .menu li > a { display: block; width: 100%; padding: 15px 20px; }
	
            @media only screen and (min-width: 37.50em) { /* ~600px */
	            
	            }
	
            @media only screen and (min-width: 56.25em) { /* ~900px */
	            /*header { position: absolute; background: none; padding: 40px 30px; }
	            header > div { max-width: 1200px; margin: 0 auto; }*/
	            .menu-button { display: none; }
	
	            .menu { display: inline; position: static; width: auto; height: auto; padding: 0; background-color: transparent; align-items: flex-end; box-shadow: none; }
	            .menu > li { display: inline-block; margin-left: 25px; border: 0; }
	            .menu > li > a { display: block; padding: 0; }
	            .menu a { display: inline-block; width: 100%;  }
	            .menu > li:nth-of-type(2) > a { display: block; padding: 0 0 0 5px; }
	            .menu > li > .cta { padding: 10px 20px; }
	            .menu li:last-of-type { border: 0 none; }
                }


/* 03. Page
------------------------------------------------------------------------------------------------------------------------------------- */

    .page--header > div,
    .block > div,
    .page--footer { margin: 0 auto; width: 80%; max-width: 900px; }
    .page--footer { padding: 120px 0; }
    .page--footer .logo { margin-bottom: 15px; }

    

    body.index { background: #00023D url("../img/bg-hero-2025-home.jpg") no-repeat top center; background-size:  350%; /* background-attachment: fixed; */ }
    body.students { background: #00023D url("../img/bg-hero-2025-student.jpg") no-repeat top center; background-size: 350%; /* background-attachment: fixed; */ }
    body.testing { background: #00023D url("../img/bg-hero-2025-testing.jpg") no-repeat top center; background-size: 350%; /* background-attachment: fixed; */ }
    body.testingfeatures .page--header,
    body.story .page--header,
    body.terms .page--header,
    body.privacy .page--header,
    body.compliance .page--header,
    body.accessibility .page--header,
    body.sms .page--header,
    body.support .page--header { background: #00023D url("../img/bg-hero-2025-contact.jpg") no-repeat top center; background-size: cover; /* background-attachment: fixed; */ }
    body.studentsfeatures .page--header { background: #00023D url("../img/bg-hero-2025-contact-green.jpg") no-repeat top center; background-size: cover; /* background-attachment: fixed; */ }
    
    body.story .page--header { background-color: #FDAB22; }
    body.story .page--header h1,
    body.story .page--header p,
    body.testingfeatures .page--header h1,
    body.testingfeatures .page--header p,
    body.testingfeatures .page--header .kicker,
    body.green.studentsfeatures .page--header h1,
    body.green.studentsfeatures .page--header .kicker { color: #0B164A; } 

    body.terms .header .kicker,
    body.terms .header h1,
    body.privacy .header .kicker,
    body.privacy .header h1,
    body.compliance .header .kicker,
    body.compliance .header h1,
    body.accessibility .header .kicker,
    body.accessibility .header h1,
    body.sms .header .kicker,
    body.sms .header h1,
    body.support .header .kicker,
    body.support .header h1 { color: #0B164A; }

    body.terms .block > div,
    body.privacy .block > div,
    body.compliance .block > div,
    body.accessibility .block > div,
    body.sms .block > div,
    body.support .block > div { align-items: normal; }

    body.green .kicker,
    body.green a { color: #069A61; }
    body.green .gnav--list a { color: #fff; }
    body.green .cta { background-color: #069A61; color: #fff !important; }
    body.green .block--contact { background: transparent url("../img/bg-hero-2025-contact-green.jpg") no-repeat bottom center; background-size: cover; /* background-attachment: fixed; */ }
    body.green .block--contact .cta { background-color: #0B164A; }
   
    .header { padding: 150px 0 100px; }

    article h3,
    article h4,
    article h5 { margin-top: 60px; }

    .article-page .block--list { margin-bottom: 40px; }
    
        @media only screen and (min-width: 37.50em) { /* ~600px */


            body.index { background: #00023D url("../img/bg-hero-2025-home.jpg") no-repeat top center; background-size: contain; /* background-attachment: fixed; */ }
            body.students { background: #00023D url("../img/bg-hero-2025-student.jpg") no-repeat top center; background-size: contain; /* background-attachment: fixed; */ }
            body.testing { background: #00023D url("../img/bg-hero-2025-testing.jpg") no-repeat top center; background-size: contain; /* background-attachment: fixed; */ }
            body.testingfeatures .page--header,
            body.story .page--header,
            body.terms .page--header,
            body.privacy .page--header,
            body.compliance .page--header,
            body.accessibility .page--header,
            body.sms .page--header,
            body.support .page--header {
                background: #00023D url("../img/bg-hero-2025-contact.jpg") no-repeat top center;
                background-size: cover; /* background-attachment: fixed; */
            }
            body.studentsfeatures .page--header { background: #00023D url("../img/bg-hero-2025-contact-green.jpg") no-repeat top center; background-size: cover; /* background-attachment: fixed; */ }
            body.green .block--contact { background: transparent url("../img/bg-hero-2025-contact-green.jpg") no-repeat center; background-size: cover; /* background-attachment: fixed; */ }

            .page--header { /*padding-top: 60px; margin-bottom: 100px;*/ }
            .page--footer { display: flex; flex-flow: row; justify-content: space-between; }
            .page--footer .copyright { width: 170px; margin-left: 50px; }

            .article-page > div { width: 70%; }
            
            }
            
        @media only screen and (min-width: 56.25em) { /* ~900px */
            .page--header { padding-top: 70px; }
            .header { padding: 150px 0 150px; }
            }


/* 04. Blocks
------------------------------------------------------------------------------------------------------------------------------------- */

    .block { padding: 30px 0; overflow: hidden; }
    .block .content {margin-bottom: 50px;  }
    .block .content:last-of-type { /* margin: 0; */ }
    .block .content img { width: 100%; max-height: 425px; }
    
    .content--bgorange {background-color: rgba(253,171,34,.9); border-radius: 10px; padding: 30px 25px; }
    .content--bgorange h1, 
    .content--bgorange p { color: #03063D; }
    .content.content--bgorange p,
    .content.content--bgblue p,
    .content.content--bggreen p { margin: 0; }
    .content--bggreen { background-color: rgba(15,254,42,.8); border-radius: 10px; padding: 30px 25px; }
    .content--bggreen h1, 
    .content--bggreen p,
    .content--bggreen .kicker { color: #03063D; }
    .content--bgblue { background-color: rgb(11,  22, 74, .8); border-radius: 10px; padding: 30px 25px; }
    .block--lightblue { background-color: #0B164A; }

    .block--contact { background: transparent url("../img/bg-hero-2025-contact.jpg") no-repeat center; background-size: cover; /* background-attachment: fixed; */ padding: 150px 0; }
    .block--contact .cta { font-size: 18px; }
    .block--contact a { color: #0B164A !important; }
    .block--contact h3 { padding-bottom: 20px; color: #03063D; }
    .block--contact p,
    .block--contact span { color: #03063D; }

    .block--pad { padding: 125px 0;  }
    .block--pad--thin { padding: 25px 0; }
    .block--pad--bottom { padding-bottom: 125px; }   
    .block--pad--top { padding-top: 125px; }

    .content p { margin-bottom: 25px; }

    .block--equal--width .content { margin-bottom: 100px; }

        @media only screen and (min-width: 37.50em) { /* ~600px */
            .block { overflow: visible; padding: 75px 0; }
            .block .content { margin-bottom: 50px; }
            .block .content > img { width: 375px; max-height: 425px; margin-bottom: 0; }
            .content--halfwidth { width: 55%; }
            .block > div { display: flex; flex-flow: row; align-items: center; gap: 80px; }
            .block--alignstart > div { align-items: normal; }
            .block--fullwidth > div { display: block; width: 100%; }
            .block .content { margin: 0; }
            .block--fullwidth .content { margin-bottom: 50px; }
            .block--contact > div { align-items: start; }

            .block--media--left,
            .block--media--right { position: relative; padding: 100px 0; }

            .block--media--left .content,
            .block--media--right .content { max-width: 50%; }

            .block--media--left { justify-content: right; }
            .block--media--left .content img { position: absolute; left: 0; top: -100px; }

            .block--media--right { justify-content: left; }
            .block--media--right .content img { position: absolute; right: 0; top: -100px; }

            .block--equal--width > div { gap: 5%; align-items: normal; justify-content: space-between; } 
            .block--equal--width > div > .content { width: 45%; }
            .block--equal--width .content > img { margin-bottom: 30px; max-height: 335px; }
            }
            
        @media only screen and (min-width: 56.25em) { /* ~900px */
            }


/* 05. List
------------------------------------------------------------------------------------------------------------------------------------- */

    .links { margin-bottom: 35px; }
    .links--list > li { padding-bottom: 5px; }

    .bullet--list { padding-left: 30px; }
    .bullet--list > li { list-style: disc; }

    .content--list > li { margin-bottom: 30px; }
    .block .content--list .content--highlight { margin-bottom: 0; height:100%; }

    .content--highlight .content > h3 { margin-bottom: 5px; }
    .content--highlight .content > p { margin-bottom: 15px; }

        @media only screen and (min-width: 37.50em) { /* ~600px */
           .content--list { display: flex; flex-flow: row; flex-wrap: wrap; justify-content: space-between; 25px; margin: 0 auto; }
           .content--list > li { width: 48%; }
            }

/* 06. Form
------------------------------------------------------------------------------------------------------------------------------------- */

    [type="text"], [type="email"], textarea { width: 100%; max-width: 325px; padding: 15px; border: none; margin-bottom: 15px; border-radius: 5px; }
    textarea { height: 125px; max-width: 375px; }


/* 07. Article
------------------------------------------------------------------------------------------------------------------------------------- */

    .article { margin-bottom: 80px; }