@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2); 
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #2453ab;
    --accentDarker: #1c4187;
    --light: rgba(38, 50, 56, 0.035);
    --mooDesignBlue1: #129ae4;
    --mooDesignBlue2: #2453ab;
}


/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.24) sepia(1) hue-rotate(170deg) contrast(6) brightness(0.9) !important;}

/* HTML: <div class="loader"></div> -- from https://css-loaders.com/spinner/*/
.loader {
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 4px solid var(--textMedium);
    animation:
            l20-1 0.8s infinite linear alternate,
            l20-2 1.6s infinite linear;
}
@keyframes l20-1{
    0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
    12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
    25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
    50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
    62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
    75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
    100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{
    0%    {transform:scaleY(1)  rotate(0deg)}
    49.99%{transform:scaleY(1)  rotate(135deg)}
    50%   {transform:scaleY(-1) rotate(0deg)}
    100%  {transform:scaleY(-1) rotate(-135deg)}
}



h3 { padding-top: 0.5rem; color: var(--textMedium)}

section {font-size: 1.2rem;}
p, ul, ol, blockquote, pre, .box.map, figure, details {margin-bottom: 1.1em;}

section .container.small {max-width: 48rem;}

section.wide {max-width: 84rem;}

header .logo img {max-height: 4rem;}

footer .logo img {max-height: 8rem;}

header > .container.has_cta ul {justify-content: right;}

section.intro p {font-size: 1.8rem; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1.4rem;}

section.intro h2 {margin-bottom: 1.4rem;}

.whySheetRailsDesktop td {padding: 3px}

.whySheetRailsMobile td {padding: 2px}

@media (max-width: 950px) {
    table.whySheetRailsDesktop {display: none;}
    table.whySheetRailsMobile {display: block;}
}
@media (min-width: 950px) {
    table.whySheetRailsDesktop {display: block;}
    table.whySheetRailsMobile {display: none;}
}