@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Tinos');

@font-face {
  font-family: 'socialanimal';
  src: url('fonts/socialanimal-webfont.eot');
  src: url('fonts/socialanimal-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/socialanimal-webfont.woff2') format('woff2'),
       url('fonts/socialanimal-webfont.woff') format('woff'),
       url('fonts/socialanimal-webfont.ttf') format('truetype'),
       url('fonts/socialanimal-webfont.svg#socialanimalregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

:root {
	
	--wwcna-font-family-sans-serif:                   "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--wwcna-font-family-serif:                        "Tinos", Georgia, "Times New Roman", Times, serif;
									                  
	--bs-font-sans-serif:                             var(--wwcna-font-family-sans-serif);
									                  
	--wwcna-default-header-font:                      var(--wwcna-font-family-sans-serif);
	
	--wwcna-body-bg:                                  #ffffff;
	--wwcna-body-font:                                var(--wwcna-font-family-sans-serif);

	--wwcna-body-panel-bg:                            #ffffff;
	--wwcna-body-panel-color:                         #010101;
	--wwcna-body-panel-border:                        color-mix(in srgb, var(--wwcna-body-panel-bg), black 20%);

	--wwcna-banner-bg:                                #00517b;
	--wwcna-banner-color:                             #e3e3e3;
	--wwcna-banner-border:                            color-mix(in srgb, var(--wwcna-banner-bg), black 20%);
	--wwcna-banner-font:                              var(--wwcna-font-family-sans-serif);

	--wwcna-banner-header-color:                      #ffffff;
	--wwcna-banner-header-font:                       var(--wwcna-font-family-sans-serif);

	--wwcna-navbar-mainmenu-bg:                       #0073ae;
	--wwcna-navbar-mainmenu-link-active-bg:           #00517b;
	--wwcna-navbar-mainmenu-link-hover-bg:            transparent;
	--wwcna-navbar-mainmenu-link-disabled-bg:         transparent;

	--wwcna-navbar-mainmenu-color:                    #ffffff;
	--wwcna-navbar-mainmenu-link-color:               #ffffff;
	--wwcna-navbar-mainmenu-link-hover-color:         color-mix(in srgb, var(--wwcna-navbar-mainmenu-link-color), black 10%); /*var(--wwcna-red-30); var(--wwcna-yellow);*/
	--wwcna-navbar-mainmenu-link-active-color:        #ffffff;
	--wwcna-navbar-mainmenu-link-disabled-color:      color-mix(in srgb, var(--wwcna-navbar-mainmenu-link-color), black 20%);

	--wwcna-navbar-mainmenu-border:                   color-mix(in srgb, var(--wwcna-navbar-mainmenu-bg), black 20%);
	--wwcna-navbar-mainmenu-font:                     var(--wwcna-font-family-sans-serif);
	--wwcna-navbar-mainmenu-font-size:                calc(var(--bs-body-font-size); * 2);

	--wwcna-navbar-mainmenu-brand-color:              var(--wwcna-navbar-mainmenu-link-color);
	--wwcna-navbar-mainmenu-brand-hover-bg:           transparent;
	--wwcna-navbar-mainmenu-brand-hover-color:        color-mix(in srgb, var(--wwcna-navbar-mainmenu-brand-color), black 10%);

	--wwcna-breadcrumb-bg:                            #005288;
	--wwcna-breadcrumb-color:                         #00aeef;
	--wwcna-breadcrumb-link-color:                    #ffffff;
	--wwcna-breadcrumb-link-hover-color:              color-mix(in srgb, var(--wwcna-breadcrumb-link-color), black 10%);
	--wwcna-breadcrumb-link-active-color:             #ffffff;
	--wwcna-breadcrumb-divider-color:                 #ffffff;
	--wwcna-breadcrumb-border:                        color-mix(in srgb, var(--wwcna-breadcrumb-bg), black 20%);

	--wwcna-main-content-bg:                          #f5f5f5;
	--wwcna-main-content-header-color:                #005d8d;
	--wwcna-main-content-header-font:                 'socialanimal', var(--wwcna-font-family-sans-serif);
	--wwcna-main-content-color:                       #003b5a;
	--wwcna-main-content-border:                      color-mix(in srgb, var(--wwcna-main-content-bg), black 20%);
	--wwcna-main-content-divider-color:               color-mix(in srgb, var(--wwcna-main-content-bg), black 20%);


	/* navbar profile */
	--wwcna-navbar-user-color:                        #ffffff;
	--wwcna-navbar-user-bg:                           #010101;
	--wwcna-navbar-user-border:                       color-mix(in srgb, var(--wwcna-navbar-user-bg), black 20%);
	--wwcna-navbar-user-link-color:                   var(--wwcna-navbar-user-color);
	--wwcna-navbar-user-link-hover-color:             color-mix(in srgb, var(--wwcna-navbar-user-color), black 10%);
	--wwcna-navbar-user-link-hover-bg:                transparent;
	--wwcna-navbar-user-link-active-color:            color-mix(in srgb, var(--wwcna-navbar-user-color), black 20%);
	--wwcna-navbar-user-link-active-bg:               transparent;
	--wwcna-navbar-user-link-disabled-color:          var(--wwcna-gray-light);
	--wwcna-navbar-user-link-disabled-bg:             transparent;
	--wwcna-navbar-user-brand-color:                  var(--wwcna-navbar-user-link-color);
	--wwcna-navbar-user-brand-hover-color:            color-mix(in srgb, var(--wwcna-navbar-user-brand-color), black 10%);
	--wwcna-navbar-user-brand-hover-bg:               transparent;

	/* banner xs */
	--wwcna-xs-banner-color:                          var(--wwcna-banner-color);
	--wwcna-xs-banner-bg:                             var(--wwcna-banner-bg);
	--wwcna-xs-banner-border:                         var(--wwcna-banner-border);
	--wwcna-xs-banner-header-color:                   var(--wwcna-banner-header-color);
	--wwcna-xs-banner-header-font:                    var(--wwcna-banner-header-font);
	
	/* navbar-mainmenu-dropdowns */
	--wwcna-dropdown-font:                            var(--wwcna-navbar-mainmenu-font);
	--wwcna-dropdown-font-size:                       var(--wwcna-navbar-mainmenu-font-size);
	--wwcna-dropdown-bg:                              var(--wwcna-navbar-mainmenu-bg);
	--wwcna-dropdown-border:                          var(--wwcna-navbar-mainmenu-link-active-bg);
	--wwcna-dropdown-divider-bg:                      var(--wwcna-navbar-mainmenu-link-active-color);
	--wwcna-dropdown-link-color:                      var(--wwcna-navbar-mainmenu-link-color);
	--wwcna-dropdown-link-hover-color:                var(--wwcna-navbar-mainmenu-link-hover-color);
	--wwcna-dropdown-link-hover-bg:                   var(--wwcna-navbar-mainmenu-link-hover-bg);
	--wwcna-dropdown-link-active-color:               var(--wwcna-navbar-mainmenu-link-active-color);
	--wwcna-dropdown-link-active-bg:                  var(--wwcna-navbar-mainmenu-link-active-bg);
	--wwcna-dropdown-link-disabled-color:             var(--wwcna-navbar-mainmenu-link-disabled-color);
	--wwcna-dropdown-header-font:                     var(--wwcna-dropdown-font);
	--wwcna-dropdown-header-font-size:                var(--wwcna-dropdown-font-size);
	--wwcna-dropdown-header-color:                    var(--wwcna-dropdown-link-color);

	/* navbar xs menu */
	--wwcna-navbar-xsmenu-color:                      var(--wwcna-navbar-mainmenu-color);
	--wwcna-navbar-xsmenu-bg:                         var(--wwcna-navbar-mainmenu-bg);
	--wwcna-navbar-xsmenu-border:                     color-mix(in srgb, var(--wwcna-navbar-xsmenu-bg), black 20%);
	--wwcna-navbar-xsmenu-link-color:                 var(--wwcna-navbar-mainmenu-link-color);
	--wwcna-navbar-xsmenu-link-hover-color:           var(--wwcna-navbar-mainmenu-link-active-color);
	--wwcna-navbar-xsmenu-link-hover-bg:              var(--wwcna-navbar-mainmenu-link-active-bg);
	--wwcna-navbar-xsmenu-link-active-color:          var(--wwcna-navbar-mainmenu-link-active-color);
	--wwcna-navbar-xsmenu-link-active-bg:             var(--wwcna-navbar-mainmenu-link-active-bg);
	--wwcna-navbar-xsmenu-link-disabled-color:        var(--wwcna-navbar-mainmenu-link-disabled-color);
	--wwcna-navbar-xsmenu-link-disabled-bg:           var(--wwcna-navbar-mainmenu-link-disabled-bg);
	--wwcna-navbar-xsmenu-brand-color:                var(--wwcna-yellow);
	--wwcna-navbar-xsmenu-brand-hover-color:          var(--wwcna-navbar-xsmenu-brand-color);
	--wwcna-navbar-xsmenu-brand-hover-bg:             var(--wwcna-navbar-mainmenu-link-hover-bg);
	--wwcna-navbar-xsmenu-toggle-bg:                  color-mix(in srgb, var(--wwcna-navbar-xsmenu-color), black 20%);
	--wwcna-navbar-xsmenu-toggle-hover-bg:            var(--wwcna-navbar-xsmenu-color);
	--wwcna-navbar-xsmenu-toggle-icon-bar-bg:         var(--wwcna-yellow);
	--wwcna-navbar-xsmenu-toggle-border-color:        var(--wwcna-navbar-xsmenu-color);
	--wwcna-navbar-xsmenu-dropdown-divider-bg:        var(--wwcna-dropdown-divider-bg);

	/* menu cards */
	--wwcna-menu-card-border-color:                   var(--wwcna-main-content-link-color);
	--wwcna-menu-card-hover-border-color:             var(--wwcna-main-content-link-hover-color);

	/* content wrapper */
	--wwcna-content-bg:                               transparent;
	--wwcna-content-border:                           transparent;

	/* content main */
	--wwcna-main-content-header-hover-color:          var(--wwcna-main-content-header-color);
	--wwcna-main-content-header-hover-bg:             transparent;
	--wwcna-main-content-link-color:                  var(--wwcna-btn-primary-bg);
	--wwcna-main-content-link-hover-color:            var(--wwcna-btn-primary-hover-bg);
	--wwcna-main-content-link-hover-bg:               transparent;
	--wwcna-main-content-muted-color:                 var(--wwcna-gray-light);
	--wwcna-main-content-muted-link-color:            var(--wwcna-main-content-link-color);
	--wwcna-main-content-muted-link-hover-color:      var(--wwcna-main-content-link-hover-color);
	--wwcna-main-content-muted-link-hover-bg:         transparent;
	--wwcna-main-content-icon-link-color:             var(--wwcna-main-content-link-color);
	--wwcna-main-content-icon-link-hover-color:       var(--wwcna-main-content-link-hover-color);
	--wwcna-main-content-icon-link-hover-bg:          transparent;
	--wwcna-main-content-panel-heading-color:         var(--wwcna-main-content-header-color);
	--wwcna-main-content-panel-heading-bg:            var(--wwcna-main-content-bg);
	--wwcna-main-content-panel-heading-border:        var(--wwcna-main-content-border);
	--wwcna-main-content-panel-body-border:           var(--wwcna-main-content-border);

	/* content buttons */
	/*
	btn-default-color:         var(--wwcna-yellow);
	btn-default-bg:            var(--wwcna-red);
	btn-default-border:        var(--wwcna-yellow);
	btn-default-hover-color:   @btn-default-color;
	btn-default-hover-bg:      darken(@btn-default-bg, 10%);
	btn-default-hover-border:  darken(@btn-default-border, 12%);

	btn-primary-color:         @btn-default-color;
	btn-primary-bg:            @btn-default-bg;
	btn-primary-border:        @btn-default-border;
	btn-primary-hover-color:   @btn-default-hover-color;
	btn-primary-hover-bg:      @btn-default-hover-bg;
	btn-primary-hover-border:  @btn-default-hover-border;

	btn-success-color:         #ffffff;
	btn-success-bg:            @brand-success;
	btn-success-border:        darken(@btn-success-bg, 5%);
	btn-success-hover-color:   @btn-success-color;
	btn-success-hover-bg:      darken(@btn-success-bg, 10%);
	btn-success-hover-border:  darken(@btn-success-border, 12%);

	btn-info-color:            #ffffff;
	btn-info-bg:               @brand-info;
	btn-info-border:           darken(@btn-info-bg, 5%);
	btn-info-hover-color:      @btn-info-color;
	btn-info-hover-bg:         darken(@btn-info-bg, 10%);
	btn-info-hover-border:     darken(@btn-info-border, 12%);

	btn-warning-color:         #ffffff;
	btn-warning-bg:            @brand-warning;
	btn-warning-border:        darken(@btn-warning-bg, 5%);
	btn-warning-hover-color:   @btn-warning-color;
	btn-warning-hover-bg:      darken(@btn-warning-bg, 10%);
	btn-warning-hover-border:  darken(@btn-warning-border, 12%);

	btn-danger-color:          #ffffff;
	btn-danger-bg:             @brand-danger;
	btn-danger-border:         darken(@btn-danger-bg, 5%);
	btn-danger-hover-color:    @btn-danger-color;
	btn-danger-hover-bg:       darken(@btn-danger-bg, 10%);
	btn-danger-hover-border:   darken(@btn-danger-border, 12%);
*/

	/* content forms */
	--wwcna-input-color:                              var(--wwcna-yellow);
	--wwcna-input-bg:                                 var(--wwcna-red);
	--wwcna-input-border:                             var(--wwcna-yellow);
	--wwcna-input-group-addon-bg:                     var(--wwcna-red);
	--wwcna-input-group-addon-border-color:           var(--wwcna-input-border);

	--wwcna-label-color:                              var(--wwcna-input-color);

	/* content pager */
	--wwcna-pager-color:                              var(--wwcna-yellow);
	--wwcna-pager-bg:                                 var(--wwcna-red);
	--wwcna-pager-border:                             var(--wwcna-yellow);
	--wwcna-pager-hover-color:                        color-mix(in srgb, var(--wwcna-pager-color), black 10%);
	--wwcna-pager-hover-bg:                           var(--wwcna-red);
	--wwcna-pager-hover-border:                       var(--wwcna-yellow);
	--wwcna-pager-disabled-color:                     var(--wwcna-gray-light);

	/* sidebar left */
	--wwcna-sidebar-left-color:                       var(--wwcna-main-content-color);
	--wwcna-sidebar-left-bg:                          var(--wwcna-main-content-bg);
	--wwcna-sidebar-left-border:                      var(--wwcna-main-content-border);
	--wwcna-sidebar-left-header-color:                var(--wwcna-main-content-header-color);
	--wwcna-sidebar-left-header-font:                 var(--wwcna-header-font);
	--wwcna-sidebar-left-header-font-size-base:       calc(var(--bs-body-font-size) * 2);
	--wwcna-sidebar-left-divider-color:               var(main-content-divider-color);
	--wwcna-sidebar-left-link-color:                  var(main-content-link-color);
	--wwcna-sidebar-left-link-hover-color:            var(main-content-link-hover-color);
	--wwcna-sidebar-left-link-hover-bg:               var(main-content-link-hover-bg);
	--wwcna-sidebar-left-navbar-link-color:           var(sidebar-left-link-color);
	--wwcna-sidebar-left-navbar-link-hover-color:     var(sidebar-left-link-hover-color);
	--wwcna-sidebar-left-navbar-link-hover-bg:        var(sidebar-left-link-hover-bg);
	--wwcna-sidebar-left-navbar-link-active-color:    var(navbar-mainmenu-link-active-color);
	--wwcna-sidebar-left-navbar-link-active-bg:       var(navbar-mainmenu-link-active-bg);
	--wwcna-sidebar-left-navbar-link-disabled-color:  var(navbar-mainmenu-link-disabled-color);
	--wwcna-sidebar-left-navbar-link-disabled-bg:     var(navbar-mainmenu-link-disabled-bg);

	/* sidebar right */
	--wwcna-sidebar-right-color:                      var(--wwcna-main-content-color);
	--wwcna-sidebar-right-bg:                         var(--wwcna-main-content-bg);
	--wwcna-sidebar-right-border:                     var(--wwcna-main-content-border);
	--wwcna-sidebar-right-header-color:               var(--wwcna-main-content-header-color);
	--wwcna-sidebar-right-header-font:                var(--wwcna-header-font);
	--wwcna-sidebar-right-header-font-size-base:      calc(var(--bs-body-font-size) * 2);
	--wwcna-sidebar-right-divider-color:              var(--wwcna-main-content-divider-color);
	--wwcna-sidebar-right-link-color:                 var(--wwcna-main-content-link-color);
	--wwcna-sidebar-right-link-hover-color:           var(--wwcna-main-content-link-hover-color);
	--wwcna-sidebar-right-link-hover-bg:              var(--wwcna-main-content-link-hover-bg);
	--wwcna-sidebar-right-navbar-link-color:          var(--wwcna-sidebar-right-link-color);
	--wwcna-sidebar-right-navbar-link-hover-color:    var(--wwcna-sidebar-right-link-hover-color);
	--wwcna-sidebar-right-navbar-link-hover-bg:       var(--wwcna-sidebar-right-link-hover-bg);
	--wwcna-sidebar-right-navbar-link-active-color:   var(--wwcna-navbar-mainmenu-link-active-color);
	--wwcna-sidebar-right-navbar-link-active-bg:      var(--wwcna-navbar-mainmenu-link-active-bg);
	--wwcna-sidebar-right-navbar-link-disabled-color: var(--wwcna-navbar-mainmenu-link-disabled-color);
	--wwcna-sidebar-right-navbar-link-disabled-bg:    var(--wwcna-navbar-mainmenu-link-disabled-bg);

	/* footer */
	--wwcna-footer-outer-bg:                          transparent;
	--wwcna-footer-outer-border:                      transparent;
	--wwcna-footer-inner-bg:                          transparent;
	--wwcna-footer-inner-border:                      transparent;
											          
	--wwcna-footer-color:                             var(--wwcna-yellow);
	--wwcna-footer-link-color:                        var(--wwcna-yellow);
	--wwcna-footer-link-hover-color:                  var(--wwcna-footer-link-color);
	--wwcna-footer-link-hover-bg:                     var(--wwcna-red);
	--wwcna-footer-header-color:                      var(--wwcna-yellow);
											          
	--wwcna-footer-back-top-color:                    var(--wwcna-footer-color);
	--wwcna-footer-back-top-bg:                       var(--wwcna-footer-outer-bg);
	--wwcna-footer-back-top-link-color:               var(--wwcna-footer-link-color);
	--wwcna-footer-back-top-link-hover-color:         var(--wwcna-footer-link-hover-color);
	--wwcna-footer-back-top-link-hover-bg:            var(--wwcna-footer-link-hover-bg);

	/*footer xs */
	--wwcna-footer-xs-outer-bg:                       transparent;
	--wwcna-footer-xs-outer-border:                   transparent;
	--wwcna-footer-xs-inner-bg:                       transparent;
	--wwcna-footer-xs-inner-border:                   transparent;
												      
	--wwcna-footer-xs-color:                          var(--wwcna-yellow);
	--wwcna-footer-xs-link-color:                     var(--wwcna-yellow);
	--wwcna-footer-xs-link-hover-color:               color-mix(in srgb, var(--wwcna-footer-xs-link-color) 90%, black 10%);
	--wwcna-footer-xs-link-hover-bg:                  var(--wwcna-footer-link-hover-bg);
	--wwcna-footer-xs-header-color:                   var(--wwcna-yellow);
												      
	--wwcna-footer-xs-back-top-color:                 var(--wwcna-footer-xs-color);
	--wwcna-footer-xs-back-top-bg:                    var(--wwcna-footer-xs-outer-bg);
	--wwcna-footer-xs-back-top-link-color:            var(--wwcna-footer-xs-link-color);
	--wwcna-footer-xs-back-top-link-hover-color:      var(--wwcna-footer-xs-link-hover-color);
	--wwcna-footer-xs-back-top-link-hover-bg:         var(--wwcna-footer-xs-link-hover-bg);
}

.navbar {
		--bs-navbar-padding-y:                        0px;
}

.breadcrumb {
	--bs-breadcrumb-divider-color: var(--wwcna-breadcrumb-divider-color);
}

.card {
    --bs-card-color: var(--wwcna-main-content-color);
}