<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>MagmaLanka/Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/1.css">
<link rel="stylesheet" href="CSS/2.css">
<link rel="stylesheet" href="CSS/3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html {scroll-behavior: smooth;}
h1,h2,h3,h4,h5,h6 {font-family: "Roboto"}
body {font-family: "Source Sans Pro"}
</style>
</head>
<body class="ml-margin">
<!-- Navigation bar with links -->
<div class="navBar whiteBg blackText">
<a href="Home.html"><img src="Images/logo-removebg.png" class="left tagML whiteBg" width="180px"></a>
<a href="#Contact" class="ml-hide-small navBar-item buttonML ml-mobile ml-medium ml-right" style="margin-top:10px;"></a>
<a href="ContactUs.html" class="ml-hide-small navBar-item buttonML ml-mobile ml-medium ml-right" style="margin-top:10px;">CONTACT US</a>
<a href="About Us.html" class="ml-hide-small navBar-item buttonML ml-mobile ml-medium ml-right" style="margin-top:10px;">ABOUT US</a>
<a href="#Home" class="ml-hide-small navBar-item buttonML ml-mobile ml-medium ml-right" style="margin-top:10px;">HOME</a>
<a href="javascript:void(0)" class="navBar-item buttonML ml-right ml-hide-medium ml-hide-large" style="margin-top:10px;" onclick="myFunction()"> ☰</a>
</div>
<div id="demo" class="navBar-block whiteBg ml-hide ml-hide-large ml-small">
<a href="#Home" class="navBar-item buttonML">HOME</a>
<a href="About Us.html" class="navBar-item buttonML">ABOUT US</a>
<a href="#Activities" class="navBar-item buttonML">ACTIVITIES</a>
<a href="#Contact" class="navBar-item buttonML">LOGIN</a>
</div>
<br><br><br><br>
<!-- ml-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="ml-content" style="max-width:2000px" >
<!-- Image header -->
<header class="ml-display-container ml-wide" style="padding-bottom:32px;" id="Home">
<img class="ml-image" src="Images/HomePage2.png" alt="Home Page" width="100%" height="1060">
<div class="ml-display-left ml-padding-large">
<h1 class="ml-text-white">WASTE ISN'T WASTE UNTIL WE WASTE IT</h1>
<h1 class="ml-jumbo ml-text-white ml-hide-small"><b>PATH TO A GREEN WORLD</b></h1>
<h6><button class="buttonML roundBorder ml-pale-red ml-padding-large ml-large ml-hover-opacity-off"><a href="About Us.html">ABOUT US</a></button></h6>
</div>
</header>
<!-- Grid / Trainers section -->
<div class="ml-row-padding" id="Main">
<div class="ml-center ml-padding-32">
<h2 class="ml-wide ml-center">WHAT WE DO?</h2>
<p class="ml-opacity ml-center"><i>Areas we focus on</i></p><br>
<p class="whiteBg blackText left-align"> To save millon of rupees, To help people in need...........................................
</p>
</div>
<div class="ml-second ml-margin-bottom">
<div class="ml-card-4">
<img src="Images/garbageM.png" alt="Garbage Management" style="width:100%">
<div class="ml-container">
<h3>Garbage Management</h3>
<p class="ml-opacity">Reduce, Reuse, Recycle</p>
<p>something about garbage management</p>
<p><button class="buttonML roundBorder ml-pale-green ml-block"><a href="#GarbageManagement">SERVICES</a></button></p>
</div>
</div>
</div>
<div class="ml-second ml-margin-bottom">
<div class="ml-card-4">
<img src="Images/excessFM.png" alt="Excess Food Management" style="width:100%">
<div class="ml-container">
<h3>Excess Food Management</h3>
<p class="ml-opacity">Donate Them</p>
<p>something about food management</p>
<p><button class="buttonML roundBorder ml-pale-green ml-block"><a href="#ExcessFood">SERVICES</a></button></p>
</div>
</div>
</div>
</div>
<br><br>
<!-- Garbage Management section -->
<div class="whiteBg" >
<div class="ml-container" id="GarbageManagement">
<div class="ml-center ml-padding-32">
<h2 class="ml-wide">Garbage Management</h2>
<p class="ml-opacity"><i>How we can help you with Garbage Management</i></p><br>
<p class="left-align whiteBg blackText">
<!--Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra rhoncus suscipit. Integer eget leo pretium, vulputate velit sit amet, aliquam est. Pellentesque a malesuada orci, at rhoncus enim. Suspendisse at dictum arcu. Etiam tempus varius sem, at pretium augue fringilla et. Curabitur tempus sollicitudin congue. Aliquam in malesuada eros. Nunc ullamcorper sagittis augue a ornare. Aenean faucibus finibus sollicitudin. Nullam interdum tellus mauris, et mattis libero accumsan vitae. Suspendisse et dui accumsan, lacinia leo in, aliquam felis. Aliquam tortor tellus, egestas tristique orci at, rutrum lacinia orci.
--></p>
</div>
<div class="ml-row-padding" style="margin:0 -16px">
<div class="ml-third">
<img src="Images/scedule.png" alt="Dump Truck" style="width:100%" class="ml-hover-opacity">
<div class="ml-container whiteBg">
<p><b>Dump Truck Schedule</b></p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="buttonML roundBorder ml-pale-green ml-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">LEARN MORE</button>
</div>
</div>
<div class="ml-third">
<img src="Images/bulktruck.png" alt="Bulk Truck" style="width:100%" class="ml-hover-opacity">
<div class="ml-container whiteBg">
<p><b>Bulk Truck Hiring</b></p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="buttonML roundBorder ml-pale-green ml-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">LEARN MORE</button>
</div>
</div>
<div class="ml-third">
<img src="Images/ewaste.png" alt="Bulk Truvk" style="width:100%" class="ml-hover-opacity">
<div class="ml-container whiteBg">
<p><b>E-Trade</b></p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="buttonML roundBorder ml-pale-green ml-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">LEARN MORE</button>
</div>
</div>
</div>
</div>
</div>
<!-- Excess Food Management section -->
<div class="whiteBg" style="align-items: center">
<div class="ml-container" id="ExcessFood" >
<div class="ml-center ml-padding-32">
<h2 class="ml-wide">Excess Food Management</h2>
<p class="ml-opacity"><i>How we can help you with Excess food Management</i></p><br>
<p class="left-align whiteBg blackText">
<!--Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra rhoncus suscipit. Integer eget leo pretium, vulputate velit sit amet, aliquam est. Pellentesque a malesuada orci, at rhoncus enim. Suspendisse at dictum arcu. Etiam tempus varius sem, at pretium augue fringilla et. Curabitur tempus sollicitudin congue. Aliquam in malesuada eros. Nunc ullamcorper sagittis augue a ornare. Aenean faucibus finibus sollicitudin. Nullam interdum tellus mauris, et mattis libero accumsan vitae. Suspendisse et dui accumsan, lacinia leo in, aliquam felis. Aliquam tortor tellus, egestas tristique orci at, rutrum lacinia orci.
--></p>
</div>
<div class="ml-row-padding" style="margin:0 -16px">
<div class="ml-third">
<img src="Images/donate.png" alt="Donate" style="width:100%" class="ml-hover-opacity">
<div class="ml-container whiteBg">
<p><b>Donate</b></p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="buttonML roundBorder ml-pale-green ml-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">LEARN MORE</button>
</div>
</div>
<div class="ml-third" >
<img src="Images/compost.png" alt="Composte" style="width:100%" class="ml-hover-opacity">
<div class="ml-container whiteBg">
<p><b>Sell Composte</b></p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="buttonML roundBorder ml-pale-green ml-margin-bottom" onclick="document.getElementById('ticketModal').style.display='block'">LEARN MORE</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer. This section contains an ad for W3Schools Spaces. You can leave it to support us. -->
<footer class="ml-container ml-pale-red ml-center ml-margin-top">
<p>Find us on social media.</p>
<i class="fa fa-facebook-official ml-hover-opacity"></i>
<i class="fa fa-instagram ml-hover-opacity"></i>
<i class="fa fa-snapchat ml-hover-opacity"></i>
<i class="fa fa-pinterest-p ml-hover-opacity"></i>
<i class="fa fa-twitter ml-hover-opacity"></i>
<i class="fa fa-linkedin ml-hover-opacity"></i>
</footer>
<script>
function myFunction() {
var x = document.getElementById("demo");
if (x.className.indexOf("ml-show") == -1) {
x.className += " ml-show";
} else {
x.className = x.className.replace(" ml-show", "");
}
}
</script>
</body>
</html>
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
button{font-style: none;}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{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}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.ml-serif{font-family:serif}.ml-sans-serif{font-family:sans-serif}.ml-cursive{font-family:cursive}.ml-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.ml-wide{letter-spacing:4px}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
.ml-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.ml-table,.ml-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.ml-table-all{border:1px solid #ccc}
.ml-bordered tr,.ml-table-all tr{border-bottom:1px solid #ddd}.ml-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.ml-table-all tr:nth-child(odd){background-color:#fff}.ml-table-all tr:nth-child(even){background-color:#f1f1f1}
.ml-hoverable tbody tr:hover,.ml-ul.ml-hoverable li:hover{background-color:#ccc}.ml-centered tr th,.ml-centered tr td{text-align:center}
.ml-table td,.ml-table th,.ml-table-all td,.ml-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.ml-table th:first-child,.ml-table td:first-child,.ml-table-all th:first-child,.ml-table-all td:first-child{padding-left:16px}
.ml-btn,.buttonML{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.ml-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.ml-btn,.buttonML{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.ml-disabled,.ml-btn:disabled,.buttonML:disabled{cursor:not-allowed;opacity:0.3}.ml-disabled *,:disabled *{pointer-events:none}
.ml-btn.ml-disabled:hover,.ml-btn:disabled:hover{box-shadow:none}
.ml-badge,.tagML{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.ml-badge{border-radius:50%}
.ml-ul{list-style-type:none;padding:0;margin:0}.ml-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.ml-ul li:last-child{border-bottom:none}
.ml-tooltip,.ml-display-container{position:relative}.ml-tooltip .ml-text{display:none}.ml-tooltip:hover .ml-text{display:inline-block}
.ml-ripple:active{opacity:0.5}.ml-ripple{transition:opacity 0s}
.ml-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.ml-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.ml-dropdown-click,.ml-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.ml-dropdown-hover:hover .ml-dropdown-content{display:block}
.ml-dropdown-hover:first-child,.ml-dropdown-click:hover{background-color:#ccc;color:#000}
.ml-dropdown-hover:hover > .buttonML:first-child,.ml-dropdown-click:hover > .buttonML:first-child{background-color:#ccc;color:#000}
.ml-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
.ml-check,.ml-radio{width:24px;height:24px;position:relative;top:6px}
.ml-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.ml-bar-block .ml-dropdown-hover,.ml-bar-block .ml-dropdown-click{width:100%}
.ml-bar-block .ml-dropdown-hover .ml-dropdown-content,.ml-bar-block .ml-dropdown-click .ml-dropdown-content{min-width:100%}
.ml-bar-block .ml-dropdown-hover .buttonML,.ml-bar-block .ml-dropdown-click .buttonML{width:100%;text-align:left;padding:8px 16px}
.ml-main,#main{transition:margin-left .4s}
.ml-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.ml-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.ml-bar{width:100%;overflow:hidden}.ml-center .ml-bar{display:inline-block;width:auto}
.ml-bar .ml-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.ml-bar .ml-dropdown-hover,.ml-bar .ml-dropdown-click{position:static;float:left}
.ml-bar .buttonML{white-space:normal}
.ml-bar-block .ml-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.ml-bar-block.ml-center .ml-bar-item{text-align:center}.ml-block{display:block;width:100%}
.ml-responsive{display:block;overflow-x:auto}
.ml-container:after,.ml-container:before,.ml-panel:after,.ml-panel:before,.ml-row:after,.ml-row:before,.ml-row-padding:after,.ml-row-padding:before,
.ml-cell-row:before,.ml-cell-row:after,.ml-clear:after,.ml-clear:before,.ml-bar:before,.ml-bar:after{content:"";display:table;clear:both}
.ml-col,.ml-half,.ml-third,.ml-second,.ml-twothird,.ml-threequarter,.ml-quarter{float:left;width:100%}
.ml-col.s1{width:8.33333%}.ml-col.s2{width:16.66666%}.ml-col.s3{width:24.99999%}.ml-col.s4{width:33.33333%}
.ml-col.s5{width:41.66666%}.ml-col.s6{width:49.99999%}.ml-col.s7{width:58.33333%}.ml-col.s8{width:66.66666%}
.ml-col.s9{width:74.99999%}.ml-col.s10{width:83.33333%}.ml-col.s11{width:91.66666%}.ml-col.s12{width:99.99999%}
@media (min-width:601px){.ml-col.m1{width:8.33333%}.ml-col.m2{width:16.66666%}.ml-col.m3,.ml-quarter{width:24.99999%}.ml-col.m4,.ml-third{width:33.33333%}.ml-second{width: 40%;}
.ml-col.m5{width:41.66666%}.ml-col.m6,.ml-half{width:49.99999%}.ml-col.m7{width:58.33333%}.ml-col.m8,.ml-twothird{width:66.66666%}
.ml-col.m9,.ml-threequarter{width:74.99999%}.ml-col.m10{width:83.33333%}.ml-col.m11{width:91.66666%}.ml-col.m12{width:99.99999%}}
@media (min-width:993px){.ml-col.l1{width:8.33333%}.ml-col.l2{width:16.66666%}.ml-col.l3{width:24.99999%}.ml-col.l4{width:33.33333%}
.ml-col.l5{width:41.66666%}.ml-col.l6{width:49.99999%}.ml-col.l7{width:58.33333%}.ml-col.l8{width:66.66666%}
.ml-col.l9{width:74.99999%}.ml-col.l10{width:83.33333%}.ml-col.l11{width:91.66666%}.ml-col.l12{width:99.99999%}}
.ml-rest{overflow:hidden}.ml-stretch{margin-left:-16px;margin-right:-16px}
.ml-content,.ml-auto{margin-left:auto;margin-right:auto}.ml-content{max-width:980px}.ml-auto{max-width:1140px}
.ml-cell-row{display:table;width:100%}.ml-cell{display:table-cell}
.ml-cell-top{vertical-align:top}.ml-cell-middle{vertical-align:middle}.ml-cell-bottom{vertical-align:bottom}
.ml-hide{display:none!important}.ml-show-block,.ml-show{display:block!important}.ml-show-inline-block{display:inline-block!important}
@media (max-width:1205px){.ml-auto{max-width:95%}}
@media (max-width:600px){.ml-modal-content{margin:0 10px;width:auto!important}.ml-modal{padding-top:30px}
.ml-dropdown-hover.ml-mobile .ml-dropdown-content,.ml-dropdown-click.ml-mobile .ml-dropdown-content{position:relative}
.ml-hide-small{display:none!important}.ml-mobile{display:block;width:100%!important}.ml-bar-item.ml-mobile,.ml-dropdown-hover.ml-mobile,.ml-dropdown-click.ml-mobile{text-align:center}
.ml-dropdown-hover.ml-mobile,.ml-dropdown-hover.ml-mobile .ml-btn,.ml-dropdown-hover.ml-mobile .buttonML,.ml-dropdown-click.ml-mobile,.ml-dropdown-click.ml-mobile .ml-btn,.ml-dropdown-click.ml-mobile .buttonML{width:100%}}
@media (max-width:768px){.ml-modal-content{width:500px}.ml-modal{padding-top:50px}}
@media (min-width:993px){.ml-modal-content{width:900px}.ml-hide-large{display:none!important}.ml-sidebar.ml-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.ml-hide-medium{display:none!important}}
@media (max-width:992px){.ml-sidebar.ml-collapse{display:none}.ml-main{margin-left:0!important;margin-right:0!important}.ml-auto{max-width:100%}}
.ml-top,.ml-bottom{position:fixed;width:100%;z-index:1}.ml-top{top:0}.ml-bottom{bottom:0}
.ml-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.ml-display-topleft{position:absolute;left:0;top:0}.ml-display-topright{position:absolute;right:0;top:0}
.ml-display-bottomleft{position:absolute;left:0;bottom:0}.ml-display-bottomright{position:absolute;right:0;bottom:0}
.ml-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.ml-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.ml-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.ml-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.ml-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.ml-display-container:hover .ml-display-hover{display:block}.ml-display-container:hover span.ml-display-hover{display:inline-block}.ml-display-hover{display:none}
.ml-display-position{position:absolute}
.ml-circle{border-radius:50%}
.roundBorder-small{border-radius:2px}.roundBorder,.roundBorder-medium{border-radius:6px}.roundBorder-large{border-radius:8px}.roundBorder-xlarge{border-radius:16px}.roundBorder-xxlarge{border-radius:32px}
.ml-row-padding,.ml-row-padding>.ml-half,.ml-row-padding>.ml-third,.ml-second,.ml-row-padding>.ml-twothird,.ml-row-padding>.ml-threequarter,.ml-row-padding>.ml-quarter,.ml-row-padding>.ml-col{padding:0 8px}
.ml-container,.ml-panel{padding:0.01em 16px}.ml-panel{margin-top:16px;margin-bottom:16px}
.ml-code,.ml-codespan{font-family:Consolas,"courier new";font-size:16px}
.ml-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.ml-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.ml-card,.ml-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.ml-card-4,.ml-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.ml-spin{animation:ml-spin 2s infinite linear}@keyframes ml-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.ml-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.ml-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.ml-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.ml-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.ml-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.ml-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.ml-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.ml-animate-input{transition:width 0.4s ease-in-out}.ml-animate-input:focus{width:100%!important}
.ml-opacity,.ml-hover-opacity:hover{opacity:0.60}.ml-opacity-off,.ml-hover-opacity-off:hover{opacity:1}
.ml-opacity-max{opacity:0.25}.ml-opacity-min{opacity:0.75}
.ml-greyscale-max,.ml-grayscale-max,.ml-hover-greyscale:hover,.ml-hover-grayscale:hover{filter:grayscale(100%)}
.ml-greyscale,.ml-grayscale{filter:grayscale(75%)}.ml-greyscale-min,.ml-grayscale-min{filter:grayscale(50%)}
.ml-sepia{filter:sepia(75%)}.ml-sepia-max,.ml-hover-sepia:hover{filter:sepia(100%)}.ml-sepia-min{filter:sepia(50%)}
.ml-tiny{font-size:10px!important}.ml-small{font-size:12px!important}.ml-medium{font-size:15px!important}.ml-large{font-size:18px!important}
.ml-xlarge{font-size:24px!important}.ml-xxlarge{font-size:36px!important}.ml-xxxlarge{font-size:48px!important}.ml-jumbo{font-size:64px!important}
.left-align{text-align:left!important}.ml-right-align{text-align:right!important}.ml-justify{text-align:justify!important}.ml-center{text-align:center!important}
.ml-border-0{border:0!important}.ml-border{border:1px solid #ccc!important}
.ml-border-top{border-top:1px solid #ccc!important}.ml-border-bottom{border-bottom:1px solid #ccc!important}
.ml-border-left{border-left:1px solid #ccc!important}.ml-border-right{border-right:1px solid #ccc!important}
.ml-topbar{border-top:6px solid #ccc!important}.ml-bottombar{border-bottom:6px solid #ccc!important}
.leftbar{border-left:6px solid #ccc!important}.ml-rightbar{border-right:6px solid #ccc!important}
.ml-section,.ml-code{margin-top:16px!important;margin-bottom:16px!important}
.ml-margin{margin:16px!important}.ml-margin-top{margin-top:16px!important}.ml-margin-bottom{margin-bottom:16px!important}
.ml-margin-left{margin-left:16px!important}.ml-margin-right{margin-right:16px!important}
.ml-padding-small{padding:4px 8px!important}.ml-padding{padding:8px 16px!important}.ml-padding-large{padding:12px 24px!important}
.ml-padding-16{padding-top:16px!important;padding-bottom:16px!important}.ml-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.ml-padding-32{padding-top:32px!important;padding-bottom:32px!important}.ml-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.ml-padding-64{padding-top:64px!important;padding-bottom:64px!important}
.ml-padding-top-64{padding-top:64px!important}.ml-padding-top-48{padding-top:48px!important}
.ml-padding-top-32{padding-top:32px!important}.ml-padding-top-24{padding-top:24px!important}
.left{float:left!important}.ml-right{float:right!important}
.buttonML:hover{color:#000!important;background-color:#ccc!important}
.ml-transparent,.ml-hover-none:hover{background-color:transparent!important}
.ml-hover-none:hover{box-shadow:none!important}
/* Colors */
.ml-amber,.ml-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.ml-aqua,.ml-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.ml-blue,.ml-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.ml-light-blue,.ml-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.ml-brown,.ml-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.ml-cyan,.ml-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.ml-blue-grey,.ml-hover-blue-grey:hover,.ml-blue-gray,.ml-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.ml-green,.ml-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.ml-light-green,.ml-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.ml-indigo,.ml-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.ml-khaki,.ml-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.ml-lime,.ml-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.ml-orange,.ml-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.ml-deep-orange,.ml-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.ml-pink,.ml-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.ml-purple,.ml-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.ml-deep-purple,.ml-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.ml-red,.ml-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.ml-sand,.ml-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.ml-teal,.ml-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.ml-yellow,.ml-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.whiteBg,.ml-hover-white:hover{color:#000!important;background-color:#fff!important}
.ml-black,.ml-hover-black:hover{color:#fff!important;background-color:#000!important}
.ml-grey,.ml-hover-grey:hover,.ml-gray,.ml-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.ml-light-grey,.ml-hover-light-grey:hover,.ml-light-gray,.ml-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.ml-dark-grey,.ml-hover-dark-grey:hover,.ml-dark-gray,.ml-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.ml-pale-red,.ml-hover-pale-red:hover{color:#000!important;background-color:#52796f!important}
.ml-pale-green,.ml-hover-pale-green:hover{color:#000!important;background-color:#a8c9af!important}
.ml-pale-yellow,.ml-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.ml-pale-blue,.ml-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.ml-text-amber,.ml-hover-text-amber:hover{color:#ffc107!important}
.ml-text-aqua,.ml-hover-text-aqua:hover{color:#00ffff!important}
.ml-text-blue,.ml-hover-text-blue:hover{color:#2196F3!important}
.ml-text-light-blue,.ml-hover-text-light-blue:hover{color:#87CEEB!important}
.ml-text-brown,.ml-hover-text-brown:hover{color:#795548!important}
.ml-text-cyan,.ml-hover-text-cyan:hover{color:#00bcd4!important}
.ml-text-blue-grey,.ml-hover-text-blue-grey:hover,.ml-text-blue-gray,.ml-hover-text-blue-gray:hover{color:#607d8b!important}
.ml-text-green,.ml-hover-text-green:hover{color:#4CAF50!important}
.ml-text-light-green,.ml-hover-text-light-green:hover{color:#8bc34a!important}
.ml-text-indigo,.ml-hover-text-indigo:hover{color:#3f51b5!important}
.ml-text-khaki,.ml-hover-text-khaki:hover{color:#b4aa50!important}
.ml-text-lime,.ml-hover-text-lime:hover{color:#cddc39!important}
.ml-text-orange,.ml-hover-text-orange:hover{color:#ff9800!important}
.ml-text-deep-orange,.ml-hover-text-deep-orange:hover{color:#ff5722!important}
.ml-text-pink,.ml-hover-text-pink:hover{color:#e91e63!important}
.ml-text-purple,.ml-hover-text-purple:hover{color:#9c27b0!important}
.ml-text-deep-purple,.ml-hover-text-deep-purple:hover{color:#673ab7!important}
.ml-text-red,.ml-hover-text-red:hover{color:#f44336!important}
.ml-text-sand,.ml-hover-text-sand:hover{color:#fdf5e6!important}
.ml-text-teal,.ml-hover-text-teal:hover{color:#009688!important}
.ml-text-yellow,.ml-hover-text-yellow:hover{color:#d2be0e!important}
.ml-text-white,.ml-hover-text-white:hover{color:#fff!important}
.blackText,.ml-hover-text-black:hover{color:#000!important}
.ml-text-grey,.ml-hover-text-grey:hover,.ml-text-gray,.ml-hover-text-gray:hover{color:#757575!important}
.ml-text-light-grey,.ml-hover-text-light-grey:hover,.ml-text-light-gray,.ml-hover-text-light-gray:hover{color:#f1f1f1!important}
.ml-text-dark-grey,.ml-hover-text-dark-grey:hover,.ml-text-dark-gray,.ml-hover-text-dark-gray:hover{color:#3a3a3a!important}
.ml-border-amber,.ml-hover-border-amber:hover{border-color:#ffc107!important}
.ml-border-aqua,.ml-hover-border-aqua:hover{border-color:#00ffff!important}
.ml-border-blue,.ml-hover-border-blue:hover{border-color:#2196F3!important}
.ml-border-light-blue,.ml-hover-border-light-blue:hover{border-color:#87CEEB!important}
.ml-border-brown,.ml-hover-border-brown:hover{border-color:#795548!important}
.ml-border-cyan,.ml-hover-border-cyan:hover{border-color:#00bcd4!important}
.ml-border-blue-grey,.ml-hover-border-blue-grey:hover,.ml-border-blue-gray,.ml-hover-border-blue-gray:hover{border-color:#607d8b!important}
.ml-border-green,.ml-hover-border-green:hover{border-color:#4CAF50!important}
.ml-border-light-green,.ml-hover-border-light-green:hover{border-color:#8bc34a!important}
.ml-border-indigo,.ml-hover-border-indigo:hover{border-color:#3f51b5!important}
.ml-border-khaki,.ml-hover-border-khaki:hover{border-color:#f0e68c!important}
.ml-border-lime,.ml-hover-border-lime:hover{border-color:#cddc39!important}
.ml-border-orange,.ml-hover-border-orange:hover{border-color:#ff9800!important}
.ml-border-deep-orange,.ml-hover-border-deep-orange:hover{border-color:#ff5722!important}
.ml-border-pink,.ml-hover-border-pink:hover{border-color:#e91e63!important}
.ml-border-purple,.ml-hover-border-purple:hover{border-color:#9c27b0!important}
.ml-border-deep-purple,.ml-hover-border-deep-purple:hover{border-color:#673ab7!important}
.ml-border-red,.ml-hover-border-red:hover{border-color:#f44336!important}
.ml-border-sand,.ml-hover-border-sand:hover{border-color:#fdf5e6!important}
.ml-border-teal,.ml-hover-border-teal:hover{border-color:#009688!important}
.ml-border-yellow,.ml-hover-border-yellow:hover{border-color:#ffeb3b!important}
.ml-border-white,.ml-hover-border-white:hover{border-color:#fff!important}
.ml-border-black,.ml-hover-border-black:hover{border-color:#000!important}
.ml-border-grey,.ml-hover-border-grey:hover,.ml-border-gray,.ml-hover-border-gray:hover{border-color:#9e9e9e!important}
.ml-border-light-grey,.ml-hover-border-light-grey:hover,.ml-border-light-gray,.ml-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.ml-border-dark-grey,.ml-hover-border-dark-grey:hover,.ml-border-dark-gray,.ml-hover-border-dark-gray:hover{border-color:#616161!important}
.ml-border-pale-red,.ml-hover-border-pale-red:hover{border-color:#ffe7e7!important}.ml-border-pale-green,.ml-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.ml-border-pale-yellow,.ml-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.ml-border-pale-blue,.ml-hover-border-pale-blue:hover{border-color:#e7ffff!important}
