/* * Copyright (c) 2020 ScriptNG * */ /* Do not overwrite or make changes to this file! Add CSS rules you want to customize to customize.css or any other css file. Golden Ratio (GR) = 1.618 100%/61.8% = GR 61.8%/10 = 6.18% 16/10 ~ GR ___________________________ | ___________.body___________ | | | | |
| | | | | |______.row/.container_____| |
| | | | | |
| | | | | |
| | | | | |
| |_______|_______|__________| |
| | | | | | | |
| | | | footer | | .footer | |
| | | | | |__________________________| |
| | |________________________________| All additional visual changes to header, footer, etc do it in .footer > * {} .etc > * {} */ /* Do not put padding or other styling in here .footer, .body:after { height: ; } */ html { min-height: 100%; height: auto !important; /* IE doesn't understand !important it seems */ height: 100%; /* IE 5.5-6 */ } body { margin: 0; } .clearfix:before { /* older browsers do not support empty content */ content: " "; clear: both; height: 0.1px; visibility: hidden; display: block; } .clearfix:after { /* older browsers do not support empty content */ content: " "; clear: both; height: 0.1px; visibility: hidden; display: block; } .body { position: relative; /* center container */ margin: 0 auto; min-height: 100%; height: auto !important; /* IE doesn't understand !important it seems */ height: 100%; /* IE 5.5-6 */ } .body:after { content: " "; clear: both; height: 0.001px; visibility: hidden; display: block; } .container { position: relative; overflow: visible; /* Center container by default. Changes if width changes automatically. */ margin-left: auto; margin-right: auto; } .container:after { content: " "; clear: both; height: 0.001px; visibility: hidden; display: block; } .footer { position: absolute; bottom: 0; width: 100%; height: 0.001px; /* Don't, will cause vertical scroll .footer {height:0;} */ } /* Add spacing above footer amount of height */ .footer:before { content: " "; clear: both; visibility: hidden; display: block; } .footer > * { min-height: 100%; height: auto !important; /* IE doesn't understand !important it seems */ height: 100%; /* IE 5.5-6 */ } .footer > *:after { content: " "; clear: both; height: 0.001px; visibility: hidden; display: block; } [class~=row] { /*overflow: auto;*/ /* causing scrollbars at certain margins, dissapears with bigger margins */ overflow: hidden; } [class~=row]:after { content: " "; clear: both; height: 0.001px; visibility: hidden; display: block; } [class~=row] > * { } [class~=row] > *:after { content: " "; clear: both; height: 0.001px; visibility: hidden; display: block; } /* Why is this here? [class~=row]:first-child > * { } */ [class|=col] { float: left; min-height: 1px; /* Prevent collapse and content layout shift (CLS) flicker */ } [class|=col] > * { } /* Why first-child? [class|=col]:first-child > * { } */ .col-1-1 { width: 100.0%; } .col-1-3 { width: 33.33%; } .col-2-3 { width: 66.67%; } .col-3-3 { width: 100.00%; } .right-1-3 { position: relative; left: 33.33%; } .right-2-3 { position: relative; left: 66.67%; } .left-1-3 { position: relative; right: 33.33%; } .left-2-3 { position: relative; right: 66.67%; } .col-1-16 { width: 6.25%; } .col-2-16 { width: 12.50%; } .col-3-16 { width: 18.75%; } .col-4-16 { width: 25.00%; } .col-5-16 { width: 31.25%; } .col-6-16 { width: 37.50%; } .col-7-16 { width: 43.75%; } .col-8-16 { width: 50.00%; } .col-9-16 { width: 56.25%; } .col-10-16 { width: 62.50%; } .col-11-16 { width: 68.75%; } .col-12-16 { width: 75.00%; } .col-13-16 { width: 81.25%; } .col-14-16 { width: 87.50%; } .col-15-16 { width: 93.75%; } .col-16-16 { width: 100.00%; } .right-1-16 { position: relative; left: 6.25%; } .right-2-16 { position: relative; left: 12.50%; } .right-3-16 { position: relative; left: 18.75%; } .right-4-16 { position: relative; left: 25.00%; } .right-5-16 { position: relative; left: 31.25%; } .right-6-16 { position: relative; left: 37.50%; } .right-7-16 { position: relative; left: 43.75%; } .right-8-16 { position: relative; left: 50.00%; } .right-9-16 { position: relative; left: 56.25%; } .right-10-16 { position: relative; left: 62.50%; } .right-11-16 { position: relative; left: 68.75%; } .right-12-16 { position: relative; left: 75.00%; } .right-13-16 { position: relative; left: 81.25%; } .right-14-16 { position: relative; left: 87.50%; } .right-15-16 { position: relative; left: 93.75%; } .right-16-16 { position: relative; left: 100.00%; } .left-1-16 { position: relative; right: 6.25%; } .left-2-16 { position: relative; right: 12.50%; } .left-3-16 { position: relative; right: 18.75%; } .left-4-16 { position: relative; right: 25.00%; } .left-5-16 { position: relative; right: 31.25%; } .left-6-16 { position: relative; right: 37.50%; } .left-7-16 { position: relative; right: 43.75%; } .left-8-16 { position: relative; right: 50.00%; } .left-9-16 { position: relative; right: 56.25%; } .left-10-16 { position: relative; right: 62.50%; } .left-11-16 { position: relative; right: 68.75%; } .left-12-16 { position: relative; right: 75.00%; } .left-13-16 { position: relative; right: 81.25%; } .left-14-16 { position: relative; right: 87.50%; } .left-15-16 { position: relative; right: 93.75%; } .left-16-16 { position: relative; right: 100.00%; } /* Golden Ratio */ .col-1-17 { width: 5.57%; } .col-2-17 { width: 9.01%; } .col-3-17 { width: 14.59%; } .col-5-17 { width: 23.60%; } .col-8-17 { width: 38.19%; } .col-9-17 { width: 61.80%; } .col-17-17 { width: 100.00%; } .right-1-17 { position: relative; left: 5.57%; } .right-2-17 { position: relative; left: 9.01%; } .right-3-17 { position: relative; left: 14.59%; } .right-5-17 { position: relative; left: 23.60%; } .right-7-17 { position: relative; left: 31.61%; } .right-8-17 { position: relative; left: 38.19%; } .right-9-17 { position: relative; left: 61.80%; } .right-11-17 { position: relative; left: 70.81%; } .right-12-17 { position: relative; left: 76.39%; } .right-14-17 { position: relative; left: 85.40%; } .right-17-17 { position: relative; left: 100.00%; } .left-1-17 { position: relative; right: 5.57%; } .left-2-17 { position: relative; right: 9.01%; } .left-3-17 { position: relative; right: 14.59%; } .left-5-17 { position: relative; right: 23.60%; } .left-7-17 { position: relative; right: 31.61%; } .left-8-17 { position: relative; right: 38.19%; } .left-9-17 { position: relative; right: 61.80%; } .left-11-17 { position: relative; right: 70.81%; } .left-12-17 { position: relative; right: 76.39%; } .left-14-17 { position: relative; right: 85.40%; } .left-17-17 { position: relative; right: 100.00%; } .col-1-20 { width: 5%; } .col-2-20 { width: 10%; } .col-3-20 { width: 15%; } .col-4-20 { width: 20%; } .col-5-20 { width: 25%; } .col-6-20 { width: 30%; } .col-7-20 { width: 35%; } .col-8-20 { width: 40%; } .col-9-20 { width: 45%; } .col-10-20 { width: 50%; } .col-11-20 { width: 55%; } .col-12-20 { width: 60%; } .col-13-20 { width: 65%; } .col-14-20 { width: 70%; } .col-15-20 { width: 75%; } .col-16-20 { width: 80%; } .col-17-20 { width: 85%; } .col-18-20 { width: 90%; } .col-19-20 { width: 95%; } .col-20-20 { width: 100%; } .right-1-20 { position: relative; left: 5%; } .right-2-20 { position: relative; left: 10%; } .right-3-20 { position: relative; left: 15%; } .right-4-20 { position: relative; left: 20%; } .right-5-20 { position: relative; left: 25%; } .right-6-20 { position: relative; left: 30%; } .right-7-20 { position: relative; left: 35%; } .right-8-20 { position: relative; left: 40%; } .right-9-20 { position: relative; left: 45%; } .right-10-20 { position: relative; left: 50%; } .right-11-20 { position: relative; left: 55%; } .right-12-20 { position: relative; left: 60%; } .right-13-20 { position: relative; left: 65%; } .right-14-20 { position: relative; left: 70%; } .right-15-20 { position: relative; left: 75%; } .right-16-20 { position: relative; left: 80%; } .right-17-20 { position: relative; left: 85%; } .right-18-20 { position: relative; left: 90%; } .right-19-20 { position: relative; left: 95%; } .right-20-20 { position: relative; left: 100%; } .left-1-20 { position: relative; right: 5%; } .left-2-20 { position: relative; right: 10%; } .left-3-20 { position: relative; right: 15%; } .left-4-20 { position: relative; right: 20%; } .left-5-20 { position: relative; right: 25%; } .left-6-20 { position: relative; right: 30%; } .left-7-20 { position: relative; right: 35%; } .left-8-20 { position: relative; right: 40%; } .left-9-20 { position: relative; right: 45%; } .left-10-20 { position: relative; right: 50%; } .left-11-20 { position: relative; right: 55%; } .left-12-20 { position: relative; right: 60%; } .left-13-20 { position: relative; right: 65%; } .left-14-20 { position: relative; right: 70%; } .left-15-20 { position: relative; right: 75%; } .left-16-20 { position: relative; right: 80%; } .left-17-20 { position: relative; right: 85%; } .left-18-20 { position: relative; right: 90%; } .left-19-20 { position: relative; right: 95%; } .left-20-20 { position: relative; right: 100%; } /* High density screen specific */ @media screen and (-webkit-min-device-pixel-ratio: 2) { } /* HD standard laptop to 4K to 8K */ @media screen and (min-width: 1900px) { } /* Current standard laptop */ @media screen and (min-width: 1200px) and (max-width: 1899px) { } /* 800px to tablet to old laptop */ @media screen and (min-width: 800px) and (max-width: 1199px) { } /* Small Mobile to 800px */ @media screen and (min-width: 240px) and (max-width: 799px) { .body { min-width:240px !important; max-width:799px; width:100%; } img { max-width:100%; width: 100%; height: auto; } .container { box-sizing: border-box !important; min-width:240px !important; max-width:799px; width:100%; } [class~=row] { min-width:240px !important; max-width:799px; width:100%; } [class|=col] { width: 100%; } [class|=left-1],[class|=left-2],[class|=right-1],[class|=right-2] { left: 0; } .right-1-16 { position: relative; left: 0; } .right-2-16 { position: relative; left: 0; } .right-3-16 { position: relative; left: 0; } .right-4-16 { position: relative; left: 0; } .right-5-16 { position: relative; left: 0; } .right-6-16 { position: relative; left: 0; } .right-7-16 { position: relative; left: 0; } .right-8-16 { position: relative; left: 0; } .right-9-16 { position: relative; left: 0; } .right-10-16 { position: relative; left: 0; } .right-11-16 { position: relative; left: 0; } .right-12-16 { position: relative; left: 0; } .right-13-16 { position: relative; left: 0; } .right-14-16 { position: relative; left: 0; } .right-15-16 { position: relative; left: 0; } .right-16-16 { position: relative; left: 0; } .left-1-16 { position: relative; right: 0; } .left-2-16 { position: relative; right: 0; } .left-3-16 { position: relative; right: 0; } .left-4-16 { position: relative; right: 0; } .left-5-16 { position: relative; right: 0; } .left-6-16 { position: relative; right: 0; } .left-7-16 { position: relative; right: 0; } .left-8-16 { position: relative; right: 0; } .left-9-16 { position: relative; right: 0; } .left-10-16 { position: relative; right: 0; } .left-11-16 { position: relative; right: 0; } .left-12-16 { position: relative; right: 0; } .left-13-16 { position: relative; right: 0; } .left-14-16 { position: relative; right: 0; } .left-15-16 { position: relative; right: 0; } .left-16-16 { position: relative; right: 0; } .right-1-17 { position: relative; left: 0; } .right-2-17 { position: relative; left: 0; } .right-3-17 { position: relative; left: 0; } .right-5-17 { position: relative; left: 0; } .right-7-17 { position: relative; left: 0; } .right-8-17 { position: relative; left: 0; } .right-9-17 { position: relative; left: 0; } .right-11-17 { position: relative; left: 0; } .right-12-17 { position: relative; left: 0; } .right-14-17 { position: relative; left: 0; } .right-17-17 { position: relative; left: 0; } .left-1-17 { position: relative; right: 0; } .left-2-17 { position: relative; right: 0; } .left-3-17 { position: relative; right: 0; } .left-5-17 { position: relative; right: 0; } .left-7-17 { position: relative; right: 0; } .left-8-17 { position: relative; right: 0; } .left-9-17 { position: relative; right: 0; } .left-11-17 { position: relative; right: 0; } .left-12-17 { position: relative; right: 0; } .left-14-17 { position: relative; right: 0; } .left-17-17 { position: relative; right: 0; } .right-1-20 { position: relative; left: 0; } .right-2-20 { position: relative; left: 0; } .right-3-20 { position: relative; left: 0; } .right-4-20 { position: relative; left: 0; } .right-5-20 { position: relative; left: 0; } .right-6-20 { position: relative; left: 0; } .right-7-20 { position: relative; left: 0; } .right-8-20 { position: relative; left: 0; } .right-9-20 { position: relative; left: 0; } .right-10-20 { position: relative; left: 0; } .right-11-20 { position: relative; left: 0; } .right-12-20 { position: relative; left: 0; } .right-13-20 { position: relative; left: 0; } .right-14-20 { position: relative; left: 0; } .right-15-20 { position: relative; left: 0; } .right-16-20 { position: relative; left: 0; } .right-17-20 { position: relative; left: 0; } .right-18-20 { position: relative; left: 0; } .right-19-20 { position: relative; left: 0; } .right-20-20 { position: relative; left: 0; } .left-1-20 { position: relative; right: 0; } .left-2-20 { position: relative; right: 0; } .left-3-20 { position: relative; right: 0; } .left-4-20 { position: relative; right: 0; } .left-5-20 { position: relative; right: 0; } .left-6-20 { position: relative; right: 0; } .left-7-20 { position: relative; right: 0; } .left-8-20 { position: relative; right: 0; } .left-9-20 { position: relative; right: 0; } .left-10-20 { position: relative; right: 0; } .left-11-20 { position: relative; right: 0; } .left-12-20 { position: relative; right: 0; } .left-13-20 { position: relative; right: 0; } .left-14-20 { position: relative; right: 0; } .left-15-20 { position: relative; right: 0; } .left-16-20 { position: relative; right: 0; } .left-17-20 { position: relative; right: 0; } .left-18-20 { position: relative; right: 0; } .left-19-20 { position: relative; right: 0; } .left-20-20 { position: relative; right: 0; } }