/* Default and Custom HTML Tags Start */
/*
Custom Tags:
content -> For storing the main content
menu -> For containing the menu
hidden-menu -> For containing the hidden menu for smaller window widths
*/
header {
width: 100%;
}
content {
width: 100%;
height: 90%;
}
footer {
width: 100%;
}
menu-bar {
width: 100%;
position: sticky;
top: 0;
}
hidden-menu {
width: 0px;
position: absolute;
transition: .7s;
max-width: 300px;
z-index: 4;
overflow-x: hidden; /* Hide horizontal scrollbar for transformation */
}
div{
overflow: auto;
}
/* Default and Custom HTML Tags End */
.bold{
font-weight: bold;
}
.vanish{
display: none!important;
}
.fit-content {
width: fit-content;
}
/*
Use this to make an element full height and width. However keep in mind an
element can only reach as far as the parent lets it under certain
conditions. This includes all elements, including and
*/
.full-width-height{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.align-text-center{
text-align: center;
}
.align-block-center{
margin-left: auto;
margin-right: auto;
}
.align-all-center{
text-align: center;
margin-left: auto;
margin-right: auto;
}
.center-block{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll-row-container{
width: fit-content;
white-space: nowrap;
}
/* Backgrounds ![]()
Start */
.background-img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
z-index: -2;
position: fixed;
}
.trans-layer{
background-color: rgba(0, 0, 0, 0.70);
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
/* Backgrounds ![]()
End */
/* Sliding Doors Start */
#door-container{
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
}
.door{
width: 50%;
height: 100%;
background-color: #2f2c2c;
float: right;
transition: .8s;
position: relative;
float: left;
}
#left-door{
/* see open-close-doors() function ins template.js */
}
#right-door{
/* see open-close-doors() function ins template.js */
}
/* Sliding Doors End */
/* Place class in Body for full width and cutting outside margins */
.no-margin{
margin: 0;
}
/* Turn blocks into rows. div, img, etc */
.float-row>div,
.float-row>img,
.float-row>button,
.float-row>p,
.float-row>a,
.float-row>h1,
.float-row>h2,
.float-row>h3,
.float-row>h4,
.float-row>label,
.float-row>input {
float: left;
}
.fill-width {
width: 100%;
}
/*
NOT SUPPORTED: **inline-block** creates spacing that makes it more difficult
to figure out the width for each block and have the rows fit evenly.
test in **div_section_example.html** to see an example
.inline-block-row>div, .inline-block-row>img, .inline-block-row>button, .inline-block-row>p, .inline-block-row>a{
display: inline-block;
}
*/
/* Div Size Controlers start */
@media screen and (min-width: 1130px){
.desktop-view{
display: block;
}
.mobile-view{
display: none!important;
}
.reg-sz-12{
width: 100%;
}
.reg-sz-11{
width: 91.66%;
}
.reg-sz-10{
width: 83.33%;
}
.reg-sz-9{
width: 75%;
}
.reg-sz-8{
width: 66.66%;
}
.reg-sz-7{
width: 58.33%;
}
.reg-sz-6{
width: 50%;
}
.reg-sz-5{
width: 41.66%;
}
.reg-sz-4{
width: 33.33%;
}
.reg-sz-3{
width: 25%;
}
.reg-sz-2{
width: 16.6667%;
}
.reg-sz-1{
width: 08.3333%;
}
}
@media screen and (max-width: 1130px){
.desktop-view{
display: none!important;
}
.mobile-view{
display: block;
}
.reg-sz-12{
width: 100%;
}
.reg-sz-11{
width: 50%;
}
.reg-sz-10{
width: 50%;
}
.reg-sz-9{
width: 50%;
}
.reg-sz-8{
width: 50%;
}
.reg-sz-7{
width: 50%;
}
.reg-sz-6{
width: 50%;
}
.reg-sz-5{
width: 50%;
}
.reg-sz-4{
width: 50%;
}
.reg-sz-3{
width: 50%;
}
.reg-sz-2{
width: 50%;
}
.reg-sz-1{
width: 50%;
}
@media screen and (max-width: 600px){
.reg-sz-12{
width: 100%;
}
.reg-sz-11{
width: 100%;
}
.reg-sz-10{
width: 100%;
}
.reg-sz-9{
width: 100%;
}
.reg-sz-8{
width: 100%;
}
.reg-sz-7{
width: 100%;
}
.reg-sz-6{
width: 100%;
}
.reg-sz-5{
width: 100%;
}
.reg-sz-4{
width: 100%;
}
.reg-sz-3{
width: 100%;
}
.reg-sz-2{
width: 100%;
}
.reg-sz-1{
width: 100%;
}
}
/* Div Size Controlers end */