@import "https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900";
*{transition:.5s}
body{background: linear-gradient(-45deg, #15151599 20%, transparent 20% 80%, #15151599 80% 100%), linear-gradient(45deg, #15151599 20%, transparent 20% 80%, #15151599 80% 100%), linear-gradient(-45deg, #111 33%, transparent 33% 66%, #111 66%), linear-gradient(45deg, transparent 33%, #151515 33% 66%, transparent 66%);background-size: 2em 2em;background-color: #111;opacity: 1;}
h3{text-decoration: none;color: white;padding: 10px 0 10px 5px;margin: 0;font-family: Poppins;float: left;font-size: 14px;max-width: calc(100% - 220px);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
h3:hover{color:#fc0;}
a {text-decoration:none;}
.main {margin-bottom:340px;background: #111;margin-top: 130px;box-shadow: 0 0 100px black;padding-top: 5px;max-width: 1200px;margin-left: auto;margin-right: auto;padding: 20px;border-radius: 10px;display: block;}
.hero{color: #eee;padding: 8px 20px 20px;margin: 0 auto;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 90%;z-index: -1;border-top: 0px solid #fc0;max-width: 1200px;}
.hero::before{content:"";width: 90%;height: 10px;background: #fc0;position:absolute;left: 50%;top:0;display:table;transform: translateX(-50%);border-radius: 0 0 5px 5px;}
.hero .heroContent{width: 90%;max-width: 1100px;margin: 0 auto;}
.hero .logo{width: 100px;display: inline-block;margin-bottom: -15px;}
.hero .titleOne{display: inline-block;font-family: bree;max-width: 150px;font-size: 16px;margin: 0 0 10px 10px;line-height: 1.2;}
.hero p{font-size: 12px;display: none;}
.hero.hide{display:none;}
.pro{display:inline-block;position:relative;transition:all .3s ease 0s;width: calc(50% - 24px);border-radius: 10px;padding: 10px;background: #222;margin: 2px 1px;transform: scale(.95);}
.pro:hover{transform:scale(1)}
.pro:hover .ti{}
.pro:hover .de{opacity:0;transition:all .3s ease 0s}
.pro img{width:100%;border-radius: 10px;}
.pro.one{width: calc(100% - 20px);}
.pro.three{display:inline-block;position:relative;width: calc(33% - 21px);}
.ti{border-radius:50px;bottom: 15px;color: #666;font-size: 11px;padding: 5px 10px;text-align:center;display: table;margin: 10px 0px;float: right;}
.ti:hover{background: #fc0;color: black;}
.ti.dd{bottom: 45px;}
.de{top: 24px;color: white;font-size: 8px;left: 30px;position:absolute;text-align:center;transition:all .3s ease 0s;background: rgba(0,0,0, .4);border-radius: 100px;padding: 3px 6px;font-family: monospace;}
.ad{margin: 0 auto;position: relative;display: block;}
@media only screen and (max-width:820px){
h3{display:block;float:none;text-align: center;max-width: 100%;padding: 5px 0;}
.main {margin-bottom: 800px;border-radius: 0;}
.pro{width: calc(100% - 20px);text-align: center;}
.pro.three{width:calc(100% - 20px);}
.logo{margin-bottom:60px}
.ti{float: none;margin: 0 2px;display: inline-block;border: 1px solid;}
.ti.dd{bottom: 40px;}
.de{}
}