/*
QUICK TEMPLATE
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@400;500;700&display=swap');
:root{
--body-bg:#ffffff;
}
/*BODY*/
html, body{
min-height:100%;
padding:0px;
margin:0px;
}
body{
color:#666666;
font-family:"Roboto",sans-serif;
line-height:1.6;
overflow:hidden;
background-color:var(--body-bg); /*must be same as background*/
font-size:.85rem;
}
#blocker{
width:100%;
height:100%;
position:fixed;
background-color:var(--body-bg); /*must be same as background*/
display:block;
z-index:1000;
padding-top:6rem;
text-align:center;
}
.background{
position:fixed;
width:100%;
height:100%;
overflow:hidden;
top:0px;
left:0px;
z-index:4;
background-color:var(--body-bg);
/*
background-image:url();
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
*/
}
.foreground{
position:fixed;
width:100%;
height:100%;
overflow-y:auto;
top:0px;
left:0px;
z-index:5;
overflow-x:hidden;
}
/*HORIZONTAL SPACERS*/
.spacer1{
display:block;
height:1rem;
}
.spacer2{
display:block;
height:2rem;
}
/*ROW*/
.row{
display:block;
text-align:center;
}
/* COLUMNS */
/* class="col persist" to prevent auto-column*/
.col25,.col33,.col50,.col66,.col67,.col75,.col100{
display:inline-block;
vertical-align:top;
}
.col25{
width:25%;
}
.col33{
width:33%;
}
.col34{
width:34%;
}
.col50{
width:50%;
}
.col66,.col67{
width:67%;
}
.col75{
width:75%;
}
.col100{
width:100%;
}
@media screen and (max-width:750px){
.col25,.col33,.col50,.col66,.col67,.col75,.col100{
width:100%;
}
.col25.persist{
width:25%;
}
.col33.persist{
width:33%;
}
.col34.persist{
width:34%;
}
.col50.persist{
width:50%;
}
.col66.persist,.col67.persist{
width:67%;
}
.col75.persist{
width:75%;
}
.col100.persist{
width:100%;
}
}
/*PADDERS*/
/*class="padder1 padder2_slim" = padder1 used in wide, padder2 used in slim*/
.padder0{
width:calc(100% - 0rem);
display:inline-block;
padding:0rem;
}
.padderh{
width:calc(100% - 1rem);
display:inline-block;
padding:.5rem;
}
.padder1{
width:calc(100% - 2rem);
display:inline-block;
padding:1rem;
}
.padder1h{
width:calc(100% - 3rem);
display:inline-block;
padding:1.5rem;
}
.padder2{
width:calc(100% - 4rem);
display:inline-block;
padding:2rem;
}
@media screen and (max-width:750px){
.padder0_slim{
width:calc(100% - 0rem);
display:inline-block;
padding:0rem;
}
.padderh_slim{
width:calc(100% - 1rem);
display:inline-block;
padding:.5rem;
}
.padder1_slim{
width:calc(100% - 2rem);
display:inline-block;
padding:1rem;
}
.padder1h_slim{
width:calc(100% - 3rem);
display:inline-block;
padding:1.5rem;
}
.padder2_slim{
width:calc(100% - 4rem);
display:inline-block;
padding:2rem;
}
}
/*LIMITERS*/
/*use with padders class="padder0 limiter60 limiter40_slim" = limiter 60 in wide, limiter40 in slim*/
.limiter10{
max-width:10rem;
}
.limiter20{
max-width:20rem;
}
.limiter30{
max-width:30rem;
}
.limiter40{
max-width:40rem;
}
.limiter50{
max-width:50rem;
}
.limiter60{
max-width:60rem;
}
.limiter70{
max-width:70rem;
}
.limiter80{
max-width:80rem;
}
@media screen and (max-width:750px){
.limiter10_slim{
max-width:10rem;
}
.limiter20_slim{
max-width:20rem;
}
.limiter30_slim{
max-width:30rem;
}
.limiter40_slim{
max-width:40rem;
}
.limiter50_slim{
max-width:50rem;
}
}
/*ALIGNMENT*/
/*can be mixed with ROW, COL, PADDER, LIMITER*/
/*class="center left_slim" = center wide, left slim*/
.center{
text-align:center;
}
.left{
text-align:left;
}
.right{
text-align:right;
}
@media screen and (max-width:750px){
.center_slim{
text-align:center;
}
.left_slim{
text-align:left;
}
.right_slim{
text-align:right;
}
}
/*LINKS*/
a{
text-decoration:none;
cursor:pointer;
color:#0070ba;
transition:.3s;
}
a:hover{
color:#128edf;
}
/*LOADER ANIMATED SVG*/
div.loader{
display:inline-block;
width:74px;
height:74px;
opacity:.5;
}
div.loader.black{
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9Ijc0cHgiIGhlaWdodD0iNzRweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj4KPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsMCwwLDEpIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzMiIgc3Ryb2tlLWRhc2hhcnJheT0iMTYwIj4KICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMXMiIHZhbHVlcz0iMCA1MCA1MDszNjAgNTAgNTAiIGtleVRpbWVzPSIwOzEiPjwvYW5pbWF0ZVRyYW5zZm9ybT4KPC9jaXJjbGU+CjwhLS0gW2xkaW9dIGdlbmVyYXRlZCBieSBodHRwczovL2xvYWRpbmcuaW8vIC0tPjwvc3ZnPg==");
}
div.loader.white{
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9Ijc0cHgiIGhlaWdodD0iNzRweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj4KPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDEpIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzMiIgc3Ryb2tlLWRhc2hhcnJheT0iMTYwIj4KICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iMXMiIHZhbHVlcz0iMCA1MCA1MDszNjAgNTAgNTAiIGtleVRpbWVzPSIwOzEiPjwvYW5pbWF0ZVRyYW5zZm9ybT4KPC9jaXJjbGU+CjwhLS0gW2xkaW9dIGdlbmVyYXRlZCBieSBodHRwczovL2xvYWRpbmcuaW8vIC0tPjwvc3ZnPg==");
}
/*EFFECTS*/
.round{
border-radius:.375rem;
}
.rounder{
border-radius:.75rem;
}
.roundest{
border-radius:1.5rem;
}
.shadow{
box-shadow: 0px 2px 5px 0px rgba(0,0,0,.35);
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,.35);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,.35);
}
.wide_only_block{
display:block;
}
.wide_only{
display:inline-block;
}
.slim_only,.slim_only_block{
display:none;
}
@media screen and (max-width:750px){
.wide_only{
display:none;
}
.wide_only_block{
display:none;
}
.slim_only{
display:inline-block;
}
.slim_only_block{
display:block;
}
}
/*PAGINATION*/
:root{
--pagination_color1:#444444;
--pagination_color2:#cdcdcd;
--pagination_color3:#ffffff;
--pagination_color4:#0070ba;
}
a.pagination{
display:inline-block;
padding:.25rem;
padding-bottom:.15rem;
padding-right:.5rem;
padding-left:.5rem;
color:var(--pagination_color1);
background-color:var(--pagination_color2);
text-decoration:none;
transition:.3s;
cursor:pointer;
margin-right:.25rem;
border-radius:3px;
font-size:.75rem;
}
a.pagination:hover,a.pagination.selected{
color:var(--pagination_color3);
background-color:var(--pagination_color4);
}
/*BUTTON COLLECTION*/
a.btn{
background-color:transparent;
}
/*KATANA*/
a.btn.katana{
--text-color:#ffffff;
--text-color-hover:#ffffff;
--outline-color:#ffffff;
--outline-color-hover:#ffffff;
--background-color:transparent;
--background-color-hover:rgba(255,255,255,.35);
font-family:"Roboto Condensed",sans-serif;
border:2px solid var(--outline-color);
background-color:var(--background-color);
color:var(--text-color);
font-size:.85rem;
padding:1rem;
padding-right:2rem;
padding-left:2rem;
display:inline-block;
letter-spacing:1px;
transition:.3s;
font-weight:400;
margin-bottom:.375rem;
}
a.btn.katana:hover{
color:var(--text-color-hover);
background-color:var(--background-color-hover);
border:2px solid var(--outline-color-hover);
}
/*CLASSIC 1*/
a.btn.classic1{
--text-color:#ffffff;
--text-color-hover:#ffffff;
--background-color:#1d416a;
--background-color-hover:#2e5e94;
display:inline-block;
transition:.3s;
padding:.25rem;
padding-bottom:.1875rem;
padding-right:1rem;
padding-left:1rem;
color:var(--text-color);
background-color:var(--background-color);
text-align:center;
margin-bottom:.375rem;
}
a.btn.classic1:hover{
color:var(--text-color-hover);
background-color:var(--background-color-hover);
}
/*CLASSIC 2*/
a.btn.classic2{
--text-color:#ffffff;
--text-color-hover:#ffffff;
--background-color:#1d416a;
--background-color-hover:#2e5e94;
display:inline-block;
transition:.3s;
padding:.5rem;
padding-bottom:.375rem;
padding-right:2rem;
padding-left:2rem;
color:var(--text-color);
background-color:var(--background-color);
text-align:center;
margin-bottom:.375rem;
}
a.btn.classic2:hover{
color:var(--text-color-hover);
background-color:var(--background-color-hover);
}