/* =========================================================
   CSS MOBILE
   Mobile-specific overrides only.
   css_default.php is loaded before this file.
   ========================================================= */


/* =========================================================
   01. DIRECTION / RTL SUPPORT
   ========================================================= */

body {
    direction:inherit;
    text-align:start;
}

body,
div,
td,
th,
li {
    text-align:start;
}

.ltr {
    direction:ltr;
    unicode-bidi:isolate;
    text-align:left;
}

.ltr-inline {
    direction:ltr;
    unicode-bidi:isolate;
}

.bidi-isolate {
    unicode-bidi:isolate;
}

.bidi-ltr {
    direction:ltr;
    unicode-bidi:isolate;
}

.bidi-rtl {
    direction:rtl;
    unicode-bidi:isolate;
}


/* =========================================================
   02. TYPOGRAPHY
   ========================================================= */

p {
    margin:0 0 5px;
}

p.short_text {
    font-weight:500;
    margin:2px 0 40px;
}

h1 {
    font-size:26px;
    font-weight:100;
    line-height:1.3;
}

h2 {
    font-size:24px;
    font-weight:500;
    line-height:24px;
}

h3 {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:16px;
}

h4 {
    font-weight:bold;
}

h5 {
    font-weight:600;
    line-height:22px;
}


/* =========================================================
   03. MOBILE NAVIGATION
   ========================================================= */

nav,
nav ul,
nav li,
nav input,
nav label,
nav a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}

@font-face {
    font-family:'FontAwesome';
    src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?v=4.4.0');
    src:url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
        url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
        url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
        url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
        url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

.fa {
    display:inline-block;
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.fa-angle-right:before {
    content:"\f105";
}

a {
    text-decoration:none;
}

nav a:hover {
    font-weight:normal;
}

[hidden] {
    display:none;
    visibility:hidden;
}

.nav a,
.nav label {
    display:block;
    padding:.85rem;
    color:#fff;
    background-color:#082C50;
    box-shadow:inset 0 -1px #1d1d1d;
    -webkit-transition:all .025s ease-in;
    transition:all .025s ease-in;
}

.nav a:focus,
.nav a:hover,
.nav label:focus,
.nav label:hover {
    color:rgba(255,255,255,.5);
    background:#605D5C;
}

.nav label {
    cursor:pointer;
}

.group-list a,
.group-list label {
    padding-left:2rem;
    background:#082C50;
    box-shadow:inset 0 -1px #373737;
}

.group-list a:focus,
.group-list a:hover,
.group-list label:focus,
.group-list label:hover {
    background:#605D5C;
}

.sub-group-list a,
.sub-group-list label {
    padding-left:4rem;
    background:#353535;
    box-shadow:inset 0 -1px #474747;
}

.sub-group-list a:focus,
.sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
    background:#232323;
}

.sub-sub-group-list a,
.sub-sub-group-list label {
    padding-left:6rem;
    background:#454545;
    box-shadow:inset 0 -1px #575757;
}

.sub-sub-group-list a:focus,
.sub-sub-group-list a:hover,
.sub-sub-group-list label:focus,
.sub-sub-group-list label:hover {
    background:#333333;
}

.group-list,
.sub-group-list,
.sub-sub-group-list {
    height:100%;
    max-height:0;
    overflow:hidden;
    -webkit-transition:max-height .05s ease-in-out;
    transition:max-height .05s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul {
    max-height:1000px;
}

label > span {
    float:right;
    -webkit-transition:-webkit-transform .065s ease;
    transition:-webkit-transform .065s ease;
    transition:transform .065s ease;
    transition:transform .065s ease,-webkit-transform .065s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}

footer {
    padding-top:1rem;
    padding-bottom:1rem;
    background-color:#050505;
}

.soc-media {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
}

.soc-media li:nth-child(n+2) {
    margin-left:1rem;
}

.soc-media a {
    font-size:1.25rem;
    color:rgba(255,255,255,.65);
    -webkit-transition:color .025s ease-in;
    transition:color .025s ease-in;
}

.soc-media a:focus,
.soc-media a:hover {
    color:rgba(255,255,255,.2);
}

nav * {
    box-sizing:border-box;
}

html,
body {
    min-height:100%;
    overflow-x:clip;
}

.main-header {
    padding-top:0;
    text-align:center;
    width:100%;
}

.main-header .toggle-menu {
    margin:-10px 10px 0 5px;
    color:#ffffff;
    font-size:40px;
    cursor:pointer;
    float:inline-start;
}

.page-wrap {
    overflow-x:clip;
    position:relative;
    width:100%;
    transition:all .03s ease;
}

.main-nav-check {
    display:none;
}

.nav {
    position:fixed;
    top:0;
    width:0;
    height:100%;
    background:#ffffff;
    word-wrap:normal;
    transition:width .03s ease;
    overflow-y:auto;
}

.nav:after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    height:100%;
    width:34px;
}

#main-nav-check:checked + #site-nav {
    width:100%;
}

#main-nav-check:checked ~ .page-wrap {
    left:100%;
}

.nav__list {
    padding-bottom:50px;
}


/* =========================================================
   04. PAGE LAYOUT
   ========================================================= */

#main,
#content {
    width:calc(100% - 10px)!important;
    padding-right:5px;
    padding-left:5px;
}

#picnavi,
div#nwpics,
div.slidediv,
#picnavi .blur {
    width:100%!important;
}

#picnavi .topheader_text {
    width:45%!important;
    left:0!important;
}

h1.animation {
    font-size:14px!important;
    line-height:16px!important;
    margin:5px 0 15px 5px!important;
}

p.animation {
    font-size:12px!important;
    line-height:14px!important;
    margin:0 0 0 5px!important;
}

.logo {
    float:left;
    margin-bottom:10px;
}

.flag {
    float:left;
    margin:3px 0 3px 10px;
}

.header {
    background-color:#2a5133;
    z-index:1000;
}

#column1,
#column2 {
    width:auto;
    height:auto!important;
    padding:0 5px;
}

#column12 {
    width:calc(100% - 12px)!important;
    height:auto!important;
    padding:0 5px;
    margin-left:0;
}

#column123 {
    width:calc(100% - 12px)!important;
    height:auto!important;
    padding:0 5px;
    margin-left:0;
}

#column3 {
    width:calc(100% - 12px)!important;
    height:auto!important;
    padding:0;
    float:none;
    clear:left;
}

.content {
    width:calc(100% - 20px)!important;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:5px;
    text-align:start;
}

.content960 {
    padding-bottom:50px;
    width:calc(100% - 20px)!important;
}

.content12 {
    width:auto;
}

.content12attn_old {
    width:calc(100% - 30px)!important;
    top:0;
    margin-top:20px;
    float:none;
}

.content12attn {
    float:inline-start;
    top:0;
    width:calc(100% - 30px)!important;
}

.content123attn {
    width:calc(100% - 30px)!important;
    top:0;
    margin-top:20px;
    float:none;
}

.content3 {
    width:calc(100% - 8px)!important;
    border-width:1px!important;
    top:0;
    margin-top:20px;
}

.content31 {
    float:inline-start;
    width:98%;
}

.content48 {
    float:inline-start;
    width:98%;
}


/* =========================================================
   05. LEGACY CONTENT TILES
   Retained for compatibility; do not use for new layouts.
   ========================================================= */

.content_tile {
    margin-right:5px;
    margin-left:5px;
    padding:10px;
    width:calc(100% - 30px)!important;
}

.content_tile50_white {
    border-color:#ffffff;
    margin-top:10px;
    margin-bottom:5px;
    padding-left:0;
    padding-right:40px;
    width:100%;
    top:15px;
    float:inline-start;
}

.content_tile50_grey {
    margin-right:5px;
    margin-left:5px;
    padding:10px;
    width:calc(100% - 30px)!important;
    height:auto;
}

.content_tile50_grey_right {
    width:100%;
}

.content_tile50_blue {
    width:100%;
    float:inline-start;
}

.content_tile100 {
    margin-right:0;
    padding:10px;
}

.content_tile_coursefinder {
    margin-bottom:0;
    margin-right:5px;
    margin-left:5px;
    padding:10px;
    width:calc(100% - 30px)!important;
    height:auto;
    float:inline-start;
}

.content_login {
    width:95%;
    margin-left:auto;
    margin-right:auto;
}

.content50 {
    padding:0;
    width:auto;
    height:auto!important;
    border:none;
    font-size:100%;
    line-height:120%;
    margin-top:30px;
    margin-bottom:10px;
}

.content50 h1 {
    font-size:14px;
    line-height:16px;
}


/* =========================================================
   06. GENERAL GRID OVERRIDES
   Every default grid becomes a single column on mobile.
   ========================================================= */

.admin_grid,
.admin_grid_header,
.grid-container,
.coursetile-grid-container,
.content-grid-container,
.content-grid-1,
.content-grid-2,
.content-grid-3
.webinar-grid,
.layout-grid-2,
.layout-grid-3,
.layout-grid-4 {
    grid-template-columns:1fr;
}



/* =========================================================
   07. LINKS / MEDIA / UTILITIES
   ========================================================= */

a.small:link,
a:visited,
a:link {
    font-size:100%;
    line-height:120%;
}

#picnavi .topheader_text a:link {
    line-height:22px;
}

.pictures {
    clear:left;
    top:3px!important;
    width:100%;
    overflow:hidden;
}

.bigpadding {
    padding:15px!important;
}

.image2 {
    margin-bottom:5px;
    margin-top:5px;
    width:100%;
}

.image2text {
    width:auto;
    margin:20px 0 0;
    height:auto;
}

.footerlogos img {
    margin:10px;
}

.footer {
    background-color:#21325D;
    width:100%;
    text-align:center;
}

div[style^="width:560"] {
    width:100%!important;
}

.div97 {
    width:calc(100% - 20px)!important;
}


/* =========================================================
   08. TABLES / FORMS / EMBEDDED CONTENT
   ========================================================= */

table {
    width:calc(100% - 12px)!important;
}

table ul {
    padding-left:20px;
}

td {
    width:auto!important;
}

form div.div97 table textarea,
form div.div97 table input,
form div.div97 table select {
    width:80%!important;
}

#content img {
    max-width:100%!important;
}

#content iframe {
    max-width:100%!important;
}

input[type="text"],
input[type="password"] {
    font-size:1.3em;
    padding:5px 12px;
    font-family:Helvetica;
    font-weight:300;
    width:90%;
    color:#9E273B;
    border:1px solid #605D5C;
    background-color:#ffffff;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer-content {
    width:100%;
    padding:20px 15px;
    box-sizing:border-box;
}

.footer-grid {
    grid-template-columns:1fr;
    gap:25px;
    align-items:start;
}

.footer-column p {
    text-align:center !important;
}


.footer-social,
.footer-logo-area,
.footer-links {
    text-align:center;
}

.footer-logo-tiles {
    justify-content:center;
    gap:8px;
}

.footer-logo-tile {
    width:72px;
    height:72px;
}