@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono'); @import url('https://fonts.googleapis.com/css?family=Montserrat:800,900'); :root { --color1: #813ec4; --color2: #0b9cbc; --color3: #57d1b6; --color4: #ff4828; --font: "RobotoDraft", "Roboto", "Helvetica", sans-serif; --grid-height: 100px; } ::selection { background-color: rgba(35, 107, 196, .5); background-color: var(--color1); } * { position: relative; font-family: "RobotoDraft", "Roboto", "Helvetica", sans-serif; font-family: var(--font); text-align: center; } p { margin: 0; } .overflow { overflow: auto; } .overflow-x { overflow-x: auto; } .overflow-y { overflow-y: auto; } .\!overflow { overflow: hidden; } .\!overflow-x { overflow-x: hidden; } .\!overflow-y { overflow-y: hidden; } .\!display { display: none; } .block { display: block; } .\!visible { visibility: hidden; } .\!opacity { opacity: 0; } .opacity\.1{ opacity: .1; } .opacity\.2{ opacity: .2; } .opacity\.3{ opacity: .3; } .opacity\.4{ opacity: .4; } .opacity\.5{ opacity: .5; } .opacity\.6{ opacity: .6; } .opacity\.7{ opacity: .7; } .opacity\.8{ opacity: .8; } .opacity\.9{ opacity: .9; } .border1-1 { border: 1px solid #813ec4; border: 1px solid var(--color1); } .bordert1-1 { border-top: 1px solid #813ec4; border-top: 1px solid var(--color1); } .borderr1-1 { border-right: 1px solid #813ec4; border-right: 1px solid var(--color1); } .borderb1-1 { border-bottom: 1px solid #813ec4; border-bottom: 1px solid var(--color1); } .borderl1-1 { border-left: 1px solid #813ec4; border-left: 1px solid var(--color1); } .border2-1 { border: 2px solid #813ec4; border: 2px solid var(--color1); } .bordert2-1 { border-top: 2px solid #813ec4; border-top: 2px solid var(--color1); } .borderr2-1 { border-right: 2px solid #813ec4; border-right: 2px solid var(--color1); } .borderb2-1 { border-bottom: 2px solid #813ec4; border-bottom: 2px solid var(--color1); } .borderl2-1 { border-left: 2px solid #813ec4; border-left: 2px solid var(--color1); } .border3-1 { border: 3px solid #813ec4; border: 3px solid var(--color1); } .bordert3-1 { border-top: 3px solid #813ec4; border-top: 3px solid var(--color1); } .borderr3-1 { border-right: 3px solid #813ec4; border-right: 3px solid var(--color1); } .borderb3-1 { border-bottom: 3px solid #813ec4; border-bottom: 3px solid var(--color1); } .borderl3-1 { border-left: 3px solid #813ec4; border-left: 3px solid var(--color1); } .border4-1 { border: 4px solid #813ec4; border: 4px solid var(--color1); } .bordert4-1 { border-top: 4px solid #813ec4; border-top: 4px solid var(--color1); } .borderr4-1 { border-right: 4px solid #813ec4; border-right: 4px solid var(--color1); } .borderb4-1 { border-bottom: 4px solid #813ec4; border-bottom: 4px solid var(--color1); } .borderl4-1 { border-left: 4px solid #813ec4; border-left: 4px solid var(--color1); } .border5-1 { border: 5px solid #813ec4; border: 5px solid var(--color1); } .bordert5-1 { border-top: 5px solid #813ec4; border-top: 5px solid var(--color1); } .borderr5-1 { border-right: 5px solid #813ec4; border-right: 5px solid var(--color1); } .borderb5-1 { border-bottom: 5px solid #813ec4; border-bottom: 5px solid var(--color1); } .borderl5-1 { border-left: 5px solid #813ec4; border-left: 5px solid var(--color1); } .border1-2 { border: 1px solid #0b9cbc; border: 1px solid var(--color2); } .bordert1-2 { border-top: 1px solid #0b9cbc; border-top: 1px solid var(--color2); } .borderr1-2 { border-right: 1px solid #0b9cbc; border-right: 1px solid var(--color2); } .borderb1-2 { border-bottom: 1px solid #0b9cbc; border-bottom: 1px solid var(--color2); } .borderl1-2 { border-left: 1px solid #0b9cbc; border-left: 1px solid var(--color2); } .border2-2 { border: 2px solid #0b9cbc; border: 2px solid var(--color2); } .bordert2-2 { border-top: 2px solid #0b9cbc; border-top: 2px solid var(--color2); } .borderr2-2 { border-right: 2px solid #0b9cbc; border-right: 2px solid var(--color2); } .borderb2-2 { border-bottom: 2px solid #0b9cbc; border-bottom: 2px solid var(--color2); } .borderl2-2 { border-left: 2px solid #0b9cbc; border-left: 2px solid var(--color2); } .border3-2 { border: 3px solid #0b9cbc; border: 3px solid var(--color2); } .bordert3-2 { border-top: 3px solid #0b9cbc; border-top: 3px solid var(--color2); } .borderr3-2 { border-right: 3px solid #0b9cbc; border-right: 3px solid var(--color2); } .borderb3-2 { border-bottom: 3px solid #0b9cbc; border-bottom: 3px solid var(--color2); } .borderl4-2 { border-left: 4px solid #0b9cbc; border-left: 4px solid var(--color2); } .border5-2 { border: 5px solid #0b9cbc; border: 5px solid var(--color2); } .bordert5-2 { border-top: 5px solid #0b9cbc; border-top: 5px solid var(--color2); } .borderr5-2 { border-right: 5px solid #0b9cbc; border-right: 5px solid var(--color2); } .borderb5-2 { border-bottom: 5px solid #0b9cbc; border-bottom: 5px solid var(--color2); } .borderl5-2 { border-left: 5px solid #0b9cbc; border-left: 5px solid var(--color2); } .border1-3 { border: 1px solid #57d1b6; border: 1px solid var(--color3); } .bordert1-3 { border-top: 1px solid #57d1b6; border-top: 1px solid var(--color3); } .borderr1-3 { border-right: 1px solid #57d1b6; border-right: 1px solid var(--color3); } .borderb1-3 { border-bottom: 1px solid #57d1b6; border-bottom: 1px solid var(--color3); } .borderl1-3 { border-left: 1px solid #57d1b6; border-left: 1px solid var(--color3); } .border2-3 { border: 2px solid #57d1b6; border: 2px solid var(--color3); } .bordert2-3 { border-top: 2px solid #57d1b6; border-top: 2px solid var(--color3); } .borderr2-3 { border-right: 2px solid #57d1b6; border-right: 2px solid var(--color3); } .borderb2-3 { border-bottom: 2px solid #57d1b6; border-bottom: 2px solid var(--color3); } .borderl2-3 { border-left: 2px solid #57d1b6; border-left: 2px solid var(--color3); } .border3-3 { border: 3px solid #57d1b6; border: 3px solid var(--color3); } .bordert3-3 { border-top: 3px solid #57d1b6; border-top: 3px solid var(--color3); } .borderr3-3 { border-right: 3px solid #57d1b6; border-right: 3px solid var(--color3); } .borderb3-3 { border-bottom: 3px solid #57d1b6; border-bottom: 3px solid var(--color3); } .borderl3-3 { border-left: 3px solid #57d1b6; border-left: 3px solid var(--color3); } .border4-3 { border: 4px solid #57d1b6; border: 4px solid var(--color3); } .bordert4-3 { border-top: 4px solid #57d1b6; border-top: 4px solid var(--color3); } .borderr4-3 { border-right: 4px solid #57d1b6; border-right: 4px solid var(--color3); } .borderb4-3 { border-bottom: 4px solid #57d1b6; border-bottom: 4px solid var(--color3); } .borderl4-3 { border-left: 4px solid #57d1b6; border-left: 4px solid var(--color3); } .border5-3 { border: 5px solid #57d1b6; border: 5px solid var(--color3); } .bordert5-3 { border-top: 5px solid #57d1b6; border-top: 5px solid var(--color3); } .borderr5-3 { border-right: 5px solid #57d1b6; border-right: 5px solid var(--color3); } .borderb5-3 { border-bottom: 5px solid #57d1b6; border-bottom: 5px solid var(--color3); } .borderl5-3 { border-left: 5px solid #57d1b6; border-left: 5px solid var(--color3); } .border1-4 { border: 1px solid #ff4828; border: 1px solid var(--color4); } .bordert1-4 { border-top: 1px solid #ff4828; border-top: 1px solid var(--color4); } .borderr1-4 { border-right: 1px solid #ff4828; border-right: 1px solid var(--color4); } .borderb1-4 { border-bottom: 1px solid #ff4828; border-bottom: 1px solid var(--color4); } .borderl1-4 { border-left: 1px solid #ff4828; border-left: 1px solid var(--color4); } .border2-4 { border: 2px solid #ff4828; border: 2px solid var(--color4); } .bordert2-4 { border-top: 2px solid #ff4828; border-top: 2px solid var(--color4); } .borderr2-4 { border-right: 2px solid #ff4828; border-right: 2px solid var(--color4); } .borderb2-4 { border-bottom: 2px solid #ff4828; border-bottom: 2px solid var(--color4); } .borderl2-4 { border-left: 2px solid #ff4828; border-left: 2px solid var(--color4); } .border3-4 { border: 3px solid #ff4828; border: 3px solid var(--color4); } .bordert3-4 { border-top: 3px solid #ff4828; border-top: 3px solid var(--color4); } .borderr3-4 { border-right: 3px solid #ff4828; border-right: 3px solid var(--color4); } .borderb3-4 { border-bottom: 3px solid #ff4828; border-bottom: 3px solid var(--color4); } .borderl3-4 { border-left: 3px solid #ff4828; border-left: 3px solid var(--color4); } .border4-4 { border: 4px solid #ff4828; border: 4px solid var(--color4); } .bordert4-4 { border-top: 4px solid #ff4828; border-top: 4px solid var(--color4); } .borderr4-4 { border-right: 4px solid #ff4828; border-right: 4px solid var(--color4); } .borderb4-4 { border-bottom: 4px solid #ff4828; border-bottom: 4px solid var(--color4); } .borderl4-4 { border-left: 4px solid #ff4828; border-left: 4px solid var(--color4); } .border5-4 { border: 5px solid #ff4828; border: 5px solid var(--color4); } .bordert5-4 { border-top: 5px solid #ff4828; border-top: 5px solid var(--color4); } .borderr5-4 { border-right: 5px solid #ff4828; border-right: 5px solid var(--color4); } .borderb5-4 { border-bottom: 5px solid #ff4828; border-bottom: 5px solid var(--color4); } .borderl5-4 { border-left: 5px solid #ff4828; border-left: 5px solid var(--color4); } .fixed { position: fixed !important; } .font-roboto { font-family: "RobotoDraft", "Roboto", "Helvetica", sans-serif; } .font-roboto\*>* { font-family: "RobotoDraft", "Roboto", "Helvetica", sans-serif; } .font-montserrat { font-family: 'Montserrat', sans-serif; font-weight: 800; } .font-montserrat\*>* { font-family: 'Montserrat', sans-serif; font-weight: 800; } .font-montserrat2 { font-family: 'Montserrat', sans-serif; font-weight: 900; } .font-montserrat2\*>* { font-family: 'Montserrat', sans-serif; font-weight: 900; } h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 900; } h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 800; } html, body { margin: 0; height: 100%; } h1 { color: var(--color1); } a { text-decoration: none; color: purple; color: var(--color1); } p, span, h2, h3, h4, h5, h6 { color: inherit; } div, section, main { color: rgba(0, 0, 0, 0.7); } img { height: 100%; width: 100%; } ul { list-style: none; list-style-type: none; margin-left: 0; } .z10 { z-index: 10; } .z20 { z-index: 20; } .z30 { z-index: 30; } .z40 { z-index: 40; } .z50 { z-index: 50; } .z60 { z-index: 60; } .z70 { z-index: 70; } .z80 { z-index: 80; } .z90 { z-index: 90; } .z100 { z-index: 100; } .z200 { z-index: 200; } .z300 { z-index: 300; } .z400 { z-index: 400; } .z500 { z-index: 500; } .z600 { z-index: 600; } .z700 { z-index: 700; } .z800 { z-index: 800; } .z900 { z-index: 900; } .z1000 { z-index: 1000; } .white { background-color: #fff; } .white\*>* { background-color: #fff; } .white2 { background-color: #eee; } .white2\*>* { background-color: #eee; } .white3 { background-color: #ddd; } .white3\*>* { background-color: #ddd; } .white4 { background-color: #ccc; } .white4\*>* { background-color: #ccc; } .white5 { background-color: #bbb; } .white5\*>* { background-color: #bbb; } .grey { background-color: #aaa; } .grey\*>* { background-color: #aaa; } .grey2 { background-color: #999; } .grey2\*>* { background-color: #999; } .grey3 { background-color: #888; } .grey3\*>* { background-color: #888; } .grey4 { background-color: #777; } .grey4\*>* { background-color: #777; } .grey5 { background-color: #666; } .grey5\*>* { background-color: #666; } .grey6 { background-color: #555; } .grey6\*>* { background-color: #555; } .black { background-color: #444; } .black\*>* { background-color: #444; } .black2 { background-color: #333; } .black2\*>* { background-color: #333; } .black3 { background-color: #222; } .black3\*>* { background-color: #222; } .black4 { background-color: #111; } .black4\*>* { background-color: #111; } .black5 { background-color: #000; } .black5\*>* { background-color: #000; } .bcolor-white { background-color: #fff; } .bcolor-white\*>* { background-color: #fff; } .bcolor-white2 { background-color: #eee; } .bcolor-white2\*>* { background-color: #eee; } .bcolor-white3 { background-color: #ddd; } .bcolor-white3\*>* { background-color: #ddd; } .bcolor-white4 { background-color: #ccc; } .bcolor-white4\*>* { background-color: #ccc; } .bcolor-white5 { background-color: #bbb; } .bcolor-white5\*>* { background-color: #bbb; } .bcolor-grey { background-color: #aaa; } .bcolor-grey\*>* { background-color: #aaa; } .bcolor-grey2 { background-color: #999; } .bcolor-grey2\*>* { background-color: #999; } .bcolor-grey3 { background-color: #888; } .bcolor-grey3\*>* { background-color: #888; } .bcolor-grey4 { background-color: #777; } .bcolor-grey4\*>* { background-color: #777; } .bcolor-grey5 { background-color: #666; } .bcolor-grey5\*>* { background-color: #666; } .bcolor-grey6 { background-color: #555; } .bcolor-grey6\*>* { background-color: #555; } .bcolor-black { background-color: #444; } .bcolor-black\*>* { background-color: #444; } .bcolor-black2 { background-color: #333; } .bcolor-black2\*>* { background-color: #333; } .bcolor-black3 { background-color: #222; } .bcolor-black3\*>* { background-color: #222; } .bcolor-black4 { background-color: #111; } .bcolor-black4\*>* { background-color: #111; } .bcolor-black5 { background-color: #000; } .bcolor-black5\*>* { background-color: #000; } .fcolor-white { color: #fff; } .fcolor-white\*>* { color: #fff; } .fcolor-white2 { color: #eee; } .fcolor-white2\*>* { color: #eee; } .fcolor-white3 { color: #ddd; } .fcolor-white3\*>* { color: #ddd; } .fcolor-white4 { color: #ccc; } .fcolor-white4\*>* { color: #ccc; } .fcolor-white5 { color: #bbb; } .fcolor-white5\*>* { color: #bbb; } .fcolor-grey { color: #aaa; } .fcolor-grey\*>* { color: #aaa; } .fcolor-grey2 { color: #999; } .fcolor-grey2\*>* { color: #999; } .fcolor-grey3 { color: #888; } .fcolor-grey3\*>* { color: #888; } .fcolor-grey4 { color: #777; } .fcolor-grey4\*>* { color: #777; } .fcolor-grey5 { color: #666; } .fcolor-grey5\*>* { color: #666; } .fcolor-grey6 { color: #555; } .fcolor-grey6\*>* { color: #555; } .fcolor-black { color: #444; } .fcolor-black\*>* { color: #444; } .fcolor-black2 { color: #333; } .fcolor-black2\*>* { color: #333; } .fcolor-black3 { color: #222; } .fcolor-black3\*>* { color: #222; } .fcolor-black4 { color: #111; } .fcolor-black4\*>* { color: #111; } .fcolor-black5 { color: #000; } .fcolor-black5\*>* { color: #000; } .\@fcolor-white:hover{ color:#fff; } .\@fcolor-grey:hover{ color:#aaa; } .\@fcolor-black:hover{ color:#444; } .\@fcolor-black5:hover{ color:#000; } .\@bcolor-white:hover{ background:#fff; } .\@bcolor-grey:hover{ background:#aaa; } .\@bcolor-black:hover{ background:#444; } .\@bcolor-black5:hover{ background:#000; } .border2-white { border:2px solid #fff; } .bordert2-white { border-top:2px solid #fff; } .borderr2-white { border-right:2px solid #fff; } .borderb2-white { border-bottom:2px solid #fff; } .borderl2-white { border-left:2px solid #fff; } .border2-black { border:2px solid #444; } .bordert2-black { border-top:2px solid #444; } .borderr2-black { border-right:2px solid #444; } .borderb2-black { border-bottom:2px solid #444; } .borderl2-black { border-left:2px solid #444; } .border2-black5 { border:2px solid #000; } .bordert2-black5 { border-top:2px solid #000; } .borderr2-black5 { border-right:2px solid #000; } .borderb2-black5 { border-bottom:2px solid #000; } .borderl2-black5 { border-left:2px solid #000; } .margin10 { margin:10px } .margin10\*>* { margin:10px } .margin20 { margin:20px } .margin20\*>* { margin:20px } .margin30 { margin:30px } .margin30\*>* { margin:30px } .margin40 { margin:40px } .margin40\*>* { margin:40px } .margin50 { margin:50px } .margin50\*>* { margin:50px } .margin60 { margin:60px } .margin60\*>* { margin:60px } .margin70 { margin:70px } .margin70\*>* { margin:70px } .margin80 { margin:80px } .margin80\*>* { margin:80px } .margin90 { margin:90px } .margin90\*>* { margin:90px } .margin100 { margin:100px } .margin100\*>* { margin:100px } .margin10-top { margin-top:10px } .margin10-top\*>* { margin-top:10px } .margin20-top { margin-top:20px } .margin20-top\*>* { margin-top:20px } .margin30-top { margin-top:30px } .margin30-top\*>* { margin-top:30px } .margin40-top { margin-top:40px } .margin40-top\*>* { margin-top:40px } .margin50-top { margin-top:50px } .margin50-top\*>* { margin-top:50px } .margin60-top { margin-top:60px } .margin60-top\*>* { margin-top:60px } .margin70-top { margin-top:70px } .margin70-top\*>* { margin-top:70px } .margin80-top { margin-top:80px } .margin80-top\*>* { margin-top:80px } .margin90-top { margin-top:90px } .margin90-top\*>* { margin-top:90px } .margin100-top { margin-top:100px } .margin100-top\*>* { margin-top:100px } .margin10-bottom { margin-bottom:10px } .margin10-bottom\*>* { margin-bottom:10px } .margin20-bottom { margin-bottom:20px } .margin20-bottom\*>* { margin-bottom:20px } .margin30-bottom { margin-bottom:30px } .margin30-bottom\*>* { margin-bottom:30px } .margin40-bottom { margin-bottom:40px } .margin40-bottom\*>* { margin-bottom:40px } .margin50-bottom { margin-bottom:50px } .margin50-bottom\*>* { margin-bottom:50px } .margin60-bottom { margin-bottom:60px } .margin60-bottom\*>* { margin-bottom:60px } .margin70-bottom { margin-bottom:70px } .margin70-bottom\*>* { margin-bottom:70px } .margin80-bottom { margin-bottom:80px } .margin80-bottom\*>* { margin-bottom:80px } .margin90-bottom { margin-bottom:90px } .margin90-bottom\*>* { margin-bottom:90px } .margin100-bottom { margin-bottom:100px } .margin100-bottom\*>* { margin-bottom:100px } .margin10-top-bottom { margin:10px 0 10px 0 } .margin10-top-bottom\*>* { margin:10px 0 10px 0 } .margin20-top-bottom { margin:20px 0 20px 0 } .margin20-top-bottom\*>* { margin:20px 0 20px 0 } .margin30-top-bottom { margin:30px 0 30px 0 } .margin30-top-bottom\*>* { margin:30px 0 30px 0 } .margin40-top-bottom { margin:40px 0 40px 0 } .margin40-top-bottom\*>* { margin:40px 0 40px 0 } .margin50-top-bottom { margin:50px 0 50px 0 } .margin50-top-bottom\*>* { margin:50px 0 50px 0 } .margin60-top-bottom { margin:60px 0 60px 0 } .margin60-top-bottom\*>* { margin:60px 0 60px 0 } .margin70-top-bottom { margin:70px 0 70px 0 } .margin70-top-bottom\*>* { margin:70px 0 70px 0 } .margin80-top-bottom { margin:80px 0 80px 0 } .margin80-top-bottom\*>* { margin:80px 0 80px 0 } .margin90-top-bottom { margin:90px 0 90px 0 } .margin90-top-bottom\*>* { margin:90px 0 90px 0 } .margin100-top-bottom { margin:100px 0 100px 0 } .margin100-top-bottom\*>* { margin:100px 0 100px 0 } .margin10-left { margin-left:10px } .margin10-left\*>* { margin-left:10px } .margin20-left { margin-left:20px } .margin20-left\*>* { margin-left:20px } .margin30-left { margin-left:30px } .margin30-left\*>* { margin-left:30px } .margin40-left { margin-left:40px } .margin40-left\*>* { margin-left:40px } .margin50-left { margin-left:50px } .margin50-left\*>* { margin-left:50px } .margin60-left { margin-left:60px } .margin60-left\*>* { margin-left:60px } .margin70-left { margin-left:70px } .margin70-left\*>* { margin-left:70px } .margin80-left { margin-left:80px } .margin80-left\*>* { margin-left:80px } .margin90-left { margin-left:90px } .margin90-left\*>* { margin-left:90px } .margin100-left { margin-left:100px } .margin100-left\*>* { margin-left:100px } .margin10-right { margin-right:10px } .margin10-right\*>* { margin-right:10px } .margin20-right { margin-right:20px } .margin20-right\*>* { margin-right:20px } .margin30-right { margin-right:30px } .margin30-right\*>* { margin-right:30px } .margin40-right { margin-right:40px } .margin40-right\*>* { margin-right:40px } .margin50-right { margin-right:50px } .margin50-right\*>* { margin-right:50px } .margin60-right { margin-right:60px } .margin60-right\*>* { margin-right:60px } .margin70-right { margin-right:70px } .margin70-right\*>* { margin-right:70px } .margin80-right { margin-right:80px } .margin80-right\*>* { margin-right:80px } .margin90-right { margin-right:90px } .margin90-right\*>* { margin-right:90px } .margin100-right { margin-right:100px } .margin100-right\*>* { margin-right:100px } .margin10-left-right { margin:0 10px 0 10px } .margin10-left-right\*>* { margin:0 10px 0 10px } .margin20-left-right { margin:0 20px 0 20px } .margin20-left-right\*>* { margin:0 20px 0 20px } .margin30-left-right { margin:0 30px 0 30px } .margin30-left-right\*>* { margin:0 30px 0 30px } .margin40-left-right { margin:0 40px 0 40px } .margin40-left-right\*>* { margin:0 40px 0 40px } .margin50-left-right { margin:0 50px 0 50px } .margin50-left-right\*>* { margin:0 50px 0 50px } .margin60-left-right { margin:0 60px 0 60px } .margin60-left-right\*>* { margin:0 60px 0 60px } .margin70-left-right { margin:0 70px 0 70px } .margin70-left-right\*>* { margin:0 70px 0 70px } .margin80-left-right { margin:0 80px 0 80px } .margin80-left-right\*>* { margin:0 80px 0 80px } .margin90-left-right { margin:0 90px 0 90px } .margin90-left-right\*>* { margin:0 90px 0 90px } .margin100-left-right { margin:0 100px 0 100px } .margin100-left-right\*>* { margin:0 100px 0 100px } .padding10 { padding:10px; } .padding10\*>* { padding:10px; } .padding20 { padding:20px; } .padding20\*>* { padding:20px; } .padding30 { padding:30px; } .padding30\*>* { padding:30px; } .padding40 { padding:40px; } .padding40\*>* { padding:40px; } .padding50 { padding:50px; } .padding50\*>* { padding:50px; } .padding60 { padding:60px; } .padding60\*>* { padding:60px; } .padding70 { padding:70px; } .padding70\*>* { padding:70px; } .padding80 { padding:80px; } .padding80\*>* { padding:80px; } .padding90 { padding:90px; } .padding90\*>* { padding:90px; } .padding100 { padding:100px; } .padding100\*>* { padding:100px; } .padding10-top { padding-top:10px; } .padding10-top\*>* { padding-top:10px; } .padding20-top { padding-top:20px; } .padding20-top\*>* { padding-top:20px; } .padding30-top { padding-top:30px; } .padding30-top\*>* { padding-top:30px; } .padding40-top { padding-top:40px; } .padding40-top\*>* { padding-top:40px; } .padding50-top { padding-top:50px; } .padding50-top\*>* { padding-top:50px; } .padding60-top { padding-top:60px; } .padding60-top\*>* { padding-top:60px; } .padding70-top { padding-top:70px; } .padding70-top\*>* { padding-top:70px; } .padding80-top { padding-top:80px; } .padding80-top\*>* { padding-top:80px; } .padding90-top { padding-top:90px; } .padding90-top\*>* { padding-top:90px; } .padding100-top { padding-top:100px; } .padding100-top\*>* { padding-top:100px; } .padding10-bottom { padding-bottom:10px; } .padding10-bottom\*>* { padding-bottom:10px; } .padding20-bottom { padding-bottom:20px; } .padding20-bottom\*>* { padding-bottom:20px; } .padding30-bottom { padding-bottom:30px; } .padding30-bottom\*>* { padding-bottom:30px; } .padding40-bottom { padding-bottom:40px; } .padding40-bottom\*>* { padding-bottom:40px; } .padding50-bottom { padding-bottom:50px; } .padding50-bottom\*>* { padding-bottom:50px; } .padding60-bottom { padding-bottom:60px; } .padding60-bottom\*>* { padding-bottom:60px; } .padding70-bottom { padding-bottom:70px; } .padding70-bottom\*>* { padding-bottom:70px; } .padding80-bottom { padding-bottom:80px; } .padding80-bottom\*>* { padding-bottom:80px; } .padding90-bottom { padding-bottom:90px; } .padding90-bottom\*>* { padding-bottom:90px; } .padding100-bottom { padding-bottom:100px; } .padding100-bottom\*>* { padding-bottom:100px; } .padding10-top-bottom { padding:10px 0 10px 0; } .padding10-top-bottom\*>* { padding:10px 0 10px 0; } .padding20-top-bottom { padding:20px 0 20px 0; } .padding20-top-bottom\*>* { padding:20px 0 20px 0; } .padding30-top-bottom { padding:30px 0 30px 0; } .padding30-top-bottom\*>* { padding:30px 0 30px 0; } .padding40-top-bottom { padding:40px 0 40px 0; } .padding40-top-bottom\*>* { padding:40px 0 40px 0; } .padding50-top-bottom { padding:50px 0 50px 0; } .padding50-top-bottom\*>* { padding:50px 0 50px 0; } .padding60-top-bottom { padding:60px 0 60px 0; } .padding60-top-bottom\*>* { padding:60px 0 60px 0; } .padding70-top-bottom { padding:70px 0 70px 0; } .padding70-top-bottom\*>* { padding:70px 0 70px 0; } .padding80-top-bottom { padding:80px 0 80px 0; } .padding80-top-bottom\*>* { padding:80px 0 80px 0; } .padding90-top-bottom { padding:90px 0 90px 0; } .padding90-top-bottom\*>* { padding:90px 0 90px 0; } .padding100-top-bottom { padding:100px 0 100px 0; } .padding100-top-bottom\*>* { padding:100px 0 100px 0; } .padding10-left { padding-left:10px; } .padding10-left\*>* { padding-left:10px; } .padding20-left { padding-left:20px; } .padding20-left\*>* { padding-left:20px; } .padding30-left { padding-left:30px; } .padding30-left\*>* { padding-left:30px; } .padding40-left { padding-left:40px; } .padding40-left\*>* { padding-left:40px; } .padding50-left { padding-left:50px; } .padding50-left\*>* { padding-left:50px; } .padding60-left { padding-left:60px; } .padding60-left\*>* { padding-left:60px; } .padding70-left { padding-left:70px; } .padding70-left\*>* { padding-left:70px; } .padding80-left { padding-left:80px; } .padding80-left\*>* { padding-left:80px; } .padding90-left { padding-left:90px; } .padding90-left\*>* { padding-left:90px; } .padding100-left { padding-left:100px; } .padding100-left\*>* { padding-left:100px; } .padding10-right { padding-right:10px; } .padding10-right\*>* { padding-right:10px; } .padding20-right { padding-right:20px; } .padding20-right\*>* { padding-right:20px; } .padding30-right { padding-right:30px; } .padding30-right\*>* { padding-right:30px; } .padding40-right { padding-right:40px; } .padding40-right\*>* { padding-right:40px; } .padding50-right { padding-right:50px; } .padding50-right\*>* { padding-right:50px; } .padding60-right { padding-right:60px; } .padding60-right\*>* { padding-right:60px; } .padding70-right { padding-right:70px; } .padding70-right\*>* { padding-right:70px; } .padding80-right { padding-right:80px; } .padding80-right\*>* { padding-right:80px; } .padding90-right { padding-right:90px; } .padding90-right\*>* { padding-right:90px; } .padding100-right { padding-right:100px; } .padding100-right\*>* { padding-right:100px; } .padding10-left-right { padding:0 10px 0 10px; } .padding10-left-right\*>* { padding:0 10px 0 10px; } .padding20-left-right { padding:0 20px 0 20px; } .padding20-left-right\*>* { padding:0 20px 0 20px; } .padding30-left-right { padding:0 30px 0 30px; } .padding30-left-right\*>* { padding:0 30px 0 30px; } .padding40-left-right { padding:0 40px 0 40px; } .padding40-left-right\*>* { padding:0 40px 0 40px; } .padding50-left-right { padding:0 50px 0 50px; } .padding50-left-right\*>* { padding:0 50px 0 50px; } .padding60-left-right { padding:0 60px 0 60px; } .padding60-left-right\*>* { padding:0 60px 0 60px; } .padding70-left-right { padding:0 70px 0 70px; } .padding70-left-right\*>* { padding:0 70px 0 70px; } .padding80-left-right { padding:0 80px 0 80px; } .padding80-left-right\*>* { padding:0 80px 0 80px; } .padding90-left-right { padding:0 90px 0 90px; } .padding90-left-right\*>* { padding:0 90px 0 90px; } .padding100-left-right { padding:0 100px 0 100px; } .padding100-left-right\*>* { padding:0 100px 0 100px; } .bcolor1 { background-color:#813ec4; background-color:var(--color1); } .bcolor1\*>* { background-color:#813ec4; background-color:var(--color1); } .fcolor1 { color:#813ec4; color:var(--color1); } .fcolor1\*>* { color:#813ec4; color:var(--color1); } .bcolor2 { background-color:#0b9cbc; background-color:var(--color2); } .bcolor2\*>* { background-color:#0b9cbc; background-color:var(--color2); } .fcolor2 { color:#0b9cbc; color:var(--color2); } .fcolor2\*>* { color:#0b9cbc; color:var(--color2); } .bcolor3 { background-color:#57d1b6; background-color:var(--color3); } .bcolor3\*>* { background-color:#57d1b6; background-color:var(--color3); } .fcolor3 { color:#57d1b6; color:var(--color3); } .fcolor3\*>* { color:#57d1b6; color:var(--color3); } .bcolor4 { background-color:#ff4828; background-color:var(--color4); } .bcolor4\*>* { background-color:#ff4828; background-color:var(--color4); } .fcolor4 { color:#ff4828; color:var(--color4); } .fcolor4\*>* { color:#ff4828; color:var(--color4); } .flex { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .flex\*>* { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .flex-column { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; } .flex-column\*>* { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; } .flex-left { -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start !important; } .flex-right { -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end !important; } .flex-top { align-items:flex-start !important; } .flex-bottom { align-items:flex-end !important; } .float-right { float:right; } .float-left { float:left; } .clear { clear:both; } /* width */ .w5 { width:5%; } .w5\*>* { width:5%; } .w10 { width:10%; } .w10\*>* { width:10%; } .w15 { width:15%; } .w15\*>* { width:15%; } .w20 { width:20%; } .w20\*>* { width:20%; } .w25 { width:25%; } .w25\*>* { width:25%; } .w30 { width:30%; } .w30\*>* { width:30%; } .w35 { width:35%; } .w35\*>* { width:35%; } .w40 { width:40%; } .w40\*>* { width:40%; } .w45 { width:45%; } .w45\*>* { width:45%; } .w50 { width:50%; } .w50\*>* { width:50%; } .w55 { width:55%; } .w55\*>* { width:55%; } .w60 { width:60%; } .w60\*>* { width:60%; } .w65 { width:65%; } .w65\*>* { width:65%; } .w70 { width:70%; } .w70\*>* { width:70%; } .w75 { width:75%; } .w75\*>* { width:75%; } .w80 { width:80%; } .w80\*>* { width:80%; } .w85 { width:85%; } .w85\*>* { width:85%; } .w90 { width:90%; } .w90\*>* { width:90%; } .w95 { width:95%; } .w95\*>* { width:95%; } .w100 { width:100%; } .w100\*>* { width:100%; } .vw5 { width:5vw; } .vw10 { width:10vw; } .vw15 { width:15vw; } .vw20 { width:20vw; } .vw25 { width:25vw; } .vw30 { width:30vw; } .vw35 { width:35vw; } .vw40 { width:40vw; } .vw45 { width:45vw; } .vw50 { width:50vw; } .vw55 { width:55vw; } .vw60 { width:60vw; } .vw65 { width:65vw; } .vw70 { width:70vw; } .vw75 { width:75vw; } .vw80 { width:80vw; } .vw85 { width:85vw; } .vw90 { width:90vw; } .vw95 { width:95vw; } .vw100 { width:100vw; } .h1 { height:1%; } .h1\*>* { height:1%; } .h2 { height:2%; } .h2\*>* { height:2%; } .h3 { height:3%; } .h3\*>* { height:3%; } .h4 { height:4%; } .h4\*>* { height:4%; } .h5 { height:5%; } .h5\*>* { height:5%; } .h6 { height:6%; } .h6\*>* { height:6%; } .h7 { height:7%; } .h7\*>* { height:7%; } .h8 { height:8%; } .h8\*>* { height:8%; } .h9 { height:9%; } .h9\*>* { height:9%; } .h10 { height:10%; } .h10\*>* { height:10%; } .h15 { height:15%; } .h15 \*>* { height:15%; } .h20 { height:20%; } .h20\*>* { height:20%; } .h25 { height:25%; } .h25\*>* { height:25%; } .h30 { height:30%; } .h30\*>* { height:30%; } .h35 { height:35%; } .h35\*>* { height:35%; } .h40 { height:40%; } .h40\*>* { height:40%; } .h45 { height:45%; } .h45\*>* { height:45%; } .h50 { height:50%; } .h50\*>* { height:50%; } .h55 { height:55%; } .h55\*>* { height:55%; } .h60 { height:60%; } .h60\*>* { height:60%; } .h65 { height:65%; } .h65\*>* { height:65%; } .h70 { height:70%; } .h70\*>* { height:70%; } .h75 { height:75%; } .h75\*>* { height:75%; } .h80 { height:80%; } .h80\*>* { height:80%; } .h85 { height:85%; } .h85\*>* { height:85%; } .h90 { height:90%; } .h90\*>* { height:90%; } .h91 { height:91%; } .h92 { height:92%; } .h93 { height:93%; } .h94 { height:94%; } .h95 { height:95%; } .h95\*>* { height:95%; } .h96 { height:96%; } .h97 { height:97%; } .h98 { height:98%; } .h99 { height:99%; } .h100 { height:100%; } .h100\*>* { height:100%; } .mh1 { min-height:1%; } .mh1\*>* { min-height:1%; } .mh2 { min-height:2%; } .mh2\*>* { min-height:2%; } .mh3 { min-height:3%; } .mh3\*>* { min-height:3%; } .mh4 { min-height:4%; } .mh4\*>* { min-height:4%; } .mh5 { min-height:5%; } .mh5\*>* { min-height:5%; } .mh6 { min-height:6%; } .mh6\*>* { min-height:6%; } .mh7 { min-height:7%; } .mh7\*>* { min-height:7%; } .mh8 { min-height:8%; } .mh8\*>* { min-height:8%; } .mh9 { min-height:9%; } .mh9\*>* { min-height:9%; } .mh10 { min-height:10%; } .mh10\*>* { min-height:10%; } .mh15 { min-height:15%; } .mh15 \*>* { min-height:15%; } .mh20 { min-height:20%; } .mh20\*>* { min-height:20%; } .mh25 { min-height:25%; } .mh25\*>* { min-height:25%; } .mh30 { min-height:30%; } .mh30\*>* { min-height:30%; } .mh35 { min-height:35%; } .mh35\*>* { min-height:35%; } .mh40 { min-height:40%; } .mh40\*>* { min-height:40%; } .mh45 { min-height:45%; } .mh45\*>* { min-height:45%; } .mh50 { min-height:50%; } .mh50\*>* { min-height:50%; } .mh55 { min-height:55%; } .mh55\*>* { min-height:55%; } .mh60 { min-height:60%; } .mh60\*>* { min-height:60%; } .mh65 { min-height:65%; } .mh65\*>* { min-height:65%; } .mh70 { min-height:70%; } .mh70\*>* { min-height:70%; } .mh75 { min-height:75%; } .mh75\*>* { min-height:75%; } .mh80 { min-height:80%; } .mh80\*>* { min-height:80%; } .mh85 { min-height:85%; } .mh85\*>* { min-height:85%; } .mh90 { min-height:90%; } .mh90\*>* { min-height:90%; } .mh91 { min-height:91%; } .mh92 { min-height:92%; } .mh93 { min-height:93%; } .mh94 { min-height:94%; } .mh95 { min-height:95%; } .mh95\*>* { min-height:95%; } .mh96 { min-height:96%; } .mh97 { min-height:97%; } .mh98 { min-height:98%; } .mh99 { min-height:99%; } .mh100 { min-height:100%; } .mh100\*>* { min-height:100%; } .vh5 { height:5vh; } .vh10 { height:10vh; } .vh15 { height:15vh; } .vh20 { height:20vh; } .vh25 { height:25vh; } .vh30 { height:30vh; } .vh35 { height:35vh; } .vh40 { height:40vh; } .vh45 { height:45vh; } .vh50 { height:50vh; } .vh55 { height:55vh; } .vh60 { height:60vh; } .vh65 { height:65vh; } .vh70 { height:70vh; } .vh75 { height:75vh; } .vh80 { height:80vh; } .vh85 { height:85vh; } .vh90 { height:90vh; } .vh95 { height:95vh; } .vh100 { height:100vh; } .button { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid transparent; -webkit-transition:250ms ease-in-out; -o-transition:250ms ease-in-out; transition:250ms ease-in-out; background-color:#813ec4; background-color:var(--color1); padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button:hover { color:var(--color1); background-color:transparent; border:2px solid #813ec4; border:2px solid var(--color1); } .button-alt { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid #813ec4; border:2px solid var(--color1); background:transparent; -webkit-transition:background-color, border, 250ms ease-in-out; -o-transition:background-color, border, 250ms ease-in-out; transition:background-color, border, 250ms ease-in-out; color:var(--color1); padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button-alt:hover { color:inherit; background-color:#813ec4; background-color:var(--color1); border:2px solid transparent; } .button2 { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid transparent; -webkit-transition:background-color, border, 250ms ease-in-out; -o-transition:background-color, border, 250ms ease-in-out; transition:background-color, border, 250ms ease-in-out; background-color:#0b9cbc; background-color:var(--color2); padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button2:hover { color:var(--color2); background-color:transparent; border:2px solid #0b9cbc; border:2px solid var(--color2); } .button2-alt { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid #0b9cbc; border:2px solid var(--color2); background:transparent; -webkit-transition:background-color, border, 250ms ease-in-out; -o-transition:background-color, border, 250ms ease-in-out; transition:background-color, border, 250ms ease-in-out; color:var(--color2); padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button2-alt:hover { color:inherit; background-color:#0b9cbc; background-color:var(--color2); border:2px solid transparent; } .button3 { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid transparent; -webkit-transition:background-color, border, 250ms ease-in-out; -o-transition:background-color, border, 250ms ease-in-out; transition:background-color, border, 250ms ease-in-out; background-color:#57d1b6; background-color:var(--color3); padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button3:hover { color:var(--color3); background-color:transparent; border:2px solid #57d1b6; border:2px solid var(--color3); } .button3-alt { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid #57d1b6; border:2px solid var(--color3); background:transparent; -webkit-transition:background-color, border, 250ms ease-in-out; -o-transition:background-color, border, 250ms ease-in-out; transition:background-color, border, 250ms ease-in-out; color:var(--color3); padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button3-alt:hover { color:inherit; background-color:#57d1b6; background-color:var(--color3); border:2px solid transparent; } .button4 { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid transparent; -webkit-transition:background-color, border, 250ms ease-in-out; -o-transition:background-color, border, 250ms ease-in-out; transition:background-color, border, 250ms ease-in-out; background-color:#ff4828; background-color:var(--color4); padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button4:hover { color:var(--color4); background-color:transparent; border:2px solid #ff4828; border:2px solid var(--color4); } .button4-alt { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid #ff4828; border:2px solid var(--color4); background:transparent; -webkit-transition:background-color, border, 250ms ease-in-out; -o-transition:background-color, border, 250ms ease-in-out; transition:background-color, border, 250ms ease-in-out; color:var(--color4); padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button4-alt:hover { color:inherit; background-color:#ff4828; background-color:var(--color4); border:2px solid transparent; } .button-black { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid transparent; -webkit-transition:background-color, border, 250ms ease-in-out; -o-transition:background-color, border, 250ms ease-in-out; transition:background-color, border, 250ms ease-in-out; color:#eee; background-color:#111; padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button-black:hover { background:transparent; border:2px solid #111; color:#111; } .button-black-alt { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid #111; background:transparent; -webkit-transition:background-color, border, 250ms ease-in-out; -o-transition:background-color, border, 250ms ease-in-out; transition:background-color, border, 250ms ease-in-out; color:#111; padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button-black-alt:hover { color:#eee; background-color:#111; border:2px solid transparent; } .button-white { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid transparent; -webkit-transition:background-color, border, color, 250ms ease-in-out; -o-transition:background-color, border, color, 250ms ease-in-out; transition:background-color, border, color, 250ms ease-in-out; color:#111; background-color:#eee; padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button-white:hover { background:transparent; border:2px solid #eee; color:#eee; } .button-white-alt { min-height:40px; width:-webkit-max-content; width:-moz-max-content; width:max-content; border:2px solid #eee; background:transparent; -webkit-transition:background-color, border, color, 250ms ease-in-out; -o-transition:background-color, border, color, 250ms ease-in-out; transition:background-color, border, color, 250ms ease-in-out; color:#eee; padding:5px 20px 5px 20px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; } .button-white-alt:hover { color:#111; background-color:#eee; border:2px solid transparent; } label { color:var(--color1); } input { min-height:40px; border:2px solid #ccc; background-color:#eee; -webkit-transition:border 300ms; -o-transition:border 300ms; transition:border 300ms; outline:none; } input:hover { border:2px solid #0d586d; border:2px solid var(--color1); } input:focus { border:2px solid orange; outline:none } .round { border-radius:50%; } .round\*>* { border-radius:50%; } .rounded { border-radius:12.5px; } .rounded\*>* { border-radius:12.5px; } .rounded2 { border-radius:25px; } .rounded2\*>* { border-radius:25px; } .rounded3 { border-radius:37.5px; } .rounded3\*>* { border-radius:37.5px; } .rounded4 { border-radius:50px; } .rounded4\*>* { border-radius:50px; } .shadow { box-shadow:0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .cursive { font-family:Segoe Script, cursive; } .cursive\*>* { font-family:Segoe Script, cursive; } .text-right { text-align:right; } .text-right\*>* { text-align:right; } .text-left { text-align:left; } .text-left\*>* { text-align:left; } .top-left { position:absolute; left:0; top:0; } .top { position:absolute; top:0; left:50%; -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); transform:translate(-50%, 0); } .top-right { position:absolute; top:0; right:0; } .left { position:absolute; left:0; top:50%; -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); transform:translate(0, -50%); } .center { position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } .right { position:absolute; right:0; top:50%; -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); transform:translate(0, -50%); } .bottom-left { position:absolute; bottom:0; left:0; } .bottom { position:absolute; bottom:0; left:50%; -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); transform:translate(-50%, 0); } .bottom-right { position:absolute; bottom:0; right:0; } .navbar { width:100%; min-height:40px; z-index:99; position:fixed; top:0; left:0; } .tab { box-sizing:border-box; z-index:100; height:100%; min-width:40px; margin-right:5px; cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; padding:0 20px 0 20px; -webkit-transition:visibility, opacity, .5s ease; -o-transition:visibility, opacity, .5s ease; transition:visibility, opacity, .5s ease; } .tab:hover>* { visibility:visible; opacity:1; } .tab-content { transition:visibility, opacity, .25s ease; visibility:hidden; opacity:0; position:absolute; top:100%; } .mask { transition:opacity .25s ease-in-out; opacity:0; } .mask-full { transition:opacity .25s ease-in-out; opacity:0; position:absolute; height:100%; width:100%; } .mask-handle:hover *[class *="mask"] { opacity:1; } .rem\.5 { font-size:.5rem; } .rem\.5\*>* { font-size:.5rem; } .rem1\.5 { font-size:1.5rem; } .rem1\.5\*>* { font-size:1.5rem; } .rem2 { font-size:2rem; } .rem2\*>* { font-size:2rem; } .rem2\.5 { font-size:2.5rem; } .rem2\.5\*>* { font-size:2.5rem; } .rem3 { font-size:3rem; } .rem3\*>* { font-size:3rem; } .rem3\.5 { font-size:3.5rem; } .rem3\.5\*>* { font-size:3.5rem; } .rem4 { font-size:4rem; } .rem4\*>* { font-size:4rem; } .rem4\.5 { font-size:4.5rem; } .rem4\.5\*>* { font-size:4.5rem; } .rem5 { font-size:5rem; } .rem5\*>* { font-size:5rem; } .rem5\.5 { font-size:5.5rem; } .rem5\.5\*>* { font-size:5.5rem; } .rem6 { font-size:6rem; } .rem6\*>* { font-size:6rem; } .rem6\.5 { font-size:6.5rem; } .rem6\.5\*>* { font-size:6.5rem; } .rem7\.5 { font-size:7.5rem; } .rem7\.5\*>* { font-size:7.5rem; } .rem8\.5 { font-size:8.5rem; } .rem8\.5\*>* { font-size:8.5rem; } .fvw\.2 { font-size:.2vw; } .fvw\.4 { font-size:.4vw; } .fvw\.6 { font-size:.6vw; } .fvw\.8 { font-size:.8vw; } .fvw1 { font-size:1vw; } .fvw1\.2 { font-size:1.2vw; } .fvw1\.4 { font-size:1.4vw; } .fvw1\.6 { font-size:1.6vw; } .fvw1\.8 { font-size:1.8vw; } .fvw2 { font-size:2vw; } .fvw2\.2 { font-size:2.2vw; } .fvw2\.4 { font-size:2.4vw; } .fvw2\.6 { font-size:2.6vw; } .fvw2\.8 { font-size:2.8vw; } .fvw3 { font-size:3vw; } .fvw3\.2 { font-size:3.2vw; } .fvw3\.4 { font-size:3.4vw; } .fvw3\.6 { font-size:3.6vw; } .fvw3\.8 { font-size:3.8vw; } .fvw4 { font-size:4vw; } .fvw4\.2 { font-size:4.2vw; } .fvw4\.4 { font-size:4.4vw; } .fvw4\.6 { font-size:4.6vw; } .fvw4\.8 { font-size:4.8vw; } .fvw5 { font-size:5vw; } .fvw5\.2 { font-size:5.2vw; } .fvw5\.4 { font-size:5.4vw; } .fvw5\.6 { font-size:5.6vw; } .fvw5\.8 { font-size:5.8vw; } .grid2 { display:-ms-grid; display:grid; -ms-grid-columns:1fr 1fr; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid2>* { width:100%; } .grid3 { display:-ms-grid; display:grid; -ms-grid-columns:1fr 1fr 1fr; grid-template-columns:1fr 1fr 1fr; grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid3>* { width:100%; } .grid4 { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[4]; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid4>* { width:100%; } .grid5 { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[5]; grid-template-columns:repeat(5, 1fr); grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid5>* { width:100%; } .grid6 { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[6]; grid-template-columns:repeat(6, 1fr); grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid6>* { width:100%; } .grid7 { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[7]; grid-template-columns:repeat(7, 1fr); grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid7>* { width:100%; } .grid8 { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[8]; grid-template-columns:repeat(8, 1fr); grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid8>* { width:100%; } .grid9 { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[9]; grid-template-columns:repeat(9, 1fr); grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid9>* { width:100%; } .grid10 { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[10]; grid-template-columns:repeat(10, 1fr); grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid10>* { width:100%; } .grid11 { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[11]; grid-template-columns:repeat(11, 1fr); grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid11>* { width:100%; } .grid12 { display:-ms-grid; display:grid; -ms-grid-columns:(1fr)[12]; grid-template-columns:repeat(12, 1fr); grid-auto-rows:minmax(100px, auto); grid-auto-rows:minmax(var(--grid-height), auto); } .grid12>* { width:100%; } .row2 { -ms-grid-row-span:2; grid-row:span 2; } .row3 { -ms-grid-row-span:3; grid-row:span 3; } .row4 { -ms-grid-row-span:4; grid-row:span 4; } .row5 { -ms-grid-row-span:5; grid-row:span 5; } .row6 { -ms-grid-row-span:6; grid-row:span 6; } .row7 { -ms-grid-row-span:7; grid-row:span 7; } .row8 { -ms-grid-row-span:8; grid-row:span 8; } .row9 { -ms-grid-row-span:9; grid-row:span 9; } .row10 { -ms-grid-row-span:10; grid-row:span 10; } .row11 { -ms-grid-row-span:11; grid-row:span 11; } .row12 { -ms-grid-row-span:12; grid-row:span 12; } .col2 { -ms-grid-column-span:2; grid-column:span 2; } .col3 { -ms-grid-column-span:3; grid-column:span 3; } .col4 { -ms-grid-column-span:4; grid-column:span 4; } .col5 { -ms-grid-column-span:5; grid-column:span 5; } .col6 { -ms-grid-column-span:6; grid-column:span 6; } .col7 { -ms-grid-column-span:7; grid-column:span 7; } .col8 { -ms-grid-column-span:8; grid-column:span 8; } .col9 { -ms-grid-column-span:9; grid-column:span 9; } .col10 { -ms-grid-column-span:10; grid-column:span 10; } .col11 { -ms-grid-column-span:11; grid-column:span 11; } .col12 { -ms-grid-column-span:12; grid-column:span 12; } .flow1 { grid-auto-flow:row; } .flow2 { grid-auto-flow:column; } .flow3 { grid-auto-flow:row dense; } .gap5 { grid-gap:5px; } .gap10 { grid-gap:10px; } .gap15 { grid-gap:15px; } .gap20 { grid-gap:20px; } .gap25 { grid-gap:25px; } .gap30 { grid-gap:30px; } .gap35 { grid-gap:35px; } .gap40 { grid-gap:40px; } .gap45 { grid-gap:45px; } .gap50 { grid-gap:50px; } .\@pop:hover { transition:opacity, transform, .25s ease-in-out; animation:pop .25s; } .\@pulse { z-index:11; } .\@pulse:hover::before { content:""; position:absolute; height:100%; width:100%; top:0; left:0; opacity:0; transition:opacity, transform, .25s ease-in-out; animation:pulse .5s; background-color:rgba(1, 1, 1, .5); z-index:10; } .\@wobble:hover { transition:transform .25s ease-in-out; animation:wobble .5s; } .\@rise:hover { transition:transform .25s ease-in-out; transform:translateY(-15px); } .\@zoom-in,.\@zoom-out,.\@zoom-turn{ transition:transform .25s ease-in-out; } .\@zoom-in{ transform:scale(1.05); } .\@zoom-in:hover { transform:scale(1.2); } .\@zoom-out{ transform:scale(1.2); } .\@zoom-out:hover{ transform:scale(1.05); } .\@zoom-turn{ transform:scale(1.05); } .\@zoom-turn:hover { transform:scale(1.3) rotateZ(8deg); } .\@spin:hover { transition:transform .25s ease-in-out; transform:rotateX(360deg); } .\@shadow:hover { transition:box-shadow .25s ease-in-out; box-shadow:0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .\@bcolor1:hover{ transition:background-color .25s ease-in-out; background-color:var(--color1); } .\@bcolor2:hover{ transition:background-color .25s ease-in-out; background-color:var(--color2); } .\@bcolor3:hover{ transition:background-color .25s ease-in-out; background-color:var(--color3); } .\@bcolor4:hover{ transition:background-color .25s ease-in-out; background-color:var(--color4); } .\@fcolor1:hover{ transition:color .25s ease-in-out; color:var(--color1); } .\@fcolor2:hover{ transition:color .25s ease-in-out; color:var(--color2); } .\@fcolor3:hover{ transition:color .25s ease-in-out; color:var(--color3); } .\@fcolor4:hover{ transition:color .25s ease-in-out; color:var(--color4); } *[class*="@border"] { transition:border .25s ease-in-out; border:2px solid transparent; } .\@border1:hover{ border:2px solid var(--color1); } .\@border2:hover{ border:2px solid var(--color2); } .\@border3:hover{ border:2px solid var(--color3); } .\@border4:hover{ border:2px solid var(--color4); } .\@text-spread,[class*="@cap"],[class*="@text-glow"]{ line-height:1; letter-spacing:2px; } .\@text-spread:hover,[class*="@cap"]:hover{ transition:line-height, letter-spacing .25s ease-in-out; line-height:2; letter-spacing:4px; } .\@cap1:hover::first-letter{ transition:font-size, text-transform, color, .25s ease-in-out; font-size:x-large; text-transform:uppercase; color:var(--color1); } .\@cap2:hover::first-letter{ transition:font-size, text-transform, color, .25s ease-in-out; font-size:x-large; text-transform:uppercase; color:var(--color2); } .\@cap3:hover::first-letter{ transition:font-size, text-transform, color, .25s ease-in-out; font-size:x-large; text-transform:uppercase; color:var(--color3); } .\@cap4:hover::first-letter{ transition:font-size, text-transform, color, .25s ease-in-out; font-size:x-large; text-transform:uppercase; color:var(--color4); } .\@text-glow1:hover{ transition:text-shadow .25s ease; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--color1), 0 0 40px var(--color1), 0 0 50px var(--color1), 0 0 60px var(--color1), 0 0 70px var(--color1); } .\@text-glow2:hover{ transition:text-shadow .25s ease; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--color2), 0 0 40px var(--color2), 0 0 50px var(--color2), 0 0 60px var(--color2), 0 0 70px var(--color2); } .\@text-glow3:hover{ transition:text-shadow .25s ease; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--color3), 0 0 40px var(--color3), 0 0 50px var(--color3), 0 0 60px var(--color3), 0 0 70px var(--color3); } .\@text-glow4:hover{ transition:text-shadow .25s ease; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--color4), 0 0 40px var(--color4), 0 0 50px var(--color4), 0 0 60px var(--color4), 0 0 70px var(--color4); } .\@slide1::before{ content:""; width:0%; height:100%; position:absolute; top:0; left:0; border-radius:inherit; } .\@slide1:hover::before{ transition:width .5s ease; width:100%; background-color:var(--color1); } .\@slide2::before{ content:""; width:0%; height:100%; position:absolute; top:0; left:0; border-radius:inherit; } .\@slide2:hover::before{ transition:width .5s ease; width:100%; background-color:var(--color2); } .\@slide3::before{ content:""; width:0%; height:100%; position:absolute; top:0; left:0; border-radius:inherit; } .\@slide3:hover::before{ transition:width .5s ease; width:100%; background-color:var(--color3); } .\@slide4::before{ content:""; width:0%; height:100%; position:absolute; top:0; left:0; border-radius:inherit; } .\@slide4:hover::before{ transition:width .5s ease; width:100%; background-color:var(--color4); } .\@z10:hover { z-index:10; } .\@z20:hover { z-index:20; } .\@z30:hover { z-index:30; } .\@z40:hover { z-index:40; } .\@z50:hover { z-index:50; } .\@z60:hover { z-index:60; } .\@z70:hover { z-index:70; } .\@z80:hover { z-index:80; } .\@z90:hover { z-index:90; } .\@z100:hover{ z-index:100; } .\@z200:hover{ z-index:200; } .\@z300:hover{ z-index:300; } .\@z400:hover{ z-index:400; } .\@z500:hover{ z-index:500; } .\@z600:hover{ z-index:600; } .\@z700:hover{ z-index:700; } .\@z800:hover{ z-index:800; } .\@z900:hover { z-index:900; } .\@z1000:hover { z-index:1000; } @keyframes pop { 0% { opacity:1; -webkit-transform:scale(1); transform:scale(1); } 60% { opacity:0; -webkit-transform:scale(1.3); transform:scale(1.3); } 100% { opacity:1; -webkit-transform:scale(1); transform:scale(1); } } @keyframes pulse { 0% { transform:scale(1); opacity:1; } 100% { transform:scale(1.5); opacity:0; } } @keyframes wobble { 16.65% { -webkit-transform:translateX(8px); transform:translateX(8px); } 33.3% { -webkit-transform:translateX(-6px); transform:translateX(-6px); } 49.95% { -webkit-transform:translateX(4px); transform:translateX(4px); } 66.6% { -webkit-transform:translateX(-2px); transform:translateX(-2px); } 83.25% { -webkit-transform:translateX(1px); transform:translateX(1px); } 100% { -webkit-transform:translateX(0); transform:translateX(0); } } ::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-track {}::-webkit-scrollbar-thumb { background:#222; background:var(--color1); } * { cursor:url('https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Arrow.cur?raw=true'), default; } .pointer { cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; } .pointer\* * { cursor:url(https://github.com/PiethonCoder/media-storage/blob/master/Numix%20Light/Hand.cur?raw=true), pointer; } /* media queries */ .mobile { display:none; opacity:0; visibility:hidden; } .\!mobile { opacity:1; visibility:visible; } @media only screen and (min-width: 768px) { /* tablets and desktop */ } @media only screen and (max-width: 767px) { /* phones */ .mobile { display:inherit; opacity:1; visibility:visible; } .\!mobile { opacity:0; visibility:hidden; display:none; } .mobile-flex { display:flex; align-items:center; justify-content:center; flex-direction:row; } .mobile-flex-column { display:flex; align-items:center; justify-content:center; flex-direction:column; } .mobile-block { display:block !important; } .mobile-grid6 { grid-template-columns:repeat(6, 1fr); } .mobile-grid5 { grid-template-columns:repeat(5, 1fr); } .mobile-grid4 { grid-template-columns:repeat(4, 1fr); } .mobile-grid3 { grid-template-columns:repeat(3, 1fr); } .mobile-grid2 { grid-template-columns:repeat(2, 1fr); } .mobile-grid1 { grid-template-columns:repeat(1, 1fr); } .mobile-h5 { height:5%; } .mobile-h10 { height:10%; } .mobile-h15 { height:15%; } .mobile-h20 { height:20%; } .mobile-h25 { height:25%; } .mobile-h30 { height:30%; } .mobile-h35 { height:35%; } .mobile-h40 { height:40%; } .mobile-h45 { height:45%; } .mobile-h50 { height:50%; } .mobile-h55 { height:55%; } .mobile-h60 { height:60%; } .mobile-h65 { height:65%; } .mobile-h70 { height:70%; } .mobile-h75 { height:75%; } .mobile-h80 { height:80%; } .mobile-h85 { height:85%; } .mobile-h90 { height:90%; } .mobile-h95 { height:95%; } .mobile-h100 { height:100%; } .mobile-w5 { width:5%; } .mobile-w10 { width:10%; } .mobile-w15 { width:15%; } .mobile-w20 { width:20%; } .mobile-w25 { width:25%; } .mobile-w30 { width:30%; } .mobile-w35 { width:35%; } .mobile-w40 { width:40%; } .mobile-w45 { width:45%; } .mobile-w50 { width:50%; } .mobile-w55 { width:55%; } .mobile-w60 { width:60%; } .mobile-w65 { width:65%; } .mobile-w70 { width:70%; } .mobile-w75 { width:75%; } .mobile-w80 { width:80%; } .mobile-w85 { width:85%; } .mobile-w90 { width:90%; } .mobile-w95 { width:95%; } .mobile-w100 { width:100%; } .mobile-top-left { position:absolute; left:0; top:0; } .mobile-top { position:absolute; top:0; left:50%; -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); transform:translate(-50%, 0); } .mobile-top-right { position:absolute; top:0; right:0; } .mobile-left { position:absolute; left:0; top:50%; -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); transform:translate(0, -50%); } .mobile-center { position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } .mobile-right { position:absolute; right:0; top:50%; -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); transform:translate(0, -50%); } .mobile-bottom-left { position:absolute; bottom:0; left:0; } .mobile-bottom { position:absolute; bottom:0; left:50%; -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); transform:translate(-50%, 0); } .mobile-bottom-right { position:absolute; bottom:0; right:0; } } /* portrait phones */ @media only screen and (max-width: 767px) and (orientation: portrait) {}