@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,700');

html                                { -webkit-font-smoothing: antialiased; }
body                                { font-family: 'Roboto', sans-serif; overflow-x:hidden;}
p                                   { line-height: 1.453em; }
section                             {margin-top: 80px;}
section .DnnModule                  {margin-bottom: 80px;}
section #dnn_RightPane1 .DnnModule  {margin-bottom: 0;}

:root {
    --color-primary: #76933c;
    --color-primary-dark:#314f2f;
    --color-gray: rgba(0,0,0,0.75);
}

@media only screen and (max-width: 768px) {
    section .DnnModule              {margin-bottom: 20px;}
}

/* === General Classes === */
    .transition04                   {transition: all 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s;}
    a:hover                         {text-decoration: none;}
    a                               {outline: none !Important;}
    h1,h2                           {font-weight: 300;}
    .Normal ul li                   {font-size: 14px; padding: 3px 0;}
    .dnnLabel                       {text-align: left;}

    @media only screen and (min-width:768px) {
        video::-webkit-media-controls   {display: none;}
    }

/* === Header === */
    .HeaderContainer                        {background-color: #fff;}
    /* --- Above the menu bar --- */
        .AboveMenuBar                       {position:relative; background-color: rgba(255,255,255,0.05); border-bottom: solid 1px #e7e7e7; padding-top: 5px; padding-bottom: 5px;}
        .AboveMenuBar a                     {display: inline-block; color: #999; padding: 3px 5px;}
        .AboveMenuBar a:hover               {color: #db930f;}
        .AboveMenuBarSocialIcons            {position:relative; top: 2px;}
        .AboveMenuBarSocialIcons span       {display:none;}
        .LoginLink                          {color: #999; text-transform: uppercase; font-size: 80%;}
        .UserLink                           {color: #999; text-transform: uppercase; font-size: 80%;}
        .language-object                    {display: inline-block;}

    /* --- Menu Bar --- */
        /* Logo */
            .LogoHolder                     {max-width: 100%; max-height: 80px; height: auto; width: auto; padding: 15px 0;}

        /* Menu */
            .MenuHolder                     {float: right;}

        /* Mobile Menu */
            .MobileMenuHolder               {float:right; display: none;}
            .MobileMenuHolder .fa           {font-size: 200%; padding: 28px 15px 16px 0; cursor: pointer; color: #333;}
            .sticky .MobileMenuHolder .fa   {color: #333; padding: 6px 15px 6px 0;}
            .MobileMenuDropDown             {display: none; z-index: 9999; position: absolute; top: 110px; width: 100%;}
            .MobileMenuDropDownOpen         {display: block;}

    /* --- Breadcrumb --- */
        .BreadcrumbRow                      {background-color: var(--color-primary-dark); box-shadow: inset 0 0 60px rgba(0,0,0,0.6); padding: 20px 15px 0 15px;}
        .Breadcrumbs                        {padding: 0;}
        .Breadcrumbs a                      {color: #fff; padding: 0 5px;}
        .BreadcrumbRow h2                   {font-size: 24px; font-weight: 700; margin: 0; padding: 10px 0 15px 0; color: #fff; border-bottom: solid 5px #fff; display: inline-block;}

        @media only screen and (max-width: 980px) {
            .BreadcrumbRow                  {padding: 15px 0;}
            .BreadcrumbRow h2               {margin-bottom: 0;}
            .BreadcrumbRow h2:after         {visibility: hidden;}
        }
        
/* === Section === */
    @media only screen and (min-width:1280px) {
    .container                                      {width: 1280px}
    }
    .parallaxbg                                     {text-align:center; background: transparent url(images/bgparallax-01.jpg) no-repeat center center fixed; box-shadow: 0 0 5px rgba(0,0,0,0.5) inset; background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover;}
    .parallaxbg h2                                  {display: inline-block; background-color: rgba(255,255,255,0.75); padding: 10px 20px; margin: 150px auto; box-shadow: 0 0 5px rgba(0,0,0,0.5); border: solid 1px #fff;}
    .parallaxbg h2 a                                {color: #333 !important;}

    .HomeTextLogo                                   {max-width: 50%; margin: 0 auto;}

/* === Footer === */
    .FooterTop                                      {background-color: #f2f2f2; border-top: solid 1px #e7e7e7;}
    .FooterBottom                                   {background-color: var(--color-primary-dark); line-height: 3em;}
    .ExploriaCopyright                              {color: #fff;}
    .FooterBottom .AboveMenuBarSocialIcons a        {display: inline-block; color: #fff; padding: 3px 5px;}
    .FooterBottom .AboveMenuBarSocialIcons a:hover  {color: #fff;}
    .FooterBottom a                                 {color: #fff; text-decoration: underline;}

/* === Responsive Align Classes === */
/* === Responsive Styles === */
@media only screen and (min-width: 1010px) {
    .MobileMenuDropDown             {display: none;}
}

@media only screen and (max-width: 1199px){
}

@media only screen and (max-width: 1009px){
    .MenuHolder                     {display: none;}
    .MobileMenuHolder               {display: block;}
}

@media only screen and (max-width: 768px){
    section                             {margin-top: 40px;}
    
    .text-xs-left                       { text-align: left; }
    .text-xs-right                      { text-align: right; }
    .text-xs-center                     { text-align: center; }
    .text-xs-justify                    { text-align: justify; }

    .col-xs-right                       { float: right; }
}

/* === Ages === */
    .bgAgesPage                         { background: #000 url(images/ages_bg.jpg) no-repeat bottom center; background-size:cover; height:100vh; width:100%;}
    .AgesHeader                         { font-family: 'Unica One', cursive; color:#fff; font-size:50px; text-align: center; padding-top:25vh;}
    .AgesLogo                           { max-width:100%; width:280px;}
    .mt-25                              { margin-top:25px !important; }
    .AgesButton                         { background-color:rgba(0,0,0,0.375); display:inline-block; margin:0 10px;}
    .text-light                         { color:#fff !important;}
    /* --- Breadcrumb --- */
    .BreadcrumbRowAges                      {background-color: #053a88; box-shadow: inset 0 0 60px rgba(0,0,0,0.6); padding: 20px 15px 0 15px;}
    .Breadcrumbs                        {padding: 0;}
    .Breadcrumbs a                      {color: #fff; padding: 0 5px;}
    .BreadcrumbRowAges h2                   {font-size: 24px; font-weight: 700; margin: 0; padding: 10px 0 15px 0; color: #fff; border-bottom: solid 5px #fff; display: inline-block;}

    @media only screen and (max-width: 980px) {
        .BreadcrumbRowAges                  {padding: 15px 0;}
        .BreadcrumbRowAges h2               {margin-bottom: 0;}
        .BreadcrumbRowAges h2:after         {visibility: hidden;}
        .AgesHeader                         {padding-top:15vh;}
    }