/*
	Author			:	Zakaria Boudoudou
	Email			:	zakaria.boudoudou@gmail.com; zakaria.boudoudou@hotmail.com
	Website			:	http://www.zakbdd.com

	Sass			:	sass --watch style.scss:style.css
*/
@font-face {
  font-family: "Sui l";
  src: url("../../../../../../css/fonts/Sui_l.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Sui";
  src: url("../../../../../../css/fonts/Sui.ttf");
  font-display: swap;
}
/*@font-face {font-family:'Sui i'; src:url('..\/../../../../../css/fonts/Sui_i.ttf'); font-display:swap;}
@font-face {font-family:'Sui ib'; src:url('..\/../../../../../css/fonts/Sui_ib.ttf'); font-display:swap;}*/
@font-face {
  font-family: "Sui sb";
  src: url("../../../../../../css/fonts/Sui_sb.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Sui b";
  src: url("../../../../../../css/fonts/Sui_b.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Arb";
  src: url("../../../../../../css/fonts/Cairo-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Arb sb";
  src: url("../../../../../../css/fonts/Cairo-SemiBold.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Arb b";
  src: url("../../../../../../css/fonts/Cairo-Bold.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Cur gs";
  src: url("../../../../../../css/fonts/fr/BelleAllureGS-Gros.otf");
  font-display: swap;
}
@font-face {
  font-family: "Cur ce";
  src: url("../../../../../../css/fonts/fr/BelleAllureCE-Gros.otf");
  font-display: swap;
}
@font-face {
  font-family: "Cur cm";
  src: url("../../../../../../css/fonts/fr/BelleAllureCM-Gros.otf");
  font-display: swap;
}
@font-face {
  font-family: "Cur b";
  src: url("../../../../../../css/fonts/fr/ABcursive-Bold.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Arbe";
  src: url("../../../../../../css/fonts/ar/HONORSansArabicUI-L.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Arbe b";
  src: url("../../../../../../css/fonts/ar/HONORSansArabicUI-M.ttf");
  font-display: swap;
}
@font-face {
  font-family: "Dotted";
  src: url("../../../../../../css/fonts/ar/Dotted.TTF");
  font-display: swap;
}
@font-face {
  font-family: "Quran";
  src: url("../../../../../../css/fonts/mushaf.ttf");
  font-display: swap;
}
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  z-index: 0;
  font: normal 14px "Sui", sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  outline: none;
  cursor: default;
  /*@include transition(all .1s ease);*/
}

a {
  cursor: pointer;
  color: inherit;
}

ul {
  list-style-type: none;
}

::selection {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.1);
}

::-moz-selection {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.1);
}

::placeholder {
  font: normal 15px "Sui", sans-serif;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.7);
}

:placeholder-shown {
  font: normal 15px "Sui", sans-serif;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.7);
}

:-ms-input-placeholder {
  font: normal 15px "Sui", sans-serif;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.7);
}

::-ms-input-placeholder {
  font: normal 15px "Sui", sans-serif;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.7);
}

body, #header, #footer {
  /*background:rgba(255,255,255,1) url(..\/../../../../../imgs/bg.webp) no-repeat center center fixed; @include background-size(cover);
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='..\/../../../../../imgs/bg.webp', sizingMethod='scale');
  -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='..\/../../../../../imgs/bg.webp', sizingMethod='scale')";*/ /*#96a9af*/
  /*background:#021b79; background:-webkit-linear-gradient(to right, #0575e6, #021b79); background:linear-gradient(to right, #0575e6, #021b79);*/
  /*background:linear-gradient(90deg,#607D8B,#546E7A,#78909C,#90A4AE,#B0BEC5);
  background: linear-gradient(90deg,#00BFFF,#87CEEB,#ADD8E6,#B0E0E6,#87CEFA);*/
  background: #FFFFFF;
  background: -webkit-linear-gradient(90deg, #00BFFF, #87CEEB, #ADD8E6, #B0BEC5, #90A4AE, #78909C, #546E7A);
  background: linear-gradient(90deg, #00BFFF, #87CEEB, #ADD8E6, #B0BEC5, #90A4AE, #78909C, #546E7A);
  background-size: 300% 300%;
  animation: gradientAnimation 10s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
#beta {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
}

#beta li {
  width: 100%;
  height: 100%; /*100vh*/
  text-align: center;
  font: normal 16px "Sui", sans-serif;
  line-height: 750px;
}

body {
  padding: 90px 0 150px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
  box-shadow: inset 0 100px 55px -100px rgba(0, 0, 0, 0.3); /*filter:blur(2px); -webkit-filter:blur(2px);*/
}

#top {
  position: relative;
  margin: 25px auto 10px;
  width: 1000px;
  height: 40px;
  -webkit-transition: margin 0.3s;
  -o-transition: margin 0.3s;
  -ms-transition: margin 0.3s;
  -moz-transition: margin 0.3s;
  transition: margin 0.3s;
}

a#logo {
  margin: 0;
  padding-left: 42px;
  height: 40px;
  float: left;
  font: normal 30px "Sui b", sans-serif;
  line-height: 38px;
  letter-spacing: -1px;
  background: url(..\/../../../../../imgs/ZAKBDD.svg) no-repeat left center/auto 38px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a#logo:hover {
  background: url(..\/../../../../../imgs/ZAKBDD_logo.svg) no-repeat left center/auto 38px;
}

a#title {
  margin: 0 25px 0 7px;
  height: 40px;
  float: left;
  font: normal 24px "Sui l", sans-serif;
  line-height: 38px;
}

#category {
  display: inline-block; /*block*/
  float: left;
  direction: rtl;
}

#category li {
  margin-right: 20px;
  height: 40px;
  display: inline-block;
  text-align: center;
  font: normal 18px "Arb sb", sans-serif;
  line-height: 45px;
  cursor: pointer;
  opacity: 0.5;
}

#category li:first-child {
  margin-right: 0;
}

#category li:last-child {
  margin-right: 20px;
}

#category li:hover, #category li.active {
  opacity: 1;
}

#sous-cat {
  margin: 0 auto 10px;
  width: 90%;
  display: flex;
}

#sous-cat li {
  margin: 0 5px;
  flex-grow: 1;
  text-align: center;
  font: normal 16px "Arb", sans-serif;
  line-height: 33px;
  cursor: pointer; /*opacity:0.5;*/
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}
#sous-cat li:hover, #sous-cat li.act {
  background: rgba(255, 255, 255, 0.1); /*opacity:1;*/
}

#sous-cat li.act {
  border: 1px solid rgba(255, 255, 255, 0.5);
  line-height: 31px;
}

#sous-cat-min {
  margin: 0 auto 10px;
  width: 60%;
  display: flex;
}

#sous-cat-min li {
  flex-grow: 1; /*max-width:130px;*/
  text-align: center;
  font: normal 14px "Arb", sans-serif;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-radius: 7px;
}
#sous-cat-min li:hover {
  background: rgba(255, 255, 255, 0.1);
}

ul#menu {
  margin: 12px 0;
  padding: 0;
  width: 23px;
  height: 16px;
  display: block;
  float: right;
  cursor: pointer;
}

ul#menu li {
  padding: 0;
  width: 100%;
  height: 2px;
  display: block;
  background-color: white;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

ul#menu li:nth-child(2) {
  margin: 5px 0;
}

/*#menu.is-active li:nth-child(1){opacity:0; transform:translateX(-100%);}
#menu.is-active li:nth-child(3){opacity:0; transform:translateX(100%);}*/
ul#menu.is-active li:nth-child(1) {
  -webkit-transform: translateY(7px) rotate(45deg);
  -o-transform: translateY(7px) rotate(45deg);
  -ms-transform: translateY(7px) rotate(45deg);
  -moz-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}

ul#menu.is-active li:nth-child(2) {
  opacity: 0;
}

ul#menu.is-active li:nth-child(3) {
  -webkit-transform: translateY(-7px) rotate(-45deg);
  -o-transform: translateY(-7px) rotate(-45deg);
  -ms-transform: translateY(-7px) rotate(-45deg);
  -moz-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

#tiles {
  margin: 10px 15px;
  padding: 1px;
  width: 18px;
  height: 18px;
  float: right;
  cursor: pointer;
  -webkit-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

#tiles.is-active {
  padding: 0;
  width: 20px;
  height: 20px;
}

#tiles li {
  width: 8px;
  height: 8px;
  display: block;
  float: left;
  background-color: white;
  cursor: pointer;
  -webkit-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

#tiles li:nth-child(1), #tiles li:nth-child(2) {
  margin-bottom: 1px;
}

#tiles li:nth-child(3), #tiles li:nth-child(4) {
  margin-top: 1px;
}

#tiles li:nth-child(1), #tiles li:nth-child(3) {
  margin-right: 1px;
}

#tiles li:nth-child(2), #tiles li:nth-child(4) {
  margin-left: 1px;
}

#tiles.is-active li {
  margin: 0;
  width: 10px;
  height: 10px;
}

#user {
  margin: 5px 0;
  width: 30px;
  height: 30px;
  float: right;
  cursor: pointer;
  background: url(..\/../../../../../about/user.svg) no-repeat center/auto 100%;
  -webkit-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

#user.is-active {
  background: url(..\/../../../../../about/user-lineal.svg) no-repeat center/auto 100%;
}

#notif {
  margin: 10px 15px;
  width: 20px;
  height: 20px;
  float: right;
  cursor: pointer;
  background: url(..\/../../../../../imgs/notification.svg) no-repeat center/auto 100%;
  -webkit-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

#notif.is-active {
  -webkit-transform: rotate(25deg);
  -o-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  transform: rotate(25deg);
}

#search {
  margin-right: -5px;
  float: right; /*background:rgba(0,0,0,.2);*/
}

#search input[type=text] {
  padding-left: 40px;
  width: 0;
  height: 40px;
  border: 0;
  font: normal 15px "Sui sb", sans-serif;
  line-height: 40px;
  cursor: pointer;
  background: url(..\/../../../../../imgs/search.svg) no-repeat 15px center/auto 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#search input[type=text]:hover {
  background: url(..\/../../../../../imgs/search.svg) no-repeat 10px center/auto 20px;
}

#list {
  position: absolute;
  top: 91px;
  right: calc((100vw - 1016px) / 2);
  z-index: 2 !important;
  border-radius: 10px;
  -webkit-transition: top 0.3s;
  -o-transition: top 0.3s;
  -ms-transition: top 0.3s;
  -moz-transition: top 0.3s;
  transition: top 0.3s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#inn-menu, #inn-user, #inn-notif {
  float: right;
  padding: 10px;
  width: 224px;
  height: 258px;
  overflow: hidden;
  display: none;
  background: rgba(255, 255, 255, 0.99);
  color: #000000;
  border-radius: 10px;
  animation: 0.5s down 1;
}

@keyframes down {
  from {
    opacity: 0;
    margin-top: -20px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}
#list .links {
  padding-bottom: 8px;
  display: flex;
  border-bottom: 1px solid #CCCCCC;
}

#list .links a {
  flex-grow: 1;
  text-decoration: none;
  text-align: center;
  font: normal 13px "Sui sb", sans-serif;
  line-height: 14px;
  color: #000000;
}
#list .links a:hover {
  color: #333333;
}

#list .date {
  margin: 25px 0;
  text-align: center;
  font: normal 40px "Sui sb", sans-serif;
  line-height: 40px;
  color: #000000;
}

#list .colors {
  display: inline-block;
  direction: rtl;
  text-align: center;
  font: normal 14px "Arb", sans-serif;
  line-height: 35px;
  color: #000000;
  border-top: 1px solid #CCCCCC; /*border-bottom:1px solid #CCCCCC;*/
}

#list .colors li {
  margin: 2px;
  width: 24px;
  height: 24px;
  float: left;
  border-radius: 50%;
  cursor: pointer;
}
#list .colors li:hover {
  margin: 1px;
  width: 26px;
  height: 26px;
}

.c1 {
  background: #0F4C81;
  background: linear-gradient(to right, #0F4C81, #0B7C99);
}

.c2 {
  background: #FF6F61;
  background: linear-gradient(to right, #FF6F61, #E84D6E);
}

.c3 {
  background: #5F4B8B;
  background: linear-gradient(to right, #5F4B8B, #5450A3);
}

.c4 {
  background: #88B04B;
  background: linear-gradient(to right, #88B04B, #C1C74C);
}

.c5 {
  background: #F7CAC9;
  background: linear-gradient(to right, #F7CAC9, #E0ABC2);
}

.c6 {
  background: #91A8D0;
  background: linear-gradient(to right, #91A8D0, #97CAE8);
}

.c7 {
  background: #964F4C;
  background: linear-gradient(to right, #964F4C, #AD5074);
}

.c8 {
  background: #AD5E99;
  background: linear-gradient(to right, #AD5E99, #B760C4);
}

.c9 {
  background: #009473;
  background: linear-gradient(to right, #009473, #09AB5A);
}

.c10 {
  background: #DD4124;
  background: linear-gradient(to right, #DD4124, #F51C1B);
}

.c11 {
  background: #D94F70;
  background: linear-gradient(to right, #D94F70, #F04AC4);
}

.c12 {
  background: #45B5AA;
  background: linear-gradient(to right, #45B5AA, #43CC98);
}

.c13 {
  background: #F0C05A;
  background: linear-gradient(to right, #F0C05A, #D99C48);
}

.c14 {
  background: #5A5B9F;
  background: linear-gradient(to right, #5A5B9F, #5E76B5);
}

.c15 {
  background: #9B1B30;
  background: linear-gradient(to right, #9B1B30, #B3157E);
}

.c16 {
  background: #000000;
  background: linear-gradient(to right, #000000, #332E30);
}

#list strong {
  display: block;
  text-align: center;
  font: normal 17px "Arb b", sans-serif;
  line-height: 25px;
  color: #000000;
}

#list b {
  margin: 5px 0;
  display: block;
  text-align: center;
  font: normal 15px "Arb sb", sans-serif;
  line-height: 30px;
  color: #333333;
}

#list i {
  margin-bottom: 15px;
  display: block;
  text-align: center;
  font: normal 13px "Sui l", sans-serif;
  line-height: 13px;
  color: rgba(0, 0, 0, 0.7);
}

#list em {
  position: absolute;
  top: 15px;
  right: 15px;
  margin: 0 0 15px 5px;
  padding: 0 7px 0 20px;
  border-radius: 10px;
  text-align: center;
  font: normal 12px "Sui l", sans-serif;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.05) url(..\/../../../../../imgs/star.svg) 5px center no-repeat;
  background-size: auto 60%;
}

#list p {
  margin: 15px 0;
  text-align: center;
  font: normal 14px "Arb", sans-serif;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.5);
}

#list img {
  margin: 5px auto;
  display: block;
  width: 90px;
  height: 90px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
#list img:hover {
  transform: scale(1.05);
}

#list button {
  margin: 0 -10px;
  padding-left: 60px;
  display: block;
  width: 244px;
  text-align: left;
  font: normal 14px "Sui", sans-serif;
  line-height: 38px;
  color: #000000;
  border: 0;
  cursor: pointer;
}

#list button.about {
  background: rgba(0, 0, 0, 0.05) url(..\/../../../../../imgs/about.svg) 25px center no-repeat;
  background-size: auto 50%;
}

#list button.settings {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.05) url(..\/../../../../../imgs/settings.svg) 25px center no-repeat;
  background-size: auto 50%;
}

#list button.logout {
  background: rgba(0, 0, 0, 0.05) url(..\/../../../../../imgs/logout.svg) 25px center no-repeat;
  background-size: auto 50%;
}

#list button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#list pre {
  position: absolute;
  bottom: 10px;
  font: normal 12px "Sui", sans-serif;
  line-height: 15px;
  color: #888888;
}

#list pre a {
  margin: 0;
  font: normal 11px "Sui sb", sans-serif;
  line-height: 15px;
  color: #888888;
}

#top button[name=signup] {
  margin: 1px 0 1px 10px;
  padding: 7px 0;
  width: 120px;
  height: 38px;
  float: right;
  border: 0;
  border-radius: 22px;
  font: normal 16px "Arb b", sans-serif;
  line-height: 20px;
  color: black;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

#top button[name=signup]:hover {
  background: rgb(255, 255, 255);
}

#login {
  margin: 5px 0;
  width: auto;
  height: 30px;
  float: right;
  overflow: hidden;
  border-radius: 20px;
}
#login * {
  float: left;
  border: 0;
  font: normal 15px "Sui sb", sans-serif;
  line-height: 20px;
  color: black;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
#login input {
  margin: 0;
  padding: 5px 0 5px 7px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  cursor: text;
}
#login input[name=usern] {
  margin-right: 1px;
  padding-left: 10px;
  width: 145px; /*150*/
  border-radius: 20px 0 0 20px;
}
#login input[name=pword] {
  width: 80px; /*90*/
}
#login input::placeholder {
  font: normal 13px "Arb", sans-serif;
  color: rgba(0, 0, 0, 0.7);
}
#login input:placeholder-shown {
  font: normal 13px "Arb", sans-serif;
  color: rgba(0, 0, 0, 0.7);
}
#login input:-ms-input-placeholder {
  font: normal 13px "Arb", sans-serif;
  color: rgba(0, 0, 0, 0.7);
}
#login input::-ms-input-placeholder {
  font: normal 13px "Arb", sans-serif;
  color: rgba(0, 0, 0, 0.7);
}
#login span {
  margin: 0 1px 0 0;
  padding: 0;
  height: 30px;
  cursor: pointer;
}
#login #hide {
  width: 20px;
  background: rgba(255, 255, 255, 0.2) url(..\/../../../../../imgs/eye-slash.svg) center no-repeat;
  background-size: 75% auto;
}
#login #forget {
  width: 20px;
  background: rgba(255, 255, 255, 0.3) url(..\/../../../../../imgs/forget.svg) center no-repeat;
  background-size: auto 35%;
}
#login #forget:hover {
  background: rgba(255, 255, 255, 0.9) url(..\/../../../../../imgs/forget.svg) center no-repeat;
  background-size: auto 35%;
}
#login button {
  cursor: pointer;
}
#login button[name=login] {
  margin: 0;
  padding: 5px 0;
  width: 55px;
  height: 30px;
  border-radius: 0 20px 20px 0;
  background: rgba(255, 255, 255, 0.9) url(..\/../../../../../imgs/login.webp) center no-repeat;
  background-size: auto 65%;
}
#login button[name=login]:hover {
  background: rgb(255, 255, 255) url(..\/../../../../../imgs/login.webp) center no-repeat;
  background-size: auto 65%;
}

.loginlive {
  animation: borderWave 3s infinite;
}

@keyframes borderWave {
  0% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 7px rgba(255, 255, 255, 0), 0 0 7px 1px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0), 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 15px 3px rgba(255, 255, 255, 0.3);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 7px rgba(255, 255, 255, 0), 0 0 7px 1px rgba(255, 255, 255, 0.1);
  }
}
ul.error {
  width: auto;
  float: right;
}
ul.error li {
  margin: 10px;
  width: 100%;
  height: 20px;
  float: left;
  direction: rtl;
  text-align: left;
  font: normal 14px "Arb", sans-serif;
  line-height: 20px;
  color: #B31227;
}
ul.error li.success {
  color: #09B38C;
}

#pages {
  margin: 24px auto 0;
  padding-top: 1px;
  width: 1008px; /*height:504px; height:378px;*/
  overflow: hidden;
  display: none; /**/ /*display:flex; flex-wrap:wrap; justify-content:space-between;*/
  animation: 0.3s up 1;
}

@keyframes up {
  from {
    margin: 3% auto 0;
  }
  to {
    margin: 0 auto;
  }
}
#pages li {
  position: relative;
  margin: 0 5px 10px 5px;
  padding: 7px;
  float: left;
  overflow: hidden;
  width: 120px;
  height: 120px; /*108px 108px*/
  animation: 2s opaci 1;
  border-radius: 10px;
  background-size: auto 37%;
  background-size: auto 37%, auto;
  -webkit-transition: background 0.05s ease-in-out;
  -o-transition: background 0.05s ease-in-out;
  -ms-transition: background 0.05s ease-in-out;
  -moz-transition: background 0.05s ease-in-out;
  transition: background 0.05s ease-in-out;
  /*box-sizing:border-box; flex-basis:120px;*/
}
#pages li:hover {
  margin: -1px 4px 9px 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-size: auto 40%;
  background-size: auto 40%, auto;
}
#pages li:active {
  width: 116px;
  height: 116px;
  margin: 1px 6px 11px 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  font: normal 14px "Sui l", sans-serif;
  line-height: 14px;
  /*transform-style:preserve-3d; transition: all 0.7s linear; transform: rotateY(180deg);*/
}

#pages li.long { /*flex-basis:264px;*/
  width: 264px;
  height: 120px;
  animation: 1.5s opaci 1;
}
#pages li.long:active {
  width: 260px;
  height: 116px;
} /*234px 108px/360px*/
/*#pages li.big {width:264px; height:264px; animation:1.0s opaci 1; &:active {width:260px; height:260px;}}
#pages li.small {width:45px; height:45px; animation:5.0s opaci 1; background-size:auto 65%;}*/
@keyframes opaci {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#pages li em {
  width: 100%;
  display: block;
  font: normal 14px "Sui l", sans-serif, sans-serif;
  line-height: 16px;
  z-index: 0;
}

#pages li em.ar {
  position: absolute;
  bottom: 7px;
  right: 10px;
  width: auto;
  text-align: right;
  font: normal 14px "Arb", sans-serif, sans-serif;
  line-height: 20px;
  z-index: 0;
}

#pages li em.lock {
  background: url(..\/../../../../../imgs/lock.png) center right no-repeat;
  background-size: auto 100%;
}

/*#pages li em {width:18px; height:18px; display:block; float:right; z-index:0; background:url(..\/../../../../../imgs/lock.svg) right center no-repeat; background-size:80%; opacity:.3;}
#pages li.right {float:right;}
#pages .square {width:504px; height:504px; float:left; background:green;}*/
.quran {
  background: #BC2F75 url(..\/../../../../../imgs/home/quran.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/quran.svg) center no-repeat, linear-gradient(45deg, #BC2F75, #D42AD4);
}
.quran:hover {
  background: url(..\/../../../../../imgs/home/quran.svg) center no-repeat, linear-gradient(-45deg, #BC2F75, #D42AD4);
}

.islam {
  background: #00B333 url(..\/../../../../../imgs/home/islam.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/islam.svg) center no-repeat, linear-gradient(45deg, #00B333, #0AC90A);
}
.islam:hover {
  background: url(..\/../../../../../imgs/home/islam.svg) center no-repeat, linear-gradient(-45deg, #00B333, #0AC90A);
}

.photos {
  background: #333333 url(..\/../../../../../imgs/home/photos.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/photos.svg) center no-repeat, linear-gradient(45deg, #333333, #4A4346);
}
.photos:hover {
  background: url(..\/../../../../../imgs/home/photos.svg) center no-repeat, linear-gradient(-45deg, #333333, #4A4346);
}

.videos {
  background: #FF3333 url(..\/../../../../../imgs/home/videos.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/videos.svg) center no-repeat, linear-gradient(45deg, #FF3333, #E82385);
}
.videos:hover {
  background: url(..\/../../../../../imgs/home/videos.svg) center no-repeat, linear-gradient(-45deg, #FF3333, #E82385);
}

.shop {
  background: #440099 url(..\/../../../../../imgs/home/shop.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/shop.svg) center no-repeat, linear-gradient(45deg, #440099, #2609B0);
}
.shop:hover {
  background: url(..\/../../../../../imgs/home/shop.svg) center no-repeat, linear-gradient(-45deg, #440099, #2609B0);
}

.route {
  background: #59403B url(..\/../../../../../imgs/home/route.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/route.svg) center no-repeat, linear-gradient(45deg, #59403B, #704544);
}
.route:hover {
  background: url(..\/../../../../../imgs/home/route.svg) center no-repeat, linear-gradient(-45deg, #59403B, #704544);
}

.cook {
  background: #E83317 url(..\/../../../../../imgs/home/cook.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/cook.svg) center no-repeat, linear-gradient(45deg, #E83317, #FF0D17);
}
.cook:hover {
  background: url(..\/../../../../../imgs/home/cook.svg) center no-repeat, linear-gradient(-45deg, #E83317, #FF0D17);
}

.edu {
  background: #6500E6 url(..\/../../../../../imgs/home/edu.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/edu.svg) center no-repeat, linear-gradient(45deg, #6500E6, #330DFC);
}
.edu:hover {
  background: url(..\/../../../../../imgs/home/edu.svg) center no-repeat, linear-gradient(-45deg, #6500E6, #330DFC);
}

.lol {
  background: #FF6526 url(..\/../../../../../imgs/home/lol.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/lol.svg) center no-repeat, linear-gradient(45deg, #FF6526, #E83417);
}
.lol:hover {
  background: url(..\/../../../../../imgs/home/lol.svg) center no-repeat, linear-gradient(-45deg, #FF6526, #E83417);
}

.music {
  background: #E6E200 url(..\/../../../../../imgs/home/music.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/music.svg) center no-repeat, linear-gradient(45deg, #E6E200, #FCE00D);
}
.music:hover {
  background: url(..\/../../../../../imgs/home/music.svg) center no-repeat, linear-gradient(-45deg, #E6E200, #FCE00D);
}

.culture {
  background: #0057E8 url(..\/../../../../../imgs/home/culture.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/culture.svg) center no-repeat, linear-gradient(45deg, #0057E8, #0DA9FF);
}
.culture:hover {
  background: url(..\/../../../../../imgs/home/culture.svg) center no-repeat, linear-gradient(-45deg, #0057E8, #0DA9FF);
}

.games {
  background: #17E6C7 url(..\/../../../../../imgs/home/games.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/games.svg) center no-repeat, linear-gradient(45deg, #17E6C7, #0DFC95);
}
.games:hover {
  background: url(..\/../../../../../imgs/home/games.svg) center no-repeat, linear-gradient(-45deg, #17E6C7, #0DFC95);
}

.quotes {
  background: #ED9653 url(..\/../../../../../imgs/home/quotes.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/quotes.svg) center no-repeat, linear-gradient(45deg, #ED9653, #D66B40);
}
.quotes:hover {
  background: url(..\/../../../../../imgs/home/quotes.svg) center no-repeat, linear-gradient(-45deg, #ED9653, #D66B40);
}

.news {
  background: #0BE649 url(..\/../../../../../imgs/home/news.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/news.svg) center no-repeat, linear-gradient(45deg, #0BE649, #00FC00);
}
.news:hover {
  background: url(..\/../../../../../imgs/home/news.svg) center no-repeat, linear-gradient(-45deg, #0BE649, #00FC00);
}

.ads {
  background: #0E8A75 url(..\/../../../../../imgs/home/ads.svg) center no-repeat;
  background: url(..\/../../../../../imgs/home/ads.svg) center no-repeat, linear-gradient(45deg, #0E8A75, #08A15C);
}
.ads:hover {
  background: url(..\/../../../../../imgs/home/ads.svg) center no-repeat, linear-gradient(-45deg, #0E8A75, #08A15C);
}

/*
.faceb {background:#3B5998 url(..\/../../../../../imgs/social/facebook.svg) 100% 100% no-repeat;} #475993
.instag {background:#FFFFFF url(..\/../../../../../imgs/social/instagram.svg) center center no-repeat;} #DD2A7B
.twitter {background:#08A0E9 url(..\/../../../../../imgs/social/twitter.svg) center center no-repeat;} #76a9ea
.gplus {background:#DD4B39 url(..\/../../../../../imgs/social/googleplus.svg) center center no-repeat;} #f34a38
*/
#signup, #reset-request {
  position: relative;
  top: 0;
  margin: 0 auto 10px;
  padding: 25px;
  width: 948px;
  height: 372px;
  overflow: hidden;
  display: none;
  z-index: 2;
  border-radius: 10px;
  animation: 0.25s opaci 1;
  background: rgba(255, 255, 255, 0.99);
}
#signup .signuptop, #reset-request .signuptop {
  width: 652px;
  display: inline-block; /*background:rgba(0,0,0,.2);*/
}
#signup img, #reset-request img {
  margin: 0;
  width: 70px;
  height: 70px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
#signup input[type=file], #reset-request input[type=file] {
  display: none;
}
#signup strong, #signup p, #reset-request strong, #reset-request p {
  width: 582px;
  float: right;
  direction: rtl;
  text-align: right; /*background:rgba(0,0,0,.05);*/
}
#signup strong, #reset-request strong {
  margin: 0 0 5px;
  font: normal 29px "Arb b", sans-serif;
  line-height: 35px;
  color: #0079B2;
}
#signup p, #reset-request p {
  margin: 0 0 10px;
  font: normal 18px "Arb sb", sans-serif;
  line-height: 30px;
  color: #000000;
}
#signup form, #reset-request form {
  margin: 0 auto;
  padding: 0;
  width: 652px; /*display:inline-block; background:rgba(0,0,0,.03);*/
}
#signup label, #reset-request label {
  margin: 0 0 10px 0;
  padding: 0;
  display: inline-block;
  float: right;
  direction: rtl;
  text-align: right;
  font: normal 12px "Arb sb", sans-serif;
  line-height: 27px;
  color: rgba(0, 0, 0, 0.9); /*background:rgba(0,0,0,.03);*/
}
#signup label.userimg, #reset-request label.userimg {
  margin: 0;
  float: left;
}
#signup input, #signup button, #reset-request input, #reset-request button {
  padding: 10px;
  display: block;
  border-radius: 7px;
  direction: ltr;
  font: normal 15px "Sui sb", sans-serif;
  line-height: 15px;
}
#signup input, #signup select, #reset-request input, #reset-request select {
  margin: 0;
  padding: 10px 0 10px 15px;
  width: 300px;
  display: block; /*float:left;*/
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  color: #000000;
  background: rgba(0, 0, 0, 0.05);
  cursor: text;
  /*&[name="pass1"], &[name="pass2"] {height:20px; font:normal 30px $Sui_sb; line-height:15px;}*/
  /*&[name="email-request"] {margin-top:30px;}*/
}
#signup input[name=fname], #signup input[name=uname], #signup input[name=pass1], #signup select[name=fname], #signup select[name=uname], #signup select[name=pass1], #reset-request input[name=fname], #reset-request input[name=uname], #reset-request input[name=pass1], #reset-request select[name=fname], #reset-request select[name=uname], #reset-request select[name=pass1] {
  margin: 0;
  width: 145px;
  border-radius: 0 7px 7px 0;
}
#signup input[name=lname], #signup input[name=phonenum], #signup select[name=lname], #signup select[name=phonenum], #reset-request input[name=lname], #reset-request input[name=phonenum], #reset-request select[name=lname], #reset-request select[name=phonenum] {
  margin: 0 1px 0 10px;
  width: 145px;
  border-radius: 7px 0 0 7px;
}
#signup input[name=email], #signup input[name=pass2], #signup select[name=email], #signup select[name=pass2], #reset-request input[name=email], #reset-request input[name=pass2], #reset-request select[name=email], #reset-request select[name=pass2] {
  margin: 0 1px 0 0;
  width: 145px;
  border-radius: 7px 0 0 7px;
}
#signup input[name=pass2], #signup select[name=pass2], #reset-request input[name=pass2], #reset-request select[name=pass2] {
  margin-left: 10px;
}
#signup input[name=phonenum], #signup select[name=phonenum], #reset-request input[name=phonenum], #reset-request select[name=phonenum] {
  margin: 0;
  padding-left: 0;
  width: 110px;
  border-radius: 0 7px 7px 0;
}
#signup input[name=phonecode], #signup select[name=phonecode], #reset-request input[name=phonecode], #reset-request select[name=phonecode] {
  margin: 27px 0 0 1px;
  padding: 10px 0;
  width: 50px;
  display: inline;
  float: right;
  border-radius: 0;
  text-align: center;
}
#signup input::placeholder, #signup select::placeholder, #reset-request input::placeholder, #reset-request select::placeholder {
  direction: ltr;
  color: rgba(0, 0, 0, 0.4);
}
#signup input:placeholder-shown, #signup select:placeholder-shown, #reset-request input:placeholder-shown, #reset-request select:placeholder-shown {
  direction: ltr;
  color: rgba(0, 0, 0, 0.4);
}
#signup input:-ms-input-placeholder, #signup select:-ms-input-placeholder, #reset-request input:-ms-input-placeholder, #reset-request select:-ms-input-placeholder {
  direction: ltr;
  color: rgba(0, 0, 0, 0.4);
}
#signup input::-ms-input-placeholder, #signup select::-ms-input-placeholder, #reset-request input::-ms-input-placeholder, #reset-request select::-ms-input-placeholder {
  direction: ltr;
  color: rgba(0, 0, 0, 0.4);
}
#signup select[name=countries], #reset-request select[name=countries] {
  padding: 5px 10px;
  width: 160px;
  height: 41px;
  border-radius: 7px 0 0 7px;
  font: normal 15px "Sui sb", sans-serif;
  line-height: 41px;
  cursor: pointer;
}
#signup option, #reset-request option {
  color: #000000;
  padding-left: 30px;
}
#signup option.ca, #reset-request option.ca {
  background: url(..\/../../../../../imgs/cancel.svg) left center no-repeat;
  background-size: 100% auto;
  color: blue;
}
#signup em, #signup a, #reset-request em, #reset-request a {
  display: inline-block;
  direction: rtl;
  text-align: right;
  font: normal 11px "Arb", sans-serif;
  line-height: 17px;
}
#signup em, #reset-request em {
  margin-top: 20px;
  padding: 5px 0;
  float: right;
  color: rgba(0, 0, 0, 0.4);
}
#signup a, #reset-request a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.5);
}
#signup button, #reset-request button {
  margin: 20px 5px 0 0;
  padding: 12px 10px;
  width: 35%;
  float: left;
  border: 0;
  font: normal 17px "Arb sb", sans-serif;
  line-height: 20px;
  cursor: pointer;
  background: #0079B2;
  background: -webkit-linear-gradient(to right, #0079B2, #0ABFC9);
  background: linear-gradient(to right, #0079B2, #0ABFC9);
}
#signup button:hover, #reset-request button:hover {
  background: #0ABFC9;
  background: -webkit-linear-gradient(to left, #0079B2, #0ABFC9);
  background: linear-gradient(to left, #0079B2, #0ABFC9);
}
#signup div.cancel, #reset-request div.cancel {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 25px;
  height: 25px;
  border-radius: 10px;
  background: url(..\/../../../../../imgs/cancel.svg) center no-repeat;
  background-size: 53% auto;
  cursor: pointer;
  opacity: 0.3;
}
#signup div.cancel:hover, #reset-request div.cancel:hover {
  opacity: 1;
}

#reset-request {
  height: auto;
}

#step1, #step2 {
  margin: 0 auto;
  display: block; /*background:rgba(0,0,0,.2);*/
} /*#step2 {display:none;}*/
label#datebirth, label#gender {
  margin: 10px 0;
  width: 320px;
  height: 35px;
  display: inline-block;
  float: right;
  line-height: 40px;
}

label#datebirth {
  margin-left: 10px;
}
label#datebirth select {
  margin-right: 1px;
  padding: 0 5px 0 10px;
  width: 70px;
  height: 40px;
  display: inline-block;
  float: left;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 7px 0 0 7px;
  font: normal 15px "Sui sb", sans-serif;
  line-height: 35px;
  color: #000000;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.05);
}
label#datebirth select#birthday {
  width: 53px;
  border-radius: 0 7px 7px 0;
}
label#datebirth select#birthmonth {
  width: 115px;
  border-radius: 0;
}
label#datebirth option {
  color: #000000;
}

label#gender label.male, label#gender label.female {
  margin: 0 0 0 30px;
  padding: 0;
  height: 35px;
  display: inline-block;
  float: left;
  font: normal 14px "Arb b", sans-serif;
  line-height: 35px;
  color: #000000;
  cursor: pointer;
}
label#gender input[name=gender] {
  margin: 9px 0 9px 7px;
  width: 17px;
  height: 17px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

ul.errors {
  margin: 0 auto;
  width: 100%;
  display: inline-block;
}
ul.errors li {
  margin-bottom: 5px;
  width: 100%;
  float: left;
  direction: rtl;
  text-align: center;
  font: normal 14px "Arb", sans-serif;
  line-height: 20px;
  color: #B31227;
}
ul.errors li.success {
  color: #09B38C;
}

#container {
  margin: 0 auto;
  width: 1000px;
  min-height: 500px;
  overflow: hidden; /*direction:rtl;*/
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#container h1 {
  margin: 0 auto 25px;
  width: 100%;
  display: inline-block;
  direction: rtl;
  text-align: center;
  font: normal 22px "Arb sb", sans-serif, sans-serif;
  line-height: 37px;
}

#container h1#slogan {
  margin: 10px auto;
  display: block;
  text-align: center;
  font: normal 65px "Quran";
  line-height: 90px;
  color: #FFFFFF; /*rgba(125,130,120,1)*/
}

#container h2 {
  margin: 15px auto;
  direction: rtl;
  text-align: center;
  font: normal 18px "Arb b", sans-serif, sans-serif;
  line-height: 25px;
}

#container p {
  margin: 15px auto;
  direction: rtl;
  font: normal 16px "Arb", sans-serif, sans-serif;
  line-height: 30px;
}

#container p#intro {
  margin: 0 auto 15px;
  padding: 5px 1%;
  width: 88%;
  border-radius: 10px;
  direction: rtl;
  text-align: center;
  font: normal 18px "Arb", sans-serif, sans-serif;
  line-height: 35px;
  background: rgba(0, 0, 0, 0.15);
}

#container b {
  font: normal 23px "Arb b", sans-serif, sans-serif;
  line-height: 37px;
}

#quran {
  margin: 10px auto;
  padding: 10px;
  width: 65%; /*max-width:100%;*/
  display: block;
  overflow: hidden;
  border-radius: 22px 22px 22px 0;
  background: rgba(255, 255, 255, 0.3);
}

#quran li {
  margin: 0 0 3px 3px;
  padding-right: 10px;
  min-height: 30px;
  float: right;
  border-radius: 18px;
  text-align: right;
  font: normal 25px "Quran", sans-serif;
  line-height: 30px;
  color: black;
}

#quran li:first-child {
  margin-right: 0;
}

#quran li:last-child {
  margin: 5px auto 0;
  padding: 0;
  width: 100%;
  min-height: 13px;
  text-align: left;
  font: normal 12px "Arb sb", sans-serif, sans-serif;
  line-height: 12px;
}

#quran li:hover {
  background: rgba(255, 255, 255, 0.3);
}

#quran li:last-child:hover {
  background: none;
}

#quran li em {
  margin: 3px 5px 3px 3px;
  padding: 0;
  width: 29px;
  height: 29px;
  display: inline-block; /*float:left;*/
  border-radius: 50%;
  text-align: center;
  font: normal 13px "Sui", sans-serif, sans-serif;
  line-height: 29px;
  color: black;
  background: rgb(255, 255, 255);
}

/* edu + download */
#guides {
  position: relative;
  margin-bottom: 30px;
  width: 100%;
  display: inline-block; /*background:rgba(0,0,0,.1);*/
}

#guides li {
  position: relative;
  margin: 20px 0 0 50px;
  padding-top: 230px;
  width: 160px;
  float: right;
  text-align: center;
  font: normal 13px "Arb sb", sans-serif, sans-serif;
  line-height: 21px;
  color: black;
}

#guides li:last-child, #guides li:nth-child(3), #guides li:nth-child(6), #guides li:nth-child(9), #guides li:nth-child(12),
#guides li:nth-child(15), #guides li:nth-child(18) {
  margin-left: 0;
}

#guides img {
  position: absolute;
  top: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 226px;
  display: block;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.15);
  background: url(..\/../../../../../imgs/loading.gif) center no-repeat;
  background-size: auto;
  transition: all 0.2s;
}

#guides li:hover > img {
  top: -10px; /*-37px*/
}

#guides a {
  /*position:absolute; top:196px; left:35px;*/
  margin: 5px auto 3px;
  padding: 0 15px;
  width: 60px;
  display: block;
  border-radius: 30px;
  text-align: right;
  font: normal 14px "Arb", sans-serif, sans-serif;
  line-height: 30px;
  color: #FFFFFF;
  background: #6500E6 url(..\/../../../../../imgs/download.svg) 13px center no-repeat;
  background-size: auto 45%;
  transition: all 0.15s;
}

#guides a:hover {
  padding: 0 20px;
  left: 30px;
}

#guides a.ads {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  background: transparent;
  transition: all 0.2s;
}

#guides a.ads:hover {
  position: absolute;
  padding: 0;
  left: 0;
  top: -10px;
  transition: all 0.2s;
}

#guides div.glass, #cours div.glass {
  position: absolute;
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  border-radius: 20px;
  z-index: 1;
  background: rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(4px);
}

#guides div.glass {
  top: 5px;
}

#guides div.glass span, #cours div.glass span {
  position: absolute;
  top: calc(50% - 48px);
  right: 0;
  width: 100%;
  height: 96px;
  text-align: center;
  font: normal 18px "Arb sb", sans-serif, sans-serif;
  line-height: 48px;
  color: black;
}

#guides div.glass em, #cours div.glass em {
  margin: 5px 5px;
  padding: 0 15px;
  width: auto;
  display: inline-block;
  border-radius: 19px;
  text-align: center;
  font: normal 17px "Arb sb", sans-serif, sans-serif;
  line-height: 38px;
  color: white;
  background: rgba(101, 0, 230, 0.9);
  cursor: pointer;
}

#guides div.glass em:hover, #cours div.glass em:hover {
  background: rgb(101, 0, 230);
}

ul#archive {
  margin: 20px 0 30px;
  padding: 5px 10px 0;
  width: calc(100% - 20px);
  display: inline-block;
  border-radius: 10px;
  background: rgba(51, 13, 252, 0.07);
}

ul#archive strong {
  margin: 0;
  display: block;
  text-align: right;
  font: normal 17px "Arb b", sans-serif, sans-serif;
  line-height: 40px;
  color: #330DFC;
}

ul#archive em {
  margin: 0;
  display: block;
  text-align: right;
  font: normal 16px "Arb", sans-serif, sans-serif;
  line-height: 25px;
  color: black;
}

ul#archive li {
  position: relative;
  margin: 10px 0;
  padding-right: 0;
  width: 50%;
  float: right;
  text-align: right;
  font: normal 14px "Arb", sans-serif, sans-serif;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.7); /*border-radius:10px; background:rgba(0,0,0,.1);*/
}

ul#archive img {
  margin: 0 0 0 10px;
  width: 100px;
  height: auto;
  display: block;
  float: right;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.15);
  background: url(..\/../../../../../imgs/loading.gif) center no-repeat;
  background-size: auto;
}

ul#archive a {
  position: absolute;
  top: 50px;
  right: 110px;
  margin: 0;
  padding: 0 12px;
  width: 55px;
  display: block;
  border-radius: 13px;
  text-align: right;
  font: normal 14px "Arb", sans-serif, sans-serif;
  line-height: 26px;
  color: #FFFFFF;
  background: #6500E6 url(..\/../../../../../imgs/download.svg) 10px center no-repeat;
  background-size: auto 45%;
} /*#archive a:hover {padding:0 20px; left:30px;}*/
ul#comment {
  margin-bottom: 11px;
  padding: 20px 30px 30px;
  width: 603px;
  float: right;
  border-radius: 0 0 10px 10px;
  text-align: right;
  font: normal 18px "Arb b", sans-serif;
  line-height: 25px;
  color: black;
  background: rgba(255, 255, 255, 0.5);
}

ul#comment form {
  margin-top: 15px;
  width: 100%;
  display: inline-block; /*background:rgba(0,0,0,.1);*/
}

ul#comment textarea {
  padding: 10px;
  width: 583px;
  height: auto;
  display: block;
  border: 0;
  border-radius: 10px 10px 0 0;
  font: normal 16px "Arb", sans-serif;
  line-height: 25px;
  color: black;
  cursor: text;
  background: rgba(255, 255, 255, 0.9);
}

ul#comment textarea::placeholder {
  text-align: right;
  font: normal 16px "Arb", sans-serif;
  line-height: 25px;
  color: rgba(0, 0, 0, 0.5);
}

ul#comment textarea:placeholder-shown {
  text-align: right;
  font: normal 16px "Arb", sans-serif;
  line-height: 25px;
  color: rgba(0, 0, 0, 0.5);
}

ul#comment textarea:-ms-input-placeholder {
  text-align: right;
  font: normal 16px "Arb", sans-serif;
  line-height: 25px;
  color: rgba(0, 0, 0, 0.5);
}

ul#comment textarea::-ms-input-placeholder {
  text-align: right;
  font: normal 16px "Arb", sans-serif;
  line-height: 25px;
  color: rgba(0, 0, 0, 0.5);
}

ul#comment span {
  margin-bottom: 7px;
  padding: 0;
  width: 603px;
  display: inline-block;
  border-radius: 0 0 10px 10px;
  background: rgba(255, 255, 255, 0.9);
}

ul#comment span img {
  margin: 10px;
  width: 30px;
  height: 30px;
  float: right;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  background: white;
}

ul#comment span i {
  margin-top: 10px;
  float: right;
  text-align: right;
  font: italic 14px "Arb", sans-serif;
  line-height: 30px;
  color: rgba(0, 0, 0, 0.7);
}

ul#comment input {
  margin: 0 10px 10px 0;
  padding: 5px 10px;
  float: right;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  font: normal 15px "Arb", sans-serif;
  line-height: 15px;
  color: black;
  cursor: text;
  background: rgba(255, 255, 255, 0.9);
}

ul#comment input::placeholder {
  text-align: right;
  font: normal 15px "Arb", sans-serif;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.5);
}

ul#comment input:placeholder-shown {
  text-align: right;
  font: normal 15px "Arb", sans-serif;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.5);
}

ul#comment input:-ms-input-placeholder {
  text-align: right;
  font: normal 15px "Arb", sans-serif;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.5);
}

ul#comment input::-ms-input-placeholder {
  text-align: right;
  font: normal 15px "Arb", sans-serif;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.5);
}

ul#comment input[name=useremail] {
  width: 268px;
  text-align: left;
}

ul#comment input[name=username] {
  width: 145px;
}

ul#comment button[type=submit] {
  margin: 0 0 10px 10px;
  padding: 10px 0;
  width: 110px; /*height:25px;*/
  float: left;
  border: 0;
  border-radius: 10px;
  font: normal 15px "Arb sb", sans-serif;
  line-height: 20px;
  color: white;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.7);
}

ul#comment button[type=submit]:hover {
  background: rgba(0, 0, 0, 0.9);
}

ul#comment p.msg {
  margin: 25px 0 15px;
  text-align: center;
  font: normal 14px "Arb", sans-serif;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.7);
}

ul#comment li {
  margin-top: 15px;
  padding: 10px 15px 10px 15px;
  border-radius: 10px;
  text-align: right;
  font: normal 16px "Arb", sans-serif;
  line-height: 30px;
  color: black;
  background: rgba(255, 255, 255, 0.7);
}

ul#comment li a {
  margin: 0 0 0 10px;
  width: auto;
  display: inline-block;
  text-align: right;
  font: normal 16px "Arb b", sans-serif;
  line-height: 25px;
  color: black;
}

ul#comment li p {
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  text-align: right;
  font: normal 16px "Arb", sans-serif;
  line-height: 30px;
  color: black;
}

ul#comment li p a {
  text-align: right;
  font: normal 16px "Arb", sans-serif;
  line-height: 30px;
  color: blue;
}

ul#comment span#likerep {
  width: auto;
  height: 25px;
  display: inline-block;
  float: left;
  background: transparent;
}

ul#comment li em {
  margin: 5px 12px 0 0;
  padding-left: 25px;
  width: auto;
  height: 25px;
  display: inline-block;
  float: left;
  text-align: left;
  font: normal 14px "Arb", sans-serif;
  line-height: 25px;
  color: rgb(0, 0, 0);
  opacity: 0.7;
  cursor: pointer;
}

ul#comment li em:hover {
  opacity: 1;
}

ul#comment li em.like {
  background: url(..\/../../../../../imgs/about/good-bl.svg) left top no-repeat;
  background-size: auto 82%;
}

ul#comment li em.like:active {
  background: url(..\/../../../../../imgs/about/good.svg) 1px 2px no-repeat;
  background-size: auto 18px;
}

ul#comment li em.reply {
  padding-left: 22px;
  background: url(..\/../../../../../imgs/about/reply.svg) left center no-repeat;
  background-size: auto 75%;
}

ul#comment li em.reply:active {
  background: url(..\/../../../../../imgs/about/reply.svg) left 4px no-repeat;
  background-size: auto 70%;
}

ul#comment ul.replies li {
  margin: 10px -10px -5px;
  background: rgba(0, 0, 0, 0.05);
}

#comments {
  margin-bottom: 10px;
  padding: 15px 25px;
  min-height: 110px;
  float: right;
  background: rgba(255, 255, 255, 0.5);
}

#comments h1 {
  margin: 0;
  text-align: right;
  font: normal 18px "Arb sb", sans-serif;
  line-height: 25px;
  color: black;
}

#comments p {
  margin: 20px 0;
  text-align: center;
  font: normal 14px "Arb", sans-serif;
  line-height: 15px;
  color: rgba(0, 0, 0, 0.5);
}

#comments.cook {
  width: 450px;
  border-radius: 0 10px 10px 0;
}

#nav {
  margin: 20px auto;
  width: 310px;
  height: 30px;
  display: block; /*float:right; background:rgba(0,0,0,.05);*/
}

#nav li {
  width: 30px;
  height: 30px;
  float: left;
  overflow: hidden;
  text-align: center;
  font: normal 14px "Sui", sans-serif;
  line-height: 30px;
  color: white;
  -webkit-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

#nav .prev, #nav .next {
  margin: 0 5px;
  width: 70px;
  border-radius: 7px;
  font: normal 17px "Sui b", sans-serif;
  line-height: 30px;
  color: black;
}

#nav .prev {
  padding-left: 20px;
  background: rgba(255, 255, 255, 0.7) url(..\/../../../../../imgs/prev1.svg) 10px center no-repeat;
  background-size: 15px auto;
}

#nav .prev:hover {
  background: rgba(255, 255, 255, 0.9) url(..\/../../../../../imgs/prev1.svg) 5px center no-repeat;
  background-size: 15px auto;
}

#nav .next {
  padding-right: 20px;
  background: rgba(255, 255, 255, 0.7) url(..\/../../../../../imgs/next1.svg) 65px center no-repeat;
  background-size: 15px auto;
}

#nav .next:hover {
  background: rgba(255, 255, 255, 0.9) url(..\/../../../../../imgs/next1.svg) 70px center no-repeat;
  background-size: 15px auto;
}

#nav .first, #nav .last, #nav .prev, #nav .next {
  cursor: pointer;
}

#nav .act {
  cursor: default;
  opacity: 0.1;
}

#nav .first, #nav .last {
  width: 30px;
}

#nav .first {
  background: url(..\/../../../../../imgs/first.svg) center no-repeat;
  background-size: 10px auto;
}

#nav .first:hover {
  background: url(..\/../../../../../imgs/first.svg) left center no-repeat;
  background-size: 10px auto;
}

#nav .last {
  background: url(..\/../../../../../imgs/last.svg) center no-repeat;
  background-size: 10px auto;
}

#nav .last:hover {
  background: url(..\/../../../../../imgs/last.svg) right center no-repeat;
  background-size: 10px auto;
}

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 2;
}

#socia {
  position: relative;
  margin: 0 auto;
  width: 204px;
  height: 45px;
  overflow: hidden;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  /*background:rgba(0,0,0,.2);*/
}
#socia li {
  margin: 7px 0;
  width: 34px;
  height: 31px;
  float: left;
  display: block;
  text-align: right;
  font: normal 16px "Arb sb", sans-serif;
  line-height: 20px;
  border-radius: 5px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
#socia li.tw {
  background: url(..\/../../../../../imgs/social/X.svg) center no-repeat;
  background-size: auto 50%;
}
#socia li.tw:hover {
  background-color: #000000;
}
#socia li.fb {
  background: url(..\/../../../../../imgs/social/facebook.svg) center no-repeat;
  background-size: auto 55%;
}
#socia li.fb:hover {
  background-color: #3B5998;
}
#socia li.ig {
  background: url(..\/../../../../../imgs/social/instagram.svg) center no-repeat;
  background-size: auto 55%;
}
#socia li.ig:hover {
  background-color: #E1306C;
}
#socia li.wh {
  background: url(..\/../../../../../imgs/social/whatsapp.svg) center no-repeat;
  background-size: auto 55%;
}
#socia li.wh:hover {
  background-color: #00e676;
}
#socia li.pn {
  background: url(..\/../../../../../imgs/social/pinterest.svg) center no-repeat;
  background-size: auto 55%;
}
#socia li.pn:hover {
  background-color: #BF1D1E;
}
#socia li.yt {
  background: url(..\/../../../../../imgs/social/youtube.svg) center no-repeat;
  background-size: auto 55%;
}
#socia li.yt:hover {
  background-color: #FF0000;
}
#socia li:last-child {
  margin: 10px 0 15px 0;
  width: 80px;
  cursor: default;
}

#thanks {
  margin: 0 auto;
  width: 270px;
  height: 40px;
  display: none;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  animation: 0.5s opaci 1;
}
#thanks li {
  margin: 0;
  width: 90px;
  float: right;
}
#thanks li a {
  width: 100%;
  display: inline-block;
  text-align: center;
  font: normal 13px "Arb", sans-serif;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.5);
}
#thanks li a:hover {
  color: rgb(255, 255, 255);
}

#scroll {
  position: absolute;
  right: 15px;
  bottom: 5px;
  width: 24px;
  height: 35px;
  cursor: pointer;
  background: url(..\/../../../../../imgs/scroll-bottom.svg) top center no-repeat;
  background-size: auto 30px;
  opacity: 0.3;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
#scroll:hover {
  opacity: 1;
}

#result {
  position: absolute;
  top: 90px;
  left: calc((100vw - 1016px) / 2);
  width: 1000px;
  max-height: 422px;
  overflow: hidden;
  z-index: 2;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.99);
}

#result strong {
  margin: 20px auto 10px;
  display: block;
  text-align: center;
  font: normal 20px "Sui", sans-serif;
  line-height: 20px;
  color: #000000;
}

#result h2 {
  margin-bottom: 10px;
  text-align: center;
  font: normal 14px "Sui", sans-serif;
  line-height: 20px;
  color: #000000;
}

#result h3 {
  text-align: left;
  font: normal 18px "Sui sb", sans-serif;
  line-height: 18px;
  color: #000000;
}

#result p {
  margin: 10px 0 5px;
  text-align: left;
  font: normal 15px "Sui", sans-serif;
  line-height: 25px;
  color: gray;
}

#result i {
  text-align: left;
  font: italic 15px "Sui", sans-serif;
  line-height: 15px;
  color: #0055CC;
}

.res {
  margin: 15px 15px 0;
  padding: 10px;
  width: 450px;
  display: block;
  float: left;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.03);
}
.res:hover {
  background: rgba(0, 0, 0, 0.07);
}

.res, .res * {
  cursor: pointer;
}

.res:last-child {
  margin-bottom: 15px;
}

m {
  margin: 0 -3px;
  padding: 0 3px;
  background-color: rgba(234, 242, 5, 0.5);
  font: inherit;
  line-height: inherit;
  color: inherit;
}

ads {
  position: relative;
  float: right;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1) url(..\/../../../../../imgs/home/ads.svg) center no-repeat;
  background-size: auto 30%;
}

ads img {
  margin: 0 auto;
  width: auto;
  height: 100%;
  display: block;
  cursor: pointer;
}

ads em.ads {
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px;
  border-radius: 0 0 10px 0;
  text-align: left;
  font: normal 12px "Sui", sans-serif;
  line-height: 12px;
  color: white;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
ads em.ads:hover {
  background: rgba(0, 0, 0, 0.3);
}

ads:hover > em.ads::before {
  content: "ZAKBDD ";
}

ads:hover > em.ads::after {
  content: "s";
}

ads em.close {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 0 0 0 7px;
  cursor: pointer;
  background: url(..\/../../../../../imgs/close.svg) center no-repeat;
  background-size: auto 35%;
  opacity: 0.5;
}

ads:hover > em.close {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

ads em.close:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

#ad-videos {
  margin: 0;
  width: 230px;
  height: 490px;
  background-size: 35% auto;
}

#ad-edu-1 {
  margin: 0 0 6px;
  width: 250px; /*130px*/
  height: 500px; /*537px*/
  background-size: 35% auto;
}

#ad-edu-2 {
  margin: 30px 0 0;
  width: 660px;
  height: 130px;
  background-size: auto 55%;
}

/*#ad-edu-3 {margin:0 0 20px; width:100%; height:150px; background-size:auto 50%;}*/
#ad-edu-3, #ad-edu-4 {
  margin: 0;
  padding: 0;
  width: 150px;
  height: 700px;
  background-size: 55% auto;
}

#ad-download-3 {
  margin: 0 auto;
  padding: 0;
  width: 620px;
  height: 200px;
  background-size: 15% auto;
}

#ad-culture-1, #ad-culture-2 {
  margin: 0 0 20px 0;
  padding: 0;
  width: 490px;
  height: 390px;
  background-size: 23% auto;
}

#ad-culture-2 {
  margin: 0 20px 0 0;
}

#ad-article-1, #ad-article-2 {
  margin-bottom: 11px;
  width: 326px;
  height: 326px;
  background-size: auto 30%;
}

#ad-article {
  margin: 10px 0 0;
  width: 613px;
  height: 120px;
  background-size: auto 55%;
}

#ad-lol-1, #ad-lol-2 {
  margin-bottom: 15px;
  width: 335px;
  height: 390px;
  background-size: auto 25%;
}

#ad-route {
  margin: 15px 0 0;
  width: 1000px;
  height: 150px;
  background-size: auto 50%;
}

#ad-cooking-1 {
  margin: 15px 0 0;
  width: 662px;
  height: 150px;
  background-size: auto 50%;
}

#ad-cooking-1 {
  margin-top: 2px;
}

#ad-cooking-2 {
  margin: 15px 0 0;
  width: 100%;
  height: 256px;
  background-size: auto 30%;
}

#ad-shopping-1, #ad-shopping-2 {
  margin: 0 0 12px;
  width: 100%;
  height: 150px;
  background-size: auto 50%;
}

#ad-orders-1, #ad-orders-2 {
  margin: 15px 0 0;
  width: 100%; /*260px*/
  height: 400px;
  background-size: auto 25%;
}

#ad-games-1, #ad-games-2 {
  margin-bottom: 15px;
  width: 300px;
  height: 300px;
  background-size: auto 30%;
}

#ad-article-2, #ad-shopping-2, #ad-games-2 {
  margin-bottom: 0;
}

@media (max-width: 1008px) {
  body {
    padding: 130px 0 150px;
  }
  #top {
    width: 496px;
  }
  #category {
    width: 100%;
    display: flex;
  }
  #category li {
    flex-grow: 1;
  }
  #pages {
    width: 504px; /*height:1008px; height:756px;*/
  }
  #pages li, #pages li.long {
    width: 102px;
    height: 102px;
  }
  #pages li:active, #pages li.long:active {
    width: 98px;
    height: 98px;
  }
  #signup, #reset-request {
    padding: 15px;
    width: 464px;
    height: auto;
  }
  #signup form, #reset-request form {
    width: 311px;
  }
  #signup input, #reset-request input {
    margin-right: 0;
  }
  #signup input[name=phonenum], #reset-request input[name=phonenum] {
    margin-right: 0;
  }
  div#datebirth {
    margin-left: 0;
  }
  #container {
    width: 496px;
  }
  #comments {
    width: 466px;
  }
}
@media (max-width: 430px) {
  body {
    padding: 110px 0 130px;
  }
  #top {
    width: 340px;
  }
  #category {
    width: 100%; /*display:flex; float:none;*/
  }
  #category li {
    flex-grow: 1;
    margin-right: 0;
    font: normal 16px "Arb sb", sans-serif;
    line-height: 40px;
  }
  #category li:last-child {
    margin-right: 0;
  }
  #sous-cat {
    width: 100%;
  }
  #sous-cat-min {
    width: 90%;
  }
  #tiles, #notif {
    margin: 10px;
  }
  /*#search {margin-right:5px;}*/
  #top button[name=signup] {
    margin-left: 0;
    width: 110px;
  }
  a#logo {
    padding-left: 40px;
    font: normal 28px "Sui b", sans-serif;
    background-size: auto 35px;
  }
  a#logo:hover {
    background-size: auto 35px;
  }
  a#title {
    display: none;
    font: normal 23px "Sui l", sans-serif;
    line-height: 38px;
  }
  #list {
    top: 110px;
    right: calc((100vw - 340px) / 2);
  }
  #top button[name=signup] {
    margin: 3px 0 3px 10px;
    width: 130px;
    height: 34px;
    border-radius: 20px;
  }
  #login {
    margin-bottom: 7px;
  }
  #pages {
    width: 348px;
  }
  #pages li, #pages li.long {
    width: 92px;
    height: 92px;
  }
  #pages li:active, #pages li.long:active {
    width: 88px;
    height: 88px;
  }
  #pages li.quran, #pages li.edu, #pages li.islam, #pages li.shop, #pages li.culture, #pages li.route {
    width: 208px;
    height: 92px;
  }
  #pages li.quran:active, #pages li.edu:active, #pages li.islam:active, #pages li.shop:active, #pages li.culture:active, #pages li.route:active {
    width: 204px;
    height: 88px;
  }
  #signup, #reset-request {
    width: 310px;
  }
  #signup .signuptop, #reset-request .signuptop {
    width: 310px;
  }
  #signup strong, #signup p, #reset-request strong, #reset-request p {
    width: 240px;
  }
  #signup strong, #reset-request strong {
    font: normal 27px "Arb b", sans-serif;
    line-height: 40px;
  }
  #signup p, #reset-request p {
    font: normal 17px "Arb sb", sans-serif;
    line-height: 20px;
  }
  #signup input[name=fname], #signup input[name=lname], #signup input[name=uname], #signup input[name=email], #signup input[name=pass1], #signup input[name=pass2], #reset-request input[name=fname], #reset-request input[name=lname], #reset-request input[name=uname], #reset-request input[name=email], #reset-request input[name=pass1], #reset-request input[name=pass2] {
    width: 140px;
  }
  #signup input[name=phonenum], #reset-request input[name=phonenum] {
    width: 105px;
  }
  #signup input[name=lname], #signup input[name=pass2], #reset-request input[name=lname], #reset-request input[name=pass2] {
    margin-left: 0;
  }
  #signup select[name=countries], #reset-request select[name=countries] {
    width: 155px;
  }
  #signup em, #reset-request em {
    margin-top: 15px;
  }
  #signup button, #reset-request button {
    margin: 10px 0 0 0;
    width: 100%;
  }
  #signup div.cancel, #reset-request div.cancel {
    display: none;
  }
  label#datebirth, label#gender {
    width: 310px;
  }
  #container {
    width: 340px;
  }
  #container p#intro {
    padding: 10px 5%;
    width: 90%;
  }
  #quran {
    width: 90%;
  }
  #guides li {
    margin: 30px 0 0 30px;
    padding-top: 202px;
    width: 140px;
  }
  #guides li:nth-child(3), #guides li:nth-child(9), #guides li:nth-child(15) {
    margin-left: 30px;
  }
  #guides li:nth-child(2), #guides li:nth-child(4), #guides li:nth-child(6), #guides li:nth-child(8), #guides li:nth-child(10),
  #guides li:nth-child(12), #guides li:nth-child(14), #guides li:nth-child(16) {
    margin-left: 0;
  }
  #guides img {
    height: 198px;
  }
  #guides a {
    top: 168px;
    left: 25px;
  }
  #guides a:hover {
    left: 20px;
  }
  #guides a.ads {
    top: 0;
    left: 0;
  }
  #guides a.ads:hover {
    left: 0;
  }
  #guides div.glass span, #cours div.glass span {
    font: normal 17px "Arb sb", sans-serif, sans-serif;
    line-height: 48px;
  }
  #guides div.glass em, #cours div.glass em {
    margin: 3px 4px;
    padding: 0 12px;
    border-radius: 17px;
    font: normal 16px "Arb sb", sans-serif, sans-serif;
    line-height: 34px;
  }
  ul#archive li {
    width: 100%;
  }
  ul#archive img {
    width: 85px;
  }
  ul#archive a {
    right: 95px;
  }
  ul#comment {
    padding: 15px;
    width: 310px;
  }
  ul#comment textarea {
    width: 290px;
  }
  ul#comment span {
    width: 310px;
  }
  ul#comment span img, ul#comment span i {
    margin-top: 5px;
  }
  ul#comment input[name=useremail] {
    margin: 0 10px 10px 0;
    width: 270px;
  }
  ul#comment input[name=username] {
    margin: 0 10px 10px 0;
    width: 150px;
  }
  ul#comment p.msg {
    margin: 25px 0 35px;
  }
  #comments.cook {
    width: 290px;
    border-radius: 10px;
  }
  #result {
    top: 105px;
    left: calc((100vw - 340px) / 2);
    width: 340px;
  }
  .res {
    margin: 0 15px 10px;
    width: 290px;
  }
  /*ADS*/
  #ad-videos {
    margin-top: 300px;
    margin-bottom: 15px;
    width: 340px;
    height: 120px;
    background-size: 15% auto;
  }
  #ad-edu-1 {
    width: 340px;
    height: 200px;
    background-size: auto 50%;
  }
  #ad-edu-2 {
    margin: 15px 0 0;
    width: 310px;
    height: 310px;
    background-size: auto 35%;
  }
  /*#ad-edu-3 {height:340px; background-size:auto 30%;}*/
  #ad-edu-3, #ad-edu-4 {
    width: 340px;
    height: 250px; /*130px*/
    background-size: auto 30%;
  }
  #ad-download-3 {
    width: 310px;
    height: 310px;
    background-size: auto 30%;
  }
  #ad-culture-1, #ad-culture-2 {
    width: 340px;
    height: 340px;
    background-size: 30% auto;
  }
  #ad-article-1, #ad-article-2 {
    margin-bottom: 11px;
    width: 340px;
    height: 340px;
    background-size: auto 30%;
  }
  #ad-article {
    margin: 10px 0 0;
    width: 310px;
    height: 310px;
    background-size: auto 30%;
  }
  #ad-lol-1, #ad-lol-2 {
    width: 340px;
    height: 340px;
    background-size: auto 30%;
  }
  #ad-route {
    margin: 15px 0 0;
    width: 340px;
    height: 340px;
    background-size: auto 30%;
  }
  #ad-cooking-1, #ad-cooking-2 {
    margin: 15px 0 0;
    width: 310px;
    height: 310px;
    background-size: auto 30%;
  }
  #ad-shopping-1, #ad-shopping-2 {
    width: 340px;
    height: 340px;
    background-size: auto 30%;
  }
  #ad-orders-1, #ad-orders-2 {
    height: 310px;
  }
  #ad-games-1, #ad-games-2 {
    width: 340px;
    height: 340px;
  }
}

/*# sourceMappingURL=style.css.map */