/*
@File: Sinmun Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************

** - Default CSS
** - Header CSS
** - Default News CSS
** - New News CSS
** - Popular News CSS
** - Technology News CSS
** - International News CSS
** - Video News CSS
** - Hot News CSS
** - Gallery News CSS
** - Blog Home News CSS
** - Featured News CSS
** - ALL News CSS
** - More News CSS
** - Page Title CSS
** - ALL Category News CSS
** - Pagination CSS
** - Sidebar CSS
** - News Details CSS
** - Instagram CSS
** - Coming Soon CSS
** - 404 Error CSS
** - Login CSS
** - Sign Up CSS
** - Author CSS
** - Contact CSS
** - Footer CSS
** - Go Top CSS
*/
/*================================================
Default CSS
=================================================*/
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&family=Open+Sans:wght@300;400;500;600;700;800&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i&display=swap");
@import url("https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900&display=swap");
body {
  padding: 0;
  margin: 0;
  font-family: "Cairo", sans-serif;
  font-size: 17px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: "Cairo", sans-serif;
}

a {
  display: block;
  text-decoration: none;
  transition: 0.5s;
}
a:hover, a:focus {
  text-decoration: none;
  color: green;
}

.ptb-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pt-40 {
  padding-top: 40px;
}

img {
  max-width: 100%;
}

p {
  color: #505050;
  margin-bottom: 15px;
  line-height: 1.8;
}
p:last-child {
  margin-bottom: 0;
}

.d-table {
  width: 100%;
  height: 100%;
}
.d-table-cell {
  vertical-align: middle;
}

/*section-title*/
.section-title {
  position: relative;
  margin-bottom: 30px;
}
.section-title h2 {
  margin-bottom: 0;
  font-size: 25px;
  border-left: 3px solid green;
  padding-left: 9px;
}
.section-title .view-more {
  color: #8a8a8a;
  font-weight: 600;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.section-title .view-more:hover, .section-title .view-more:focus {
  color: green;
}

/*btn btn-primary*/
.btn-primary {
  color: #ffffff;
  background-color: green;
  box-shadow: unset;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: #ffffff;
  background: #232323;
  box-shadow: unset;
}
.btn-primary.focus, .btn-primary:focus {
  box-shadow: unset;
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: unset;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary .show > .btn-primary.dropdown-toggle {
  color: #ffffff;
  background: #232323;
  box-shadow: unset;
}
.btn-primary.disabled, .btn-primary:disabled {
  color: #ffffff;
  background-color: green;
  box-shadow: unset;
  opacity: 1;
}
.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary:disabled:hover, .btn-primary:disabled:focus {
  background: #232323;
  box-shadow: unset;
}

.btn {
  font-weight: 600;
  font-size: 13px;
  border: none;
  padding: 15px 25px;
  position: relative;
  border-radius: 4px;
  z-index: 1;
  text-transform: uppercase;
  transition: 0.5s;
}

/*form-control*/
.form-control {
  height: 50px;
  padding: 15px;
  border-radius: 0;
  border-color: #eeeeee !important;
  font-size: 15px;
  padding-left: 15px;
  box-shadow: unset !important;
}

/*================================================
Header CSS
=================================================*/
.header-area {
  padding-bottom: 25px;
}

.top-header {
  background-color: #f5f6fa;
}
.top-header .city-temperature {
  display: inline-block;
  padding-right: 15px;
  margin-right: 15px;
  border-right: 1px solid #fff;
}
.top-header .city-temperature i {
  color: #ffaf31;
  margin-right: 3px;
}
.top-header .city-temperature span {
  color: #8a8a8a;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .top-header .city-temperature span {
        color: #8a8a8a;
        font-size: 7px;
    }
}
.top-header .city-temperature b {
  color: #8a8a8a;
  font-weight: 500;
}
.top-header .top-nav {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: inline-block;
}
.top-header .top-nav li {
  display: inline-block;
  margin-right: 15px;
}
.top-header .top-nav li a {
  color: #8a8a8a;
}
.top-header .top-nav li a:hover, .top-header .top-nav li a:focus {
  color: green;
}
.top-header .top-nav li:last-child {
  margin-right: 0;
}
.top-header .top-social {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  align-items: center;
}
.top-header .top-social li {
  display: inline-block;
  margin-right: 7px;
}
.top-header .top-social li a {
  color: #8a8a8a;
}
.top-header .top-social li a:hover, .top-header .top-social li a:focus {
  color: green;
  transform: translateY(-5px);
}
.top-header .top-social li:last-child {
  margin-right: 0;
}
.top-header .header-date {
  display: inline-block;
  margin-left: 20px;
  color: #ffffff;
  background-color: green;
  padding: 12px 15px;
  font-weight: 600;
  font-size: 13px;
}
.top-header .header-date i {
  margin-right: 3px;
}

.sinmun-mobile-nav {
  display: none;
}
.sinmun-mobile-nav.mean-container .mean-nav ul li a.active {
  color: green;
}

.sinmun-nav {
  background: transparent;
  padding-top: 15px;
  font-family: "Cairo", sans-serif;
    max-width: 87vw;
}
.sinmun-nav nav {
  padding: 5px 0;
}
.sinmun-nav nav ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.sinmun-nav nav .navbar-nav {
  /*margin-left: auto;*/
  margin-right: auto;
}
.sinmun-nav nav .navbar-nav .nav-item {
  position: relative;
  padding: 15px 0;
}
.sinmun-nav nav .navbar-nav .nav-item a {
  font-weight: 700;
  font-size: 14px;
  color: #232323;
  text-transform: uppercase;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 8px;
  margin-right: 8px;
}
.sinmun-nav nav .navbar-nav .nav-item a:hover, .sinmun-nav nav .navbar-nav .nav-item a:focus, .sinmun-nav nav .navbar-nav .nav-item a.active {
  color: green;
}
.sinmun-nav nav .navbar-nav .nav-item:hover a {
  color: green;
}
.sinmun-nav nav .navbar-nav .nav-item .dropdown-menu {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  position: absolute;
  border: none;
  top: 80px;
  left: 0;
  width: 250px;
  z-index: 99;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  padding-top: 20px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 20px;
}
.sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li {
  position: relative;
  padding: 0;
}
.sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li a {
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 9px 15px;
  margin: 0;
  display: block;
  color: #232323;
}
.sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover, .sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li a:focus, .sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li a.active {
  color: green;
}
.sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  position: absolute;
  left: 220px;
  top: 0;
  opacity: 0 !important;
  visibility: hidden !important;
}
.sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  color: #232323;
  text-transform: capitalize;
}
.sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
  color: green;
}
.sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  top: -20px !important;
}
.sinmun-nav nav .navbar-nav .nav-item .dropdown-menu li:hover a {
  color: green;
}
.sinmun-nav nav .navbar-nav .nav-item:last-child .dropdown-menu li .dropdown-menu {
  left: auto;
  right: 245px;
}
.sinmun-nav nav .navbar-nav .nav-item:hover ul {
  opacity: 1;
  visibility: visible;
  top: 100%;
}
.sinmun-nav nav .others-options a {
  color: #232323;
  margin-right: 10px;
  font-size: 20px;
}
.sinmun-nav nav .others-options a:hover {
  color: green;
}
.sinmun-nav nav .others-options .nav-search {
  border-left: 1px solid #dcdcdc;
  padding-left: 15px;
}
.sinmun-nav nav .others-options .nav-search .nav-search-button {
  cursor: pointer;
  font-size: 20px;
}
.sinmun-nav nav .others-options .nav-search .nav-search-button i {
  cursor: pointer;
}
.sinmun-nav nav .others-options .nav-search form {
  width: 72%;
  height: auto;
  position: absolute;
  right: 0;
  top: 50%;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  background-color: #ffffff;
  transform: translateY(-50%);
}
.sinmun-nav nav .others-options .nav-search form.active {
  visibility: visible;
  opacity: 1;
}
.sinmun-nav nav .others-options .nav-search .nav-search-close-button {
  display: block;
  position: absolute;
  right: 20px;
  line-height: normal;
  color: #70798b;
  top: 10px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  outline: 0;
}
.sinmun-nav nav .others-options .nav-search .nav-search-inner input {
  height: 50px;
  width: 100%;
  padding: 15px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #70798b;
  outline: none;
  background-color: transparent;
  transition: 0.5s;
  border: 1px solid #f2f2f2;
}
.sinmun-nav.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  z-index: 999;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  background-color: #ffffff !important;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
    max-width: 99vw;
}
.logo-color{
    filter: grayscale(1) brightness(0) invert(1);
}
.logo-color2 {
    filter: none;
}
.mean-bar .mean-nav .others-options {
  position: absolute;
  right: 60px;
  top: 8px;
}
.mean-bar .mean-nav .others-options a {
  color: #232323;
  margin-right: 7px;
  font-size: 17px;
}
.mean-bar .mean-nav .others-options a:hover {
  color: green;
}
.mean-bar .mean-nav .others-options .nav-search .nav-search-button {
  cursor: pointer;
  font-size: 17px;
}
.mean-bar .mean-nav .others-options .nav-search .nav-search-button i {
  cursor: pointer;
}
.mean-bar .mean-nav .others-options .nav-search form {
  width: 230px;
  height: auto;
  position: absolute;
  right: 0;
  top: 48px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  background-color: #ffffff;
}
.mean-bar .mean-nav .others-options .nav-search form.active {
  visibility: visible;
  opacity: 1;
}
.mean-bar .mean-nav .others-options .nav-search .nav-search-close-button {
  display: block;
  position: absolute;
  right: 15px;
  line-height: normal;
  color: #70798b;
  top: 14px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  outline: 0;
}
.mean-bar .mean-nav .others-options .nav-search .nav-search-inner input {
  height: 35px;
  width: 86%;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 400;
  color: #70798b;
  outline: none;
  background-color: transparent;
  transition: 0.5s;
  border: 1px solid #f2f2f2;
}

.breaking-news-content {
  background-color: #f5f6fa;
  padding: 15px 15px;
  margin-top: 15px;
}
.breaking-news-content .breaking-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: green;
  margin-bottom: 0;
  padding-right: 8px;
  float: left;
}
.breaking-news-content .breaking-news-slides {
  width: 80%;
  float: left;
  top: -1px;
}
.breaking-news-content .breaking-news-slides .owl-nav {
  margin-top: 0;
  line-height: 0.01;
  position: absolute;
  right: -125px;
  top: -8px;
}
.breaking-news-content .breaking-news-slides .owl-nav [class*=owl-] {
  width: 24px;
  height: 24px;
  background: #e1e1e1 !important;
  color: #232323 !important;
  line-height: 18px !important;
  margin: 5px 2px 0;
  outline: 0;
  font-size: 16px !important;
  transition: 0.5s;
  border-radius: 2px;
}
.breaking-news-content .breaking-news-slides .owl-nav [class*=owl-]:hover, .breaking-news-content .breaking-news-slides .owl-nav [class*=owl-]:focus {
  color: #ffffff !important;
  background-color: green !important;
}
.breaking-news-content .single-breaking-news p {
  line-height: initial;
  font-size: 14px;
}
.breaking-news-content .single-breaking-news p a {
  color: #000;
}

/*================================================
Default News CSS
=================================================*/
.default-news-area {
  background-color: #f5f5f5;
}
.default-news-area.bg-color-none {
  background-color: transparent;
}

.single-default-news {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
.single-default-news::before {
  opacity: 0.7;
  background-image: linear-gradient(transparent, #111), linear-gradient(transparent, #111);
  content: "";
  height: 70%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.single-default-news img {
  transition: all 1.5s ease-out;
}
.single-default-news .img-circle {
  border-radius: 50%;
}
.single-default-news .img-responsive,
.single-default-news .thumbnail > img,
.single-default-news .thumbnail a > img,
.single-default-news .carousel-inner > .item > img,
.single-default-news .carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
}
.single-default-news .news-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 30px;
  z-index: 2;
}
.single-default-news .news-content ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.single-default-news .news-content ul li {
  display: inline-block;
  margin-right: 15px;
  color: #ffffff;
  font-weight: 500;
}
.single-default-news .news-content ul li a {
  display: inline-block;
  color: #ffffff;
}
.single-default-news .news-content ul li a:hover, .single-default-news .news-content ul li a:focus {
  color: green;
}
.single-default-news .news-content ul li i {
  margin-right: 3px;
}
.single-default-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-default-news .news-content h3 {
  font-size: 25px;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 15px;
}
.single-default-news .news-content h3 a {
  color: #ffffff;
}
.single-default-news .tags {
  top: 0;
  left: 25px;
  position: absolute;
  transition: 0.5s;
}
.single-default-news .tags a {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 5px 15px;
  background-color: green;
}
.single-default-news .video-btn {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
  top: 35%;
  text-align: center;
}
.single-default-news .video-btn a {
  width: 65px;
  height: 65px;
  display: inline-block;
  color: #232323;
  border-radius: 50%;
  line-height: 65px;
  position: relative;
  font-size: 25px;

}
.single-default-news .video-btn a::after {
  z-index: -1;
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
  width: 65px;
  height: 65px;
  animation: ripple 1.6s ease-out infinite;
  opacity: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.single-default-news .video-btn a:hover, .single-default-news .video-btn a:focus {

  color: #ffffff;
}
.single-default-news:hover .tags, .single-default-news:focus .tags {
  left: 15px;
}
.single-default-news:hover img, .single-default-news:focus img {
  transform: scale(1.1);
}

.single-default-inner-news {
  position: relative;
}
.single-default-inner-news .news-content {
  background-color: #ffffff;
  padding: 28px 20px;
}
.single-default-inner-news .news-content h3 {
  font-size: 20px;
  margin-bottom: 0;
  transition: 0.5s;
  line-height: 1.4;
}
.single-default-inner-news .news-content span {
  display: block;
  font-size: 14px;
  color: #8a8a8a;
  margin-top: 10px;
}
.single-default-inner-news .news-content span i {
  color: green;
  margin-right: 4px;
}
.single-default-inner-news .news-image {
  overflow: hidden;
}
.single-default-inner-news .news-image img {
  transition: all 1.5s ease-out;
}
.single-default-inner-news .tags {
  top: 0;
  left: 25px;
  position: absolute;
  transition: 0.5s;
}
.single-default-inner-news .tags a {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 5px 15px;
  background-color: green;
}
.single-default-inner-news .link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.single-default-inner-news:hover .news-content h3, .single-default-inner-news:focus .news-content h3 {
  color: green;
}
.single-default-inner-news:hover .tags, .single-default-inner-news:focus .tags {
  left: 15px;
}
.single-default-inner-news:hover img, .single-default-inner-news:focus img {
  transform: scale(1.1);
}

.default-news-area .col-lg-3 .single-default-inner-news {
  margin-top: 28px;
}

.tags.bg-2 a {
  background-color: #ff5575 !important;
}
.tags.bg-3 a {
  background-color: #007dff !important;
}
.tags.bg-4 a {
  background-color: #43a047 !important;
}
.tags.bg-5 a {
  background-color: #FF7D0E !important;
}

.default-video-news {
  padding: 20px 15px;
  background-color: #ffffff;
}
.default-video-news .title {
  margin-bottom: 25px;
  font-size: 22px;
  border-left: 3px solid green;
  padding-left: 9px;
}
.default-video-news .single-video-news {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 20px;
  margin-bottom: 30px;
}
.default-video-news .single-video-news .content {
  margin-top: 15px;
}
.default-video-news .single-video-news .content h3 {
  font-size: 20px;
  margin-bottom: 0;
  transition: 0.5s;
  line-height: 1.4;
}
.default-video-news .single-video-news .content h3 a {
  color: #232323;
}
.default-video-news .single-video-news .content h3 a:hover, .default-video-news .single-video-news .content h3 a:focus {
  color: green;
}
.default-video-news .single-video-news .image {
  position: relative;
}
.default-video-news .single-video-news .image a {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #ffffff;
  background: #232323;
  padding: 10px;
  opacity: 0.7;
}
.default-video-news .single-video-news:hover .image a, .default-video-news .single-video-news:focus .image a {
  opacity: 1;
}
.default-video-news .single-video-news:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.default-news-slides .single-default-news {
  margin-bottom: 0;
}
.default-news-slides .single-default-news .news-content {
  padding: 20px;
}
.default-news-slides .single-default-news .news-content h3 {
  font-size: 20px;
}
.default-news-slides.owl-theme .owl-nav {
  margin-top: 0;
  line-height: 0.01;
}
.default-news-slides.owl-theme .owl-nav [class*=owl-] {
  width: 40px;
  height: 40px;
  background: #f0f1f4 !important;
  color: #232323 !important;
  line-height: 40px !important;
  margin: 0 3px;
  position: absolute;
  left: 50px;
  opacity: 1;
  visibility: hidden;
  top: 50%;
  transform: translateY(-50%);
  outline: 0;
  font-size: 20px !important;
  transition: 0.5s;
  border-radius: 0;
  border-radius: 50%;
}
.default-news-slides.owl-theme .owl-nav [class*=owl-]:hover, .default-news-slides.owl-theme .owl-nav [class*=owl-]:focus {
  color: #ffffff !important;
  background-color: green !important;
}
.default-news-slides.owl-theme .owl-nav [class*=owl-].owl-next {
  left: auto;
  right: 50px;
}
.default-news-slides.owl-theme:hover .owl-nav [class*=owl-], .default-news-slides.owl-theme:focus .owl-nav [class*=owl-] {
  left: 0;
  opacity: 1;
  visibility: visible;
}
.default-news-slides.owl-theme:hover .owl-nav [class*=owl-].owl-next, .default-news-slides.owl-theme:focus .owl-nav [class*=owl-].owl-next {
  left: auto;
  right: 0;
}

@keyframes ripple {
  0%, 35% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
.small-image-ads img {
  width: 100%;
}

/*================================================
New News CSS
=================================================*/
.new-news-area {
  background-color: #f5f5f5;
}
.new-news-area.bg-color-none {
  background-color: transparent;
}

.new-news-slides .owl-nav {
  position: absolute;
  right: 10px;
  top: 0;
  margin-top: 0;
  line-height: 0.01;
}
.new-news-slides .owl-nav [class*=owl-] {
  width: 24px;
  height: 24px;
  background: #f0f1f4 !important;
  color: #232323 !important;
  line-height: 19px !important;
  margin: 0 3px 0;
  outline: 0;
  font-size: 16px !important;
  transition: 0.5s;
  border-radius: 0;
}
.new-news-slides .owl-nav [class*=owl-]:hover, .new-news-slides .owl-nav [class*=owl-]:focus {
  color: #ffffff !important;
  background-color: green !important;
}
.new-news-slides .single-default-news {
  margin-bottom: 0;
}
.new-news-slides .single-default-news .news-content {
  padding: 20px;
}
.new-news-slides .single-default-news .news-content h3 {
  font-size: 22px;
}
.new-news-slides.new-news-slides-two .single-default-news .news-content {
  padding: 50px;
  max-width: 620px;
}
.new-news-slides.new-news-slides-two .single-default-news .news-content h3 {
  font-size: 25px;
}

.single-new-news {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
}
.single-new-news:last-child {
  margin-bottom: 0;
}
.single-new-news::before {
  opacity: 0.8;
  background-image: linear-gradient(transparent, #111), linear-gradient(transparent, #111);
  content: "";
  height: 70%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.single-new-news img {
  transition: all 1.5s ease-out;
}
.single-new-news .news-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 15px;
  z-index: 2;
}
.single-new-news .news-content ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.single-new-news .news-content ul li {
  display: inline-block;
  margin-right: 15px;
  color: #ffffff;
  font-weight: 500;
}
.single-new-news .news-content ul li a {
  display: inline-block;
  color: #ffffff;
}
.single-new-news .news-content ul li a:hover, .single-new-news .news-content ul li a:focus {
  color: green;
}
.single-new-news .news-content ul li i {
  margin-right: 3px;
}
.single-new-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-new-news .news-content h3 {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 10px;
}
.single-new-news .news-content h3 a {
  color: #ffffff;
}
.single-new-news .tags {
  top: 0;
  left: 25px;
  position: absolute;
  transition: 0.5s;
}
.single-new-news .tags a {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 5px 15px;
  background-color: green;
}
.single-new-news:hover .tags, .single-new-news:focus .tags {
  left: 15px;
}
.single-new-news:hover img, .single-new-news:focus img {
  transform: scale(1.1);
}

/*================================================
Popular News CSS
=================================================*/
.single-popular-news {
  position: relative;
  margin-bottom: 30px;
}
.single-popular-news .news-content {
  margin-top: 15px;
}
.single-popular-news .news-content h3 {
  font-size: 20px;
  margin-bottom: 0;
  transition: 0.5s;
  line-height: 1.4;
}
.single-popular-news .news-content span {
  display: block;
  font-size: 14px;
  color: #8a8a8a;
  margin-top: 10px;
}
.single-popular-news .news-content span i {
  color: green;
  margin-right: 4px;
}
.single-popular-news .news-image {
  overflow: hidden;
}
.single-popular-news .news-image img {
  transition: all 1.5s ease-out;
}
.single-popular-news .tags {
  top: 0;
  left: 25px;
  position: absolute;
  transition: 0.5s;
}
.single-popular-news .tags a {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 5px 15px;
  background-color: green;
}
.single-popular-news .link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.single-popular-news:hover .news-content h3, .single-popular-news:focus .news-content h3 {
  color: green;
}
.single-popular-news:hover .tags, .single-popular-news:focus .tags {
  left: 15px;
}
.single-popular-news:hover img, .single-popular-news:focus img {
  transform: scale(1.1);
}

.popular-news-slides .single-popular-news {
  margin-bottom: 0;
}
.popular-news-slides .owl-nav {
  position: absolute;
  right: 0;
  top: -53px;
  margin-top: 0;
  line-height: 0.01;
}
.popular-news-slides.owl-theme .owl-nav [class*=owl-] {
  font-size: 20px;
  margin: 0;
  padding: 0 !important;
  background: transparent;
  border-radius: 0;
  outline: 0;
  transition: 0.5s;
  padding-right: 4px !important;
}
.popular-news-slides.owl-theme .owl-nav [class*=owl-]:hover, .popular-news-slides.owl-theme .owl-nav [class*=owl-]:focus {
  color: green;
}
.popular-news-slides.owl-theme .owl-nav [class*=owl-].owl-next {
  border-left: 2px solid #eeeeee;
  line-height: 0;
  padding-left: 4px !important;
}

.popular-section-ads img {
  width: 100%;
}

/*================================================
Technology News CSS
=================================================*/
.single-technology-news {
  position: relative;
  overflow: hidden;
}
.single-technology-news::before {
  opacity: 0.7;
  background-image: linear-gradient(transparent, #111), linear-gradient(transparent, #111);
  content: "";
  height: 70%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.single-technology-news img {
  transition: all 1.5s ease-out;
}
.single-technology-news .news-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 30px;
  z-index: 2;
}
.single-technology-news .news-content ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.single-technology-news .news-content ul li {
  display: inline-block;
  margin-right: 15px;
  color: #ffffff;
  font-weight: 500;
}
.single-technology-news .news-content ul li a {
  display: inline-block;
  color: #ffffff;
}
.single-technology-news .news-content ul li a:hover, .single-technology-news .news-content ul li a:focus {
  color: green;
}
.single-technology-news .news-content ul li i {
  margin-right: 3px;
}
.single-technology-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-technology-news .news-content h3 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 15px;
}
.single-technology-news .news-content h3 a {
  color: #ffffff;
}
.single-technology-news .tags {
  top: 0;
  left: 25px;
  position: absolute;
  transition: 0.5s;
}
.single-technology-news .tags a {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 5px 15px;
  background-color: green;
}
.single-technology-news:hover .tags, .single-technology-news:focus .tags {
  left: 15px;
}
.single-technology-news:hover img, .single-technology-news:focus img {
  transform: scale(1.1);
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap;
}

.space-news-list .single-space-news {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eeeeee;
}
.space-news-list .single-space-news:first-child {
  border-top: 1px solid #eeeeee;
  padding-top: 10px;
}
.space-news-list .single-space-news:last-child {
  margin-bottom: 0;
}
.space-news-list .single-space-news h3 {
  font-size: 20px;
  margin-bottom: 0;
  line-height: 1.4;
}
.space-news-list .single-space-news h3 a {
  color: #232323;
}
.space-news-list .single-space-news h3 a:hover, .space-news-list .single-space-news h3 a:focus {
  color: green;
}
.space-news-list .single-space-news ul {
  padding: 0;
  margin: 10px 0 0;
  list-style-type: none;
}
.space-news-list .single-space-news ul li {
  display: inline-block;
  color: #8a8a8a;
  font-size: 13px;
  margin-right: 6px;
}
.space-news-list .single-space-news ul li a {
  display: inline-block;
  color: #8a8a8a;
}
.space-news-list .single-space-news ul li a:hover, .space-news-list .single-space-news ul li a:focus {
  color: green;
}
.space-news-list .single-space-news ul li i {
  margin-right: 1px;
}
.space-news-list .single-space-news ul li:last-child {
  margin-right: 0;
}

.technology-section-ads img {
  width: 100%;
}

/*================================================
International News CSS
=================================================*/
.single-international-news {
  position: relative;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
}
.single-international-news .news-content {
  padding: 20px 15px;
}
.single-international-news .news-content h3 {
  font-size: 20px;
  margin-bottom: 0;
  line-height: 1.4;
}
.single-international-news .news-content h3 a {
  color: #232323;
}
.single-international-news .news-content h3 a:hover, .single-international-news .news-content h3 a:focus {
  color: green;
}
.single-international-news .news-content span {
  display: block;
  font-size: 14px;
  color: #8a8a8a;
  margin-bottom: 8px;
}
.single-international-news .news-content span i {
  color: green;
  margin-right: 4px;
}
.single-international-news .news-image {
  overflow: hidden;
}
.single-international-news .news-image img {
  transition: all 1.5s ease-out;
}
.single-international-news:hover img, .single-international-news:focus img {
  transform: scale(1.1);
}

.international-news-list .news-media {
  background-color: #ffffff;
  margin-bottom: 25px;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.04);
  display: flex;
}
.international-news-list .news-media:last-child {
  margin-bottom: 0;
}
.international-news-list .news-media a img {
  transition: 0.5s;
}
.international-news-list .news-media .content {
  padding: 10px 15px;
}
.international-news-list .news-media .content span {
  display: block;
  font-size: 14px;
  color: #8a8a8a;
  margin-bottom: 8px;
}
.international-news-list .news-media .content span i {
  color: green;
  margin-right: 4px;
}
.international-news-list .news-media .content h3 {
  font-size: 20px;
  margin-bottom: 0;
  line-height: 1.4;
}
.international-news-list .news-media .content h3 a {
  color: #232323;
}
.international-news-list .news-media .content h3 a:hover, .international-news-list .news-media .content h3 a:focus {
  color: green;
}
.international-news-list .news-media:hover a img, .international-news-list .news-media:focus a img {
  opacity: 0.8;
}

.stay-connected {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 20px;
  list-style-type: none;
  text-align: center;
}
.stay-connected li {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  background-color: #f5f6fa;
}
.stay-connected li a {
  padding: 15px;
  border-left: 1px solid #eeeeee;
  color: #232323;
}
.stay-connected li a i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: green;
  color: #ffffff;
  border-radius: 50%;
  font-size: 19px;
  display: inline-block;
}
.stay-connected li a i.icofont-facebook {
  background-color: #3b5998;
}
.stay-connected li a i.icofont-facebook:hover {
  scale: 1.1;
}
.stay-connected li a i.icofont-twitter {
  background-color: #0091ea;
}
.stay-connected li a i.icofont-twitter:hover {
    scale: 1.1;
}
.stay-connected li a i.icofont-linkedin {
  background-color: #1976d2;
}
.stay-connected li a i.icofont-instagram {
  /*background-color: #C13584;*/
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
.stay-connected li a i.icofont-instagram:hover {
    scale: 1.1;
}
.stay-connected li a i.icofont-telegram {
  background-color: #0088cc;
}
.stay-connected li a i.icofont-telegram:hover {
    scale: 1.1;
}
.stay-connected li a i.icofont-rss {
  background-color: #ef6c00;
}
.stay-connected li a b {
  display: block;
  margin-top: 12px;
  font-size: 18px;
}
.stay-connected li a span {
  display: block;
  color: #8a8a8a;
}
.stay-connected li:first-child a {
  border-left: 1px;
}

.categories-list {
  border: 1px solid #eeeeee;
  padding: 30px;
  margin-bottom: 30px;
}
.categories-list ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.categories-list ul li {
  position: relative;
  margin-bottom: 12px;
}
.categories-list ul li a {
  color: #232323;
  display: inline-block;
}
.categories-list ul li a span {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  background-color: green;
  color: #ffffff;
  border-radius: 50%;
  font-size: 12px;
}
.categories-list ul li a:hover, .categories-list ul li a:focus {
  background-color: green;
  color: #ffffff;
}
.categories-list ul li:last-child {
  margin-bottom: 0;
}
.categories-list ul li:nth-child(2) a span {
  background-color: #4ab106;
}
.categories-list ul li:nth-child(3) a span {
  background-color: #ff6e0d;
}
.categories-list ul li:nth-child(4) a span {
  background-color: #ff6e0d;
}
.categories-list ul li:nth-child(5) a span {
  background-color: #ff5575;
}
.categories-list ul li:nth-child(6) a span {
  background-color: #007dff;
}
.categories-list ul li:nth-child(7) a span {
  background-color: #4ab106;
}

.stay-connected-ads img {
  width: 100%;
}

/*================================================
Video News CSS
=================================================*/
.video-news-area {
  padding-bottom: 10px;
  background-color: #1f1f1f;
}
.video-news-area .section-title h2 {
  color: #ffffff;
}
.video-news-area .single-default-news .news-content {
  padding: 20px;
}
.video-news-area .single-default-news .news-content h3 {
  font-size: 20px;
}

.video-news-list .video-news-media {
  margin-bottom: 20px;
}
.video-news-list .video-news-media:last-child {
  margin-bottom: 0;
}
.video-news-list .video-news-media a img {
  transition: 0.5s;
}
.video-news-list .video-news-media .content {
  padding: 10px 15px;
}
.video-news-list .video-news-media .content span {
  display: block;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 8px;
}
.video-news-list .video-news-media .content span i {
  color: green;
  margin-right: 4px;
}
.video-news-list .video-news-media .content h3 {
  font-size: 17px;
  margin-bottom: 0;
  line-height: 1.4;
}
.video-news-list .video-news-media .content h3 a {
  color: #ffffff;
}
.video-news-list .video-news-media .content h3 a:hover, .video-news-list .video-news-media .content h3 a:focus {
  color: green;
}
.video-news-list .video-news-media:hover a img, .video-news-list .video-news-media:focus a img {
  opacity: 0.8;
}

.video-news-slides.owl-theme .owl-nav {
  margin-top: 0;
  line-height: 0.01;
}
.video-news-slides.owl-theme .owl-nav [class*=owl-] {
  width: 40px;
  height: 40px;
  background: #f0f1f4 !important;
  color: #232323 !important;
  line-height: 40px !important;
  margin: 0 3px;
  position: absolute;
  left: 50px;
  opacity: 1;
  visibility: hidden;
  top: 50%;
  transform: translateY(-50%);
  outline: 0;
  font-size: 20px !important;
  transition: 0.5s;
  border-radius: 0;
  border-radius: 50%;
}
.video-news-slides.owl-theme .owl-nav [class*=owl-]:hover, .video-news-slides.owl-theme .owl-nav [class*=owl-]:focus {
  color: #ffffff !important;
  background-color: green !important;
}
.video-news-slides.owl-theme .owl-nav [class*=owl-].owl-next {
  left: auto;
  right: 50px;
}
.video-news-slides.owl-theme:hover .owl-nav [class*=owl-], .video-news-slides.owl-theme:focus .owl-nav [class*=owl-] {
  left: 0;
  opacity: 1;
  visibility: visible;
}
.video-news-slides.owl-theme:hover .owl-nav [class*=owl-].owl-next, .video-news-slides.owl-theme:focus .owl-nav [class*=owl-].owl-next {
  left: auto;
  right: 0;
}

/*================================================
Hot News CSS
=================================================*/
.single-health-lifestyle-news .news-image {
  overflow: hidden;
}
.single-health-lifestyle-news .news-image img {
  transition: all 1.5s ease-out;
}
.single-health-lifestyle-news .news-content {
  padding: 20px 15px;
  border: 1px solid #eeeeee;
}
.single-health-lifestyle-news .news-content ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.single-health-lifestyle-news .news-content ul li {
  display: inline-block;
  margin-right: 10px;
  color: #8a8a8a;
}
.single-health-lifestyle-news .news-content ul li i {
  color: green;
  margin-right: 3px;
}
.single-health-lifestyle-news .news-content ul li a {
  display: inline-block;
  color: #8a8a8a;
}
.single-health-lifestyle-news .news-content ul li a:hover, .single-health-lifestyle-news .news-content ul li a:focus {
  color: green;
}
.single-health-lifestyle-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-health-lifestyle-news .news-content h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-top: 12px;
  margin-bottom: 10px;
}
.single-health-lifestyle-news .news-content h3 a {
  color: #232323;
}
.single-health-lifestyle-news .news-content h3 a:hover, .single-health-lifestyle-news .news-content h3 a:focus {
  color: green;
}
.single-health-lifestyle-news:hover .news-image img, .single-health-lifestyle-news:focus .news-image img {
  transform: scale(1.1);
  opacity: 0.5;
}

.health-lifestyle-news-slides .single-popular-news {
  margin-bottom: 0;
}
.health-lifestyle-news-slides .owl-nav {
  position: absolute;
  right: 0;
  top: -53px;
  margin-top: 0;
  line-height: 0.01;
}
.health-lifestyle-news-slides.owl-theme .owl-nav [class*=owl-] {
  font-size: 20px;
  margin: 0;
  padding: 0 !important;
  background: transparent;
  border-radius: 0;
  outline: 0;
  transition: 0.5s;
  padding-right: 4px !important;
}
.health-lifestyle-news-slides.owl-theme .owl-nav [class*=owl-]:hover, .health-lifestyle-news-slides.owl-theme .owl-nav [class*=owl-]:focus {
  color: green;
}
.health-lifestyle-news-slides.owl-theme .owl-nav [class*=owl-].owl-next {
  border-left: 2px solid #eeeeee;
  line-height: 0;
  padding-left: 4px !important;
}

.single-politics-news .news-image {
  overflow: hidden;
}
.single-politics-news .news-image img {
  transition: all 1.5s ease-out;
}
.single-politics-news .news-content {
  padding: 20px 15px;
  border: 1px solid #eeeeee;
}
.single-politics-news .news-content ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.single-politics-news .news-content ul li {
  display: inline-block;
  margin-right: 10px;
  color: #8a8a8a;
}
.single-politics-news .news-content ul li i {
  color: green;
  margin-right: 3px;
}
.single-politics-news .news-content ul li a {
  display: inline-block;
  color: #8a8a8a;
}
.single-politics-news .news-content ul li a:hover, .single-politics-news .news-content ul li a:focus {
  color: green;
}
.single-politics-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-politics-news .news-content h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-top: 12px;
  margin-bottom: 10px;
}
.single-politics-news .news-content h3 a {
  color: #232323;
}
.single-politics-news .news-content h3 a:hover, .single-politics-news .news-content h3 a:focus {
  color: green;
}
.single-politics-news:hover .news-image img, .single-politics-news:focus .news-image img {
  transform: scale(1.1);
  opacity: 0.5;
}

.politics-news-slides .single-popular-news {
  margin-bottom: 0;
}
.politics-news-slides .owl-nav {
  position: absolute;
  right: 0;
  top: -53px;
  margin-top: 0;
  line-height: 0.01;
}
.politics-news-slides.owl-theme .owl-nav [class*=owl-] {
  font-size: 20px;
  margin: 0;
  padding: 0 !important;
  background: transparent;
  border-radius: 0;
  outline: 0;
  transition: 0.5s;
  padding-right: 4px !important;
}
.politics-news-slides.owl-theme .owl-nav [class*=owl-]:hover, .politics-news-slides.owl-theme .owl-nav [class*=owl-]:focus {
  color: green;
}
.politics-news-slides.owl-theme .owl-nav [class*=owl-].owl-next {
  border-left: 2px solid #eeeeee;
  line-height: 0;
  padding-left: 4px !important;
}

.single-around-the-world-news {
  background-color: #ffffff;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.04);
}
.single-around-the-world-news .news-image {
  overflow: hidden;
}
.single-around-the-world-news .news-image img {
  transition: all 1.5s ease-out;
}
.single-around-the-world-news .news-content {
  padding: 20px 15px;
}
.single-around-the-world-news .news-content ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.single-around-the-world-news .news-content ul li {
  display: inline-block;
  margin-right: 10px;
  color: #8a8a8a;
}
.single-around-the-world-news .news-content ul li i {
  color: green;
  margin-right: 3px;
}
.single-around-the-world-news .news-content ul li a {
  display: inline-block;
  color: #8a8a8a;
}
.single-around-the-world-news .news-content ul li a:hover, .single-around-the-world-news .news-content ul li a:focus {
  color: green;
}
.single-around-the-world-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-around-the-world-news .news-content h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-top: 12px;
  margin-bottom: 10px;
}
.single-around-the-world-news .news-content h3 a {
  color: #232323;
}
.single-around-the-world-news .news-content h3 a:hover, .single-around-the-world-news .news-content h3 a:focus {
  color: green;
}
.single-around-the-world-news:hover .news-image img, .single-around-the-world-news:focus .news-image img {
  transform: scale(1.1);
  opacity: 0.5;
}

.around-the-world-news-media {
  margin-top: 30px;
  background-color: #ffffff;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.04);
  display: flex;
}
.around-the-world-news-media a img {
  transition: 0.5s;
  max-width: 102px;
}
.around-the-world-news-media .content {
  padding: 10px 15px;
}
.around-the-world-news-media .content span {
  display: block;
  font-size: 14px;
  color: #8a8a8a;
  margin-bottom: 8px;
}
.around-the-world-news-media .content span i {
  color: green;
  margin-right: 4px;
}
.around-the-world-news-media .content h3 {
  font-size: 17px;
  margin-bottom: 0;
  line-height: 1.4;
}
.around-the-world-news-media .content h3 a {
  color: #232323;
}
.around-the-world-news-media .content h3 a:hover, .around-the-world-news-media .content h3 a:focus {
  color: green;
}
.around-the-world-news-media:hover a img, .around-the-world-news-media:focus a img {
  opacity: 0.8;
}

.single-featured-news {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
.single-featured-news::before {
  opacity: 0.7;
  background-image: linear-gradient(transparent, #111), linear-gradient(transparent, #111);
  content: "";
  height: 70%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.single-featured-news img {
  transition: all 1.5s ease-out;
}
.single-featured-news .news-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 20px;
  z-index: 2;
}
.single-featured-news .news-content ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.single-featured-news .news-content ul li {
  display: inline-block;
  margin-right: 15px;
  color: #ffffff;
  font-weight: 500;
}
.single-featured-news .news-content ul li a {
  display: inline-block;
  color: #ffffff;
}
.single-featured-news .news-content ul li a:hover, .single-featured-news .news-content ul li a:focus {
  color: green;
}
.single-featured-news .news-content ul li i {
  margin-right: 3px;
}
.single-featured-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-featured-news .news-content h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 15px;
}
.single-featured-news .news-content h3 a {
  color: #ffffff;
}
.single-featured-news .tags {
  top: 0;
  left: 25px;
  position: absolute;
  transition: 0.5s;
}
.single-featured-news .tags a {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 5px 15px;
  background-color: green;
}
.single-featured-news:hover .tags, .single-featured-news:focus .tags {
  left: 15px;
}
.single-featured-news:hover img, .single-featured-news:focus img {
  transform: scale(1.1);
}
.single-featured-news:last-child {
  margin-bottom: 0;
}

.newsletter-box {
  margin-top: 40px;
  margin-bottom: 22px;
}
.newsletter-box .newsletter-box-inner {
  background-color: green;
  text-align: center;
  padding: 45px 30px;
}
.newsletter-box .newsletter-box-inner h3 {
  font-size: 20px;
  margin-bottom: 0;
  line-height: 1.5;
  color: #ffffff;
}
.newsletter-box .newsletter-box-inner i.icofont-email {
  color: #EA827F;
  font-size: 100px;
}
.newsletter-box .newsletter-box-inner form {
  position: relative;
}
.newsletter-box .newsletter-box-inner form .newsletter-input {
  display: block;
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  border: none;
  padding: 0 15px;
  outline: 0;
}
.newsletter-box .newsletter-box-inner form button {
  position: absolute;
  right: 0;
  top: 0;
  height: 50px;
  border: none;
  background-color: #232323;
  width: 50px;
  color: #ffffff;
  font-size: 18px;
  outline: 0;
  transition: 0.5s;
}
.newsletter-box .newsletter-box-inner form button:hover, .newsletter-box .newsletter-box-inner form button:focus {
  opacity: 0.7;
}
.newsletter-box .newsletter-box-inner form .validation-danger, .newsletter-box .newsletter-box-inner form .validation-success {
  color: #ffffff;
  margin-top: 10px;
}

.hot-news-ads2 {
  margin-top: 40px;
}
.hot-news-ads2 img {
  width: 100%;
}

/*================================================
Gallery News CSS
=================================================*/
.gallery-news-area {
  background-color: #f5f5f5;
}

.gallery-news-inner-slides {
  position: relative;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
}
.gallery-news-inner-slides .gallery-news-content {
  padding: 0 20px;
}
.gallery-news-inner-slides .gallery-news-content h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.gallery-news-inner-slides .gallery-news-content h3 a {
  color: #232323;
}
.gallery-news-inner-slides .gallery-news-content h3 a:hover, .gallery-news-inner-slides .gallery-news-content h3 a:focus {
  color: green;
}
.gallery-news-inner-slides .gallery-news-content h3 a i {
  color: green;
}
.gallery-news-inner-slides .owl-nav {
  margin-top: 0;
  line-height: 0.01;
  position: absolute;
  right: 0;
  top: 0;
}
.gallery-news-inner-slides .owl-nav [class*=owl-] {
  width: 24px;
  height: 24px;
  background: #f0f1f4 !important;
  color: #232323 !important;
  line-height: 19px !important;
  margin: 6px 3px 0;
  outline: 0;
  font-size: 16px !important;
  transition: 0.5s;
  border-radius: 0;
}
.gallery-news-inner-slides .owl-nav [class*=owl-]:hover, .gallery-news-inner-slides .owl-nav [class*=owl-]:focus {
  color: #ffffff !important;
  background-color: green !important;
}

.gallery-news-list {
  margin-top: 55px;
}
.gallery-news-list .gallery-news-media {
  margin-top: 18px;
  background-color: #ffffff;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.04);
  display: flex;
}
.gallery-news-list .gallery-news-media:first-child {
  margin-top: 0;
}
.gallery-news-list .gallery-news-media .image {
  position: relative;
}
.gallery-news-list .gallery-news-media .image img {
  transition: 0.5s;
}
.gallery-news-list .gallery-news-media .image a {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #ffffff;
  background: #232323;
  padding: 10px;
  opacity: 0.7;
}
.gallery-news-list .gallery-news-media .content {
  padding: 10px 15px;
}
.gallery-news-list .gallery-news-media .content h3 {
  font-size: 20px;
  margin-bottom: 0;
  line-height: 1.5;
}
.gallery-news-list .gallery-news-media .content h3 a {
  color: #232323;
}
.gallery-news-list .gallery-news-media .content h3 a:hover, .gallery-news-list .gallery-news-media .content h3 a:focus {
  color: green;
}
.gallery-news-list .gallery-news-media:hover .image img, .gallery-news-list .gallery-news-media:focus .image img {
  opacity: 0.8;
}
.gallery-news-list .gallery-news-media:hover .image a, .gallery-news-list .gallery-news-media:focus .image a {
  opacity: 1;
}

/*================================================
Gallery Area CSS
=================================================*/
.shorting .mix {
  display: none;
}

.shorting-menu {
  text-align: center;
  margin-bottom: 30px;
}
.shorting-menu .filter {
  border: none;
  background-color: #f5f5f5;
  border-radius: 5px;
  transition: 0.5s;
  color: #232323;
  text-transform: uppercase;
  padding: 10px 23px 8px;
  outline: 0 !important;
  margin-left: 2px;
  margin-right: 2px;
  font-size: 13px;
  font-weight: 600;
}
.shorting-menu .filter:hover, .shorting-menu .filter.active {
  background-color: green;
  color: #ffffff;
}
.shorting-menu .filter:last-child {
  margin-right: 0;
}
.shorting-menu .filter:first-child {
  margin-left: 0;
}

.single-gallery-box {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.single-gallery-box .gallery-content {
  position: absolute;
  left: 0;
  bottom: 15px;
  background-color: #ffffff;
  height: auto;
  width: 100%;
  padding: 20px 20px;
  transition: transform 0.3s ease, opacity 0.3s;
  max-width: 370px;
  transform: translate3d(-100%, 0, 0);
}
.single-gallery-box .gallery-content h3 {
  margin-bottom: 0;
  transform: translateX(20px);
  transition: transform 0.3s ease, opacity 0.3s;
  opacity: 0;
  font-size: 18px;
  font-weight: 600;
}
.single-gallery-box .gallery-content h3 a {
  color: #232323;
}
.single-gallery-box .gallery-content h3 a:hover {
  color: green;
}
.single-gallery-box .gallery-content .category {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #8a8a8a;
  opacity: 0;
  transform: translateX(20px);
  transition: transform 0.4s ease;
}
.single-gallery-box .plus-icon a {
  background-color: green;
  width: 85px;
  height: 85px;
  position: absolute;
  top: 25px;
  right: 25px;
  transform: scale(0);
  transition: all 0.4s ease-out 0s;
  overflow: hidden;
  border-radius: 50%;
}
.single-gallery-box .plus-icon a span {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.single-gallery-box .plus-icon a span::after, .single-gallery-box .plus-icon a span::before {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  background-color: #ffffff;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.single-gallery-box .plus-icon a span::after {
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.single-gallery-box .plus-icon a:hover {
  background-color: #232323;
}
.single-gallery-box:hover .gallery-content {
  transition: transform 0.5s ease;
  transform: translate3d(0, 0, 0);
}
.single-gallery-box:hover .gallery-content h3 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.5s ease 0.5s, opacity 0.5s 0.3s;
}
.single-gallery-box:hover .gallery-content .category {
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.5s ease 0.6s, opacity 0.5s 0.6s;
}
.single-gallery-box:hover .plus-icon a {
  transform: scale(1);
}

/*================================================
Blog Home News CSS
=================================================*/
.blog-home-slides .col-lg-12 {
  padding: 0 3px 0;
}
.blog-home-slides.owl-carousel.owl-theme .owl-nav [class*=owl-] {
  opacity: 0;
  visibility: hidden;
}
.blog-home-slides.owl-carousel.owl-theme .owl-nav .owl-prev {
  left: 0;
}
.blog-home-slides.owl-carousel.owl-theme .owl-nav .owl-next {
  right: 0;
}
.blog-home-slides.owl-carousel.owl-theme .owl-nav {
  margin-top: 0;
  line-height: 0.01;
}
.blog-home-slides.owl-carousel.owl-theme .owl-nav [class*=owl-] {
  color: #232323;
  font-size: 25px;
  margin: 0;
  transform: translateY(-50%);
  background: #ffffff;
  outline: 0;
  border-radius: 50%;
  position: absolute;
  left: 15px;
  top: 50%;
  padding: 0;
  width: 55px;
  height: 55px;
  line-height: 56px;
  transition: 0.5s;
}
.blog-home-slides.owl-carousel.owl-theme .owl-nav [class*=owl-]:hover {
  color: #ffffff;
  background: green;
}
.blog-home-slides.owl-carousel.owl-theme .owl-nav [class*=owl-].owl-next {
  left: auto;
  right: 15px;
}
.blog-home-slides:hover.owl-carousel.owl-theme .owl-nav [class*=owl-] {
  opacity: 1;
  visibility: visible;
}
.blog-home-slides:hover.owl-carousel.owl-theme .owl-nav .owl-prev {
  left: 20px;
}
.blog-home-slides:hover.owl-carousel.owl-theme .owl-nav .owl-next {
  right: 20px;
}

.single-blog-box {
  position: relative;
}
.single-blog-box .blog-image a {
  display: block;
}
.single-blog-box .blog-post-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: linear-gradient(to bottom, transparent, rgb(0, 0, 0));
  padding: 30px;
}
.single-blog-box .blog-post-content div.tags a {
  background: green;
  color: #ffffff;
  display: inline-block;
  padding: 6px 15px;
}
.single-blog-box .blog-post-content h3 {
  margin: 20px 0 15px;
  font-size: 24px;
  line-height: 1.4;
}
.single-blog-box .blog-post-content h3 a {
  color: #ffffff;
}
.single-blog-box .blog-post-content ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.single-blog-box .blog-post-content ul li {
  display: inline-block;
  margin-right: 10px;
  color: #ffffff;
  font-size: 14px;
}
.single-blog-box .blog-post-content ul li i {
  margin-right: 3px;
}
.single-blog-box .blog-post-content ul li a {
  color: green;
  display: inline-block;
}
.single-blog-box .blog-post-content ul li:last-child {
  margin-right: 0;
}
.single-blog-box:hover .blog-post-content div.tags a {
  background: green;
}

.main-content-area {
  background-color: #f9f9f9;
}
.main-content-area .pagination-area {
  margin-top: 40px;
  text-align: left;
}
.main-content-area .pagination-area a, .main-content-area .pagination-area span {
  text-align: center;
}

.blog-box {
  background-color: #ffffff;
  margin-bottom: 30px;
}
.blog-box .posts-thumb {
  overflow: hidden;
  position: relative;
  flex-basis: 35%;
  max-width: 35%;
}
.blog-box .posts-thumb::after {
  content: "";
  position: absolute;
  bottom: -200%;
  left: -200%;
  height: 200%;
  width: 200%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: 0.8s ease;
  transform: rotate(45deg);
  z-index: 2;
}
.blog-box .posts-thumb a .fullimage {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 0.5s ease;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.blog-box .posts-thumb a .thumb-bg1 {
  background-image: url(../../assets/img/13.jpg);
}
.blog-box .posts-thumb a .thumb-bg2 {
  background-image: url(../../assets/img/14.jpg);
}
.blog-box .posts-thumb a .thumb-bg3 {
  background-image: url(../../assets/img/15.jpg);
}
.blog-box .posts-thumb a .thumb-bg4 {
  background-image: url(../../assets/img/16.jpg);
}
.blog-box .posts-thumb a .thumb-bg5 {
  background-image: url(../../assets/img/17.jpg);
}
.blog-box .posts-thumb a .thumb-bg6 {
  background-image: url(../../assets/img/18.jpg);
}
.blog-box .posts-thumb a .thumb-bg7 {
  background-image: url(../../assets/img/19.jpg);
}
.blog-box .posts-thumb a .thumb-bg8 {
  background-image: url(../../assets/img/20.jpg);
}
.blog-box .posts-thumb a .thumb-bg9 {
  background-image: url(../../assets/img/21.jpg);
}
.blog-box .posts-thumb a .thumb-bg10 {
  background-image: url(../../assets/img/22.jpg);
}
.blog-box .posts-content {
  -ms-flex-preferred-size: 65%;
  flex-basis: 65%;
  max-width: 65%;
  padding: 30px;
}
.blog-box .posts-content .cat a {
  color: green;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
}
.blog-box .posts-content .title {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 15px;
  margin-top: 10px;
}
.blog-box .posts-content .title a {
  color: #232323;
}
.blog-box .posts-content .title a:hover {
  color: green;
}
.blog-box .posts-content .posts-meta {
  margin-bottom: 15px;
}
.blog-box .posts-content .posts-meta span a {
  display: inline-block;
  color: #232323;
}
.blog-box .posts-content .posts-meta span a:hover {
  color: green;
}
.blog-box .posts-content .posts-meta .posts-author {
  position: relative;
  margin-bottom: 0;
  padding-right: 20px;
}
.blog-box .posts-content .posts-meta .posts-author::after {
  content: "";
  width: 15px;
  height: 1px;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  border-top: 1px solid #cecbd2;
  right: 0;
}
.blog-box .posts-content .posts-meta .posts-date {
  position: relative;
  margin-bottom: 0;
  color: #8a8a8a;
  padding-left: 10px;
}
.blog-box .posts-content p {
  margin-bottom: 20px;
}
.blog-box .posts-content .read-more-btn {
  display: inline-block;
  position: relative;
  color: green;
  font-family: "Cairo", sans-serif;
}
.blog-box .posts-content .read-more-btn span {
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
.blog-box .posts-content .read-more-btn i {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: green;
  color: #ffffff;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  transition: 0.5s;
}
.blog-box:hover .posts-thumb::after, .blog-box:focus .posts-thumb::after {
  bottom: 160%;
  left: 160%;
  transition: 0.9s ease;
}
.blog-box:hover .posts-thumb .fullimage, .blog-box:focus .posts-thumb .fullimage {
  transform: scale(1.2) rotate(1deg);
}
.blog-box:hover .read-more-btn span, .blog-box:focus .read-more-btn span {
  opacity: 1;
  visibility: visible;
  padding-right: 7px;
}
.blog-box:hover .read-more-btn i, .blog-box:focus .read-more-btn i {
  left: 100%;
  width: 25px;
  height: 25px;
  line-height: 25px;
}

/*================================================
Featured News CSS
=================================================*/
.featured-news-area {
  padding-top: 15px;
}

.single-featured-news-box .news-image img {
  box-shadow: 0 3px 12px -1px rgba(7, 10, 25, 0.2), 0 22px 27px -20px rgba(7, 10, 25, 0.2);
  transition: 0.5s;
  width: 100%;
}
.single-featured-news-box .news-content {
  padding: 25px 0 0;
}
.single-featured-news-box .news-content span {
  display: block;
  color: green;
  margin-bottom: 11px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
}
.single-featured-news-box .news-content h3 {
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 0;
}
.single-featured-news-box .news-content h3 a {
  color: #232323;
}
.single-featured-news-box .news-content ul {
  padding: 0;
  margin: 15px 0 15px;
  list-style-type: none;
}
.single-featured-news-box .news-content ul li {
  display: inline-block;
  color: #8a8a8a;
  margin-right: 15px;
  position: relative;
}
.single-featured-news-box .news-content ul li::before {
  content: "";
  position: absolute;
  background: #8a8a8a;
  width: 7px;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  left: -13px;
}
.single-featured-news-box .news-content ul li:first-child::before {
  display: none;
}
.single-featured-news-box .news-content ul li:last-child {
  margin-right: 0;
}
.single-featured-news-box .news-content .read-more-btn {
  color: #232323;
  font-weight: 500;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.single-featured-news-box .news-content .read-more-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: green;
}
.single-featured-news-box .news-content .read-more-btn:hover, .single-featured-news-box .news-content .read-more-btn:focus {
  color: green;
}
.single-featured-news-box:hover .news-image img, .single-featured-news-box:focus .news-image img {
  box-shadow: 0 15px 45px -5px rgba(7, 10, 25, 0.25);
  filter: brightness(1.07);
  transform: translate(0, -2px);
}

.more-featured-news {
  padding-left: 15px;
}
.more-featured-news .section-title {
  margin-bottom: 40px;
}
.more-featured-news .featured-media-news {
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 20px;
}
.more-featured-news .featured-media-news:last-child {
  margin-bottom: 0;
}
.more-featured-news .featured-media-news .news-content span {
  display: block;
  color: green;
  margin-bottom: 11px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
}
.more-featured-news .featured-media-news .news-content h3 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 0;
}
.more-featured-news .featured-media-news .news-content h3 a {
  color: #232323;
}
.more-featured-news .featured-media-news .news-content ul {
  padding: 0;
  margin: 12px 0 0;
  list-style-type: none;
}
.more-featured-news .featured-media-news .news-content ul li {
  display: inline-block;
  color: #8a8a8a;
  margin-right: 15px;
  position: relative;
  font-size: 14px;
}
.more-featured-news .featured-media-news .news-content ul li::before {
  content: "";
  position: absolute;
  background: #8a8a8a;
  width: 7px;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  left: -13px;
}
.more-featured-news .featured-media-news .news-content ul li:first-child::before {
  display: none;
}
.more-featured-news .featured-media-news .news-content ul li:last-child {
  margin-right: 0;
}

/*================================================
ALL News CSS
=================================================*/
.single-fashion-news {
  position: relative;
  overflow: hidden;
}
.single-fashion-news::before {
  opacity: 0.7;
  background-image: linear-gradient(transparent, #111), linear-gradient(transparent, #111);
  content: "";
  height: 70%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.single-fashion-news img {
  transition: all 1.5s ease-out;
}
.single-fashion-news .news-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 20px;
  z-index: 2;
}
.single-fashion-news .news-content ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.single-fashion-news .news-content ul li {
  display: inline-block;
  margin-right: 15px;
  color: #ffffff;
  font-weight: 500;
}
.single-fashion-news .news-content ul li a {
  display: inline-block;
  color: #ffffff;
}
.single-fashion-news .news-content ul li a:hover, .single-fashion-news .news-content ul li a:focus {
  color: green;
}
.single-fashion-news .news-content ul li i {
  margin-right: 3px;
}
.single-fashion-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-fashion-news .news-content h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 15px;
}
.single-fashion-news .news-content h3 a {
  color: #ffffff;
}
.single-fashion-news:hover .tags, .single-fashion-news:focus .tags {
  left: 15px;
}
.single-fashion-news:hover img, .single-fashion-news:focus img {
  transform: scale(1.1);
}

.fashion-inner-news {
  background-color: #ffffff;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.04);
}
.fashion-inner-news .single-fashion-inner-news {
  padding: 15px;
  border-bottom: 1px solid #eeeeee;
}
.fashion-inner-news .single-fashion-inner-news:last-child {
  border-bottom: none;
}
.fashion-inner-news .single-fashion-inner-news span {
  display: block;
  font-size: 14px;
  color: #8a8a8a;
  margin-bottom: 8px;
}
.fashion-inner-news .single-fashion-inner-news span i {
  color: green;
  margin-right: 4px;
}
.fashion-inner-news .single-fashion-inner-news h3 {
  font-size: 18px;
  margin-bottom: 0;
  line-height: 1.4;
}
.fashion-inner-news .single-fashion-inner-news h3 a {
  color: #232323;
}
.fashion-inner-news .single-fashion-inner-news h3 a:hover, .fashion-inner-news .single-fashion-inner-news h3 a:focus {
  color: green;
}

.single-food-news {
  position: relative;
  overflow: hidden;
}
.single-food-news::before {
  opacity: 0.7;
  background-image: linear-gradient(transparent, #111), linear-gradient(transparent, #111);
  content: "";
  height: 70%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.single-food-news img {
  transition: all 1.5s ease-out;
}
.single-food-news .news-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 20px;
  z-index: 2;
}
.single-food-news .news-content ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.single-food-news .news-content ul li {
  display: inline-block;
  margin-right: 15px;
  color: #ffffff;
  font-weight: 500;
}
.single-food-news .news-content ul li a {
  display: inline-block;
  color: #ffffff;
}
.single-food-news .news-content ul li a:hover, .single-food-news .news-content ul li a:focus {
  color: green;
}
.single-food-news .news-content ul li i {
  margin-right: 3px;
}
.single-food-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-food-news .news-content h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 15px;
}
.single-food-news .news-content h3 a {
  color: #ffffff;
}
.single-food-news:hover .tags, .single-food-news:focus .tags {
  left: 15px;
}
.single-food-news:hover img, .single-food-news:focus img {
  transform: scale(1.1);
}

.food-inner-news {
  background-color: #ffffff;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.04);
}
.food-inner-news .single-food-inner-news {
  padding: 15px;
  border-bottom: 1px solid #eeeeee;
}
.food-inner-news .single-food-inner-news:last-child {
  border-bottom: none;
}
.food-inner-news .single-food-inner-news span {
  display: block;
  font-size: 14px;
  color: #8a8a8a;
  margin-bottom: 8px;
}
.food-inner-news .single-food-inner-news span i {
  color: green;
  margin-right: 4px;
}
.food-inner-news .single-food-inner-news h3 {
  font-size: 18px;
  margin-bottom: 0;
  line-height: 1.4;
}
.food-inner-news .single-food-inner-news h3 a {
  color: #232323;
}
.food-inner-news .single-food-inner-news h3 a:hover, .food-inner-news .single-food-inner-news h3 a:focus {
  color: green;
}

.single-north-america-news {
  position: relative;
  overflow: hidden;
}
.single-north-america-news::before {
  opacity: 0.7;
  background-image: linear-gradient(transparent, #111), linear-gradient(transparent, #111);
  content: "";
  height: 70%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.single-north-america-news img {
  transition: all 1.5s ease-out;
}
.single-north-america-news .news-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 20px;
  z-index: 2;
}
.single-north-america-news .news-content ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.single-north-america-news .news-content ul li {
  display: inline-block;
  margin-right: 15px;
  color: #ffffff;
  font-weight: 500;
}
.single-north-america-news .news-content ul li a {
  display: inline-block;
  color: #ffffff;
}
.single-north-america-news .news-content ul li a:hover, .single-north-america-news .news-content ul li a:focus {
  color: green;
}
.single-north-america-news .news-content ul li i {
  margin-right: 3px;
}
.single-north-america-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-north-america-news .news-content h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 15px;
}
.single-north-america-news .news-content h3 a {
  color: #ffffff;
}
.single-north-america-news:hover .tags, .single-north-america-news:focus .tags {
  left: 15px;
}
.single-north-america-news:hover img, .single-north-america-news:focus img {
  transform: scale(1.1);
}

.north-america-inner-news {
  background-color: #f5f5f5;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.04);
}
.north-america-inner-news .single-north-america-inner-news {
  padding: 15px;
  border-bottom: 1px solid #eeeeee;
}
.north-america-inner-news .single-north-america-inner-news:last-child {
  border-bottom: none;
}
.north-america-inner-news .single-north-america-inner-news span {
  display: block;
  font-size: 14px;
  color: #8a8a8a;
  margin-bottom: 8px;
}
.north-america-inner-news .single-north-america-inner-news span i {
  color: green;
  margin-right: 4px;
}
.north-america-inner-news .single-north-america-inner-news h3 {
  font-size: 18px;
  margin-bottom: 0;
  line-height: 1.4;
}
.north-america-inner-news .single-north-america-inner-news h3 a {
  color: #232323;
}
.north-america-inner-news .single-north-america-inner-news h3 a:hover, .north-america-inner-news .single-north-america-inner-news h3 a:focus {
  color: green;
}

.economics-news {
  margin-top: 40px;
}

.science-technology-news {
  margin-top: 40px;
}

.living-life-news {
  margin-top: 40px;
}

.all-news-ads {
  margin-top: 40px;
}
.all-news-ads img {
  width: 100%;
}

/*================================================
More News CSS
=================================================*/
.more-news-area {
  padding-bottom: 70px;
}

.more-news-inner2 {
  background-color: black;
  padding: 20px;
}
.more-news-inner2 .section-title h2 {
  color: #ffffff;
  border-color: #ffffff;
}
.more-news-inner2 .more-news-slides {
  margin-bottom: -50px;
}

.more-news-inner {
  background-color: green;
  padding: 20px;
}
.more-news-inner .section-title h2 {
  color: #ffffff;
  border-color: #ffffff;
}
.more-news-inner .more-news-slides {
  margin-bottom: -50px;
}

.single-more-news {
  position: relative;
  overflow: hidden;
}
.single-more-news::before {
  opacity: 0.7;
  background-image: linear-gradient(transparent, #111), linear-gradient(transparent, #111);
  content: "";
  height: 70%;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.single-more-news img {
  transition: all 1.5s ease-out;
}
.single-more-news .news-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 20px;
  z-index: 2;
}
.single-more-news .news-content ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.single-more-news .news-content ul li {
  display: inline-block;
  margin-right: 15px;
  color: #ffffff;
  font-weight: 500;
}
.single-more-news .news-content ul li a {
  display: inline-block;
  color: #ffffff;
}
.single-more-news .news-content ul li a:hover, .single-more-news .news-content ul li a:focus {
  color: green;
}
.single-more-news .news-content ul li i {
  margin-right: 3px;
}
.single-more-news .news-content ul li:last-child {
  margin-right: 0;
}
.single-more-news .news-content h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
  margin-top: 15px;
}
.single-more-news .news-content h3 a {
  color: #ffffff;
}
.single-more-news .tags {
  top: 0;
  left: 25px;
  position: absolute;
  transition: 0.5s;
}
.single-more-news .tags a {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 5px 15px;
  background-color: green;
}
.single-more-news:hover .tags, .single-more-news:focus .tags {
  left: 15px;
}
.single-more-news:hover img, .single-more-news:focus img {
  transform: scale(1.1);
}

.p-7 {
  padding: 7px;
}

.img-01 {
  object-fit: cover;
  height: 196px;
  width: 100%;
}

.img-02 {
  width: 100%;
  height: 254px;
  object-fit: cover;
}

.img-03 {
  pointer-events: all;
  cursor: pointer;
}

.img-04 {
  border-right: 4px green solid;
  padding-right: 15px;
}

.img-05 {
  border: 0;
  width: auto;
  max-width: 600px;
}

.img-06 {
  max-height: 230px;
  height: 230px;
  margin-bottom: 35px;
}

.img-061 {
  width: 100%;
  object-fit: cover;
}

.more-news-slides .owl-nav {
  position: absolute;
  right: 0;
  top: -53px;
  margin-top: 0;
  line-height: 0.01;
}
.more-news-slides.owl-theme .owl-nav [class*=owl-] {
  font-size: 20px;
  margin: 0;
  padding: 0 !important;
  background: transparent;
  border-radius: 0;
  outline: 0;
  transition: 0.5s;
  color: #ffffff;
  padding-right: 4px !important;
}
.more-news-slides.owl-theme .owl-nav [class*=owl-]:hover, .more-news-slides.owl-theme .owl-nav [class*=owl-]:focus {
  color: #ffffff;
}
.more-news-slides.owl-theme .owl-nav [class*=owl-].owl-next {
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  line-height: 0;
  padding-left: 4px !important;
}

/*================================================
Page Title CSS
=================================================*/
.page-title-content {
  padding: 25px 25px;
  position: relative;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  background-color: #ffffff;
}
.page-title-content h2 {
  margin-bottom: 0;
  font-size: 22px;
  border-left: 3px solid green;
  padding-left: 9px;
}
.page-title-content ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
}
.page-title-content ul li {
  color: #8a8a8a;
  display: inline-block;
}
.page-title-content ul li a {
  color: #8a8a8a;
}
.page-title-content ul li a:hover {
  color: green;
}
.page-title-content ul li:last-child {
  color: green;
}

.breadcrumb {
  padding: 15px 25px;
  margin: 0;
  list-style-type: none;
  margin-bottom: 30px;
  background-color: #ffffff;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
}
.breadcrumb li {
  color: #8a8a8a;
  display: flex;
  align-items: center;
  margin-right: 5px;
}
.breadcrumb li a {
  color: #8a8a8a;
}
.breadcrumb li a:hover {
  color: green;
}
.breadcrumb li:last-child {
  color: green;
}

/*================================================
ALL Category News CSS
=================================================*/
.all-category-news .pagination-area {
  margin-top: 50px;
}
.all-category-news .stay-connected-ads {
  margin-bottom: 40px;
}

.single-category-news {
  margin-bottom: 30px;
}
.single-category-news .category-news-content {
  padding-left: 10px;
}
.single-category-news .category-news-content h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 12px;
  margin-top: 12px;
}
.single-category-news .category-news-content h3 a {
  color: #232323;
}
.single-category-news .category-news-content h3 a:hover, .single-category-news .category-news-content h3 a:focus {
  color: green;
}
.single-category-news .category-news-content span {
  color: #8a8a8a;
  display: block;
}
.single-category-news .category-news-image {
  position: relative;
  overflow: hidden;
}
.single-category-news .category-news-image img {
  transition: all 1.5s ease-out;
}
.single-category-news .category-news-image .tags {
  top: 0;
  right: 25px;
  position: absolute;
  transition: 0.5s;
}
.single-category-news .category-news-image .tags a {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 5px 15px;
  background-color: green;
}
.single-category-news .category-news-image .video-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #ffffff;
  background: #232323;
  padding: 10px 15px;
  opacity: 0.7;
}
.single-category-news:hover .category-news-image .tags, .single-category-news:focus .category-news-image .tags {
  right: 15px;
}
.single-category-news:hover .category-news-image img, .single-category-news:focus .category-news-image img {
  transform: scale(1.1);
}
.single-category-news:hover .category-news-image .video-btn, .single-category-news:focus .category-news-image .video-btn {
  background-color: green;
  color: #ffffff;
  opacity: 1;
}

/*================================================
Pagination CSS
=================================================*/
.pagination-area {
  margin-top: 30px;
  text-align: center;
}
.pagination-area .page-numbers {
  width: 40px;
  height: 40px;
  margin: 0 3px;
  display: inline-block;
  background-color: #ffffff;
  line-height: 40px;
  color: #232323;
  box-shadow: 0 2px 10px 0 #d8dde6;
  font-size: 17px;
  font-weight: 600;
}
.pagination-area .page-numbers.current, .pagination-area .page-numbers:hover, .pagination-area .page-numbers:focus {
  background: green;
  color: #ffffff;
  box-shadow: unset;
}

/*================================================
Sidebar CSS
=================================================*/
.widget-area .widget {
  margin-top: 35px;
}
.widget-area .widget:first-child {
  margin-top: 0;
}
.widget-area .widget .widget-title {
  margin-bottom: 25px;
  font-size: 22px;
  border-left: 3px solid green;
  padding-left: 9px;
}
.widget-area .widget ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.widget-area .widget ul li {
  position: relative;
  margin-bottom: 12px;
  color: #232323;
  padding-left: 17px;
  line-height: 1.5;
  font-family: "Cairo", sans-serif;
}
.widget-area .widget ul li:last-child {
  margin-bottom: 0;
}
.widget-area .widget ul li::before {
  background: green;
  height: 7px;
  width: 7px;
  content: "";
  left: 0;
  top: 7px;
  position: absolute;
}
.widget-area .widget ul li a {
  color: #505050;
  font-weight: 500;
}
.widget-area .widget ul li a:hover, .widget-area .widget ul li a:focus {
  color: green;
}
.widget-area .widget_search form {
  position: relative;
}
.widget-area .widget_search form label {
  display: block;
}
.widget-area .widget_search form .screen-reader-text {
  display: none;
}
.widget-area .widget_search form .search-field {
  background-color: #f8f8f8;
  height: 50px;
  padding: 6px 18px;
  border: 1px solid #eeeeee;
  width: 100%;
  display: block;
  outline: 0;
  transition: 0.5s;
}
.widget-area .widget_search form .search-submit {
  position: absolute;
  cursor: pointer;
  top: 0;
  right: 0;
  background: green;
  outline: 0;
  border: none;
  color: #ffffff;
  height: 50px;
  padding: 0 20px;
  transition: 0.5s;
  font-size: 15px;
  font-weight: 500;
}
.widget-area .widget_search form .search-submit:hover {
  background: #232323;
  color: #ffffff;
}
.widget-area .widget_recent_entries ul li .post-date {
  display: block;
  font-size: 13px;
  color: #8a8a8a;
  margin-top: 4px;
}
.widget-area .widget_recent_comments ul li {
  color: #8a8a8a;
}
.widget-area .widget_recent_comments ul li span {
  display: inline-block;
}
.widget-area .widget_recent_comments ul li a {
  display: inline-block;
}
.widget-area .widget_categories ul li a {
  display: inline-block;
}
.widget-area .widget_categories ul li .post-count {
  float: right;
}
.widget-area .tagcloud a {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 7px 10px;
  color: #8a8a8a;
  border: 1px solid #eeeeee;
  margin-top: 8px;
  margin-right: 4px;
}
.widget-area .tagcloud a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  background: green;
  transition: 0.5s;
}
.widget-area .tagcloud a:hover, .widget-area .tagcloud a:focus {
  color: #ffffff;
  border-color: green;
}
.widget-area .tagcloud a:hover::before, .widget-area .tagcloud a:focus::before {
  opacity: 1;
  visibility: visible;
}
.widget-area .about_me .aboutMe {
  text-align: center;
}
.widget-area .about_me .aboutMe img {
  border-radius: 50%;
}
.widget-area .about_me .aboutMe h3 {
  font-size: 18px;
  text-transform: uppercase;
  margin-top: 25px;
  margin-bottom: 13px;
}
.widget-area .about_me .aboutMe ul {
  margin-bottom: 13px;
}
.widget-area .about_me .aboutMe ul li {
  padding: 0;
  margin: 0 2px;
  display: inline-block;
}
.widget-area .about_me .aboutMe ul li::before {
  display: none;
}
.widget-area .wiget_posts_thumbs article {
  margin-bottom: 12px;
  overflow: hidden;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 12px;
}
.widget-area .wiget_posts_thumbs article:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.widget-area .wiget_posts_thumbs article .thumb {
  float: left;
  padding-right: 13px;
}
.widget-area .wiget_posts_thumbs article .thumb .thumb-bg1 {
  background-image: url(../../assets/img/9.jpg);
}
.widget-area .wiget_posts_thumbs article .thumb .thumb-bg2 {
  background-image: url(../../assets/img/10.jpg);
}
.widget-area .wiget_posts_thumbs article .thumb .thumb-bg3 {
  background-image: url(../../assets/img/11.jpg);
}
.widget-area .wiget_posts_thumbs article .thumb .thumb-bg4 {
  background-image: url(../../assets/img/12.jpg);
}
.widget-area .wiget_posts_thumbs article .thumb .fullimage {
  width: 80px;
  height: 80px;
  display: block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.widget-area .wiget_posts_thumbs article .info time {
  display: block;
  font-size: 13px;
  color: #8a8a8a;
  text-transform: uppercase;
  margin-top: 5px;
  margin-bottom: 5px;
}
.widget-area .wiget_posts_thumbs article .info .title {
  font-size: 15px;
  margin-bottom: 0;
  line-height: 1.5;
}
.widget-area .wiget_posts_thumbs article .info .title a {
  color: #232323;
}
.widget-area .wiget_posts_thumbs article .info .title a:hover {
  color: green;
}
.widget-area .newsletter_box .newsletter-box {
  margin-top: 0;
  margin-bottom: 0;
}

/*================================================
News Details CSS
=================================================*/
.news-details-area {
  padding-top: 5px;
}

.news-details .article-img img {
  width: 100%;
}
.news-details .article-content {
  padding: 30px 30px 35px 0;
  border: 1px solid #bcbcbc;
}
.news-details .article-content .entry-meta {
  padding: 0;
  margin: 0 0 20px;
  list-style-type: none;
}
.news-details .article-content .entry-meta li {
  display: inline-block;
  color: #8a8a8a;
  margin-right: 12px;
}
.news-details .article-content .entry-meta li i {
  color: green;
  margin-right: 3px;
}
.news-details .article-content .entry-meta li:last-child {
  margin-right: 0;
}
.news-details .article-content .entry-meta li a {
  display: inline-block;
  color: #8a8a8a;
}
.news-details .article-content .entry-meta li a:hover {
  color: green;
}
.news-details .article-content h3 {
  margin-bottom: 15px;
  font-size: 22px;
  line-height: 1.4;
}
.news-details .article-content .category {
  padding: 0;
  margin: 30px 0 0;
  list-style-type: none;
}
.news-details .article-content .category li {
  display: inline-block;
  margin-right: 4px;
}
.news-details .article-content .category li span {
  font-weight: 600;
}
.news-details .article-content .category li a {
  border: 1px solid green;
  border-radius: 5px;
  padding: 4px 15px;
  font-size: 13px;
  color: green;
  position: relative;
  z-index: 1;
}
.news-details .article-content .category li a::before {
  position: absolute;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: green;
  z-index: -1;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
.news-details .article-content .category li a:hover, .news-details .article-content .category li a:focus {
  color: #ffffff;
}
.news-details .article-content .category li a:hover::before, .news-details .article-content .category li a:focus::before {
  opacity: 1;
  visibility: visible;
}

blockquote {
  background-color: #fafafa;
  padding: 30px 30px 30px 70px !important;
  line-height: 25px;
  font-weight: 500;
  position: relative;
  margin: 20px 0;
}
blockquote::before {
  font-family: "IcoFont";
  content: "\efcd";
  position: absolute;
  left: 30px;
  top: 35px;
  color: green;
  font-size: 25px;
  font-style: normal;
}
blockquote p {
  font-weight: 600;
}
blockquote cite {
  position: relative;
  padding-left: 17px;
  font-family: "Cairo", sans-serif;
}
blockquote cite::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: green;
  left: 0;
  width: 10px;
  height: 2px;
}

.post-controls-buttons {
  overflow: hidden;
  padding: 30px;
  border: 1px solid #eeeeee;
  margin-top: 30px;
  margin-bottom: 30px;
}
.post-controls-buttons div:first-child {
  float: left;
}
.post-controls-buttons div:last-child {
  float: right;
}
.post-controls-buttons div a {
  display: inline-block;
  border: 1px solid #eeeeee;
  padding: 9px 20px;
  border-radius: 5px;
  color: #232323;
  position: relative;
  z-index: 1;
  font-weight: 600;
}
.post-controls-buttons div a::before {
  position: absolute;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: green;
  z-index: -1;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
.post-controls-buttons div a:hover, .post-controls-buttons div a:focus {
  border-color: green;
  color: #ffffff;
}
.post-controls-buttons div a:hover::before, .post-controls-buttons div a:focus::before {
  opacity: 1;
  visibility: visible;
}

.comments-area .comments-title {
  font-size: 22px;
  margin-bottom: 25px;
  margin-top: 30px;
}
.comments-area ol, .comments-area ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.comments-area .comment-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.comments-area .children {
  margin-left: 65px;
}
.comments-area .comment-body {
  border-bottom: 1px solid #eeeeee;
  margin-left: 65px;
  color: #232323;
  font-size: 14px;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.comments-area .comment-body .reply {
  margin-top: 15px;
}
.comments-area .comment-body .reply a {
  border: 1px solid green;
  color: green;
  display: inline-block;
  padding: 5px 20px 6px;
  border-radius: 30px;
  font-size: 13px;
  position: relative;
  z-index: 1;
}
.comments-area .comment-body .reply a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: green;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  border-radius: 30px;
  z-index: -1;
}
.comments-area .comment-body .reply a:hover {
  color: #ffffff;
}
.comments-area .comment-body .reply a:hover::before {
  opacity: 1;
  visibility: visible;
}
.comments-area .comment-meta {
  margin-bottom: 1em;
}
.comments-area .comment-author {
  font-size: 15px;
  margin-bottom: 0.4em;
  position: relative;
  z-index: 2;
}
.comments-area .comment-author .avatar {
  height: 50px;
  left: -65px;
  position: absolute;
  width: 50px;
}
.comments-area .comment-author .fn {
  font-family: "Cairo", sans-serif;
}
.comments-area .comment-author .says {
  display: none;
}
.comments-area .comment-metadata {
  color: #8a8a8a;
  text-transform: uppercase;
  font-size: 13px;
}
.comments-area .comment-metadata a {
  color: #8a8a8a;
}
.comments-area .comment-metadata a:hover {
  color: green;
}
.comments-area .comment-content p {
  font-size: 14px;
}
.comments-area .comment-respond {
  background: #fafafa;
  padding: 30px 25px;
  overflow: hidden;
  border: 1px solid #eeeeee;
}
.comments-area .comment-respond .comment-reply-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
}
.comments-area .comment-respond .comment-reply-title #cancel-comment-reply-link {
  font-size: 15px;
  display: inline-block;
}
.comments-area .comment-respond .comment-notes {
  font-size: 15px;
  margin-bottom: 0;
  margin-top: 10px;
}
.comments-area .comment-respond .comment-notes .required {
  color: red;
}
.comments-area .comment-respond .comment-form-comment {
  margin-top: 15px;
  float: left;
  width: 100%;
}
.comments-area .comment-respond label {
  display: block;
  margin-bottom: 10px;
  color: #232323;
}
.comments-area .comment-respond input[type=date], .comments-area .comment-respond input[type=time], .comments-area .comment-respond input[type=datetime-local], .comments-area .comment-respond input[type=week], .comments-area .comment-respond input[type=month], .comments-area .comment-respond input[type=text], .comments-area .comment-respond input[type=email], .comments-area .comment-respond input[type=url], .comments-area .comment-respond input[type=password], .comments-area .comment-respond input[type=search], .comments-area .comment-respond input[type=tel], .comments-area .comment-respond input[type=number], .comments-area .comment-respond textarea {
  display: block;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  padding: 0.625em 0.7375em;
  outline: 0;
  transition: 0.5s;
}
.comments-area .comment-respond input[type=date]:focus, .comments-area .comment-respond input[type=time]:focus, .comments-area .comment-respond input[type=datetime-local]:focus, .comments-area .comment-respond input[type=week]:focus, .comments-area .comment-respond input[type=month]:focus, .comments-area .comment-respond input[type=text]:focus, .comments-area .comment-respond input[type=email]:focus, .comments-area .comment-respond input[type=url]:focus, .comments-area .comment-respond input[type=password]:focus, .comments-area .comment-respond input[type=search]:focus, .comments-area .comment-respond input[type=tel]:focus, .comments-area .comment-respond input[type=number]:focus, .comments-area .comment-respond textarea:focus {
  border-color: green;
}
.comments-area .comment-respond .comment-form-author {
  float: left;
  width: 50%;
  padding-right: 10px;
  margin-bottom: 20px;
}
.comments-area .comment-respond .comment-form-email {
  float: left;
  width: 50%;
  padding-left: 12px;
  margin-bottom: 20px;
}
.comments-area .comment-respond .comment-form-url {
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
.comments-area .comment-respond .comment-form-cookies-consent {
  width: 100%;
  float: left;
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
}
.comments-area .comment-respond .comment-form-cookies-consent input {
  position: absolute;
  left: 0;
  top: 7px;
}
.comments-area .comment-respond .comment-form-cookies-consent label {
  display: inline-block;
  margin: 0;
  color: #8a8a8a;
  font-weight: normal;
}
.comments-area .comment-respond .form-submit {
  float: left;
  width: 100%;
}
.comments-area .comment-respond .form-submit input {
  background: green;
  border: 1px solid green;
  color: #ffffff;
  padding: 11px 25px;
  display: inline-block;
  cursor: pointer;
  outline: 0;
  border-radius: 0;
  text-transform: uppercase;
  transition: 0.5s;
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 14px;
}
.comments-area .comment-respond .form-submit input:hover, .comments-area .comment-respond .form-submit input:focus {
  opacity: 0.5;
}

/*================================================
Instagram CSS
=================================================*/
.instagram-title {
  text-align: center;
  margin-bottom: 25px;
}
.instagram-title h2 {
  font-size: 28px;
  margin-bottom: 5px;
}
.instagram-title h2 a {
  color: #232323;
}
.instagram-title h2 a:hover {
  color: green;
}

.instagram-item {
  position: relative;
  overflow: hidden;
}
.instagram-item img {
  transition: 0.5s;
}
.instagram-item::before {
  background: #000000;
  opacity: 0;
  visibility: hidden;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  transition: 0.5s;
  z-index: 2;
  top: 0;
}
.instagram-item .instagram-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
.instagram-item .instagram-content span {
  display: inline-block;
  margin: 0 6px;
  color: #ffffff;
}
.instagram-item .instagram-content span i {
  margin-right: 2px;
}
.instagram-item .link-btn {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.instagram-item:hover img, .instagram-item:focus img {
  transform: scale(1.3);
}
.instagram-item:hover::before, .instagram-item:focus::before {
  opacity: 0.44;
  visibility: visible;
}
.instagram-item:hover .instagram-content, .instagram-item:focus .instagram-content {
  opacity: 1;
  visibility: visible;
}

/*================================================
Coming Soon CSS
=================================================*/
.coming-soon-area {
  position: relative;
  z-index: 1;
  height: 100vh;
  background-image: url(../../assets/img/coming-soon.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.coming-soon-area::before {
  z-index: -1;
  background: linear-gradient(-9deg, #6a82fb 0%, #6a82fb 40%, #fc5c7d 100%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.8;
}
.coming-soon-area .social-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  bottom: 30px;
}
.coming-soon-area .social-list li {
  display: inline-block;
}
.coming-soon-area .social-list li.list-heading {
  display: block;
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
.coming-soon-area .social-list li a {
  width: 35px;
  height: 35px;
  line-height: 35px;
  background: green;
  color: #ffffff;
  border-radius: 50%;
  margin: 0 2px;
}
.coming-soon-area .social-list li a svg {
  width: 15px;
}
.coming-soon-area .social-list li a.facebook {
  background-color: #3b5998;
}
.coming-soon-area .social-list li a.twitter {
  background-color: #1da1f2;
}
.coming-soon-area .social-list li a.linkedin {
  background-color: #0077b5;
}
.coming-soon-area .social-list li a.instagram {
  background-color: #c13584;
}
.coming-soon-area .social-list li a:hover, .coming-soon-area .social-list li a:focus {
  background-color: green;
}

.coming-soon-content {
  text-align: center;
  max-width: 820px;
  margin: -80px auto 0;
}
.coming-soon-content h1 {
  color: #ffffff;
  font-size: 55px;
  font-weight: 600;
  margin-bottom: 15px;
}
.coming-soon-content p {
  color: #ffffff;
  font-size: 16px;
  margin: 0 auto;
  max-width: 620px;
}
.coming-soon-content form {
  position: relative;
  margin: 35px auto 55px;
  max-width: 520px;
}
.coming-soon-content form .email-input {
  display: block;
  width: 100%;
  height: 56px;
  border: none;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 5px rgba(255, 255, 255, 0.3);
  border-radius: 40px;
  padding: 15px 25px;
  font-size: 16px;
  outline: 0 !important;
  background: #F1F2F3;
}
.coming-soon-content form .submit-btn {
  position: absolute;
  right: 3px;
  top: 3px;
  height: 50px;
  background: green;
  color: #ffffff;
  border: none;
  border-radius: 40px;
  width: 130px;
  outline: 0 !important;
  cursor: pointer;
  text-transform: uppercase;
  transition: 0.5s;
  font-size: 14px;
  font-weight: 500;
}
.coming-soon-content form .submit-btn:hover, .coming-soon-content form .submit-btn:focus {
  background-color: #232323;
}
.coming-soon-content #timer {
  font-family: "Cairo", sans-serif;
}
.coming-soon-content #timer div {
  background: #ffffff;
  display: inline-block;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  color: green;
  box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.5);
  margin: 0 10px;
  padding-top: 18px;
  font-size: 35px;
  font-weight: 500;
}
.coming-soon-content #timer div span {
  display: block;
  margin-top: -4px;
  color: #8a8a8a;
  font-size: 15px;
}

/*================================================
404 Error CSS
=================================================*/
.error-area {
  height: 100vh;
}

.error-content {
  text-align: center;
  margin-top: -70px;
}
.error-content .notfound-404 {
  position: relative;
  height: 280px;
  z-index: -1;
  margin-bottom: 30px;
}
.error-content .notfound-404 h1 {
  font-size: 230px;
  font-weight: 900;
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: url(../../assets/img/oops-bg.jpg) no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: cover;
  background-position: center;
}
.error-content h3 {
  font-weight: 600;
  font-size: 25px;
  margin-bottom: 15px;
}
.error-content p {
  max-width: 550px;
  margin: 0 auto 25px;
}

/*================================================
Login CSS
=================================================*/
.login-area {
  position: relative;
  z-index: 1;
  height: 100vh;
  background-image: url(../../assets/img/coming-soon.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.login-area::before {
  z-index: -1;
  background: linear-gradient(-9deg, #6a82fb 0%, #6a82fb 40%, #fc5c7d 100%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.8;
}

.login-form {
  background-color: #ffffff;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  position: relative;
  text-align: center;
  padding: 40px;
}
.login-form::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: #ffffff;
  width: 96%;
  opacity: 0.62;
  height: 50%;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 3px;
}
.login-form h3 {
  font-size: 24px;
  margin-bottom: 25px;
}
.login-form h3 a {
  display: inline-block;
  color: #232323;
}
.login-form h3 a:hover, .login-form h3 a:focus {
  color: green;
}
.login-form .row {
  margin-left: -10px;
  margin-right: -10px;
}
.login-form .row .col-lg-4 {
  padding-right: 10px;
  padding-left: 10px;
}
.login-form .row a {
  background-color: green;
  color: #ffffff;
  padding: 13px 10px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
}
.login-form .row a.facebook {
  background-color: #3C5A99;
}
.login-form .row a.twitter {
  background-color: #1da1f2;
}
.login-form .row a.google {
  background-color: #ea4335;
}
.login-form .row a:hover, .login-form .row a:focus {
  opacity: 0.8;
}
.login-form .login-or {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.login-form .login-or span {
  display: block;
  position: absolute;
  left: 50%;
  font-size: 18px;
  top: 12px;
  margin-left: -25px;
  background-color: #ffffff;
  color: #aaaaaa;
  width: 50px;
}
.login-form form .form-group {
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}
.login-form form .form-group label {
  margin: 0;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 50px;
  line-height: 50px;
  border-right: 1px solid #eeeeee;
}
.login-form form .form-group .form-control {
  padding-left: 55px;
}
.login-form form .form-group .remember-me {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  line-height: initial;
  color: #8a8a8a;
  text-align: left;
  width: 50%;
  margin-top: 5px;
  border-right: none;
}
.login-form form .form-group .remember-me input[type=checkbox] {
  position: relative;
  top: 1px;
}
.login-form form .form-group .forgot-password {
  float: right;
  width: 50%;
  color: #8a8a8a;
  text-align: right;
  margin-top: 3px;
}
.login-form form .form-group .forgot-password:hover, .login-form form .form-group .forgot-password:focus {
  color: green;
}
.login-form form .btn {
  border-radius: 0;
  display: block;
  width: 100%;
  font-size: 15px;
  letter-spacing: 0.5px;
  margin-top: 20px;
}

/*================================================
Sign Up CSS
=================================================*/
.signup-area {
  position: relative;
  z-index: 1;
  height: 100vh;
  background-image: url(../../assets/img/coming-soon.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.signup-area::before {
  z-index: -1;
  background: linear-gradient(-9deg, #6a82fb 0%, #6a82fb 40%, #fc5c7d 100%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.8;
}

.signup-form {
  background-color: #ffffff;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.08);
  position: relative;
  text-align: center;
  padding: 40px;
}
.signup-form::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: #ffffff;
  width: 96%;
  opacity: 0.62;
  height: 50%;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 3px;
}
.signup-form h3 {
  font-size: 24px;
  margin-bottom: 25px;
}
.signup-form h3 a {
  display: inline-block;
  color: #232323;
}
.signup-form h3 a:hover, .signup-form h3 a:focus {
  color: green;
}
.signup-form .row {
  margin-left: -10px;
  margin-right: -10px;
}
.signup-form .row .col-lg-4 {
  padding-right: 10px;
  padding-left: 10px;
}
.signup-form .row a {
  background-color: green;
  color: #ffffff;
  padding: 13px 10px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
}
.signup-form .row a.facebook {
  background-color: #3C5A99;
}
.signup-form .row a.twitter {
  background-color: #1da1f2;
}
.signup-form .row a.google {
  background-color: #ea4335;
}
.signup-form .row a:hover, .signup-form .row a:focus {
  opacity: 0.8;
}
.signup-form .signup-or {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.signup-form .signup-or span {
  display: block;
  position: absolute;
  left: 50%;
  font-size: 18px;
  top: 12px;
  margin-left: -25px;
  background-color: #ffffff;
  color: #aaaaaa;
  width: 50px;
}
.signup-form form .form-group {
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}
.signup-form form .form-group label {
  margin: 0;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 50px;
  line-height: 50px;
  border-right: 1px solid #eeeeee;
}
.signup-form form .form-group .form-control {
  padding-left: 55px;
}
.signup-form form .form-group .remember-me {
  position: relative;
  float: left;
  height: 100%;
  line-height: initial;
  color: #8a8a8a;
  text-align: left;
  width: 100%;
  margin-top: 5px;
  border-right: none;
}
.signup-form form .form-group .remember-me input[type=checkbox] {
  position: relative;
  top: 1px;
}
.signup-form form .btn {
  border-radius: 0;
  display: block;
  width: 100%;
  font-size: 15px;
  letter-spacing: 0.5px;
  margin-top: 20px;
}

/*================================================
Author CSS
=================================================*/
.author-box {
  position: relative;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
  background-color: #ffffff;
  padding: 40px 40px 40px 175px;
}
.author-box img {
  width: 200px;
  background: #f9f9f9;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.author-box .author-info h3 {
  font-size: 22px;
  margin-bottom: 10px;
}
.author-box .author-info span {
  display: block;
  margin-bottom: 12px;
}
.author-box .author-info span a {
  color: green;
}
.author-box .author-info span a:hover, .author-box .author-info span a:focus {
  color: green;
}
.author-box .author-info p {
  margin-bottom: 20px;
  max-width: 720px;
}
.author-box .author-info ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.author-box .author-info ul.post-meta-info li {
  display: inline-block;
  margin-right: 12px;
}
.author-box .author-info ul.post-meta-info li:last-child {
  margin-right: 0;
}
.author-box .author-info ul.post-meta-info li a {
  color: #232323;
}
.author-box .author-info ul.post-meta-info li a:hover, .author-box .author-info ul.post-meta-info li a:focus {
  color: green;
}
.author-box .author-info ul.social {
  position: absolute;
  right: 40px;
  top: 40px;
}
.author-box .author-info ul.social li {
  display: inline-block;
  margin-left: 15px;
}
.author-box .author-info ul.social li a {
  color: green;
}
.author-box .author-info ul.social li a.facebook {
  color: #3b5998;
}
.author-box .author-info ul.social li a.twitter {
  color: #1da1f2;
}
.author-box .author-info ul.social li a.linkedin {
  color: #007bb6;
}
.author-box .author-info ul.social li a.instagram {
  color: #e1306c;
}
.author-box .author-info ul.social li a:hover, .author-box .author-info ul.social li a:focus {
  transform: translateY(-5px);
}
.author-box .author-info ul.social li:first-child {
  margin-left: 0;
}

/*================================================
Contact CSS
=================================================*/
.contact-form h3 {
  font-size: 24px;
  margin-bottom: 25px;
}
.contact-form form .form-control:focus {
  border-color: green !important;
}
.contact-form form .btn {
  border-radius: 0;
  margin-top: 15px;
}
.contact-form form .with-errors {
  margin-top: 10px;
  font-family: "Cairo", sans-serif;
}
.contact-form form .with-errors ul li {
  color: red;
}
.contact-form form #msgSubmit {
  margin: 0;
}
.contact-form form .text-danger, .contact-form form .text-success {
  margin-top: 15px !important;
}
.contact-form form textarea.form-control {
  height: 200px;
}

.contact-info h3 {
  font-size: 24px;
  margin-bottom: 12px;
}
.contact-info p {
  margin-bottom: 25px;
}
.contact-info ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.contact-info ul li {
  margin-bottom: 12px;
  color: #8a8a8a;
}
.contact-info ul li a {
  display: inline-block;
  color: #8a8a8a;
}
.contact-info ul li a:hover {
  color: green;
}
.contact-info ul li i {
  color: green;
  margin-right: 3px;
}
.contact-info ul li:last-child {
  margin-bottom: 0;
}

/*================================================
Footer CSS
=================================================*/
.footer-area {
  background-color: #232323;
  padding-top: 60px;
}

.single-footer-widget h3 {
  font-size: 22px;
  color: #ffffff;
  margin-bottom: 35px;
}
.single-footer-widget .contact-info {
  margin-bottom: 0;
}
.single-footer-widget .contact-info p {
  margin-top: -5px;
  color: #cccccc;
}
.single-footer-widget .contact-info ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.single-footer-widget .contact-info ul li {
  color: #cccccc;
  margin-bottom: 12px;
  position: relative;
  padding-left: 22px;
}
.single-footer-widget .contact-info ul li i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.single-footer-widget .contact-info ul li a {
  display: inline-block;
  color: #cccccc;
}
.single-footer-widget .contact-info ul li a:hover, .single-footer-widget .contact-info ul li a:focus {
  color: green;
}
.single-footer-widget .contact-info ul li:last-child {
  margin-bottom: 0;
}
.single-footer-widget .connect-social {
  margin-top: 20px;
}
.single-footer-widget .connect-social p {
  color: #cccccc;
  margin-bottom: 15px;
}
.single-footer-widget .connect-social ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.single-footer-widget .connect-social ul li {
  display: inline-block;
}
.single-footer-widget .connect-social ul li a {
  background-color: #2d2d2d;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
}
.single-footer-widget .connect-social ul li a:hover, .single-footer-widget .connect-social ul li a:focus {
  background-color: green;
  color: #ffffff;
}
.single-footer-widget .latest-news-media {
  margin-top: 20px;
  display: flex;
}
.single-footer-widget .latest-news-media:first-child {
  margin-top: 0;
}
.single-footer-widget .latest-news-media a img {
  transition: 0.5s;
  width: 95px;
}
.single-footer-widget .latest-news-media .content {
  padding: 10px 15px;
}
.single-footer-widget .latest-news-media .content ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.single-footer-widget .latest-news-media .content ul li {
  display: inline-block;
  font-size: 14px;
  color: #cccccc;
  margin-right: 12px;
}
.single-footer-widget .latest-news-media .content ul li i {
  color: green;
  margin-right: 3px;
}
.single-footer-widget .latest-news-media .content ul li a {
  display: inline-block;
  color: #cccccc;
}
.single-footer-widget .latest-news-media .content ul li a:hover, .single-footer-widget .latest-news-media .content ul li a:focus {
  color: green;
}
.single-footer-widget .latest-news-media .content ul li:last-child {
  margin-right: 0;
}
.single-footer-widget .latest-news-media .content h3 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 0;
  margin-top: 8px;
}
.single-footer-widget .latest-news-media .content h3 a {
  color: #cccccc;
}
.single-footer-widget .latest-news-media .content h3 a:hover, .single-footer-widget .latest-news-media .content h3 a:focus {
  color: green;
}
.single-footer-widget .latest-news-media:hover a img, .single-footer-widget .latest-news-media:focus a img {
  opacity: 0.8;
}
.single-footer-widget .twitter-tweet-list .single-tweet {
  position: relative;
  padding-left: 30px;
  margin-top: 20px;
}
.single-footer-widget .twitter-tweet-list .single-tweet i {
  color: #0091ea;
  font-size: 20px;
  position: absolute;
  top: 3px;
  left: 0;
}
.single-footer-widget .twitter-tweet-list .single-tweet span {
  color: green;
  display: block;
  margin-bottom: 5px;
}
.single-footer-widget .twitter-tweet-list .single-tweet p {
  color: #cccccc;
  font-size: 14px;
}
.single-footer-widget .twitter-tweet-list .single-tweet p a {
  display: inline-block;
  color: #ffffff;
}
.single-footer-widget .twitter-tweet-list .single-tweet p a:hover, .single-footer-widget .twitter-tweet-list .single-tweet p a:focus {
  color: green;
}
.single-footer-widget .twitter-tweet-list .single-tweet:first-child {
  margin-top: 0;
}

.copyright-area {
  background-color: #212121;
  padding-top: 30px;
  padding-bottom: 30px;
}
.copyright-area p {
  color: #ffffff;
  margin: 0;
}
.copyright-area p a {
  display: inline-block;
  color: #ffffff;
}
.copyright-area .footer-nav {
  text-align: right;
  padding: 0;
  list-style-type: none;
  margin: 0;
}
.copyright-area .footer-nav li {
  display: inline-block;
  margin-left: 15px;
}
.copyright-area .footer-nav li:first-child {
  margin-left: 0;
}
.copyright-area .footer-nav li a {
  color: #cccccc;
}
.copyright-area .footer-nav li a:hover, .copyright-area .footer-nav li a:focus {
  color: green;
}

/*================================================
Go Top CSS
=================================================*/
.go-top {
  position: fixed;
  cursor: pointer;
  bottom: 15px;
  right: 15px;
  font-size: 20px;
  color: #ffffff;
  background-color: #232323;
  z-index: 4;
  display: none;
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  transition: 0.5s;
}
.go-top:hover {
  color: #ffffff;
  background: green;
}

/*# sourceMappingURL=style.css.map */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
img, legend {
    border: 0
}

legend, td, th {
    padding: 0
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, optgroup, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre, textarea {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.align, .bookSlider .btn, .coverDesign h1, .coverDesign p, .ribbon {
    text-align: center
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0
}

::after, ::before {
    content: ""
}

.bookSlider ul {
    padding: 0;
    list-style: none
}

.bookSlider .bookSlider a {
    color: #2c3e50;
    text-decoration: none
}

.bookSlider .bookTitle {
    height: 100px;
    padding: 15px;
    word-wrap: break-word
}

.bookSlider .btn {
    display: inline-block;
    text-transform: uppercase;
    border: 2px solid #2c3e50;
    margin-top: 10px;
    font-size: .7em;
    font-weight: 700;
    padding: .1em .4em;
    -webkit-transition: color .3s, border-color .3s;
    -moz-transition: color .3s, border-color .3s;
    transition: color .3s, border-color .3s
}

.bookSlider .btn:hover {
    border-color: #16a085;
    color: #16a085
}

.align {
    clear: both;
    width: 100%;
    max-width: 1170px;
    margin: 40px 0 0 -55px
}

.align > li {
    width: auto;
    min-height: 300px;
    display: inline-block;
    margin: 30px 40px 30px 65px;
    padding: 0 0 0 60px;
    vertical-align: top
}

.book {
    position: relative;
    width: 160px;
    height: 220px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.hardcover_front li:first-child {
    background-color: #eee;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden
}

.coverDesign, .ribbon {
    -webkit-backface-visibility: hidden
}

.hardcover_back li:first-child, .hardcover_back li:last-child, .hardcover_front li:last-child {
    background: #fffbec
}

.book_spine li:first-child {
    background: #eee
}

.book_spine li:last-child {
    background: #333
}

.book_spine li:first-child:after, .book_spine li:first-child:before, .book_spine li:last-child:after, .book_spine li:last-child:before, .hardcover_back li:first-child:after, .hardcover_back li:first-child:before, .hardcover_back li:last-child:after, .hardcover_back li:last-child:before, .hardcover_front li:first-child:after, .hardcover_front li:first-child:before, .hardcover_front li:last-child:after, .hardcover_front li:last-child:before {
    background: #999;
    position: absolute;
    top: 0;
    left: 0
}

.page > li {
    background: -webkit-linear-gradient(left, #e1ddd8 0, #fffbf6 100%);
    background: -moz-linear-gradient(left, #e1ddd8 0, #fffbf6 100%);
    background: -ms-linear-gradient(left, #e1ddd8 0, #fffbf6 100%);
    background: linear-gradient(left, #e1ddd8 0, #fffbf6 100%);
    box-shadow: inset 0 -1px 2px rgba(50, 50, 50, .1), inset -1px 0 1px rgba(150, 150, 150, .2);
    border-radius: 0 5px 5px 0
}

.hardcover_front {
    -webkit-transform: rotateY(-34deg) translateZ(8px);
    -moz-transform: rotateY(-34deg) translateZ(8px);
    transform: rotateY(-34deg) translateZ(8px);
    z-index: 100;
    -webkit-transition: all .8s ease, z-index .6s;
    -moz-transition: all .8s ease, z-index .6s;
    transition: all .8s ease, z-index .6s
}

.hardcover_back {
    -webkit-transform: rotateY(-15deg) translateZ(-8px);
    -moz-transform: rotateY(-15deg) translateZ(-8px);
    transform: rotateY(-15deg) translateZ(-8px)
}

.page li:nth-child(1) {
    -webkit-transform: rotateY(-28deg);
    -moz-transform: rotateY(-28deg);
    transform: rotateY(-28deg)
}

.page li:nth-child(2) {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg)
}

.page li:nth-child(3) {
    -webkit-transform: rotateY(-32deg);
    -moz-transform: rotateY(-32deg);
    transform: rotateY(-32deg)
}

.page li:nth-child(4) {
    -webkit-transform: rotateY(-34deg);
    -moz-transform: rotateY(-34deg);
    transform: rotateY(-34deg)
}

.page li:nth-child(5) {
    -webkit-transform: rotateY(-36deg);
    -moz-transform: rotateY(-36deg);
    transform: rotateY(-36deg)
}

.book_spine, .book_spine li, .hardcover_back, .hardcover_back li, .hardcover_front, .hardcover_front li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.hardcover_back, .hardcover_front {
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    transform-origin: 0 100%
}

.hardcover_front li:first-child {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    transform: translateZ(2px)
}

.hardcover_front li:last-child {
    -webkit-transform: rotateY(180deg) translateZ(2px);
    -moz-transform: rotateY(180deg) translateZ(2px);
    transform: rotateY(180deg) translateZ(2px)
}

.hardcover_back li:first-child {
    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    transform: translateZ(2px)
}

.hardcover_back li:last-child {
    -webkit-transform: translateZ(-2px);
    -moz-transform: translateZ(-2px);
    transform: translateZ(-2px)
}

.hardcover_front li:first-child:after, .hardcover_front li:first-child:before {
    width: 4px;
    height: 100%
}

.hardcover_front li:first-child:after {
    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    transform: rotateY(90deg) translateZ(-2px) translateX(2px)
}

.hardcover_front li:first-child:before {
    -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
    transform: rotateY(90deg) translateZ(158px) translateX(2px)
}

.hardcover_front li:last-child:after, .hardcover_front li:last-child:before {
    width: 4px;
    height: 160px
}

.hardcover_front li:last-child:after {
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px)
}

.hardcover_front li:last-child:before {
    box-shadow: 0 0 30px 5px #333;
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px)
}

.hardcover_back li:first-child:after, .hardcover_back li:first-child:before {
    width: 4px;
    height: 100%
}

.hardcover_back li:first-child:after {
    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    transform: rotateY(90deg) translateZ(-2px) translateX(2px)
}

.hardcover_back li:first-child:before {
    -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
    transform: rotateY(90deg) translateZ(158px) translateX(2px)
}

.hardcover_back li:last-child:after, .hardcover_back li:last-child:before {
    width: 4px;
    height: 160px
}

.hardcover_back li:last-child:after {
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px)
}

.hardcover_back li:last-child:before {
    box-shadow: 10px -1px 80px 20px #666;
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px)
}

.book_spine {
    -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
    -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
    transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
    width: 16px;
    z-index: 0
}

.book_spine li:first-child {
    -webkit-transform: translateZ(2px);
    -moz-transform: translateZ(2px);
    transform: translateZ(2px)
}

.book_spine li:last-child {
    -webkit-transform: translateZ(-2px);
    -moz-transform: translateZ(-2px);
    transform: translateZ(-2px)
}

.book_spine li:first-child:after, .book_spine li:first-child:before {
    width: 4px;
    height: 100%
}

.book_spine li:first-child:after {
    -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
    transform: rotateY(90deg) translateZ(-2px) translateX(2px)
}

.book_spine li:first-child:before {
    -webkit-transform: rotateY(-90deg) translateZ(-12px);
    -moz-transform: rotateY(-90deg) translateZ(-12px);
    transform: rotateY(-90deg) translateZ(-12px)
}

.book_spine li:last-child:after, .book_spine li:last-child:before {
    width: 4px;
    height: 16px
}

.book_spine li:last-child:after {
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px)
}

.book_spine li:last-child:before {
    box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, .2);
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px)
}

.page, .page > li {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.page {
    width: 100%;
    height: 98%;
    top: 1%;
    left: 3%;
    z-index: 10
}

.bx-wrapper img, .page > li {
    height: 100%;
    width: 100%
}

.coverDesign, .coverDesign::after {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute
}

.page > li {
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition-property: transform;
    -moz-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    transition-timing-function: ease
}

.page > li:nth-child(1), .page > li:nth-child(2) {
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    transition-duration: .6s
}

.page > li:nth-child(3) {
    -webkit-transition-duration: .4s;
    -moz-transition-duration: .4s;
    transition-duration: .4s
}

.page > li:nth-child(4) {
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    transition-duration: .5s
}

.page > li:nth-child(5) {
    -webkit-transition-duration: .6s;
    -moz-transition-duration: .6s;
    transition-duration: .6s
}

.book:hover > .hardcover_front {
    -webkit-transform: rotateY(-145deg) translateZ(0);
    -moz-transform: rotateY(-145deg) translateZ(0);
    transform: rotateY(-145deg) translateZ(0);
    z-index: 0
}

.book:hover > .page li:nth-child(1) {
    -webkit-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    transform: rotateY(-30deg);
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    transition-duration: 1.5s
}

.book:hover > .page li:nth-child(2) {
    -webkit-transform: rotateY(-35deg);
    -moz-transform: rotateY(-35deg);
    transform: rotateY(-35deg);
    -webkit-transition-duration: 1.8s;
    -moz-transition-duration: 1.8s;
    transition-duration: 1.8s
}

.book:hover > .page li:nth-child(3) {
    -webkit-transform: rotateY(-118deg);
    -moz-transform: rotateY(-118deg);
    transform: rotateY(-118deg);
    -webkit-transition-duration: 1.6s;
    -moz-transition-duration: 1.6s;
    transition-duration: 1.6s
}

.book:hover > .page li:nth-child(4) {
    -webkit-transform: rotateY(-130deg);
    -moz-transform: rotateY(-130deg);
    transform: rotateY(-130deg);
    -webkit-transition-duration: 1.4s;
    -moz-transition-duration: 1.4s;
    transition-duration: 1.4s
}

.book:hover > .page li:nth-child(5) {
    -webkit-transform: rotateY(-140deg);
    -moz-transform: rotateY(-140deg);
    transform: rotateY(-140deg);
    -webkit-transition-duration: 1.2s;
    -moz-transition-duration: 1.2s;
    transition-duration: 1.2s
}

.coverDesign {
    overflow: hidden;
    z-index: 1;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden
}

.coverDesign::after {
    background-image: -webkit-linear-gradient(-135deg, rgba(255, 255, 255, .45) 0, transparent 100%);
    background-image: -moz-linear-gradient(-135deg, rgba(255, 255, 255, .45) 0, transparent 100%);
    background-image: linear-gradient(-135deg, rgba(255, 255, 255, .45) 0, transparent 100%)
}

.coverDesign h1 {
    color: #fff;
    font-size: 1.2em;
    position: absolute;
    top: -9%;
    background: #000;
    padding: 10px 5px;
    width: 100%
}

.coverDesign p {
    color: #f8f8f8;
    font-size: 1em;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .1)
}

.yellow {
    background-color: #f1c40f;
    background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0);
    background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0);
    background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0)
}

.blue {
    background-color: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0);
    background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0);
    background-image: linear-gradient(top, #3498db 58%, #2a90d4 0)
}

.grey {
    background-color: #f8e9d1;
    background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0);
    background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0);
    background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0)
}

.ribbon {
    background: #c0392b;
    color: #fff;
    display: block;
    font-size: .7em;
    position: absolute;
    top: 11px;
    right: 1px;
    width: 40px;
    height: 20px;
    line-height: 20px;
    letter-spacing: .15em;
    -webkit-transform: rotateZ(45deg) translateZ(1px);
    -moz-transform: rotateZ(45deg) translateZ(1px);
    transform: rotateZ(45deg) translateZ(1px);
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 10
}

.ribbon::after, .ribbon::before {
    position: absolute;
    top: -20px;
    width: 0;
    height: 0;
    border-bottom: 20px solid #c0392b;
    border-top: 20px solid transparent
}

.ribbon::before {
    left: -20px;
    border-left: 20px solid transparent
}

.ribbon::after {
    right: -20px;
    border-right: 20px solid transparent
}

figcaption {
    padding-left: 40px;
    text-align: left;
    position: absolute;
    top: 0;
    left: 160px;
    width: 310px;
    -webkit-backface-visibility: hidden
}

figcaption h1 {
    margin: 0
}

figcaption span {
    color: #16a085;
    padding: .6em 0 1em;
    display: block
}

figcaption p {
    color: #63707d;
    line-height: 1.3
}

@media screen and (max-width: 37.8125em) {
    .align > li {
        width: 100%;
        min-height: 290px;
        height: auto;
        padding: 0;
        margin: 0 30px 30px
    }

    .book {
        margin: 0 auto
    }
}

@media screen and (max-width: 480px) {
    .bookSlider ul {
        margin-left: 30px
    }
}

@media screen and (max-width: 320px) {
    .bookSlider ul {
        margin-left: 13px
    }
}

.bx-wrapper {
    position: relative;
    margin: 0 auto;
    padding: 0
}

.bx-wrapper img {
    max-width: 100%;
    display: block
}

.bx-wrapper .bx-viewport {
    border: 5px solid transparent;
    left: -5px;
    background: 0 0;
    direction: ltr;
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0)
}

.bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager {
    position: absolute;
    bottom: -30px;
    width: 100%
}

.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: 700;
    color: #666;
    padding-top: 20px;
    display: none
}

.bx-wrapper .bx-controls-auto .bx-controls-auto-item, .bx-wrapper .bx-pager .bx-pager-item {
    display: inline-block
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #666;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:hover {
    background: #000
}

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(https://www.kutub.info/frontEnd/img/controls.png) 0 -32px no-repeat
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(https://www.kutub.info/frontEnd/img/controls.png) -43px -32px no-repeat
}

.bx-wrapper .bx-prev:hover {
    background-position: 0 0
}

.bx-wrapper .bx-next:hover {
    background-position: -43px 0
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 1
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none
}

.bx-wrapper .bx-controls-auto {
    text-align: center
}

.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url(https://www.kutub.info/frontEnd/img/controls.png) -86px -11px no-repeat;
    margin: 0 3px
}

.bx-wrapper .bx-controls-auto .bx-start.active, .bx-wrapper .bx-controls-auto .bx-start:hover {
    background-position: -86px 0
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(https://www.kutub.info/frontEnd/img/controls.png) -86px -44px no-repeat;
    margin: 0 3px
}

.bx-wrapper .bx-controls-auto .bx-stop.active, .bx-wrapper .bx-controls-auto .bx-stop:hover {
    background-position: -86px -33px
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px
}

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666 \9;
    background: rgba(80, 80, 80, .75);
    width: 100%
}

.bx-wrapper .bx-caption span {
    color: #fff;
    font-family: Arial;
    display: block;
    font-size: .85em;
    padding: 10px
}

*, :after, :before {
    box-sizing: border-box
}

body {
    overflow-x: hidden
}

.bee3D--parent {
    -webkit-perspective: 600px;
    perspective: 600px
}

.bee3D--slide {
    position: absolute;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    width: 512px;
    height: 380px;
    top: 50%;
    left: 50%;
    margin-left: -256px;
    margin-top: -190px;
    opacity: 0;
    -webkit-transition: opacity .7s ease, -webkit-transform .7s ease;
    transition: opacity .7s ease, transform .7s ease
}

.bee3D--slide__inactive {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.bee3D--slide__active {
    opacity: 1;
    z-index: 1
}

.bee3D--inner {
    position: relative;
    width: 100%;
    height: 100%
}

.draggable {
    cursor: move;
    cursor: grab;
    cursor: -webkit-grab
}

.draggable:active {
    cursor: grabbing;
    cursor: -webkit-grabbing
}

.bee3D--parallax {
    position: relative !important
}

.bee3D--shadow-wrapper {
    position: absolute;
    z-index: -1;
    left: 0;
    width: 100%;
    height: 100px
}

.bee3D--shadow > span {
    display: block;
    content: '';
    left: 0;
    width: 100%;
    height: 200px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    box-shadow: 0 0 200px 50px rgba(0, 0, 0, .7);
    -webkit-transition: opacity 1.5s;
    transition: opacity 1.5s;
    opacity: .15;
    -webkit-transform: rotateX(95deg) translateZ(30px) scale(.55);
    transform: rotateX(95deg) translateZ(30px) scale(.55)
}

.bee3D--nav {
    position: absolute;
    cursor: pointer;
    top: 50%;
    font-size: 8em;
    color: rgba(0, 0, 0, .45);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: color .7s ease;
    transition: color .7s ease;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 40px
}

.bee3D--nav__prev {
    background-image: url(https://www.kutub.info/frontEnd/img/angle-left.svg);
    left: 3%
}

.bee3D--nav__next {
    background-image: url(https://www.kutub.info/frontEnd/img/angle-right.svg);
    right: 3%
}

.bee3D--effect__classic .bee3D--before {
    -webkit-transform: translate3d(-1920px, 0, 0);
    transform: translate3d(-1920px, 0, 0)
}

.bee3D--effect__classic .bee3D--before-2 {
    -webkit-transform: translate3d(-1280px, 0, 0);
    transform: translate3d(-1280px, 0, 0);
    opacity: .1
}

.bee3D--effect__classic .bee3D--before-1 {
    -webkit-transform: translate3d(-640px, 0, 0);
    transform: translate3d(-640px, 0, 0);
    opacity: .3
}

.bee3D--effect__classic .bee3D--after {
    -webkit-transform: translate3d(1920px, 0, 0);
    transform: translate3d(1920px, 0, 0)
}

.bee3D--effect__classic .bee3D--after-2 {
    -webkit-transform: translate3d(1280px, 0, 0);
    transform: translate3d(1280px, 0, 0);
    opacity: .1
}

.bee3D--effect__classic .bee3D--after-1 {
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
    opacity: .3
}

.bee3D--effect__carousel .bee3D--before {
    -webkit-transform: translateX(-980px) rotateY(-72deg) translateX(-1290px);
    transform: translateX(-980px) rotateY(-72deg) translateX(-1290px);
    opacity: 0
}

.bee3D--effect__carousel .bee3D--before-2 {
    -webkit-transform: translateX(-590px) rotateY(-52deg) translateX(-780px);
    transform: translateX(-590px) rotateY(-52deg) translateX(-780px);
    opacity: .3
}

.bee3D--effect__carousel .bee3D--before-1 {
    -webkit-transform: translateX(-270px) rotateY(-30deg) translateX(-290px);
    transform: translateX(-270px) rotateY(-30deg) translateX(-290px);
    opacity: .5
}

.bee3D--effect__carousel .bee3D--after {
    -webkit-transform: translateX(980px) rotateY(72deg) translateX(1290px);
    transform: translateX(980px) rotateY(72deg) translateX(1290px);
    opacity: 0
}

.bee3D--effect__carousel .bee3D--after-1 {
    -webkit-transform: translateX(270px) rotateY(30deg) translateX(290px);
    transform: translateX(270px) rotateY(30deg) translateX(290px);
    opacity: .5
}

.bee3D--effect__carousel .bee3D--after-2 {
    -webkit-transform: translateX(590px) rotateY(52deg) translateX(780px);
    transform: translateX(590px) rotateY(52deg) translateX(780px);
    opacity: .3
}

.bee3D--effect__concave .bee3D--before {
    -webkit-transform: translateX(-800px) rotateY(90deg) translateX(-800px);
    transform: translateX(-800px) rotateY(90deg) translateX(-800px)
}

.bee3D--effect__concave .bee3D--before-1 {
    -webkit-transform: translateX(-310px) rotateY(28deg) translateX(-240px);
    transform: translateX(-310px) rotateY(28deg) translateX(-240px);
    opacity: .4
}

.bee3D--effect__concave .bee3D--after {
    -webkit-transform: translateX(800px) rotateY(-90deg) translateX(800px);
    transform: translateX(800px) rotateY(-90deg) translateX(800px)
}

.bee3D--effect__concave .bee3D--after-1 {
    -webkit-transform: translateX(310px) rotateY(-28deg) translateX(240px);
    transform: translateX(310px) rotateY(-28deg) translateX(240px);
    opacity: .4
}

.bee3D--effect__coverflow .bee3D--before {
    -webkit-transform: translateX(-270px) rotateY(45deg) scale(.6);
    transform: translateX(-270px) rotateY(45deg) scale(.6);
    z-index: 6
}

.bee3D--effect__coverflow .bee3D--before-3 {
    -webkit-transform: translateX(-230px) rotateY(45deg) scale(.6);
    transform: translateX(-230px) rotateY(45deg) scale(.6);
    opacity: .1;
    z-index: 7
}

.bee3D--effect__coverflow .bee3D--before-2 {
    -webkit-transform: translateX(-190px) rotateY(45deg) scale(.6);
    transform: translateX(-190px) rotateY(45deg) scale(.6);
    opacity: .2;
    z-index: 8
}

.bee3D--effect__coverflow .bee3D--before-1 {
    -webkit-transform: translateX(-150px) rotateY(45deg) scale(.6);
    transform: translateX(-150px) rotateY(45deg) scale(.6);
    opacity: .3;
    z-index: 9
}

.bee3D--effect__coverflow .bee3D__active {
    z-index: 10
}

.bee3D--effect__coverflow .bee3D--after {
    -webkit-transform: translateX(270px) rotateY(-45deg) scale(.6);
    transform: translateX(270px) rotateY(-45deg) scale(.6);
    z-index: 6
}

.bee3D--effect__coverflow .bee3D--after-1 {
    -webkit-transform: translateX(150px) rotateY(-45deg) scale(.6);
    transform: translateX(150px) rotateY(-45deg) scale(.6);
    opacity: .3;
    z-index: 9
}

.bee3D--effect__coverflow .bee3D--after-2 {
    -webkit-transform: translateX(190px) rotateY(-45deg) scale(.6);
    transform: translateX(190px) rotateY(-45deg) scale(.6);
    opacity: .2;
    z-index: 8
}

.bee3D--effect__coverflow .bee3D--after-3 {
    -webkit-transform: translateX(230px) rotateY(-45deg) scale(.6);
    transform: translateX(230px) rotateY(-45deg) scale(.6);
    opacity: .1;
    z-index: 7
}

.bee3D--effect__cube .bee3D--before {
    -webkit-transform: translateX(-332px) rotateY(-70deg) translateX(-652px) rotateY(-110deg) translateX(-530px);
    transform: translateX(-332px) rotateY(-70deg) translateX(-652px) rotateY(-110deg) translateX(-530px)
}

.bee3D--effect__cube .bee3D--before-1 {
    -webkit-transform: translateX(-332px) rotateY(-70deg) translateX(-512px);
    transform: translateX(-332px) rotateY(-70deg) translateX(-512px);
    opacity: .5
}

.bee3D--effect__cube .bee3D--after {
    -webkit-transform: translateX(332px) rotateY(70deg) translateX(652px) rotateY(110deg) translateX(530px);
    transform: translateX(332px) rotateY(70deg) translateX(652px) rotateY(110deg) translateX(530px)
}

.bee3D--effect__cube .bee3D--after-1 {
    -webkit-transform: translateX(332px) rotateY(70deg) translateX(512px);
    transform: translateX(332px) rotateY(70deg) translateX(512px);
    opacity: .5
}

.bee3D--effect__arc .bee3D--before {
    -webkit-transform: translateX(-750px) translateY(240px) rotateZ(-17deg) scale(.5);
    transform: translateX(-750px) translateY(240px) rotateZ(-17deg) scale(.5);
    opacity: 0
}

.bee3D--effect__arc .bee3D--before-2 {
    -webkit-transform: translateX(-560px) translateY(160px) rotateZ(-14deg) scale(.6);
    transform: translateX(-560px) translateY(160px) rotateZ(-14deg) scale(.6);
    opacity: .3
}

.bee3D--effect__arc .bee3D--before-1 {
    -webkit-transform: translateX(-350px) translateY(75px) rotateZ(-8deg) scale(.8);
    transform: translateX(-350px) translateY(75px) rotateZ(-8deg) scale(.8);
    opacity: .5
}

.bee3D--effect__arc .bee3D--after {
    -webkit-transform: translateX(750px) translateY(240px) rotateZ(17deg) scale(.5);
    transform: translateX(750px) translateY(240px) rotateZ(17deg) scale(.5);
    opacity: 0
}

.bee3D--effect__arc .bee3D--after-1 {
    -webkit-transform: translateX(350px) translateY(75px) rotateZ(8deg) scale(.8);
    transform: translateX(350px) translateY(75px) rotateZ(8deg) scale(.8);
    opacity: .5
}

.bee3D--effect__arc .bee3D--after-2 {
    -webkit-transform: translateX(560px) translateY(160px) rotateZ(14deg) scale(.6);
    transform: translateX(560px) translateY(160px) rotateZ(14deg) scale(.6);
    opacity: .3
}

.bee3D--effect__wave .bee3D--before {
    -webkit-transform: translateX(-690px) translateY(120px) rotateZ(-6deg) rotateY(-15deg) scale(.4);
    transform: translateX(-690px) translateY(120px) rotateZ(-6deg) rotateY(-15deg) scale(.4);
    opacity: 0
}

.bee3D--effect__wave .bee3D--before-2 {
    -webkit-transform: translateX(-560px) translateY(100px) rotateZ(-14deg) rotateY(-40deg) scale(.55);
    transform: translateX(-560px) translateY(100px) rotateZ(-14deg) rotateY(-40deg) scale(.55);
    opacity: .3
}

.bee3D--effect__wave .bee3D--before-1 {
    -webkit-transform: translateX(-410px) translateY(55px) rotateZ(-11deg) rotateY(-30deg) scale(.8);
    transform: translateX(-410px) translateY(55px) rotateZ(-11deg) rotateY(-30deg) scale(.8);
    opacity: .5
}

.bee3D--effect__wave .bee3D--after {
    -webkit-transform: translateX(690px) translateY(120px) rotateZ(6deg) rotateY(15deg) scale(.4);
    transform: translateX(690px) translateY(120px) rotateZ(6deg) rotateY(15deg) scale(.4);
    opacity: 0
}

.bee3D--effect__wave .bee3D--after-1 {
    -webkit-transform: translateX(410px) translateY(55px) rotateZ(11deg) rotateY(30deg) scale(.8);
    transform: translateX(410px) translateY(55px) rotateZ(11deg) rotateY(30deg) scale(.8);
    opacity: .5
}

.bee3D--effect__wave .bee3D--after-2 {
    -webkit-transform: translateX(560px) translateY(100px) rotateZ(14deg) rotateY(40deg) scale(.55);
    transform: translateX(560px) translateY(100px) rotateZ(14deg) rotateY(40deg) scale(.55);
    opacity: .3
}

.bee3D--effect__spiral-right {
    overflow: hidden
}

.bee3D--effect__spiral-right .bee3D--before {
    -webkit-transform: translateX(-980px) rotateY(-72deg) translateX(-1290px) translate3d(0, 600px, 0);
    transform: translateX(-980px) rotateY(-72deg) translateX(-1290px) translate3d(0, 600px, 0);
    opacity: 0
}

.bee3D--effect__spiral-right .bee3D--before-2 {
    -webkit-transform: translateX(-590px) rotateY(-52deg) translateX(-780px) translate3d(0, 400px, 0);
    transform: translateX(-590px) rotateY(-52deg) translateX(-780px) translate3d(0, 400px, 0);
    opacity: .3
}

.bee3D--effect__spiral-right .bee3D--before-1 {
    -webkit-transform: translateX(-270px) rotateY(-30deg) translateX(-290px) translate3d(0, 200px, 0);
    transform: translateX(-270px) rotateY(-30deg) translateX(-290px) translate3d(0, 200px, 0);
    opacity: .5
}

.bee3D--effect__spiral-right .bee3D--after {
    -webkit-transform: translateX(980px) rotateY(72deg) translateX(1290px) translate3d(0, -600px, 0);
    transform: translateX(980px) rotateY(72deg) translateX(1290px) translate3d(0, -600px, 0);
    opacity: 0
}

.bee3D--effect__spiral-right .bee3D--after-1 {
    -webkit-transform: translateX(270px) rotateY(30deg) translateX(290px) translate3d(0, -200px, 0);
    transform: translateX(270px) rotateY(30deg) translateX(290px) translate3d(0, -200px, 0);
    opacity: .5
}

.bee3D--effect__spiral-right .bee3D--after-2 {
    -webkit-transform: translateX(590px) rotateY(52deg) translateX(780px) translate3d(0, -400px, 0);
    transform: translateX(590px) rotateY(52deg) translateX(780px) translate3d(0, -400px, 0);
    opacity: .3
}

.bee3D--effect__spiral-left {
    overflow: hidden
}

.bee3D--effect__spiral-left .bee3D--before {
    -webkit-transform: translateX(-980px) rotateY(-72deg) translateX(-1290px) translate3d(0, -600px, 0);
    transform: translateX(-980px) rotateY(-72deg) translateX(-1290px) translate3d(0, -600px, 0);
    opacity: 0
}

.bee3D--effect__spiral-left .bee3D--before-2 {
    -webkit-transform: translateX(-590px) rotateY(-52deg) translateX(-780px) translate3d(0, -400px, 0);
    transform: translateX(-590px) rotateY(-52deg) translateX(-780px) translate3d(0, -400px, 0);
    opacity: .3
}

.bee3D--effect__spiral-left .bee3D--before-1 {
    -webkit-transform: translateX(-270px) rotateY(-30deg) translateX(-290px) translate3d(0, -200px, 0);
    transform: translateX(-270px) rotateY(-30deg) translateX(-290px) translate3d(0, -200px, 0);
    opacity: .5
}

.bee3D--effect__spiral-left .bee3D--after {
    -webkit-transform: translateX(980px) rotateY(72deg) translateX(1290px) translate3d(0, 600px, 0);
    transform: translateX(980px) rotateY(72deg) translateX(1290px) translate3d(0, 600px, 0);
    opacity: 0
}

.bee3D--effect__spiral-left .bee3D--after-1 {
    -webkit-transform: translateX(270px) rotateY(30deg) translateX(290px) translate3d(0, 200px, 0);
    transform: translateX(270px) rotateY(30deg) translateX(290px) translate3d(0, 200px, 0);
    opacity: .5
}

.bee3D--effect__spiral-left .bee3D--after-2 {
    -webkit-transform: translateX(590px) rotateY(52deg) translateX(780px) translate3d(0, 400px, 0);
    transform: translateX(590px) rotateY(52deg) translateX(780px) translate3d(0, 400px, 0);
    opacity: .3
}

body {
    font-family: Cairo, sans-serif;
    overflow-x: hidden;
    background: #fff
}

button {
    outline: 0
}

#main {
    position: relative;
    right: 0;
    overflow-x: hidden;
    transition: all .5s ease
}

.rtl {
    direction: rtl
}

nav.topNav {
    background: #555;
    height: 90px;
    position: static;
    overflow: hidden
}

nav.topNav a {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 20px 10px;
    margin: 10px;
    color: #fcfcfc
}

nav.topNav ul li {
    font-size: 16px;
    cursor: pointer;
    transition: all .4s
}

nav.topNav ul li:hover {
    background: #6d6d6d
}

nav.topNav .logo {
    padding: 3px 0;
    margin: 0
}

nav.topNav .logo a {
    padding: 0;
    margin: 0
}

nav.topNav ul li.sign {
    margin: 23px 10px;
    border-radius: 30px;
    font-weight: 700;
    background: #eee
}

nav.topNav ul li.sign a {
    padding: 0;
    color: #333
}

nav.topNav ul li.sign:hover {
    background: #dbdbdb
}

nav.topNav ul li#openNav > a {
    padding: 15px 10px
}

nav.topNav2 {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 5
}

div.ads {
    height: 150px;
    margin: 1px 0
}

nav.sideNav {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    z-index: 65;
    background-color: #2e2e2e;
    overflow-x: hidden;
    transition: all .5s ease
}

nav.sideNav a {
    padding: 10px 17px;
    margin: 5px 0;
    text-decoration: none;
    font-size: 21px;
    color: #eee;
    display: block;
    direction: rtl;
    transition: .3s
}

.offcanvas a:focus, nav.sideNav a:hover {
    color: #f1f1f1;
    background: #111;
    border-right: 15px solid #fff
}

nav.sideNav a#closeNav {
    padding: 5px;
    margin-top: 0;
    cursor: pointer;
    transition: all .5s;
    color: #eee
}

nav.sideNav a img {
    width: 35px;
    margin-left: 20px
}

div.popUp {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(5, 5, 5, .7)
}

div.popUp a {
    text-decoration: none;
    color: #555;
    -webkit-transition: .5s ease;
    transition: .5s ease
}

div.popUp a:hover {
    color: #555
}

div.popUp a > img {
    position: relative;
    top: -15px;
    right: -25px
}

div.popUp .form {
    background: #fff url(https://www.kutub.info/frontEnd/img/popUp_Bg.png) center no-repeat;
    background-size: cover;
    padding: 40px;
    max-width: 600px;
    margin: 40px auto;
    border-radius: 4px;
    box-shadow: 0 4px 10px 4px rgba(19, 35, 47, .3);
    direction: rtl
}

div.popUp .tab-group {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0
}

div.popUp .tab-group:after {
    content: "";
    display: table;
    clear: both
}

div.popUp .tab-group li a {
    display: block;
    text-decoration: none;
    padding: 15px;
    background: rgba(160, 179, 176, .25);
    color: #a0b3b0;
    font-size: 20px;
    float: left;
    width: 50%;
    text-align: center;
    cursor: pointer;
    -webkit-transition: .5s ease;
    transition: .5s ease
}

div.popUp .tab-group li a:hover {
    background: #555;
    color: #fff
}

div.popUp .tab-group .active a {
    background: #555;
    color: #fff
}

div.popUp .tab-content > div:last-child {
    display: none
}

div.popUp h1 {
    text-align: center;
    color: #555;
    font-weight: 300;
    margin: 0 0 40px
}

div.popUp label {
    color: rgba(85, 85, 85, .5);
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    font-size: 22px;
    width: 100%
}

div.popUp label .req {
    margin: 2px;
    color: #e84242
}

div.popUp label.active {
    font-size: 15px
}

div.popUp label.active .req {
    opacity: 0
}

div.popUp label.highlight {
    color: #5e5e5e
}

div.popUp input, div.popUp textarea {
    font-size: 22px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px 7px;
    background: 0 0;
    background-image: none;
    border: none;
    border-bottom: 1px solid #a0b3b0;
    color: #555;
    border-radius: 0;
    -webkit-transition: border-color .25s ease, box-shadow .25s ease;
    transition: border-color .25s ease, box-shadow .25s ease
}

div.popUp input:focus, div.popUp textarea:focus {
    outline: 0;
    border-color: #555
}

div.popUp textarea {
    border: 2px solid #a0b3b0;
    resize: vertical
}

div.popUp .field-wrap {
    position: relative;
    margin-bottom: 40px
}

div.popUp .top-row:after {
    content: "";
    display: table;
    clear: both
}

div.popUp .top-row > div {
    float: left;
    width: 48%;
    margin-right: 4%
}

div.popUp .top-row > div:last-child {
    margin-right: 0
}

div.popUp .button {
    border: 0;
    outline: 0;
    border-radius: 0;
    padding: 15px 0;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: #555;
    color: #fff;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-appearance: none
}

div.popUp .button:focus, div.popUp .button:hover {
    background: #555
}

div.popUp .button-block {
    display: block;
    width: 40%;
    margin: 0 auto;
    border-radius: 20px;
    text-align: center
}

div.popUp .forgot {
    margin: 20px 0;
    text-align: right
}

div.flow {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 7;
    display: none
}

section.firstSection {
    background: url(https://www.kutub.info/frontEnd/img/homeSliderBg.png) center no-repeat;
    background-size: cover;
    overflow-y: hidden;
    box-shadow: 0 5px 30px rgba(68, 66, 61, .68);
    width: 100%
}

section.firstSection div.searchField, section.mini_header div.searchField {
    position: relative;
    display: inline-block;
    top: -60px
}

nav.topNav2 div.searchField form input[type=search], section.firstSection div.searchField form input[type=search], section.mini_header div.searchField form input[type=search] {
    background: transparent url(https://www.kutub.info/frontEnd/img/searchBg.png) center no-repeat;
    color: #333;
    width: 500px;
    max-width: 100%;
    height: 45px;
    border-radius: 10px;
    line-height: 45px;
    padding: 5px 55px 5px 0;
    margin-top: 10px;
    direction: rtl;
    font-size: 30px;
    outline: 0;
    border: none
}

nav.topNav2 div.searchField form input[type=search] {
    max-width: 100%;
    width: 100%;
    background: #fcfcfc
}

section.firstSection div.searchField form input[type=search]::-webkit-input-placeholder, section.mini_header div.searchField form input[type=search]::-webkit-input-placeholder {
    color: #777;
    font-size: 25px
}

section.firstSection div.searchField form input[type=search]:-moz-placeholder, section.mini_header div.searchField form input[type=search]:-moz-placeholder {
    color: #777;
    font-size: 25px
}

section.firstSection div.searchField form input[type=search]::-moz-placeholder, section.mini_header div.searchField form input[type=search]::-moz-placeholder {
    color: #777;
    font-size: 25px
}

section.firstSection div.searchField form input[type=search]:-ms-input-placeholder, section.mini_header div.searchField form input[type=search]:-ms-input-placeholder {
    color: #777;
    font-size: 25px
}

section.firstSection div.searchField form input[type=search] {
    margin-top: 50px
}

nav.topNav2 div.searchField form button, section.firstSection div.searchField form button, section.mini_header div.searchField form button {
    background: 0 0;
    border: 0;
    position: absolute;
    top: 54px;
    right: 0
}

nav.topNav2 div.searchField form button {
    top: 14px;
    right: 14px
}

section.mini_header div.searchField form button {
    top: 14px
}

nav.topNav2 div.searchField form button img, section.firstSection div.searchField form button img, section.mini_header_about div.searchField form button img, section.mini_header_addBook div.searchField form button img, section.mini_header_ads div.searchField form button img, section.mini_header_contact div.searchField form button img, section.mini_header_help div.searchField form button img, section.mini_header_library div.searchField form button img, section.mini_header_websites div.searchField form button img {
    width: 75%
}

section.firstSection div.bookSlider {
    margin: 0 auto -20px;
    position: relative;
    top: 35px
}

section.secondSection {
    padding-top: 50px
}

section.secondSection div.welcome h1.h1 {
    color: #e99405;
    font-weight: 700
}

section.secondSection div.welcome p {
    color: #666465;
    font-size: 21px
}

section.secondSection div.welcome ul li i.fa-facebook-square {
    color: #3b55a0;
    cursor: pointer
}

section.secondSection div.welcome ul li i.fa-twitter-square {
    color: #50abf2;
    cursor: pointer
}

section.secondSection div.welcome div.fbLike, section.secondSection div.welcome div.twFollow {
    display: none;
    margin-top: 30px
}

section.thirdSection {
    position: relative;
    overflow: hidden
}

section.thirdSection div.bestBook h1.h1 {
    padding: 50px 20px 0;
    direction: rtl;
    font-weight: 700
}

#demo {
    margin-top: 250px;
    margin-bottom: 500px
}

.bee3D--slide {
    width: 250px;
    margin-left: -122px
}

.bee3D--slide > img {
    box-shadow: 3px 7px 10px #ccc
}

section.fourthsection div.addBook a, section.thirdSection div.more a {
    display: inline-block;
    padding: 12px 50px;
    background: #ffae02;
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    border-radius: 15px;
    margin-top: -10px
}

section.fourthsection {
    padding: 40px 0
}

section.fourthsection div.recentlyBook h1.h1 {
    padding: 50px 20px 0;
    direction: rtl;
    font-weight: 700
}

section.fourthsection div.carousel {
    padding-bottom: 50px;
    margin-bottom: 50px
}

section.fourthsection div.carousel .carousel-indicators {
    z-index: 1
}

section.fourthsection div.carousel .carousel-indicators li {
    border: 1.5px solid #545454;
    background-color: #545454;
    width: 12px;
    height: 12px;
    margin: 20px 30px -20px
}

section.fourthsection div.carousel .carousel-indicators .active {
    width: 15px;
    height: 15px;
    background-color: #fff
}

section.fourthsection div.carousel div.carousel-inner div.bookItem {
    width: 10%;
    display: inline-block;
    position: relative;
    margin: 2% 7%;
    cursor: pointer
}

section.fourthsection div.carousel div.carousel-inner div.bookItem > img {
    box-shadow: 6px 7px 15px #ccc
}

section.fourthsection div.carousel div.carousel-inner div.bookItem a {
    text-decoration: none;
    color: inherit
}

section.fourthsection div.carousel div.carousel-inner div.bookItem div.carousel-caption {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #1e3138;
    opacity: 0;
    transition: all .8s
}

section.fourthsection div.carousel div.carousel-inner div.bookItem div.carousel-caption p.details {
    display: block;
    text-align: center;
    margin: 20px auto;
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    background: #222
}

section.mini_header {
    min-height: 420px;
    color: #fff;
    padding: 30px;
    margin-bottom: 50px;
    background-size: cover;
    position: relative
}

section.mini_header h1.h1 {
    margin: 8% auto
}

section.mini_header_help {
    background: #1c3051 url(https://www.kutub.info/frontEnd/img/help_header.png) center no-repeat;
    background-size: cover
}

.read, .uncompress {
    margin: 25px 0;
    direction: rtl;
    color: #5e5e5e
}

.uncompress .btn {
    font-weight: 700;
    padding: 15px 25px
}

section.mini_header_addBook {
    background: url(https://www.kutub.info/frontEnd/img/addBook_header.png) center no-repeat;
    background-size: cover
}

section.addBook div.dataInput .h3 {
    display: inline-block;
    color: #555;
    padding: 25px 35px;
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 3px 7px 10px rgba(0, 0, 0, .2)
}

section.addBook div.dataInput input, section.addBook div.dataInput textarea {
    direction: rtl;
    background: #fff;
    width: 500px;
    max-width: 95%;
    padding: 15px;
    margin: 15px 0;
    line-height: 1;
    font-size: 21px;
    border: none;
    border-radius: 15px;
    box-shadow: 3px 10px 15px rgba(0, 0, 0, .2)
}

section.addBook div.dataInput input, section.addBook div.dataInput textarea:focus {
    outline: 0;
    border-radius: 15px
}

section.addBook div.dataInput select {
    width: 500px;
    max-width: 95%
}

section.addBook div.dataInput button, section.addBook div.dataInput input[type=file]::-webkit-file-upload-button {
    border-radius: 5px;
    color: #fff;
    font-size: 21px;
    line-height: 1;
    padding: 10px 20px;
    border: none;
    margin: 25px 20px 25px 0
}

section.addBook div.dataInput input[type=file]::-webkit-file-upload-button {
    background: #727272
}

section.addBook div.dataInput input[type=file]::-webkit-file-upload-button {
    margin: 0
}

section.addBook div.dataInput textarea {
    resize: none
}

section.addBook div.dataInput input[type=radio] {
    margin: 7px 14px 30px 7px
}

section.addBook div.dataInput #imgInp {
    display: inline-block;
    width: 185px;
    color: transparent;
    padding: 15px;
    margin: 20px
}

section.addBook div.dataInput img.preview {
    width: 350px;
    max-width: 100%;
    display: block;
    height: auto;
    clear: both;
    margin: 20px auto;
    box-shadow: 3px 3px 10px
}

section.addBook div.dataInput input[type=file]::-webkit-file-upload-button {
    color: #fff
}

section.addBook .uploadBook {
    float: none;
    margin: 30px auto
}

section.addBook .authorName {
    display: none
}

section.addBook button[type=submit] {
    color: #fff;
    background-color: #727272;
    border-color: #727272;
    font-size: 14px;
    padding: 15px 25px;
    background-image: none;
    border-radius: 5px;
    margin: 25px
}

.bookBg {
    background: transparent url(https://www.kutub.info/frontEnd/img/bookBg.png) 0 center no-repeat;
    background-size: 50%;
    background-position: bottom left
}

section.mini_header_library {
    background: #667071 url(https://www.kutub.info/frontEnd/img/library_header.png) center no-repeat;
    overflow: hidden;
    min-height: 600px
}

section.mini_header_library * {
    position: relative
}

.cn-button .h1 {
    font-size: 18px
}

.cn-button {
    position: absolute;
    top: 100%;
    left: 25px;
    z-index: 4;
    margin-top: -1.25em;
    margin-left: -2.25em;
    padding-top: 0;
    width: 4.5em;
    height: 4.5em;
    border: none;
    border-radius: 50%;
    background: 0 0;
    background-color: #fff;
    color: #52be7f;
    text-align: center;
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-backface-visibility: hidden
}

.csstransforms .cn-wrapper {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 3;
    margin-top: -13.5em;
    margin-left: -13.5em;
    width: 27em;
    height: 23em;
    border-radius: 50%;
    background: 0 0;
    opacity: 0;
    -webkit-transition: all .3s ease .3s;
    -moz-transition: all .3s ease .3s;
    transition: all .3s ease .3s;
    -webkit-transform: scale(.1);
    -ms-transform: scale(.1);
    -moz-transform: scale(.1);
    transform: scale(.1);
    pointer-events: none
}

.csstransforms .cn-wrapper:after {
    content: ".";
    display: block;
    font-size: 2em;
    width: 6.2em;
    height: 6.2em;
    position: absolute;
    left: 50%;
    margin-left: -3.1em;
    top: 50%;
    margin-top: -3.1em;
    border-radius: 50%;
    z-index: 10;
    color: transparent
}

.csstransforms .opened-nav {
    border-radius: 50%;
    opacity: 1;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: scale(-1);
    -moz-transform: scale(-1);
    -ms-transform: scale(-1);
    transform: scale(-1);
    pointer-events: auto
}

.csstransforms .cn-wrapper li {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    margin-top: 0;
    margin-left: -10em;
    width: 10em;
    height: 10em;
    font-size: 1.5em;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: rotate(76deg) skew(60deg);
    -moz-transform: rotate(76deg) skew(60deg);
    -ms-transform: rotate(76deg) skew(60deg);
    transform: rotate(76deg) skew(60deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    pointer-events: none
}

.csstransforms .cn-wrapper li a {
    position: absolute;
    right: -7.25em;
    bottom: -7.25em;
    display: block;
    width: 15.5em;
    height: 14.5em;
    border-radius: 50%;
    background: #1a232c;
    background: -webkit-radial-gradient(transparent 35%, #1a232c 35%);
    background: -moz-radial-gradient(transparent 35%, #1a232c 35%);
    background: radial-gradient(transparent 35%, #1a232c 35%);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 1.3em;
    line-height: 2;
    -webkit-transform: skew(-60deg) rotate(-75deg) scale(1);
    -moz-transform: skew(-60deg) rotate(-75deg) scale(1);
    -ms-transform: skew(-60deg) rotate(-75deg) scale(1);
    transform: skew(-60deg) rotate(-75deg) scale(1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: auto
}

.csstransforms .cn-wrapper li a span {
    position: relative;
    top: 1.2em;
    display: block;
    font-size: .6em;
    text-transform: uppercase;
    -webkit-transform: scale(-1);
    -moz-transform: scale(-1);
    -ms-transform: scale(-1);
    transform: scale(-1)
}

.csstransforms .cn-wrapper li a:active, .csstransforms .cn-wrapper li a:focus, .csstransforms .cn-wrapper li a:hover {
    background: -webkit-radial-gradient(transparent 35%, #449e6a 35%);
    background: -moz-radial-gradient(transparent 35%, #449e6a 35%);
    background: radial-gradient(transparent 35%, #449e6a 35%)
}

.csstransforms .cn-wrapper li a:focus {
    position: fixed
}

.csstransforms .opened-nav li {
    -webkit-transition: all .3s ease .3s;
    -moz-transition: all .3s ease .3s;
    transition: all .3s ease .3s
}

.csstransforms .opened-nav li:first-child {
    -webkit-transform: rotate(-20deg) skew(60deg);
    -moz-transform: rotate(-20deg) skew(60deg);
    -ms-transform: rotate(-20deg) skew(60deg);
    transform: rotate(-20deg) skew(60deg)
}

.csstransforms .opened-nav li:nth-child(2) {
    -webkit-transform: rotate(12deg) skew(60deg);
    -moz-transform: rotate(12deg) skew(60deg);
    -ms-transform: rotate(12deg) skew(60deg);
    transform: rotate(12deg) skew(60deg)
}

.csstransforms .opened-nav li:nth-child(3) {
    -webkit-transform: rotate(44deg) skew(60deg);
    -moz-transform: rotate(44deg) skew(60deg);
    -ms-transform: rotate(44deg) skew(60deg);
    transform: rotate(44deg) skew(60deg)
}

.csstransforms .opened-nav li:nth-child(4) {
    -webkit-transform: rotate(76deg) skew(60deg);
    -moz-transform: rotate(76deg) skew(60deg);
    -ms-transform: rotate(76deg) skew(60deg);
    transform: rotate(76deg) skew(60deg)
}

.csstransforms .opened-nav li:nth-child(5) {
    -webkit-transform: rotate(108deg) skew(60deg);
    -moz-transform: rotate(108deg) skew(60deg);
    -ms-transform: rotate(108deg) skew(60deg);
    transform: rotate(108deg) skew(60deg)
}

.csstransforms .opened-nav li:nth-child(6) {
    -webkit-transform: rotate(140deg) skew(60deg);
    -moz-transform: rotate(140deg) skew(60deg);
    -ms-transform: rotate(140deg) skew(60deg);
    transform: rotate(140deg) skew(60deg)
}

.csstransforms .opened-nav li:nth-child(7) {
    -webkit-transform: rotate(172deg) skew(60deg);
    -moz-transform: rotate(172deg) skew(60deg);
    -ms-transform: rotate(172deg) skew(60deg);
    transform: rotate(172deg) skew(60deg)
}

.no-csstransforms .cn-wrapper {
    overflow: hidden;
    margin: 10em auto;
    padding: .5em;
    text-align: center
}

.no-csstransforms .cn-wrapper ul {
    display: inline-block
}

.no-csstransforms .cn-wrapper li {
    float: left;
    width: 5em;
    height: 5em;
    background-color: #fff;
    text-align: center;
    font-size: 1em;
    line-height: 5em
}

.no-csstransforms .cn-wrapper li a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none
}

.no-csstransforms .cn-wrapper li a:active, .no-csstransforms .cn-wrapper li a:focus, .no-csstransforms .cn-wrapper li a:hover {
    background-color: #f8f8f8
}

.no-csstransforms .cn-wrapper li.active a {
    background-color: #6f325c;
    color: #fff
}

.no-csstransforms .cn-button {
    display: none
}
.hide {
    display: none;
    background: #5d5353;
    width: 130px;
    text-align: center;
    color: white;
    position: absolute;
    top: 36px;
    left: 40px;
    padding: 5px;
    border-radius: 6px;
}

.myDIV:hover + .hide {
    display: block;
    transition: 0.3s;
}

@media only screen and (max-width: 620px) {
    .no-csstransforms li {
        width: 4em;
        height: 4em;
        line-height: 4em
    }
}

@media only screen and (max-width: 500px) {
    .no-ccstransforms .cn-wrapper {
        padding: .5em
    }

    .no-csstransforms .cn-wrapper li {
        width: 4em;
        height: 4em;
        font-size: .9em;
        line-height: 4em
    }
}

@media only screen and (max-width: 480px) {
    .csstransforms .cn-wrapper {
        font-size: .68em
    }

    .cn-button {
        font-size: 1em
    }
}

@media only screen and (max-width: 420px) {
    .no-csstransforms .cn-wrapper li {
        width: 100%;
        height: 3em;
        line-height: 3em
    }
}

@media only screen and (max-width: 768px) {
    .clspdtp{
        padding-top: 30px;
    }
}

.s {
    -webkit-animation: r0 1s 0s ease-out infinite;
    -moz-animation: r0 1s 0s ease-out infinite;
    animation: r0 1s 0s ease-out infinite
}

.s:hover {
    -webkit-animation: r20 .5s .4s ease-out infinite;
    -moz-animation: r20 .5s .4s ease-out infinite;
    animation: r20 .5s .4s ease-out infinite
}

@-webkit-keyframes r0 {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0 0 rgba(32, 34, 33, .2), 0 0 0 0 rgba(26, 255, 179, 0)
    }
    10% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, .5), 0 0 12px 10px rgba(32, 34, 33, .2), 0 0 12px 14px rgba(26, 255, 179, .5)
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0 20px rgba(32, 34, 33, .2), 0 0 0 20px rgba(26, 255, 179, 0)
    }
}

@-moz-keyframes r0 {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0 0 rgba(32, 34, 33, .2), 0 0 0 0 rgba(26, 255, 179, 0)
    }
    10% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, .5), 0 0 12px 10px rgba(32, 34, 33, .2), 0 0 12px 14px rgba(26, 255, 179, .5)
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0 20px rgba(32, 34, 33, .2), 0 0 0 20px rgba(26, 255, 179, 0)
    }
}

@keyframes r0 {
    0% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0 0 rgba(32, 34, 33, .2), 0 0 0 0 rgba(26, 255, 179, 0)
    }
    10% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, .5), 0 0 12px 10px rgba(32, 34, 33, .2), 0 0 12px 14px rgba(26, 255, 179, .5)
    }
    100% {
        box-shadow: 0 0 8px 6px rgba(26, 255, 179, 0), 0 0 0 20px rgba(32, 34, 33, .2), 0 0 0 20px rgba(26, 255, 179, 0)
    }
}

@-webkit-keyframes r20 {
    from {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, .5), 0 0 12px 10px rgba(32, 34, 33, .2), 0 0 12px 14px rgba(255, 26, 26, .5)
    }
    to {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 20px rgba(32, 34, 33, .2), 0 0 4px 21px rgba(255, 26, 26, 0)
    }
}

@-moz-keyframes r20 {
    from {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, .5), 0 0 12px 10px rgba(32, 34, 33, .2), 0 0 12px 14px rgba(255, 26, 26, .5)
    }
    to {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 20px rgba(32, 34, 33, .2), 0 0 4px 21px rgba(255, 26, 26, 0)
    }
}

@keyframes r20 {
    from {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, .5), 0 0 12px 10px rgba(32, 34, 33, .2), 0 0 12px 14px rgba(255, 26, 26, .5)
    }
    to {
        box-shadow: 0 0 8px 6px rgba(255, 26, 26, 0), 0 0 4px 20px rgba(32, 34, 33, .2), 0 0 4px 21px rgba(255, 26, 26, 0)
    }
}

hr {
    margin-top: 30px;
    height: 3px;
    background: #b7b7b7
}

.subHeader {
    background: #fff;
    color: #525252;
    margin-top: -50px;
    padding: 30px 40px;
    font-size: 3em;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

@media screen and (max-width: 450px) {
    .subHeader {
        font-size: 1.9em
    }
}

section.library h2.h2 {
    direction: rtl
}

section.library a {
    display: block;
    text-decoration: none
}

section.library div.libraryBook {
    margin-top: 50px;
    margin-bottom: 50px
}

section.library div.libraryBook p {
    direction: rtl
}

section.library table {
    direction: rtl;
    margin: 50px auto
}

section.library table thead {
    color: #fff;
    background: #464646;
    font-size: 25px
}

section.library table tbody {
    font-size: 18px
}

section.library .table-hover > tbody > tr:hover {
    background-color: rgba(153, 153, 153, .6);
    color: #000
}

section.bookBage div.bookCover {
    margin: 50px auto
}

section.bookBage div.bookCover img {
    box-shadow: 5px 5px 8px #ccc
}

section.bookBage table {
    direction: rtl;
    text-align: right
}

section.bookBage table td, section.bookBage table th {
    text-align: right;
    border: none;
    padding: 15px 0;
    font-size: 20px
}

section.bookBage .badge {
    font-size: 18px
}

section.bookBage .downShare {
    position: relative;
    color: #1abede;
    cursor: pointer;
    overflow: hidden
}

section.bookBage .downShare p {
    margin-top: 10px
}

section.bookBage .downShare div {
    display: inline-block;
    margin: 25px 50px 40px
}

section.bookBage #share-buttons {
    position: absolute;
    top: 20px;
    right: -1000px
}

.move {
    right: 120px !important
}

section.bookBage #share-buttons img {
    width: 50px;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline-block;
    transition: all .35s ease-in-out
}

section.bookBage #share-buttons img:hover {
    transform: scale(1.2)
}

section.mini_header_about {
    background: #7f7569 url(https://www.kutub.info/frontEnd/img/about_header.png) no-repeat;
    background-position: center;
    background-size: cover
}

section.about {
    color: #5e5e5e;
    direction: rtl
}

section.mini_header_contact {
    background: grey url(https://www.kutub.info/frontEnd/img/contact_header.png) center no-repeat;
    background-size: cover
}

section.contact {
    color: #5e5e5e;
    direction: rtl
}

section.contact form.contactForm {
    background: url(https://www.kutub.info/frontEnd/img/sendBg.png) center no-repeat;
    background-size: contain;
    margin: 40px 0;
    padding: 60px 0
}

section.contact form.contactForm textarea {
    resize: none
}

section.contact form.contactForm input, section.contact form.contactForm textarea {
    width: 500px;
    max-width: 100%;
    padding: 15px;
    margin: 20px 0;
    line-height: 1;
    font-size: 21px;
    border: none;
    border-radius: 15px;
    box-shadow: 3px 10px 15px rgba(0, 0, 0, .2)
}

section.contact form.contactForm input, section.contact form.contactForm textarea:focus {
    outline: 0;
    border-radius: 15px
}

section.contact form.contactForm button {
    border-radius: 15px;
    background: #565656;
    color: #fff;
    font-size: 21px;
    line-height: 1;
    padding: 20px 50px;
    margin: 25px 0
}

section.mini_header_websites {
    background: #3d5b59 url(https://www.kutub.info/frontEnd/img/websites_header.png) center no-repeat;
    background-size: cover
}

section.websites {
    color: #5e5e5e
}

section.websites ul li {
    margin: 20px;
    transition: all .35s ease-in-out
}

section.websites ul li:hover {
    transform: scale(1.03)
}

section.mini_header_ads {
    background: #7b786a url(https://www.kutub.info/frontEnd/img/ads_header.png) center no-repeat;
    background-size: cover
}

section.adsPage {
    overflow-x: visible
}

section.adsPage div.title {
    position: relative;
    margin: 0 auto 50px;
    width: 300px;
    height: 150px;
    line-height: 150px;
    background: #e62e30;
    color: #fff;
    font-size: 30px
}

section.adsPage div.title::after, section.adsPage div.title::before {
    content: '';
    border-style: solid;
    border-width: 45px 30px 45px 0;
    border-color: #e62e30 transparent;
    position: absolute;
    top: 25px;
    right: -140px;
    width: 55px
}

section.adsPage div.title::after {
    border-width: 45px 0 45px 30px;
    left: -140px
}

section.adsPage div.title div.left_div, section.adsPage div.title div.right_div {
    position: absolute;
    top: 7px;
    right: -65px;
    height: 130px;
    width: 45px;
    background: #e62e30
}

section.adsPage div.title div.left_div {
    left: -65px
}

section.adsPage div.counting {
    margin-bottom: 50px;
    font-size: 90px;
    text-align: center
}

section.adsPage div.forMobAds p {
    padding: 0
}

section.adsPage button {
    border-radius: 5px;
    background: #fcbc05;
    color: #fff;
    font-size: 35px;
    line-height: 1;
    padding: 20px 50px;
    margin: 25px 0
}

section.adsPage button a {
    color: inherit;
    display: block
}

.shadow, section.mini_header_about, section.mini_header_ads, section.mini_header_contact, section.mini_header_help {
    box-shadow: 5px 4px 8px #555
}

footer {
    background: #4c4c4c;
    color: #fff;
    direction: rtl
}

footer div {
    margin: 20px auto 0
}

footer div.lowerList ul li, footer div.upperList ul li {
    margin: 0 20px;
    text-align: center;
    padding: 7px 10px;
    font-size: 18px;
    border-top: 1px solid;
    border-bottom: 1px solid
}

footer div.lowerList ul li:hover, footer div.upperList ul li:hover {
    color: #4c4c4c;
    background: #fff
}

footer a, footer a:hover, footer div.socialMedia a, footer div.socialMedia a:hover {
    text-decoration: none;
    color: inherit;
    display: block
}

footer div.socialMedia {
    direction: ltr
}

footer div.socialMedia p {
    display: inline-block;
    margin: 0 6px;
    position: relative;
    top: -10px
}

footer div.copyright {
    background: #171717;
    text-align: center;
    padding: 5px;
    direction: ltr
}

footer div.copyright p {
    margin: 0 auto
}

.empty {
    padding: 40px;
    font-weight: 600;
    text-align: center;
    margin: 20px auto 50px;
    margin-top: 200px;
    color: #c0392b;
    width: 70%;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 20px;
    -webkit-box-shadow: 0 0 21px -2px rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 0 21px -2px rgba(0, 0, 0, .75);
    box-shadow: 0 0 21px -2px rgba(0, 0, 0, .75)
}

.rating:not(:checked) > input {
    position: absolute;
    top: -9999px;
    clip: rect(0, 0, 0, 0)
}

.rating:not(:checked) > label {
    float: right;
    width: 1em;
    padding: 0 .1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 200%;
    line-height: 1.2;
    color: #ddd;
    text-shadow: 1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0, 0, 0, .5)
}

.rating:not(:checked) > label:before {
    content: '★ '
}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow: 1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0, 0, 0, .5)
}

.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow: 1px 1px #daa520, 2px 2px #b57340, .1em .1em .2em rgba(0, 0, 0, .5)
}

.rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow: 1px 1px #daa520, 2px 2px #b57340, .1em .1em .2em rgba(0, 0, 0, .5)
}

.rating > label:active {
    position: relative;
    top: 2px;
    left: 2px
}

.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    z-index: 10;
    bottom: 40px;
    right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: #555 url(https://www.kutub.info/frontEnd/img/cd-top-arrow.svg) no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s
}

.cd-top.cd-fade-out, .cd-top.cd-is-visible, .no-touch .cd-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s
}

.cd-top.cd-is-visible {
    visibility: visible;
    opacity: 1
}

.cd-top.cd-fade-out {
    opacity: .5
}

.no-touch .cd-top:hover {
    background-color: #e86256;
    opacity: 1
}

section.notFound {
    color: #777
}

.notFound .h1 {
    font-weight: 700;
    font-size: 15.5em
}

.notFound .book_404 > img {
    margin-left: 310px
}

.notFound .book_404 a {
    display: block;
    position: relative;
    text-align: center
}

.notFound .book_404 a img {
    position: absolute;
    bottom: 50px;
    margin-left: -10px;
    max-width: 100%;
    cursor: pointer
}

@media screen and (max-width: 1024px) {
    div.searchFieldRight {
        right: -75px
    }

    section.mini_header {
        margin-top: -6px
    }

    section.mini_header h1.h1 {
        margin: 11% auto 0
    }

    .move {
        right: 30px !important
    }

    .cn-button h1.h1 {
        margin: 8% auto !important
    }

    .shadow, section.firstSection, section.mini_header_about, section.mini_header_ads, section.mini_header_contact, section.mini_header_help {
        box-shadow: none
    }

    .cd-top {
        height: 60px;
        width: 60px;
        right: 30px;
        bottom: 30px
    }

    .notFound .book_404 a img {
        bottom: -100px;
        margin-left: -40px
    }
}

@media screen and (max-width: 768px) {
    nav.topNav ul li {
        font-size: 14px
    }

    nav.topNav a {
        padding: 20px 0
    }

    nav.topNav ul li.sign {
        margin: 23px 0
    }

    nav.topNav ul li.sign:last-of-type {
        display: none
    }

    div.bookSlider div.slide {
        width: 240px !important
    }

    div.searchFieldRight {
        right: -75px
    }

    nav.topNav2 div.searchField form input[type=search], section.firstSection div.searchField form input[type=search] {
        width: 550px
    }

    section.firstSection div.bookSlider div.bx-controls-direction {
        display: none
    }

    section.secondSection div.welcome {
        text-align: center
    }

    section.bookBage div.bookCover {
        float: none !important
    }

    section.mini_header {
        padding: 30px 0;
        overflow: hidden
    }

    .move {
        right: -10px !important;
        top: 105px !important
    }

    .read, .uncompress {
        margin: 25px
    }

    .cn-button {
        margin-top: 1.5em
    }

    footer div.lowerList ul li, footer div.upperList ul li {
        margin: 0 10px
    }

    .cd-top {
        right: 20px;
        bottom: 20px
    }

    .notFound .book_404 a img {
        margin-left: -55px
    }
}

@media screen and (max-width: 480px) {
    nav.topNav .logo {
        padding: 3px 50px
    }

    nav.sideNav {
        padding-top: 0;
        right: -450px
    }

    nav.sideNav a {
        padding: 12px 17px;
        font-size: 18px
    }

    nav.topNav ul li:not(#openNav):not(.logo) {
        display: none
    }

    div.searchFieldRight {
        right: -35px;
        top: -3px
    }

    nav.topNav2 div.searchField form input[type=search], section.firstSection div.searchField form input[type=search] {
        width: 280px
    }

    section.firstSection div.bookSlider {
        margin: 0 auto -135px
    }

    div.popUp .form {
        margin: 25px auto;
        padding: 30px 15px
    }

    div.bookSlider div.slide {
        width: 270px !important
    }

    .bee3D--slide > img {
        display: block;
        width: 70%;
        margin: 0 auto 15px;
        height: 65%
    }

    section.mini_header {
        min-height: 520px
    }

    section.mini_header div.searchField {
        display: block
    }

    section.secondSection div.welcome h1.h1 {
        font-size: 27px;
        margin-bottom: 15px
    }

    section.fourthsection div.carousel {
        margin-bottom: 0
    }

    section.fourthsection div.carousel div.carousel-inner div.bookItem {
        width: 50%;
        margin: 6% 25%
    }

    section.fourthsection div.carousel .carousel-indicators li {
        margin: auto;
        width: 19px;
        height: 19px
    }

    section.fourthsection div.carousel .carousel-indicators .active {
        width: 20px;
        height: 20px
    }

    section.fourthsection div.carousel div.carousel-inner div.bookItem > img {
        margin: 25px 0
    }

    section.fourthsection div.carousel div.carousel-inner div.bookItem a {
        color: #fff
    }

    section.fourthsection div.recentlyBook h1.h1 {
        font-size: 28px
    }

    section.mini_header h1.h1 {
        margin: 30% auto 0
    }

    section.mini_header_about {
        background-position: -300px 0
    }

    .cn-button {
        margin-top: 2.5em;
        margin-left: -3.25em;
        width: 6.5em;
        height: 6.5em
    }

    .cn-button .h1 {
        font-size: 23px
    }

    section.bookBage table th {
        width: 35%
    }

    section.addBook .qq-uploader {
        min-height: 250px;
        max-width: 90%;
        margin: 0 auto
    }

    section.contact form.contactForm button {
        width: 100%
    }

    section.adsPage button {
        width: 100%
    }

    footer ul.list-inline {
        padding-right: 0
    }

    footer div.lowerList ul li, footer div.upperList ul li {
        margin: 10px;
        display: block;
        padding: 7px 0;
        font-size: 16px
    }

    .notFound .h2 {
        text-align: center
    }

    .notFound .h1 {
        font-size: 11em
    }

    .notFound .book_404 a img {
        margin-left: -88px
    }
}
.ddd{
    display: flex;
}
@media only screen and (max-width : 767px) {
    .ddd{
        display: block;
    }
}
@media screen and (max-width: 320px) {
    div.searchFieldRight {
        right: -12px;
        padding: 0
    }

    nav.topNav2 div.searchField form button {
        right: 0
    }

    nav.topNav .logo {
        padding: 3px 30px
    }

    section.bookBage #share-buttons {
        margin: 0
    }

    .move {
        right: 27px !important;
        top: 300px !important
    }

    .notFound .book_404 a img {
        margin-left: -80px
    }
}

.paginate {
    text-align: center
}

input, input::-webkit-input-placeholder {
    font-size: 20px !important;
    line-height: 3 !important
}

@media screen and (min-width: 768px) {
    .search-page .adjust-hight {
        height: 300px;
        overflow: hidden
    }
}

@media screen and (max-width: 767px) and (min-width: 3501px) {
    .search-page .adjust-hight {
        height: 300px;
        overflow: hidden
    }
}

@media screen and (max-width: 350px) {
    .search-page .adjust-hight {
        height: 300px
    }
}

@media screen and (max-width: 450px) {
    section.firstSection div.searchField form input[type=search], section.mini_header div.searchField form input[type=search] {
        height: 65px
    }

    section.firstSection div.searchField form button {
        background: 0 0;
        border: 0;
        position: absolute;
        top: 60px;
        right: 10px;
        height: 52px;
        width: 36px
    }

    .ios-device section.firstSection div.searchField form button {
        background: 0 0;
        border: 0;
        position: absolute;
        top: 80px;
        right: 10px;
        height: 52px;
        width: 36px
    }

    .ios-device section.mini_header div.searchField form button {
        top: 45px
    }

    .ios-device nav.topNav2 div.searchField form input[type=search] {
        height: 67px
    }

    .ios-device nav.topNav2 div.searchField form button {
        top: 37px
    }

    .ios-device #topNav {
        height: 100px
    }
}