Skip to content

Instantly share code, notes, and snippets.

@mrmccormack
Last active September 16, 2018 15:01
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mrmccormack/87f89e47dddb92077cb96edbdaf016b3 to your computer and use it in GitHub Desktop.
amp-mui-submission
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>AMP using MUI example</title>
<link rel="canonical" href="index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="description" content="MUI css framework and AMP">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
<style amp-custom>
/*! MUI v0.9.38 | MIT License */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h3{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{-webkit-tap-highlight-color:transparent}body{font-family:Arial,Verdana,Tahoma;font-size:.875rem;font-weight:400;line-height:1.429;color:rgba(0,0,0,.87);background-color:#FFF}a{color:#2196F3;text-decoration:none}a:focus,a:hover{text-decoration:underline}a:focus{outline:thin dotted;outline:.313rem auto -webkit-focus-ring-color;outline-offset:-.125rem}p{margin:0 0 .625rem}ol,ul{margin-top:0;margin-bottom:.625rem}hr{margin-top:1.25rem;margin-bottom:1.25rem;border:0;height:1px;background-color:rgba(0,0,0,.12)}strong{font-weight:700}abbr[title]{cursor:help;-webkit-text-decoration-color:#2196F3;text-decoration-color:#2196F3}h3,h2,h3{margin-top:1.25rem;margin-bottom:.625rem}h4,h5,h6{margin-top:.625rem;margin-bottom:.625rem}.mui--appbar-height{height:3.5rem}.mui--appbar-min-height,.mui-appbar{min-height:3.5rem}.mui--appbar-line-height{line-height:3.5rem}.mui--appbar-top{top:3.5rem}@media (orientation:landscape) and (max-height:480px){.mui--appbar-height{height:3rem}.mui--appbar-min-height,.mui-appbar{min-height:3rem}.mui--appbar-line-height{line-height:3rem}.mui--appbar-top{top:3rem}}@media (min-width:480px){.mui--appbar-height{height:4rem}.mui--appbar-min-height,.mui-appbar{min-height:4rem}.mui--appbar-line-height{line-height:4rem}.mui--appbar-top{top:4rem}}.mui-appbar{background-color:#2196F3;color:#FFF}.mui-btn{font-weight:500;font-size:.875rem;line-height:1.125rem;text-transform:uppercase;color:rgba(0,0,0,.87);background-color:#FFF;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;height:2.25rem;padding:0 1.625rem;margin:.375rem 0;border:none;border-radius:2px;cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation;background-image:none;text-align:center;line-height:2.25rem;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:.875rem;font-family:inherit;letter-spacing:.03em;position:relative;overflow:hidden}.mui-btn:active,.mui-btn:focus,.mui-btn:hover{color:rgba(0,0,0,.87);background-color:#fff}.mui-btn[disabled]:active,.mui-btn[disabled]:focus,.mui-btn[disabled]:hover{color:rgba(0,0,0,.87);background-color:#FFF}.mui-btn.mui-btn--flat{color:rgba(0,0,0,.87);background-color:transparent}.mui-btn.mui-btn--flat:active,.mui-btn.mui-btn--flat:focus,.mui-btn.mui-btn--flat:hover{color:rgba(0,0,0,.87);background-color:#f2f2f2}.mui-btn.mui-btn--flat[disabled]:active,.mui-btn.mui-btn--flat[disabled]:focus,.mui-btn.mui-btn--flat[disabled]:hover{color:rgba(0,0,0,.87);background-color:transparent}.mui-btn:active,.mui-btn:focus,.mui-btn:hover{outline:0;text-decoration:none;color:rgba(0,0,0,.87)}.mui-btn:focus,.mui-btn:hover{-webkit-box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-btn:focus,.mui-btn:hover{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}}@supports (-ms-ime-align:auto){.mui-btn:focus,.mui-btn:hover{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}}.mui-btn:active:hover{-webkit-box-shadow:0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-btn:active:hover{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}}@supports (-ms-ime-align:auto){.mui-btn:active:hover{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}}.mui-btn.mui--is-disabled,.mui-btn:disabled{cursor:not-allowed;pointer-events:none;opacity:.6;-webkit-box-shadow:none;box-shadow:none}.mui-btn+.mui-btn{margin-left:.5rem}.mui-btn--flat{background-color:transparent}.mui-btn--flat:active,.mui-btn--flat:active:hover,.mui-btn--flat:focus,.mui-btn--flat:hover{-webkit-box-shadow:none;box-shadow:none;background-color:#f2f2f2}.mui-btn--fab,.mui-btn--raised{-webkit-box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-btn--fab,.mui-btn--raised{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}}@supports (-ms-ime-align:auto){.mui-btn--fab,.mui-btn--raised{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 2px rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.2)}}.mui-btn--fab:active,.mui-btn--raised:active{-webkit-box-shadow:0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-btn--fab:active,.mui-btn--raised:active{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}}@supports (-ms-ime-align:auto){.mui-btn--fab:active,.mui-btn--raised:active{-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2);box-shadow:0 -1px 2px rgba(0,0,0,.12),-1px 0 2px rgba(0,0,0,.12),0 0 4px rgba(0,0,0,.12),1px 3px 4px rgba(0,0,0,.2)}}.mui-btn--fab{position:relative;padding:0;width:3.438rem;height:3.438rem;line-height:3.438rem;border-radius:50%;z-index:1}.mui-btn--primary{color:#FFF;background-color:#2196F3}.mui-btn--primary:active,.mui-btn--primary:focus,.mui-btn--primary:hover{color:#FFF;background-color:#39a1f4}.mui-btn--primary[disabled]:active,.mui-btn--primary[disabled]:focus,.mui-btn--primary[disabled]:hover{color:#FFF;background-color:#2196F3}.mui-btn--primary.mui-btn--flat{color:#2196F3;background-color:transparent}.mui-btn--primary.mui-btn--flat:active,.mui-btn--primary.mui-btn--flat:focus,.mui-btn--primary.mui-btn--flat:hover{color:#2196F3;background-color:#f2f2f2}.mui-btn--primary.mui-btn--flat[disabled]:active,.mui-btn--primary.mui-btn--flat[disabled]:focus,.mui-btn--primary.mui-btn--flat[disabled]:hover{color:#2196F3;background-color:transparent}.mui-btn--dark{color:#FFF;background-color:#424242}.mui-btn--dark:active,.mui-btn--dark:focus,.mui-btn--dark:hover{color:#FFF;background-color:#4f4f4f}.mui-btn--dark[disabled]:active,.mui-btn--dark[disabled]:focus,.mui-btn--dark[disabled]:hover{color:#FFF;background-color:#424242}.mui-btn--dark.mui-btn--flat{color:#424242;background-color:transparent}.mui-btn--dark.mui-btn--flat:active,.mui-btn--dark.mui-btn--flat:focus,.mui-btn--dark.mui-btn--flat:hover{color:#424242;background-color:#f2f2f2}.mui-btn--dark.mui-btn--flat[disabled]:active,.mui-btn--dark.mui-btn--flat[disabled]:focus,.mui-btn--dark.mui-btn--flat[disabled]:hover{color:#424242;background-color:transparent}.mui-btn--danger{color:#FFF;background-color:#F44336}.mui-btn--danger:active,.mui-btn--danger:focus,.mui-btn--danger:hover{color:#FFF;background-color:#f55a4e}.mui-btn--danger[disabled]:active,.mui-btn--danger[disabled]:focus,.mui-btn--danger[disabled]:hover{color:#FFF;background-color:#F44336}.mui-btn--danger.mui-btn--flat{color:#F44336;background-color:transparent}.mui-btn--danger.mui-btn--flat:active,.mui-btn--danger.mui-btn--flat:focus,.mui-btn--danger.mui-btn--flat:hover{color:#F44336;background-color:#f2f2f2}.mui-btn--danger.mui-btn--flat[disabled]:active,.mui-btn--danger.mui-btn--flat[disabled]:focus,.mui-btn--danger.mui-btn--flat[disabled]:hover{color:#F44336;background-color:transparent}.mui-btn--accent{color:#FFF;background-color:#FF4081}.mui-btn--accent:active,.mui-btn--accent:focus,.mui-btn--accent:hover{color:#FFF;background-color:#ff5a92}.mui-btn--accent[disabled]:active,.mui-btn--accent[disabled]:focus,.mui-btn--accent[disabled]:hover{color:#FFF;background-color:#FF4081}.mui-btn--accent.mui-btn--flat{color:#FF4081;background-color:transparent}.mui-btn--accent.mui-btn--flat:active,.mui-btn--accent.mui-btn--flat:focus,.mui-btn--accent.mui-btn--flat:hover{color:#FF4081;background-color:#f2f2f2}.mui-btn--accent.mui-btn--flat[disabled]:active,.mui-btn--accent.mui-btn--flat[disabled]:focus,.mui-btn--accent.mui-btn--flat[disabled]:hover{color:#FF4081;background-color:transparent}.mui-btn--small{height:1.9125rem;line-height:1.9125rem;padding:0 1rem;font-size:.813rem}.mui-btn--large{height:3.375rem;line-height:3.375rem;padding:0 1.625rem;font-size:.875rem}.mui-btn--fab.mui-btn--small{width:2.75rem;height:2.75rem;line-height:2.75rem}.mui-btn--fab.mui-btn--large{width:4.688rem;height:4.688rem;line-height:4.688rem}.mui-checkbox,.mui-radio{position:relative;display:block;margin-top:.625rem;margin-bottom:.625rem}.mui-checkbox>label,.mui-radio>label{min-height:1.25rem;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.mui-checkbox input:disabled,.mui-radio input:disabled{cursor:not-allowed}.mui-checkbox input:focus,.mui-radio input:focus{outline:thin dotted;outline:.313rem auto -webkit-focus-ring-color;outline-offset:-.125rem}.mui-checkbox--inline>label>input[type=checkbox],.mui-checkbox>label>input[type=checkbox],.mui-radio--inline>label>input[type=radio],.mui-radio>label>input[type=radio]{position:absolute;margin-left:-20px;margin-top:.25rem}.mui-checkbox+.mui-checkbox,.mui-radio+.mui-radio{margin-top:-.313rem}.mui-checkbox--inline,.mui-radio--inline{display:inline-block;padding-left:20px;margin-bottom:0;vertical-align:middle;font-weight:400;cursor:pointer}.mui-checkbox--inline>input[type=checkbox],.mui-checkbox--inline>input[type=radio],.mui-checkbox--inline>label>input[type=checkbox],.mui-checkbox--inline>label>input[type=radio],.mui-radio--inline>input[type=checkbox],.mui-radio--inline>input[type=radio],.mui-radio--inline>label>input[type=checkbox],.mui-radio--inline>label>input[type=radio]{margin:.25rem 0 0;line-height:normal}.mui-checkbox--inline+.mui-checkbox--inline,.mui-radio--inline+.mui-radio--inline{margin-top:0;margin-left:10px}.mui-container{-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.mui-container:after,.mui-container:before{content:" ";display:table}.mui-container:after{clear:both}@media (min-width:544px){.mui-container{max-width:570px}}@media (min-width:768px){.mui-container{max-width:740px}}@media (min-width:992px){.mui-container{max-width:960px}}@media (min-width:1200px){.mui-container{max-width:1170px}}.mui-container-fluid{-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.mui-container-fluid:after,.mui-container-fluid:before{content:" ";display:table}.mui-container-fluid:after{clear:both}.mui-divider{display:block;height:1px;background-color:rgba(0,0,0,.12)}.mui--divider-top{border-top:1px solid rgba(0,0,0,.12)}.mui--divider-bottom{border-bottom:1px solid rgba(0,0,0,.12)}.mui--divider-left{border-left:1px solid rgba(0,0,0,.12)}.mui--divider-right{border-right:1px solid rgba(0,0,0,.12)}.mui-dropdown{display:inline-block;position:relative;outline:0}.mui-dropdown__menu{position:absolute;top:100%;left:0;min-width:10rem;padding:.313rem 0;margin:.125rem 0 0;list-style:none;font-size:.875rem;text-align:left;background-color:#FFF;border-radius:2px;z-index:1;background-clip:padding-box}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-dropdown__menu{border-top:1px solid rgba(0,0,0,.12);border-left:1px solid rgba(0,0,0,.12)}}@supports (-ms-ime-align:auto){.mui-dropdown__menu{border-top:1px solid rgba(0,0,0,.12);border-left:1px solid rgba(0,0,0,.12)}}.mui-dropdown__menu>li>a{display:block;padding:.188rem 1.25rem;clear:both;font-weight:400;line-height:1.429;color:rgba(0,0,0,.87);text-decoration:none;white-space:nowrap}.mui-dropdown__menu>li>a:focus,.mui-dropdown__menu>li>a:hover{text-decoration:none;color:rgba(0,0,0,.87);background-color:#EEE}.mui-dropdown__menu>.mui--is-disabled>a,.mui-dropdown__menu>.mui--is-disabled>a:focus,.mui-dropdown__menu>.mui--is-disabled>a:hover{color:#EEE}.mui-dropdown__menu>.mui--is-disabled>a:focus,.mui-dropdown__menu>.mui--is-disabled>a:hover{text-decoration:none;background-color:transparent;background-image:none;cursor:not-allowed}.mui-dropdown__menu--right{left:auto;right:0}.mui-form legend{display:block;width:100%;padding:0;margin-bottom:.625rem;font-size:1.3125rem;color:rgba(0,0,0,.87);line-height:inherit;border:0}.mui-form fieldset{border:0;padding:0;margin:0 0 1.25rem 0}@media (min-width:544px){.mui-form--inline .mui-textfield{display:inline-block;vertical-align:bottom;margin-bottom:0}.mui-form--inline .mui-checkbox,.mui-form--inline .mui-radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.mui-form--inline .mui-checkbox>label,.mui-form--inline .mui-radio>label{padding-left:0}.mui-form--inline .mui-checkbox>label>input[type=checkbox],.mui-form--inline .mui-radio>label>input[type=radio]{position:relative;margin-left:0}.mui-form--inline .mui-select{display:inline-block;vertical-align:bottom;margin-bottom:0}.mui-form--inline .mui-btn{margin-bottom:0;margin-top:0;vertical-align:bottom}}.mui-row{margin-left:-15px;margin-right:-15px}.mui-row:after,.mui-row:before{content:" ";display:table}.mui-row:after{clear:both}.mui-col-lg-1,.mui-col-lg-10,.mui-col-lg-11,.mui-col-lg-12,.mui-col-lg-2,.mui-col-lg-3,.mui-col-lg-4,.mui-col-lg-5,.mui-col-lg-6,.mui-col-lg-7,.mui-col-lg-8,.mui-col-lg-9,.mui-col-md-1,.mui-col-md-10,.mui-col-md-11,.mui-col-md-12,.mui-col-md-2,.mui-col-md-3,.mui-col-md-4,.mui-col-md-5,.mui-col-md-6,.mui-col-md-7,.mui-col-md-8,.mui-col-md-9,.mui-col-sm-1,.mui-col-sm-10,.mui-col-sm-11,.mui-col-sm-12,.mui-col-sm-2,.mui-col-sm-3,.mui-col-sm-4,.mui-col-sm-5,.mui-col-sm-6,.mui-col-sm-7,.mui-col-sm-8,.mui-col-sm-9,.mui-col-xs-1,.mui-col-xs-10,.mui-col-xs-11,.mui-col-xs-12,.mui-col-xs-2,.mui-col-xs-3,.mui-col-xs-4,.mui-col-xs-5,.mui-col-xs-6,.mui-col-xs-7,.mui-col-xs-8,.mui-col-xs-9{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:1px;padding-left:15px;padding-right:15px}.mui-col-xs-1,.mui-col-xs-10,.mui-col-xs-11,.mui-col-xs-12,.mui-col-xs-2,.mui-col-xs-3,.mui-col-xs-4,.mui-col-xs-5,.mui-col-xs-6,.mui-col-xs-7,.mui-col-xs-8,.mui-col-xs-9{float:left}.mui-col-xs-1{width:8.33333%}.mui-col-xs-2{width:16.66667%}.mui-col-xs-3{width:25%}.mui-col-xs-4{width:33.33333%}.mui-col-xs-5{width:41.66667%}.mui-col-xs-6{width:50%}.mui-col-xs-7{width:58.33333%}.mui-col-xs-8{width:66.66667%}.mui-col-xs-9{width:75%}.mui-col-xs-10{width:83.33333%}.mui-col-xs-11{width:91.66667%}.mui-col-xs-12{width:100%}.mui-col-xs-offset-0{margin-left:0}.mui-col-xs-offset-1{margin-left:8.33333%}.mui-col-xs-offset-2{margin-left:16.66667%}.mui-col-xs-offset-3{margin-left:25%}.mui-col-xs-offset-4{margin-left:33.33333%}.mui-col-xs-offset-5{margin-left:41.66667%}.mui-col-xs-offset-6{margin-left:50%}.mui-col-xs-offset-7{margin-left:58.33333%}.mui-col-xs-offset-8{margin-left:66.66667%}.mui-col-xs-offset-9{margin-left:75%}.mui-col-xs-offset-10{margin-left:83.33333%}.mui-col-xs-offset-11{margin-left:91.66667%}.mui-col-xs-offset-12{margin-left:100%}@media (min-width:544px){.mui-col-sm-1,.mui-col-sm-10,.mui-col-sm-11,.mui-col-sm-12,.mui-col-sm-2,.mui-col-sm-3,.mui-col-sm-4,.mui-col-sm-5,.mui-col-sm-6,.mui-col-sm-7,.mui-col-sm-8,.mui-col-sm-9{float:left}.mui-col-sm-1{width:8.33333%}.mui-col-sm-2{width:16.66667%}.mui-col-sm-3{width:25%}.mui-col-sm-4{width:33.33333%}.mui-col-sm-5{width:41.66667%}.mui-col-sm-6{width:50%}.mui-col-sm-7{width:58.33333%}.mui-col-sm-8{width:66.66667%}.mui-col-sm-9{width:75%}.mui-col-sm-10{width:83.33333%}.mui-col-sm-11{width:91.66667%}.mui-col-sm-12{width:100%}.mui-col-sm-offset-0{margin-left:0}.mui-col-sm-offset-1{margin-left:8.33333%}.mui-col-sm-offset-2{margin-left:16.66667%}.mui-col-sm-offset-3{margin-left:25%}.mui-col-sm-offset-4{margin-left:33.33333%}.mui-col-sm-offset-5{margin-left:41.66667%}.mui-col-sm-offset-6{margin-left:50%}.mui-col-sm-offset-7{margin-left:58.33333%}.mui-col-sm-offset-8{margin-left:66.66667%}.mui-col-sm-offset-9{margin-left:75%}.mui-col-sm-offset-10{margin-left:83.33333%}.mui-col-sm-offset-11{margin-left:91.66667%}.mui-col-sm-offset-12{margin-left:100%}}@media (min-width:768px){.mui-col-md-1,.mui-col-md-10,.mui-col-md-11,.mui-col-md-12,.mui-col-md-2,.mui-col-md-3,.mui-col-md-4,.mui-col-md-5,.mui-col-md-6,.mui-col-md-7,.mui-col-md-8,.mui-col-md-9{float:left}.mui-col-md-1{width:8.33333%}.mui-col-md-2{width:16.66667%}.mui-col-md-3{width:25%}.mui-col-md-4{width:33.33333%}.mui-col-md-5{width:41.66667%}.mui-col-md-6{width:50%}.mui-col-md-7{width:58.33333%}.mui-col-md-8{width:66.66667%}.mui-col-md-9{width:75%}.mui-col-md-10{width:83.33333%}.mui-col-md-11{width:91.66667%}.mui-col-md-12{width:100%}.mui-col-md-offset-0{margin-left:0}.mui-col-md-offset-1{margin-left:8.33333%}.mui-col-md-offset-2{margin-left:16.66667%}.mui-col-md-offset-3{margin-left:25%}.mui-col-md-offset-4{margin-left:33.33333%}.mui-col-md-offset-5{margin-left:41.66667%}.mui-col-md-offset-6{margin-left:50%}.mui-col-md-offset-7{margin-left:58.33333%}.mui-col-md-offset-8{margin-left:66.66667%}.mui-col-md-offset-9{margin-left:75%}.mui-col-md-offset-10{margin-left:83.33333%}.mui-col-md-offset-11{margin-left:91.66667%}.mui-col-md-offset-12{margin-left:100%}}@media (min-width:992px){.mui-col-lg-1,.mui-col-lg-10,.mui-col-lg-11,.mui-col-lg-12,.mui-col-lg-2,.mui-col-lg-3,.mui-col-lg-4,.mui-col-lg-5,.mui-col-lg-6,.mui-col-lg-7,.mui-col-lg-8,.mui-col-lg-9{float:left}.mui-col-lg-1{width:8.33333%}.mui-col-lg-2{width:16.66667%}.mui-col-lg-3{width:25%}.mui-col-lg-4{width:33.33333%}.mui-col-lg-5{width:41.66667%}.mui-col-lg-6{width:50%}.mui-col-lg-7{width:58.33333%}.mui-col-lg-8{width:66.66667%}.mui-col-lg-9{width:75%}.mui-col-lg-10{width:83.33333%}.mui-col-lg-11{width:91.66667%}.mui-col-lg-12{width:100%}.mui-col-lg-offset-0{margin-left:0}.mui-col-lg-offset-1{margin-left:8.33333%}.mui-col-lg-offset-2{margin-left:16.66667%}.mui-col-lg-offset-3{margin-left:25%}.mui-col-lg-offset-4{margin-left:33.33333%}.mui-col-lg-offset-5{margin-left:41.66667%}.mui-col-lg-offset-6{margin-left:50%}.mui-col-lg-offset-7{margin-left:58.33333%}.mui-col-lg-offset-8{margin-left:66.66667%}.mui-col-lg-offset-9{margin-left:75%}.mui-col-lg-offset-10{margin-left:83.33333%}.mui-col-lg-offset-11{margin-left:91.66667%}.mui-col-lg-offset-12{margin-left:100%}}@media (min-width:1200px){.mui-col-xl-1,.mui-col-xl-10,.mui-col-xl-11,.mui-col-xl-12,.mui-col-xl-2,.mui-col-xl-3,.mui-col-xl-4,.mui-col-xl-5,.mui-col-xl-6,.mui-col-xl-7,.mui-col-xl-8,.mui-col-xl-9{float:left}.mui-col-xl-1{width:8.33333%}.mui-col-xl-2{width:16.66667%}.mui-col-xl-3{width:25%}.mui-col-xl-4{width:33.33333%}.mui-col-xl-5{width:41.66667%}.mui-col-xl-6{width:50%}.mui-col-xl-7{width:58.33333%}.mui-col-xl-8{width:66.66667%}.mui-col-xl-9{width:75%}.mui-col-xl-10{width:83.33333%}.mui-col-xl-11{width:91.66667%}.mui-col-xl-12{width:100%}.mui-col-xl-offset-0{margin-left:0}.mui-col-xl-offset-1{margin-left:8.33333%}.mui-col-xl-offset-2{margin-left:16.66667%}.mui-col-xl-offset-3{margin-left:25%}.mui-col-xl-offset-4{margin-left:33.33333%}.mui-col-xl-offset-5{margin-left:41.66667%}.mui-col-xl-offset-6{margin-left:50%}.mui-col-xl-offset-7{margin-left:58.33333%}.mui-col-xl-offset-8{margin-left:66.66667%}.mui-col-xl-offset-9{margin-left:75%}.mui-col-xl-offset-10{margin-left:83.33333%}.mui-col-xl-offset-11{margin-left:91.66667%}.mui-col-xl-offset-12{margin-left:100%}}.mui-panel{padding:15px;margin-bottom:1.25rem;border-radius:0;background-color:#FFF;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}.mui-panel:after,.mui-panel:before{content:" ";display:table}.mui-panel:after{clear:both}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.mui-panel{-webkit-box-shadow:0 -1px 2px 0 rgba(0,0,0,.12),-1px 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12);box-shadow:0 -1px 2px 0 rgba(0,0,0,.12),-1px 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}}@supports (-ms-ime-align:auto){.mui-panel{-webkit-box-shadow:0 -1px 2px 0 rgba(0,0,0,.12),-1px 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12);box-shadow:0 -1px 2px 0 rgba(0,0,0,.12),-1px 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}}.mui-select{display:block;padding-top:.9375rem;margin-bottom:1.25rem;position:relative}.mui-select:focus{outline:0}.mui-select:focus>select{height:calc(2rem + 1px);margin-bottom:-1px;border-color:#2196F3;border-width:2px}.mui-select>select{display:block;height:2rem;width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:0;border:none;border-bottom:1px solid rgba(0,0,0,.26);border-radius:0;-webkit-box-shadow:none;box-shadow:none;background-color:transparent;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNiIgd2lkdGg9IjEwIj48cG9seWdvbiBwb2ludHM9IjAsMCAxMCwwIDUsNiIgc3R5bGU9ImZpbGw6cmdiYSgwLDAsMCwuMjQpOyIvPjwvc3ZnPg==);background-repeat:no-repeat;background-position:right center;cursor:pointer;color:rgba(0,0,0,.87);font-size:1rem;font-family:inherit;line-height:inherit;padding:0 1.563rem 0 0}.mui-select>select::-ms-expand{display:none}.mui-select>select:focus{outline:0;height:calc(2rem + 1px);margin-bottom:-1px;border-color:#2196F3;border-width:2px}.mui-select>select:disabled{color:rgba(0,0,0,.38);cursor:not-allowed;background-color:transparent;opacity:1}.mui-select>select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.mui-select>select:focus::-ms-value{background:0 0;color:rgba(0,0,0,.87)}.mui-select>label{position:absolute;top:0;display:block;width:100%;color:rgba(0,0,0,.54);font-size:.75rem;font-weight:400;line-height:.9375rem;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.mui-select:focus>label,.mui-select>select:focus~label{color:#2196F3}.mui-table{width:100%;max-width:100%;margin-bottom:1.25rem}.mui-table>tbody>tr>th,.mui-table>tfoot>tr>th,.mui-table>thead>tr>th{text-align:left}.mui-table>tbody>tr>td,.mui-table>tbody>tr>th,.mui-table>tfoot>tr>td,.mui-table>tfoot>tr>th,.mui-table>thead>tr>td,.mui-table>thead>tr>th{padding:10px;line-height:1.429}.mui-table>thead>tr>th{border-bottom:2px solid rgba(0,0,0,.12);font-weight:700}.mui-table>tbody+tbody{border-top:2px solid rgba(0,0,0,.12)}.mui-table.mui-table--bordered>tbody>tr>td{border-bottom:1px solid rgba(0,0,0,.12)}.mui-tabs__bar{list-style:none;padding-left:0;margin-bottom:0;background-color:transparent;white-space:nowrap;overflow-x:auto}.mui-tabs__bar>li{display:inline-block}.mui-tabs__bar>li>a{display:block;white-space:nowrap;text-transform:uppercase;font-weight:500;font-size:.875rem;color:rgba(0,0,0,.87);cursor:default;height:3rem;line-height:3rem;padding-left:1.5rem;padding-right:1.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mui-tabs__bar>li>a:hover{text-decoration:none}.mui-tabs__bar>li.mui--is-active{border-bottom:2px solid #2196F3}.mui-tabs__bar>li.mui--is-active>a{color:#2196F3}.mui-tabs__bar.mui-tabs__bar--justified{display:table;width:100%;table-layout:fixed}.mui-tabs__bar.mui-tabs__bar--justified>li{display:table-cell}.mui-tabs__bar.mui-tabs__bar--justified>li>a{text-align:center;padding-left:0;padding-right:0}.mui-tabs__pane{display:none}.mui-tabs__pane.mui--is-active{display:block}.mui-textfield{display:block;padding-top:.9375rem;margin-bottom:1.25rem;position:relative}.mui-textfield>label{position:absolute;top:0;display:block;width:100%;color:rgba(0,0,0,.54);font-size:.75rem;font-weight:400;line-height:.9375rem;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.mui-textfield>textarea{padding-top:.313rem}.mui-textfield>input:focus~label,.mui-textfield>textarea:focus~label{color:#2196F3}.mui-textfield--float-label>label{position:absolute;-webkit-transform:translate(0,.9375rem);transform:translate(0,.9375rem);font-size:1rem;line-height:2rem;color:rgba(0,0,0,.26);text-overflow:clip;cursor:text;pointer-events:none}.mui-textfield--float-label>input:focus~label,.mui-textfield--float-label>textarea:focus~label{-webkit-transform:translate(0,0);transform:translate(0,0);font-size:.75rem;line-height:.9375rem;text-overflow:ellipsis}.mui-textfield--float-label>input:not(:focus).mui--is-not-empty~label,.mui-textfield--float-label>input:not(:focus):not(:empty):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield--float-label>input:not(:focus)[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield--float-label>textarea:not(:focus).mui--is-not-empty~label,.mui-textfield--float-label>textarea:not(:focus):not(:empty):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield--float-label>textarea:not(:focus)[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty)~label{color:rgba(0,0,0,.54);font-size:.75rem;line-height:.9375rem;-webkit-transform:translate(0,0);transform:translate(0,0);text-overflow:ellipsis}.mui-textfield--wrap-label{display:table;width:100%;padding-top:0}.mui-textfield--wrap-label:not(.mui-textfield--float-label)>label{display:table-header-group;position:static;white-space:normal;overflow-x:visible}.mui-textfield>input,.mui-textfield>textarea{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;background-color:transparent;color:rgba(0,0,0,.87);border:none;border-bottom:1px solid rgba(0,0,0,.26);outline:0;width:100%;padding:0;-webkit-box-shadow:none;box-shadow:none;border-radius:0;font-size:1rem;font-family:inherit;line-height:inherit;background-image:none}.mui-textfield>input:focus,.mui-textfield>textarea:focus{border-color:#2196F3;border-width:2px}.mui-textfield>input:-moz-read-only,.mui-textfield>input:disabled,.mui-textfield>textarea:-moz-read-only,.mui-textfield>textarea:disabled{cursor:not-allowed;background-color:transparent;opacity:1}.mui-textfield>input:disabled,.mui-textfield>input:read-only,.mui-textfield>textarea:disabled,.mui-textfield>textarea:read-only{cursor:not-allowed;background-color:transparent;opacity:1}.mui-textfield>input::-webkit-input-placeholder,.mui-textfield>textarea::-webkit-input-placeholder{color:rgba(0,0,0,.26);opacity:1}.mui-textfield>input:-ms-input-placeholder,.mui-textfield>textarea:-ms-input-placeholder{color:rgba(0,0,0,.26);opacity:1}.mui-textfield>input::-ms-input-placeholder,.mui-textfield>textarea::-ms-input-placeholder{color:rgba(0,0,0,.26);opacity:1}.mui-textfield>input::placeholder,.mui-textfield>textarea::placeholder{color:rgba(0,0,0,.26);opacity:1}.mui-textfield>input{height:2rem}.mui-textfield>input:focus{height:calc(2rem + 1px);margin-bottom:-1px}.mui-textfield>textarea{min-height:4rem}.mui-textfield>textarea[rows]:not([rows="2"]):focus{margin-bottom:-1px}.mui-textfield>input:focus{height:calc(2rem + 1px);margin-bottom:-1px}.mui-textfield>input:invalid:not(:focus):not(:required),.mui-textfield>input:invalid:not(:focus):required.mui--is-empty.mui--is-touched,.mui-textfield>input:invalid:not(:focus):required.mui--is-not-empty,.mui-textfield>input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:not(:focus).mui--is-invalid:not(:required),.mui-textfield>input:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-touched,.mui-textfield>input:not(:focus).mui--is-invalid:required.mui--is-not-empty,.mui-textfield>input:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>textarea:invalid:not(:focus):not(:required),.mui-textfield>textarea:invalid:not(:focus):required.mui--is-empty.mui--is-touched,.mui-textfield>textarea:invalid:not(:focus):required.mui--is-not-empty,.mui-textfield>textarea:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>textarea:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>textarea:not(:focus).mui--is-invalid:not(:required),.mui-textfield>textarea:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-touched,.mui-textfield>textarea:not(:focus).mui--is-invalid:required.mui--is-not-empty,.mui-textfield>textarea:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>textarea:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty){border-color:#F44336;border-width:2px}.mui-textfield>input:invalid:not(:focus):not(:required),.mui-textfield>input:invalid:not(:focus):required.mui--is-empty.mui--is-touched,.mui-textfield>input:invalid:not(:focus):required.mui--is-not-empty,.mui-textfield>input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:not(:focus).mui--is-invalid:not(:required),.mui-textfield>input:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-touched,.mui-textfield>input:not(:focus).mui--is-invalid:required.mui--is-not-empty,.mui-textfield>input:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty),.mui-textfield>input:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty){height:calc(2rem + 1px);margin-bottom:-1px}.mui-textfield.mui-textfield--float-label>input:invalid:not(:focus):not(:required)~label,.mui-textfield.mui-textfield--float-label>input:invalid:not(:focus):required.mui--is-not-empty~label,.mui-textfield.mui-textfield--float-label>input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield.mui-textfield--float-label>input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield.mui-textfield--float-label>textarea:invalid:not(:focus):not(:required)~label,.mui-textfield.mui-textfield--float-label>textarea:invalid:not(:focus):required.mui--is-not-empty~label,.mui-textfield.mui-textfield--float-label>textarea:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty)~label,.mui-textfield.mui-textfield--float-label>textarea:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty)~label{color:#F44336}.mui-textfield:not(.mui-textfield--float-label)>input:invalid:not(:focus):not(:required)~label,.mui-textfield:not(.mui-textfield--float-label)>input:invalid:not(:focus):required.mui--is-empty.mui--is-touched~label,.mui-textfield:not(.mui-textfield--float-label)>input:invalid:not(:focus):required.mui--is-not-empty~label,.mui-textfield:not(.mui-textfield--float-label)>textarea:invalid:not(:focus):not(:required)~label,.mui-textfield:not(.mui-textfield--float-label)>textarea:invalid:not(:focus):required.mui--is-empty.mui--is-touched~label,.mui-textfield:not(.mui-textfield--float-label)>textarea:invalid:not(:focus):required.mui--is-not-empty~label{color:#F44336}.mui-textfield.mui-textfield--float-label>.mui--is-invalid.mui--is-not-empty:not(:focus)~label{color:#F44336}.mui-textfield:not(.mui-textfield--float-label)>.mui--is-invalid:not(:focus)~label{color:#F44336}.mui--no-transition{-webkit-transition:none;transition:none}.mui--no-user-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mui-caret{display:inline-block;width:0;height:0;margin-left:.125rem;vertical-align:middle;border-top:.25rem solid;border-right:.25rem solid transparent;border-left:.25rem solid transparent}.mui--text-left{text-align:left}.mui--text-right{text-align:right}.mui--text-center{text-align:center}.mui--text-justify{text-align:justify}.mui--text-nowrap{white-space:nowrap}.mui--align-baseline{vertical-align:baseline}.mui--align-top{vertical-align:top}.mui--align-middle{vertical-align:middle}.mui--align-bottom{vertical-align:bottom}.mui--text-dark{color:rgba(0,0,0,.87)}.mui--text-dark-secondary{color:rgba(0,0,0,.54)}.mui--text-dark-hint{color:rgba(0,0,0,.38)}.mui--text-light{color:#FFF}.mui--text-light-secondary{color:rgba(255,255,255,.7)}.mui--text-light-hint{color:rgba(255,255,255,.3)}.mui--text-accent{color:rgba(255,64,129,.87)}.mui--text-accent-secondary{color:rgba(255,64,129,.54)}.mui--text-accent-hint{color:rgba(255,64,129,.38)}.mui--text-black{color:#000}.mui--text-white{color:#FFF}.mui--text-danger{color:#F44336}.mui--bg-primary{background-color:#2196F3}.mui--bg-primary-dark{background-color:#1976D2}.mui--bg-primary-light{background-color:#BBDEFB}.mui--bg-accent{background-color:#FF4081}.mui--bg-accent-dark{background-color:#F50057}.mui--bg-accent-light{background-color:#FF80AB}.mui--bg-danger{background-color:#F44336}.mui-list--unstyled{padding-left:0;list-style:none}.mui-list--inline{padding-left:0;list-style:none;margin-left:-.313rem}.mui-list--inline>li{display:inline-block;padding-left:.313rem;padding-right:.313rem}.mui--z1,.mui-dropdown__menu{-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.mui--z2{-webkit-box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.mui--z3{-webkit-box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)}.mui--z4{-webkit-box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}.mui--z5{-webkit-box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22);box-shadow:0 19px 38px rgba(0,0,0,.3),0 15px 12px rgba(0,0,0,.22)}.mui--clearfix:after,.mui--clearfix:before{content:" ";display:table}.mui--clearfix:after{clear:both}.mui--pull-right{float:right}.mui--pull-left{float:left}.mui--hide{display:none}.mui--show{display:block}.mui--invisible{visibility:hidden}.mui--overflow-hidden{overflow:hidden}.mui--overflow-hidden-x{overflow-x:hidden}.mui--overflow-hidden-y{overflow-y:hidden}.mui--visible-lg-block,.mui--visible-lg-inline,.mui--visible-lg-inline-block,.mui--visible-md-block,.mui--visible-md-inline,.mui--visible-md-inline-block,.mui--visible-sm-block,.mui--visible-sm-inline,.mui--visible-sm-inline-block,.mui--visible-xl-block,.mui--visible-xl-inline,.mui--visible-xl-inline-block,.mui--visible-xs-block,.mui--visible-xs-inline,.mui--visible-xs-inline-block{display:none}@media (max-width:543px){.mui-visible-xs{display:block}table.mui-visible-xs{display:table}tr.mui-visible-xs{display:table-row}td.mui-visible-xs,th.mui-visible-xs{display:table-cell}.mui--visible-xs-block{display:block}.mui--visible-xs-inline{display:inline}.mui--visible-xs-inline-block{display:inline-block}}@media (min-width:544px) and (max-width:767px){.mui-visible-sm{display:block}table.mui-visible-sm{display:table}tr.mui-visible-sm{display:table-row}td.mui-visible-sm,th.mui-visible-sm{display:table-cell}.mui--visible-sm-block{display:block}.mui--visible-sm-inline{display:inline}.mui--visible-sm-inline-block{display:inline-block}}@media (min-width:768px) and (max-width:991px){.mui-visible-md{display:block}table.mui-visible-md{display:table}tr.mui-visible-md{display:table-row}td.mui-visible-md,th.mui-visible-md{display:table-cell}.mui--visible-md-block{display:block}.mui--visible-md-inline{display:inline}.mui--visible-md-inline-block{display:inline-block}}@media (min-width:992px) and (max-width:1199px){.mui-visible-lg{display:block}table.mui-visible-lg{display:table}tr.mui-visible-lg{display:table-row}td.mui-visible-lg,th.mui-visible-lg{display:table-cell}.mui--visible-lg-block{display:block}.mui--visible-lg-inline{display:inline}.mui--visible-lg-inline-block{display:inline-block}}@media (min-width:1200px){.mui-visible-xl{display:block}table.mui-visible-xl{display:table}tr.mui-visible-xl{display:table-row}td.mui-visible-xl,th.mui-visible-xl{display:table-cell}.mui--visible-xl-block{display:block}.mui--visible-xl-inline{display:inline}.mui--visible-xl-inline-block{display:inline-block}}@media (max-width:543px){.mui--hidden-xs{display:none}}@media (min-width:544px) and (max-width:767px){.mui--hidden-sm{display:none}}@media (min-width:768px) and (max-width:991px){.mui--hidden-md{display:none}}@media (min-width:992px) and (max-width:1199px){.mui--hidden-lg{display:none}}@media (min-width:1200px){.mui--hidden-xl{display:none}}.mui-scrlock--showbar-y{overflow-y:scroll}.mui-scrlock--showbar-x{overflow-x:scroll}.mui-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999999;background-color:rgba(0,0,0,.2);overflow:auto}.mui-overlay>div{margin:100px auto 0;max-width:600px}.mui--text-display4{font-weight:300;font-size:7rem;line-height:7rem}.mui--text-display3{font-weight:400;font-size:3.5rem;line-height:3.5rem}.mui--text-display2{font-weight:400;font-size:2.813rem;line-height:3rem}.mui--text-display1,h3{font-weight:400;font-size:2.125rem;line-height:2.5rem}.mui--text-headline,h2{font-weight:400;font-size:1.5rem;line-height:2rem}.mui--text-title,h3{font-weight:400;font-size:1.25rem;line-height:1.75rem}.mui--text-subhead,h4{font-weight:400;font-size:1rem;line-height:1.5rem}.mui--text-body2,h5{font-weight:500;font-size:.875rem;line-height:1.5rem}.mui--text-body1{font-weight:400;font-size:.875rem;line-height:1.25rem}.mui--text-caption{font-weight:400;font-size:.75rem;line-height:1rem}.mui--text-menu{font-weight:500;font-size:.813rem;line-height:1.063rem}.mui--text-button{font-weight:500;font-size:.875rem;line-height:1.125rem;text-transform:uppercase}
pre{overflow:auto}.bordered{border:1px solid rgba(0,0,0,.12)}
/* custom class after mui minimized css */
.red{color: red}
hr {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #888, #ccc);
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<!-- An example to learn MUI css and AMP pages by Mr. M. -->
</head>
<body>
<header class="mui-appbar mui--z1">
<div class="mui-container-fluid">
<h3>MUI css and ⚡ AMP Example</h3>
</div>
</header>
<div class="mui-container">
<div id="content-wrapper" class="mui--text-center">
<h1>MUI css and ⚡ AMP</h1>
<p>by Mr. M.</p>
<br>
Example a <strong> wicket fast valid </strong> ⚡ AMP page using internal minified MUI css <br> <i> (MUI v0.9.38 with !important removed)</i> with
<br>
<a href="https://fontawesome.com/">Font Awesome</a>
<br>
<a href="https://www.ampproject.org/">Google Accelerated Mobile Pages Docs</a>
<hr>
</div>
</div>
<div class="mui-container">
<div class="mui-row">
<div class="mui-col-md-4">
<h3>Welcome</h3>
<ul>
<li> This is an example of a single page (all links to urls) demonstrating how MUI css
can combined with AMP.</li>
<li>For a little spice, Font Awesome has been added.</li>
<li> Created for IMD students at Confederaton College.</li>
</ul>
</div>
<div class="mui-col-md-4">
<br>
<amp-youtube data-videoid="lBTCB7yLs8Y" layout="responsive" width="480" height="270"></amp-youtube>
</div>
<div class="mui-col-md-4 mui--text-center">
<br>
<amp-img src="http://res.cloudinary.com/rok/image/upload/v1518533398/Featured%20Images/google-amp-project-hero.jpg"
width="900" height="360" layout="responsive" alt="AMP logo">
</amp-img>
</div>
</div>
</div>
<footer>
<div class="mui-container mui--text-center">
<br><hr>
<i class="fas fa-address-card fa-3x"></i>&nbsp;&nbsp;&nbsp;
<i class="fas fa-camera-retro fa-4x"></i>
<br><br>
Made with <span class="red"></span> using <a href="https:https://www.muicss.com">MUICSS</a>
<br>
<a href="https://opensource.org/licenses/MIT">MIT License</a>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment