@charset "UTF-8"; /** This stylesheet uses BEM (Block__Element--Modifier) Syntax * 1) Don't use CSS IDs, because by their nature they're limited to being used once per page, thus not suited for multiple usage per page 2) BEM uses short, concise classes that can easily be read & re-used 3) 2 underscores (__) means it's dependent on the predecessor 4) 2 dashes(--) means it is modifying the predecessor * * Examples: * (B) Block component = .button {} * (E) Element that depends upon the block = .button__price {} * (M) Modifier that changes the style of the block = .button--orange {} || .button--big {} * More Info: * https://css-tricks.com/bem-101/ * https://www.smashingmagazine.com/2018/06/bem-for-beginners/ */ /** **************************************************** ETSU CUSTOM PicNic.css, part 1 **************************************************** */ /**** ETSU COLORS: pre 2018 **** * -- primaries -- * gold = #FFC72C rgba(255,199,44,0.1) hsla(44,100%,59%,1) * blue = #041E42 rgba(4,30,66,0.1) hsla(215,89%,14%,1) * black = #000 rgba(0,0,0,0.1) hsla(0,0%,0%,1) * white = #fff rgba(255,255,255,0.1) hsla(0,0%,100%,1) * * --accents: complimentary-- * liteBlue = #5E8AB4 rgba(94,138,180,0.1) hsla(209,36%,54%,1) * liteGold = #F8E08E rgba(248,224,142,0.1) hsla(46,88%,76%,1) * liteGreen = #789D4A rgba(120,157,74,0.1) hsla(87,36%,45%,1) * liteTan = #C6AA76 rgba(198,170,118,0.1) hsla(39,41%,62%,1) * * --accents: bold-- * darkBlue = #005EB8 rgba(0,94,184,0.1) hsla(209,100%,36%,1) * darkRed = #A6192E rgba(166,25,48,0.1) hsla(351,74%,37%,1) * darkGreen = #046A38 rgba(4,106,56,0.1) hsla(151,93%,22%,1) * darkTan = #653024 rgba(101,48,36,0.1) hsla(11,47%,27%,1) * * --neutral: gray-- * darkGray = #707372 rgba(112,115,114,0.1) hsla(160,1%,45%,1) * gray = #9EA2A2 rgba(158,162,162,0.1) hsla(180,2%,63%,1) * liteGray = #C7C9C7 rgba(199,201,199,0.1) hsla(120,2%,78%,1) * * --neutral: brown-- * darkBrown = #776E64 rgba(119,110,100,0.1) hsla(39,9%,43%,1) * brown = #B7A99A rgba(183,169,154,0.1) hsla(31,17%,66%,1) * liteBrown = #D7D2CB rgba(215,210,203,0.1) hsla(35,13%,82%,1) */ /** FONTS **/ @font-face { font-family: 'Norwester'; src: url('https://www.etsu.edu/ehome/fonts/norwester/norwester.eot'); /* IE9 Compat Modes */ src: local('Norwester'), local('Norwester-Regular'), url('https://www.etsu.edu/ehome/fonts/norwester/norwester.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://www.etsu.edu/ehome/fonts/norwester/norwester.woff2') format('woff2'), /* Super Modern Browsers */ url('https://www.etsu.edu/ehome/fonts/norwester/norwester.woff') format('woff'), /* Pretty Modern Browsers */ url('https://www.etsu.eduehome/fonts/norwester/norwester.otf') format('truetype'), /* Safari, Android, iOS */ url('https://www.etsu.eduehome/fonts/norwester/norwester.svg#svgFontName') format('svg'); /* Legacy iOS */ } /** **************************************************** /END ETSU CUSTOM, part 1 (part 2 continued after picnic.css below) ************************** */ /** ************************** PicNic.css Custom Minified (branding elements updated to ETSU branding) ************************** * * SRC: https://picnicss.com * Picnic CSS v.6.5.0 */ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}code,pre{padding:.3em .6em;background:#f5f5f5}pre,textarea{overflow:auto}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}summary{display:list-item}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0;color:#041E42;text-decoration:none;box-shadow:none}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset,legend{border:0;padding:0}*{box-sizing:inherit}.flex>*,body,html,select{box-sizing:border-box}body,html{font-family:Arial,Helvetica,sans-serif;height:100%}body{margin:0;color:#000;font-size:1.1em;line-height:1.5;background:#fff}h1,h2,h3,h4,h5,h6{margin:0;padding:.6em 0}li{margin:0 0 .3em}pre{text-align:left;border-radius:.2em}pre code{padding:0}blockquote{padding:0 0 0 1em;margin:0 0 0 .1em;box-shadow:inset 5px 0 rgba(17,17,17,.3)}label{cursor:pointer}[class*=" icon-"]:before,[class^=icon-]:before{margin:0 .6em 0 0}i[class*=" icon-"]:before,i[class^=icon-]:before{margin:0}.button,.dropimage,.label,[data-tooltip]:after,[type=submit],button{background:#041E42;border:0;border-radius:.2em;color:#FFC72C;display:inline-block;text-align:left;letter-spacing:inherit;margin:0;padding:.3em .9em;width:auto;vertical-align:middle;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.success.button,.success.dropimage,.success.label,.success[data-tooltip]:after,.success[type=submit],button.success{background:#789D4A;color:#FFF;}.warning.button,.warning.dropimage,.warning.label,.warning[data-tooltip]:after,.warning[type=submit],button.warning{background:#F8E08E}.error.button,.error.dropimage,.error.label,.error[data-tooltip]:after,.error[type=submit],button.error{background:#A6192E}.pseudo.button,.pseudo.dropimage,.pseudo.label,.pseudo[data-tooltip]:after,.pseudo[type=submit],button.pseudo{background-color:transparent;color:#000}.button.button--special{background:#5E8AB4;color:#041E42}.label,[data-tooltip]:after{font-size:.6em;padding:.4em .6em;margin-left:1em;line-height:1}.button,.dropimage,[type=submit],button{margin:.3em 0;cursor:pointer;transition:all .3s;border-radius:.2em;height:auto;vertical-align:baseline;box-shadow:0 0 transparent inset}.button--warning:focus,.button.warning:focus,.button--warning:hover,.button.warning:hover,.button--alert:focus,.button.alert:focus,.button--alert:hover,.button.alert:hover,button.button--disabled:hover,button.button--disbled:focus,.button--disabled:focus,.button.disabled:focus,.button--disabled:hover,.button.disabled:hover,button.button--gold:hover,button.button--gold:focus,.button--gold:focus,.button.gold:focus,.button--gold:hover,.button.gold:hover,.button.button--warning:focus,button.button--warning:hover,button.button--warning:focus,.button.button--warning:hover,.button.button--alert:focus,.button.button--alert:hover,.button.button--disabled:focus,.button.disabled:focus,.button.button--disabled:hover,.button.disabled:hover,.button.button--gold:focus,.button.button--gold:hover,[type=submit].button--alert:focus,[type=submit].button--alert:hover,[type=submit].button--disabled:focus,[type=submit].button--disabled:hover,[type=submit].button--gold:focus,[type=submit].button--gold:hover,[type=submit].button--warning:focus,[type=submit].button--warning:hover{box-shadow:inset 0 0 0 99em rgba(255,255,255,.2),0 0 1rem rgba(94,138,180,.8);border:0}.button--blue:focus,.button--blue:hover,.button--error:focus,.button--error:hover,.button--info:focus,.button--info:hover,.button--success:focus,.button--success:hover,.button:focus,.button:hover,.dropimage:focus,.dropimage:hover,[type=submit]:focus,[type=submit]:hover{box-shadow:inset 0 0 0 99rem rgba(0,0,0,.2),0 0 1rem rgba(94,138,180,.8)}.pseudo.button:focus,.pseudo.button:hover,.pseudo.dropimage:focus,.pseudo.dropimage:hover,.pseudo[type=submit]:focus,.pseudo[type=submit]:hover,button.pseudo:focus,button.pseudo:hover{box-shadow:inset 0 0 0 99em rgba(17,17,17,.1)}.active.button,.active.dropimage,.active[type=submit],.button:active,.dropimage:active,.pseudo.button:active,.pseudo.dropimage:active,.pseudo[type=submit]:active,[type=submit]:active,button.active,button.pseudo:active,button:active{box-shadow:inset 0 0 0 99em rgba(17,17,17,.2)}[disabled].button,[disabled].dropimage,[disabled][type=submit],button[disabled]{cursor:default;box-shadow:none}:checked+.toggle,:checked+.toggle:hover{box-shadow:inset 0 0 0 99em rgba(17,17,17,.2)}[type]+.toggle{padding:.3em .9em;margin-right:0}[type]+.toggle:after,[type]+.toggle:before{display:none}.select select,input.input,textarea{line-height:1.5;margin:0;height:2.1em;padding:.3em .6em;border:1px solid #ccc;background-color:#fff;border-radius:.2em;transition:all .3s;width:100%}[type=file],textarea{height:auto}.select select:focus,input.input:focus,textarea:focus{border:1px solid #041E42;outline:0}[type=color],[type=file]{cursor:pointer}select{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjMiPjxwYXRoIGQ9Im0gMCwxIDEsMiAxLC0yIHoiLz48L3N2Zz4=) 95% center/10px 15px no-repeat #fff;background-position:calc(100% - 15px) center;border:1px solid #ccc;border-radius:.2em;cursor:pointer;width:100%;height:2.2em;padding:.3em .45em;transition:all .3s;-moz-appearance:none;-webkit-appearance:none;appearance:none}select::-ms-expand{display:none}select:active,select:focus{border:1px solid #041E42;transition:outline 0s}select:-moz-focusring{color:transparent;text-shadow:0 0 0 #111}select option{font-size:inherit;padding:.3em .45em}html:not(#mautic) [type=checkbox],html:not(#mautic) [type=radio]{opacity:0;width:0;position:absolute;display:inline-block}[type=checkbox]+.checkable:hover:before,[type=checkbox]:focus+.checkable:before,+.chec[type=radio]kable:hover:before,[type=radio]:focus+.checkable:before{border:1px solid #041E42}[type=checkbox]+.checkable,[type=radio]+.checkable{position:relative;cursor:pointer;padding-left:1.5em;margin-right:.6em}[type=checkbox]+.checkable:after,[type=checkbox]+.checkable:before,[type=radio]+.checkable:after,[type=radio]+.checkable:before{content:'';position:absolute;display:inline-block;left:0;top:50%;transform:translateY(-50%);font-size:1em;line-height:1em;color:transparent;font-family:sans;text-align:center;box-sizing:border-box;width:1em;height:1em;border-radius:50%;transition:all .3s}.stack,.stack .toggle,table,th{text-align:left}[type=checkbox]+.checkable:before,[type=radio]+.checkable:before{border:1px solid #aaa}[type=checkbox]:checked+.checkable:after,[type=radio]:checked+.checkable:after{background:#555;transform:scale(.5) translateY(-100%)}[type=checkbox]+.checkable:before{border-radius:.2em}[type=checkbox]+.checkable:after{content:"✔";background:0 0;transform:scale(2) translateY(-25%);visibility:hidden;opacity:0}[type=checkbox]:checked+.checkable:after{color:#111;background:0 0;transform:translateY(-50%);transition:all .3s;visibility:visible;opacity:1}table{border-collapse:collapse;border-spacing:0}td,th{padding:.3em 2.4em .3em .6em}th{font-weight:900;color:#fff;background-color:#041E42}.success th{background-color:#2ecc40}.warning th{background-color:#ff851b}.error th{background-color:#ff4136}.dull th{background-color:#aaa}tr:nth-child(even){background:rgba(0,0,0,.05)}.flex{display:-ms-flexbox;display:flex;margin-left:-.6em;width:calc(100% + .6em);flex-wrap:wrap;transition:all .3s ease}.flex>*{flex:1 1 auto;padding-left:.6em;padding-bottom:.6em}.flex[class*=one]>*,.flex[class*=two]>*,.flex[class*=three]>*,.flex[class*=four]>*,.flex[class*=five]>*,.flex[class*=six]>*,.flex[class*=seven]>*,.flex[class*=eight]>*,.flex[class*=nine]>*,.flex[class*=ten]>*,.flex[class*=eleven]>*,.flex[class*=twelve]>*{flex-grow:0}.flex.grow>*{flex-grow:1}.center{justify-content:center}.one>*{width:100%}.two>*{width:50%}.three>*{width:33.33333%}.four>*{width:25%}.five>*{width:20%}.six>*{width:16.66666%}.seven>*{width:14.28571%}.eight>*{width:12.5%}.nine>*{width:11.11111%}.ten>*{width:10%}.eleven>*{width:9.09091%}.twelve>*{width:8.33333%}@media all and (min-width:500px){.one-500>*{width:100%}.two-500>*{width:50%}.three-500>*{width:33.33333%}.four-500>*{width:25%}.five-500>*{width:20%}.six-500>*{width:16.66666%}.seven-500>*{width:14.28571%}.eight-500>*{width:12.5%}.nine-500>*{width:11.11111%}.ten-500>*{width:10%}.eleven-500>*{width:9.09091%}.twelve-500>*{width:8.33333%}}@media all and (min-width:600px){.one-600>*{width:100%}.two-600>*{width:50%}.three-600>*{width:33.33333%}.four-600>*{width:25%}.five-600>*{width:20%}.six-600>*{width:16.66666%}.seven-600>*{width:14.28571%}.eight-600>*{width:12.5%}.nine-600>*{width:11.11111%}.ten-600>*{width:10%}.eleven-600>*{width:9.09091%}.twelve-600>*{width:8.33333%}}@media all and (min-width:700px){.one-700>*{width:100%}.two-700>*{width:50%}.three-700>*{width:33.33333%}.four-700>*{width:25%}.five-700>*{width:20%}.six-700>*{width:16.66666%}.seven-700>*{width:14.28571%}.eight-700>*{width:12.5%}.nine-700>*{width:11.11111%}.ten-700>*{width:10%}.eleven-700>*{width:9.09091%}.twelve-700>*{width:8.33333%}}@media all and (min-width:800px){.one-800>*{width:100%}.two-800>*{width:50%}.three-800>*{width:33.33333%}.four-800>*{width:25%}.five-800>*{width:20%}.six-800>*{width:16.66666%}.seven-800>*{width:14.28571%}.eight-800>*{width:12.5%}.nine-800>*{width:11.11111%}.ten-800>*{width:10%}.eleven-800>*{width:9.09091%}.twelve-800>*{width:8.33333%}}@media all and (min-width:900px){.one-900>*{width:100%}.two-900>*{width:50%}.three-900>*{width:33.33333%}.four-900>*{width:25%}.five-900>*{width:20%}.six-900>*{width:16.66666%}.seven-900>*{width:14.28571%}.eight-900>*{width:12.5%}.nine-900>*{width:11.11111%}.ten-900>*{width:10%}.eleven-900>*{width:9.09091%}.twelve-900>*{width:8.33333%}}@media all and (min-width:1000px){.one-1000>*{width:100%}.two-1000>*{width:50%}.three-1000>*{width:33.33333%}.four-1000>*{width:25%}.five-1000>*{width:20%}.six-1000>*{width:16.66666%}.seven-1000>*{width:14.28571%}.eight-1000>*{width:12.5%}.nine-1000>*{width:11.11111%}.ten-1000>*{width:10%}.eleven-1000>*{width:9.09091%}.twelve-1000>*{width:8.33333%}}@media all and (min-width:1100px){.one-1100>*{width:100%}.two-1100>*{width:50%}.three-1100>*{width:33.33333%}.four-1100>*{width:25%}.five-1100>*{width:20%}.six-1100>*{width:16.66666%}.seven-1100>*{width:14.28571%}.eight-1100>*{width:12.5%}.nine-1100>*{width:11.11111%}.ten-1100>*{width:10%}.eleven-1100>*{width:9.09091%}.twelve-1100>*{width:8.33333%}}@media all and (min-width:1200px){.one-1200>*{width:100%}.two-1200>*{width:50%}.three-1200>*{width:33.33333%}.four-1200>*{width:25%}.five-1200>*{width:20%}.six-1200>*{width:16.66666%}.seven-1200>*{width:14.28571%}.eight-1200>*{width:12.5%}.nine-1200>*{width:11.11111%}.ten-1200>*{width:10%}.eleven-1200>*{width:9.09091%}.twelve-1200>*{width:8.33333%}}@media all and (min-width:1300px){.one-1300>*{width:100%}.two-1300>*{width:50%}.three-1300>*{width:33.33333%}.four-1300>*{width:25%}.five-1300>*{width:20%}.six-1300>*{width:16.66666%}.seven-1300>*{width:14.28571%}.eight-1300>*{width:12.5%}.nine-1300>*{width:11.11111%}.ten-1300>*{width:10%}.eleven-1300>*{width:9.09091%}.twelve-1300>*{width:8.33333%}}@media all and (min-width:1400px){.one-1400>*{width:100%}.two-1400>*{width:50%}.three-1400>*{width:33.33333%}.four-1400>*{width:25%}.five-1400>*{width:20%}.six-1400>*{width:16.66666%}.seven-1400>*{width:14.28571%}.eight-1400>*{width:12.5%}.nine-1400>*{width:11.11111%}.ten-1400>*{width:10%}.eleven-1400>*{width:9.09091%}.twelve-1400>*{width:8.33333%}}@media all and (min-width:1500px){.one-1500>*{width:100%}.two-1500>*{width:50%}.three-1500>*{width:33.33333%}.four-1500>*{width:25%}.five-1500>*{width:20%}.six-1500>*{width:16.66666%}.seven-1500>*{width:14.28571%}.eight-1500>*{width:12.5%}.nine-1500>*{width:11.11111%}.ten-1500>*{width:10%}.eleven-1500>*{width:9.09091%}.twelve-1500>*{width:8.33333%}}@media all and (min-width:1600px){.one-1600>*{width:100%}.two-1600>*{width:50%}.three-1600>*{width:33.33333%}.four-1600>*{width:25%}.five-1600>*{width:20%}.six-1600>*{width:16.66666%}.seven-1600>*{width:14.28571%}.eight-1600>*{width:12.5%}.nine-1600>*{width:11.11111%}.ten-1600>*{width:10%}.eleven-1600>*{width:9.09091%}.twelve-1600>*{width:8.33333%}}@media all and (min-width:1700px){.one-1700>*{width:100%}.two-1700>*{width:50%}.three-1700>*{width:33.33333%}.four-1700>*{width:25%}.five-1700>*{width:20%}.six-1700>*{width:16.66666%}.seven-1700>*{width:14.28571%}.eight-1700>*{width:12.5%}.nine-1700>*{width:11.11111%}.ten-1700>*{width:10%}.eleven-1700>*{width:9.09091%}.twelve-1700>*{width:8.33333%}}@media all and (min-width:1800px){.one-1800>*{width:100%}.two-1800>*{width:50%}.three-1800>*{width:33.33333%}.four-1800>*{width:25%}.five-1800>*{width:20%}.six-1800>*{width:16.66666%}.seven-1800>*{width:14.28571%}.eight-1800>*{width:12.5%}.nine-1800>*{width:11.11111%}.ten-1800>*{width:10%}.eleven-1800>*{width:9.09091%}.twelve-1800>*{width:8.33333%}}@media all and (min-width:1900px){.one-1900>*{width:100%}.two-1900>*{width:50%}.three-1900>*{width:33.33333%}.four-1900>*{width:25%}.five-1900>*{width:20%}.six-1900>*{width:16.66666%}.seven-1900>*{width:14.28571%}.eight-1900>*{width:12.5%}.nine-1900>*{width:11.11111%}.ten-1900>*{width:10%}.eleven-1900>*{width:9.09091%}.twelve-1900>*{width:8.33333%}}@media all and (min-width:2000px){.one-2000>*{width:100%}.two-2000>*{width:50%}.three-2000>*{width:33.33333%}.four-2000>*{width:25%}.five-2000>*{width:20%}.six-2000>*{width:16.66666%}.seven-2000>*{width:14.28571%}.eight-2000>*{width:12.5%}.nine-2000>*{width:11.11111%}.ten-2000>*{width:10%}.eleven-2000>*{width:9.09091%}.twelve-2000>*{width:8.33333%}}.full{width:100%}.half{width:50%}.third{width:33.33333%}.two-third{width:66.66666%}.fourth{width:25%}.three-fourth{width:75%}.fifth{width:20%}.two-fifth{width:40%}.three-fifth{width:60%}.four-fifth{width:80%}.sixth{width:16.66666%}.none{display:none}@media all and (min-width:500px){.full-500{width:100%;display:block}.half-500{width:50%;display:block}.third-500{width:33.33333%;display:block}.two-third-500{width:66.66666%;display:block}.fourth-500{width:25%;display:block}.three-fourth-500{width:75%;display:block}.fifth-500{width:20%;display:block}.two-fifth-500{width:40%;display:block}.three-fifth-500{width:60%;display:block}.four-fifth-500{width:80%;display:block}.sixth-500{width:16.66666%;display:block}}@media all and (min-width:600px){.full-600{width:100%;display:block}.half-600{width:50%;display:block}.third-600{width:33.33333%;display:block}.two-third-600{width:66.66666%;display:block}.fourth-600{width:25%;display:block}.three-fourth-600{width:75%;display:block}.fifth-600{width:20%;display:block}.two-fifth-600{width:40%;display:block}.three-fifth-600{width:60%;display:block}.four-fifth-600{width:80%;display:block}.sixth-600{width:16.66666%;display:block}}@media all and (min-width:700px){.full-700{width:100%;display:block}.half-700{width:50%;display:block}.third-700{width:33.33333%;display:block}.two-third-700{width:66.66666%;display:block}.fourth-700{width:25%;display:block}.three-fourth-700{width:75%;display:block}.fifth-700{width:20%;display:block}.two-fifth-700{width:40%;display:block}.three-fifth-700{width:60%;display:block}.four-fifth-700{width:80%;display:block}.sixth-700{width:16.66666%;display:block}}@media all and (min-width:800px){.full-800{width:100%;display:block}.half-800{width:50%;display:block}.third-800{width:33.33333%;display:block}.two-third-800{width:66.66666%;display:block}.fourth-800{width:25%;display:block}.three-fourth-800{width:75%;display:block}.fifth-800{width:20%;display:block}.two-fifth-800{width:40%;display:block}.three-fifth-800{width:60%;display:block}.four-fifth-800{width:80%;display:block}.sixth-800{width:16.66666%;display:block}}@media all and (min-width:900px){.full-900{width:100%;display:block}.half-900{width:50%;display:block}.third-900{width:33.33333%;display:block}.two-third-900{width:66.66666%;display:block}.fourth-900{width:25%;display:block}.three-fourth-900{width:75%;display:block}.fifth-900{width:20%;display:block}.two-fifth-900{width:40%;display:block}.three-fifth-900{width:60%;display:block}.four-fifth-900{width:80%;display:block}.sixth-900{width:16.66666%;display:block}}@media all and (min-width:1000px){.full-1000{width:100%;display:block}.half-1000{width:50%;display:block}.third-1000{width:33.33333%;display:block}.two-third-1000{width:66.66666%;display:block}.fourth-1000{width:25%;display:block}.three-fourth-1000{width:75%;display:block}.fifth-1000{width:20%;display:block}.two-fifth-1000{width:40%;display:block}.three-fifth-1000{width:60%;display:block}.four-fifth-1000{width:80%;display:block}.sixth-1000{width:16.66666%;display:block}}@media all and (min-width:1100px){.full-1100{width:100%;display:block}.half-1100{width:50%;display:block}.third-1100{width:33.33333%;display:block}.two-third-1100{width:66.66666%;display:block}.fourth-1100{width:25%;display:block}.three-fourth-1100{width:75%;display:block}.fifth-1100{width:20%;display:block}.two-fifth-1100{width:40%;display:block}.three-fifth-1100{width:60%;display:block}.four-fifth-1100{width:80%;display:block}.sixth-1100{width:16.66666%;display:block}}@media all and (min-width:1200px){.full-1200{width:100%;display:block}.half-1200{width:50%;display:block}.third-1200{width:33.33333%;display:block}.two-third-1200{width:66.66666%;display:block}.fourth-1200{width:25%;display:block}.three-fourth-1200{width:75%;display:block}.fifth-1200{width:20%;display:block}.two-fifth-1200{width:40%;display:block}.three-fifth-1200{width:60%;display:block}.four-fifth-1200{width:80%;display:block}.sixth-1200{width:16.66666%;display:block}}@media all and (min-width:1300px){.full-1300{width:100%;display:block}.half-1300{width:50%;display:block}.third-1300{width:33.33333%;display:block}.two-third-1300{width:66.66666%;display:block}.fourth-1300{width:25%;display:block}.three-fourth-1300{width:75%;display:block}.fifth-1300{width:20%;display:block}.two-fifth-1300{width:40%;display:block}.three-fifth-1300{width:60%;display:block}.four-fifth-1300{width:80%;display:block}.sixth-1300{width:16.66666%;display:block}}@media all and (min-width:1400px){.full-1400{width:100%;display:block}.half-1400{width:50%;display:block}.third-1400{width:33.33333%;display:block}.two-third-1400{width:66.66666%;display:block}.fourth-1400{width:25%;display:block}.three-fourth-1400{width:75%;display:block}.fifth-1400{width:20%;display:block}.two-fifth-1400{width:40%;display:block}.three-fifth-1400{width:60%;display:block}.four-fifth-1400{width:80%;display:block}.sixth-1400{width:16.66666%;display:block}}@media all and (min-width:1500px){.full-1500{width:100%;display:block}.half-1500{width:50%;display:block}.third-1500{width:33.33333%;display:block}.two-third-1500{width:66.66666%;display:block}.fourth-1500{width:25%;display:block}.three-fourth-1500{width:75%;display:block}.fifth-1500{width:20%;display:block}.two-fifth-1500{width:40%;display:block}.three-fifth-1500{width:60%;display:block}.four-fifth-1500{width:80%;display:block}.sixth-1500{width:16.66666%;display:block}}@media all and (min-width:1600px){.full-1600{width:100%;display:block}.half-1600{width:50%;display:block}.third-1600{width:33.33333%;display:block}.two-third-1600{width:66.66666%;display:block}.fourth-1600{width:25%;display:block}.three-fourth-1600{width:75%;display:block}.fifth-1600{width:20%;display:block}.two-fifth-1600{width:40%;display:block}.three-fifth-1600{width:60%;display:block}.four-fifth-1600{width:80%;display:block}.sixth-1600{width:16.66666%;display:block}}@media all and (min-width:1700px){.full-1700{width:100%;display:block}.half-1700{width:50%;display:block}.third-1700{width:33.33333%;display:block}.two-third-1700{width:66.66666%;display:block}.fourth-1700{width:25%;display:block}.three-fourth-1700{width:75%;display:block}.fifth-1700{width:20%;display:block}.two-fifth-1700{width:40%;display:block}.three-fifth-1700{width:60%;display:block}.four-fifth-1700{width:80%;display:block}.sixth-1700{width:16.66666%;display:block}}@media all and (min-width:1800px){.full-1800{width:100%;display:block}.half-1800{width:50%;display:block}.third-1800{width:33.33333%;display:block}.two-third-1800{width:66.66666%;display:block}.fourth-1800{width:25%;display:block}.three-fourth-1800{width:75%;display:block}.fifth-1800{width:20%;display:block}.two-fifth-1800{width:40%;display:block}.three-fifth-1800{width:60%;display:block}.four-fifth-1800{width:80%;display:block}.sixth-1800{width:16.66666%;display:block}}@media all and (min-width:1900px){.full-1900{width:100%;display:block}.half-1900{width:50%;display:block}.third-1900{width:33.33333%;display:block}.two-third-1900{width:66.66666%;display:block}.fourth-1900{width:25%;display:block}.three-fourth-1900{width:75%;display:block}.fifth-1900{width:20%;display:block}.two-fifth-1900{width:40%;display:block}.three-fifth-1900{width:60%;display:block}.four-fifth-1900{width:80%;display:block}.sixth-1900{width:16.66666%;display:block}}@media all and (min-width:2000px){.full-2000{width:100%;display:block}.half-2000{width:50%;display:block}.third-2000{width:33.33333%;display:block}.two-third-2000{width:66.66666%;display:block}.fourth-2000{width:25%;display:block}.three-fourth-2000{width:75%;display:block}.fifth-2000{width:20%;display:block}.two-fifth-2000{width:40%;display:block}.three-fifth-2000{width:60%;display:block}.four-fifth-2000{width:80%;display:block}.sixth-2000{width:16.66666%;display:block}.none-2000{display:none}}.off-none{margin-left:0}.off-half{margin-left:50%}.off-third{margin-left:33.33333%}.off-two-third{margin-left:66.66666%}.off-fourth{margin-left:25%}.off-three-fourth{margin-left:75%}.off-fifth{margin-left:20%}.off-two-fifth{margin-left:40%}.off-three-fifth{margin-left:60%}.off-four-fifth{margin-left:80%}.off-sixth{margin-left:16.66666%}@media all and (min-width:500px){.none-500{display:none}.off-none-500{margin-left:0}.off-half-500{margin-left:50%}.off-third-500{margin-left:33.33333%}.off-two-third-500{margin-left:66.66666%}.off-fourth-500{margin-left:25%}.off-three-fourth-500{margin-left:75%}.off-fifth-500{margin-left:20%}.off-two-fifth-500{margin-left:40%}.off-three-fifth-500{margin-left:60%}.off-four-fifth-500{margin-left:80%}.off-sixth-500{margin-left:16.66666%}}@media all and (min-width:600px){.none-600{display:none}.off-none-600{margin-left:0}.off-half-600{margin-left:50%}.off-third-600{margin-left:33.33333%}.off-two-third-600{margin-left:66.66666%}.off-fourth-600{margin-left:25%}.off-three-fourth-600{margin-left:75%}.off-fifth-600{margin-left:20%}.off-two-fifth-600{margin-left:40%}.off-three-fifth-600{margin-left:60%}.off-four-fifth-600{margin-left:80%}.off-sixth-600{margin-left:16.66666%}}@media all and (min-width:700px){.none-700{display:none}.off-none-700{margin-left:0}.off-half-700{margin-left:50%}.off-third-700{margin-left:33.33333%}.off-two-third-700{margin-left:66.66666%}.off-fourth-700{margin-left:25%}.off-three-fourth-700{margin-left:75%}.off-fifth-700{margin-left:20%}.off-two-fifth-700{margin-left:40%}.off-three-fifth-700{margin-left:60%}.off-four-fifth-700{margin-left:80%}.off-sixth-700{margin-left:16.66666%}}@media all and (min-width:800px){.none-800{display:none}.off-none-800{margin-left:0}.off-half-800{margin-left:50%}.off-third-800{margin-left:33.33333%}.off-two-third-800{margin-left:66.66666%}.off-fourth-800{margin-left:25%}.off-three-fourth-800{margin-left:75%}.off-fifth-800{margin-left:20%}.off-two-fifth-800{margin-left:40%}.off-three-fifth-800{margin-left:60%}.off-four-fifth-800{margin-left:80%}.off-sixth-800{margin-left:16.66666%}}@media all and (min-width:900px){.none-900{display:none}.off-none-900{margin-left:0}.off-half-900{margin-left:50%}.off-third-900{margin-left:33.33333%}.off-two-third-900{margin-left:66.66666%}.off-fourth-900{margin-left:25%}.off-three-fourth-900{margin-left:75%}.off-fifth-900{margin-left:20%}.off-two-fifth-900{margin-left:40%}.off-three-fifth-900{margin-left:60%}.off-four-fifth-900{margin-left:80%}.off-sixth-900{margin-left:16.66666%}}@media all and (min-width:1000px){.none-1000{display:none}.off-none-1000{margin-left:0}.off-half-1000{margin-left:50%}.off-third-1000{margin-left:33.33333%}.off-two-third-1000{margin-left:66.66666%}.off-fourth-1000{margin-left:25%}.off-three-fourth-1000{margin-left:75%}.off-fifth-1000{margin-left:20%}.off-two-fifth-1000{margin-left:40%}.off-three-fifth-1000{margin-left:60%}.off-four-fifth-1000{margin-left:80%}.off-sixth-1000{margin-left:16.66666%}}@media all and (min-width:1100px){.none-1100{display:none}.off-none-1100{margin-left:0}.off-half-1100{margin-left:50%}.off-third-1100{margin-left:33.33333%}.off-two-third-1100{margin-left:66.66666%}.off-fourth-1100{margin-left:25%}.off-three-fourth-1100{margin-left:75%}.off-fifth-1100{margin-left:20%}.off-two-fifth-1100{margin-left:40%}.off-three-fifth-1100{margin-left:60%}.off-four-fifth-1100{margin-left:80%}.off-sixth-1100{margin-left:16.66666%}}@media all and (min-width:1200px){.none-1200{display:none}.off-none-1200{margin-left:0}.off-half-1200{margin-left:50%}.off-third-1200{margin-left:33.33333%}.off-two-third-1200{margin-left:66.66666%}.off-fourth-1200{margin-left:25%}.off-three-fourth-1200{margin-left:75%}.off-fifth-1200{margin-left:20%}.off-two-fifth-1200{margin-left:40%}.off-three-fifth-1200{margin-left:60%}.off-four-fifth-1200{margin-left:80%}.off-sixth-1200{margin-left:16.66666%}}@media all and (min-width:1300px){.none-1300{display:none}.off-none-1300{margin-left:0}.off-half-1300{margin-left:50%}.off-third-1300{margin-left:33.33333%}.off-two-third-1300{margin-left:66.66666%}.off-fourth-1300{margin-left:25%}.off-three-fourth-1300{margin-left:75%}.off-fifth-1300{margin-left:20%}.off-two-fifth-1300{margin-left:40%}.off-three-fifth-1300{margin-left:60%}.off-four-fifth-1300{margin-left:80%}.off-sixth-1300{margin-left:16.66666%}}@media all and (min-width:1400px){.none-1400{display:none}.off-none-1400{margin-left:0}.off-half-1400{margin-left:50%}.off-third-1400{margin-left:33.33333%}.off-two-third-1400{margin-left:66.66666%}.off-fourth-1400{margin-left:25%}.off-three-fourth-1400{margin-left:75%}.off-fifth-1400{margin-left:20%}.off-two-fifth-1400{margin-left:40%}.off-three-fifth-1400{margin-left:60%}.off-four-fifth-1400{margin-left:80%}.off-sixth-1400{margin-left:16.66666%}}@media all and (min-width:1500px){.none-1500{display:none}.off-none-1500{margin-left:0}.off-half-1500{margin-left:50%}.off-third-1500{margin-left:33.33333%}.off-two-third-1500{margin-left:66.66666%}.off-fourth-1500{margin-left:25%}.off-three-fourth-1500{margin-left:75%}.off-fifth-1500{margin-left:20%}.off-two-fifth-1500{margin-left:40%}.off-three-fifth-1500{margin-left:60%}.off-four-fifth-1500{margin-left:80%}.off-sixth-1500{margin-left:16.66666%}}@media all and (min-width:1600px){.none-1600{display:none}.off-none-1600{margin-left:0}.off-half-1600{margin-left:50%}.off-third-1600{margin-left:33.33333%}.off-two-third-1600{margin-left:66.66666%}.off-fourth-1600{margin-left:25%}.off-three-fourth-1600{margin-left:75%}.off-fifth-1600{margin-left:20%}.off-two-fifth-1600{margin-left:40%}.off-three-fifth-1600{margin-left:60%}.off-four-fifth-1600{margin-left:80%}.off-sixth-1600{margin-left:16.66666%}}@media all and (min-width:1700px){.none-1700{display:none}.off-none-1700{margin-left:0}.off-half-1700{margin-left:50%}.off-third-1700{margin-left:33.33333%}.off-two-third-1700{margin-left:66.66666%}.off-fourth-1700{margin-left:25%}.off-three-fourth-1700{margin-left:75%}.off-fifth-1700{margin-left:20%}.off-two-fifth-1700{margin-left:40%}.off-three-fifth-1700{margin-left:60%}.off-four-fifth-1700{margin-left:80%}.off-sixth-1700{margin-left:16.66666%}}@media all and (min-width:1800px){.none-1800{display:none}.off-none-1800{margin-left:0}.off-half-1800{margin-left:50%}.off-third-1800{margin-left:33.33333%}.off-two-third-1800{margin-left:66.66666%}.off-fourth-1800{margin-left:25%}.off-three-fourth-1800{margin-left:75%}.off-fifth-1800{margin-left:20%}.off-two-fifth-1800{margin-left:40%}.off-three-fifth-1800{margin-left:60%}.off-four-fifth-1800{margin-left:80%}.off-sixth-1800{margin-left:16.66666%}}@media all and (min-width:1900px){.none-1900{display:none}.off-none-1900{margin-left:0}.off-half-1900{margin-left:50%}.off-third-1900{margin-left:33.33333%}.off-two-third-1900{margin-left:66.66666%}.off-fourth-1900{margin-left:25%}.off-three-fourth-1900{margin-left:75%}.off-fifth-1900{margin-left:20%}.off-two-fifth-1900{margin-left:40%}.off-three-fifth-1900{margin-left:60%}.off-four-fifth-1900{margin-left:80%}.off-sixth-1900{margin-left:16.66666%}}@media all and (min-width:2000px){.off-none-2000{margin-left:0}.off-half-2000{margin-left:50%}.off-third-2000{margin-left:33.33333%}.off-two-third-2000{margin-left:66.66666%}.off-fourth-2000{margin-left:25%}.off-three-fourth-2000{margin-left:75%}.off-fifth-2000{margin-left:20%}.off-two-fifth-2000{margin-left:40%}.off-three-fifth-2000{margin-left:60%}.off-four-fifth-2000{margin-left:80%}.off-sixth-2000{margin-left:16.66666%}}nav.nav--right{position:fixed;top:0;left:0;right:0;height:3em;padding:0 .6em;background:#fff;box-shadow:0 0 .2em rgba(17,17,17,.2);z-index:10000;transition:all .3s}nav.nav--right .brand,nav.nav--right .burger{position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}nav.nav--right .burger,nav.nav--right .menu{float:right}nav .brand{font-weight:700;float:left;padding:0 .6em;max-width:50%;white-space:nowrap;color:inherit}nav .brand *{vertical-align:middle}nav .logo{height:2em;margin-right:.3em}nav .select::after{height:calc(100% - 1px);padding:0;line-height:2.4em}nav .menu>*{margin-right:.6em}nav .burger{display:none}@media all and (max-width:60em){nav .burger{display:inline-block;cursor:pointer;bottom:-1000em;margin:0}nav .burger~.menu,nav .show:checked~.burger{position:fixed;min-height:100%;top:0;right:0;bottom:-1000em;margin:0;background:#fff;transition:all .5s ease;transform:none}nav .burger~.menu{z-index:11}nav .show:checked~.burger{color:transparent;width:100%;border-radius:0;background:rgba(0,0,0,.2);transition:all .5s ease}nav .show~.menu{width:70%;max-width:300px;transform-origin:center right;transition:all .25s ease;transform:scaleX(0)}nav .show~.menu>*{transform:translateX(100%);transition:all 0s ease .5s}nav .show:checked~.menu>:nth-child(1){transition:all .5s cubic-bezier(.645,.045,.355,1) 0s}nav .show:checked~.menu>:nth-child(2){transition:all .5s cubic-bezier(.645,.045,.355,1) .1s}nav .show:checked~.menu>:nth-child(3){transition:all .5s cubic-bezier(.645,.045,.355,1) .2s}nav .show:checked~.menu>:nth-child(4){transition:all .5s cubic-bezier(.645,.045,.355,1) .3s}nav .show:checked~.menu>:nth-child(5){transition:all .5s cubic-bezier(.645,.045,.355,1) .4s}nav .show:checked~.menu>:nth-child(6){transition:all .5s cubic-bezier(.645,.045,.355,1) .5s}nav .show:checked~.menu{transform:scaleX(1)}nav .show:checked~.menu>*{transform:translateX(0);transition:all .5s ease-in-out .6s}nav .burger~.menu>*{display:block;margin:.3em;text-align:left;max-width:calc(100% - .6em)}nav .burger~.menu>a{padding:.3em .9em}}.stack,.stack .toggle{margin-top:0;margin-bottom:0;display:block;width:100%;border-radius:0}.stack:first-child,.stack:first-child .toggle{border-top-left-radius:.2em;border-top-right-radius:.2em}.stack:last-child,.stack:last-child .toggle{border-bottom-left-radius:.2em;border-bottom-right-radius:.2em}input.stack,select.stack,textarea.stack{transition:border-bottom 0 ease 0;border-bottom-width:0}input.stack:last-child,select.stack:last-child,textarea.stack:last-child{border-bottom-width:1px}input.stack:focus+input,input.stack:focus+select,input.stack:focus+textarea,select.stack:focus+input,select.stack:focus+select,select.stack:focus+textarea,textarea.stack:focus+input,textarea.stack:focus+select,textarea.stack:focus+textarea{border-top-color:#041E42}.card,.modal .overlay~*{position:relative;box-shadow:0;border-radius:.2em;border:1px solid #ccc;overflow:hidden;text-align:left;background:#fff;margin-bottom:.6em;padding:0;transition:all .3s ease}.hidden.card,.modal .overlay:checked+*,.modal .overlay~.hidden,.modal .overlay~:checked+*,:checked+.card{font-size:0;padding:0;margin:0;border:0}.card>*,.modal .overlay~*>*{max-width:100%;display:block}.card>:last-child,.modal .overlay~*>:last-child{margin-bottom:0}.card header,.card section,.card>p,.modal .overlay~* header,.modal .overlay~* section,.modal .overlay~*>p{padding:.6em .8em}.card section,.modal .overlay~* section{padding:.6em .8em 0}.card hr,.modal .overlay~* hr{border:none;height:1px;background-color:#eee}.card header,.modal .overlay~* header{font-weight:700;position:relative;border-bottom:1px solid #eee}.card header h1,.card header h2,.card header h3,.card header h4,.card header h5,.card header h6,.modal .overlay~* header h1,.modal .overlay~* header h2,.modal .overlay~* header h3,.modal .overlay~* header h4,.modal .overlay~* header h5,.modal .overlay~* header h6{padding:0;margin:0 2em 0 0;line-height:1;display:inline-block;vertical-align:text-bottom}.modal .overlay:after,.modal .overlay:before,.modal>input{display:none}.card header:last-child,.modal .overlay~* header:last-child{border-bottom:0}.card footer,.modal .overlay~* footer{padding:.8em}.card p,.modal .overlay~* p{margin:.3em 0}.card p:first-child,.modal .overlay~* p:first-child{margin-top:0}.card p:last-child,.modal .overlay~* p:last-child{margin-bottom:0}.card>p,.modal .overlay~*>p{margin:0;padding-right:2.5em}.card .close,.modal .overlay~* .close{position:absolute;top:.4em;right:.3em;font-size:1.2em;padding:0 .5em;cursor:pointer;width:auto}.modal .overlay,.modal .overlay~*{position:fixed;transition:all .3s}.card .close:hover,.modal .overlay~* .close:hover{color:#ff4136}.card h1+.close,.modal .overlay~* h1+.close{margin:.2em}.card h2+.close,.modal .overlay~* h2+.close{margin:.1em}.card .dangerous,.modal .overlay~* .dangerous{background:#ff4136;float:right}.modal{text-align:center}.modal>input~*{opacity:0;max-height:0;overflow:hidden}.modal .overlay{top:0;left:0;bottom:0;right:0;margin:0;border-radius:0;background:rgba(17,17,17,.6);z-index:100000}.modal .overlay~*{border:0;top:50%;left:50%;transform:translateX(-50%) translateY(-50%) scale(.2,.2);z-index:1000000}.modal>input:checked~*{display:block;opacity:1;max-height:10000px;transition:all .3s}.modal>input:checked~.overlay~*{max-height:90%;overflow:auto;-webkit-transform:translateX(-50%) translateY(-50%) scale(1,1);transform:translateX(-50%) translateY(-50%) scale(1,1)}.dropimage,.tabs{overflow:hidden}@media (max-width:60em){.modal .overlay~*{min-width:90%}}.dropimage{position:relative;display:block;padding:0 0 56.25%;cursor:pointer;border:0;margin:.3em 0;border-radius:.2em;background-color:#ddd;background-size:cover;background-position:center center;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iNjQwIiB2ZXJzaW9uPSIxLjEiPjxnIHN0eWxlPSJmaWxsOiMzMzMiPjxwYXRoIGQ9Ik0gMTg3IDIzMCBDIDE3NSAyMzAgMTY1IDI0MCAxNjUgMjUyIEwgMTY1IDMwMCBMIDE2NSA0MDggQyAxNjUgNDIwIDE3NSA0MzAgMTg3IDQzMCBMIDQ2MyA0MzAgQyA0NzUgNDMwIDQ4NSA0MjAgNDg1IDQwOCBMIDQ4NSAzMDAgTCA0ODUgMjUyIEMgNDg1IDI0MCA0NzUgMjMwIDQ2MyAyMzAgTCAxODcgMjMwIHogTSAzNjAgMjU2IEEgNzAgNzIgMCAwIDEgNDMwIDMyOCBBIDcwIDcyIDAgMCAxIDM2MCA0MDAgQSA3MCA3MiAwIDAgMSAyOTAgMzI4IEEgNzAgNzIgMCAwIDEgMzYwIDI1NiB6Ii8+PGNpcmNsZSBjeD0iMzYwIiBjeT0iMzMwIiByPSI0MSIvPjxwYXRoIGQ9Im0yMDUgMjI1IDUtMTAgMjAgMCA1IDEwLTMwIDAiLz48cGF0aCBkPSJNMjg1IDIwMEwyNzAgMjI1IDM3NiAyMjUgMzYxIDIwMCAyODUgMjAwek0zMTAgMjA1TDMzNyAyMDUgMzM3IDIxOCAzMTAgMjE4IDMxMCAyMDV6Ii8+PHBhdGggZD0ibTQwNSAyMjUgNS0xMCAyMCAwIDUgMTAtMzAgMCIvPjwvZz48L3N2Zz4=)}.dropimage input{left:0;width:100%;height:100%;border:0;margin:0;padding:0;opacity:0;cursor:pointer;position:absolute}.tabs,.tabs>.row,[data-tooltip]{position:relative}.tabs>label img{float:left;margin-left:.6em}.tabs>.row{width:calc(100% + 2 * .6em);display:table;table-layout:fixed;padding-left:0;transition:all .3s;border-spacing:0;margin:0}.tabs>.row:after,.tabs>.row:before{display:none}.tabs>.row img,.tabs>.row>*{display:table-cell;vertical-align:top;margin:0;width:100%}.tabs>input{display:none}.tabs>input+*{width:100%}.tabs>input+label{width:auto}.two.tabs>.row{width:200%;left:-100%}.two.tabs>input:nth-of-type(1):checked~.row{margin-left:100%}.two.tabs>label img{width:48%;margin:4% 0 4% 4%}.three.tabs>.row{width:300%;left:-200%}.three.tabs>input:nth-of-type(1):checked~.row{margin-left:200%}.three.tabs>input:nth-of-type(2):checked~.row{margin-left:100%}.three.tabs>label img{width:30%;margin:5% 0 5% 5%}.four.tabs>.row{width:400%;left:-300%}.four.tabs>input:nth-of-type(1):checked~.row{margin-left:300%}.four.tabs>input:nth-of-type(2):checked~.row{margin-left:200%}.four.tabs>input:nth-of-type(3):checked~.row{margin-left:100%}.four.tabs>label img{width:22%;margin:4% 0 4% 4%}.tabs>label:first-of-type img{margin-left:0}[data-tooltip]:after,[data-tooltip]:before{position:absolute;z-index:10;opacity:0;border-width:0;height:0;padding:0;overflow:hidden;transition:opacity .6s ease,height 0s ease .6s;top:calc(100% - 6px);left:0;margin-top:12px}[data-tooltip]:after{margin-left:0;font-size:.8em;background:#111;content:attr(data-tooltip);white-space:nowrap}[data-tooltip]:before{content:'';width:0;height:0;border-width:0;border-style:solid;border-color:transparent transparent #111;margin-top:0;left:10px}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;border-width:6px;height:auto}[data-tooltip]:focus:after,[data-tooltip]:hover:after{padding:.45em .9em}.tooltip-top:after,.tooltip-top:before{top:auto;bottom:calc(100% - 6px);left:0;margin-bottom:12px}.tooltip-top:before{border-color:#111 transparent transparent;margin-bottom:0;left:10px}.tooltip-right:after,.tooltip-right:before{left:100%;margin-left:6px;margin-top:0;top:0}.tooltip-right:before{border-color:transparent #111 transparent transparent;margin-left:-6px;left:100%;top:7px}.tooltip-left:after,.tooltip-left:before{right:100%;margin-right:6px;left:auto;margin-top:0;top:0}.tooltip-left:before{border-color:transparent transparent transparent #111;margin-right:-6px;right:100%;top:7px} /** ****************************************************************************** ETSU CUSTOM, part 2 ****************************************************************************** */ /** - - - - - - - - - - - - - - - CORE ELEMENTS that need to be set first - - - - - - - - - - - - - - - **/ /** FONT SIZE: FLUID & RESPONSIVE TYPOGRAPHY & EM/REM UNITS - - - - - - - - - - - - - - - - ** * TuT: https://css-tricks.com/snippets/css/fluid-typography/ * * * v1: Left here just in case we need to roll-back if there's an issue with the v2 method below. @KWC 2/22/19align-content * html { font-size: 15px;line-height:1.5rem; } @media screen and (max-width: 60em) { html, body { font-size: calc(15px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 60.1em) { html, body { font-size: 1.05rem; } } * * v2: new and improved */ /** FONT SIZE: FLUID & RESPONSIVE TYPOGRAPHY & EM/REM UNITS - - - - - - - - - - - - - - - - **/ html { font-size: 14px; } /* TuT: https://css-tricks.com/snippets/css/fluid-typography/ Formula: font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */ body { font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320))); } /** FONTS - - - - - - - - - - - - - - - - **/ .display, .norwester,.text--norwester,.text--display,.date--calendar .day, .date--calendar .month {font-family:Norwester,Helvetica-Neue, 'Helvetica Neue',Helvetica,Arial,sans-serif;} .sans, .sans-serif, .sansserif, .sanserif, html, body, .text--sans,pre.code:before, .date--calendar .day:before, .date--calendar .year, .roboto, .roboto300, .roboto400, .roboto700 #mautic .mauticform-label {font-family:Roboto,Helvetica-Neue,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:300;} .roboto400 {font-weight:400;} .roboto700, #mautic .mauticform-label, .mauticform-button-wrapper .mauticform-button.btn-default, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default{font-weight:700;} .serif, .text--serif {font-family:'Sorts Mill Goudy',Georgia,serif;font-weight:400;} .code, .mono, .text--mono, #header #nav__secondary input[type="text"], .switch[data-action="aria-switch"]:before, #mautic input, #mautic selectbox, #mautic textarea {font-family:Menlo,Consolas,Monaco,'Courier New',monospace;} #mautic input, #mautic selectbox, #mautic textarea {font-weight: normal;} .icon, .fontawesome, .date--calendar .day:before {display: inline-block;font-family: FontAwesome;font-size: inherit; text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /** LINKS - - - - - - - - - - - - - - - - ** * cited below in common element colors */ a:link, a:visited, a:active {/* .text--blue */ text-decoration:underline;} a:focus, a:hover {/* .text--black */ text-decoration:none;} a .fa {text-decoration:none;} /** BACKGROUNDS - - - - - - - - - - - - - - - - - - - - **/ body {background-color:#fff; background:#fff url(https://www.etsu.edu/_images/background_images/noise.png) repeat 0 0; background: url(https://www.etsu.edu/_images/background_images/noise.png) repeat 0 0, radial-gradient(circle at 50% 100%, hsla(0,0%,100%,0.1) 50%, hsla(44,100%,59%,0.1) 66%, hsla(209,36%,54%,0.3) 100%) no-repeat fixed, -webkit-gradient(linear, left top, left bottom, color-stop(62%, #FFF),color-stop(138%, hsla(44,100%,59%,0.1))) no-repeat fixed; background: url(https://www.etsu.edu/_images/background_images/noise.png) repeat 0 0, -webkit-radial-gradient(50% 100%, circle, hsla(0,0%,100%,0.1) 50%, hsla(44,100%,59%,0.1) 66%, hsla(209,36%,54%,0.3) 100%) no-repeat fixed, -webkit-linear-gradient(top, #FFF 62%,hsla(44,100%,59%,0.1) 138%) no-repeat fixed; background: url(https://www.etsu.edu/_images/background_images/noise.png) repeat 0 0, -o-radial-gradient(50% 100%, circle, hsla(0,0%,100%,0.1) 50%, hsla(44,100%,59%,0.1) 66%, hsla(209,36%,54%,0.3) 100%) no-repeat fixed, -o-linear-gradient(top, #FFF 62%,hsla(44,100%,59%,0.1) 138%) no-repeat fixed; background: url(https://www.etsu.edu/_images/background_images/noise.png) repeat 0 0, radial-gradient(circle at 50% 100%, hsla(0,0%,100%,0.1) 50%, hsla(44,100%,59%,0.1) 66%, hsla(209,36%,54%,0.3) 100%) no-repeat fixed, linear-gradient(to bottom, #FFF 62%,hsla(44,100%,59%,0.1) 138%) no-repeat fixed; height: 100%;} body.noiseOnly { background:unset; background: #fff url(https://www.etsu.edu/_images/background_images/noise.png) repeat 0 0; } body.whiteBkgd { background:unset; background-color:#fff; } /* alt. darker background noise */ .bkgd__noise--liteGrey {background:#fff url(https://www.etsu.edu/_images/background_images/noise_litegrey.png) repeat 0 0;} /** ABBREVIATIONS - - - - - - - - - - - - - - - - **/ abbr[title] {cursor:help;vertical-align: baseline;} abbr[title].noUnderline {border-bottom:none;} /* NECESSARY HACK: Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */ @media and (-webkit-min-device-pixel-ratio:0) { abbr[title].noUnderline, #nav__primary > ul > li:nth-child(2) > a > abbr{border-bottom-color:transparent!important;} } /** - - - - - - - - - - - - - - - Most COMMON ELEMENTS as Building Blocks - - - - - - - - - - - - - - - **/ /** Text Colors (ETSU Branded) - - - **/ /** primary colors ** _________________________________________________________________ | CORE CLASS | TAG-ALONG CLASSES | ----------------------------------------------------------------- */ .text--gold, .bkgd--blue, .ribbon.ribbon--blue, .box--blue,.box--blue a:hover,.box--blue a:focus, .button:hover,.button:focus, a.button:link,a.button:visited,a.button:active, button:not(.switch),button.blue,.button--blue,.button.blue, .pseudo.gold:link,.pseudo.gold:visited,.pseudo.gold:active, #mautic .mauticform-button-wrapper .mauticform-button.btn-default, #mautic .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default{color:#FFC72C} .text--blue, a:link,a:visited, .bkgd--success,.box--success, .bkgd--info,.box--info, .ribbon.ribbon--gold, .box--gold,.box--gold a:not(.button):link,.box--gold a:not(.button):visited,.box--gold a:not(.button):active, .bkgd--success, .box--info a:link,.box--info a:visited,.box--info a:active, .box--success,.box--success a:link,.box--success a:visited,.box--success a:active, .box__neutral--gray a:link,.box__neutral--grey a:link, .box--gray a:link,.box--grey a:link,.box--liteGray a:link,.box--liteGrey a:link, .box__neutral--gray a:visited,.box__neutral--grey a:visited, .box--gray a:visited,.box--grey a:visited,.box--liteGray a:visited,.box--liteGrey a:visited, .box__neutral--gray a:active,.box__neutral--grey a:active, .box--gray a:active,.box--grey a:active,.box--liteGray a:active,.box--liteGrey a:active, button.gold, button.button--gold,.button.button--gold,.button.gold, .button.button--gold:link,.button.button--gold:visited,.button.button--gold:active, .button.gold:link,.button.gold:visited,.button.gold:active, [type=submit].button--gold,[type=submit].button--gold:link, [type=submit].button--gold:visited,[type=submit].button--gold:active, label .button--gold,label .button--gold:link,label .button--gold:visited,label .button--gold:active, button.success,.button--success,.button.success,button.button--success, button.success:link,button.success:visited,button.success:active, .button--success:link,.button--success:visited,.button--success:active, .button.success:link,.button.success:visited,.button.success:active, .pseudo[type=submit],.pseudo.button, a.pseudo.button:link,a.pseudo.button:visited,a.pseudo.button:active, .pseudo:link,.pseudo:visited,.pseudo:active, button.pseudo,button.pseudo:link,button.pseudo:visited,button.pseudo:active, .pseudo.blue:link,.pseudo.blue:visited,.pseudo.blue:active, .pseudo.error,.pseudo.button.error, #mautic .mauticform-label, #mautic .mauticform-label a:link, #mautic .mauticform-label a:visited, #mautic .mauticform-label a:active, #mautic .mauticform-helpmessage, #mautic .mauticform-helpmessage a:link, #mautic .mauticform-helpmessage a:visited, #mautic .mauticform-helpmessage a:active {color:#041E42} .text--black, a:hover,a:focus,a:active, .bkgd--white, .box--gold a:hover,.box--gold a:focus, .box--info a:hover,.box--info a:focus, .box--warning a:hover,.box--warning a:focus, .box--alert a:hover,.box--alert a:focus, button.gold:hover,button.gold:focus, button.button--gold:hover,button.button--gold:focus, .button.button--gold:hover,.button.button--gold:focus, [type=submit].button--gold:hover,[type=submit].button--gold:focus, .pseudo.button:hover,.pseudo.button:focus, button.pseudo:hover,button.pseudo:focus, .pseudo[type=submit]:hover,.pseudo[type=submit]:focus, button.pseudo.info,.pseudo.button.info, .pseudo.black:link,.pseudo.black:visited,.pseudo.black:active, #mautic .mauticform-label a:hover, #mautic .mauticform-label a:focus, #mautic .mauticform-helpmessage a:hover, #mautic .mauticform-helpmessage a:focus {color:#000} .text--white, .bkgd--error,.box--error, .box--error,.bkgd--error, .bkgd--black, .bkgd--darkBlue,.box--darkBlue, .bkgd--darkRed,.bkgd--red,.box--red, .bkgd--darkGreen,.box--darkGreen, .bkgd--darkTan,.box--darkTan, .bkgd--darkGray,.bkgd--darkGrey,.bkgd--offBlack,.box--darkGrey,.box--darkGrey,.box--offBlack, .bkgd--darkBrown,.box--darkBrown, .box--black, .box--blue a:link,.box--blue a:visited,.box--blue a:active, .box--success a:hover,.box--success a:focus, .box--error a:hover,.box--error a:focus, button:hover,button:focus, a.button:hover,a.button:focus, [type=submit]:hover,[type=submit]:focus, label .button:hover, label .button:focus, button.info,button.info:hover,button.info:focus, button.button--info,.button--info,.button--info:hover,.button--info:focus, .button.info,.button.info:hover,.button.info:focus, button.success:hover,button.success:focus, .button--success:hover,.button--success:focus, .button.success:hover,.button.success:focus, button.error,button.error:hover,button.error:focus, button.button--error,.button--error,.button--error:hover,.button--error:focus, a.button.error,a.button.error:hover,a.button.error:focus, .button.error,.button.error:hover,.button.error:focus, button.pseudo.info:hover,button.pseudo.info:focus,.pseudo.info:hover,.pseudo.info:focus, button.pseudo.success:hover,button.pseudo.success:focus,.pseudo.success:hover,.pseudo.success:focus, .pseudo.error:hover,.pseudo.error:focus, #mautic .mauticform-errormsg a:hover, #mautic .mauticform-message a:hover, #mautic .mauticform-message a:focus, #mautic .mauticform-error a:hover, #mautic .mauticform-error a:focus, #mautic .mauticform-errormsg a:hover, #mautic .mauticform-errormsg a:focus {color:#FFF} /** accent colors: complimentary **/ .text--liteBlue, .pseudo.info:link,.pseudo.info:visited,.pseudo.info:active{color:#5E8AB4} .text--liteGold, .text--liteYellow{color:#F8E08E} .text--liteGreen {color:#789D4A} .text--liteTan, .text--tan{color:#C6AA76} /** accent colors: bold **/ .text--darkBlue, .text--info, #mautic .mauticform-helpmessage {color:#005EB8} .text--darkRed, .text--error, .text--red {color:#A6192E} .text--darkGreen, .text--success, .text--green, pre.code:before, .pseudo.button.bkgd--success:link,.pseudo.button.bkgd--success:visited,.pseudo.button.bkgd--success:active {color:#046A38} .text--darkTan, .text--alert,.text--warning, .bkgd--alert,.bkgd--warning,.box--alert,.box--warning .bkgd--liteTan,.bkgd--tan,.box--liteTan,.box--tan .box--warning a,.box--warning a:link,.box--warning a:visited,.box--warning a:active, .box--alert a,.box--alert a:link,.box--alert a:visited,.box--alert a:active, .box__neutral--brown,.box--brown,.box--liteBrown, button.warning,button.button--warning,button.warning:hover,button.warning:focus, .button--warning,.button--warning:hover,.button--warning:focus, button.alert,button.button--alert,button.alert:hover,button.alert:focus, .button.warning,button.warning, a.button.warning, a.button.warning:hover,a.button.warning:focus, a.button.button--warning:hover,a.button.button--warning:focus, a.button.alert:hover,a.button.alert:focus, a.button.button--alert:hover,a.button.button--alert:focus, button[disabled],button[disabled]:hover,button[disabled]:focus, button.button--disabled,.button--disabled,.button--disabled:hover,.button--disabled:focus, .button.disabled,.button.disabled:hover,.button.disabled:focus, a.button.button--disabled:hover,a.button.button--disabled:focus, a.button.disabled:hover,a.button.disabled:focus{color:#653024} /** neutral colors: gray/grey **/ .text--darkGray, .text--darkGrey,.text--offBlack,.box--liteGray,.box--liteGrey, .text--disabled{color:#707372} .text--gray, .text--grey{color:#9EA2A2} .text--liteGray, .text--liteGrey{color:#C7C9C7} /** neutral colors: brown **/ .text--darkBrown {color:#776E64} .text--brown {color:#B7A99A} .text--liteBrown {color:#D7D2CB} /** BACKGROUND-COLORS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /** primary colors **/ .bkgd--gold, .box--gold, .ribbon.ribbon--gold, .card--gold, .card--blue:hover, .card--blue:focus, .cards > .card > a > h3:nth-child(even), button.gold,.button--gold, .pseudo.gold:hover,.pseudo.gold:focus, .cards > .card > a:hover > h3, .cards > .card > a:focus > h3 {background-color:#FFC72C} .bkgd--blue, .box--blue, .ribbon.ribbon--blue, .button--blue, .card--blue,.card--gold:hover,.card--gold:focus, .pseudo.blue:hover,.pseudo.blue:focus, nav .burger:hover, nav .burger:focus, .cards > .card > a > h3, #mautic .mauticform-button-wrapper .mauticform-button.btn-default, #mautic .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default {background-color:#041E42;} .bkgd--black, .box--black, .pseudo.black:hover,.pseudo.black:focus{background-color:#000} .bkgd--white, .box--white, .pseudo.white:hover,.pseudo.white:focus {background-color:#FFF} /** accent colors: complimentary **/ .bkgd--liteBlue, .bkgd--info,.box--info, .box--liteBlue, button.pseudo.info:hover,button.pseudo.info:focus,.pseudo.info:hover,.pseudo.info:focus, button.info:link,button.info:visited,button.info:active,.button--info,input.info {background-color:#5E8AB4} .bkgd--liteGold, .bkgd--liteYellow,.box--liteGold,.box--liteYellow, .pseudo.warning:hover,.pseudo.warning:focus,.pseudo.alert:hover,.pseudo.alert:focus, button.warning,.button--warning,.button--alert{background-color:#F8E08E} .bkgd--liteGreen, .bkgd--success,.box--success, .box--liteGreen, .pseudo.success:hover,.pseudo.success:focus, button.success,.button--success {background-color:#789D4A} .bkgd--liteTan, .bkgd--alert,.box--alert, .bkgd--warning,.box--warning, .bkgd--tan,.box--liteTan,.box--tan, .pseudo.warning:hover,.pseudo.warning:focus,.pseudo.alert:hover,.pseudo.alert:focus{background-color:#C6AA76} /** accent colors: bold **/ .bkgd--darkBlue, .box--darkBlue{background-color:#005EB8} .bkgd--darkRed, .bkgd--error,.box--error, .bkgd--red,.box--red, .pseudo.error:hover,.pseudo.error:focus, button.error,.button--error {background-color:#A6192E} .bkgd--darkGreen, .box--darkGreen{background-color:#046A38} .bkgd--darkTan, .box--darkTan{background-color:#653024} /** neutral colors: gray/grey **/ .bkgd--darkGray, .bkgd--darkGrey,.bkgd--offBlack,.box--darkGrey,.box--darkGrey,.box--offBlack{background-color:#707372} .bkgd--gray, .bkgd--grey,.box--gray,.box--grey{background-color:#9EA2A2} .bkgd--liteGray, .box__neutral--gray,.box__neutral--grey,.box--gray,.box--grey,.box--liteGray,.box--liteGrey, .box--disabled, .pseudo.disabled:hover,.pseudo.disabled:focus, button[disabled],.button--disabled{background-color:#C7C9C7} .bkgd--liteGray97, .bkgd--liteGrey97, .bkgd--ghostGray, .bkgd--ghostGrey, .list--stripedHeader > li > details > summary, .list--stripedHeader > li > h2, .list--stripedHeader > li > h3, .list--stripedHeader > li > h4 {background-color:hsla(120, 2%, 97%, 1);} /** neutral colors: brown **/ .bkgd--darkBrown, .box--darkBrown{background-color:#776E64} .bkgd--brown, .box--brown{background-color:#B7A99A} .bkgd--liteBrown, .box__neutral--brown,.box--brown,.box--liteBrown{background-color:#D7D2CB} /** transparency for overrides **/ .bkgd--none .bkgd--transparent, button.pseudo.info:link,button.pseudo.info:visited,button.pseudo.info:active{background-color:transparent!important;} /** BORDERS & their colors - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - **/ .border--gold, .card--gold,.card--blue:hover{border:solid 1px #FFC72C} .border--blue, .button--blue, .card--blue, .card--gold:hover,.card--gold:focus {border:solid 1px #041E42} .border--black, .box--darkGray,.box--darkGrey,.box--offBlack,.box--blue {border:solid 1px #000;} .border--white {border:solid 1px #FFF;} /** accent colors: complimentary **/ .border--liteBlue {border:solid 1px #5E8AB4} .border--liteGold, .border--liteYellow{border:solid 1px #F8E08E} .border--liteGreen {border:solid 1px #789D4A} .border--liteTan, .border--tan,.box--liteGold,.box--liteYellow{border:solid 1px #C6AA76} /** accent colors: bold **/ .border--darkBlue, .bkgd--info,.box--info {border:solid 1px #005EB8} .border--darkRed, .border--error, .border--red{border:solid 1px #A6192E} .border--darkGreen, .bkgd--success,.box--success {border:solid 1px #046A38} .border--darkTan, .box--darkBrown{border:solid 1px #653024} /** neutral colors: gray/grey **/ .border--darkGray {border:solid 1px #707372} .border--gray, .box--liteGray,.box--liteGrey,.box--gray,.box--grey, .box--disabled{border:solid 1px #9EA2A2} .border--liteGray, pre.code{border:solid 1px #C7C9C7;} /** neutral colors: brown **/ .border--darkBrown, .box--warning,.box--alert, .box--brown,.box--liteBrown{border:solid 1px #776E64} .border--brown, .box--liteBrown, .box__neutral--brown,.box--brown,.box--liteBrown{border:solid 1px #B7A99A} .border--liteBrown {border:solid 1px #D7D2CB} /** transparent border: useful if pseudo class has a border */ .border--transparent {border:solid 1px transparent!important;} /** remove a border **/ .border-none, abbr[title].border--none,abbr[title].border--no-underline{border:none!important;} /** BOXES - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ** * cited here, but pieced together by pairing necessary styles with the above common individual styles * for easier maintenance (I think) @KWC **/ /* .box--* shared styles - - - - - - - - */ .box--blue,.box--gold,.box--black,.box--white,.box--info,.box--warning,.box--alert,.box--success,.box--error, .box__neutral--gray,.box__neutral--grey,.box--gray,.box--grey,.box--liteGray,.box--liteGrey, .box__neutral--brown,.box--brown,.box--liteBrown {box-sizing:border-box;display:block;margin-bottom:1rem;/** .pad--4thTB.pad--halfTB **/} header.box--gold,header.box--blue,#header.box--gold,#header.box--blue, nav.box--gold,nav.box--blue,#nav.box--gold,#nav.box--blue, footer.box--gold,footer.box--blue,#footer.box--gold,#footer.box--blue {margin-bottom:0} .box--gold {/** .bkgd--gold.text--blue.border--liteGold **/} .box--gold a:link,.box--gold a:visited,.box--gold a:active{/** .text--blue **/} .box--gold a:hover,.box--gold a:focus{/** .text--black **/} .box--blue {/** .bkgd--blue.text--gold.border--darkBlue **/} .box--blue a:link,.box--blue a:visited,.box--blue a:active{/** .text--white **/} .box--blue a:hover,.box--blue a:focus{/** .text--gold **/} .box--info {background-color: hsla(209,36%,84%,1);border: solid 1px hsla(209,100%,76%,1);/** Shades of liteBlue/darkBlue + .text--blue **/} .box--info a:link,.box--info a:visited,.box--info a:active{/** .text--blue **/} .box--info a:hover,.box--info a:focus{/** .text--black **/} .box--warning, .box--alert {background-color: hsla(39,41%,82%,1);border: solid 1px hsla(39,9%,63%,1);/** Shades of liteTan/darkTan + .text--darkTan **/} .box--warning a:link,.box--warning a:visited,.box--warning a:active, .box--alert a:link,.box--alert a:visited,.box--alert a:active{/** .text--darkTan **/} .box--warning a:hover,.box--warning a:focus. .box--alert a:hover,.box--alert a:focus{/** .text--black **/} .box--success {background-color: hsla(87,36%,75%,1);border: solid 1px hsla(87,36%,55%,1);/** Shades of liteGreen + .text--blue **/} .box--success a:link,.box--success a:visited,.box--success a:active{/** .text--blue **/} .box--success a:hover,.box--success a:focus{/** .text--black */} .box--error {background-color: hsla(351,74%,77%,1);border:solid 1px hsla(351,74%,67%,1);color:hsla(351, 74%, 17%, 1);/** Shades of darkRed **/;} .box--error a:link,.box--error a:visited,.box--error a:active {color:hsla(351, 74%, 7%, 1);} .box--error a:hover,.box--error a:focus{/* .text--black */} .box--disabled, .box__neutral--gray,.box__neutral--grey,.box--gray,.box--grey,.box--liteGray,.box--liteGrey{/** .bkgd--liteGray.border--gray **/} .box--disabled a:link,.box--disabled a:visited,.box--disabled a:active, .box__neutral--gray a:link,.box__neutral--grey a:link, .box--gray a:link,.box--grey a:link,.box--liteGray a:link,.box--liteGrey a:link, .box__neutral--gray a:visited,.box__neutral--grey a:visited, .box--gray a:visited,.box--grey a:visited,.box--liteGray a:visited,.box--liteGrey a:visited, .box__neutral--gray a:active,.box__neutral--grey a:active, .box--gray a:active,.box--grey a:active,.box--liteGray a:active,.box--liteGrey a:active{/* .text--blue */} .box--disabled a:hover,.box--disabled a:focus, .box__neutral--gray a:hover,.box__neutral--grey a:hover, .box--gray a:link,.box--grey a:link,.box--liteGray a:link,.box--liteGrey a:link, .box__neutral--gray a:visited,.box__neutral--grey a:visited, .box--gray a:visited,.box--grey a:visited,.box--liteGray a:visited,.box--liteGrey a:visited, .box__neutral--gray a:active,.box__neutral--grey a:active, .box--gray a:active,.box--grey a:active,.box--liteGray a:active,.box--liteGrey a:active .box__neutral--brown,.box--brown,.box--liteBrown{/** .bkgd--liteBrown.text--darkTan.border--brown **/} /** boxes with gradient backgrounds * NOTE: T = Top | B = Bottom **/ .box--gold.gradientTB, .bkgd--gold.gradientTB {background:#FFC72C; background: linear-gradient(hsla(44,100%,89%,1) 0%, #FFC72C 100%); background: -moz-linear-gradient(top, hsla(44,100%,89%,1) 0%, #FFC72C 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(44,100%,89%,1)), color-stop(100%,#FFC72C)); background: -webkit-linear-gradient(top, hsla(44,100%,89%,1) 0%,#FFC72C 100%); background: -o-linear-gradient(top, hsla(44,100%,89%,1) 0%,#FFC72C 100%); background: -ms-linear-gradient(top, hsla(44,100%,89%,1) 0%,#FFC72C 100%); background: linear-gradient(to bottom, hsla(44,100%,89%,1) 0%,#FFC72C 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#FFC72C',GradientType=0 ); border-color:hsla(44,100%,39%,1); } .box--blue.gradientTB, .bkgd--blue.gradientTB {background:#041E42; background: linear-gradient(hsla(215,89%,44%,1) 0%, #041E42 60%); background: -moz-linear-gradient(top, hsla(215,89%,44%,1) 0%, #041E42 60%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(215,89%,44%,1)), color-stop(60%,#041E42)); background: -webkit-linear-gradient(top, hsla(215,89%,44%,1) 0%,#041E42 60%); background: -o-linear-gradient(top, hsla(215,89%,44%,1) 0%,#041E42 60%); background: -ms-linear-gradient(top, hsla(215,89%,44%,1) 0%,#041E42 60%); background: linear-gradient(to bottom, hsla(215,89%,44%,1) 0%,#041E42 60%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003876', endColorstr='#041E42',GradientType=0 ); border-color:hsla(215,89%,44%,1); } /** ARROWS - - - - - - - - - - - - - - - - * * NOTE: * .arrow is created using css borders, which works great unless the container box is multi-line * But use .triangle__* for multi-line objects (text falls to a second line, etc) * It uses an SVG (vector) triangle instead that can flex in size and be responsive to multi-line items * allowing it to grow if needed */ /* for single line items * * T/R/B/L indicates the side for the arrow to appear on * T = Top | R = Right | B = Bottom | L = Left */ /** shared arrow styles **/ .arrow--whiteT, .arrow--whiteR, .arrow--whiteB, .arrow--whiteL {position:relative;} .arrow--whiteT:after, .arrow--whiteR:after, .arrow--whiteB:after, .arrow--whiteL:after, .card.card--blue:after, .card.card--gold:after {border:solid 1rem transparent;content:'';height: 0;pointer-events: none;position: absolute;width: 0;z-index: 6;} .arrow--whiteT {} .arrow--whiteR {} .arrow--whiteB {} .arrow--whiteL {} .arrow--whiteT:after {border-top-color:#fff;top:-1px;left:45%;left:calc(50% - 1rem);} .arrow--whiteR:after {border-right-color: #fff;right:-1px;top:0;} .arrow--whiteB:after, .card.card--blue:after, .card.card--gold:after {border-bottom-color:#fff;bottom:-1px;left:45%;left:calc(50% - 1rem);} .arrow--whiteL:after {border-left-color: #fff;left:-1px;top:0;} /* for multi-line items (eg. a headline adjust from 1 line to 2 lines on smaller screens) * * Base64 encoded the vector SVG images as a background-images: * ensures maximum compatibility so it works in FF and IE11+ * along with caching via this CSS file being cached */ .arrow2x--whiteR, .triangle__right--white {padding:0.25rem 2rem 0.25rem 1rem;position:relative;} .arrow2x--whiteR:after,.triangle__right--white:after {content:'';background-image:url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgMTI4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPjxnIGlkPSJ0cmlhbmdsZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9InRyaWFuZ2xlX19yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTY0LjAwMDAwMCwgMC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj48cG9seWdvbiBpZD0iUmVjdGFuZ2xlIiBwb2ludHM9IjEyOCAwIDEyOCAxMjggNjQgNjQiPjwvcG9seWdvbj48L2c+PC9nPjwvc3ZnPg=='); background-repeat:no-repeat;background-position:center;background-size:contain; height:100%;min-height:1em;max-height:100%;position:absolute;right:-0.1em;top:0;width:1em;} .arrow2x--whiteB, .triangle__bottom--white {} .arrow2x--whiteB:after,.triangle__bottom--white:after {bottom:0;background-image:url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgMTI4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPjxnIGlkPSJ0cmlhbmdsZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9InRyaWFuZ2xlX19ib3R0b20iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCA2NC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj48cG9seWdvbiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2NC4wMDAwMDAsIDMyLjAwMDAwMCkgc2NhbGUoMSwgLTEpIHJvdGF0ZSgtOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTY0LjAwMDAwMCwgLTMyLjAwMDAwMCkiIHBvaW50cz0iOTYgLTMyIDk2IDk2IDMyIDMyIj48L3BvbHlnb24+PC9nPjwvZz48L3N2Zz4='); background-repeat:no-repeat;background-position:center;background-size:contain;content:''; height:100%;min-height:1em;max-height:100%;position:absolute;width:1em;} /* etsu mountain as arrow */ .arrowMtn--white {} .arrowMtn--white:hover:after, .arrowMtn--white:focus:after{content:'';background-image:url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDE5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHRpdGxlPSJFbmpveSB0aGUgTW91bnRhaW5zIG9mIE5vcnRoZWFzdCBUZW5uZXNzZWUgYXQgRWFzdCBUZW5uZXNzZWUgU3RhdGUgVW5pdmVyc2l0eSAoRVRTVSkiPjxnIGlkPSJFVFNVLU1vdW50YWluc19fV2hpdGUiIHN0cm9rZT0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjRkZGRkZGIj48cGF0aCBkPSJNMCwxOC45ODAyMjk4IEMxNy44MjA1MTUyLDEyLjIxMDE3ODggMjYuOTMzNTA2Niw4Ljc0NjA5NDQ3IDI3LjMzODk3NCw4LjU4Nzk3Njc3IEMyNy45NDcxNzUyLDguMzUwODAwMjMgMjguNDMyMTM0NSw4LjI4OTkzNzk4IDI5LjA3MzI0NTcsOC41ODc5NzY3NyBDMjkuNzE0MzU2OSw4Ljg4NjAxNTU3IDM5LjAyMTIxODUsMTIuOTgwNzc3IDM5LjYxODMyODgsMTMuMjY3MzEzMiBDNDAuMjcyMjMyOSwxMy4zMjYyMTUzIDQxLjc5MTg1NjksMTMuMjY3MzEzMiA0Mi40OTY5MzI4LDEzLjI2NzMxMzIgQzQzLjEyMDY2MTIsMTIuOTkyOTkyMSA2Ni43NTEzNDY0LDAuNzkyMzE2OTAxIDY3LjU4ODQ1MzEsMC4zNTUwMTAzOTIgQzY4LjQyNTU1OTgsLTAuMDgyMjk2MTE3NiA2OC41ODgwNTkzLC0wLjE1MzA1NzA1NCA2OS4xNTA1NTc0LDAuMzU1MDEwMzkyIEM2OS43MTMwNTU2LDAuODYzMDc3ODM3IDc0LjI3MDY1OCwzLjgyNDY0ODQ1IDc0Ljc5NTQ2MSw0LjE3MDIyMDU2IEM3NS41OTg5NzQxLDQuMTcwMjIwNTYgODAuMTg5MTkzNiw0LjE3MDIyMDU2IDgxLjAyNDM0NzEsNC4xNzAyMjA1NiBDODEuODU5NTAwNyw0LjE3MDIyMDU2IDk5LjMzOTAzMzksMTguNDE5ODI2NyA5OS45OTk2NzYzLDE4Ljk4MDIyOTggQzk5Ljg1ODUwMSwxOC45ODAyMjk4IDY2LjUyNTI3NTUsMTguOTgwMjI5OCAwLDE4Ljk4MDIyOTggWiI+PC9wYXRoPjwvZz48L3N2Zz4='); background-position: bottom center;background-repeat:no-repeat; background-size:contain;bottom:-2px;left:15%;height:1.5rem;max-height:38%;position:absolute;width:70%} /** BUTTONS - - - - - - - - - - - - - - - - ** * (custom, non-picnic.css outline versions), cited here, but built using the combos of styles when possible */ /** shared button styles */ button,.button,.button--blue,.button.blue,.button--gold,.button.gold, .button--info,.button.info,.button--success,.button.success, .button--warning,.button.warning,.button--error,.button.error, .button--disabled,.button.disabled{white-space:nowrap;} button, button.blue,.button--blue,.button.blue{/** .bkgd--blue.text--gold.text--bold **/} button.gold, .button--gold,.button.gold{/** .bkgd--gold.text--blue.text--bold **/} button.success, .button--success,.button.success{/** .bkgd--liteGreen.text--white.text--bold **/} button.info, .button--info,.button.info,input.info{/** .bkgd--liteBlue.text--white **/} button.warning, .button--warning,.button.warning,.button--alert,.button.alert{/** .bkgd--liteGold.text--darkTan **/} button.error, .button--error,.button.error{/** .bkgd--darkRed.text--white **/} button[disabled], .button--disabled,.button.disabled{/** .bkgd--liteGray.text--darkTan **/} button.bigger, button.button--bigger,.button--bigger{font-size:1.5em} button.smaller, button.button--smaller,.button--smaller,.button.button--smaller {/* .text--300.text--uppercase */ font-size:0.75em;letter-spacing:1px;} /** CARDS - - - - - - - - - - - - - - - - ** * see Media Queries for additional responsive card styles **/ .cards {/** ETSU custom container for multiple cards */} .card {/** built into picnic.css */} .card--blue, .card--gold {/** See box styles at top **/overflow: visible} .card.card--blue > a, .card.card--gold > a {text-decoration:none} .card.card--blue, .card.card--gold {line-height:1;padding-bottom: 1.25rem} .card.card--blue:after, .card.card--gold:after {content:''} .card.card--blue img, .card.card--gold img {padding-bottom:1.25rem} .cards > .card {background-size:cover;background-repeat:no-repeat;background-position:center;min-height:16rem;overflow:visible} .cards > .card a {display:block;height:100%;position:relative;width:100%} .cards > .card > a > h3 {background-color:rgba(4,30,66,0.62);bottom:0;font-weight:normal; margin-bottom:0;min-height:3.5rem;position:absolute;width:100%} .cards > .card > a:link > h3, .cards > .card > a:visited > h3, .cards > .card > a:active > h3 {text-shadow: 1px 1px 0 #000} .cards > .card > a:hover > h3, .cards > .card > a:focus > h3{padding-bottom:2rem;text-decoration:underline;text-shadow:none} /** CODE - - - - - - - - - - - - - - - - **/ pre.code {box-shadow:inset 0 0 0.5rem #5E8AB4;font-size:1.5rem;} pre.code:before{content:' HTML Code Example';display:block;font-weight:300;} /** DATES (presented with FontAwesome Calendar icon) **/ .date--calendar {display: inline-block;font-size: 0.9rem;line-height: 1;margin-bottom:0!important;margin-left: -0.5rem;min-height: 3rem;min-width: 3rem;} .date--calendar span {display: block;font-weight:normal;margin: 0 auto 0.75em;position: relative;text-align: center;top: -0.25em;} .date--calendar .month {margin-bottom: 1.25em;} .date--calendar .day {font-weight:bold;} .date--calendar .day:before {content: '\f133';font-size: 2.5em;font-weight: normal;left: 0;position: absolute;text-align: center;text-decoration: none;top: -0.45em;width: 100%;} .date--calendar .year {} /** Checks if there's 2 .date--calendars (Start & End Dates) */ .date--calendar:not(:only-child) {} .date--calendar:nth-child(2){margin-left:0.25rem;margin-right:1rem} .date--calendar:nth-child(2):before {border-top: solid 1px #041E42;border-bottom: solid 1px #041E42;content:'thru';display:block;float: left;font-style:italic;font-weight: 300;padding: 0.8em 0;margin: 0.25em 0.5em 0 -1.1em;} .date--calendar:nth-child(2) .day:before {left:0.2em;} /** DOTS for indicators- - - - - - - - - - - - - - - - ** * useful for adding a dot of color to represent a state, such as green=success/go, yellow=caution/pause, red=error/no, blue=info, grey=default/dead * * Follows the same pattern as .text--success, .text--error, etc above */ /* shared dot styles */ .dot:before {background-color:#4A4A4A;border-radius: 1rem;border: solid 1px #707372;content: ''; display: inline-block;height: 1rem;margin-right:0.5rem; position:relative;width: 1rem} /* animate it: add .dot--pulse to .dot class (class="dot dot--pulse") */ .dot--pulse.dot:before {animation:dot--pulse 5s infinite;} /** dot gentle pulsing animation **/@keyframes dot--pulse { 0%, 100% { opacity:0 } 50% { opacity:1 } } /* green | success | yes | hard positive */ .dot--success.dot:before {background-color:#789D4A;border-color:hsla(87,36%,35%,1)} .dot--success.dot--pulse.dot:before {box-shadow: 0 0 2em;color:#789D4A} /* blue | info | soft positive */ .dot--info.dot:before {background-color:#5E8AB4;border-color:hsla(209,36%,44%,1)} .dot--info.dot--pulse.dot:before {box-shadow: 0 0 2em;color:#5E8AB4} /* yellow | caution | soft negative */ .dot--warning.dot:before, .dot--gold.dot:before {background-color:#FFC72C;border-color:hsla(44,100%,49%,1);} .dot--warning.dot--pulse.dot:before, .dot--gold.dot--pulse.dot:before {box-shadow: 0 0 2em;color:#FFC72C} /** color property is for pulse animation, if no box-shadow color is declared it'll inherit the color */ /* red | error | no | hard negative */ .dot--error.dot:before {background-color:#A6192E;border-color:hsla(351,74%,27%,1)} .dot--error.dot--pulse.dot:before {box-shadow: 0 0 2em;color:#A6192E} /* gray | disabled | neutral */ .dot--disabled.dot:before {background-color:#C7C9C7;border-color:hsla(120,2%,58%,1)} /** FILTERS - - - - - - - - - - - - - - - - ** * Easy, quick, killer effects that don't require photoshop or complexity, whoo--hoo! * * TuT: https://css-tricks.com/almanac/properties/f/filter/ */ /* grayscale images / full color on :hover */ .filter--grayscale {-webkit-filter: grayscale(100%) brightness(135%) contrast(120%);filter: grayscale(100%) brightness(115%) contrast(120%); transition: filter 0.3s, box-shadow 0.3s;-webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s} .filter--grayscale:hover, .filter--grayscale:focus {-webkit-filter: none;filter: none; box-shadow: #224 0.2em 0.2em 0.6em 0.1em} /** FLOATS & Block Alignment - - - - - - - - - - - - - - - - **/ .centered{/** see margins || .margin--auto */} /* shared float styles */ .float--left,.float--right {display:block} .float--left {float:left;margin-right:0.5rem;margin-bottom:1rem} .float--right {float:right;margin-bottom:1rem;margin-left:0.5rem;} /* automatic clearFix for the float classes above */ .clearfix{/* needed for inline floats */} .clearfix:before, .clearfix:after, .float--left:after, .float--left:before, .float--right:after, .float--right:before, nav:before, nav:after, nav .menu:before, nav .menu:after, .nav .menu:before, .nav .menu:after { clear: both;content:'';display:block; } /** HORIZONTAL RULES - - - - - - - - - - - - - - - - ** * (fancy ones, going from thin to thick to thin, chiaroscuro if you will) */ hr,.hr, .hr--after:after, .hr--afterLR:after {border-width:0;color:#5E8AB4;content:"";display:block;height:1px;margin:.5rem;padding:0;width:100%} .hr,hr,.hr--after:after {background-color:#9EA2A2;background:-webkit-linear-gradient(to right,transparent 0,#9EA2A2 50%,transparent 100%); background:-moz-linear-gradient(to right,transparent 0,#9EA2A2 50%,transparent 100%); background:-o-gradient(to right,#FFF 0,transparent 0,#9EA2A2 50%,transparent 100%); background:-ms-linear-gradient(to right,transparent 0,#9EA2A2 50%,transparent 100%); background:linear-gradient(to right,transparent 0,#9EA2A2 50%,transparent 100%) } /* LR = left to right, dark to transparent */ .hr--afterLR:after {background-color:transparent;background:-webkit-linear-gradient(to right,#000 0,#707372 62%,transparent 100%); background:-moz-linear-gradient(to right,#000 0,#707372 62%,transparent 100%); background:-o-gradient(to right,#000 0,#707372 62%,transparent 100%); background:-ms-linear-gradient(to right,#000 0,#707372 62%,transparent 100%); background:linear-gradient(to right,#000 0,#707372 62%,transparent 100%) } /* vertical hr */ hr.vertical {width:1px;min-height:5em;height:100%;background-color:#9EA2A2; background:-webkit-linear-gradient(to top,transparent 0,#9EA2A2 50%,transparent 100%); background:-moz-linear-gradient(to top,transparent 0,#9EA2A2 50%,transparent 100%); background:-o-gradient(to top,#FFF 0,transparent 0,#9EA2A2 50%,transparent 100%); background:-ms-linear-gradient(to top,transparent 0,#9EA2A2 50%,transparent 100%); background:linear-gradient(to top,transparent 0,#9EA2A2 50%,transparent 100%) } /** ICONS (automatic, using font-awesome icons) - - - - - - - - - - - - - - - - **/ /* shared styles */ a[target="_blank"]:after {font-family:FontAwesome;display:inline-block;opacity:0.38;padding:0 0.25rem;vertical-align:middle;} /* external link **/ .link--external, a[target="_blank"]:after {content: '\f08e';} /** IMAGES & VIDEOS RESPONSIVE SIZING - - - - - - - - - - - - - - - - ** * SRC: https://css-tricks.com/almanac/properties/o/object-fit/ **/ .object-fit--contain {-o-object-fit:contain;object-fit:contain;} /* fills parent container width or heigh only, preserves aspect ratio, no crop */ .object-fit--cover {-o-object-fit:cover;object-fit:cover;} /* image/video completely fits parent container, maintains ratio, crops object */ .object-fit--none {-o-object-fit:none;object-fit:none;} /* image retains original size, ignores parent size */ .object-fit--scale-down {-o-object-fit:scale-down;object-fit:scale-down;} /* smallest concrete object size. compares none & contain to get value */ .object-fit--fill {-o-object-fit:fill;object-fit:fill;}/* default, stretches image/video to fit container, doesn't maintain aspect ratio */ /** LISTS - - - - - - - - - - - - - - - - **/ /* unordered list / Bullet List Defaults */ ul {list-style:circle outside} ul > li {/** .pad--halfLR.pad--4thTB **/} /* no bullets or numbers, list-style:none */ .list--none, .list--striped, .list--pretty,.list--inline{list-style:none outside;margin:0;padding:0} /* square bullets */ .list--squareBullets, .list--none > li > ul {list-style-type:square;padding-left:1.5rem} /* default bullets */ .list--bullets {list-style-type:circle;padding-left:1.5rem;} .list--bullets > li > ul{list-style-type:disc;padding-left:3rem} /* inline list, crazy handy */ .list--inline > li, nav .menu > div > ul > li > ul > li, nav .menu > div > ul > li > ul > li > a {display:inline-block;} /* alternating row striping, aka prettylist */ .list--striped li, .list--pretty li, .hp-int__tabs__linkLists li {border:solid 1px transparent;padding:0.15rem;} .list--pretty li:nth-child(odd), .list--striped li:nth-child(odd), .hp-int__tabs__linkLists li:nth-child(odd) {background-color:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.04);} .list--pretty li > a + .fa, .list--striped li > a + .fa {padding-left:0.5rem;} .list--stripedHeader {} .list--stripedHeader > li > details > summary, .list--stripedHeader > li > h2, .list--stripedHeader > li > h3, .list--stripedHeader > li > h4 {/** .bkgd--liteGray97 .pad--halfTB .pad--1LR .border--liteGray **/border:solid 1px hsla(120, 2%, 93%, 1);} /** indented lists */ .list--indent > li {list-style:none outside;padding-left:0.75rem!important;} /** Ordered List / Numbered List Defaults * * defaults to nice Norwester Font for the counter bullet */ ol:not(#tour) { counter-reset: fancy-counter;list-style:none outside; } ol:not(#tour) > li { font: 300 1.1em/1.5 sans-serif;position: relative;} ol:not(#tour) > li:before { content: counter(fancy-counter)')';counter-increment: fancy-counter;font: 400 1.25rem/1 Norwester,sans-serif;left:-2rem;position: absolute;top: 0;} ol:not(#tour) > li ol > li:before {content: counter(fancy-counter)'.';color:#4A4A4A; font-size:1.25rem;font-weight:200;left:-1.5rem;} ol:not(#tour) > li p {margin:0;padding: 0 2rem 1rem;} ol:not(#tour) > li > h4+p:first-letter {color:#000;float:left; font-size:5rem;line-height:1;margin:-.2em 0 -.1em -.2em;padding:0;} /** MARGINS */ /* center block elements on the page */ .centered,.margin--auto {margin-right:auto;margin-left:auto;} /** remove margins **/ .margin--none,.margin--0 {margin:unset;margin:0} /** REM based margin is best: (default) * adheres to the body font size, which is set to be fluid, thus helping overal responsive design & vertical rhythmn **/ /* MARGINS (rem) all */ .margin--5 {margin:5rem} /* per 1 side only: T=Top | R=Right | B=Bottom | L=Left*/ .margin--5T {margin-top:5rem} .margin--5R {margin-right:5rem} .margin--5B {margin-bottom:5rem} .margin--5L {margin-left:5rem;} /* NEGATIVE MARGINS: 3 dashes, useful for positioning. Note these use 3 dashes, with the 3rd dash meaning "negative" */ .margin---5T {margin-top:-5rem} .margin---5R {margin-right:-5rem} .margin---5B {margin-bottom:-5rem} .margin---5L {margin-left:-5rem;} .margin--4 {margin:4rem} .margin--4T {margin-top:4rem} .margin--4R {margin-right:4rem} .margin--4B {margin-bottom:4rem} .margin--4L {margin-left:4rem;} /* negative margins, 3 dashes */ .margin---4T {margin-top:-4rem} .margin---4R {margin-right:-4rem} .margin---4B {margin-bottom:-4rem} .margin---4L {margin-left:-4rem;} .margin--3 {margin:3rem} .margin--3T {margin-top:3rem} .margin--3R {margin-right:3rem} .margin--3B {margin-bottom:3rem} .margin--3L {margin-left:3rem;} /** negative margins, 3 dashes */ .margin---3T {margin-top:-3rem} .margin---3R {margin-right:-3rem} .margin---3B {margin-bottom:-3rem} .margin---3L {margin-left:-3rem;} .margin--2 {margin:2rem} .margin--2T {margin-top:2rem} .margin--2R {margin-right:2rem} .margin--2B {margin-bottom:2rem} .margin--2L {margin-left:2rem;} /* negative margins, 3 dashes */ .margin---2T {margin-top:-2rem} .margin---2R {margin-right:-2rem} .margin---2B {margin-bottom:-2rem} .margin---2L {margin-left:-2rem;} .margin--1 {margin:1rem} .margin--1T {margin-top:1rem} .margin--1R {margin-right:1rem} .margin--1B {margin-bottom:1rem} .margin--1L {margin-left:1rem;} /* negative margins, 3 dashes */ .margin---1T {margin-top:-1rem} .margin---1R {margin-right:-1rem} .margin---1B {margin-bottom:-1rem} .margin---1L {margin-left:-1rem;} .margin--half {margin:0.5rem} .margin--halfT {margin-top:0.5rem} .margin--halfR {margin-right:0.5rem} .margin--halfB {margin-bottom:0.5rem} .margin--halfL {margin-left:0.5rem;} /* negative margins, 3 dashes */ .margin---halfT{margin-top:-0.5rem} .margin---halfR{margin-right:-0.5rem} .margin---halfB{margin-bottom:-0.5rem} .margin---halfL{margin-left:-0.5rem;} .margin--4th {margin:0.25rem} .margin--4thT {margin-top:0.25rem} .margin--4thR {margin-right:0.25rem} .margin--4thB {margin-bottom:0.25rem} .margin--4thL {margin-left:0.25rem;} /* negative margins, 3 dashes */ .margin---4thT {margin-top:-0.25rem} .margin---4thR {margin-right:-0.25rem} .margin---4thB {margin-bottom:-0.25rem} .margin---4thL {margin-left:-0.25rem;} .margin--8th {margin:0.125rem} .margin--8thT {margin-top:0.125rem} .margin--8thR {margin-right:0.125rem} .margin--8thB {margin-bottom:0.125rem} .margin--8thL {margin-left:0.125rem;} /* negative margins, 3 dashes */ .margin---8thT {margin-top:-0.125rem} .margin---8thR {margin-right:-0.125rem} .margin---8thB {margin-bottom:-0.125rem} .margin---8thL {margin-left:-0.125rem;} /** ETSU Mountain (vector) **/ .mountain {position:relative;} .mountain:before {background-repeat:no-repeat;background-position:center bottom; background-size:contain;content:'';display:block;left:0;min-height:6rem;position:absolute;top:-5.9rem;width:100%;} .mountain--blue.mountain:before {background-image:url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDE5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHRpdGxlPSJFbmpveSB0aGUgTW91bnRhaW5zIG9mIE5vcnRoZWFzdCBUZW5uZXNzZWUgYXQgRWFzdCBUZW5uZXNzZWUgU3RhdGUgVW5pdmVyc2l0eSAoRVRTVSkiPg0KIDxnIGlkPSJtb3VudGFpbi0tQmx1ZSIgc3Ryb2tlPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwNDFFNDIiPg0KICAgIDxwYXRoIGQ9Ik0wLDE4Ljk4MDIyOTggQzE3LjgyMDUxNTIsMTIuMjEwMTc4OCAyNi45MzM1MDY2LDguNzQ2MDk0NDcgMjcuMzM4OTc0LDguNTg3OTc2NzcgQzI3Ljk0NzE3NTIsOC4zNTA4MDAyMyAyOC40MzIxMzQ1LDguMjg5OTM3OTggMjkuMDczMjQ1Nyw4LjU4Nzk3Njc3IEMyOS43MTQzNTY5LDguODg2MDE1NTcgMzkuMDIxMjE4NSwxMi45ODA3NzcgMzkuNjE4MzI4OCwxMy4yNjczMTMyIEM0MC4yNzIyMzI5LDEzLjMyNjIxNTMgNDEuNzkxODU2OSwxMy4yNjczMTMyIDQyLjQ5NjkzMjgsMTMuMjY3MzEzMiBDNDMuMTIwNjYxMiwxMi45OTI5OTIxIDY2Ljc1MTM0NjQsMC43OTIzMTY5MDEgNjcuNTg4NDUzMSwwLjM1NTAxMDM5MiBDNjguNDI1NTU5OCwtMC4wODIyOTYxMTc2IDY4LjU4ODA1OTMsLTAuMTUzMDU3MDU0IDY5LjE1MDU1NzQsMC4zNTUwMTAzOTIgQzY5LjcxMzA1NTYsMC44NjMwNzc4MzcgNzQuMjcwNjU4LDMuODI0NjQ4NDUgNzQuNzk1NDYxLDQuMTcwMjIwNTYgQzc1LjU5ODk3NDEsNC4xNzAyMjA1NiA4MC4xODkxOTM2LDQuMTcwMjIwNTYgODEuMDI0MzQ3MSw0LjE3MDIyMDU2IEM4MS44NTk1MDA3LDQuMTcwMjIwNTYgOTkuMzM5MDMzOSwxOC40MTk4MjY3IDk5Ljk5OTY3NjMsMTguOTgwMjI5OCBDOTkuODU4NTAxLDE4Ljk4MDIyOTggNjYuNTI1Mjc1NSwxOC45ODAyMjk4IDAsMTguOTgwMjI5OCBaIj48L3BhdGg+DQogPC9nPg0KPC9zdmc+');} .mountain--gold.mountain:before {background-image:url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDE5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiIHRpdGxlPSJFbmpveSB0aGUgTW91bnRhaW5zIG9mIE5vcnRoZWFzdCBUZW5uZXNzZWUgYXQgRWFzdCBUZW5uZXNzZWUgU3RhdGUgVW5pdmVyc2l0eSAoRVRTVSkiPg0KIDxnIGlkPSJtb3VudGFpbi0tR29sZCIgc3Ryb2tlPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkM3MkMiPg0KICAgIDxwYXRoIGQ9Ik0wLDE4Ljk4MDIyOTggQzE3LjgyMDUxNTIsMTIuMjEwMTc4OCAyNi45MzM1MDY2LDguNzQ2MDk0NDcgMjcuMzM4OTc0LDguNTg3OTc2NzcgQzI3Ljk0NzE3NTIsOC4zNTA4MDAyMyAyOC40MzIxMzQ1LDguMjg5OTM3OTggMjkuMDczMjQ1Nyw4LjU4Nzk3Njc3IEMyOS43MTQzNTY5LDguODg2MDE1NTcgMzkuMDIxMjE4NSwxMi45ODA3NzcgMzkuNjE4MzI4OCwxMy4yNjczMTMyIEM0MC4yNzIyMzI5LDEzLjMyNjIxNTMgNDEuNzkxODU2OSwxMy4yNjczMTMyIDQyLjQ5NjkzMjgsMTMuMjY3MzEzMiBDNDMuMTIwNjYxMiwxMi45OTI5OTIxIDY2Ljc1MTM0NjQsMC43OTIzMTY5MDEgNjcuNTg4NDUzMSwwLjM1NTAxMDM5MiBDNjguNDI1NTU5OCwtMC4wODIyOTYxMTc2IDY4LjU4ODA1OTMsLTAuMTUzMDU3MDU0IDY5LjE1MDU1NzQsMC4zNTUwMTAzOTIgQzY5LjcxMzA1NTYsMC44NjMwNzc4MzcgNzQuMjcwNjU4LDMuODI0NjQ4NDUgNzQuNzk1NDYxLDQuMTcwMjIwNTYgQzc1LjU5ODk3NDEsNC4xNzAyMjA1NiA4MC4xODkxOTM2LDQuMTcwMjIwNTYgODEuMDI0MzQ3MSw0LjE3MDIyMDU2IEM4MS44NTk1MDA3LDQuMTcwMjIwNTYgOTkuMzM5MDMzOSwxOC40MTk4MjY3IDk5Ljk5OTY3NjMsMTguOTgwMjI5OCBDOTkuODU4NTAxLDE4Ljk4MDIyOTggNjYuNTI1Mjc1NSwxOC45ODAyMjk4IDAsMTguOTgwMjI5OCBaIj48L3BhdGg+DQogPC9nPg0KPC9zdmc+');} /** RIBBONS - - - - - - - - - - - - - - - - * * fancy ribbons with folds on both sides, a classic style * TuT: CSS tricks ribbons * USE SYNTAX: * <* class="ribbon ribbon--blue"><* class="ribbonContent">... */ /* shared ribbon styles */ .ribbon {margin:0 auto 1em;padding:0.5em;position:relative;text-align:center;width:84%;/* v0: z-index:1;*/} .ribbon:before, .ribbon:after {border:1em solid transparent;bottom:-0.55em;content:""; display:block;position:absolute;/* v0:*/ z-index:-1;} .ribbon:before {border-left-color:transparent!important;border-right-width:1em;left:-0.8em;} .ribbon:after {border-right-color:transparent!important;border-left-width:1em;right:-0.8em;} .ribbon.ribbon--blue {/* .bkgd--blue.text--gold */} .ribbon.ribbon--blue:before,.ribbon.ribbon--blue:after{border-color:rgba(4,30,66,0.62);} .ribbon.ribbon--gold {/* .bkgd--gold.text--blue */} .ribbon.ribbon--gold:before,.ribbon.ribbon--gold:after{border-color:rgba(255,199,44,0.62);} .ribbon .ribbonContent {} .ribbon .ribbonContent:before, .ribbon .ribbonContent:after {border-style: solid;bottom: -0.45em;content: ""; display: block;position: absolute;/* v0: z-index:2;*/} .ribbon.ribbon--blue .ribbonContent:before,.ribbon.ribbon--blue .ribbonContent:after {border-color: hsla(215,89%,4%,1) transparent transparent transparent;} .ribbon.ribbon--gold .ribbonContent:before,.ribbon.ribbon--gold .ribbonContent:after {border-color: hsla(44,100%,49%,1) transparent transparent transparent;} .ribbon .ribbonContent:before {border-width: 0.5em 0 0 1.25em;left: 0;z-index:-1;} .ribbon .ribbonContent:after {border-width: 0.5em 1.25em 0 0;right: 0;z-index:-1;} /** PADDING - - - - - - - - - - - - - - - - */ /** remove padding **/ .pad--none,.pad--0 {padding:unset;padding:0} /** REM based padding is best: (Default) * adheres to the body font size, which is set to be fluid, thus helping overal responsive design & vertical rhythmn **/ /* padding (rem) all */ .pad--5 {padding:5rem} /* Per 1 side only: T=Top | R=Right | B=Bottom | L=Left*/ .pad--5T {padding-top:5rem} .pad--5R {padding-right:5rem} .pad--5B {padding-bottom:5rem} .pad--5L {padding-left:5rem} .pad--4 {padding:4rem} .pad--4T {padding-top:4rem} .pad--4R {padding-right:4rem} .pad--4B {padding-bottom:4rem} .pad--4L {padding-left:4rem} .pad--3 {padding:3rem} .pad--3T {padding-top:3rem} .pad--3R {padding-right:3rem} .pad--3B {padding-bottom:3rem} .pad--3L {padding-left:3rem} .pad--2 {padding:2rem} .pad--2T {padding-top:2rem} .pad--2R {padding-right:2rem} .pad--2B {padding-bottom:2rem} .pad--2L {padding-left:2rem} .pad--1 {padding:1rem} .pad--1T {padding-top:1rem} .pad--1R {padding-right:1rem} .pad--1B {padding-bottom:1rem} .pad--1L {padding-left:1rem} .pad--half {padding: 0.5rem} .pad--halfT {padding-top:0.5rem} .pad--halfR {padding-right:0.5rem} .pad--halfB {padding-bottom:0.5rem} .pad--halfL {padding-left:0.5rem} .pad--4th {padding: 0.25rem} .pad--4thT {padding-top:0.25rem} .pad--4thR {padding-right:0.25rem} .pad--4thB {padding-bottom:0.25rem} .pad--4thL {padding-left:0.25rem} .pad--8th {padding: 0.125rem} .pad--8thT {padding-top:0.125rem} .pad--8thR {padding-right:0.125rem} .pad--8thB {padding-bottom:0.125rem} .pad--8thL {padding-left:0.125rem} /* left / right (LR) padding only */ .pad--5LR {padding-right:5rem;padding-left:5rem} .pad--4LR {padding-right:4rem;padding-left:4rem} .pad--3LR {padding-right:3rem;padding-left:3rem} .pad--2LR {padding-right:2rem;padding-left:2rem} .pad--1LR, .box--gold,.box--blue, .box--black,.box--white, .box--info, .box--warning,.box--alert, .box--success,.box--error, .box__neutral--gray, .box__neutral--grey, .box--gray,.box--grey, .box--liteGray,.box--liteGrey, .box__neutral--brown, .box--brown,.box--liteBrown, .box--disabled, .list--stripedHeader > li > details > summary, .list--stripedHeader > li > h2, .list--stripedHeader > li > h3, .list--stripedHeader > li > h4 {padding-right:1rem;padding-left:1rem} .pad--halfLR, ul > li, ol > li {padding-right:0.5rem;padding-left:0.5rem} .pad--4thLR {padding-right:0.5rem;padding-left:0.5rem} .pad--8thLR {padding-right:0.5rem;padding-left:0.5rem} /* top / bottom (TB) padding only */ .pad--3TB {padding-top:3rem;padding-bottom:3rem} .pad--2TB {padding-top:2rem;padding-bottom:2rem} .pad--1TB {padding-top:1rem;padding-bottom:1rem} .pad--halfTB, .box--blue,.box--gold,.box--black,.box--white,.box--info,.box--warning,.box--alert,.box--success,.box--error, .box__neutral--gray,.box__neutral--grey,.box--gray,.box--grey,.box--liteGray,.box--liteGrey, .box__neutral--brown,.box--brown,.box--liteBrown, .box--disabled, .list--stripedHeader > li > details > summary, .list--stripedHeader > li > h2, .list--stripedHeader > li > h3, .list--stripedHeader > li > h4 {padding-top:0.5rem;padding-bottom:0.5rem} .pad--4thTB, ul > li, ol > li {padding-top:0.25rem;padding-bottom:0.25rem} .pad--8thTB {padding-top:0.125rem;padding-bottom:0.125rem} /** EM based padding: * inherits the containing element's font size. Handy for headlines and elements with larger font sizes */ /* padding (em) all */ /* per 1 side only: R=Right | L=Left Note: No Top/Bottom option as it'll mess up vertical rhytmn */ .pad__em--3 {padding:3em} .pad__em--3R {padding-right:3em;} .pad__em--3L {padding-left:3em;} .pad__em--2 {padding:2em} .pad__em--2R {padding-right:2em;} .pad__em--2L {padding-left:2em;} .pad__em--1 {padding:1em} .pad__em--1R {padding-right:1em;} .pad__em--1L {padding-left:1em;} .pad__em--half {padding:0.5em} .pad__em--halfR {padding-right:0.5em;} .pad__em--halfL {padding-left:0.5em;} .pad__em--4th {padding:0.25em} .pad__em--4thR {padding-right:0.25em;} .pad__em--4thL {padding-left:0.25em;} .pad__em--8th {padding:0.125em} .pad__em--8thR {padding-right:0.125em;} .pad__em--8thL {padding-left:0.125em;} /* left / right padding only */ .pad__em--3LR {padding-right:3em;padding-left:3em} .pad__em--2LR {padding-right:2em;padding-left:2em} .pad__em--1LR {padding-right:1em;padding-left:1em} .pad__em--halfLR {padding-right:0.5em;padding-left:0.5em} .pad__em--4thLR {padding-right:0.25em;padding-left:0.25em} .pad__em--8thLR {padding-right:0.125em;padding-left:0.125em} /* NO EM Based Top / Bottom Padding: It'll mess up the vertical rhythmn */ /** Switches - - - - - - - - - - - - - - - - * * -------------------------------------------------------------------- ARIA Switch Button The ARIA switch button is styled via the [data-action="aria-switch"] attribute. This attribute is used instead of the [role="switch"] attribute so styles may be used even when no JavaScript is available. GIT: https://github.com/scottaohara/aria-switch-button PEN: https://codepen.io/BowingRice/pen/wXJPVZ Example HTML Code (accessbible): --------------------------------------------------------------------- */ button.switch {background:transparent;border:1px solid transparent;border-radius: 1rem; display: inline-block;font-size: 0.7rem;padding:0;position: relative;transition: background .1s ease-in-out; white-space: normal;} button.switch:after{/* border-radius: 1rem;border: 1px solid transparent; bottom: 0px;content: "";left: 0px;pointer-events: none;position: absolute;right: 0px;top: 0px; transition: all .2s ease-in-out;*/} button.switch:not([disabled]):hover, button.switch:not([disabled]):focus, {background-color:transparent;border:solid 1px #FFF;box-shadow:inset 0 0 0.5rem rgba(158,162,162,0.38);opacity:1;} button.switch:not([disabled]):active{color: #fff;} button:not([disabled]):hover:after, button:not([disabled]):focus:after {/* border: 1px solid #FFC72C;bottom: -4px;left: -4px;right: -4px;top: -4px; */} button.switch span{border-radius: 0.9rem;display: inline-block;margin: 0 0.1rem;padding: 0.1rem; pointer-events: none;text-transform: uppercase;} button.switch[aria-checked="true"] span:first-child{background:#789D4A;margin: 0;color: #FFF;} button.switch[aria-checked="false"] span:first-child, button.switch[aria-checked="true"] > span:last-child{color:#000;} .no-js button.switch:not([aria-checked]) span:last-child, button.switch[aria-checked="false"] span:last-child{background: #9B9B9B;margin: 0;} button.switch:not([aria-checked]), button.switch[aria-checked="false"]{border:solid 1px transparent;opacity:0.62} /** TABLES - - - - - - - - - - - - - - - - */ th {background-color:#041E42;color:#FFC72C;letter-spacing:1px;text-transform:capitalize;} tbody tr:nth-child(even), tbody tr > td:nth-child(even) {background-color:rgba(158,162,162,0.1);} /** TEXT - - - - - - - - - - - - - - - - */ /** text alignments **/ .text--center, .text--center .card {text-align:center;} .text--left, #mautic .mauticform-row {text-align:left;} .text--right {text-align:right;} /** text/font weights */ .text--normal {font-weight:normal;} .text--bold, button,button.blue,.button--blue, button.gold,.button--gold, button.success,.button--success{font-weight:bold;} .text--italic {font-style:italic;} .text__weight--100 {font-weight:100} .text__weight--200 {font-weight:200} .text__weight--300, p,button.smaller,button.button--smaller,.button--smaller,.button.button--smaller{font-weight:300} .text__weight--400 {font-weight:400} .text__weight--500 {font-weight:500} .text__weight--600 {font-weight:600} .text__weight--700 {font-weight:700} .text__weight--800 {font-weight:800} .text__weight--900 {font-weight:900} /** text shadows **/ /* letterpress/lite emboss effect */ .text__inset--gold, .box--gold.triangle__right--white {text-shadow: 0 1px 0 #FFFA5E} .text__inset--blue, .box--blue.triangle__right--white {text-shadow: 0 1px 0 #374F75} /** text UPPER/lower/Capitalize variants **/ .text--uppercase, button.smaller,button.button--smaller,.button--smaller,.button.button--smaller{text-transform:uppercase} .text--lowercase {text-transform:lowercase} .text--capitalize {text-transform:capitalize} .text--smallcaps {font-variant:small-caps} .text--display {font-size:calc(2.5em + 9vmin);line-height:1.2;} /** BIG Norester font sizes, aka: display */ .text--bigger {font-size:1.2em} .text--smaller {font-size:0.8em} /** prevent user selecting/copy **/ .noSelect {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} /** VIDEO ** * Responsive Video Code—>See Images code, they're the same and shared */ /** VISIBILITY: SHOW / HIDE: for showing or hiding items based on screensize * NOTE: Cited here only, see cooresponding Media Query for styles **/ .hide--mobile {}/* max-width: 60em */ .hide--tablet {}/* min-width: 60.1em */ .hide--desktop {}/* min-width: 90.1em */ .hidden {height:0;visibility:hidden!important;width:0;}/* For things like Skip Nav that are for accessibility/screen readers only. Note that setting display:none removes it from screen readers too. */ /** *************************** ANIMATIONS ******************************** **/ /** fade-in effect */ /* invisible to visible */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* faded to full opacity */ @-webkit-keyframes fadein--faded { from { opacity: 0.62; } to { opacity: 1; } } @keyframes fadein--faded { from { opacity: 0.62; } to { opacity: 1; } } /* Gentle Fade In */ @-webkit-keyframes gentleLoad {0% {opacity:0;} 100% {opacity:1;}} @keyframes gentleLoad {0% {opacity:0;} 100% {opacity:1;}} /* Gentle Fade Out */ @-webkit-keyframes gentleFade {0% {opacity:1;} 100% {opacity:0;}} @keyframes gentleFade {0% {opacity:1;} 100% {opacity:0;}} /** enlarge background-image effect */ @-webkit-keyframes enlargeBackground { from { background-size: 170%; } to { background-size: 200%; } } @keyframes enlargeBackground { from { background-size: 170%; } to { background-size: 200%; } } /** Alt Enlarge */ .enlarge, .enlarge3D, .enlarge--noShadow, .enlarge3D--noShadow { transition: all .2s ease-in-out; } .enlarge:hover, .enlarge:focus, .enlarge--noShadow:hover, .enlarge--noShadow:focus { transform: scale(1.1);z-index:6; } /** ENLARGE via 3D Transforms: Best if works b/c it uses the GPU for smooth 60fps animations, no CPU */ .enlarge3D:hover, .enlarge3D:focus, .enlarge3D--noShadow:hover, .enlarge3D--noShadow:focus {-moz-transform:scale3d(1.05,1.05,1);-webkit-transform: scale3d(1.05,1.05,1);-o-transform: scale3d(1.05,1.05,1);-ms-transform: scale3d(1.05,1.05,1);transform: scale3d(1.05,1.05,1);z-index:6;} .enlarge:hover, .enlarge:focus, .enlarge3D:hover, .enlarge3D:focus {} /** SMOOTH HEIGHT INCREASE **/ .animate--height/*, #internal #homepagenews #hpnewsList > p > .rss_titlespan a*/ {-webkit-transition: max-height 0.3s ease-out;-moz-transition: max-height 0.3s ease-out;-o-transition: max-height 0.3s ease-out;-ms-transition: max-height 0.3s ease-out;transition: max-height 0.3s ease-out;} .animate_height:hover, .animate_height:focus/*, #internal #homepagenews #hpnewsList > p:hover > .rss_titlespan a, #internal #homepagenews #hpnewsList > p:focus > .rss_titlespan a */ { -webkit-transition: max-height 0.3s ease-in;-moz-transition: max-height 0.3s ease-in;-o-transition: max-height 0.3s ease-in;-ms-transition: max-height 0.3s ease-in;transition: max-height 0.3s ease-in; } /** ALT: Smooth Padding Bottom Increase */ .animate--padding-bottom, li.card a h3 {-webkit-transition: padding-bottom 0.1s ease-out;-moz-transition: padding-bottom 0.1s ease-out;-o-transition: padding-bottom 0.1s ease-out;-ms-transition: padding-bottom 0.1s ease-out;transition: padding-bottom 0.1s ease-out;} .animate--padding-bottom:hover, li.card a:hover h3 {-webkit-transition: padding-bottom 0.1s ease-in;-moz-transition: padding-bottom 0.1s ease-in;-o-transition: padding-bottom 0.1s ease-in;-ms-transition: padding-bottom 0.1s ease-in;transition: padding-bottom 0.1s ease-in;} /** GLOW, Pulsing */ @keyframes glow--pulse { from { box-shadow: 0 0 10rem 0rem #fff;} to { box-shadow: 0 0 20rem 20rem #fff; } } /** ROTATION **/ .rotate--90CW {-webkit-transform:rotate3d(0,0,0,90deg);transform:rotate3d(0,0,0,90deg);} @keyframes spin { from { -webkit-transform: rotateZ(0deg);transform: rotateZ(0deg); } to { -webkit-transform: rotateZ(360deg);transform: rotateZ(360deg); /* boooo opera */-o-transition: rotate(3600deg); /* works */ } } /** TRANSITIONS **/ /* all * NOTE: using all puts alot of strain on the CPU and causes frequent repaints * Use with caution and performance in mind * Try to use more specific targeted setting instead * Bonus points for using 3D transitions hack, which throws the job to the GPU at 60fps */ .transition--250ms {transition: all .25s;} .transition--500ms {transition: all .5s;} .transition--750ms {transition: all .75s;} .transition--1s {transition: all 1s;} /* scaleZ */ .transition__scaleZ--250ms {transition: scaleZ .25s;} .transition__scaleZ--500ms {transition: scaleZ .5s;} .transition__scaleZ--750ms {transition: scaleZ .75s;} .transition__scaleZ--1s {transition: scaleZ 1s;} /** *************************** MEDIA QUERIES ******************************** **/ /** *** Mobile & smaller tablets *** **/ @media only all and (max-width: 60rem) { .hide--mobile {display:none;height:0;visibility:hidden;width:0;} } /** *** TABLET *** **/ @media only all and (min-width: 60.1rem) { .hide--tablet {display:none;height:0;visibility:hidden;width:0;} .ribbon .ribbonContent:before, .ribbon .ribbonContent:after {bottom: -0.5em;} } /** DESKTOP **/ @media only all and (min-width: 90.1rem) { .hide--desktop {display:none;height:0;visibility:hidden;width:0;} } /** HD/BIG DESKTOP **/ @media only all and (min-width: 110.1rem) { } /** *************************** IE 10 & 11 HACKS *************************** **/ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ specific styles go here */ } /** **************************************************** /END ETSU CUSTOM, part 2 (part 1 at top) **************************************************** */