/**
 * Specific template styles
 *
 * @package    BardCanvas
 * @subpackage Responsive Template
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 */

/*        */
/* Header */
/*        */

#responsible_custom_header              { line-height: 60px; }
#responsible_custom_header .logo        { display: inline-block; white-space: nowrap; margin: 20px 0; }
#responsible_custom_header .links_panel { display: inline-block; float: right; line-height: 96px; }

#responsible_custom_header .logo            { vertical-align: top; font-size: 30px; color: #555555; font-weight: bold; }
#responsible_custom_header .logo .image     { vertical-align: top; max-height: 60px; margin-right: 10px; max-width: 100%; }
#responsible_custom_header .logo .caption   { vertical-align: top; display: inline-block; }

#responsible_custom_header .links_panel        { vertical-align: top; text-align: right; }
#responsible_custom_header .links_panel .links { display: inline-block; text-align: center;
                                                 line-height: normal; vertical-align: middle;
                                                 text-transform: uppercase; font-size: 11px; }

#responsible_custom_header .links_panel .links .icon              { font-size: 10px; }
#responsible_custom_header .links_panel .links a                  { color: #0066cc; }
#responsible_custom_header .links_panel .links a span             { display: inline-block; padding: 5px; }
#responsible_custom_header .links_panel .links a:hover            { color: #444444; }
#responsible_custom_header .links_panel .links a:after            { content: ' | '; }
#responsible_custom_header .links_panel .links a:last-child:after { content: '';    }

@media all and (max-width: 480px) {
    #responsible_custom_header .logo        { display: block; float: none; text-align: center; max-width: none; }
    #responsible_custom_header .links_panel { display: block; float: none; text-align: center; max-width: none;
                                              line-height: normal; margin-top: 20px; }
}

/*        */
/* Footer */
/*        */

.responsive_footer    { font-size: 10pt; }
.responsive_footer h3 { margin: 0; }
.responsive_footer ul { padding-left: 24px; }
.responsive_footer li { padding-top: 3px; padding-bottom: 3px; }

.responsive_footer.row1 .content_frame:first-child ul { display: block; margin-left: 0; padding-left: 0; }

.responsive_footer      .content_frame { padding: 20px; }
.responsive_footer.row1 .content_frame { padding: 20px; height: 220px; overflow: hidden; background-color: #F9F9F9; }

@media all and (min-width: 710px) {
    .responsive_footer.cols-3 .biggest-col { width: calc(34% - 10px); }
    .responsive_footer.cols-2 .col         { width: calc(50% -  7px); }
}

.responsive_footer.row2 .content_frame                { text-transform: uppercase; line-height: 26px; }
.responsive_footer.row2 .content_frame .panel         { display: inline-block; }
.responsive_footer.row2 .content_frame .panel.right   { float: right; }
.responsive_footer.row2 .content_frame .panel a       { display: inline-block; font-size: 12px; color: #0066cc;
                                                        vertical-align: top; }
.responsive_footer.row2 .content_frame .panel a:hover { color: #444444; }
.responsive_footer.row2 .content_frame .panel a span  { display: inline-block; padding: 5px; vertical-align: middle; }
.responsive_footer.row2 .content_frame .panel .icon   { font-size: 12px; position: relative; top: -2px; }

.responsive_footer.row2 .content_frame .panel.left a:after            { content: ' | '; }
.responsive_footer.row2 .content_frame .panel.left a:last-child:after { content: '';    }

@media all and (max-width: 709px) {
    .responsive_footer.row2 .content_frame              { text-align: center; }
    .responsive_footer.row2 .content_frame .panel.right { float: none; }
}

/*         */
/* Shadows */
/*         */

.responsive_dark_shadowed {
    font-weight: bold;
    text-shadow: 2px  2px 3px #000;
}

.responsive_white_shadowed {
    font-weight: bold;
    color: white;
    text-shadow: 2px  2px 3px #000;
}
#responsible_custom_header.responsive_white_shadowed .logo .caption { color: white; }
#responsible_custom_header.responsive_white_shadowed .links_panel .links a     { color: white; }
#responsible_custom_header.responsive_white_shadowed .links_panel .links .icon { color: #0066cc; }
#responsible_custom_header.responsive_white_shadowed .links_panel .links .icon .fa-inverse { text-shadow: none; }
#footer.responsive_white_shadowed              { color: white; }
#footer.responsive_white_shadowed a            { color: white; }
#footer.responsive_white_shadowed .pseudo_link { color: white; }

.responsive_white_outlined {
    font-weight: bold;
    color: white;
    text-shadow: -1px -1px 1px #000
               ,  1px -1px 1px #000
               ,  1px  1px 1px #000
               , -1px  1px 1px #000
               ;
}
#responsible_custom_header.responsive_white_outlined .logo .caption { color: white; }
#responsible_custom_header.responsive_white_outlined .links_panel .links a     { color: white; }
#responsible_custom_header.responsive_white_outlined .links_panel .links .icon { color: #0066cc; }
#responsible_custom_header.responsive_white_outlined .links_panel .links .icon .fa-inverse { text-shadow: none; }
#footer.responsive_white_outlined              { color: white; }
#footer.responsive_white_outlined a            { color: white; }
#footer.responsive_white_outlined .pseudo_link { color: white; }

.responsive_white_remarked {
    font-weight: bold;
    color: white;
    text-shadow: -1px -1px 1px #000
               ,  1px -1px 1px #000
               ,  1px  1px 1px #000
               , -1px  1px 1px #000
               ,  2px  2px 3px #000
               ;
}
#responsible_custom_header.responsive_white_remarked .logo .caption { color: white; }
#responsible_custom_header.responsive_white_remarked .links_panel .links a     { color: white; }
#responsible_custom_header.responsive_white_remarked .links_panel .links .icon { color: #0066cc; }
#responsible_custom_header.responsive_white_remarked .links_panel .links .icon .fa-inverse { text-shadow: none; }
#footer.responsive_white_remarked              { color: white; }
#footer.responsive_white_remarked a            { color: white; }
#footer.responsive_white_remarked .pseudo_link { color: white; }