:root{--main:#555;--title:#333;--text:#333;--red:#ed1c24;}
.fnt-rk{font-family: 'Reem Kufi';}
.fnt{font-family:var(--fnt);}.fs-7{font-size:14px;}.fs-8{font-size:12px;}.fw-5{font-weight:500;}
.cl-m{color:var(--main);}.cl-h{color:var(--hover);}.cl-t{color:var(--text);}.cl-p{color:var(--prev);}.cl-r{color:var(--red);}.cl-w{color:var(--wite);}
.ls-1{letter-spacing: 1px;}.ls-3{letter-spacing: 3px;}.tr-5{transition:all 0.5s ease 0s;}.tr-25{transition:all 0.25s ease 0s;}
.br-5{border-radius:5px;}.br-10{border-radius:10px;}.br-15{border-radius:15px;}.br-30{border-radius:30px;}.br-50{border-radius:50%;}
body{font-family: Montserrat,'Helvetica Neue',Roboto,Arial,sans-serif;color:var(--text);}h1,h2,h3,h4,h5,h6{margin:0;line-height:1.5;}ul,ol,p{margin:0;padding:0;}
input,select,textarea{width:100%;height:50px;padding:0;border:1px solid #ebebeb;border-radius:5px;outline:none;text-indent:15px;transition:all 0.5s ease 0s;}input:disabled{cursor: not-allowed;}
input[type=submit]{display:inline-block;width:auto;padding:0 50px;background-color:var(--main);border:0;font-weight:500;text-indent:0;color:#fff;}input[type=submit]:hover{background-color:#000;}
select{background: url(images/select.png) no-repeat center right 9px;appearance:none;}textarea{height:102px;padding:15px;text-indent:0;}
a{text-decoration:none;}img{display:block;max-width:100%;height:auto;}.wow{opacity:0;}
.form-item{position:relative;margin-bottom:30px;}.form-item span{display:block;margin-bottom:5px;}
.form-item input.error,.form-item select.error,.form-item textarea.error{border-color:var(--red);}
.form-item label.error,.form-item label#emailregistered{position:absolute;top:100%;right:0;font-size:12px;color:var(--red);}
.clear{width:0;height:0;font-size:0;clear:both;overflow:hidden;zoom:1;}.clear:before,.clear:after{content:'';display:block;height:0;overflow:hidden;}.clear:after{clear:both;}
.header{top: 0; left: 0; width: 100%; padding: 15px 0; z-index: 99990; transition: all 0.5s ease 0s;}
.header:before{content: ''; position: absolute; top: 0; width: 100%; height: 200%; background-image: linear-gradient(rgb(0 0 0 / 50%) 0%, transparent 100%);}
.header-2{padding: 10px 0; background-color: var(--main);}
.header-2:before{display: none;}
.logo a span{position: absolute; width: 0; height: 0; overflow: hidden;}
.icon{right: 0; z-index: 1;}
.icon > *{width: 40px; color: #fff; cursor: pointer;}
.icon > * i{display: block; text-align: center; line-height: 40px; transition: all 0.5s ease 0s;}
.icon > * i:hover{background-color: var(--main); color: #fff;}
.search{top: calc(100% + 30px); right: 0; left: 0; display: none; width: 50%; background-color: #fff; box-shadow: 0 0 30px 1px rgb(0 0 0 / 25%);}
.search input[type='text']{float: left; width: calc(100% - 50px); border: 0;}
.search input[type='submit']{float: right; width: 50px; padding: 0; background: #fff url(images/search.png) no-repeat center;}
.search-2{top: calc(100% + 15px); opacity: 1; pointer-events: auto;}
.top{right: 5px; bottom: 5px; display: none; cursor: pointer; z-index: 99990;}
.top i{width: 40px; background-color: var(--main); line-height: 40px; color: #fff; transition: all 0.5s ease 0s;border-radius: 50%;}
.top i:hover{background-color: #fff; box-shadow: 0 3px 5px rgb(0 0 0 / 50%); transform: translatey(-3px); color: var(--main);}
.footer{background-color: var(--main); font-size: 14px; letter-spacing: 1px; color: #ddd;}
.footer:before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(images/footer-bg.jpg) no-repeat center / cover; opacity: 15%;}
.footer ul{list-style: none;}
.footer a{color: #ddd;}
.footer a:hover{color: #ddd;}
.footer-title{color: #fff;}
.main-button{font-weight: 500; line-height: 50px;}
.main-button a{display: inline-block; padding: 0 50px; background-color: var(--main); border-radius: 10px; color: #fff; transition: all 0.3s ease 0s;}
.main-button a:hover{background-color: var(--hover);}
.main-page{list-style: none; display: flex; justify-content: center; margin-bottom: 1.5rem;}
.main-page li+li{margin-left: 10px;}
.main-page li a{display: block; width: 40px; background-color: #f7f7f7; font-weight: 700; text-align: center; line-height: 40px; color: var(--text); transition: all 0.3s ease 0s;}
.main-page li a:hover, .main-page li a.active{background: var(--main); color: #fff;}
.main-time{color: #777;}
.main-detail p{padding: 0 0 1rem;}
.main-detail h2{padding: 0 0 1rem; font-size: 1.1rem;}
.main-detail h3{padding: 0 0 1rem; font-size: 1.2rem;}
.main-detail ul, .main-detail ol{padding: 0 0 1rem 2rem;}
.main-detail img{display: inline-block!important;}  
.main-detail table{width: 100%!important; border-collapse: collapse; border-color: #ebebeb;}
.main-detail iframe{display: block; width: 100%!important;  height: 500px!important; margin: 0 auto!important;} 
.main-detail figure{padding: 0 0 1rem;}
.main-detail figure figcaption{font-size: 14px; font-style: italic;}
.main-detail >*:last-child{padding: 0;}
.main-share > div:nth-child(1){margin-right: 17px; padding: 3px 10px; border: 1px solid #ebebeb; color: #777;}
.main-share > div:nth-child(1):before, .main-share > div:nth-child(1):after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; width: 0; height: 0; border-style: solid;}
.main-share > div:nth-child(1):before{border-width: 7px 0 7px 9px; border-color: transparent transparent transparent #e9e9e9;}
.main-share > div:nth-child(1):after{border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #fff;}
.main-share > div:nth-child(1) i{padding-right: 10px; border-right: 1px solid #ebebeb;}
.main-share > div:nth-child(1) b{padding: 0 10px; font-size: 12px;}
.main-share #st-1 .st-btn[data-network='telegram']{display: inline-block!important;}
.click{position: fixed; right: 0; bottom: 50px; pointer-events: none; z-index: 99990;}
.click a{position: relative; display: block; padding-left: 45px; transform: translatex(calc(100% - 45px)); pointer-events: auto; transition: all 0.5s ease 0s;}
.click a+a{margin-top: 5px;}
.click a img{position: absolute; top: 0; left: 0; width: 40px; border-radius: 50%; box-shadow: 0 0 3px rgb(0 0 0 / 15%);}
.click a i{background-color: var(--main); border-radius: 5px; font-size: 18px; text-align: center; line-height: 40px; color: #fff;}
.click a span{display: block; padding: 0 10px; background-color: #fff; border-radius: 5px; font-size: 14px; line-height: 40px; color: #333;}
.click a:hover{transform: translatex(-5px);}
.click a:hover span{box-shadow: 0 0 3px rgb(0 0 0 / 15%);}